fix: add a sequence column to asset edits

* chore: use context menu for user table

* chore: reorder columns

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

.github/workflows/docs-deploy.yml

@@ -131,7 +131,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@b868e6e7c8cc212beec876330b4059e661ee44bb # use-mise-action-v1.1.1
+        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
 
       - name: Load parameters
         id: parameters

.github/workflows/docs-destroy.yml

@@ -29,7 +29,7 @@ jobs:
           token: ${{ steps.token.outputs.token }}
 
       - name: Setup Mise
-        uses: immich-app/devtools/actions/use-mise@b868e6e7c8cc212beec876330b4059e661ee44bb # use-mise-action-v1.1.1
+        uses: immich-app/devtools/actions/use-mise@cd24790a7f5f6439ac32cc94f5523cb2de8bfa8c # use-mise-action-v1.1.0
 
       - name: Destroy Docs Subdomain
         env:

mobile/openapi/lib/model/permission.dart

@@ -82,6 +82,8 @@ class Permission {
   static const timelinePeriodRead = Permission._(r'timeline.read');
   static const timelinePeriodDownload = Permission._(r'timeline.download');
   static const maintenance = Permission._(r'maintenance');
+  static const mapPeriodRead = Permission._(r'map.read');
+  static const mapPeriodSearch = Permission._(r'map.search');
   static const memoryPeriodCreate = Permission._(r'memory.create');
   static const memoryPeriodRead = Permission._(r'memory.read');
   static const memoryPeriodUpdate = Permission._(r'memory.update');
@@ -238,6 +240,8 @@ class Permission {
     timelinePeriodRead,
     timelinePeriodDownload,
     maintenance,
+    mapPeriodRead,
+    mapPeriodSearch,
     memoryPeriodCreate,
     memoryPeriodRead,
     memoryPeriodUpdate,
@@ -429,6 +433,8 @@ class PermissionTypeTransformer {
         case r'timeline.read': return Permission.timelinePeriodRead;
         case r'timeline.download': return Permission.timelinePeriodDownload;
         case r'maintenance': return Permission.maintenance;
+        case r'map.read': return Permission.mapPeriodRead;
+        case r'map.search': return Permission.mapPeriodSearch;
         case r'memory.create': return Permission.memoryPeriodCreate;
         case r'memory.read': return Permission.memoryPeriodRead;
         case r'memory.update': return Permission.memoryPeriodUpdate;

open-api/immich-openapi-specs.json

@@ -6305,6 +6305,7 @@
             "state": "Stable"
           }
         ],
+        "x-immich-permission": "map.read",
         "x-immich-state": "Stable"
       }
     },
@@ -6376,6 +6377,7 @@
             "state": "Stable"
           }
         ],
+        "x-immich-permission": "map.search",
         "x-immich-state": "Stable"
       }
     },
@@ -18966,6 +18968,8 @@
           "timeline.read",
           "timeline.download",
           "maintenance",
+          "map.read",
+          "map.search",
           "memory.create",
           "memory.read",
           "memory.update",

open-api/typescript-sdk/src/fetch-client.ts

@@ -5534,6 +5534,8 @@ export enum Permission {
     TimelineRead = "timeline.read",
     TimelineDownload = "timeline.download",
     Maintenance = "maintenance",
+    MapRead = "map.read",
+    MapSearch = "map.search",
     MemoryCreate = "memory.create",
     MemoryRead = "memory.read",
     MemoryUpdate = "memory.update",

readme_i18n/README_de_DE.md

@@ -38,11 +38,6 @@
   <a href="README_th_TH.md">ภาษาไทย</a>
 </p>
 
-## Warnung
-
-- ⚠️ Das Projekt befindet sich in **sehr aktiver** Entwicklung.
-- ⚠️ Gehe von möglichen Fehlern und von Änderungen mit Breaking-Changes aus.
-- ⚠️ **Nutze die App auf keinen Fall als einziges Speichermedium für deine Fotos und Videos.**
 - ⚠️ Befolge immer die [3-2-1](https://www.backblaze.com/blog/the-3-2-1-backup-strategy/) Backup-Regel für deine wertvollen Fotos und Videos!
 
 > [!NOTE]
@@ -62,7 +57,7 @@
 
 ## Demo
 
-Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App kannst Du `https://demo.immich.app` als `Server Endpoint URL` angeben.
+Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Smartphone-App kannst Du `https://demo.immich.app` als `Server Endpoint URL` angeben.
 
 ### Login Daten
 
@@ -93,7 +88,7 @@ Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App
 | LivePhoto/MotionPhoto Sicherung und Wiedergabe       | Ja     | Ja    |
 | Unterstützung für 360-Grad-Bilder     	             | Nein   | Ja    |
 | Benutzerdefinierte Speicherstruktur                  | Ja     | Ja    |
-| Öffentliches Teilen                                  | Nein   | Ja    |
+| Öffentliches Teilen                                  | Ja     | Ja    |
 | Archiv und Favoriten                                 | Ja     | Ja    |
 | Globale Karte                                        | Ja     | Ja    |
 | Partnerfreigabe (Teilen)                             | Ja     | Ja    |
@@ -103,7 +98,7 @@ Die Web-Demo kannst Du unter https://demo.immich.app finden. Für die Handy-App
 | Schreibgeschützte Gallerie                           | Ja     | Ja    |
 | Gestapelte Bilder                                    | Ja     | Ja    |
 | Tags                                                 | Nein   | Ja    |
-| Ordner-Ansicht                                       | Nein   | Ja    |
+| Ordner-Ansicht                                       | Ja     | Ja    |
 
 
 ## Übersetzungen

server/src/controllers/map.controller.ts

@@ -8,7 +8,7 @@ import {
   MapReverseGeocodeDto,
   MapReverseGeocodeResponseDto,
 } from 'src/dtos/map.dto';
-import { ApiTag } from 'src/enum';
+import { ApiTag, Permission } from 'src/enum';
 import { Auth, Authenticated } from 'src/middleware/auth.guard';
 import { MapService } from 'src/services/map.service';
 
@@ -18,7 +18,7 @@ export class MapController {
   constructor(private service: MapService) {}
 
   @Get('markers')
-  @Authenticated()
+  @Authenticated({ permission: Permission.MapRead })
   @Endpoint({
     summary: 'Retrieve map markers',
     description: 'Retrieve a list of latitude and longitude coordinates for every asset with location data.',
@@ -28,8 +28,8 @@ export class MapController {
     return this.service.getMapMarkers(auth, options);
   }
 
-  @Authenticated()
   @Get('reverse-geocode')
+  @Authenticated({ permission: Permission.MapSearch })
   @HttpCode(HttpStatus.OK)
   @Endpoint({
     summary: 'Reverse geocode coordinates',

server/src/enum.ts

@@ -160,6 +160,9 @@ export enum Permission {
 
   Maintenance = 'maintenance',
 
+  MapRead = 'map.read',
+  MapSearch = 'map.search',
+
   MemoryCreate = 'memory.create',
   MemoryRead = 'memory.read',
   MemoryUpdate = 'memory.update',

server/src/repositories/asset-edit.repository.ts

@@ -19,7 +19,7 @@ export class AssetEditRepository {
       if (edits.length > 0) {
         return trx
           .insertInto('asset_edit')
-          .values(edits.map((edit) => ({ assetId, ...edit })))
+          .values(edits.map((edit, i) => ({ assetId, ...edit, sequence: i })))
           .returning(['action', 'parameters'])
           .execute() as Promise<AssetEditActionItem[]>;
       }
@@ -36,6 +36,7 @@ export class AssetEditRepository {
       .selectFrom('asset_edit')
       .select(['action', 'parameters'])
       .where('assetId', '=', assetId)
+      .orderBy('sequence', 'asc')
       .execute() as Promise<AssetEditActionItem[]>;
   }
 }

server/src/schema/migrations/1769101562085-AddSequenceToAssetEdits.ts

@@ -0,0 +1,9 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_edit" ADD "sequence" integer NOT NULL DEFAULT 0;`.execute(db);
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await sql`ALTER TABLE "asset_edit" DROP COLUMN "sequence";`.execute(db);
+}

server/src/schema/tables/asset-edit.table.ts

@@ -31,4 +31,7 @@ export class AssetEditTable<T extends AssetEditAction = AssetEditAction> {
 
   @Column({ type: 'jsonb' })
   parameters!: AssetEditActionParameter[T];
+
+  @Column({ type: 'integer', default: 0 })
+  sequence!: number;
 }

server/src/services/tag.service.spec.ts

@@ -206,15 +206,15 @@ describe(TagService.name, () => {
         count: 6,
       });
       expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
-        { assetId: 'asset-1', tags: ['tag-1', 'tag-2'] },
+        { assetId: 'asset-1', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
         { lockedPropertiesBehavior: 'append' },
       );
       expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
-        { assetId: 'asset-2', tags: ['tag-1', 'tag-2'] },
+        { assetId: 'asset-2', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
         { lockedPropertiesBehavior: 'append' },
       );
       expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
-        { assetId: 'asset-3', tags: ['tag-1', 'tag-2'] },
+        { assetId: 'asset-3', lockedProperties: ['tags'], tags: ['tag-1', 'tag-2'] },
         { lockedPropertiesBehavior: 'append' },
       );
       expect(mocks.tag.upsertAssetIds).toHaveBeenCalledWith([
@@ -255,11 +255,11 @@ describe(TagService.name, () => {
       ]);
 
       expect(mocks.asset.upsertExif).not.toHaveBeenCalledWith(
-        { assetId: 'asset-1', tags: ['tag-1'] },
+        { assetId: 'asset-1', lockedProperties: ['tags'], tags: ['tag-1'] },
         { lockedPropertiesBehavior: 'append' },
       );
       expect(mocks.asset.upsertExif).toHaveBeenCalledWith(
-        { assetId: 'asset-2', tags: ['tag-1'] },
+        { assetId: 'asset-2', lockedProperties: ['tags'], tags: ['tag-1'] },
         { lockedPropertiesBehavior: 'append' },
       );
       expect(mocks.tag.getAssetIds).toHaveBeenCalledWith('tag-1', ['asset-1', 'asset-2']);

server/src/services/tag.service.ts

@@ -16,6 +16,7 @@ import { JobName, JobStatus, Permission, QueueName } from 'src/enum';
 import { TagAssetTable } from 'src/schema/tables/tag-asset.table';
 import { BaseService } from 'src/services/base.service';
 import { addAssets, removeAssets } from 'src/utils/asset.util';
+import { updateLockedColumns } from 'src/utils/database';
 import { upsertTags } from 'src/utils/tag';
 
 @Injectable()
@@ -152,7 +153,7 @@ export class TagService extends BaseService {
   private async updateTags(assetId: string) {
     const asset = await this.assetRepository.getById(assetId, { tags: true });
     await this.assetRepository.upsertExif(
-      { assetId, tags: asset?.tags?.map(({ value }) => value) ?? [] },
+      updateLockedColumns({ assetId, tags: asset?.tags?.map(({ value }) => value) ?? [] }),
       { lockedPropertiesBehavior: 'append' },
     );
   }

server/test/medium/specs/services/tag.service.spec.ts

@@ -1,12 +1,15 @@
 import { Kysely } from 'kysely';
 import { JobStatus } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
+import { AssetRepository } from 'src/repositories/asset.repository';
+import { EventRepository } from 'src/repositories/event.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
 import { TagRepository } from 'src/repositories/tag.repository';
 import { DB } from 'src/schema';
 import { TagService } from 'src/services/tag.service';
 import { upsertTags } from 'src/utils/tag';
 import { newMediumService } from 'test/medium.factory';
+import { factory } from 'test/small.factory';
 import { getKyselyDB } from 'test/utils';
 
 let defaultDatabase: Kysely<DB>;
@@ -14,8 +17,8 @@ let defaultDatabase: Kysely<DB>;
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(TagService, {
     database: db || defaultDatabase,
-    real: [TagRepository, AccessRepository],
-    mock: [LoggingRepository],
+    real: [AssetRepository, TagRepository, AccessRepository],
+    mock: [EventRepository, LoggingRepository],
   });
 };
 
@@ -24,6 +27,32 @@ beforeAll(async () => {
 });
 
 describe(TagService.name, () => {
+  describe('addAssets', () => {
+    it('should lock exif column', async () => {
+      const { sut, ctx } = setup();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      const [tag] = await upsertTags(ctx.get(TagRepository), { userId: user.id, tags: ['tag-1'] });
+      const authDto = factory.auth({ user });
+
+      await sut.addAssets(authDto, tag.id, { ids: [asset.id] });
+      await expect(
+        ctx.database
+          .selectFrom('asset_exif')
+          .select(['lockedProperties', 'tags'])
+          .where('assetId', '=', asset.id)
+          .executeTakeFirstOrThrow(),
+      ).resolves.toEqual({
+        lockedProperties: ['tags'],
+        tags: ['tag-1'],
+      });
+      await expect(ctx.get(TagRepository).getByValue(user.id, 'tag-1')).resolves.toEqual(
+        expect.objectContaining({ id: tag.id }),
+      );
+      await expect(ctx.get(TagRepository).getAssetIds(tag.id, [asset.id])).resolves.toContain(asset.id);
+    });
+  });
   describe('deleteEmptyTags', () => {
     it('single tag exists, not connected to any assets, and is deleted', async () => {
       const { sut, ctx } = setup();

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -19,12 +19,13 @@
   import { alwaysLoadOriginalVideo } from '$lib/stores/preferences.store';
   import { SlideshowNavigation, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { user } from '$lib/stores/user.store';
-  import { getSharedLink, handlePromiseError } from '$lib/utils';
+  import { getAssetUrl, getSharedLink, handlePromiseError } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
   import { navigateToAsset } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { InvocationTracker } from '$lib/utils/invocationTracker';
   import { SlideshowHistory } from '$lib/utils/slideshow-history';
+  import { preloadImageUrl } from '$lib/utils/sw-messaging';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     AssetTypeEnum,
@@ -132,7 +133,9 @@
     }
 
     untrack(() => {
-      preloadManager.preload(stack?.assets[1]);
+      if (stack && stack?.assets.length > 1) {
+        preloadImageUrl(getAssetUrl({ asset: stack.assets[1] }));
+      }
     });
   };
 
@@ -428,6 +431,7 @@
   const showOcrButton = $derived(
     $slideshowState === SlideshowState.None &&
       asset.type === AssetTypeEnum.Image &&
+      !(asset.exifInfo?.projectionType === 'EQUIRECTANGULAR') &&
       !isShowEditor &&
       ocrManager.hasOcrData,
   );

web/src/lib/managers/PreloadManager.svelte.ts

@@ -1,9 +1,13 @@
 import { getAssetUrl } from '$lib/utils';
-import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import { cancelImageUrl, preloadImageUrl } from '$lib/utils/sw-messaging';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 
 class PreloadManager {
   preload(asset: AssetResponseDto | undefined) {
+    if (globalThis.isSecureContext) {
+      preloadImageUrl(getAssetUrl({ asset }));
+      return;
+    }
     if (!asset || asset.type !== AssetTypeEnum.Image) {
       return;
     }

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

@@ -23,6 +23,7 @@ import {
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import {
   mdiDeleteRestore,
+  mdiInformationOutline,
   mdiLockReset,
   mdiLockSmart,
   mdiPencilOutline,
@@ -46,6 +47,12 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
 };
 
 export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminResponseDto) => {
+  const Detail: ActionItem = {
+    icon: mdiInformationOutline,
+    title: $t('details'),
+    onAction: () => goto(Route.viewUser(user)),
+  };
+
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
@@ -92,7 +99,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
     onAction: () => handleResetPinCodeUserAdmin(user),
   };
 
-  return { Update, Delete, Restore, ResetPassword, ResetPinCode };
+  return { Detail, Update, Delete, Restore, ResetPassword, ResetPinCode };
 };
 
 export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {

web/src/lib/utils/sw-messaging.ts

@@ -1,24 +1,14 @@
-import { ServiceWorkerMessenger } from './sw-messenger';
-
-const messenger = new ServiceWorkerMessenger();
-
-let isServiceWorkerEnabled = true;
-
-messenger.onAckTimeout(() => {
-  if (!isServiceWorkerEnabled) {
-    return;
-  }
-  console.error('[ServiceWorker] No communication detected. Auto-disabled service worker.');
-  isServiceWorkerEnabled = false;
-});
-
-const isValidSwContext = (url: string | undefined | null): url is string => {
-  return globalThis.isSecureContext && isServiceWorkerEnabled && !!url;
-};
+const broadcast = new BroadcastChannel('immich');
 
 export function cancelImageUrl(url: string | undefined | null) {
-  if (!isValidSwContext(url)) {
+  if (!url) {
     return;
   }
-  void messenger.send('cancel', { url });
+  broadcast.postMessage({ type: 'cancel', url });
+}
+export function preloadImageUrl(url: string | undefined | null) {
+  if (!url) {
+    return;
+  }
+  broadcast.postMessage({ type: 'preload', url });
 }

web/src/lib/utils/sw-messenger.ts

@@ -1,157 +0,0 @@
-/**
- * Low-level protocol for communicating with the service worker via postMessage.
- *
- * Protocol:
- * 1. Main thread sends request: { type: string, requestId: string, ...data }
- * 2. SW sends ack: { type: 'ack', requestId: string }
- * 3. SW sends response (optional): { type: 'response', requestId: string, result?: any, error?: string }
- */
-
-interface PendingRequest {
-  resolveAck: () => void;
-  resolveResponse?: (result: unknown) => void;
-  rejectResponse?: (error: Error) => void;
-  ackTimeout: ReturnType<typeof setTimeout>;
-  ackReceived: boolean;
-}
-
-export class ServiceWorkerMessenger {
-  readonly #pendingRequests = new Map<string, PendingRequest>();
-  readonly #ackTimeoutMs: number;
-  #requestCounter = 0;
-  #onTimeout?: (type: string, data: Record<string, unknown>) => void;
-  #messageHandler?: (event: MessageEvent) => void;
-
-  constructor(ackTimeoutMs = 5000) {
-    this.#ackTimeoutMs = ackTimeoutMs;
-
-    // Listen for messages from the service worker
-    if ('serviceWorker' in navigator) {
-      this.#messageHandler = (event) => {
-        this.#handleMessage(event.data);
-      };
-      navigator.serviceWorker.addEventListener('message', this.#messageHandler);
-    }
-  }
-
-  #handleMessage(data: unknown) {
-    if (typeof data !== 'object' || data === null) {
-      return;
-    }
-
-    const message = data as { requestId?: string; type?: string; error?: string; result?: unknown };
-    const requestId = message.requestId;
-    if (!requestId) {
-      return;
-    }
-
-    const pending = this.#pendingRequests.get(requestId);
-    if (!pending) {
-      return;
-    }
-
-    if (message.type === 'ack') {
-      pending.ackReceived = true;
-      clearTimeout(pending.ackTimeout);
-      pending.resolveAck();
-      return;
-    }
-
-    if (message.type === 'response') {
-      clearTimeout(pending.ackTimeout);
-      this.#pendingRequests.delete(requestId);
-
-      if (message.error) {
-        pending.rejectResponse?.(new Error(message.error));
-        return;
-      }
-
-      pending.resolveResponse?.(message.result);
-    }
-  }
-
-  /**
-   * Set a callback to be invoked when an ack timeout occurs.
-   * This can be used to detect and disable faulty service workers.
-   */
-  onAckTimeout(callback: (type: string, data: Record<string, unknown>) => void): void {
-    this.#onTimeout = callback;
-  }
-
-  /**
-   * Send a message to the service worker.
-   * - send(): waits for ack, resolves when acknowledged
-   * - request(): waits for response, throws on error/timeout
-   */
-  #sendInternal<T>(type: string, data: Record<string, unknown>, waitForResponse: boolean): Promise<T> {
-    const requestId = `${type}-${++this.#requestCounter}-${Date.now()}`;
-
-    const promise = new Promise<T>((resolve, reject) => {
-      const ackTimeout = setTimeout(() => {
-        const pending = this.#pendingRequests.get(requestId);
-        if (pending && !pending.ackReceived) {
-          this.#pendingRequests.delete(requestId);
-          console.warn(`[ServiceWorker] ${type} request not acknowledged:`, data);
-          this.#onTimeout?.(type, data);
-          // Only reject if we're waiting for a response
-          if (waitForResponse) {
-            reject(new Error(`Service worker did not acknowledge ${type} request`));
-          } else {
-            resolve(undefined as T);
-          }
-        }
-      }, this.#ackTimeoutMs);
-
-      this.#pendingRequests.set(requestId, {
-        resolveAck: waitForResponse ? () => {} : () => resolve(undefined as T),
-        resolveResponse: waitForResponse ? (result: unknown) => resolve(result as T) : undefined,
-        rejectResponse: waitForResponse ? reject : undefined,
-        ackTimeout,
-        ackReceived: false,
-      });
-
-      // Send message to the active service worker
-      // Feature detection is done in constructor and at call sites (sw-messaging.ts:isValidSwContext)
-      // eslint-disable-next-line compat/compat
-      navigator.serviceWorker.controller?.postMessage({
-        type,
-        requestId,
-        ...data,
-      });
-    });
-
-    return promise;
-  }
-
-  /**
-   * Send a one-way message to the service worker.
-   * Returns a promise that resolves after the service worker acknowledges receipt.
-   * Resolves even if no ack is received within the timeout period.
-   */
-  send(type: string, data: Record<string, unknown>): Promise<void> {
-    return this.#sendInternal<void>(type, data, false);
-  }
-
-  /**
-   * Send a request and wait for ack + response.
-   * Returns a promise that resolves with the response data or rejects on error/timeout.
-   */
-  request<T = void>(type: string, data: Record<string, unknown>): Promise<T> {
-    return this.#sendInternal<T>(type, data, true);
-  }
-
-  /**
-   * Clean up pending requests and remove event listener
-   */
-  close(): void {
-    for (const pending of this.#pendingRequests.values()) {
-      clearTimeout(pending.ackTimeout);
-    }
-    this.#pendingRequests.clear();
-
-    if (this.#messageHandler && 'serviceWorker' in navigator) {
-      navigator.serviceWorker.removeEventListener('message', this.#messageHandler);
-      this.#messageHandler = undefined;
-    }
-  }
-}

web/src/routes/admin/users/(list)/+layout.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   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 { Route } from '$lib/route';
+  import { getUserAdminActions, getUserAdminsActions } 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,
     CommandPaletteDefaultProvider,
     Container,
+    ContextMenuButton,
     Icon,
+    Link,
+    MenuItemType,
     Table,
     TableBody,
     TableCell,
@@ -46,11 +49,16 @@
 
   const { Create } = $derived(getUserAdminsActions($t));
 
+  const getActionsForUser = (user: UserAdminResponseDto) => {
+    const { Detail, Update, Delete, ResetPassword, ResetPinCode } = getUserAdminActions($t, user);
+    return [Detail, Update, ResetPassword, ResetPinCode, MenuItemType.Divider, Delete];
+  };
+
   const classes = {
-    column1: 'w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12',
-    column2: 'hidden sm:block w-3/12',
-    column3: 'hidden xl:block w-3/12 2xl:w-2/12',
-    column4: 'w-4/12 lg:w-3/12 xl:w-2/12',
+    column1: 'w-8/12 md:w-5/12 lg:w-4/12',
+    column2: 'hidden md:block md:w-5/12 lg:w-4/12',
+    column3: 'hidden lg:block lg:w-2/12',
+    column4: 'w-4/12 md:w-2/12 flex justify-end',
   };
 </script>
 
@@ -68,16 +76,18 @@
   <Container center size="large">
     <Table class="mt-4" striped spacing="small" size="small">
       <TableHeader>
-        <TableHeading class={classes.column1}>{$t('email')}</TableHeading>
-        <TableHeading class={classes.column2}>{$t('name')}</TableHeading>
+        <TableHeading class={classes.column1}>{$t('name')}</TableHeading>
+        <TableHeading class={classes.column2}>{$t('email')}</TableHeading>
         <TableHeading class={classes.column3}>{$t('has_quota')}</TableHeading>
       </TableHeader>
 
       <TableBody>
         {#each users as user (user.id)}
           <TableRow color={user.deletedAt ? 'danger' : undefined}>
-            <TableCell class={classes.column1}>{user.email}</TableCell>
-            <TableCell class={classes.column2}>{user.name}</TableCell>
+            <TableCell class={classes.column1}>
+              <Link href={Route.viewUser(user)}>{user.name}</Link>
+            </TableCell>
+            <TableCell class={classes.column2}>{user.email}</TableCell>
             <TableCell class={classes.column3}>
               <div class="container mx-auto flex flex-wrap justify-center">
                 {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
@@ -88,7 +98,7 @@
               </div>
             </TableCell>
             <TableCell class={classes.column4}>
-              <Button onclick={() => handleNavigateUserAdmin(user)}>{$t('view')}</Button>
+              <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForUser(user)} />
             </TableCell>
           </TableRow>
         {/each}

web/src/routes/admin/users/[id]/+layout.svelte

@@ -198,8 +198,8 @@
               })}
             >
               <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
-              <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
+              <div class="mt-4 h-1.75 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                <div class="h-1.75 rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
               </div>
             </div>
           {/if}

web/src/service-worker/broadcast-channel.ts

@@ -0,0 +1,25 @@
+import { handleCancel, handlePreload } from './request';
+
+export const installBroadcastChannelListener = () => {
+  const broadcast = new BroadcastChannel('immich');
+  // eslint-disable-next-line  unicorn/prefer-add-event-listener
+  broadcast.onmessage = (event) => {
+    if (!event.data) {
+      return;
+    }
+
+    const url = new URL(event.data.url, event.origin);
+
+    switch (event.data.type) {
+      case 'preload': {
+        handlePreload(url);
+        break;
+      }
+
+      case 'cancel': {
+        handleCancel(url);
+        break;
+      }
+    }
+  };
+};

web/src/service-worker/cache.ts

@@ -0,0 +1,42 @@
+import { version } from '$service-worker';
+
+const CACHE = `cache-${version}`;
+
+let _cache: Cache | undefined;
+const getCache = async () => {
+  if (_cache) {
+    return _cache;
+  }
+  _cache = await caches.open(CACHE);
+  return _cache;
+};
+
+export const get = async (key: string) => {
+  const cache = await getCache();
+  if (!cache) {
+    return;
+  }
+
+  return cache.match(key);
+};
+
+export const put = async (key: string, response: Response) => {
+  if (response.status !== 200) {
+    return;
+  }
+
+  const cache = await getCache();
+  if (!cache) {
+    return;
+  }
+
+  cache.put(key, response.clone());
+};
+
+export const prune = async () => {
+  for (const key of await caches.keys()) {
+    if (key !== CACHE) {
+      await caches.delete(key);
+    }
+  }
+};

web/src/service-worker/index.ts

@@ -2,9 +2,9 @@
 /// <reference no-default-lib="true"/>
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
-
-import { installMessageListener } from './messaging';
-import { handleFetch as handleAssetFetch } from './request';
+import { installBroadcastChannelListener } from './broadcast-channel';
+import { prune } from './cache';
+import { handleRequest } from './request';
 
 const ASSET_REQUEST_REGEX = /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/;
 
@@ -12,10 +12,12 @@ const sw = globalThis as unknown as ServiceWorkerGlobalScope;
 
 const handleActivate = (event: ExtendableEvent) => {
   event.waitUntil(sw.clients.claim());
+  event.waitUntil(prune());
 };
 
 const handleInstall = (event: ExtendableEvent) => {
   event.waitUntil(sw.skipWaiting());
+  // do not preload app resources
 };
 
 const handleFetch = (event: FetchEvent): void => {
@@ -26,7 +28,7 @@ const handleFetch = (event: FetchEvent): void => {
   // Cache requests for thumbnails
   const url = new URL(event.request.url);
   if (url.origin === self.location.origin && ASSET_REQUEST_REGEX.test(url.pathname)) {
-    event.respondWith(handleAssetFetch(event.request));
+    event.respondWith(handleRequest(event.request));
     return;
   }
 };
@@ -34,4 +36,4 @@ const handleFetch = (event: FetchEvent): void => {
 sw.addEventListener('install', handleInstall, { passive: true });
 sw.addEventListener('activate', handleActivate, { passive: true });
 sw.addEventListener('fetch', handleFetch, { passive: true });
-installMessageListener();
+installBroadcastChannelListener();

web/src/service-worker/messaging.ts

@@ -1,53 +0,0 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
-
-import { handleCancel } from './request';
-
-const sw = globalThis as unknown as ServiceWorkerGlobalScope;
-
-/**
- * Send acknowledgment for a request
- */
-function sendAck(client: Client, requestId: string) {
-  client.postMessage({
-    type: 'ack',
-    requestId,
-  });
-}
-
-/**
- * Handle 'cancel' request: cancel a pending request
- */
-const handleCancelRequest = (client: Client, url: URL, requestId: string) => {
-  sendAck(client, requestId);
-  handleCancel(url);
-};
-
-export const installMessageListener = () => {
-  sw.addEventListener('message', (event) => {
-    if (!event.data?.requestId || !event.data?.type) {
-      return;
-    }
-
-    const requestId = event.data.requestId;
-
-    switch (event.data.type) {
-      case 'cancel': {
-        const url = event.data.url ? new URL(event.data.url, self.location.origin) : undefined;
-        if (!url) {
-          return;
-        }
-
-        const client = event.source;
-        if (!client) {
-          return;
-        }
-
-        handleCancelRequest(client, url, requestId);
-        break;
-      }
-    }
-  });
-};

web/src/service-worker/request.ts

@@ -1,68 +1,73 @@
-/// <reference types="@sveltejs/kit" />
-/// <reference no-default-lib="true"/>
-/// <reference lib="esnext" />
-/// <reference lib="webworker" />
+import { get, put } from './cache';
 
-type PendingRequest = {
-  controller: AbortController;
-  promise: Promise<Response>;
-  cleanupTimeout?: ReturnType<typeof setTimeout>;
+const pendingRequests = new Map<string, AbortController>();
+
+const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
+const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
+
+const assertResponse = (response: Response) => {
+  if (!(response instanceof Response)) {
+    throw new TypeError('Fetch did not return a valid Response object');
+  }
 };
 
-const pendingRequests = new Map<string, PendingRequest>();
-
-const getRequestKey = (request: URL | Request): string => (request instanceof URL ? request.href : request.url);
-
-const CANCELATION_MESSAGE = 'Request canceled by application';
-const CLEANUP_TIMEOUT_MS = 5 * 60 * 1000; // 5 minutes
-
-export const handleFetch = (request: URL | Request): Promise<Response> => {
-  const requestKey = getRequestKey(request);
-  const existing = pendingRequests.get(requestKey);
-
-  if (existing) {
-    // Clone the response since response bodies can only be read once
-    // Each caller gets an independent clone they can consume
-    return existing.promise.then((response) => response.clone());
+const getCacheKey = (request: URL | Request) => {
+  if (isURL(request)) {
+    return request.toString();
   }
 
-  const pendingRequest: PendingRequest = {
-    controller: new AbortController(),
-    promise: undefined as unknown as Promise<Response>,
-  };
-  pendingRequests.set(requestKey, pendingRequest);
+  if (isRequest(request)) {
+    return request.url;
+  }
 
-  // NOTE: fetch returns after headers received, not the body
-  pendingRequest.promise = fetch(request, { signal: pendingRequest.controller.signal })
-    .catch((error: unknown) => {
-      const standardError = error instanceof Error ? error : new Error(String(error));
-      if (standardError.name === 'AbortError' || standardError.message === CANCELATION_MESSAGE) {
-        // dummy response avoids network errors in the console for these requests
-        return new Response(undefined, { status: 204 });
-      }
-      throw standardError;
-    })
-    .finally(() => {
-      // Schedule cleanup after timeout to allow response body streaming to complete
-      const cleanupTimeout = setTimeout(() => {
-        pendingRequests.delete(requestKey);
-      }, CLEANUP_TIMEOUT_MS);
-      pendingRequest.cleanupTimeout = cleanupTimeout;
-    });
+  throw new Error(`Invalid request: ${request}`);
+};
 
-  // Clone for the first caller to keep the original response unconsumed for future callers
-  return pendingRequest.promise.then((response) => response.clone());
+export const handlePreload = async (request: URL | Request) => {
+  try {
+    return await handleRequest(request);
+  } catch (error) {
+    console.error(`Preload failed: ${error}`);
+  }
+};
+
+export const handleRequest = async (request: URL | Request) => {
+  const cacheKey = getCacheKey(request);
+  const cachedResponse = await get(cacheKey);
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  try {
+    const cancelToken = new AbortController();
+    pendingRequests.set(cacheKey, cancelToken);
+    const response = await fetch(request, { signal: cancelToken.signal });
+
+    assertResponse(response);
+    put(cacheKey, response);
+
+    return response;
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      // dummy response avoids network errors in the console for these requests
+      return new Response(undefined, { status: 204 });
+    }
+
+    console.log('Not an abort error', error);
+
+    throw error;
+  } finally {
+    pendingRequests.delete(cacheKey);
+  }
 };
 
 export const handleCancel = (url: URL) => {
-  const requestKey = getRequestKey(url);
-
-  const pendingRequest = pendingRequests.get(requestKey);
-  if (pendingRequest) {
-    pendingRequest.controller.abort(CANCELATION_MESSAGE);
-    if (pendingRequest.cleanupTimeout) {
-      clearTimeout(pendingRequest.cleanupTimeout);
-    }
-    pendingRequests.delete(requestKey);
+  const cacheKey = getCacheKey(url);
+  const pendingRequest = pendingRequests.get(cacheKey);
+  if (!pendingRequest) {
+    return;
   }
+
+  pendingRequest.abort();
+  pendingRequests.delete(cacheKey);
 };