ui update

Author: yujonglee

apps/desktop/src/components/left-sidebar/top-area/settings-button.tsx

@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/react/macro";
 import { getName, getVersion } from "@tauri-apps/api/app";
-import { CogIcon, CpuIcon } from "lucide-react";
+import { CogIcon, CpuIcon, TrainFrontIcon } from "lucide-react";
 import { useState } from "react";
 
 import Shortcut from "@/components/shortcut";
@@ -18,7 +18,7 @@ import { useQuery } from "@tanstack/react-query";
 
 export function SettingsButton() {
   const [open, setOpen] = useState(false);
-  const { userId } = useHypr();
+  const { userId, isPro } = useHypr();
 
   const versionQuery = useQuery({
     queryKey: ["appVersion"],
@@ -52,27 +52,7 @@ export function SettingsButton() {
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="start" className="w-52 p-0">
-        <div
-          className={cn([
-            "px-2 py-3 bg-gradient-to-r rounded-t-md relative overflow-hidden cursor-pointer",
-            "from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800",
-          ])}
-          onClick={handleClickPlans}
-        >
-          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgTCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-70">
-          </div>
-          <div className="flex items-center gap-3 text-white relative z-10">
-            <CpuIcon className="size-8 animate-pulse" />
-            <div>
-              <div className="font-medium">
-                <Trans>Local mode</Trans>
-              </div>
-              <div className="text-xs text-white/80 mt-0.5">
-                Privacy-focused AI
-              </div>
-            </div>
-          </div>
-        </div>
+        {isPro ? <ProMode onClick={handleClickPlans} /> : <LocalMode onClick={handleClickPlans} />}
 
         <div className="p-1">
           <DropdownMenuItem
@@ -96,3 +76,55 @@ export function SettingsButton() {
     </DropdownMenu>
   );
 }
+
+function ProMode({ onClick }: { onClick: () => void }) {
+  return (
+    <div
+      className={cn([
+        "px-2 py-3 bg-gradient-to-r rounded-t-md relative overflow-hidden cursor-pointer",
+        "from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700",
+      ])}
+      onClick={onClick}
+    >
+      <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgTCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-70">
+      </div>
+      <div className="flex items-center gap-3 text-white relative z-10">
+        <TrainFrontIcon className="size-8 animate-pulse" />
+        <div>
+          <div className="font-medium">
+            <Trans>Pro mode</Trans>
+          </div>
+          <div className="text-xs text-white/80 mt-0.5">
+            For professional use
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LocalMode({ onClick }: { onClick: () => void }) {
+  return (
+    <div
+      className={cn([
+        "px-2 py-3 bg-gradient-to-r rounded-t-md relative overflow-hidden cursor-pointer",
+        "from-gray-800 to-gray-900 hover:from-gray-700 hover:to-gray-800",
+      ])}
+      onClick={onClick}
+    >
+      <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDIwIDAgTCAwIDAgTCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNSkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-70">
+      </div>
+      <div className="flex items-center gap-3 text-white relative z-10">
+        <CpuIcon className="size-8 animate-pulse" />
+        <div>
+          <div className="font-medium">
+            <Trans>Local mode</Trans>
+          </div>
+          <div className="text-xs text-white/80 mt-0.5">
+            Privacy-focused AI
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/desktop/src/contexts/hypr.tsx

@@ -9,6 +9,7 @@ export interface HyprContext {
   userId: string;
   onboardingSessionId: string;
   subscription?: Subscription;
+  isPro: boolean;
 }
 
 const HyprContext = createContext<HyprContext | null>(null);
@@ -44,10 +45,15 @@ export function HyprProvider({ children }: { children: React.ReactNode }) {
     return null;
   }
 
+  const value = {
+    userId: userId.data,
+    onboardingSessionId: onboardingSessionId.data,
+    subscription: subscription.data,
+    isPro: subscription.data?.status === "active" || subscription.data?.status === "trialing",
+  };
+
   return (
-    <HyprContext.Provider
-      value={{ userId: userId.data, onboardingSessionId: onboardingSessionId.data, subscription: subscription.data }}
-    >
+    <HyprContext.Provider value={value}>
       {children}
     </HyprContext.Provider>
   );

apps/desktop/src/routes/__root.tsx

@@ -46,9 +46,7 @@ function Component() {
   }, [navigate]);
 
   useEffect(() => {
-    scan({
-      enabled: true,
-    });
+    scan({ enabled: false });
   }, []);
 
   return (