feat: command palette

Author: danieldietzler

i18n/en.json

@@ -67,13 +67,16 @@
     "confirm_reprocess_all_faces": "Are you sure you want to reprocess all faces? This will also clear named people.",
     "confirm_user_password_reset": "Are you sure you want to reset {user}'s password?",
     "confirm_user_pin_code_reset": "Are you sure you want to reset {user}'s PIN code?",
+    "copy_config_to_clipboard_description": "Copy the current system config as a JSON object to the clipboard",
     "create_job": "Create job",
     "cron_expression": "Cron expression",
     "cron_expression_description": "Set the scanning interval using the cron format. For more information please refer to e.g. <link>Crontab Guru</link>",
     "cron_expression_presets": "Cron expression presets",
     "disable_login": "Disable login",
     "duplicate_detection_job_description": "Run machine learning on assets to detect similar images. Relies on Smart Search",
     "exclusion_pattern_description": "Exclusion patterns lets you ignore files and folders when scanning your library. This is useful if you have folders that contain files you don't want to import, such as RAW files.",
+    "export_config_as_json_description": "Download the current system config as a JSON file",
+    "external_libraries_page_description": "Admin external library page",
     "external_library_management": "External Library Management",
     "face_detection": "Face detection",
     "face_detection_description": "Detect the faces in assets using machine learning. For videos, only the thumbnail is considered. \"Refresh\" (re-)processes all assets. \"Reset\" additionally clears all current face data. \"Missing\" queues assets that haven't been processed yet. Detected faces will be queued for Facial Recognition after Face Detection is complete, grouping them into existing or new people.",
@@ -102,6 +105,7 @@
     "image_thumbnail_description": "Small thumbnail with stripped metadata, used when viewing groups of photos like the main timeline",
     "image_thumbnail_quality_description": "Thumbnail quality from 1-100. Higher is better, but produces larger files and can reduce app responsiveness.",
     "image_thumbnail_title": "Thumbnail Settings",
+    "import_config_from_json_description": "Import system config by uploading a JSON config file",
     "job_concurrency": "{job} concurrency",
     "job_created": "Job created",
     "job_not_concurrency_safe": "This job is not concurrency-safe.",
@@ -110,6 +114,7 @@
     "job_status": "Job Status",
     "jobs_delayed": "{jobCount, plural, other {# delayed}}",
     "jobs_failed": "{jobCount, plural, other {# failed}}",
+    "jobs_page_description": "Admin jobs page",
     "library_created": "Created library: {library}",
     "library_deleted": "Library deleted",
     "library_import_path_description": "Specify a folder to import. This folder, including subfolders, will be scanned for images and videos.",
@@ -174,6 +179,7 @@
     "machine_learning_smart_search_enabled_description": "If disabled, images will not be encoded for smart search.",
     "machine_learning_url_description": "The URL of the machine learning server. If more than one URL is provided, each server will be attempted one-at-a-time until one responds successfully, in order from first to last. Servers that don't respond will be temporarily ignored until they come back online.",
     "manage_concurrency": "Manage Concurrency",
+    "manage_concurrency_description": "Navigate to the jobs page to manage job concurrency",
     "manage_log_settings": "Manage log settings",
     "map_dark_style": "Dark style",
     "map_enable_description": "Enable map features",
@@ -279,8 +285,10 @@
     "server_public_users_description": "All users (name and email) are listed when adding a user to shared albums. When disabled, the user list will only be available to admin users.",
     "server_settings": "Server Settings",
     "server_settings_description": "Manage server settings",
+    "server_stats_page_description": "Admin server statistics page",
     "server_welcome_message": "Welcome message",
     "server_welcome_message_description": "A message that is displayed on the login page.",
+    "settings_page_description": "Admin settings page",
     "sidecar_job": "Sidecar metadata",
     "sidecar_job_description": "Discover or synchronize sidecar metadata from the filesystem",
     "slideshow_duration_description": "Number of seconds to display each image",
@@ -400,6 +408,7 @@
     "user_settings": "User Settings",
     "user_settings_description": "Manage user settings",
     "user_successfully_removed": "User {email} has been successfully removed.",
+    "users_page_description": "Admin users page",
     "version_check_enabled_description": "Enable version check",
     "version_check_implications": "The version check feature relies on periodic communication with github.com",
     "version_check_settings": "Version Check",
@@ -718,6 +727,7 @@
   "collapse_all": "Collapse all",
   "color": "Color",
   "color_theme": "Color theme",
+  "command": "Command",
   "comment_deleted": "Comment deleted",
   "comment_options": "Comment options",
   "comments_and_likes": "Comments & likes",
@@ -1485,6 +1495,7 @@
   "other_variables": "Other variables",
   "owned": "Owned",
   "owner": "Owner",
+  "page": "Page",
   "partner": "Partner",
   "partner_can_access": "{partner} can access",
   "partner_can_access_assets": "All your photos and videos except those in Archived and Deleted",
@@ -2038,6 +2049,7 @@
   "to_select": "to select",
   "to_trash": "Trash",
   "toggle_settings": "Toggle settings",
+  "toggle_theme_description": "Toggle theme",
   "total": "Total",
   "total_usage": "Total usage",
   "trash": "Trash",

pnpm-lock.yaml

@@ -28,7 +28,7 @@
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.40.2",
+    "@immich/ui": "^0.42.3",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/package.json

@@ -7,7 +7,9 @@
   import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
+  import { AppRoute } from '$lib/constants';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { themeManager } from '$lib/managers/theme-manager.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
@@ -20,7 +22,8 @@
   import { copyToClipboard, getReleaseType } from '$lib/utils';
   import { isAssetViewerRoute } from '$lib/utils/navigation';
   import type { ServerVersionResponseDto } from '@immich/sdk';
-  import { modalManager, setTranslations } from '@immich/ui';
+  import { CommandPaletteContext, modalManager, setTranslations, type CommandItem } from '@immich/ui';
+  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiSync, mdiThemeLightDark } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { run } from 'svelte/legacy';
@@ -103,6 +106,57 @@
     }
   };
 
+  const userCommands: CommandItem[] = [
+    {
+      title: $t('theme'),
+      description: $t('toggle_theme_description'),
+      type: $t('command'),
+      icon: mdiThemeLightDark,
+      action: () => themeManager.toggleTheme(),
+      shortcuts: { shift: true, key: 't' },
+    },
+  ];
+
+  const adminCommands: CommandItem[] = [
+    {
+      title: $t('users'),
+      description: $t('admin.users_page_description'),
+      type: $t('page'),
+      icon: mdiAccountMultipleOutline,
+      href: AppRoute.ADMIN_USERS,
+    },
+    {
+      title: $t('jobs'),
+      description: $t('admin.jobs_page_description'),
+      type: $t('page'),
+      icon: mdiSync,
+      href: AppRoute.ADMIN_JOBS,
+    },
+    {
+      title: $t('settings'),
+      description: $t('admin.jobs_page_description'),
+      type: $t('page'),
+      icon: mdiCog,
+      href: AppRoute.ADMIN_SETTINGS,
+    },
+    {
+      title: $t('external_libraries'),
+      description: $t('admin.external_libraries_page_description'),
+      type: $t('page'),
+      icon: mdiBookshelf,
+      href: AppRoute.ADMIN_LIBRARY_MANAGEMENT,
+    },
+    {
+      title: $t('server_stats'),
+      description: $t('admin.server_stats_page_description'),
+      type: $t('page'),
+      icon: mdiServer,
+      href: AppRoute.ADMIN_STATS,
+    },
+  ];
+
+  const commands = $derived([...userCommands, ...($user?.isAdmin ? adminCommands : [])]);
+
   $effect(() => void handleRelease($release));
 </script>
 
@@ -146,6 +200,8 @@
   }}
 />
 
+<CommandPaletteContext {commands} global />
+
 {#if page.data.error}
   <ErrorLayout error={page.data.error}></ErrorLayout>
 {:else}

web/src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 import { init } from '$lib/utils/server';
+import { commandPaletteManager } from '@immich/ui';
 import type { LayoutLoad } from './$types';
 
 export const ssr = false;
@@ -12,6 +13,8 @@ export const load = (async ({ fetch }) => {
     error = initError;
   }
 
+  commandPaletteManager.enable();
+
   return {
     error,
     meta: {

web/src/routes/+layout.ts

@@ -12,7 +12,7 @@
     type AllJobStatusResponseDto,
     type JobName,
   } from '@immich/sdk';
-  import { Button, HStack, modalManager, Text } from '@immich/ui';
+  import { Button, CommandPaletteContext, HStack, modalManager, Text, type CommandItem } from '@immich/ui';
   import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -46,6 +46,27 @@
     }
   };
 
+  const handleCreateJob = () => modalManager.show(JobCreateModal);
+
+  const jobConcurrencyLink = `${AppRoute.ADMIN_SETTINGS}?isOpen=job`;
+
+  const commands: CommandItem[] = [
+    {
+      title: $t('admin.create_job'),
+      type: $t('command'),
+      icon: mdiPlus,
+      action: () => void handleCreateJob(),
+      shortcuts: { shift: true, key: 'n' },
+    },
+    {
+      title: $t('admin.manage_concurrency'),
+      description: $t('admin.manage_concurrency_description'),
+      type: $t('page'),
+      icon: mdiCog,
+      href: jobConcurrencyLink,
+    },
+  ];
+
   onMount(async () => {
     while (running) {
       jobs = await getAllJobsStatus();
@@ -58,6 +79,8 @@
   });
 </script>
 
+<CommandPaletteContext {commands} />
+
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <HStack gap={0}>
@@ -74,22 +97,10 @@
           </Text>
         </Button>
       {/if}
-      <Button
-        leadingIcon={mdiPlus}
-        onclick={() => modalManager.show(JobCreateModal, {})}
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
+      <Button leadingIcon={mdiPlus} onclick={handleCreateJob} size="small" variant="ghost" color="secondary">
         <Text class="hidden md:block">{$t('admin.create_job')}</Text>
       </Button>
-      <Button
-        leadingIcon={mdiCog}
-        href="{AppRoute.ADMIN_SETTINGS}?isOpen=job"
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
+      <Button leadingIcon={mdiCog} href={jobConcurrencyLink} size="small" variant="ghost" color="secondary">
         <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
       </Button>
     </HStack>

web/src/routes/admin/jobs-status/+page.svelte

@@ -26,7 +26,15 @@
     type LibraryStatsResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button, LoadingSpinner, modalManager, Text, toastManager } from '@immich/ui';
+  import {
+    Button,
+    CommandPaletteContext,
+    LoadingSpinner,
+    modalManager,
+    Text,
+    toastManager,
+    type CommandItem,
+  } from '@immich/ui';
   import { mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -191,7 +199,7 @@
     }
   };
 
-  const onCreateNewLibraryClicked = async () => {
+  const handleCreateNewLibrary = async () => {
     const result = await modalManager.show(LibraryUserPickerModal);
     if (result) {
       await handleCreate(result);
@@ -238,8 +246,31 @@
       await readLibraryList();
     }
   };
+
+  const commands: CommandItem[] = $derived([
+    ...(libraries.length > 0
+      ? [
+          {
+            title: $t('scan_all_libraries'),
+            type: $t('command'),
+            icon: mdiSync,
+            action: () => handleScanAll(),
+            shortcuts: { shift: true, key: 'r' },
+          },
+        ]
+      : []),
+    {
+      title: $t('create_library'),
+      type: $t('command'),
+      icon: mdiPlusBoxOutline,
+      action: () => handleCreateNewLibrary(),
+      shortcuts: { shift: true, key: 'n' },
+    },
+  ]);
 </script>
 
+<CommandPaletteContext {commands} />
+
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
@@ -250,7 +281,7 @@
       {/if}
       <Button
         leadingIcon={mdiPlusBoxOutline}
-        onclick={onCreateNewLibraryClicked}
+        onclick={handleCreateNewLibrary}
         size="small"
         variant="ghost"
         color="secondary"
@@ -360,7 +391,7 @@
 
         <!-- Empty message -->
       {:else}
-        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={onCreateNewLibraryClicked} />
+        <EmptyPlaceholder text={$t('no_libraries_message')} onClick={handleCreateNewLibrary} />
       {/if}
     </div>
   </section>