merge: remote-tracking branch 'immich/main' into feat/integrity-checks-izzy

web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -66,6 +66,8 @@
   } from '@immich/sdk';
   import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
   import {
+    mdiAccountEye,
+    mdiAccountEyeOutline,
     mdiArrowLeft,
     mdiCogOutline,
     mdiDeleteOutline,
@@ -101,6 +103,9 @@
   let isShowActivity = $state(false);
   let albumOrder: AssetOrder | undefined = $state(data.album.order);
 
+  let timelineManager = $state<TimelineManager>() as TimelineManager;
+  let showAlbumUsers = $derived(timelineManager?.showAssetOwners ?? false);
+
   const assetInteraction = new AssetInteraction();
   const timelineInteraction = new AssetInteraction();
 
@@ -290,13 +295,17 @@
   let album = $derived(data.album);
   let albumId = $derived(album.id);
 
+  const containsEditors = $derived(album?.shared && album.albumUsers.some(({ role }) => role === AlbumUserRole.Editor));
+  const albumUsers = $derived(
+    showAlbumUsers && containsEditors ? [album.owner, ...album.albumUsers.map(({ user }) => user)] : [],
+  );
+
   $effect(() => {
     if (!album.isActivityEnabled && activityManager.commentCount === 0) {
       isShowActivity = false;
     }
   });
 
-  let timelineManager = $state<TimelineManager>() as TimelineManager;
   const options = $derived.by(() => {
     if (viewMode === AlbumPageViewMode.SELECT_ASSETS) {
       return {
@@ -418,6 +427,7 @@
       <Timeline
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
+        {albumUsers}
         bind:timelineManager
         {options}
         assetInteraction={currentAssetIntersection}
@@ -547,11 +557,7 @@
         {#if assetInteraction.isAllUserOwned}
           <FavoriteAction
             removeFavorite={assetInteraction.isAllFavorite}
-            onFavorite={(ids, isFavorite) =>
-              timelineManager.updateAssetOperation(ids, (asset) => {
-                asset.isFavorite = isFavorite;
-                return { remove: false };
-              })}
+            onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
           ></FavoriteAction>
         {/if}
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
@@ -570,11 +576,7 @@
             <ArchiveAction
               menuItem
               unarchive={assetInteraction.isAllArchived}
-              onArchive={(ids, visibility) =>
-                timelineManager.updateAssetOperation(ids, (asset) => {
-                  asset.visibility = visibility;
-                  return { remove: false };
-                })}
+              onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
             />
             <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
           {/if}
@@ -657,6 +659,13 @@
                 color="secondary"
                 offset={{ x: 175, y: 25 }}
               >
+                {#if containsEditors}
+                  <MenuOption
+                    icon={showAlbumUsers ? mdiAccountEye : mdiAccountEyeOutline}
+                    text={$t('view_asset_owners')}
+                    onClick={() => timelineManager.toggleShowAssetOwners()}
+                  />
+                {/if}
                 {#if album.assetCount > 0}
                   <MenuOption
                     icon={mdiImageOutline}

web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -66,11 +66,7 @@
   >
     <ArchiveAction
       unarchive
-      onArchive={(ids, visibility) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.visibility = visibility;
-          return { remove: false };
-        })}
+      onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
     />
     <CreateSharedLink />
     <SelectAllAssets {timelineManager} {assetInteraction} />
@@ -80,11 +76,7 @@
     </ButtonContextMenu>
     <FavoriteAction
       removeFavorite={assetInteraction.isAllFavorite}
-      onFavorite={(ids, isFavorite) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.isFavorite = isFavorite;
-          return { remove: false };
-        })}
+      onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
     />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />

web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -85,11 +85,7 @@
       <ArchiveAction
         menuItem
         unarchive={assetInteraction.isAllArchived}
-        onArchive={(ids, visibility) =>
-          timelineManager.updateAssetOperation(ids, (asset) => {
-            asset.visibility = visibility;
-            return { remove: false };
-          })}
+        onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
       />
       {#if $preferences.tags.enabled}
         <TagAction menuItem />

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -492,11 +492,7 @@
       </ButtonContextMenu>
       <FavoriteAction
         removeFavorite={assetInteraction.isAllFavorite}
-        onFavorite={(ids, isFavorite) =>
-          timelineManager.updateAssetOperation(ids, (asset) => {
-            asset.isFavorite = isFavorite;
-            return { remove: false };
-          })}
+        onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
       />
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem filename="{person.name || 'immich'}.zip" />
@@ -511,11 +507,7 @@
         <ArchiveAction
           menuItem
           unarchive={assetInteraction.isAllArchived}
-          onArchive={(ids, visibility) =>
-            timelineManager.updateAssetOperation(ids, (asset) => {
-              asset.visibility = visibility;
-              return { remove: false };
-            })}
+          onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
         />
         {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
           <TagAction menuItem />

web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte

@@ -120,11 +120,7 @@
     </ButtonContextMenu>
     <FavoriteAction
       removeFavorite={assetInteraction.isAllFavorite}
-      onFavorite={(ids, isFavorite) =>
-        timelineManager.updateAssetOperation(ids, (asset) => {
-          asset.isFavorite = isFavorite;
-          return { remove: false };
-        })}
+      onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
     ></FavoriteAction>
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
@@ -148,11 +144,7 @@
       <ChangeLocation menuItem />
       <ArchiveAction
         menuItem
-        onArchive={(ids, visibility) =>
-          timelineManager.updateAssetOperation(ids, (asset) => {
-            asset.visibility = visibility;
-            return { remove: false };
-          })}
+        onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
       />
       {#if $preferences.tags.enabled}
         <TagAction menuItem />

web/src/routes/(user)/shared-links/[[id=id]]/+page.svelte

@@ -3,7 +3,7 @@
   import { page } from '$app/state';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import SharedLinkCard from '$lib/components/sharedlinks-page/shared-link-card.svelte';
+  import SharedLinkCard from '$lib/components/sharedlinks-page/SharedLinkCard.svelte';
   import { AppRoute } from '$lib/constants';
   import GroupTab from '$lib/elements/GroupTab.svelte';
   import SharedLinkUpdateModal from '$lib/modals/SharedLinkUpdateModal.svelte';

web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -15,9 +15,24 @@
   import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
   import { deleteTag, getAllTags, type TagResponseDto } from '@immich/sdk';
   import { Button, HStack, modalManager, Text } from '@immich/ui';
-  import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
+  import { mdiDotsVertical, mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import { preferences, user } from '$lib/stores/user.store';
 
   interface Props {
     data: PageData;
@@ -79,6 +94,11 @@
     // navigate to parent
     await navigateToView(tag.parent ? tag.parent.path : '');
   };
+
+  const handleSetVisibility = (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
+    assetInteraction.clearMultiselect();
+  };
 </script>
 
 <UserPageLayout title={data.meta.title}>
@@ -131,3 +151,45 @@
     {/if}
   </section>
 </UserPageLayout>
+
+<section>
+  {#if assetInteraction.selectionActive}
+    <div class="fixed top-0 start-0 w-full">
+      <AssetSelectControlBar
+        ownerId={$user.id}
+        assets={assetInteraction.selectedAssets}
+        clearSelect={() => assetInteraction.clearMultiselect()}
+      >
+        <CreateSharedLink />
+        <SelectAllAssets {timelineManager} {assetInteraction} />
+        <ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
+          <AddToAlbum />
+          <AddToAlbum shared />
+        </ButtonContextMenu>
+        <FavoriteAction
+          removeFavorite={assetInteraction.isAllFavorite}
+          onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
+        ></FavoriteAction>
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+          <DownloadAction menuItem />
+          <ChangeDate menuItem />
+          <ChangeDescription menuItem />
+          <ChangeLocation menuItem />
+          <ArchiveAction
+            menuItem
+            onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
+          />
+          {#if $preferences.tags.enabled}
+            <TagAction menuItem />
+          {/if}
+          <DeleteAssets
+            menuItem
+            onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
+            onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
+          />
+          <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
+        </ButtonContextMenu>
+      </AssetSelectControlBar>
+    </div>
+  {/if}
+</section>

web/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
+  import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcut } from '$lib/actions/shortcut';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
@@ -11,15 +11,18 @@
   import { AppRoute } from '$lib/constants';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
+  import { themeManager } from '$lib/managers/theme-manager.svelte';
   import ServerRestartingModal from '$lib/modals/ServerRestartingModal.svelte';
   import VersionAnnouncementModal from '$lib/modals/VersionAnnouncementModal.svelte';
+  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 { modalManager, setTranslations } from '@immich/ui';
+  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';
@@ -50,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();
@@ -59,6 +64,10 @@
   eventManager.emit('AppInit');
 
   beforeNavigate(({ from, to }) => {
+    if (sidebarStore.isOpen) {
+      sidebarStore.reset();
+    }
+
     if (isAssetViewerRoute(from) && isAssetViewerRoute(to)) {
       return;
     }
@@ -120,9 +129,58 @@
       });
     }
   });
+
+  const userCommands: ActionItem[] = [
+    {
+      title: $t('theme'),
+      description: $t('toggle_theme_description'),
+      type: $t('command'),
+      icon: mdiThemeLightDark,
+      onAction: () => themeManager.toggleTheme(),
+      shortcuts: { shift: true, key: 't' },
+      isGlobal: true,
+    },
+  ];
+
+  const adminCommands: ActionItem[] = [
+    {
+      title: $t('users'),
+      description: $t('admin.users_page_description'),
+      icon: mdiAccountMultipleOutline,
+      onAction: () => goto(AppRoute.ADMIN_USERS),
+    },
+    {
+      title: $t('settings'),
+      description: $t('admin.settings_page_description'),
+      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'),
+      icon: mdiBookshelf,
+      onAction: () => goto(AppRoute.ADMIN_LIBRARY_MANAGEMENT),
+    },
+    {
+      title: $t('server_stats'),
+      description: $t('admin.server_stats_page_description'),
+      icon: mdiServer,
+      onAction: () => goto(AppRoute.ADMIN_STATS),
+    },
+  ].map((route) => ({ ...route, type: $t('page'), isGlobal: true, $if: () => $user?.isAdmin }));
+
+  const commands = $derived([...userCommands, ...adminCommands]);
 </script>
 
 <OnEvents {onReleaseEvent} />
+<CommandPaletteContext {commands} />
 
 <svelte:head>
   <title>{page.data.meta?.title || 'Web'} - Immich</title>

web/src/routes/+layout.ts

@@ -2,6 +2,7 @@ import { goto } from '$app/navigation';
 import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
 import { maintenanceCreateUrl, maintenanceReturnUrl, maintenanceShouldRedirect } from '$lib/utils/maintenance';
 import { init } from '$lib/utils/server';
+import { commandPaletteManager } from '@immich/ui';
 import type { LayoutLoad } from './$types';
 
 export const ssr = false;
@@ -21,6 +22,8 @@ export const load = (async ({ fetch, url }) => {
     error = initError;
   }
 
+  commandPaletteManager.enable();
+
   return {
     error,
     meta: {

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

@@ -1,104 +0,0 @@
-<script lang="ts">
-  import JobsPanel from '$lib/components/jobs/JobsPanel.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import { AppRoute } from '$lib/constants';
-  import JobCreateModal from '$lib/modals/JobCreateModal.svelte';
-  import { asyncTimeout } from '$lib/utils';
-  import { handleError } from '$lib/utils/handle-error';
-  import {
-    getQueuesLegacy,
-    QueueCommand,
-    QueueName,
-    runQueueCommandLegacy,
-    type QueuesResponseLegacyDto,
-  } from '@immich/sdk';
-  import { Button, HStack, modalManager, Text } from '@immich/ui';
-  import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
-  import { onDestroy, onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  let jobs: QueuesResponseLegacyDto | undefined = $state();
-
-  let running = true;
-
-  const pausedJobs = $derived(
-    Object.entries(jobs ?? {})
-      .filter(([_, queue]) => queue.queueStatus?.isPaused)
-      .map(([name]) => name as QueueName),
-  );
-
-  const handleResumePausedJobs = async () => {
-    try {
-      for (const name of pausedJobs) {
-        await runQueueCommandLegacy({ name, queueCommandDto: { command: QueueCommand.Resume, force: false } });
-      }
-      // Refresh jobs status immediately after resuming
-      jobs = await getQueuesLegacy();
-    } catch (error) {
-      handleError(error, $t('admin.failed_job_command', { values: { command: 'resume', job: 'paused jobs' } }));
-    }
-  };
-
-  onMount(async () => {
-    while (running) {
-      jobs = await getQueuesLegacy();
-      await asyncTimeout(5000);
-    }
-  });
-
-  onDestroy(() => {
-    running = false;
-  });
-</script>
-
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={0}>
-      {#if pausedJobs.length > 0}
-        <Button
-          leadingIcon={mdiPlay}
-          onclick={handleResumePausedJobs}
-          size="small"
-          variant="ghost"
-          title={pausedJobs.join(', ')}
-        >
-          <Text class="hidden md:block">
-            {$t('resume_paused_jobs', { values: { count: pausedJobs.length } })}
-          </Text>
-        </Button>
-      {/if}
-      <Button
-        leadingIcon={mdiPlus}
-        onclick={() => modalManager.show(JobCreateModal, {})}
-        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"
-      >
-        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
-      </Button>
-    </HStack>
-  {/snippet}
-  <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 jobs}
-        <JobsPanel {jobs} />
-      {/if}
-    </section>
-  </section>
-</AdminPageLayout>

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

@@ -1,18 +1,5 @@
-import { authenticate } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { getQueuesLegacy } from '@immich/sdk';
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ url }) => {
-  await authenticate(url, { admin: true });
-
-  const jobs = await getQueuesLegacy();
-  const $t = await getFormatter();
-
-  return {
-    jobs,
-    meta: {
-      title: $t('admin.job_status'),
-    },
-  };
-}) satisfies PageLoad;
+export const load = (() => redirect(307, AppRoute.ADMIN_QUEUES)) satisfies PageLoad;

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';
@@ -9,7 +8,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getLibrary, getLibraryStatistics, getUserAdmin, type LibraryResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, CommandPaletteContext } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import type { PageData } from './$types';
@@ -49,7 +48,7 @@
     delete owners[id];
   };
 
-  const { Create, ScanAll } = $derived(getLibrariesActions($t));
+  const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
 </script>
 
 <OnEvents
@@ -58,19 +57,13 @@
   onLibraryDelete={handleDeleteLibrary}
 />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      {#if libraries.length > 0}
-        <HeaderButton action={ScanAll} />
-      {/if}
-      <HeaderButton action={Create} />
-    </div>
-  {/snippet}
+<CommandPaletteContext commands={[Create, ScanAll]} />
+
+<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"
           >

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;

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';
@@ -15,7 +15,18 @@
     getLibraryFolderActions,
   } from '$lib/services/library.service';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { Card, CardBody, CardHeader, CardTitle, Code, Container, Heading, Icon, modalManager } from '@immich/ui';
+  import {
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Code,
+    CommandPaletteContext,
+    Container,
+    Heading,
+    Icon,
+    modalManager,
+  } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -39,19 +50,12 @@
   onLibraryDelete={({ id }) => id === library.id && goto(AppRoute.ADMIN_LIBRARY_MANAGEMENT)}
 />
 
+<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>
@@ -67,7 +71,7 @@
               <Icon icon={mdiFolderOutline} size="1.5rem" />
               <CardTitle>{$t('folders')}</CardTitle>
             </div>
-            <HeaderButton action={AddFolder} />
+            <HeaderActionButton action={AddFolder} />
           </div>
         </CardHeader>
         <CardBody>
@@ -107,7 +111,7 @@
               <Icon icon={mdiFilterMinusOutline} size="1.5rem" />
               <CardTitle>{$t('exclusion_pattern')}</CardTitle>
             </div>
-            <HeaderButton action={AddExclusionPattern} />
+            <HeaderActionButton action={AddExclusionPattern} />
           </div>
         </CardHeader>
         <CardBody>

web/src/routes/admin/queues/+page.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  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 { 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';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  onMount(() => queueManager.listen());
+
+  let queues = $derived<QueueResponseDto[]>(queueManager.queues);
+
+  const { ResumePaused, CreateJob, ManageConcurrency } = $derived(getQueuesActions($t, queueManager.queues));
+  const commands: ActionItem[] = $derived([CreateJob, ManageConcurrency]);
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    queues = queues.map((queue) => {
+      if (queue.name === update.name) {
+        return update;
+      }
+      return queue;
+    });
+  };
+</script>
+
+<CommandPaletteContext {commands} />
+
+<OnEvents {onQueueUpdate} />
+
+<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}
+        <JobsPanel {queues} />
+      {/if}
+    </section>
+  </section>
+</AdminPageLayout>

web/src/routes/admin/queues/+page.ts

@@ -0,0 +1,18 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueues } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+
+  const queues = await getQueues();
+  const $t = await getFormatter();
+
+  return {
+    queues,
+    meta: {
+      title: $t('admin.queues'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/queues/[name]/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import QueueGraph from '$lib/components/QueueGraph.svelte';
+  import { AppRoute } from '$lib/constants';
+  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,
+    Icon,
+    MenuItemType,
+    Text,
+  } from '@immich/ui';
+  import { mdiClockTimeTwoOutline } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  const { data }: Props = $props();
+
+  let queue = $derived(data.queue);
+
+  const { Pause, Resume, Empty, RemoveFailedJobs } = $derived(getQueueActions($t, queue));
+  const item = $derived(asQueueItem($t, queue));
+
+  onMount(() => queueManager.listen());
+
+  const onQueueUpdate = (update: QueueResponseDto) => {
+    if (update.name === queue.name) {
+      queue = update;
+    }
+  };
+</script>
+
+<OnEvents {onQueueUpdate} />
+
+<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">
+        <Heading tag="h1" size="large">{item.title}</Heading>
+        {#if queue.isPaused}
+          <Badge color="warning">
+            {$t('paused')}
+          </Badge>
+        {/if}
+      </div>
+      <Text color="muted" class="mb-4">{item.subtitle}</Text>
+
+      <div class="flex gap-1 mb-4">
+        <Badge>{$t('active_count', { values: { count: queue.statistics.active } })}</Badge>
+        <Badge>{$t('waiting_count', { values: { count: queue.statistics.waiting } })}</Badge>
+        {#if queue.statistics.failed > 0}
+          <Badge color="danger">{$t('failed_count', { values: { count: queue.statistics.failed } })}</Badge>
+        {/if}
+      </div>
+
+      <div class="mt-8">
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2 text-primary">
+              <Icon icon={mdiClockTimeTwoOutline} size="1.5rem" />
+              <CardTitle>{$t('admin.jobs_over_time')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <QueueGraph {queue} class="h-[300px]" />
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  </div>
+</AdminPageLayout>

web/src/routes/admin/queues/[name]/+page.ts

@@ -0,0 +1,31 @@
+import { AppRoute } from '$lib/constants';
+import { fromQueueSlug } from '$lib/services/queue.service';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getQueue, getQueueJobs, QueueJobStatus } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate(url, { admin: true });
+  await requestServerInfo();
+
+  const name = fromQueueSlug(params.name);
+  if (!name) {
+    redirect(302, AppRoute.ADMIN_QUEUES);
+  }
+
+  const [queue, failedJobs] = await Promise.all([
+    getQueue({ name }),
+    getQueueJobs({ name, status: [QueueJobStatus.Failed, QueueJobStatus.Paused] }),
+  ]);
+  const $t = await getFormatter();
+
+  return {
+    queue,
+    failedJobs,
+    meta: {
+      title: $t('admin.queue_details'),
+    },
+  };
+}) satisfies PageLoad;

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, HStack } from '@immich/ui';
+  import { Alert, CommandPaletteContext } from '@immich/ui';
   import {
     mdiAccountOutline,
     mdiBackupRestore,
@@ -215,24 +214,15 @@
   );
 </script>
 
-<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}
+<CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
 
-  <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}>

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, 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';
@@ -43,12 +42,9 @@
   {onUserAdminDeleted}
 />
 
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
-  {#snippet buttons()}
-    <HStack gap={1}>
-      <HeaderButton action={Create} />
-    </HStack>
-  {/snippet}
+<CommandPaletteContext commands={[Create]} />
+
+<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">

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';
@@ -22,11 +20,12 @@
     CardHeader,
     CardTitle,
     Code,
+    CommandPaletteContext,
     Container,
     getByteUnitString,
     Heading,
-    HStack,
     Icon,
+    MenuItemType,
     Stack,
     Text,
   } from '@immich/ui';
@@ -41,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);
@@ -93,9 +91,6 @@
       await goto(AppRoute.ADMIN_USERS);
     }
   };
-
-  const getDeleteDate = (deletedAt: string): Date =>
-    DateTime.fromISO(deletedAt).plus({ days: serverConfigManager.value.userDeleteDelay }).toJSDate();
 </script>
 
 <OnEvents
@@ -105,21 +100,12 @@
   {onUserAdminDeleted}
 />
 
+<CommandPaletteContext commands={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
+
 <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}