Sticky tweaks: only show in prod mode (#4789)

* Sticky tweaks: only show in prod mode

Only display the sticky badge in prod mode.

Display the mini-badge for mobile and tablet; full badge only displayed at
desktop width.

* Remove localhost checking

reflex/app.py

@@ -1040,7 +1040,7 @@ class App(MiddlewareMixin, LifespanMixin):
         self._validate_var_dependencies()
         self._setup_overlay_component()
         self._setup_error_boundary()
-        if config.show_built_with_reflex:
+        if is_prod_mode() and config.show_built_with_reflex:
             self._setup_sticky_badge()
 
         progress.advance(task)

reflex/components/core/sticky.py

@@ -2,14 +2,12 @@
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.colors import color
-from reflex.components.core.cond import color_mode_cond, cond
-from reflex.components.core.responsive import tablet_and_desktop
+from reflex.components.core.cond import color_mode_cond
+from reflex.components.core.responsive import desktop_only
 from reflex.components.el.elements.inline import A
 from reflex.components.el.elements.media import Path, Rect, Svg
 from reflex.components.radix.themes.typography.text import Text
-from reflex.experimental.client_state import ClientStateVar
 from reflex.style import Style
-from reflex.vars.base import Var, VarData
 
 
 class StickyLogo(Svg):
@@ -87,7 +85,7 @@ class StickyBadge(A):
         """
         return super().create(
             StickyLogo.create(),
-            tablet_and_desktop(StickyLabel.create()),
+            desktop_only(StickyLabel.create()),
             href="https://reflex.dev",
             target="_blank",
             width="auto",
@@ -102,34 +100,12 @@ class StickyBadge(A):
         Returns:
             The style of the component.
         """
-        is_localhost_cs = ClientStateVar.create(
-            "is_localhost",
-            default=True,
-            global_ref=False,
-        )
-        localhost_hostnames = Var.create(["localhost", "127.0.0.1", "[::1]"])
-        is_localhost_expr = localhost_hostnames.contains(
-            Var("window.location.hostname", _var_type=str).guess_type(),
-        )
-        check_is_localhost = Var(
-            f"useEffect(({is_localhost_cs}) => {is_localhost_cs.set}({is_localhost_expr}), [])",
-            _var_data=VarData(
-                imports={"react": "useEffect"},
-            ),
-        )
-        is_localhost = is_localhost_cs.value._replace(
-            merge_var_data=VarData.merge(
-                check_is_localhost._get_all_var_data(),
-                VarData(hooks={str(check_is_localhost): None}),
-            ),
-        )
         return Style(
             {
                 "position": "fixed",
                 "bottom": "1rem",
                 "right": "1rem",
-                # Do not show the badge on localhost.
-                "display": cond(is_localhost, "none", "flex"),
+                "display": "flex",
                 "flex-direction": "row",
                 "gap": "0.375rem",
                 "align-items": "center",