merge main

2025-12-23 01:11:36 +03:00 · 2025-12-02 20:45:59 +00:00
parent 84b031bbe4 f5df5fa98d
commit 290de9d27c
173 changed files with 4244 additions and 3129 deletions
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -512,7 +512,7 @@
          {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
                .toLowerCase()
                .endsWith('.insp'))}
-            <ImagePanoramaViewer {asset} />
+            <ImagePanoramaViewer bind:zoomToggle {asset} />
          {:else if isShowEditor && selectedEditType === 'crop'}
            <CropArea {asset} />
          {:else}
--- a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
@@ -7,11 +7,12 @@
  import { t } from 'svelte-i18n';
  import { fade } from 'svelte/transition';

-  interface Props {
+  type Props = {
    asset: AssetResponseDto;
-  }
+    zoomToggle?: (() => void) | null;
+  };

-  const { asset }: Props = $props();
+  let { asset, zoomToggle = $bindable() }: Props = $props();

  const loadAssetData = async (id: string) => {
    const data = await viewAsset({ ...authManager.params, id, size: AssetMediaSize.Preview });
@@ -24,6 +25,7 @@
    <LoadingSpinner />
  {:then [data, { default: PhotoSphereViewer }]}
    <PhotoSphereViewer
+      bind:zoomToggle
      panorama={data}
      originalPanorama={isWebCompatibleImage(asset)
        ? getAssetOriginalUrl(asset.id)
--- a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
+++ b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { shortcuts } from '$lib/actions/shortcut';
  import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
+  import { photoZoomState } from '$lib/stores/zoom-image.store';
  import {
    EquirectangularAdapter,
    Viewer,
@@ -24,15 +26,23 @@
    strokeLinejoin: 'round',
  };

-  interface Props {
+  type Props = {
    panorama: string | { source: string };
    originalPanorama?: string | { source: string };
    adapter?: AdapterConstructor | [AdapterConstructor, unknown];
    plugins?: (PluginConstructor | [PluginConstructor, unknown])[];
    navbar?: boolean;
-  }
+    zoomToggle?: (() => void) | null;
+  };

-  let { panorama, originalPanorama, adapter = EquirectangularAdapter, plugins = [], navbar = false }: Props = $props();
+  let {
+    panorama,
+    originalPanorama,
+    adapter = EquirectangularAdapter,
+    plugins = [],
+    navbar = false,
+    zoomToggle = $bindable(),
+  }: Props = $props();

  let container: HTMLDivElement | undefined = $state();
  let viewer: Viewer;
@@ -93,6 +103,14 @@
    }
  });

+  zoomToggle = () => {
+    if (!viewer) {
+      return;
+    }
+    viewer.animate({ zoom: $photoZoomState.currentZoom > 1 ? 50 : 83.3, speed: 250 });
+  };
+
+  let hasChangedResolution: boolean = false;
  onMount(() => {
    if (!container) {
      return;
@@ -139,10 +157,15 @@
    const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
    const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
      // zoomLevel range: [0, 100]
-      if (Math.round(zoomLevel) >= 75) {
+      photoZoomState.set({
+        ...$photoZoomState,
+        currentZoom: zoomLevel / 50,
+      });
+
+      if (Math.round(zoomLevel) >= 75 && !hasChangedResolution) {
        // Replace the preview with the original
        void resolutionPlugin.setResolution('original');
-        viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+        hasChangedResolution = true;
      }
    };

@@ -158,7 +181,13 @@
      viewer.destroy();
    }
    boundingBoxesUnsubscribe();
+    // zoomHandler is not called on initial load. Viewer initial zoom is 1, but photoZoomState could be != 1.
+    photoZoomState.set({
+      ...$photoZoomState,
+      currentZoom: 1,
+    });
  });
 </script>

+<svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: true }]} />
 <div class="h-full w-full mb-0" bind:this={container}></div>
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -4,7 +4,7 @@
  import { getAssetOriginalUrl, getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
  import { timeToSeconds } from '$lib/utils/date-time';
  import { getAltText } from '$lib/utils/thumbnail-util';
-  import { AssetMediaSize, AssetVisibility } from '@immich/sdk';
+  import { AssetMediaSize, AssetVisibility, type UserResponseDto } from '@immich/sdk';
  import {
    mdiArchiveArrowDownOutline,
    mdiCameraBurst,
@@ -46,6 +46,7 @@
    imageClass?: ClassValue;
    brokenAssetClass?: ClassValue;
    dimmed?: boolean;
+    albumUsers?: UserResponseDto[];
    onClick?: (asset: TimelineAsset) => void;
    onSelect?: (asset: TimelineAsset) => void;
    onMouseEvent?: (event: { isMouseOver: boolean; selectedGroupIndex: number }) => void;
@@ -64,6 +65,7 @@
    readonly = false,
    showArchiveIcon = false,
    showStackedIcon = true,
+    albumUsers = [],
    onClick = undefined,
    onSelect = undefined,
    onMouseEvent = undefined,
@@ -85,6 +87,8 @@
  let width = $derived(thumbnailSize || thumbnailWidth || 235);
  let height = $derived(thumbnailSize || thumbnailHeight || 235);

+  let assetOwner = $derived(albumUsers?.find((user) => user.id === asset.ownerId) ?? null);
+
  const onIconClickedHandler = (e?: MouseEvent) => {
    e?.stopPropagation();
    e?.preventDefault();
@@ -268,6 +272,14 @@
          </div>
        {/if}

+        {#if !!assetOwner}
+          <div class="absolute bottom-1 end-2 max-w-[50%]">
+            <p class="text-xs font-medium text-white drop-shadow-lg max-w-[100%] truncate">
+              {assetOwner.name}
+            </p>
+          </div>
+        {/if}
+
        {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
          <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
            <Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
--- a/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
@@ -2,13 +2,14 @@
  import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
  import FormatMessage from '$lib/elements/FormatMessage.svelte';
  import { user } from '$lib/stores/user.store';
+  import { Link } from '@immich/ui';
 </script>

 <div class="flex flex-col">
  <p>
    <FormatMessage key="admin.storage_template_onboarding_description_v2">
      {#snippet children({ message })}
-        <a class="underline" href="https://docs.immich.app/administration/storage-template">{message}</a>
+        <Link href="https://docs.immich.app/administration/storage-template">{message}</Link>
      {/snippet}
    </FormatMessage>
  </p>
--- a/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
+++ b/web/src/lib/components/shared-components/album-selection/album-selection-utils.ts
@@ -46,8 +46,7 @@ export class AlbumModalRowConverter {
  ): AlbumModalRow[] {
    // only show recent albums if no search was entered, or we're in the normal albums (non-shared) modal.
    const recentAlbumsToShow = !this.shared && search.length === 0 ? recentAlbums : [];
-    const rows: AlbumModalRow[] = [];
-    rows.push({ type: AlbumModalRowType.NEW_ALBUM, selected: selectedRowIndex === 0 });
+    const rows: AlbumModalRow[] = [{ type: AlbumModalRowType.NEW_ALBUM, selected: selectedRowIndex === 0 }];

    const filteredAlbums = sortAlbums(
      search.length > 0 && albums.length > 0
--- a/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/share-cover.svelte
@@ -15,7 +15,7 @@
  let { sharedLink, preload = false, class: className = '' }: Props = $props();
 </script>

-<div class="relative shrink-0 size-24">
+<div class="relative shrink-0 size-22">
  {#if sharedLink?.album}
    <AlbumCover album={sharedLink.album} class={className} {preload} />
  {:else if sharedLink.assets[0]}
--- a/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
+++ b/web/src/lib/components/sharedlinks-page/shared-link-card.svelte
@@ -2,11 +2,10 @@
  import ActionButton from '$lib/components/ActionButton.svelte';
  import ShareCover from '$lib/components/sharedlinks-page/covers/share-cover.svelte';
  import { AppRoute } from '$lib/constants';
-  import Badge from '$lib/elements/Badge.svelte';
  import { getSharedLinkActions } from '$lib/services/shared-link.service';
  import { locale } from '$lib/stores/preferences.store';
  import { SharedLinkType, type SharedLinkResponseDto } from '@immich/sdk';
-  import { ContextMenuButton, MenuItemType } from '@immich/ui';
+  import { Badge, ContextMenuButton, MenuItemType, Text } from '@immich/ui';
  import { DateTime, type ToRelativeUnit } from 'luxon';
  import { t } from 'svelte-i18n';

@@ -45,53 +44,50 @@
  >
    <ShareCover class="transition-all duration-300 hover:shadow-lg" {sharedLink} />

-    <div class="flex flex-col justify-between">
-      <div class="info-top">
-        <div class="font-mono text-xs font-semibold text-gray-500 dark:text-gray-400">
-          {#if isExpired}
-            <p class="font-bold text-red-600 dark:text-red-400">{$t('expired')}</p>
-          {:else if expiresAt}
-            <p>
-              {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
-            </p>
-          {:else}
-            <p>{$t('expires_date', { values: { date: '∞' } })}</p>
-          {/if}
-        </div>
+    <div class="flex flex-col gap-2">
+      <Text size="large" color="primary" class="flex place-items-center gap-2 break-all">
+        {#if sharedLink.type === SharedLinkType.Album}
+          {sharedLink.album?.albumName}
+        {:else if sharedLink.type === SharedLinkType.Individual}
+          {$t('individual_share')}
+        {/if}
+      </Text>

-        <div class="text-sm pb-2">
-          <p class="flex place-items-center gap-2 text-primary break-all uppercase">
-            {#if sharedLink.type === SharedLinkType.Album}
-              {sharedLink.album?.albumName}
-            {:else if sharedLink.type === SharedLinkType.Individual}
-              {$t('individual_share')}
-            {/if}
-          </p>
-
-          <p class="text-sm">{sharedLink.description ?? ''}</p>
-        </div>
-      </div>
-
-      <div class="flex flex-wrap gap-2 text-xl">
-        {#if sharedLink.allowUpload}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('upload')}</span></Badge>
+      <div class="flex flex-wrap gap-1">
+        {#if isExpired}
+          <Badge size="small" color="danger">{$t('expired')}</Badge>
+        {:else if expiresAt}
+          <Badge size="small" color="secondary">
+            {$t('expires_date', { values: { date: getCountDownExpirationDate(expiresAt, now) } })}
+          </Badge>
+        {:else}
+          <Badge size="small" color="secondary">{$t('expires_date', { values: { date: '∞' } })}</Badge>
        {/if}

-        {#if sharedLink.allowDownload}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('download')}</span></Badge>
+        {#if sharedLink.slug}
+          <Badge size="small" color="secondary">{$t('custom_url')}</Badge>
+        {/if}
+
+        {#if sharedLink.allowUpload}
+          <Badge size="small" color="secondary">{$t('upload')}</Badge>
+        {/if}
+
+        {#if sharedLink.showMetadata && sharedLink.allowDownload}
+          <Badge size="small" color="secondary">{$t('download')}</Badge>
        {/if}

        {#if sharedLink.showMetadata}
-          <Badge rounded="full"><span class="uppercase text-xs px-1">{$t('exif')}</span></Badge>
+          <Badge size="small" color="secondary">{$t('exif')}</Badge>
        {/if}

        {#if sharedLink.password}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('password')}</span></Badge>
-        {/if}
-        {#if sharedLink.slug}
-          <Badge rounded="full"><span class="text-xs px-1">{$t('custom_url')}</span></Badge>
+          <Badge size="small" color="secondary">{$t('password')}</Badge>
        {/if}
      </div>
+
+      {#if sharedLink.description}
+        <Text size="small" class="line-clamp-1">{sharedLink.description}</Text>
+      {/if}
    </div>
  </svelte:element>
  <div class="flex flex-auto flex-col place-content-center place-items-end text-end ms-4">
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -23,7 +23,7 @@
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { isAssetViewerRoute, navigate } from '$lib/utils/navigation';
  import { getTimes, type ScrubberListener } from '$lib/utils/timeline-util';
-  import { type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { type AlbumResponseDto, type PersonResponseDto, type UserResponseDto } from '@immich/sdk';
  import { DateTime } from 'luxon';
  import { onDestroy, onMount, type Snippet } from 'svelte';
  import type { UpdatePayload } from 'vite';
@@ -49,6 +49,7 @@
    showArchiveIcon?: boolean;
    isShared?: boolean;
    album?: AlbumResponseDto | null;
+    albumUsers?: UserResponseDto[];
    person?: PersonResponseDto | null;
    isShowDeleteConfirmation?: boolean;
    onSelect?: (asset: TimelineAsset) => void;
@@ -81,6 +82,7 @@
    showArchiveIcon = false,
    isShared = false,
    album = null,
+    albumUsers = [],
    person = null,
    isShowDeleteConfirmation = $bindable(false),
    onSelect = () => {},
@@ -702,6 +704,7 @@
                showStackedIcon={withStacked}
                {showArchiveIcon}
                {asset}
+                {albumUsers}
                {groupIndex}
                onClick={(asset) => {
                  if (typeof onThumbnailClick === 'function') {
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -80,10 +80,7 @@
  const toggleArchive = async () => {
    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
-    timelineManager.updateAssetOperation(ids, (asset) => {
-      asset.visibility = visibility;
-      return { remove: false };
-    });
+    timelineManager.update(ids, (asset) => (asset.visibility = visibility));
    deselectAllAssets();
  };

--- a/web/src/lib/components/user-settings-page/user-api-key-grid.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-grid.svelte
@@ -39,7 +39,7 @@
      checked={selectAllSubItems}
      onCheckedChange={handleSelectAllSubItems}
    />
-    <Label label={title} for={title} class="font-mono text-primary text-lg" />
+    <Label label={title} for="permission-{title}" class="font-mono text-primary text-lg" />
  </div>
  <div class="mx-6 mt-3 grid grid-cols-3 gap-2">
    {#each subItems as item (item)}
@@ -50,7 +50,7 @@
          checked={selectedItems.includes(item)}
          onCheckedChange={() => handleToggleItem(item)}
        />
-        <Label label={item} for={item} class="text-sm font-mono" />
+        <Label label={item} for="permission-{item}" class="text-sm font-mono" />
      </div>
    {/each}
  </div>
--- a/web/src/lib/managers/theme-manager.svelte.ts
+++ b/web/src/lib/managers/theme-manager.svelte.ts
@@ -2,6 +2,7 @@ import { browser } from '$app/environment';
 import { Theme } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
+import { theme as uiTheme, type Theme as UiTheme } from '@immich/ui';

 export interface ThemeSetting {
  value: Theme;
@@ -71,6 +72,8 @@ class ThemeManager {

    this.#theme.current = theme;

+    uiTheme.value = theme.value as unknown as UiTheme;
+
    eventManager.emit('ThemeChange', theme);
  }
 }
--- a/web/src/lib/managers/timeline-manager/day-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/day-group.svelte.ts
@@ -6,7 +6,7 @@ import { plainDateTimeCompare } from '$lib/utils/timeline-util';

 import { SvelteSet } from 'svelte/reactivity';
 import type { MonthGroup } from './month-group.svelte';
-import type { AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
+import type { Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';

 export class DayGroup {
@@ -101,7 +101,7 @@ export class DayGroup {
    return this.viewerAssets.map((viewerAsset) => viewerAsset.asset);
  }

-  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
+  runAssetCallback(ids: Set<string>, callback: (asset: TimelineAsset) => void | { remove?: boolean }) {
    if (ids.size === 0) {
      return {
        moveAssets: [] as MoveAsset[],
@@ -122,7 +122,8 @@ export class DayGroup {

      const asset = this.viewerAssets[index].asset!;
      const oldTime = { ...asset.localDateTime };
-      let { remove } = operation(asset);
+      const callbackResult = callback(asset);
+      let remove = (callbackResult as { remove?: boolean } | undefined)?.remove ?? false;
      const newTime = asset.localDateTime;
      if (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day) {
        const { year, month, day } = newTime;
--- a/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
@@ -1,104 +0,0 @@
-import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
-import { AssetOrder } from '@immich/sdk';
-
-import { SvelteSet } from 'svelte/reactivity';
-import { GroupInsertionCache } from '../group-insertion-cache.svelte';
-import { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { AssetOperation, TimelineAsset } from '../types';
-import { updateGeometry } from './layout-support.svelte';
-import { getMonthGroupByDate } from './search-support.svelte';
-
-export function addAssetsToMonthGroups(
-  timelineManager: TimelineManager,
-  assets: TimelineAsset[],
-  options: { order: AssetOrder },
-) {
-  if (assets.length === 0) {
-    return;
-  }
-
-  const addContext = new GroupInsertionCache();
-  const updatedMonthGroups = new SvelteSet<MonthGroup>();
-  const monthCount = timelineManager.months.length;
-  for (const asset of assets) {
-    let month = getMonthGroupByDate(timelineManager, asset.localDateTime);
-
-    if (!month) {
-      month = new MonthGroup(timelineManager, asset.localDateTime, 1, options.order);
-      month.isLoaded = true;
-      timelineManager.months.push(month);
-    }
-
-    month.addTimelineAsset(asset, addContext);
-    updatedMonthGroups.add(month);
-  }
-
-  if (timelineManager.months.length !== monthCount) {
-    timelineManager.months.sort((a, b) => {
-      return a.yearMonth.year === b.yearMonth.year
-        ? b.yearMonth.month - a.yearMonth.month
-        : b.yearMonth.year - a.yearMonth.year;
-    });
-  }
-
-  for (const group of addContext.existingDayGroups) {
-    group.sortAssets(options.order);
-  }
-
-  for (const monthGroup of addContext.bucketsWithNewDayGroups) {
-    monthGroup.sortDayGroups();
-  }
-
-  for (const month of addContext.updatedBuckets) {
-    month.sortDayGroups();
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  timelineManager.updateIntersections();
-}
-
-export function runAssetOperation(
-  timelineManager: TimelineManager,
-  ids: Set<string>,
-  operation: AssetOperation,
-  options: { order: AssetOrder },
-) {
-  if (ids.size === 0) {
-    return { processedIds: new SvelteSet(), unprocessedIds: ids, changedGeometry: false };
-  }
-
-  const changedMonthGroups = new SvelteSet<MonthGroup>();
-  let idsToProcess = new SvelteSet(ids);
-  const idsProcessed = new SvelteSet<string>();
-  const combinedMoveAssets: { asset: TimelineAsset; date: TimelineDate }[][] = [];
-  for (const month of timelineManager.months) {
-    if (idsToProcess.size > 0) {
-      const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
-      if (moveAssets.length > 0) {
-        combinedMoveAssets.push(moveAssets);
-      }
-      idsToProcess = setDifference(idsToProcess, processedIds);
-      for (const id of processedIds) {
-        idsProcessed.add(id);
-      }
-      if (changedGeometry) {
-        changedMonthGroups.add(month);
-      }
-    }
-  }
-  if (combinedMoveAssets.length > 0) {
-    addAssetsToMonthGroups(
-      timelineManager,
-      combinedMoveAssets.flat().map((a) => a.asset),
-      options,
-    );
-  }
-  const changedGeometry = changedMonthGroups.size > 0;
-  for (const month of changedMonthGroups) {
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  if (changedGeometry) {
-    timelineManager.updateIntersections();
-  }
-  return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
-}
--- a/web/src/lib/managers/timeline-manager/month-group.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/month-group.svelte.ts
@@ -21,7 +21,7 @@ import { SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { GroupInsertionCache } from './group-insertion-cache.svelte';
 import type { TimelineManager } from './timeline-manager.svelte';
-import type { AssetDescriptor, AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
+import type { AssetDescriptor, Direction, MoveAsset, TimelineAsset } from './types';
 import { ViewerAsset } from './viewer-asset.svelte';

 export class MonthGroup {
@@ -50,12 +50,13 @@ export class MonthGroup {
  readonly yearMonth: TimelineYearMonth;

  constructor(
-    store: TimelineManager,
+    timelineManager: TimelineManager,
    yearMonth: TimelineYearMonth,
    initialCount: number,
+    loaded: boolean,
    order: AssetOrder = AssetOrder.Desc,
  ) {
-    this.timelineManager = store;
+    this.timelineManager = timelineManager;
    this.#initialCount = initialCount;
    this.#sortOrder = order;

@@ -72,6 +73,9 @@ export class MonthGroup {
      },
      this.#handleLoadError,
    );
+    if (loaded) {
+      this.isLoaded = true;
+    }
  }

  set intersecting(newValue: boolean) {
@@ -112,7 +116,7 @@ export class MonthGroup {
    return this.dayGroups.sort((a, b) => b.day - a.day);
  }

-  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
+  runAssetCallback(ids: Set<string>, callback: (asset: TimelineAsset) => void | { remove?: boolean }) {
    if (ids.size === 0) {
      return {
        moveAssets: [] as MoveAsset[],
@@ -130,7 +134,7 @@ export class MonthGroup {
    while (index--) {
      if (idsToProcess.size > 0) {
        const group = dayGroups[index];
-        const { moveAssets, processedIds, changedGeometry } = group.runAssetOperation(ids, operation);
+        const { moveAssets, processedIds, changedGeometry } = group.runAssetCallback(ids, callback);
        if (moveAssets.length > 0) {
          combinedMoveAssets.push(moveAssets);
        }
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -278,10 +278,11 @@ describe('TimelineManager', () => {
    });

    it('updates existing asset', () => {
+      const updateAssetsSpy = vi.spyOn(timelineManager, 'upsertAssets');
      const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build());
      timelineManager.upsertAssets([asset]);

-      timelineManager.upsertAssets([asset]);
+      expect(updateAssetsSpy).toBeCalledWith([asset]);
      expect(timelineManager.assetCount).toEqual(1);
    });

@@ -691,4 +692,42 @@ describe('TimelineManager', () => {
      expect(discoveredAssets.size).toBe(assetCount);
    });
  });
+
+  describe('showAssetOwners', () => {
+    const LS_KEY = 'album-show-asset-owners';
+
+    beforeEach(() => {
+      // ensure clean state
+      globalThis.localStorage?.removeItem(LS_KEY);
+    });
+
+    it('defaults to false', () => {
+      const timelineManager = new TimelineManager();
+      expect(timelineManager.showAssetOwners).toBe(false);
+    });
+
+    it('setShowAssetOwners updates value', () => {
+      const timelineManager = new TimelineManager();
+      timelineManager.setShowAssetOwners(true);
+      expect(timelineManager.showAssetOwners).toBe(true);
+      timelineManager.setShowAssetOwners(false);
+      expect(timelineManager.showAssetOwners).toBe(false);
+    });
+
+    it('toggleShowAssetOwners flips value', () => {
+      const timelineManager = new TimelineManager();
+      expect(timelineManager.showAssetOwners).toBe(false);
+      timelineManager.toggleShowAssetOwners();
+      expect(timelineManager.showAssetOwners).toBe(true);
+      timelineManager.toggleShowAssetOwners();
+      expect(timelineManager.showAssetOwners).toBe(false);
+    });
+
+    it('persists across instances via localStorage', () => {
+      const a = new TimelineManager();
+      a.setShowAssetOwners(true);
+      const b = new TimelineManager();
+      expect(b.showAssetOwners).toBe(true);
+    });
+  });
 });
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -1,12 +1,9 @@
 import { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
 import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
 import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
 import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
-import {
-  addAssetsToMonthGroups,
-  runAssetOperation,
-} from '$lib/managers/timeline-manager/internal/operations-support.svelte';
 import {
  findClosestGroupForDate,
  findMonthGroupForAsset as findMonthGroupForAssetUtil,
@@ -17,17 +14,23 @@ import {
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
+import { PersistedLocalStorage } from '$lib/utils/persisted';
+import {
+  setDifference,
+  toTimelineAsset,
+  type TimelineDateTime,
+  type TimelineYearMonth,
+} from '$lib/utils/timeline-util';
 import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
 import { clamp, isEqual } from 'lodash-es';
-import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 import { DayGroup } from './day-group.svelte';
 import { isMismatched, updateObject } from './internal/utils.svelte';
 import { MonthGroup } from './month-group.svelte';
 import type {
  AssetDescriptor,
-  AssetOperation,
  Direction,
+  MoveAsset,
  ScrubberMonth,
  TimelineAsset,
  TimelineManagerOptions,
@@ -88,6 +91,19 @@ export class TimelineManager extends VirtualScrollManager {
  #options: TimelineManagerOptions = TimelineManager.#INIT_OPTIONS;
  #updatingIntersections = false;
  #scrollableElement: HTMLElement | undefined = $state();
+  #showAssetOwners = new PersistedLocalStorage<boolean>('album-show-asset-owners', false);
+
+  get showAssetOwners() {
+    return this.#showAssetOwners.current;
+  }
+
+  setShowAssetOwners(value: boolean) {
+    this.#showAssetOwners.current = value;
+  }
+
+  toggleShowAssetOwners() {
+    this.#showAssetOwners.current = !this.#showAssetOwners.current;
+  }

  constructor() {
    super();
@@ -218,6 +234,7 @@ export class TimelineManager extends VirtualScrollManager {
        this,
        { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1 },
        timeBucket.count,
+        false,
        this.#options.order,
      );
    });
@@ -323,7 +340,7 @@ export class TimelineManager extends VirtualScrollManager {
  upsertAssets(assets: TimelineAsset[]) {
    const notUpdated = this.#updateAssets(assets);
    const notExcluded = notUpdated.filter((asset) => !this.isExcluded(asset));
-    addAssetsToMonthGroups(this, [...notExcluded], { order: this.#options.order ?? AssetOrder.Desc });
+    this.addAssetsUpsertSegments([...notExcluded]);
  }

  async findMonthGroupForAsset(id: string) {
@@ -400,38 +417,107 @@ export class TimelineManager extends VirtualScrollManager {
    return randomDay.viewerAssets[randomAssetIndex - accumulatedCount].asset;
  }

-  updateAssetOperation(ids: string[], operation: AssetOperation) {
-    runAssetOperation(this, new SvelteSet(ids), operation, { order: this.#options.order ?? AssetOrder.Desc });
-  }
-
-  #updateAssets(assets: TimelineAsset[]) {
-    const lookup = new SvelteMap<string, TimelineAsset>(assets.map((asset) => [asset.id, asset]));
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(lookup.keys()),
-      (asset) => {
-        updateObject(asset, lookup.get(asset.id));
-        return { remove: false };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
-    const result: TimelineAsset[] = [];
-    for (const id of unprocessedIds.values()) {
-      result.push(lookup.get(id)!);
-    }
-    return result;
+  /**
+   * Executes callback on assets, handling moves between groups and removals due to filter criteria.
+   */
+  update(ids: string[], callback: (asset: TimelineAsset) => void) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    return this.#runAssetCallback(new Set(ids), callback);
  }

  removeAssets(ids: string[]) {
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(ids),
-      () => {
-        return { remove: true };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
-    return [...unprocessedIds];
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const result = this.#runAssetCallback(new Set(ids), () => ({ remove: true }));
+    return [...result.notUpdated];
+  }
+
+  protected upsertSegmentForAsset(asset: TimelineAsset) {
+    let month = getMonthGroupByDate(this, asset.localDateTime);
+
+    if (!month) {
+      month = new MonthGroup(this, asset.localDateTime, 1, true, this.#options.order);
+      this.months.push(month);
+    }
+    return month;
+  }
+
+  /**
+   * Adds assets to existing segments, creating new segments as needed.
+   *
+   * This is an internal method that assumes the provided assets are not already
+   * present in the timeline. For updating existing assets, use updateAssetOperation().
+   */
+  protected addAssetsUpsertSegments(assets: TimelineAsset[]) {
+    if (assets.length === 0) {
+      return;
+    }
+    const context = new GroupInsertionCache();
+    const monthCount = this.months.length;
+    for (const asset of assets) {
+      this.upsertSegmentForAsset(asset).addTimelineAsset(asset, context);
+    }
+    if (this.months.length !== monthCount) {
+      this.postCreateSegments();
+    }
+    this.postUpsert(context);
+  }
+
+  #updateAssets(assets: TimelineAsset[]) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const cache = new Map<string, TimelineAsset>(assets.map((asset) => [asset.id, asset]));
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsToUpdate = new Set(cache.keys());
+    const result = this.#runAssetCallback(idsToUpdate, (asset) => void updateObject(asset, cache.get(asset.id)));
+    const notUpdated: TimelineAsset[] = [];
+    for (const assetId of result.notUpdated) {
+      notUpdated.push(cache.get(assetId)!);
+    }
+    return notUpdated;
+  }
+
+  #runAssetCallback(ids: Set<string>, callback: (asset: TimelineAsset) => void | { remove?: boolean }) {
+    if (ids.size === 0) {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      return { updated: new Set<string>(), notUpdated: ids, changedGeometry: false };
+    }
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const changedMonthGroups = new Set<MonthGroup>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    let notUpdated = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const updated = new Set<string>();
+    const assetsToMoveSegments: MoveAsset[][] = [];
+    for (const month of this.months) {
+      if (notUpdated.size === 0) {
+        break;
+      }
+      const result = month.runAssetCallback(notUpdated, callback);
+      if (result.moveAssets.length > 0) {
+        assetsToMoveSegments.push(result.moveAssets);
+      }
+      if (result.changedGeometry) {
+        changedMonthGroups.add(month);
+      }
+      notUpdated = setDifference(notUpdated, result.processedIds);
+      for (const id of result.processedIds) {
+        updated.add(id);
+      }
+    }
+    const assetsToAdd = [];
+    for (const segment of assetsToMoveSegments) {
+      for (const moveAsset of segment) {
+        assetsToAdd.push(moveAsset.asset);
+      }
+    }
+    this.addAssetsUpsertSegments(assetsToAdd);
+    const changedGeometry = changedMonthGroups.size > 0;
+    for (const month of changedMonthGroups) {
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+    if (changedGeometry) {
+      this.updateIntersections();
+    }
+    return { updated, notUpdated, changedGeometry };
  }

  override refreshLayout() {
@@ -493,4 +579,28 @@ export class TimelineManager extends VirtualScrollManager {
  getAssetOrder() {
    return this.#options.order ?? AssetOrder.Desc;
  }
+
+  protected postCreateSegments(): void {
+    this.months.sort((a, b) => {
+      return a.yearMonth.year === b.yearMonth.year
+        ? b.yearMonth.month - a.yearMonth.month
+        : b.yearMonth.year - a.yearMonth.year;
+    });
+  }
+
+  protected postUpsert(context: GroupInsertionCache): void {
+    for (const group of context.existingDayGroups) {
+      group.sortAssets(this.#options.order);
+    }
+
+    for (const monthGroup of context.bucketsWithNewDayGroups) {
+      monthGroup.sortDayGroups();
+    }
+
+    for (const month of context.updatedBuckets) {
+      month.sortDayGroups();
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+    this.updateIntersections();
+  }
 }
--- a/web/src/lib/managers/timeline-manager/types.ts
+++ b/web/src/lib/managers/timeline-manager/types.ts
@@ -37,8 +37,6 @@ export type TimelineAsset = {
  longitude?: number | null;
 };

-export type AssetOperation = (asset: TimelineAsset) => { remove: boolean };
-
 export type MoveAsset = { asset: TimelineAsset; date: TimelineDate };

 export interface Viewport {
--- a/web/src/lib/modals/TagCreateModal.svelte
+++ b/web/src/lib/modals/TagCreateModal.svelte
@@ -14,7 +14,7 @@

  const { onClose, baseTag }: Props = $props();

-  let tagValue = $state(baseTag?.value ? `${baseTag.value}/` : '');
+  let tagValue = $state(baseTag?.path ? `${baseTag.path}/` : '');

  const createTag = async () => {
    const [tag] = await upsertTags({ tagUpsertDto: { tags: [tagValue] } });
--- a/web/src/lib/services/library.service.ts
+++ b/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),
  };
--- a/web/src/lib/services/shared-link.service.ts
+++ b/web/src/lib/services/shared-link.service.ts
@@ -17,19 +17,19 @@ import {
  type SharedLinkResponseDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
-import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiQrcode } from '@mdi/js';
+import { mdiContentCopy, mdiPencilOutline, mdiQrcode, mdiTrashCanOutline } from '@mdi/js';
 import type { MessageFormatter } from 'svelte-i18n';

 export const getSharedLinkActions = ($t: MessageFormatter, sharedLink: SharedLinkResponseDto) => {
  const Edit: ActionItem = {
    title: $t('edit_link'),
-    icon: mdiCircleEditOutline,
+    icon: mdiPencilOutline,
    onAction: () => void goto(`${AppRoute.SHARED_LINKS}/${sharedLink.id}`),
  };

  const Delete: ActionItem = {
    title: $t('delete_link'),
-    icon: mdiDelete,
+    icon: mdiTrashCanOutline,
    color: 'danger',
    onAction: () => void handleDeleteSharedLink(sharedLink),
  };
--- a/web/src/lib/services/system-config.service.ts
+++ b/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 };
--- a/web/src/lib/services/user-admin.service.ts
+++ b/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),
  };
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@@ -79,14 +79,15 @@ const undoDeleteAssets = async (onUndoDelete: OnUndoDelete, assets: TimelineAsse
 */
 export function updateStackedAssetInTimeline(timelineManager: TimelineManager, { stack, toDeleteIds }: StackResponse) {
  if (stack != undefined) {
-    timelineManager.updateAssetOperation([stack.primaryAssetId], (asset) => {
-      asset.stack = {
-        id: stack.id,
-        primaryAssetId: stack.primaryAssetId,
-        assetCount: stack.assets.length,
-      };
-      return { remove: false };
-    });
+    timelineManager.update(
+      [stack.primaryAssetId],
+      (asset) =>
+        (asset.stack = {
+          id: stack.id,
+          primaryAssetId: stack.primaryAssetId,
+          assetCount: stack.assets.length,
+        }),
+    );

    timelineManager.removeAssets(toDeleteIds);
  }
@@ -101,7 +102,7 @@ export function updateStackedAssetInTimeline(timelineManager: TimelineManager, {
 * @param assets - The array of asset response DTOs to update in the timeline manager.
 */
 export function updateUnstackedAssetInTimeline(timelineManager: TimelineManager, assets: TimelineAsset[]) {
-  timelineManager.updateAssetOperation(
+  timelineManager.update(
    assets.map((asset) => asset.id),
    (asset) => {
      asset.stack = null;
--- a/web/src/lib/utils/tree-utils.ts
+++ b/web/src/lib/utils/tree-utils.ts
@@ -62,8 +62,16 @@ export class TreeNode extends Map<string, TreeNode> {
      const child = this.values().next().value!;
      child.value = joinPaths(this.value, child.value);
      child.parent = this.parent;
-      this.parent.delete(this.value);
-      this.parent.set(child.value, child);
+
+      const entries = Array.from(this.parent.entries());
+      this.parent.clear();
+      for (const [key, value] of entries) {
+        if (key === this.value) {
+          this.parent.set(child.value, child);
+        } else {
+          this.parent.set(key, value);
+        }
+      }
    }

    for (const child of this.values()) {
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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}
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 />
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 />
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 />
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/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 />
--- a/web/src/routes/+layout.svelte
+++ b/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,6 +11,7 @@
  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 { user } from '$lib/stores/user.store';
@@ -19,7 +20,8 @@
  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, 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';
@@ -120,9 +122,57 @@
      });
    }
  });
+
+  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('jobs'),
+      description: $t('admin.jobs_page_description'),
+      icon: mdiSync,
+      onAction: () => goto(AppRoute.ADMIN_JOBS),
+    },
+    {
+      title: $t('settings'),
+      description: $t('admin.jobs_page_description'),
+      icon: mdiCog,
+      onAction: () => goto(AppRoute.ADMIN_SETTINGS),
+    },
+    {
+      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>
--- a/web/src/routes/+layout.ts
+++ b/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: {
--- a/web/src/routes/admin/jobs-status/+page.svelte
+++ b/web/src/routes/admin/jobs-status/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
  import JobsPanel from '$lib/components/jobs/JobsPanel.svelte';
  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
  import { AppRoute } from '$lib/constants';
@@ -12,7 +13,7 @@
    runQueueCommandLegacy,
    type QueuesResponseLegacyDto,
  } from '@immich/sdk';
-  import { Button, HStack, modalManager, Text } from '@immich/ui';
+  import { Button, CommandPaletteContext, HStack, modalManager, Text, type ActionItem } from '@immich/ui';
  import { mdiCog, mdiPlay, mdiPlus } from '@mdi/js';
  import { onDestroy, onMount } from 'svelte';
  import { t } from 'svelte-i18n';
@@ -46,6 +47,27 @@
    }
  };

+  const handleCreateJob = () => modalManager.show(JobCreateModal);
+
+  const jobConcurrencyLink = `${AppRoute.ADMIN_SETTINGS}?isOpen=job`;
+
+  const commands: ActionItem[] = [
+    {
+      title: $t('admin.create_job'),
+      type: $t('command'),
+      icon: mdiPlus,
+      onAction: () => void handleCreateJob(),
+      shortcuts: { shift: true, key: 'n' },
+    },
+    {
+      title: $t('admin.manage_concurrency'),
+      description: $t('admin.manage_concurrency_description'),
+      type: $t('page'),
+      icon: mdiCog,
+      onAction: () => goto(jobConcurrencyLink),
+    },
+  ];
+
  onMount(async () => {
    while (running) {
      jobs = await getQueuesLegacy();
@@ -58,6 +80,8 @@
  });
 </script>

+<CommandPaletteContext {commands} />
+
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
  {#snippet buttons()}
    <HStack gap={0}>
@@ -74,22 +98,10 @@
          </Text>
        </Button>
      {/if}
-      <Button
-        leadingIcon={mdiPlus}
-        onclick={() => modalManager.show(JobCreateModal, {})}
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
+      <Button leadingIcon={mdiPlus} onclick={handleCreateJob} size="small" variant="ghost" color="secondary">
        <Text class="hidden md:block">{$t('admin.create_job')}</Text>
      </Button>
-      <Button
-        leadingIcon={mdiCog}
-        href="{AppRoute.ADMIN_SETTINGS}?isOpen=job"
-        size="small"
-        variant="ghost"
-        color="secondary"
-      >
+      <Button leadingIcon={mdiCog} href={jobConcurrencyLink} size="small" variant="ghost" color="secondary">
        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
      </Button>
    </HStack>
--- a/web/src/routes/admin/library-management/+page.svelte
+++ b/web/src/routes/admin/library-management/+page.svelte
@@ -9,7 +9,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 +49,7 @@
    delete owners[id];
  };

-  const { Create, ScanAll } = $derived(getLibrariesActions($t));
+  const { Create, ScanAll } = $derived(getLibrariesActions($t, libraries));
 </script>

 <OnEvents
@@ -58,12 +58,12 @@
  onLibraryDelete={handleDeleteLibrary}
 />

+<CommandPaletteContext commands={[Create, ScanAll]} />
+
 <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={ScanAll} />
      <HeaderButton action={Create} />
    </div>
  {/snippet}
--- a/web/src/routes/admin/library-management/[id]/+page.svelte
+++ b/web/src/routes/admin/library-management/[id]/+page.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,6 +50,8 @@
  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 },
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -27,7 +27,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, HStack } from '@immich/ui';
  import {
    mdiAccountOutline,
    mdiBackupRestore,
@@ -215,6 +215,8 @@
  );
 </script>

+<CommandPaletteContext commands={[CopyToClipboard, Upload, Download]} />
+
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
  {#snippet buttons()}
    <HStack gap={1}>
--- a/web/src/routes/admin/users/+page.svelte
+++ b/web/src/routes/admin/users/+page.svelte
@@ -6,7 +6,7 @@
  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, HStack, Icon } from '@immich/ui';
  import { mdiInfinity } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -43,6 +43,8 @@
  {onUserAdminDeleted}
 />

+<CommandPaletteContext commands={[Create]} />
+
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
  {#snippet buttons()}
    <HStack gap={1}>
--- a/web/src/routes/admin/users/[id]/+page.svelte
+++ b/web/src/routes/admin/users/[id]/+page.svelte
@@ -22,6 +22,7 @@
    CardHeader,
    CardTitle,
    Code,
+    CommandPaletteContext,
    Container,
    getByteUnitString,
    Heading,
@@ -105,6 +106,8 @@
  {onUserAdminDeleted}
 />

+<CommandPaletteContext commands={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
+
 <AdminPageLayout
  breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
 >