feat: command palette (#23693)

web/src/lib/services/library.service.ts

@@ -23,17 +23,22 @@ import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
 
-export const getLibrariesActions = ($t: MessageFormatter) => {
+export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResponseDto[]) => {
   const ScanAll: ActionItem = {
     title: $t('scan_all_libraries'),
+    type: $t('command'),
     icon: mdiSync,
     onAction: () => void handleScanAllLibraries(),
+    shortcuts: { shift: true, key: 'r' },
+    $if: () => libraries.length > 0,
   };
 
   const Create: ActionItem = {
     title: $t('create_library'),
+    type: $t('command'),
     icon: mdiPlusBoxOutline,
     onAction: () => void handleCreateLibrary(),
+    shortcuts: { shift: true, key: 'n' },
   };
 
   return { ScanAll, Create };
@@ -42,33 +47,41 @@ export const getLibrariesActions = ($t: MessageFormatter) => {
 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
   const Rename: ActionItem = {
     icon: mdiPencilOutline,
+    type: $t('command'),
     title: $t('rename'),
     onAction: () => void modalManager.show(LibraryRenameModal, { library }),
+    shortcuts: { key: 'r' },
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
+    type: $t('command'),
     title: $t('delete'),
     color: 'danger',
     onAction: () => void handleDeleteLibrary(library),
+    shortcuts: { key: 'Backspace' },
   };
 
   const AddFolder: ActionItem = {
     icon: mdiPlusBoxOutline,
+    type: $t('command'),
     title: $t('add'),
     onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
   };
 
   const AddExclusionPattern: ActionItem = {
     icon: mdiPlusBoxOutline,
+    type: $t('command'),
     title: $t('add'),
     onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
   };
 
   const Scan: ActionItem = {
     icon: mdiSync,
+    type: $t('command'),
     title: $t('scan_library'),
     onAction: () => void handleScanLibrary(library),
+    shortcuts: { shift: true, key: 'r' },
   };
 
   return { Rename, Delete, AddFolder, AddExclusionPattern, Scan };
@@ -77,12 +90,14 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
+    type: $t('command'),
     title: $t('edit'),
     onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
+    type: $t('command'),
     title: $t('delete'),
     onAction: () => void handleDeleteLibraryFolder(library, folder),
   };
@@ -97,12 +112,14 @@ export const getLibraryExclusionPatternActions = (
 ) => {
   const Edit: ActionItem = {
     icon: mdiPencilOutline,
+    type: $t('command'),
     title: $t('edit'),
     onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
+    type: $t('command'),
     title: $t('delete'),
     onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
   };

web/src/lib/services/system-config.service.ts

@@ -17,21 +17,33 @@ export const getSystemConfigActions = (
 ) => {
   const CopyToClipboard: ActionItem = {
     title: $t('copy_to_clipboard'),
+    description: $t('admin.copy_config_to_clipboard_description'),
+    type: $t('command'),
     icon: mdiContentCopy,
     onAction: () => void handleCopyToClipboard(config),
+    shortcuts: { shift: true, key: 'c' },
   };
 
   const Download: ActionItem = {
     title: $t('export_as_json'),
+    description: $t('admin.export_config_as_json_description'),
+    type: $t('command'),
     icon: mdiDownload,
     onAction: () => handleDownloadConfig(config),
+    shortcuts: [
+      { shift: true, key: 's' },
+      { shift: true, key: 'd' },
+    ],
   };
 
   const Upload: ActionItem = {
     title: $t('import_from_json'),
+    description: $t('admin.import_config_from_json_description'),
+    type: $t('command'),
     icon: mdiUpload,
     $if: () => !featureFlags.configFile,
     onAction: () => handleUploadConfig(),
+    shortcuts: { shift: true, key: 'u' },
   };
 
   return { CopyToClipboard, Download, Upload };

web/src/lib/services/user-admin.service.ts

@@ -34,8 +34,10 @@ import { get } from 'svelte/store';
 export const getUserAdminsActions = ($t: MessageFormatter) => {
   const Create: ActionItem = {
     title: $t('create_user'),
+    type: $t('command'),
     icon: mdiPlusBoxOutline,
     onAction: () => void modalManager.show(UserCreateModal, {}),
+    shortcuts: { shift: true, key: 'n' },
   };
 
   return { Create };
@@ -45,34 +47,39 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
-    onAction: () => void modalManager.show(UserEditModal, { user }),
+    onAction: () => modalManager.show(UserEditModal, { user }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     title: $t('delete'),
+    type: $t('command'),
     color: 'danger',
     $if: () => get(authUser).id !== user.id && !user.deletedAt,
-    onAction: () => void modalManager.show(UserDeleteConfirmModal, { user }),
+    onAction: () => modalManager.show(UserDeleteConfirmModal, { user }),
+    shortcuts: { key: 'Backspace' },
   };
 
   const Restore: ActionItem = {
     icon: mdiDeleteRestore,
     title: $t('restore'),
+    type: $t('command'),
     color: 'primary',
     $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
-    onAction: () => void modalManager.show(UserRestoreConfirmModal, { user }),
+    onAction: () => modalManager.show(UserRestoreConfirmModal, { user }),
   };
 
   const ResetPassword: ActionItem = {
     icon: mdiLockReset,
     title: $t('reset_password'),
+    type: $t('command'),
     $if: () => get(authUser).id !== user.id,
     onAction: () => void handleResetPasswordUserAdmin(user),
   };
 
   const ResetPinCode: ActionItem = {
     icon: mdiLockSmart,
+    type: $t('command'),
     title: $t('reset_pin_code'),
     onAction: () => void handleResetPinCodeUserAdmin(user),
   };