chore: apply pending changes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: jiaweing

apps/desktop/.env.example

@@ -1,20 +1,14 @@
 # Polar License Validation
 
-# API URL (use https://sandbox-api.polar.sh for sandbox, or omit for production)
-VITE_POLAR_API_URL=https://api.polar.sh
-
-# URL of your deployed Hono server (used for customer portal session creation)
-# Local dev: http://localhost:3000  |  Production: https://your-api.example.com
-VITE_POLAR_SERVER_URL=http://localhost:3000
+# Environment: "production" or "sandbox"
+VITE_POLAR_ENV=production
 
 # Get your Organization ID from https://polar.sh
 VITE_POLAR_ORGANIZATION_ID=your-polar-organization-id
 
 # Organization slug for customer portal (e.g., "my-org")
 VITE_POLAR_ORG_SLUG=your-org-slug
 
-# Customer portal URL (use https://sandbox.polar.sh/{org}/portal for sandbox)
-VITE_POLAR_CUSTOMER_PORTAL_URL=https://polar.sh/your-org-slug/portal
 
 # Purchase URL for the license (your Polar product page)
 VITE_POLAR_PURCHASE_URL=https://polar.sh/your-org/products/your-product

apps/desktop/src/components/CommandPalette.tsx

@@ -2,24 +2,34 @@ import { openUrl } from "@tauri-apps/plugin-opener";
 import { Command } from "cmdk";
 import {
   ArchiveIcon,
+  BellIcon,
+  ChevronDownIcon,
+  DownloadIcon,
   FileImageIcon,
+  FlaskConicalIcon,
   FolderIcon,
   FolderPlusIcon,
   GalleryThumbnailsIcon,
+  HistoryIcon,
   Loader2Icon,
   MonitorIcon,
   MoonIcon,
   PlusIcon,
+  RefreshCwIcon,
+  RotateCcwIcon,
   SearchIcon,
   SettingsIcon,
   SparklesIcon,
   SunIcon,
   TrashIcon,
   TvIcon,
+  UploadIcon,
   VideoIcon,
+  Volume2Icon,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { sileo } from "sileo";
+import { checkForUpdate, useUpdateStore } from "@/hooks/use-app-updater";
 import * as sounds from "@/lib/sounds";
 import { searchVideos, type YoutubeVideo } from "@/lib/youtube-api";
 import { getYoutubeApiKey } from "@/lib/youtube-store";
@@ -30,6 +40,8 @@ import {
 } from "@/stores/use-gallery-store";
 import { useTabsStore } from "@/stores/use-tabs-store";
 
+const PROJECTS_PAGE_SIZE = 8;
+
 type Page =
   | "gallery"
   | "ai-generate"
@@ -59,13 +71,34 @@ export function CommandPalette({
 }: CommandPaletteProps) {
   const thumbnails = useGalleryStore((s) => s.thumbnails);
   const setTheme = useAppSettingsStore((s) => s.setTheme);
+  const autoCheckForUpdates = useAppSettingsStore((s) => s.autoCheckForUpdates);
+  const setAutoCheckForUpdates = useAppSettingsStore(
+    (s) => s.setAutoCheckForUpdates
+  );
+  const saveSearchHistory = useAppSettingsStore((s) => s.saveSearchHistory);
+  const setSaveSearchHistory = useAppSettingsStore(
+    (s) => s.setSaveSearchHistory
+  );
+  const experimentalFeaturesEnabled = useAppSettingsStore(
+    (s) => s.experimentalFeaturesEnabled
+  );
+  const setExperimentalFeaturesEnabled = useAppSettingsStore(
+    (s) => s.setExperimentalFeaturesEnabled
+  );
+  const soundsEnabled = useAppSettingsStore((s) => s.soundsEnabled);
+  const setSoundsEnabled = useAppSettingsStore((s) => s.setSoundsEnabled);
+  const setOnboardingCompleted = useAppSettingsStore(
+    (s) => s.setOnboardingCompleted
+  );
   const openTab = useTabsStore((s) => s.openTab);
   const setEditorVisible = useTabsStore((s) => s.setEditorVisible);
+  const checking = useUpdateStore((s) => s.checking);
 
   const [search, setSearch] = useState("");
   const [ytApiKey, setYtApiKey] = useState<string | null>(null);
   const [ytResults, setYtResults] = useState<YoutubeVideo[]>([]);
   const [ytLoading, setYtLoading] = useState(false);
+  const [projectPage, setProjectPage] = useState(1);
 
   useEffect(() => {
     getYoutubeApiKey()
@@ -77,9 +110,14 @@ export function CommandPalette({
     if (!open) {
       setSearch("");
       setYtResults([]);
+      setProjectPage(1);
     }
   }, [open]);
 
+  useEffect(() => {
+    setProjectPage(1);
+  }, [search]);
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
@@ -147,6 +185,40 @@ export function CommandPalette({
     onOpenChange(false);
   };
 
+  const handleCheckForUpdates = () => {
+    sounds.click();
+    onOpenChange(false);
+    checkForUpdate();
+  };
+
+  const handleToggle = (
+    current: boolean,
+    setter: (v: boolean) => Promise<void>,
+    label: string
+  ) => {
+    sounds.click();
+    onOpenChange(false);
+    setter(!current).then(() => {
+      sileo.success({ title: `${label}: ${current ? "Off" : "On"}` });
+    });
+  };
+
+  const handleResetOnboarding = () => {
+    sounds.click();
+    onOpenChange(false);
+    setOnboardingCompleted(false).then(() => {
+      sileo.success({ title: "Onboarding reset" });
+    });
+  };
+
+  const isSearching = search.trim().length > 0;
+  const visibleThumbnails = isSearching
+    ? thumbnails
+    : thumbnails.slice(0, projectPage * PROJECTS_PAGE_SIZE);
+  const remainingProjects =
+    thumbnails.length - projectPage * PROJECTS_PAGE_SIZE;
+  const hasMoreProjects = !isSearching && remainingProjects > 0;
+
   if (!open) return null;
 
   return (
@@ -158,7 +230,7 @@ export function CommandPalette({
       />
 
       {/* palette */}
-      <div className="relative z-10 w-full max-w-[560px] overflow-hidden rounded-xl border border-border bg-popover shadow-2xl">
+      <div className="relative z-10 w-full max-w-[580px] overflow-hidden rounded-xl border border-border bg-popover shadow-2xl">
         <Command
           className="flex flex-col"
           filter={commandFilter}
@@ -167,19 +239,19 @@ export function CommandPalette({
           }}
         >
           {/* input */}
-          <div className="flex items-center gap-2 border-border border-b px-3">
-            <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+          <div className="flex items-center gap-3 border-border border-b px-4">
+            <SearchIcon className="size-5 shrink-0 text-muted-foreground" />
             <Command.Input
               autoFocus
-              className="h-11 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+              className="h-14 w-full bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground"
               onValueChange={setSearch}
               placeholder="Search commands, projects, YouTube..."
               value={search}
             />
           </div>
 
           {/* list */}
-          <Command.List className="max-h-[420px] overflow-y-auto overflow-x-hidden p-1">
+          <Command.List className="max-h-[500px] overflow-y-auto overflow-x-hidden p-1.5">
             <Command.Empty className="py-8 text-center text-muted-foreground text-sm">
               No results found.
             </Command.Empty>
@@ -312,12 +384,140 @@ export function CommandPalette({
               </Item>
             </Group>
 
+            <Separator />
+
+            {/* System */}
+            <Group heading="System">
+              <Item
+                icon={
+                  checking ? (
+                    <Loader2Icon className="animate-spin" />
+                  ) : (
+                    <RefreshCwIcon />
+                  )
+                }
+                keywords={[
+                  "check",
+                  "update",
+                  "version",
+                  "upgrade",
+                  "new version",
+                ]}
+                onSelect={handleCheckForUpdates}
+                value="check-updates"
+              >
+                Check for Updates
+              </Item>
+              <Item
+                icon={<BellIcon />}
+                keywords={["auto", "automatic", "updates", "notify"]}
+                onSelect={() =>
+                  handleToggle(
+                    autoCheckForUpdates,
+                    setAutoCheckForUpdates,
+                    "Auto Updates"
+                  )
+                }
+                suffix={<StateBadge enabled={autoCheckForUpdates} />}
+                value="toggle-auto-updates"
+              >
+                Auto Updates
+              </Item>
+              <Item
+                icon={<FlaskConicalIcon />}
+                keywords={[
+                  "experimental",
+                  "beta",
+                  "features",
+                  "labs",
+                  "preview",
+                ]}
+                onSelect={() =>
+                  handleToggle(
+                    experimentalFeaturesEnabled,
+                    setExperimentalFeaturesEnabled,
+                    "Experimental Features"
+                  )
+                }
+                suffix={<StateBadge enabled={experimentalFeaturesEnabled} />}
+                value="toggle-experimental"
+              >
+                Experimental Features
+              </Item>
+              <Item
+                icon={<HistoryIcon />}
+                keywords={["search", "history", "save", "privacy"]}
+                onSelect={() =>
+                  handleToggle(
+                    saveSearchHistory,
+                    setSaveSearchHistory,
+                    "Search History"
+                  )
+                }
+                suffix={<StateBadge enabled={saveSearchHistory} />}
+                value="toggle-search-history"
+              >
+                Search History
+              </Item>
+              <Item
+                icon={<Volume2Icon />}
+                keywords={["sound", "audio", "effects", "mute", "sfx"]}
+                onSelect={() =>
+                  handleToggle(soundsEnabled, setSoundsEnabled, "Sound Effects")
+                }
+                suffix={<StateBadge enabled={soundsEnabled} />}
+                value="toggle-sounds"
+              >
+                Sound Effects
+              </Item>
+              <Item
+                icon={<RotateCcwIcon />}
+                keywords={[
+                  "reset",
+                  "onboarding",
+                  "tutorial",
+                  "restart",
+                  "walkthrough",
+                ]}
+                onSelect={handleResetOnboarding}
+                value="reset-onboarding"
+              >
+                Reset Onboarding
+              </Item>
+              <Item
+                icon={<DownloadIcon />}
+                keywords={["export", "backup", "save", "zip", "storage"]}
+                onSelect={() => run(() => onPageChange("settings"))}
+                suffix={
+                  <span className="shrink-0 text-muted-foreground text-xs">
+                    Settings → Storage
+                  </span>
+                }
+                value="export-backup"
+              >
+                Export Backup
+              </Item>
+              <Item
+                icon={<UploadIcon />}
+                keywords={["import", "backup", "restore", "zip", "storage"]}
+                onSelect={() => run(() => onPageChange("settings"))}
+                suffix={
+                  <span className="shrink-0 text-muted-foreground text-xs">
+                    Settings → Storage
+                  </span>
+                }
+                value="import-backup"
+              >
+                Import Backup
+              </Item>
+            </Group>
+
             {/* Projects */}
             {thumbnails.length > 0 && (
               <>
                 <Separator />
                 <Group heading="Projects">
-                  {thumbnails.slice(0, 50).map((t) => (
+                  {visibleThumbnails.map((t) => (
                     <Item
                       icon={<FileImageIcon />}
                       key={t.id}
@@ -333,6 +533,23 @@ export function CommandPalette({
                       {t.name}
                     </Item>
                   ))}
+                  {hasMoreProjects && (
+                    <Command.Item
+                      className="mt-0.5 flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-2.5 text-muted-foreground text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
+                      onSelect={() => setProjectPage((p) => p + 1)}
+                      value="load-more-projects"
+                    >
+                      <ChevronDownIcon className="size-4 shrink-0" />
+                      <span>
+                        Show {Math.min(PROJECTS_PAGE_SIZE, remainingProjects)}{" "}
+                        more projects
+                      </span>
+                      <span className="ml-auto text-xs">
+                        {projectPage * PROJECTS_PAGE_SIZE} of{" "}
+                        {thumbnails.length}
+                      </span>
+                    </Command.Item>
+                  )}
                 </Group>
               </>
             )}
@@ -344,7 +561,7 @@ export function CommandPalette({
                 <Group heading="YouTube">
                   {ytLoading ? (
                     <Command.Item
-                      className="flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-muted-foreground text-sm"
+                      className="flex cursor-default items-center gap-2 rounded-lg px-2 py-2.5 text-muted-foreground text-sm"
                       disabled
                       value="yt-loading"
                     >
@@ -400,6 +617,20 @@ function Separator() {
   return <Command.Separator className="my-1 h-px bg-border" />;
 }
 
+function StateBadge({ enabled }: { enabled: boolean }) {
+  return (
+    <span
+      className={`shrink-0 rounded-full px-1.5 py-0.5 font-medium text-xs ${
+        enabled
+          ? "bg-green-500/15 text-green-500"
+          : "bg-muted text-muted-foreground"
+      }`}
+    >
+      {enabled ? "On" : "Off"}
+    </span>
+  );
+}
+
 function Item({
   value,
   keywords,
@@ -419,7 +650,7 @@ function Item({
 }) {
   return (
     <Command.Item
-      className="flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"
+      className="flex cursor-default select-none items-center gap-2.5 rounded-lg px-2 py-2.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-[selected=true]:[&_svg]:text-accent-foreground"
       keywords={keywords}
       onSelect={onSelect}
       value={value}