@autono/open-pages 0.1.0

package/src/app/components/command/command-menu.tsx

@@ -0,0 +1,227 @@
+import { Check, Languages, Loader2, Monitor, Moon, RotateCw, Search, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
+import { IconTooltip } from '@/components/icon-tooltip';
+import { buttonVariants } from '@/components/ui/button';
+import { TooltipTrigger } from '@/components/ui/tooltip';
+import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
+import { format, useLocale } from '@/lib/use-locale';
+import { useRestartServer } from '@/lib/use-restart-server';
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from './command';
+
+export type CommandSpec = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  /** Extra match terms — ASCII aliases keep commands findable under any locale. */
+  keywords?: string[];
+  shortcut?: string;
+  disabled?: boolean;
+  active?: boolean;
+  run: () => void | Promise<void>;
+};
+
+export type CommandGroupSpec = {
+  id: string;
+  heading: string;
+  items: CommandSpec[];
+  /** Long lists (deck pages) only surface once the user types, so the idle menu stays scannable. */
+  searchOnly?: boolean;
+};
+
+export function CommandMenu({
+  open,
+  onOpenChange,
+  groups,
+  placeholder,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  groups: CommandGroupSpec[];
+  placeholder: string;
+}) {
+  const t = useLocale();
+  const [search, setSearch] = useState('');
+  const sharedGroups = useSharedCommandGroups();
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== 'k' && event.key !== 'K') return;
+      if (!event.metaKey && !event.ctrlKey) return;
+      // Auto-repeat while the combo is held would toggle the menu shut again.
+      if (event.repeat) return;
+      event.preventDefault();
+      onOpenChange(!open);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onOpenChange]);
+
+  useEffect(() => {
+    if (!open) setSearch('');
+  }, [open]);
+
+  const searching = search.trim().length > 0;
+  const visibleGroups = [...groups, ...sharedGroups].filter(
+    (group) => group.items.length > 0 && (searching || !group.searchOnly),
+  );
+
+  const run = (item: CommandSpec) => {
+    if (item.disabled) return;
+    // Close first: exports, fullscreen and panels all expect an unobstructed page.
+    onOpenChange(false);
+    void item.run();
+  };
+
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={t.commandMenu.trigger}
+      description={placeholder}
+    >
+      <Command label={t.commandMenu.trigger} loop>
+        <CommandInput value={search} onValueChange={setSearch} placeholder={placeholder} />
+        <CommandList>
+          <CommandEmpty>{t.commandMenu.empty}</CommandEmpty>
+          {visibleGroups.map((group) => (
+            <CommandGroup key={group.id} heading={group.heading}>
+              {group.items.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={item.id}
+                  keywords={[item.label, ...(item.keywords ?? [])]}
+                  disabled={item.disabled}
+                  onSelect={() => run(item)}
+                >
+                  {item.icon}
+                  <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                  {item.active && <Check className="ml-auto opacity-100 text-brand" aria-hidden />}
+                  {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ))}
+        </CommandList>
+        <CommandFooter />
+      </Command>
+    </CommandDialog>
+  );
+}
+
+const IS_APPLE =
+  typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+
+export const COMMAND_MENU_SHORTCUT = IS_APPLE ? '⌘K' : 'Ctrl K';
+
+export function CommandMenuTrigger({ onClick }: { onClick: () => void }) {
+  const t = useLocale();
+  return (
+    <IconTooltip label={t.commandMenu.triggerTooltip} shortcut={COMMAND_MENU_SHORTCUT}>
+      <TooltipTrigger
+        type="button"
+        onClick={onClick}
+        aria-label={t.commandMenu.triggerAria}
+        aria-haspopup="dialog"
+        className={buttonVariants({ variant: 'ghost', size: 'icon-sm' })}
+      >
+        <Search className="size-3.5" />
+      </TooltipTrigger>
+    </IconTooltip>
+  );
+}
+
+function CommandFooter() {
+  const t = useLocale();
+  return (
+    <div className="flex items-center justify-between gap-3 border-t border-hairline bg-muted/30 px-3 py-2 text-[10.5px] text-muted-foreground">
+      <Hint keys="esc" label={t.commandMenu.hintClose} />
+      <span className="inline-flex items-center gap-3">
+        <Hint keys="↑↓" label={t.commandMenu.hintNavigate} />
+        <Hint keys="↵" label={t.commandMenu.hintSelect} />
+      </span>
+    </div>
+  );
+}
+
+function Hint({ keys, label }: { keys: string; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1">
+      <kbd className="rounded-[3px] border border-hairline bg-card px-1 py-0.5 font-mono text-[9.5px] leading-none">
+        {keys}
+      </kbd>
+      {label}
+    </span>
+  );
+}
+
+function useSharedCommandGroups(): CommandGroupSpec[] {
+  const t = useLocale();
+  const { theme, setTheme } = useTheme();
+  const { canRestart, restarting, restartServer } = useRestartServer();
+
+  return useMemo(() => {
+    const appearance: CommandSpec[] = [
+      {
+        id: 'theme-light',
+        label: format(t.commandMenu.themeItem, { name: t.themeToggle.light }),
+        icon: <Sun />,
+        keywords: ['theme', 'light', 'appearance'],
+        active: theme === 'light',
+        run: () => setTheme('light'),
+      },
+      {
+        id: 'theme-dark',
+        label: format(t.commandMenu.themeItem, { name: t.themeToggle.dark }),
+        icon: <Moon />,
+        keywords: ['theme', 'dark', 'appearance'],
+        active: theme === 'dark',
+        run: () => setTheme('dark'),
+      },
+      {
+        id: 'theme-system',
+        label: format(t.commandMenu.themeItem, { name: t.themeToggle.system }),
+        icon: <Monitor />,
+        keywords: ['theme', 'system', 'appearance'],
+        active: theme === 'system',
+        run: () => setTheme('system'),
+      },
+      ...LOCALE_OPTIONS.map((option) => ({
+        id: `locale-${option.id}`,
+        label: format(t.commandMenu.languageItem, { name: option.label }),
+        icon: <Languages />,
+        keywords: ['language', 'locale', option.id],
+        active: t.id === option.id,
+        run: () => setLocale(option.id),
+      })),
+    ];
+
+    const developer: CommandSpec[] =
+      import.meta.env.DEV && canRestart
+        ? [
+            {
+              id: 'restart-dev-server',
+              label: restarting ? t.home.restartingServer : t.home.restartServer,
+              icon: restarting ? <Loader2 className="animate-spin" /> : <RotateCw />,
+              keywords: ['restart', 'dev', 'server', 'reload'],
+              disabled: restarting,
+              run: restartServer,
+            },
+          ]
+        : [];
+
+    return [
+      { id: 'appearance', heading: t.commandMenu.groupAppearance, items: appearance },
+      { id: 'developer', heading: t.commandMenu.groupDeveloper, items: developer },
+    ];
+  }, [t, theme, setTheme, canRestart, restarting, restartServer]);
+}

package/src/app/components/command/command.tsx

@@ -0,0 +1,142 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import type * as React from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn('flex h-full w-full flex-col overflow-hidden', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="top-[14vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-[560px]"
+      >
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <DialogDescription className="sr-only">{description}</DialogDescription>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div className="flex items-center gap-2 border-b border-hairline px-3">
+      <Search className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'h-11 w-full bg-transparent text-[13px] outline-none placeholder:text-muted-foreground/70 disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[min(56vh,380px)] scroll-py-1 overflow-y-auto overscroll-contain p-1',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="px-3 py-10 text-center text-[12.5px] text-muted-foreground"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'overflow-hidden pt-1.5 pb-1 [&:not(:first-child)]:mt-1 [&:not(:first-child)]:border-t [&:not(:first-child)]:border-hairline',
+        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-1 [&_[cmdk-group-heading]]:pb-1.5',
+        '[&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-[0.08em] [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:text-muted-foreground/70',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-[12.5px] outline-none',
+        'data-[selected=true]:bg-muted data-[selected=true]:text-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45',
+        "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-muted-foreground [&_svg:not([class*='opacity'])]:opacity-80",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="command-shortcut"
+      className={cn(
+        'ml-auto shrink-0 rounded-[3px] bg-muted px-1.5 py-0.5 font-mono text-[9.5px] tracking-[0.04em] text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+};

package/src/app/components/command/home-command-menu.tsx

@@ -0,0 +1,96 @@
+import { Image as ImageIcon, Palette, Presentation } from 'lucide-react';
+import { useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useLocale } from '@/lib/use-locale';
+import { usePageTitles } from '@/lib/use-page-titles';
+import { pageIds } from '../../lib/pages';
+import type { Folder } from '../../lib/sdk';
+import { FolderIconChip } from '../sidebar/folder-item';
+import { ALL_DOCS_ID, ASSETS_ID, DRAFT_ID, THEMES_ID } from '../sidebar/sidebar';
+import { type CommandGroupSpec, CommandMenu, type CommandSpec } from './command-menu';
+
+export function HomeCommandMenu({
+  open,
+  onOpenChange,
+  folders,
+  titleMap,
+  onSelectView,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  folders: Folder[];
+  titleMap: Record<string, string>;
+  onSelectView: (id: string) => void;
+}) {
+  const t = useLocale();
+  const navigate = useNavigate();
+  const loadedTitles = usePageTitles(open);
+
+  const groups = useMemo<CommandGroupSpec[]>(() => {
+    const pages: CommandSpec[] = pageIds.map((id) => ({
+      id: `page-${id}`,
+      label: titleMap[id] ?? loadedTitles[id] ?? id,
+      icon: <Presentation />,
+      keywords: [id],
+      run: () => navigate(`/p/${id}`),
+    }));
+
+    const folderItems: CommandSpec[] = [
+      {
+        id: `view-${ALL_DOCS_ID}`,
+        label: t.home.pages,
+        icon: <FolderIconChip icon={{ type: 'emoji', value: '🎞️' }} />,
+        keywords: ['all', 'pages'],
+        run: () => onSelectView(ALL_DOCS_ID),
+      },
+      {
+        id: `view-${DRAFT_ID}`,
+        label: t.home.draft,
+        icon: <FolderIconChip icon={{ type: 'emoji', value: '📝' }} />,
+        keywords: ['draft', 'unsorted'],
+        run: () => onSelectView(DRAFT_ID),
+      },
+      ...folders.map((folder) => ({
+        id: `view-${folder.id}`,
+        label: folder.name,
+        icon: <FolderIconChip icon={folder.icon} />,
+        keywords: ['folder', folder.id],
+        run: () => onSelectView(folder.id),
+      })),
+    ];
+
+    const navigation: CommandSpec[] = [
+      {
+        id: `view-${THEMES_ID}`,
+        label: t.home.themes,
+        icon: <Palette />,
+        keywords: ['themes', 'design'],
+        run: () => onSelectView(THEMES_ID),
+      },
+    ];
+    if (import.meta.env.DEV) {
+      navigation.push({
+        id: `view-${ASSETS_ID}`,
+        label: t.home.assets,
+        icon: <ImageIcon />,
+        keywords: ['assets', 'images', 'files'],
+        run: () => onSelectView(ASSETS_ID),
+      });
+    }
+
+    return [
+      { id: 'pages', heading: t.commandMenu.groupDocs, items: pages },
+      { id: 'folders', heading: t.commandMenu.groupFolders, items: folderItems },
+      { id: 'navigation', heading: t.commandMenu.groupNavigation, items: navigation },
+    ];
+  }, [t, folders, titleMap, loadedTitles, navigate, onSelectView]);
+
+  return (
+    <CommandMenu
+      open={open}
+      onOpenChange={onOpenChange}
+      groups={groups}
+      placeholder={t.commandMenu.placeholder}
+    />
+  );
+}

package/src/app/components/icon-tooltip.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
+
+/**
+ * Shared hover label for the toolbar icon buttons. `children` supplies the
+ * `TooltipTrigger`; a button that also opens a menu has to compose it inward
+ * (`<DropdownMenuTrigger render={<TooltipTrigger />}>`) — the other nesting
+ * order swallows the trigger ref and the tooltip never opens.
+ */
+export function IconTooltip({
+  label,
+  shortcut,
+  children,
+}: {
+  label: string;
+  shortcut?: string;
+  children: ReactNode;
+}) {
+  return (
+    <TooltipProvider delay={200}>
+      <Tooltip>
+        {children}
+        <TooltipContent side="bottom" sideOffset={6} className="flex items-center gap-1.5">
+          {label}
+          {shortcut && (
+            <kbd className="rounded-[3px] bg-background/18 px-1 py-0.5 font-mono text-[9.5px] tracking-[0.04em] text-background/85">
+              {shortcut}
+            </kbd>
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}

package/src/app/components/language-toggle.tsx

@@ -0,0 +1,46 @@
+import { Languages } from 'lucide-react';
+import { IconTooltip } from '@/components/icon-tooltip';
+import { buttonVariants } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TooltipTrigger } from '@/components/ui/tooltip';
+import { LOCALE_OPTIONS, setLocale } from '@/lib/locale-store';
+import { useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
+
+export function LanguageToggle() {
+  const t = useLocale();
+
+  return (
+    <DropdownMenu>
+      <IconTooltip label={t.languageToggle.title}>
+        <DropdownMenuTrigger
+          render={
+            <TooltipTrigger
+              type="button"
+              aria-label={t.languageToggle.toggleAria}
+              className={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }))}
+            />
+          }
+        >
+          <Languages className="size-3.5" />
+        </DropdownMenuTrigger>
+      </IconTooltip>
+      <DropdownMenuContent align="end" className="min-w-[140px]">
+        {LOCALE_OPTIONS.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onClick={() => setLocale(option.id)}
+            data-active={t.id === option.id}
+          >
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}