- setMobileMenuOpen(true)} />
+ updateCommandPaletteOpen(true)}
+ onOpenMenu={() => setMobileMenuOpen(true)}
+ />
{props.statusIndicator}
+ setSidebarExpanded((expanded) => !expanded)}
+ paletteOpen={commandPaletteOpen()}
+ />
);
}
diff --git a/apps/server/src/components/v2/v2-command-center.tsx b/apps/server/src/components/v2/v2-command-center.tsx
new file mode 100644
index 000000000..9679eb50a
--- /dev/null
+++ b/apps/server/src/components/v2/v2-command-center.tsx
@@ -0,0 +1,333 @@
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@solid-imager/ui/dialog";
+import {
+ getShortcutDefinitionsForGroup,
+ SHORTCUT_GROUPS,
+ type ShortcutId,
+ ShortcutKbd,
+} from "@solid-imager/ui/shortcuts/index";
+import {
+ BriefcaseBusiness,
+ CircleHelp,
+ Clock3,
+ Library,
+ PanelLeftClose,
+ Plus,
+ Search,
+ Settings,
+} from "@solid-imager/ui/v2/icons";
+import { useNavigate } from "@tanstack/solid-router";
+import {
+ type Component,
+ createEffect,
+ createMemo,
+ createSignal,
+ createUniqueId,
+ For,
+ Show,
+} from "solid-js";
+
+export type V2CommandCenterProps = {
+ helpOpen: boolean;
+ onAddSource: () => void;
+ onHelpOpenChange: (open: boolean) => void;
+ onPaletteOpenChange: (open: boolean) => void;
+ onToggleSidebar: () => void;
+ paletteOpen: boolean;
+};
+
+type PaletteAction = {
+ group: "Actions" | "Navigate";
+ icon: Component<{ class?: string; size?: number | string }>;
+ keywords: string;
+ label: string;
+ run: () => void;
+ shortcutId?: ShortcutId;
+};
+
+type PaletteActionGroup = {
+ actions: PaletteAction[];
+ group: PaletteAction["group"];
+ startIndex: number;
+};
+
+export function V2CommandCenter(props: V2CommandCenterProps) {
+ const navigate = useNavigate();
+ const listId = createUniqueId();
+ const [query, setQuery] = createSignal("");
+ const [activeIndex, setActiveIndex] = createSignal(0);
+ const actions = createMemo
(() => [
+ {
+ group: "Navigate",
+ icon: Library,
+ keywords: "media images search browse",
+ label: "Library",
+ run: () => void navigate({ to: "/v2/search" }),
+ shortcutId: "goLibrary",
+ },
+ {
+ group: "Navigate",
+ icon: BriefcaseBusiness,
+ keywords: "projects characters ips bulk organize",
+ label: "Manager",
+ run: () => void navigate({ to: "/v2/manager" }),
+ shortcutId: "goManager",
+ },
+ {
+ group: "Navigate",
+ icon: Clock3,
+ keywords: "background activity downloads queue",
+ label: "Jobs",
+ run: () => void navigate({ to: "/v2/jobs" }),
+ shortcutId: "goJobs",
+ },
+ {
+ group: "Navigate",
+ icon: Settings,
+ keywords: "preferences keyboard key bindings",
+ label: "Settings",
+ run: () => void navigate({ to: "/v2/config" }),
+ shortcutId: "goSettings",
+ },
+ {
+ group: "Actions",
+ icon: Plus,
+ keywords: "import folder library",
+ label: "Add media source",
+ run: props.onAddSource,
+ },
+ {
+ group: "Actions",
+ icon: PanelLeftClose,
+ keywords: "collapse expand navigation",
+ label: "Toggle sidebar",
+ run: props.onToggleSidebar,
+ shortcutId: "toggleSidebar",
+ },
+ {
+ group: "Actions",
+ icon: CircleHelp,
+ keywords: "keyboard keys help reference",
+ label: "Keyboard shortcuts",
+ run: () => props.onHelpOpenChange(true),
+ shortcutId: "shortcutHelp",
+ },
+ ]);
+ const filteredActions = createMemo(() => {
+ const normalizedQuery = query().trim().toLocaleLowerCase();
+ if (!normalizedQuery) return actions();
+ return actions().filter((action) =>
+ `${action.label} ${action.keywords}`
+ .toLocaleLowerCase()
+ .includes(normalizedQuery),
+ );
+ });
+ const groupedActions = createMemo(() => {
+ const groups: PaletteActionGroup[] = [];
+ for (const [index, action] of filteredActions().entries()) {
+ const lastGroup = groups[groups.length - 1];
+ if (!lastGroup || lastGroup.group !== action.group) {
+ groups.push({
+ actions: [action],
+ group: action.group,
+ startIndex: index,
+ });
+ continue;
+ }
+ lastGroup.actions.push(action);
+ }
+ return groups;
+ });
+ const itemId = (index: number) => `${listId}-option-${index}`;
+ const runAction = (action: PaletteAction) => {
+ props.onPaletteOpenChange(false);
+ setQuery("");
+ action.run();
+ };
+ const setPaletteOpen = (open: boolean) => {
+ if (!open) setQuery("");
+ props.onPaletteOpenChange(open);
+ };
+ const moveActive = (nextIndex: number) => {
+ const count = filteredActions().length;
+ if (count === 0) return;
+ setActiveIndex((nextIndex + count) % count);
+ };
+
+ createEffect(() => {
+ query();
+ filteredActions().length;
+ setActiveIndex(0);
+ });
+
+ return (
+ <>
+
+
+
+
+ );
+}
diff --git a/apps/server/src/components/v2/v2-mobile-header.tsx b/apps/server/src/components/v2/v2-mobile-header.tsx
index 1be8d6895..73e66fbc7 100644
--- a/apps/server/src/components/v2/v2-mobile-header.tsx
+++ b/apps/server/src/components/v2/v2-mobile-header.tsx
@@ -1,8 +1,11 @@
import { Button } from "@solid-imager/ui/button";
-import { Menu } from "@solid-imager/ui/v2/icons";
+import { Menu, Search } from "@solid-imager/ui/v2/icons";
import { V2PendingDownloadsIndicator } from "~/components/imports/v2-pending-downloads-indicator";
-export function V2MobileHeader(props: { onOpenMenu: () => void }) {
+export function V2MobileHeader(props: {
+ onOpenCommandPalette?: () => void;
+ onOpenMenu: () => void;
+}) {
return (
);
diff --git a/apps/server/src/components/v2/v2-navigation.tsx b/apps/server/src/components/v2/v2-navigation.tsx
index 643a8bd65..e0def02f3 100644
--- a/apps/server/src/components/v2/v2-navigation.tsx
+++ b/apps/server/src/components/v2/v2-navigation.tsx
@@ -9,10 +9,25 @@ import type { JSX } from "solid-js";
import { Show } from "solid-js";
export const V2_NAVIGATION_ITEMS = [
- { icon: Library, label: "Library", to: "/v2/search" },
- { icon: BriefcaseBusiness, label: "Manager", to: "/v2/manager" },
- { icon: Clock3, label: "Jobs", to: "/v2/jobs" },
- { icon: Settings, label: "Settings", to: "/v2/config" },
+ {
+ icon: Library,
+ label: "Library",
+ shortcutId: "goLibrary",
+ to: "/v2/search",
+ },
+ {
+ icon: BriefcaseBusiness,
+ label: "Manager",
+ shortcutId: "goManager",
+ to: "/v2/manager",
+ },
+ { icon: Clock3, label: "Jobs", shortcutId: "goJobs", to: "/v2/jobs" },
+ {
+ icon: Settings,
+ label: "Settings",
+ shortcutId: "goSettings",
+ to: "/v2/config",
+ },
] as const;
export function V2NavigationItem(props: {
diff --git a/apps/server/src/components/v2/v2-sidebar.tsx b/apps/server/src/components/v2/v2-sidebar.tsx
index 67b52ba99..5cce23733 100644
--- a/apps/server/src/components/v2/v2-sidebar.tsx
+++ b/apps/server/src/components/v2/v2-sidebar.tsx
@@ -1,11 +1,13 @@
import type { SafeMediaSource } from "@solid-imager/core/domain/sources/schemas";
import { Button } from "@solid-imager/ui/button";
+import { ShortcutKbd } from "@solid-imager/ui/shortcuts/index";
import {
CircleHelp,
FileText,
Image,
PanelLeftClose,
PanelLeftOpen,
+ Search,
} from "@solid-imager/ui/v2/icons";
import { Link } from "@tanstack/solid-router";
import { For, Show } from "solid-js";
@@ -21,6 +23,7 @@ export type V2SidebarProps = {
onDeleteSource: (source: SafeMediaSource) => void;
onEditSource: (source: SafeMediaSource) => void;
onNavigate?: () => void;
+ onOpenCommandPalette?: () => void;
onSyncSource: (source: SafeMediaSource) => void;
};
@@ -71,6 +74,29 @@ export function V2Sidebar(props: V2SidebarProps) {
+