feat: header context menu (#24374)

Author: jrasm91

i18n/en.json

@@ -78,7 +78,6 @@
     "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.",
     "facial_recognition_job_description": "Group detected faces into people. This step runs after Face Detection is complete. \"Reset\" (re-)clusters all faces. \"Missing\" queues faces that don't have a person assigned.",

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.49.2",
+    "@immich/ui": "^0.50.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/package.json

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import { Button } from '@immich/ui';
+
+  type Props = {
+    action: HeaderButtonActionItem;
+  };
+
+  const { action }: Props = $props();
+  const { title, icon, color = 'secondary', onAction } = $derived(action);
+</script>
+
+{#if action.$if?.() ?? true}
+  <Button
+    variant="ghost"
+    size="small"
+    {color}
+    leadingIcon={icon}
+    onclick={() => onAction(action)}
+    title={action.data?.title}
+  >
+    {title}
+  </Button>
+{/if}

web/src/lib/components/HeaderActionButton.svelte

@@ -1,19 +1,33 @@
 <script lang="ts">
   import PageContent from '$lib/components/layouts/PageContent.svelte';
-  import TitleLayout from '$lib/components/layouts/TitleLayout.svelte';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import AdminSidebar from '$lib/sidebars/AdminSidebar.svelte';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
-  import { AppShell, AppShellHeader, AppShellSidebar, Scrollable, type BreadcrumbItem } from '@immich/ui';
+  import type { HeaderButtonActionItem } from '$lib/types';
+  import {
+    AppShell,
+    AppShellHeader,
+    AppShellSidebar,
+    Breadcrumbs,
+    Button,
+    ContextMenuButton,
+    HStack,
+    MenuItemType,
+    Scrollable,
+    isMenuItemType,
+    type BreadcrumbItem,
+  } from '@immich/ui';
+  import { mdiSlashForward } from '@mdi/js';
   import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
 
   type Props = {
     breadcrumbs: BreadcrumbItem[];
-    buttons?: Snippet;
+    actions?: Array<HeaderButtonActionItem | MenuItemType>;
     children?: Snippet;
   };
 
-  let { breadcrumbs, buttons, children }: Props = $props();
+  let { breadcrumbs, actions = [], children }: Props = $props();
 </script>
 
 <AppShell>
@@ -24,11 +38,37 @@
     <AdminSidebar />
   </AppShellSidebar>
 
-  <TitleLayout {breadcrumbs} {buttons}>
+  <div class="h-full flex flex-col">
+    <div class="flex h-16 w-full justify-between items-center border-b py-2 px-4 md:px-2">
+      <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
+
+      {#if actions.length > 0}
+        <div class="hidden md:block">
+          <HStack gap={0}>
+            {#each actions as action, i (i)}
+              {#if !isMenuItemType(action) && (action.$if?.() ?? true)}
+                <Button
+                  variant="ghost"
+                  size="small"
+                  color={action.color ?? 'secondary'}
+                  leadingIcon={action.icon}
+                  onclick={() => action.onAction(action)}
+                  title={action.data?.title}
+                >
+                  {action.title}
+                </Button>
+              {/if}
+            {/each}
+          </HStack>
+        </div>
+
+        <ContextMenuButton aria-label={$t('open')} items={actions} class="md:hidden" />
+      {/if}
+    </div>
     <Scrollable class="grow">
       <PageContent>
         {@render children?.()}
       </PageContent>
     </Scrollable>
-  </TitleLayout>
+  </div>
 </AppShell>

web/src/lib/components/HeaderButton.svelte

@@ -28,7 +28,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('scan_all_libraries'),
     type: $t('command'),
     icon: mdiSync,
-    onAction: () => void handleScanAllLibraries(),
+    onAction: () => handleScanAllLibraries(),
     shortcuts: { shift: true, key: 'r' },
     $if: () => libraries.length > 0,
   };
@@ -37,7 +37,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('create_library'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => void handleCreateLibrary(),
+    onAction: () => handleCreateLibrary(),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -49,7 +49,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('rename'),
-    onAction: () => void modalManager.show(LibraryRenameModal, { library }),
+    onAction: () => modalManager.show(LibraryRenameModal, { library }),
     shortcuts: { key: 'r' },
   };
 
@@ -58,29 +58,29 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     type: $t('command'),
     title: $t('delete'),
     color: 'danger',
-    onAction: () => void handleDeleteLibrary(library),
+    onAction: () => handleDeleteLibrary(library),
     shortcuts: { key: 'Backspace' },
   };
 
   const AddFolder: ActionItem = {
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => void modalManager.show(LibraryFolderAddModal, { library }),
+    onAction: () => modalManager.show(LibraryFolderAddModal, { library }),
   };
 
   const AddExclusionPattern: ActionItem = {
     icon: mdiPlusBoxOutline,
     type: $t('command'),
     title: $t('add'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternAddModal, { library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternAddModal, { library }),
   };
 
   const Scan: ActionItem = {
     icon: mdiSync,
     type: $t('command'),
     title: $t('scan_library'),
-    onAction: () => void handleScanLibrary(library),
+    onAction: () => handleScanLibrary(library),
     shortcuts: { shift: true, key: 'r' },
   };
 
@@ -92,14 +92,14 @@ export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryRe
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryFolderEditModal, { folder, library }),
+    onAction: () => modalManager.show(LibraryFolderEditModal, { folder, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => void handleDeleteLibraryFolder(library, folder),
+    onAction: () => handleDeleteLibraryFolder(library, folder),
   };
 
   return { Edit, Delete };
@@ -114,14 +114,14 @@ export const getLibraryExclusionPatternActions = (
     icon: mdiPencilOutline,
     type: $t('command'),
     title: $t('edit'),
-    onAction: () => void modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
+    onAction: () => modalManager.show(LibraryExclusionPatternEditModal, { exclusionPattern, library }),
   };
 
   const Delete: ActionItem = {
     icon: mdiTrashCanOutline,
     type: $t('command'),
     title: $t('delete'),
-    onAction: () => void handleDeleteExclusionPattern(library, exclusionPattern),
+    onAction: () => handleDeleteExclusionPattern(library, exclusionPattern),
   };
 
   return { Edit, Delete };
@@ -273,7 +273,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
   });
 
   if (!confirmed) {
-    return false;
+    return;
   }
 
   try {
@@ -285,10 +285,7 @@ const handleDeleteLibraryFolder = async (library: LibraryResponseDto, folder: st
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
-    return false;
   }
-
-  return true;
 };
 
 export const handleAddLibraryExclusionPattern = async (library: LibraryResponseDto, exclusionPattern: string) => {
@@ -345,9 +342,8 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
   const $t = await getFormatter();
 
   const confirmed = await modalManager.showDialog({ prompt: $t('admin.library_remove_exclusion_pattern_prompt') });
-
   if (!confirmed) {
-    return false;
+    return;
   }
 
   try {
@@ -361,8 +357,5 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
     toastManager.success($t('admin.library_updated'));
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
-    return false;
   }
-
-  return true;
 };