feat: header context menu (#24374)

2025-12-21 01:11:16 +03:00 · 2025-12-04 11:09:38 -05:00
parent ba6687dde9
commit 31f2c7b505
22 changed files with 208 additions and 230 deletions
--- a/web/src/lib/components/HeaderActionButton.svelte
+++ b/web/src/lib/components/HeaderActionButton.svelte
@@ -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}
--- a/web/src/lib/components/HeaderButton.svelte
+++ b/web/src/lib/components/HeaderButton.svelte
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { type ActionItem, Button, Text } from '@immich/ui';
-
-  type Props = {
-    action: ActionItem;
-    title?: string;
-  };
-
-  const { action, title: titleAttr }: 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={titleAttr}>
-    <Text class="hidden md:block">{title}</Text>
-  </Button>
-{/if}
--- a/web/src/lib/components/layouts/AdminPageLayout.svelte
+++ b/web/src/lib/components/layouts/AdminPageLayout.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>
--- a/web/src/lib/components/layouts/TitleLayout.svelte
+++ b/web/src/lib/components/layouts/TitleLayout.svelte
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { Breadcrumbs, type BreadcrumbItem } from '@immich/ui';
-  import { mdiSlashForward } from '@mdi/js';
-  import type { Snippet } from 'svelte';
-
-  type Props = {
-    breadcrumbs: BreadcrumbItem[];
-    buttons?: Snippet;
-    children?: Snippet;
-  };
-
-  let { breadcrumbs, buttons, children }: Props = $props();
-</script>
-
-<div class="h-full flex flex-col">
-  <div class="flex h-16 w-full place-items-center justify-between border-b p-2">
-    <Breadcrumbs items={breadcrumbs} separator={mdiSlashForward} />
-    {@render buttons?.()}
-  </div>
-  {@render children?.()}
-</div>
--- a/web/src/lib/services/library.service.ts
+++ b/web/src/lib/services/library.service.ts
@@ -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,7 +58,7 @@ 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' },
  };

@@ -66,21 +66,21 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
    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;
 };
--- a/web/src/lib/services/queue.service.ts
+++ b/web/src/lib/services/queue.service.ts
@@ -1,11 +1,20 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { queueManager } from '$lib/managers/queue-manager.svelte';
 import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-import { user } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { emptyQueue, getQueue, QueueName, updateQueue, type QueueResponseDto } from '@immich/sdk';
+import {
+  emptyQueue,
+  getQueue,
+  QueueCommand,
+  QueueName,
+  runQueueCommandLegacy,
+  updateQueue,
+  type QueueResponseDto,
+} from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem, type IconLike } from '@immich/ui';
 import {
  mdiClose,
@@ -23,7 +32,6 @@ import {
  mdiPlay,
  mdiPlus,
  mdiStateMachine,
-  mdiSync,
  mdiTable,
  mdiTagFaces,
  mdiTrashCanOutline,
@@ -31,7 +39,6 @@ import {
  mdiVideo,
 } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';
-import { get } from 'svelte/store';

 type QueueItem = {
  icon: IconLike;
@@ -39,15 +46,17 @@ type QueueItem = {
  subtitle?: string;
 };

-export const getQueuesActions = ($t: MessageFormatter) => {
-  const ViewQueues: ActionItem = {
-    title: $t('admin.queues'),
-    description: $t('admin.queues_page_description'),
-    icon: mdiSync,
-    type: $t('page'),
-    isGlobal: true,
-    $if: () => get(user)?.isAdmin,
-    onAction: () => goto(AppRoute.ADMIN_QUEUES),
+export const getQueuesActions = ($t: MessageFormatter, queues: QueueResponseDto[] | undefined) => {
+  const pausedQueues = (queues ?? []).filter(({ isPaused }) => isPaused).map(({ name }) => name);
+
+  const ResumePaused: HeaderButtonActionItem = {
+    title: $t('resume_paused_jobs', { values: { count: pausedQueues.length } }),
+    $if: () => pausedQueues.length > 0,
+    icon: mdiPlay,
+    onAction: () => handleResumePausedJobs(pausedQueues),
+    data: {
+      title: pausedQueues.join(', '),
+    },
  };

  const CreateJob: ActionItem = {
@@ -68,7 +77,7 @@ export const getQueuesActions = ($t: MessageFormatter) => {
    onAction: () => goto(`${AppRoute.ADMIN_SETTINGS}?isOpen=job`),
  };

-  return { ViewQueues, ManageConcurrency, CreateJob };
+  return { ResumePaused, ManageConcurrency, CreateJob };
 };

 export const getQueueActions = ($t: MessageFormatter, queue: QueueResponseDto) => {
@@ -126,6 +135,19 @@ export const handleEmptyQueue = async (queue: QueueResponseDto) => {
  }
 };

+const handleResumePausedJobs = async (queues: QueueName[]) => {
+  const $t = await getFormatter();
+
+  try {
+    for (const name of queues) {
+      await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
+    }
+    await queueManager.refresh();
+  } catch (error) {
+    handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
+  }
+};
+
 const handleRemoveFailedJobs = async (queue: QueueResponseDto) => {
  const $t = await getFormatter();

--- a/web/src/lib/services/shared-link.service.ts
+++ b/web/src/lib/services/shared-link.service.ts
@@ -24,26 +24,26 @@ export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLin
  const Edit: ActionItem = {
    title: $t('edit_link'),
    icon: mdiPencilOutline,
-    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
+    onAction: () => goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
  };

  const Delete: ActionItem = {
    title: $t('delete_link'),
    icon: mdiTrashCanOutline,
    color: 'danger',
-    onAction: () => void handleDeleteSharedLink(sharedLink),
+    onAction: () => handleDeleteSharedLink(sharedLink),
  };

  const Copy: ActionItem = {
    title: $t('copy_link'),
    icon: mdiContentCopy,
-    onAction: () => void copyToClipboard(asUrl(sharedLink)),
+    onAction: () => copyToClipboard(asUrl(sharedLink)),
  };

  const ViewQrCode: ActionItem = {
    title: $t('view_qr_code'),
    icon: mdiQrcode,
-    onAction: () => void handleShowSharedLinkQrCode(sharedLink),
+    onAction: () => handleShowSharedLinkQrCode(sharedLink),
  };

  return { Edit, Delete, Copy, ViewQrCode };
@@ -88,7 +88,7 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
  }
 };

-export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
+const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto) => {
  const $t = await getFormatter();
  const success = await modalManager.showDialog({
    title: $t('delete_shared_link'),
@@ -96,17 +96,15 @@ export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto):
    confirmText: $t('delete'),
  });
  if (!success) {
-    return false;
+    return;
  }

  try {
    await removeSharedLink({ id: sharedLink.id });
    eventManager.emit('SharedLinkDelete', sharedLink);
    toastManager.success($t('deleted_shared_link'));
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_delete_shared_link'));
-    return false;
  }
 };

--- a/web/src/lib/services/system-config.service.ts
+++ b/web/src/lib/services/system-config.service.ts
@@ -20,7 +20,7 @@ export const getSystemConfigActions = (
    description: $t('admin.copy_config_to_clipboard_description'),
    type: $t('command'),
    icon: mdiContentCopy,
-    onAction: () => void handleCopyToClipboard(config),
+    onAction: () => handleCopyToClipboard(config),
    shortcuts: { shift: true, key: 'c' },
  };

--- a/web/src/lib/services/user-admin.service.ts
+++ b/web/src/lib/services/user-admin.service.ts
@@ -1,11 +1,13 @@
 import { goto } from '$app/navigation';
 import { eventManager } from '$lib/managers/event-manager.svelte';
+import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
 import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
 import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
 import UserEditModal from '$lib/modals/UserEditModal.svelte';
 import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
 import { user as authUser } from '$lib/stores/user.store';
+import type { HeaderButtonActionItem } from '$lib/types';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -28,6 +30,7 @@ import {
  mdiPlusBoxOutline,
  mdiTrashCanOutline,
 } from '@mdi/js';
+import { DateTime } from 'luxon';
 import type { MessageFormatter } from 'svelte-i18n';
 import { get } from 'svelte/store';

@@ -36,7 +39,7 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
    title: $t('create_user'),
    type: $t('command'),
    icon: mdiPlusBoxOutline,
-    onAction: () => void modalManager.show(UserCreateModal, {}),
+    onAction: () => modalManager.show(UserCreateModal, {}),
    shortcuts: { shift: true, key: 'n' },
  };

@@ -60,11 +63,17 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
    shortcuts: { key: 'Backspace' },
  };

-  const Restore: ActionItem = {
+  const getDeleteDate = (deletedAt: string): Date =>
+    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
+
+  const Restore: HeaderButtonActionItem = {
    icon: mdiDeleteRestore,
    title: $t('restore'),
    type: $t('command'),
    color: 'primary',
+    data: {
+      title: $t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } }),
+    },
    $if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
    onAction: () => modalManager.show(UserRestoreConfirmModal, { user }),
  };
@@ -74,14 +83,14 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
    title: $t('reset_password'),
    type: $t('command'),
    $if: () => get(authUser).id !== user.id,
-    onAction: () => void handleResetPasswordUserAdmin(user),
+    onAction: () => handleResetPasswordUserAdmin(user),
  };

  const ResetPinCode: ActionItem = {
    icon: mdiLockSmart,
    type: $t('command'),
    title: $t('reset_pin_code'),
-    onAction: () => void handleResetPinCodeUserAdmin(user),
+    onAction: () => handleResetPinCodeUserAdmin(user),
  };

  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
@@ -162,12 +171,12 @@ const generatePassword = (length: number = 16) => {
  return generatedPassword;
 };

-export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
  const $t = await getFormatter();
  const prompt = $t('admin.confirm_user_password_reset', { values: { user: user.name } });
  const success = await modalManager.showDialog({ prompt });
  if (!success) {
-    return false;
+    return;
  }

  try {
@@ -176,28 +185,24 @@ export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) =
    eventManager.emit('UserAdminUpdate', response);
    toastManager.success();
    await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_reset_password'));
-    return false;
  }
 };

-export const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
+const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
  const $t = await getFormatter();
  const prompt = $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } });
  const success = await modalManager.showDialog({ prompt });
  if (!success) {
-    return false;
+    return;
  }

  try {
    const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
    eventManager.emit('UserAdminUpdate', response);
    toastManager.success($t('pin_code_reset_successfully'));
-    return true;
  } catch (error) {
    handleError(error, $t('errors.unable_to_reset_pin_code'));
-    return false;
  }
 };
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -1,4 +1,5 @@
 import type { QueueResponseDto, ServerVersionResponseDto } from '@immich/sdk';
+import type { ActionItem } from '@immich/ui';

 export interface ReleaseEvent {
  isAvailable: boolean;
@@ -9,3 +10,5 @@ export interface ReleaseEvent {
 }

 export type QueueSnapshot = { timestamp: number; snapshot?: QueueResponseDto[] };
+
+export type HeaderButtonActionItem = ActionItem & { data?: { title?: string } };
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -14,15 +14,15 @@
  import { themeManager } from '$lib/managers/theme-manager.svelte';
  import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
  import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
-  import { getQueuesActions } from '$lib/services/queue.service';
+  import { sidebarStore } from '$lib/stores/sidebar.svelte';
  import { user } from '$lib/stores/user.store';
  import { closeWebsocketConnection, openWebsocketConnection, websocketStore } from '$lib/stores/websocket';
  import type { ReleaseEvent } from '$lib/types';
  import { copyToClipboard, getReleaseType, semverToName } from '$lib/utils';
  import { maintenanceShouldRedirect } from '$lib/utils/maintenance';
  import { isAssetViewerRoute } from '$lib/utils/navigation';
-  import { CommandPaletteContext, modalManager, setTranslations, type ActionItem } from '@immich/ui';
-  import { mdiAccountMultipleOutline, mdiBookshelf, mdiCog, mdiServer, mdiThemeLightDark } from '@mdi/js';
+  import { CommandPaletteContext, modalManager, setTranslations, toastManager, type ActionItem } 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 '../app.css';
@@ -53,6 +53,8 @@
    return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
  };

+  toastManager.setOptions({ class: 'top-16' });
+
  onMount(() => {
    const element = document.querySelector('#stencil');
    element?.remove();
@@ -62,6 +64,10 @@
  eventManager.emit('AppInit');

  beforeNavigate(({ from, to }) => {
+    if (sidebarStore.isOpen) {
+      sidebarStore.reset();
+    }
+
    if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
      return;
    }
@@ -149,6 +155,13 @@
      icon: mdiCog,
      onAction: () => goto(AppRoute.ADMIN_SETTINGS),
    },
+    {
+      title: $t('admin.queues'),
+      description: $t('admin.queues_page_description'),
+      icon: mdiSync,
+      type: $t('page'),
+      onAction: () => goto(AppRoute.ADMIN_QUEUES),
+    },
    {
      title: $t('external_libraries'),
      description: $t('admin.external_libraries_page_description'),
@@ -163,7 +176,7 @@
    },
  ].map((route) => ({ ...route, type: $t('page'), isGlobal: true, $if: () => $user?.isAdmin }));

-  const commands = $derived([...userCommands, ...adminCommands, ...Object.values(getQueuesActions($t))]);
+  const commands = $derived([...userCommands, ...adminCommands]);
 </script>

 <OnEvents {onReleaseEvent} />
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -60,17 +59,11 @@

 <CommandPaletteContext commands={[Create, ScanAll]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={ScanAll} />
-      <HeaderButton action={Create} />
-    </div>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
  <section class="my-4">
    <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
      {#if libraries.length > 0}
-        <table class="w-3/4 text-start">
+        <table class="text-start">
          <thead
            class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
          >
--- a/web/src/routes/admin/library-management/+page.ts
+++ b/web/src/routes/admin/library-management/+page.ts
@@ -23,7 +23,7 @@ export const load = (async ({ url }) => {
    statistics: Object.fromEntries(statistics),
    owners: Object.fromEntries(owners),
    meta: {
-      title: $t('admin.external_library_management'),
+      title: $t('external_libraries'),
    },
  };
 }) satisfies PageLoad;
--- a/web/src/routes/admin/library-management/[id]/+page.svelte
+++ b/web/src/routes/admin/library-management/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
+  import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -53,18 +53,9 @@
 <CommandPaletteContext commands={[Rename, Delete, AddFolder, AddExclusionPattern, Scan]} />

 <AdminPageLayout
-  breadcrumbs={[
-    { title: $t('admin.external_library_management'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT },
-    { title: library.name },
-  ]}
+  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT }, { title: library.name }]}
+  actions={[Scan, Rename, Delete]}
 >
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <HeaderButton action={Scan} />
-      <HeaderButton action={Rename} />
-      <HeaderButton action={Delete} />
-    </div>
-  {/snippet}
  <Container size="large" center>
    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
      <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
@@ -80,7 +71,7 @@
              <Icon icon={mdiFolderOutline} size="1.5rem" />
              <CardTitle>{$t('folders')}</CardTitle>
            </div>
-            <HeaderButton action={AddFolder} />
+            <HeaderActionButton action={AddFolder} />
          </div>
        </CardHeader>
        <CardBody>
@@ -120,7 +111,7 @@
              <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
              <CardTitle>{$t('exclusion_pattern')}</CardTitle>
            </div>
-            <HeaderButton action={AddExclusionPattern} />
+            <HeaderActionButton action={AddExclusionPattern} />
          </div>
        </CardHeader>
        <CardBody>
--- a/web/src/routes/admin/queues/+page.svelte
+++ b/web/src/routes/admin/queues/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import JobsPanel from '$lib/components/QueuePanel.svelte';
  import { queueManager } from '$lib/managers/queue-manager.svelte';
  import { getQueuesActions } from '$lib/services/queue.service';
-  import { handleError } from '$lib/utils/handle-error';
-  import { QueueCommand, runQueueCommandLegacy, type QueueResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, Text, type ActionItem } from '@immich/ui';
-  import { mdiPlay } from '@mdi/js';
+  import { type QueueResponseDto } from '@immich/sdk';
+  import { CommandPaletteContext, type ActionItem } from '@immich/ui';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -22,20 +19,8 @@
  onMount(() => queueManager.listen());

  let queues = $derived<QueueResponseDto[]>(queueManager.queues);
-  const pausedQueues = $derived(queues.filter(({ isPaused }) => isPaused).map(({ name }) => name));

-  const handleResumePausedJobs = async () => {
-    try {
-      for (const name of pausedQueues) {
-        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-      }
-      await queueManager.refresh();
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-    }
-  };
-
-  const { CreateJob, ManageConcurrency } = $derived(getQueuesActions($t));
+  const { ResumePaused, CreateJob, ManageConcurrency } = $derived(getQueuesActions($t, queueManager.queues));
  const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);

  const onQueueUpdate = (update: QueueResponseDto) => {
@@ -52,27 +37,7 @@

 <OnEvents {onQueueUpdate} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      {#if pausedQueues.length > 0}
-        <Button
-          leadingIcon={mdiPlay}
-          onclick={handleResumePausedJobs}
-          size="small"
-          variant="ghost"
-          title={pausedQueues.join(', ')}
-        >
-          <Text class="hidden md:block">
-            {$t('resume_paused_jobs', { values: { count: pausedQueues.length } })}
-          </Text>
-        </Button>
-      {/if}
-      <HeaderButton action={CreateJob} />
-      <HeaderButton action={ManageConcurrency} />
-    </HStack>
-  {/snippet}
-
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ResumePaused, CreateJob, ManageConcurrency]}>
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 sm:w-5/6 md:w-212.5">
      {#if queues}
--- a/web/src/routes/admin/queues/[name]/+page.svelte
+++ b/web/src/routes/admin/queues/[name]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import QueueGraph from '$lib/components/QueueGraph.svelte';
@@ -7,7 +6,18 @@
  import { queueManager } from '$lib/managers/queue-manager.svelte';
  import { asQueueItem, getQueueActions } from '$lib/services/queue.service';
  import { type QueueResponseDto } from '@immich/sdk';
-  import { Badge, Card, CardBody, CardHeader, CardTitle, Container, Heading, HStack, Icon, Text } from '@immich/ui';
+  import {
+    Badge,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Container,
+    Heading,
+    Icon,
+    MenuItemType,
+    Text,
+  } from '@immich/ui';
  import { mdiClockTimeTwoOutline } from '@mdi/js';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -35,15 +45,10 @@

 <OnEvents {onQueueUpdate} />

-<AdminPageLayout breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <HeaderButton action={Pause} />
-      <HeaderButton action={Resume} />
-      <HeaderButton action={Empty} />
-      <HeaderButton action={RemoveFailedJobs} />
-    </HStack>
-  {/snippet}
+<AdminPageLayout
+  breadcrumbs={[{ title: $t('admin.queues'), href: AppRoute.ADMIN_QUEUES }, { title: item.title }]}
+  actions={[Pause, Resume, Empty, MenuItemType.Divider, RemoveFailedJobs]}
+>
  <div>
    <Container size="large" center>
      <div class="mb-1 mt-4 flex items-center gap-2">
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -18,7 +18,6 @@
  import ThemeSettings from '$lib/components/admin-settings/ThemeSettings.svelte';
  import TrashSettings from '$lib/components/admin-settings/TrashSettings.svelte';
  import UserSettings from '$lib/components/admin-settings/UserSettings.svelte';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -27,7 +26,7 @@
  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
  import { systemConfigManager } from '$lib/managers/system-config-manager.svelte';
  import { getSystemConfigActions } from '$lib/services/system-config.service';
-  import { Alert, CommandPaletteContext, HStack } from '@immich/ui';
+  import { Alert, CommandPaletteContext } from '@immich/ui';
  import {
    mdiAccountOutline,
    mdiBackupRestore,
@@ -217,24 +216,13 @@

 <CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <div class="hidden lg:block">
-        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-      </div>
-      <HeaderButton action={CopyToClipboard} />
-      <HeaderButton action={Download} />
-      <HeaderButton action={Upload} />
-    </HStack>
-  {/snippet}
-
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[CopyToClipboard, Download, Upload]}>
+  <section id="setting-content" class="flex place-content-center sm:mx-4 mt-4">
    <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
      {#if featureFlagsManager.value.configFile}
        <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
      {/if}
-      <div class="block lg:hidden">
+      <div>
        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
      </div>
      <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
  import { locale } from '$lib/stores/preferences.store';
  import { getByteUnitString } from '$lib/utils/byte-units';
  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, HStack, Icon } from '@immich/ui';
+  import { Button, CommandPaletteContext, Icon } from '@immich/ui';
  import { mdiInfinity } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -45,12 +44,7 @@

 <CommandPaletteContext commands={[Create]} />

-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <HeaderButton action={Create} />
-    </HStack>
-  {/snippet}
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 lg:w-212.5">
      <table class="my-5 w-full text-start">
--- a/web/src/routes/admin/users/[id]/+page.svelte
+++ b/web/src/routes/admin/users/[id]/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  import HeaderButton from '$lib/components/HeaderButton.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import OnEvents from '$lib/components/OnEvents.svelte';
  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
@@ -8,7 +7,6 @@
  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
  import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
  import { AppRoute } from '$lib/constants';
-  import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
  import { getUserAdminActions } from '$lib/services/user-admin.service';
  import { locale } from '$lib/stores/preferences.store';
  import { createDateFormatter, findLocale } from '$lib/utils';
@@ -26,8 +24,8 @@
    Container,
    getByteUnitString,
    Heading,
-    HStack,
    Icon,
+    MenuItemType,
    Stack,
    Text,
  } from '@immich/ui';
@@ -42,15 +40,14 @@
    mdiPlayCircle,
    mdiTrashCanOutline,
  } from '@mdi/js';
-  import { DateTime } from 'luxon';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';

-  interface Props {
+  type Props = {
    data: PageData;
-  }
+  };

-  let { data }: Props = $props();
+  const { data }: Props = $props();

  let user = $derived(data.user);
  const userPreferences = $derived(data.userPreferences);
@@ -94,9 +91,6 @@
      await goto(AppRoute.ADMIN_USERS);
    }
  };
-
-  const getDeleteDate = (deletedAt: string): Date =>
-    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
 </script>

 <OnEvents
@@ -110,19 +104,8 @@

 <AdminPageLayout
  breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
+  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
 >
-  {#snippet buttons()}
-    <HStack gap={0}>
-      <HeaderButton action={ResetPassword} />
-      <HeaderButton action={ResetPinCode} />
-      <HeaderButton action={Update} />
-      <HeaderButton
-        action={Restore}
-        title={$t('admin.user_restore_scheduled_removal', { values: { date: getDeleteDate(user.deletedAt!) } })}
-      />
-      <HeaderButton action={Delete} />
-    </HStack>
-  {/snippet}
  <div>
    <Container size="large" center>
      {#if user.deletedAt}