@checkstack/theme-frontend 0.1.27 → 0.1.29

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @checkstack/theme-frontend
 
+## 0.1.29
+
+### Patch Changes
+
+- 4b0934d: Refactored UserMenu to use a responsive grid layout, improved menu item alignment, and implemented a full-screen scrollable portal for mobile devices. Fixed an issue where the UserMenu would instantly close and reopen when clicking the trigger while the menu was open.
+- Updated dependencies [4b0934d]
+  - @checkstack/ui@1.3.6
+  - @checkstack/auth-frontend@0.5.25
+
+## 0.1.28
+
+### Patch Changes
+
+- 286491a: Added automatic FPS detection that enables "Low Power Mode" once for devices running below 50 FPS, ensuring smooth performance even for users unaware of the manual toggle.
+- Updated dependencies [286491a]
+  - @checkstack/ui@1.3.5
+  - @checkstack/auth-frontend@0.5.24
+
 ## 0.1.27
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/theme-frontend",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -14,9 +14,9 @@
   "dependencies": {
     "@checkstack/theme-common": "0.1.8",
     "@checkstack/frontend-api": "0.3.9",
-    "@checkstack/auth-frontend": "0.5.18",
+    "@checkstack/auth-frontend": "0.5.24",
     "@checkstack/common": "0.6.5",
-    "@checkstack/ui": "1.2.1",
+    "@checkstack/ui": "1.3.5",
     "react": "^18.2.0",
     "lucide-react": "^0.344.0"
   },

package/src/components/NavbarPerformanceToggle.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Zap, ZapOff } from "lucide-react";
+import { useApi } from "@checkstack/frontend-api";
+import { authApiRef } from "@checkstack/auth-frontend/api";
+import { Button, usePerformance } from "@checkstack/ui";
+
+/**
+ * Navbar performance toggle button for non-logged-in users.
+ *
+ * Shows a Zap icon button that toggles between high and low performance modes.
+ * Only renders when user is NOT logged in (logged-in users use the toggle in UserMenu).
+ */
+export const NavbarPerformanceToggle = () => {
+  const { manualLowPower, toggleManualLowPower } = usePerformance();
+  const authApi = useApi(authApiRef);
+  const { data: session, isPending } = authApi.useSession();
+
+  // Don't render while loading session
+  if (isPending) {
+    return <React.Fragment />;
+  }
+
+  // Don't render for logged-in users (they use UserMenu toggle)
+  if (session?.user) {
+    return <React.Fragment />;
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleManualLowPower}
+      aria-label={manualLowPower ? "Switch to high performance" : "Switch to low power mode"}
+      className="rounded-full"
+    >
+      {manualLowPower ? <ZapOff className="h-5 w-5 text-muted-foreground" /> : <Zap className="h-5 w-5 text-primary" />}
+    </Button>
+  );
+};

package/src/components/PerformanceToggleMenuItem.tsx

@@ -9,25 +9,27 @@ export const PerformanceToggleMenuItem = () => {
   const { manualLowPower, toggleManualLowPower } = usePerformance();
 
   return (
-    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground">
-      <div className="flex items-center gap-2">
-        {manualLowPower ? (
-          <ZapOff className="h-4 w-4 text-muted-foreground" />
-        ) : (
-          <Zap className="h-4 w-4 text-primary" />
-        )}
-        <div className="flex flex-col">
-          <span>Low Power Mode</span>
-          <span className="text-[10px] text-muted-foreground leading-tight">
-            Disables blurs & animations
-          </span>
+    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors">
+      <div className="flex flex-col flex-1 items-start">
+        <div className="flex items-center w-full">
+          {manualLowPower ? (
+            <ZapOff className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          ) : (
+            <Zap className="h-4 w-4 text-primary shrink-0 mr-3" />
+          )}
+          <span className="flex-1 text-left">Low Power Mode</span>
         </div>
+        <span className="text-[10px] text-muted-foreground mt-1 leading-tight text-left pl-7">
+          Disables blurs & animations
+        </span>
+      </div>
+      <div className="ml-2 shrink-0 flex items-center">
+        <Toggle
+          checked={manualLowPower}
+          onCheckedChange={toggleManualLowPower}
+          aria-label="Toggle low performance mode"
+        />
       </div>
-      <Toggle
-        checked={manualLowPower}
-        onCheckedChange={toggleManualLowPower}
-        aria-label="Toggle low performance mode"
-      />
     </div>
   );
 };

package/src/components/ThemeToggleMenuItem.tsx

@@ -47,17 +47,25 @@ export const ThemeToggleMenuItem = () => {
   };
 
   return (
-    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground">
-      <div className="flex items-center gap-2">
-        {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
-        <span>Dark Mode</span>
+    <div className="flex items-center justify-between w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground rounded-sm transition-colors">
+      <div className="flex flex-col flex-1 items-start">
+        <div className="flex items-center w-full">
+          {isDark ? (
+            <Moon className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          ) : (
+            <Sun className="h-4 w-4 text-muted-foreground shrink-0 mr-3" />
+          )}
+          <span className="flex-1 text-left">Dark Mode</span>
+        </div>
+      </div>
+      <div className="ml-2 shrink-0 flex items-center">
+        <Toggle
+          checked={isDark}
+          onCheckedChange={handleToggle}
+          disabled={setThemeMutation.isPending}
+          aria-label="Toggle dark mode"
+        />
       </div>
-      <Toggle
-        checked={isDark}
-        onCheckedChange={handleToggle}
-        disabled={setThemeMutation.isPending}
-        aria-label="Toggle dark mode"
-      />
     </div>
   );
 };

package/src/index.tsx

@@ -8,6 +8,7 @@ import { ThemeToggleMenuItem } from "./components/ThemeToggleMenuItem";
 import { PerformanceToggleMenuItem } from "./components/PerformanceToggleMenuItem";
 import { ThemeSynchronizer } from "./components/ThemeSynchronizer";
 import { NavbarThemeToggle } from "./components/NavbarThemeToggle";
+import { NavbarPerformanceToggle } from "./components/NavbarPerformanceToggle";
 
 export const themePlugin = createFrontendPlugin({
   metadata: pluginMetadata,
@@ -37,5 +38,11 @@ export const themePlugin = createFrontendPlugin({
       slot: NavbarRightSlot,
       component: NavbarThemeToggle,
     },
+    // Performance toggle button in navbar (for non-logged-in users)
+    {
+      id: "theme.navbar.performance.toggle",
+      slot: NavbarRightSlot,
+      component: NavbarPerformanceToggle,
+    },
   ],
 });