homeio

1"use client";
2
3import Image from "next/image";
4import type { StoreAppSummary } from "@/lib/shared/contracts/apps";
5import type { RecentCommandAction } from "@/lib/desktop/recent-actions";
6import {
7  CommandDialog,
8  CommandEmpty,
9  CommandGroup,
10  CommandInput,
11  CommandItem,
12  CommandList,
13  CommandSeparator,
14  CommandShortcut,
15} from "@/components/ui/command";
16import {
17  Clock,
18  FolderOpen,
19  Search,
20  Settings,
21  ShoppingBag,
22  Sparkles,
23  TerminalSquare,
24} from "@/components/icons/platform-icons";
25import { useDebouncedValue } from "@/hooks/useDebouncedValue";
26import { useStoreCatalog } from "@/modules/apps/hooks/useStoreCatalog";
27
28export type CommandPaletteSettingsSection = {
29  id: string;
30  label: string;
31};
32
33export type CommandPaletteRecentAction = RecentCommandAction;
34
35type CommandPaletteProps = {
36  open: boolean;
37  onOpenChange: (open: boolean) => void;
38  query: string;
39  onQueryChange: (query: string) => void;
40  settingsSections: readonly CommandPaletteSettingsSection[];
41  recentActions: readonly CommandPaletteRecentAction[];
42  onOpenSettingsSection: (sectionId: string) => void;
43  onOpenAppStoreSearch: (input: { search: string; appId?: string }) => void;
44  onOpenWindow: (windowId: "files" | "settings" | "app-store" | "terminal") => void;
45  onSelectRecentAction: (action: CommandPaletteRecentAction) => void;
46};
47
48function StoreSearchIcon({ app }: { app: StoreAppSummary }) {
49  if (app.logoUrl) {
50    return (
51      <div className="flex size-9 items-center justify-center overflow-hidden rounded-lg border border-glass-border/80 bg-card/85 shadow-sm">
52        <Image
53          src={app.logoUrl}
54          alt=""
55          width={24}
56          height={24}
57          className="size-5 object-contain"
58          unoptimized
59        />
60      </div>
61    );
62  }
63
64  return (
65    <div className="flex size-9 items-center justify-center rounded-lg border border-glass-border/80 bg-primary/12 text-primary shadow-sm">
66      <ShoppingBag className="size-4" />
67    </div>
68  );
69}
70
71export function CommandPalette({
72  open,
73  onOpenChange,
74  query,
75  onQueryChange,
76  settingsSections,
77  recentActions,
78  onOpenSettingsSection,
79  onOpenAppStoreSearch,
80  onOpenWindow,
81  onSelectRecentAction,
82}: CommandPaletteProps) {
83  const normalizedQuery = query.trim();
84  const debouncedQuery = useDebouncedValue(normalizedQuery, 180);
85
86  const matchingSettings = normalizedQuery
87    ? settingsSections.filter((section) =>
88        section.label.toLowerCase().includes(normalizedQuery.toLowerCase()),
89      )
90    : settingsSections.slice(0, 5);
91
92  const storeCatalogQuery = useStoreCatalog({
93    search: debouncedQuery || undefined,
94  });
95
96  const appResults = (storeCatalogQuery.data?.apps ?? [])
97    .slice(0, normalizedQuery ? 7 : 5);
98  const filteredRecentActions = recentActions.filter((action) => {
99    if (!normalizedQuery) return true;
100    const haystack = `${action.title} ${action.subtitle}`.toLowerCase();
101    return haystack.includes(normalizedQuery.toLowerCase());
102  });
103
104  function renderRecentActionIcon(action: CommandPaletteRecentAction) {
105    if (action.kind === "window") {
106      if (action.windowId === "files") return <FolderOpen className="size-4 text-primary" />;
107      if (action.windowId === "settings") return <Settings className="size-4 text-primary" />;
108      if (action.windowId === "app-store") {
109        return <ShoppingBag className="size-4 text-sky-400" />;
110      }
111      return <TerminalSquare className="size-4 text-emerald-400" />;
112    }
113
114    if (action.kind === "settings-section") {
115      return <Settings className="size-4 text-primary" />;
116    }
117
118    return <Sparkles className="size-4 text-primary" />;
119  }
120
121  return (
122    <CommandDialog
123      open={open}
124      onOpenChange={onOpenChange}
125      title="Search Homeio"
126      description="Jump to settings, apps, and desktop tools."
127      className="overflow-hidden border border-white/[0.09] bg-black/60 p-0 shadow-[var(--system-shadow-floating)] [backdrop-filter:blur(40px)_saturate(160%)] [border-radius:var(--system-radius-floating)] max-w-[min(92vw,44rem)]"
128      showCloseButton={false}
129    >
130      {/* Hero header — matches lock screen / login design language */}
131      <div className="flex flex-col items-center border-b border-white/8 bg-black/22 px-6 py-5">
132        <div className="system-hero-surface flex size-[3.25rem] items-center justify-center bg-black/22 shadow-[var(--system-shadow-dock)]">
133          <Search className="size-6 text-foreground/72" />
134        </div>
135        <div className="system-pill-surface mt-3 px-3 py-1 text-[10px] tracking-[0.22em] text-foreground/55 uppercase">
136          Command Palette
137        </div>
138        <div className="mt-3 w-full [&_[data-slot=command-input-wrapper]]:h-10 [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0">
139          <div className="system-soft-surface bg-black/22 px-3 shadow-[var(--system-shadow-dock)]">
140            <CommandInput
141              autoFocus
142              value={query}
143              onValueChange={onQueryChange}
144              placeholder="Search settings, apps, and tools…"
145              className="text-[15px] text-foreground placeholder:text-muted-foreground/50"
146            />
147          </div>
148        </div>
149        <div className="mt-2.5 flex items-center gap-3 text-[10px] text-muted-foreground/40 tracking-widest uppercase">
150          <span className="system-keycap-surface px-1.5 py-0.5 font-mono">⌘K</span>
151          <span className="opacity-50">·</span>
152          <span className="system-keycap-surface px-1.5 py-0.5 font-mono">Esc</span>
153        </div>
154      </div>
155
156      <CommandList className="max-h-[26rem]">
157        <CommandEmpty>
158          <div className="py-8 text-center">
159            <p className="text-sm font-medium text-foreground">No matches found</p>
160            <p className="mt-1 text-xs text-muted-foreground">
161              Try a settings section, app name, or desktop tool.
162            </p>
163          </div>
164        </CommandEmpty>
165
166        {filteredRecentActions.length > 0 ? (
167          <>
168            <CommandGroup heading="Recent">
169              {filteredRecentActions.map((action) => (
170                <CommandItem
171                  key={action.key}
172                  value={`${action.title} ${action.subtitle}`}
173                  onSelect={() => onSelectRecentAction(action)}
174                >
175                  {renderRecentActionIcon(action)}
176                  <div className="min-w-0 flex-1">
177                    <div className="truncate text-sm font-medium text-foreground">
178                      {action.title}
179                    </div>
180                    <div className="truncate text-xs text-muted-foreground">
181                      {action.subtitle}
182                    </div>
183                  </div>
184                  <CommandShortcut className="flex items-center gap-1 tracking-normal">
185                    <Clock className="size-3.5" />
186                    <span>Recent</span>
187                  </CommandShortcut>
188                </CommandItem>
189              ))}
190            </CommandGroup>
191
192            <CommandSeparator />
193          </>
194        ) : null}
195
196        <CommandGroup heading="Quick Actions">
197          <CommandItem onSelect={() => onOpenWindow("settings")}>
198            <Settings className="size-4 text-primary" />
199            <span>Open Settings</span>
200            <CommandShortcut>System</CommandShortcut>
201          </CommandItem>
202          <CommandItem onSelect={() => onOpenWindow("app-store")}>
203            <ShoppingBag className="size-4 text-sky-400" />
204            <span>Open App Store</span>
205            <CommandShortcut>Apps</CommandShortcut>
206          </CommandItem>
207          <CommandItem onSelect={() => onOpenWindow("files")}>
208            <FolderOpen className="size-4 text-primary" />
209            <span>Open Files</span>
210            <CommandShortcut>/DATA</CommandShortcut>
211          </CommandItem>
212          <CommandItem onSelect={() => onOpenWindow("terminal")}>
213            <TerminalSquare className="size-4 text-emerald-400" />
214            <span>Open Terminal</span>
215            <CommandShortcut>Shell</CommandShortcut>
216          </CommandItem>
217        </CommandGroup>
218
219        <CommandSeparator />
220
221        <CommandGroup heading="Settings">
222          {matchingSettings.map((section) => (
223            <CommandItem
224              key={section.id}
225              onSelect={() => onOpenSettingsSection(section.id)}
226            >
227              <Settings className="size-4 text-primary" />
228              <span>{section.label}</span>
229              <CommandShortcut>Settings</CommandShortcut>
230            </CommandItem>
231          ))}
232        </CommandGroup>
233
234        <CommandSeparator />
235
236        <CommandGroup heading="App Store">
237          {storeCatalogQuery.isLoading && normalizedQuery ? (
238            <div className="px-2 py-3 text-xs text-muted-foreground">
239              Searching apps...
240            </div>
241          ) : null}
242
243          {!storeCatalogQuery.isLoading && appResults.length === 0 && normalizedQuery ? (
244            <div className="px-2 py-3 text-xs text-muted-foreground">
245              No App Store apps match “{normalizedQuery}”.
246            </div>
247          ) : null}
248
249          {appResults.map((app) => (
250            <CommandItem
251              key={app.id}
252              value={`${app.name} ${app.description} ${app.categories.join(" ")}`}
253              onSelect={() =>
254                onOpenAppStoreSearch({
255                  search: app.name,
256                  appId: app.id,
257                })
258              }
259              className="gap-3 rounded-lg py-2.5"
260            >
261              <StoreSearchIcon app={app} />
262              <div className="min-w-0 flex-1">
263                <div className="flex items-center gap-2">
264                  <span className="truncate text-sm font-medium text-foreground">
265                    {app.name}
266                  </span>
267                  {app.updateAvailable ? (
268                    <span className="rounded-md bg-primary/12 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-[0.16em] text-primary">
269                      Update
270                    </span>
271                  ) : null}
272                </div>
273                <p className="truncate text-xs text-muted-foreground">
274                  {app.description}
275                </p>
276              </div>
277              <CommandShortcut className="flex items-center gap-1 tracking-normal">
278                <Sparkles className="size-3.5" />
279                <span>App Store</span>
280              </CommandShortcut>
281            </CommandItem>
282          ))}
283        </CommandGroup>
284      </CommandList>
285    </CommandDialog>
286  );
287}
288