@checkstack/theme-frontend 0.1.27 → 0.1.28

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @checkstack/theme-frontend
 
+## 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.28",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

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/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,
+    },
   ],
 });