refactor: memory manager

mobile(fix): add keys to people list

.github/workflows/auto-close.yml

@@ -0,0 +1,143 @@
+name: Auto-close PRs
+
+on:
+  pull_request_target: # zizmor: ignore[dangerous-triggers]
+    types: [opened, edited, labeled]
+
+permissions: {}
+
+jobs:
+  parse_template:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.action != 'labeled' && github.event.pull_request.head.repo.fork == true }}
+    permissions:
+      contents: read
+    outputs:
+      uses_template: ${{ steps.check.outputs.uses_template }}
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          sparse-checkout: .github/pull_request_template.md
+          sparse-checkout-cone-mode: false
+          persist-credentials: false
+
+      - name: Check required sections
+        id: check
+        env:
+          BODY: ${{ github.event.pull_request.body }}
+        run: |
+          OK=true
+          while IFS= read -r header; do
+            printf '%s\n' "$BODY" | grep -qF "$header" || OK=false
+          done < <(sed '/<!--/,/-->/d' .github/pull_request_template.md | grep "^## ")
+          echo "uses_template=$OK" >> "$GITHUB_OUTPUT"
+
+  close_template:
+    runs-on: ubuntu-latest
+    needs: parse_template
+    if: ${{ needs.parse_template.outputs.uses_template == 'false' && github.event.pull_request.state != 'closed' }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Comment and close
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f body="This PR has been automatically closed as the description doesn't follow our template. After you edit it to match the template, the PR will automatically be reopened." \
+            -f query='
+              mutation CommentAndClosePR($prId: ID!, $body: String!) {
+                addComment(input: {
+                  subjectId: $prId,
+                  body: $body
+                }) {
+                  __typename
+                }
+                closePullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
+
+      - name: Add label
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: gh pr edit "$PR_NUMBER" --add-label "auto-closed:template"
+
+  close_llm:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.action == 'labeled' && github.event.label.name == 'auto-closed:llm' }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Comment and close
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f body="Thank you for your interest in contributing to Immich! Unfortunately this PR looks like it was generated using an LLM. As noted in our [CONTRIBUTING.md](https://github.com/immich-app/immich/blob/main/CONTRIBUTING.md#use-of-generative-ai), we request that you don't use LLMs to generate PRs as those are not a good use of maintainer time." \
+            -f query='
+              mutation CommentAndClosePR($prId: ID!, $body: String!) {
+                addComment(input: {
+                  subjectId: $prId,
+                  body: $body
+                }) {
+                  __typename
+                }
+                closePullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'
+
+  reopen:
+    runs-on: ubuntu-latest
+    needs: parse_template
+    if: >-
+      ${{
+        needs.parse_template.outputs.uses_template == 'true'
+        && github.event.pull_request.state == 'closed'
+        && contains(github.event.pull_request.labels.*.name, 'auto-closed:template')
+      }}
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Remove template label
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: gh pr edit "$PR_NUMBER" --remove-label "auto-closed:template" || true
+
+      - name: Check for remaining auto-closed labels
+        id: check_labels
+        env:
+          GH_TOKEN: ${{ github.token }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+        run: |
+          REMAINING=$(gh pr view "$PR_NUMBER" --json labels \
+            --jq '[.labels[].name | select(startswith("auto-closed:"))] | length')
+          echo "remaining=$REMAINING" >> "$GITHUB_OUTPUT"
+
+      - name: Reopen PR
+        if: ${{ steps.check_labels.outputs.remaining == '0' }}
+        env:
+          GH_TOKEN: ${{ github.token }}
+          NODE_ID: ${{ github.event.pull_request.node_id }}
+        run: |
+          gh api graphql \
+            -f prId="$NODE_ID" \
+            -f query='
+              mutation ReopenPR($prId: ID!) {
+                reopenPullRequest(input: {
+                  pullRequestId: $prId
+                }) {
+                  __typename
+                }
+              }'

.github/workflows/check-pr-template.yml

@@ -1,97 +0,0 @@
-name: Check PR Template
-
-on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers]
-    types: [opened, edited]
-
-permissions: {}
-
-env:
-  LABEL_ID: 'LA_kwDOGyI-8M8AAAACcAeOfg' # auto-closed:template
-
-jobs:
-  parse:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.pull_request.head.repo.fork == true }}
-    permissions:
-      contents: read
-    outputs:
-      uses_template: ${{ steps.check.outputs.uses_template }}
-    steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          sparse-checkout: .github/pull_request_template.md
-          sparse-checkout-cone-mode: false
-          persist-credentials: false
-
-      - name: Check required sections
-        id: check
-        env:
-          BODY: ${{ github.event.pull_request.body }}
-        run: |
-          OK=true
-          while IFS= read -r header; do
-            printf '%s\n' "$BODY" | grep -qF "$header" || OK=false
-          done < <(sed '/<!--/,/-->/d' .github/pull_request_template.md | grep "^## ")
-          echo "uses_template=$OK" >> "$GITHUB_OUTPUT"
-
-  act:
-    runs-on: ubuntu-latest
-    needs: parse
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Close PR
-        if: ${{ needs.parse.outputs.uses_template == 'false' && github.event.pull_request.state != 'closed' }}
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f labelId="$LABEL_ID" \
-            -f body="This PR has been automatically closed as the description doesn't follow our template. After you edit it to match the template, the PR will automatically be reopened." \
-            -f query='
-              mutation CommentAndClosePR($prId: ID!, $body: String!, $labelId: ID!) {
-                addComment(input: {
-                  subjectId: $prId,
-                  body: $body
-                }) {
-                  __typename
-                }
-                closePullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-                addLabelsToLabelable(input: {
-                  labelableId: $prId,
-                  labelIds: [$labelId]
-                }) {
-                  __typename
-                }
-              }'
-
-      - name: Reopen PR (sections now present, PR was auto-closed)
-        if: ${{ needs.parse.outputs.uses_template == 'true' && github.event.pull_request.state == 'closed' && contains(github.event.pull_request.labels.*.node_id, env.LABEL_ID) }}
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f labelId="$LABEL_ID" \
-            -f query='
-              mutation ReopenPR($prId: ID!, $labelId: ID!) {
-                reopenPullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-                removeLabelsFromLabelable(input: {
-                  labelableId: $prId,
-                  labelIds: [$labelId]
-                }) {
-                  __typename
-                }
-              }'

.github/workflows/close-llm-pr.yml

@@ -1,38 +0,0 @@
-name: Close LLM-generated PRs
-
-on:
-  pull_request_target:
-    types: [labeled]
-
-permissions: {}
-
-jobs:
-  comment_and_close:
-    runs-on: ubuntu-latest
-    if: ${{ github.event.label.name == 'llm-generated' }}
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Comment and close
-        env:
-          GH_TOKEN: ${{ github.token }}
-          NODE_ID: ${{ github.event.pull_request.node_id }}
-        run: |
-          gh api graphql \
-            -f prId="$NODE_ID" \
-            -f body="Thank you for your interest in contributing to Immich! Unfortunately this PR looks like it was generated using an LLM. As noted in our [CONTRIBUTING.md](https://github.com/immich-app/immich/blob/main/CONTRIBUTING.md#use-of-generative-ai), we request that you don't use LLMs to generate PRs as those are not a good use of maintainer time." \
-            -f query='
-              mutation CommentAndClosePR($prId: ID!, $body: String!) {
-                addComment(input: {
-                  subjectId: $prId,
-                  body: $body
-                }) {
-                  __typename
-                }
-
-                closePullRequest(input: {
-                  pullRequestId: $prId
-                }) {
-                  __typename
-                }
-              }'

cli/package.json

@@ -35,8 +35,7 @@
     "prettier-plugin-organize-imports": "^4.0.0",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.28.0",
-    "vite": "^7.0.0",
-    "vite-tsconfig-paths": "^6.0.0",
+    "vite": "^8.0.0",
     "vitest": "^4.0.0",
     "vitest-fetch-mock": "^0.4.0",
     "yaml": "^2.3.1"

cli/vite.config.ts

@@ -1,10 +1,12 @@
 import { defineConfig, UserConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  resolve: { alias: { src: '/src' } },
+  resolve: {
+    alias: { src: '/src' },
+    tsconfigPaths: true,
+  },
   build: {
-    rollupOptions: {
+    rolldownOptions: {
       input: 'src/index.ts',
       output: {
         dir: 'dist',
@@ -16,7 +18,6 @@ export default defineConfig({
     // bundle everything except for Node built-ins
     noExternal: /^(?!node:).*$/,
   },
-  plugins: [tsconfigPaths()],
   test: {
     name: 'cli:unit',
     globals: true,

e2e/src/specs/web/duplicates.e2e-spec.ts

@@ -0,0 +1,51 @@
+import { AssetMediaResponseDto, LoginResponseDto, updateAssets } from '@immich/sdk';
+import { expect, test } from '@playwright/test';
+import crypto from 'node:crypto';
+import { asBearerAuth, utils } from 'src/utils';
+
+test.describe('Duplicates Utility', () => {
+  let admin: LoginResponseDto;
+  let firstAsset: AssetMediaResponseDto;
+  let secondAsset: AssetMediaResponseDto;
+
+  test.beforeAll(async () => {
+    utils.initSdk();
+    await utils.resetDatabase();
+    admin = await utils.adminSetup();
+  });
+
+  test.beforeEach(async ({ context }) => {
+    [firstAsset, secondAsset] = await Promise.all([
+      utils.createAsset(admin.accessToken, { deviceAssetId: 'duplicate-a' }),
+      utils.createAsset(admin.accessToken, { deviceAssetId: 'duplicate-b' }),
+    ]);
+
+    await updateAssets(
+      {
+        assetBulkUpdateDto: {
+          ids: [firstAsset.id, secondAsset.id],
+          duplicateId: crypto.randomUUID(),
+        },
+      },
+      { headers: asBearerAuth(admin.accessToken) },
+    );
+
+    await utils.setAuthCookies(context, admin.accessToken);
+  });
+
+  test('navigates with arrow keys between duplicate preview assets', async ({ page }) => {
+    await page.goto('/utilities/duplicates');
+    await page.getByRole('button', { name: 'View' }).first().click();
+    await page.waitForSelector('#immich-asset-viewer');
+
+    const getViewedAssetId = () => new URL(page.url()).pathname.split('/').at(-1) ?? '';
+    const initialAssetId = getViewedAssetId();
+    expect([firstAsset.id, secondAsset.id]).toContain(initialAssetId);
+
+    await page.keyboard.press('ArrowRight');
+    await expect.poll(getViewedAssetId).not.toBe(initialAssetId);
+
+    await page.keyboard.press('ArrowLeft');
+    await expect.poll(getViewedAssetId).toBe(initialAssetId);
+  });
+});

mobile/android/app/src/main/kotlin/app/alextran/immich/core/HttpClientManager.kt

@@ -23,10 +23,18 @@ import okhttp3.HttpUrl
 import okhttp3.HttpUrl.Companion.toHttpUrlOrNull
 import okhttp3.OkHttpClient
 import org.chromium.net.CronetEngine
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.json.Json
 import java.io.ByteArrayInputStream
 import java.io.File
+import java.io.IOException
+import java.nio.file.FileVisitResult
+import java.nio.file.Files
+import java.nio.file.Path
+import java.nio.file.SimpleFileVisitor
+import java.nio.file.attribute.BasicFileAttributes
 import java.net.Authenticator
 import java.net.CookieHandler
 import java.net.PasswordAuthentication
@@ -277,10 +285,13 @@ object HttpClientManager {
     return result
   }
 
-  fun rebuildCronetEngine(): CronetEngine {
-    val old = cronetEngine!!
-    cronetEngine = buildCronetEngine()
-    return old
+  suspend fun rebuildCronetEngine(): Result<Long> {
+    return runCatching {
+      cronetEngine?.shutdown()
+      val deletionResult = deleteFolderAndGetSize(cronetStoragePath.toPath())
+      cronetEngine = buildCronetEngine()
+      deletionResult
+    }
   }
 
   val cronetStoragePath: File get() = cronetStorageDir
@@ -301,7 +312,7 @@ object HttpClientManager {
     }
   }
 
-  private fun buildCronetEngine(): CronetEngine {
+  fun buildCronetEngine(): CronetEngine {
     return CronetEngine.Builder(appContext)
       .enableHttp2(true)
       .enableQuic(true)
@@ -312,6 +323,27 @@ object HttpClientManager {
       .build()
   }
 
+  private suspend fun deleteFolderAndGetSize(root: Path): Long = withContext(Dispatchers.IO) {
+    var totalSize = 0L
+
+    Files.walkFileTree(root, object : SimpleFileVisitor<Path>() {
+      override fun visitFile(file: Path, attrs: BasicFileAttributes): FileVisitResult {
+        totalSize += attrs.size()
+        Files.delete(file)
+        return FileVisitResult.CONTINUE
+      }
+
+      override fun postVisitDirectory(dir: Path, exc: IOException?): FileVisitResult {
+        if (dir != root) {
+          Files.delete(dir)
+        }
+        return FileVisitResult.CONTINUE
+      }
+    })
+
+    totalSize
+  }
+
   private fun build(cacheDir: File): OkHttpClient {
     val connectionPool = ConnectionPool(
       maxIdleConnections = KEEP_ALIVE_CONNECTIONS,

mobile/android/app/src/main/kotlin/app/alextran/immich/images/RemoteImagesImpl.kt

@@ -21,11 +21,6 @@ import java.io.EOFException
 import java.io.File
 import java.io.IOException
 import java.nio.ByteBuffer
-import java.nio.file.FileVisitResult
-import java.nio.file.Files
-import java.nio.file.Path
-import java.nio.file.SimpleFileVisitor
-import java.nio.file.attribute.BasicFileAttributes
 import java.util.concurrent.ConcurrentHashMap
 
 private class RemoteRequest(val cancellationSignal: CancellationSignal)
@@ -205,18 +200,15 @@ private class CronetImageFetcher : ImageFetcher {
 
   private fun onDrained() {
     val onCacheCleared = synchronized(stateLock) {
-      val onCacheCleared = onCacheCleared
+      val onCacheCleared = this.onCacheCleared
       this.onCacheCleared = null
       onCacheCleared
-    }
-    if (onCacheCleared != null) {
-      val oldEngine = HttpClientManager.rebuildCronetEngine()
-      oldEngine.shutdown()
-      CoroutineScope(Dispatchers.IO).launch {
-        val result = runCatching { deleteFolderAndGetSize(HttpClientManager.cronetStoragePath.toPath()) }
-        synchronized(stateLock) { draining = false }
-        onCacheCleared(result)
-      }
+    } ?: return
+
+    CoroutineScope(Dispatchers.IO).launch {
+      val result = HttpClientManager.rebuildCronetEngine()
+      synchronized(stateLock) { draining = false }
+      onCacheCleared(result)
     }
   }
 
@@ -306,26 +298,6 @@ private class CronetImageFetcher : ImageFetcher {
     }
   }
 
-  suspend fun deleteFolderAndGetSize(root: Path): Long = withContext(Dispatchers.IO) {
-    var totalSize = 0L
-
-    Files.walkFileTree(root, object : SimpleFileVisitor<Path>() {
-      override fun visitFile(file: Path, attrs: BasicFileAttributes): FileVisitResult {
-        totalSize += attrs.size()
-        Files.delete(file)
-        return FileVisitResult.CONTINUE
-      }
-
-      override fun postVisitDirectory(dir: Path, exc: IOException?): FileVisitResult {
-        if (dir != root) {
-          Files.delete(dir)
-        }
-        return FileVisitResult.CONTINUE
-      }
-    })
-
-    totalSize
-  }
 }
 
 private class OkHttpImageFetcher private constructor(

mobile/lib/constants/locales.dart

@@ -7,7 +7,7 @@ const Map<String, Locale> locales = {
   'Arabic (ar)': Locale('ar'),
   'Bulgarian (bg)': Locale('bg'),
   'Catalan (ca)': Locale('ca'),
-  'Chinese Simplified (zh_CN)': Locale.fromSubtags(languageCode: 'zh', scriptCode: 'SIMPLIFIED'),
+  'Chinese Simplified (zh_CN)': Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
   'Chinese Traditional (zh_TW)': Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'),
   'Croatian (hr)': Locale('hr'),
   'Czech (cs)': Locale('cs'),

mobile/lib/presentation/pages/drift_people_collection.page.dart

@@ -79,6 +79,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                     final person = people[index];
 
                     return Column(
+                      key: ValueKey(person.id),
                       children: [
                         GestureDetector(
                           onTap: () {
@@ -88,6 +89,7 @@ class _DriftPeopleCollectionPageState extends ConsumerState<DriftPeopleCollectio
                             shape: const CircleBorder(side: BorderSide.none),
                             elevation: 3,
                             child: CircleAvatar(
+                              key: ValueKey('avatar-${person.id}'),
                               maxRadius: isTablet ? 100 / 2 : 96 / 2,
                               backgroundImage: RemoteImageProvider(url: getFaceThumbnailUrl(person.id)),
                             ),

mobile/lib/presentation/pages/search/drift_search.page.dart

@@ -69,6 +69,7 @@ class DriftSearchPage extends HookConsumerWidget {
     );
 
     final previousFilter = useState<SearchFilter?>(null);
+    final hasRequestedSearch = useState<bool>(false);
     final dateInputFilter = useState<DateFilterInputModel?>(null);
 
     final peopleCurrentFilterWidget = useState<Widget?>(null);
@@ -91,9 +92,11 @@ class DriftSearchPage extends HookConsumerWidget {
 
       if (filter.isEmpty) {
         previousFilter.value = null;
+        hasRequestedSearch.value = false;
         return;
       }
 
+      hasRequestedSearch.value = true;
       unawaited(ref.read(paginatedSearchProvider.notifier).search(filter));
       previousFilter.value = filter;
     }
@@ -107,6 +110,8 @@ class DriftSearchPage extends HookConsumerWidget {
     searchPreFilter() {
       if (preFilter != null) {
         Future.delayed(Duration.zero, () {
+          filter.value = preFilter;
+          textSearchController.clear();
           searchFilter(preFilter);
 
           if (preFilter.location.city != null) {
@@ -719,7 +724,7 @@ class DriftSearchPage extends HookConsumerWidget {
               ),
             ),
           ),
-          if (filter.value.isEmpty)
+          if (!hasRequestedSearch.value)
             const _SearchSuggestions()
           else
             _SearchResultGrid(onScrollEnd: loadMoreSearchResults),

mobile/lib/presentation/widgets/action_buttons/similar_photos_action_button.widget.dart

@@ -24,20 +24,22 @@ class SimilarPhotosActionButton extends ConsumerWidget {
     }
 
     ref.invalidate(assetViewerProvider);
-    ref
-        .read(searchPreFilterProvider.notifier)
-        .setFilter(
-          SearchFilter(
-            assetId: assetId,
-            people: {},
-            location: SearchLocationFilter(),
-            camera: SearchCameraFilter(),
-            date: SearchDateFilter(),
-            display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
-            rating: SearchRatingFilter(),
-            mediaType: AssetType.image,
-          ),
-        );
+    ref.invalidate(paginatedSearchProvider);
+
+    ref.read(searchPreFilterProvider.notifier)
+      ..clear()
+      ..setFilter(
+        SearchFilter(
+          assetId: assetId,
+          people: {},
+          location: SearchLocationFilter(),
+          camera: SearchCameraFilter(),
+          date: SearchDateFilter(),
+          display: SearchDisplayFilters(isNotInAlbum: false, isArchive: false, isFavorite: false),
+          rating: SearchRatingFilter(),
+          mediaType: AssetType.image,
+        ),
+      );
 
     unawaited(context.navigateTo(const DriftSearchRoute()));
   }

mobile/lib/presentation/widgets/asset_viewer/rating_bar.widget.dart

@@ -39,6 +39,16 @@ class _RatingBarState extends State<RatingBar> {
     _currentRating = widget.initialRating;
   }
 
+  @override
+  void didUpdateWidget(covariant RatingBar oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialRating != widget.initialRating && _currentRating != widget.initialRating) {
+      setState(() {
+        _currentRating = widget.initialRating;
+      });
+    }
+  }
+
   void _updateRating(Offset localPosition, bool isRTL, {bool isTap = false}) {
     final totalWidth = widget.itemCount * widget.itemSize + (widget.itemCount - 1) * widget.starPadding;
     double dx = localPosition.dx;

mobile/lib/utils/cache/custom_image_cache.dart

@@ -20,7 +20,7 @@ final class CustomImageCache implements ImageCache {
   set maximumSize(int value) => _small.maximumSize = value;
 
   @override
-  set maximumSizeBytes(int value) => _small.maximumSize = value;
+  set maximumSizeBytes(int value) => _small.maximumSizeBytes = value;
 
   @override
   void clear() {

mobile/lib/widgets/search/search_filter/common/dropdown.dart

@@ -16,9 +16,15 @@ class SearchDropdown<T> extends StatelessWidget {
   final Widget? label;
   final Widget? leadingIcon;
 
+  static const WidgetStatePropertyAll<EdgeInsetsGeometry> _optionPadding = WidgetStatePropertyAll<EdgeInsetsGeometry>(
+    EdgeInsetsDirectional.fromSTEB(16, 0, 16, 0),
+  );
+
   @override
   Widget build(BuildContext context) {
-    final menuStyle = const MenuStyle(
+    final mediaQuery = MediaQuery.of(context);
+    final maxMenuHeight = mediaQuery.size.height * 0.5 - mediaQuery.viewPadding.bottom;
+    const menuStyle = MenuStyle(
       shape: WidgetStatePropertyAll<OutlinedBorder>(
         RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(15))),
       ),
@@ -26,11 +32,26 @@ class SearchDropdown<T> extends StatelessWidget {
 
     return LayoutBuilder(
       builder: (context, constraints) {
+        final styledEntries = dropdownMenuEntries
+            .map(
+              (entry) => DropdownMenuEntry<T>(
+                value: entry.value,
+                label: entry.label,
+                labelWidget: entry.labelWidget,
+                enabled: entry.enabled,
+                leadingIcon: entry.leadingIcon,
+                trailingIcon: entry.trailingIcon,
+                style: (entry.style ?? const ButtonStyle()).copyWith(padding: _optionPadding),
+              ),
+            )
+            .toList(growable: false);
+
         return DropdownMenu(
           controller: controller,
           leadingIcon: leadingIcon,
           width: constraints.maxWidth,
-          dropdownMenuEntries: dropdownMenuEntries,
+          menuHeight: maxMenuHeight,
+          dropdownMenuEntries: styledEntries,
           label: label,
           menuStyle: menuStyle,
           trailingIcon: const Icon(Icons.arrow_drop_down_rounded),

server/package.json

@@ -24,7 +24,7 @@
     "typeorm": "typeorm",
     "migrations:debug": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations generate --debug",
     "migrations:generate": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations generate",
-    "migrations:create": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations generate",
+    "migrations:create": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations create",
     "migrations:run": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations run",
     "migrations:revert": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} migrations revert",
     "schema:drop": "sql-tools -u ${DB_URL:-postgres://postgres:postgres@localhost:5432/immich} query 'DROP schema public cascade; CREATE schema public;'",

server/src/database.ts

@@ -169,6 +169,7 @@ export type AuthSharedLink = {
   id: string;
   expiresAt: Date | null;
   userId: string;
+  albumId: string | null;
   showExif: boolean;
   allowUpload: boolean;
   allowDownload: boolean;
@@ -357,15 +358,6 @@ export const columns = {
   authUser: ['user.id', 'user.name', 'user.email', 'user.isAdmin', 'user.quotaUsageInBytes', 'user.quotaSizeInBytes'],
   authApiKey: ['api_key.id', 'api_key.permissions'],
   authSession: ['session.id', 'session.updatedAt', 'session.pinExpiresAt', 'session.appVersion'],
-  authSharedLink: [
-    'shared_link.id',
-    'shared_link.userId',
-    'shared_link.expiresAt',
-    'shared_link.showExif',
-    'shared_link.allowUpload',
-    'shared_link.allowDownload',
-    'shared_link.password',
-  ],
   user: userColumns,
   userWithPrefix: userWithPrefixColumns,
   userAdmin: [

server/src/queries/shared.link.repository.sql

@@ -173,6 +173,7 @@ order by
 select
   "shared_link"."id",
   "shared_link"."userId",
+  "shared_link"."albumId",
   "shared_link"."expiresAt",
   "shared_link"."showExif",
   "shared_link"."allowUpload",
@@ -211,6 +212,7 @@ where
 select
   "shared_link"."id",
   "shared_link"."userId",
+  "shared_link"."albumId",
   "shared_link"."expiresAt",
   "shared_link"."showExif",
   "shared_link"."allowUpload",

server/src/repositories/album.repository.ts

@@ -330,6 +330,7 @@ export class AlbumRepository {
     await db
       .insertInto('album_asset')
       .values(assetIds.map((assetId) => ({ albumId, assetId })))
+      .onConflict((oc) => oc.doNothing())
       .execute();
   }
 

server/src/repositories/shared-link.repository.ts

@@ -202,7 +202,14 @@ export class SharedLinkRepository {
       .leftJoin('album', 'album.id', 'shared_link.albumId')
       .where('album.deletedAt', 'is', null)
       .select((eb) => [
-        ...columns.authSharedLink,
+        'shared_link.id',
+        'shared_link.userId',
+        'shared_link.albumId',
+        'shared_link.expiresAt',
+        'shared_link.showExif',
+        'shared_link.allowUpload',
+        'shared_link.allowDownload',
+        'shared_link.password',
         jsonObjectFrom(
           eb.selectFrom('user').select(columns.authUser).whereRef('user.id', '=', 'shared_link.userId'),
         ).as('user'),

server/src/schema/migrations/1773956345315-DuplicateSharedLinkAssets.ts

@@ -0,0 +1,13 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await sql`
+    DELETE FROM "shared_link_asset"
+    USING "shared_link"
+    WHERE "shared_link_asset"."sharedLinkId" = "shared_link"."id" AND "shared_link"."type" = 'ALBUM';
+`.execute(db);
+}
+
+export async function down(): Promise<void> {
+  // noop
+}

server/src/services/album.service.ts

@@ -165,6 +165,12 @@ export class AlbumService extends BaseService {
   }
 
   async addAssets(auth: AuthDto, id: string, dto: BulkIdsDto): Promise<BulkIdResponseDto[]> {
+    if (auth.sharedLink) {
+      this.logger.deprecate(
+        'Assets uploaded to a shared link are automatically added and calling this endpoint is no longer necessary. It will be removed in the next major release.',
+      );
+    }
+
     const album = await this.findOrFail(id, { withAssets: false });
     await this.requireAccess({ auth, permission: Permission.AlbumAssetCreate, ids: [id] });
 
@@ -195,6 +201,12 @@ export class AlbumService extends BaseService {
   }
 
   async addAssetsToAlbums(auth: AuthDto, dto: AlbumsAddAssetsDto): Promise<AlbumsAddAssetsResponseDto> {
+    if (auth.sharedLink) {
+      this.logger.deprecate(
+        'Assets uploaded to a shared link are automatically added and calling this endpoint is no longer necessary. It will be removed in the next major release.',
+      );
+    }
+
     const results: AlbumsAddAssetsResponseDto = {
       success: false,
       error: BulkIdErrorReason.DUPLICATE,

server/src/services/asset-media.service.ts

@@ -2,7 +2,7 @@ import { BadRequestException, Injectable, InternalServerErrorException, NotFound
 import { extname } from 'node:path';
 import sanitize from 'sanitize-filename';
 import { StorageCore } from 'src/cores/storage.core';
-import { Asset } from 'src/database';
+import { Asset, AuthSharedLink } from 'src/database';
 import {
   AssetBulkUploadCheckResponseDto,
   AssetMediaResponseDto,
@@ -152,7 +152,7 @@ export class AssetMediaService extends BaseService {
       const asset = await this.create(auth.user.id, dto, file, sidecarFile);
 
       if (auth.sharedLink) {
-        await this.sharedLinkRepository.addAssets(auth.sharedLink.id, [asset.id]);
+        await this.addToSharedLink(auth.sharedLink, asset.id);
       }
 
       await this.userRepository.updateUsage(auth.user.id, file.size);
@@ -326,6 +326,12 @@ export class AssetMediaService extends BaseService {
     };
   }
 
+  private async addToSharedLink(sharedLink: AuthSharedLink, assetId: string) {
+    await (sharedLink.albumId
+      ? this.albumRepository.addAssetIds(sharedLink.albumId, [assetId])
+      : this.sharedLinkRepository.addAssets(sharedLink.id, [assetId]));
+  }
+
   private async handleUploadError(
     error: any,
     auth: AuthDto,
@@ -347,7 +353,7 @@ export class AssetMediaService extends BaseService {
       }
 
       if (auth.sharedLink) {
-        await this.sharedLinkRepository.addAssets(auth.sharedLink.id, [duplicateId]);
+        await this.addToSharedLink(auth.sharedLink, duplicateId);
       }
 
       return { status: AssetMediaStatus.DUPLICATE, id: duplicateId };

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

@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon';
 import { SemVer } from 'semver';
+import { defaults } from 'src/config';
 import { serverVersion } from 'src/constants';
 import { ImmichEnvironment, JobName, JobStatus, SystemMetadataKey } from 'src/enum';
 import { VersionService } from 'src/services/version.service';
@@ -130,6 +131,32 @@ describe(VersionService.name, () => {
     });
   });
 
+  describe('onConfigUpdate', () => {
+    it('should queue a version check job when newVersionCheck is enabled', async () => {
+      await sut.onConfigUpdate({
+        oldConfig: { ...defaults, newVersionCheck: { enabled: false } },
+        newConfig: { ...defaults, newVersionCheck: { enabled: true } },
+      });
+      expect(mocks.job.queue).toHaveBeenCalledWith({ name: JobName.VersionCheck, data: {} });
+    });
+
+    it('should not queue a version check job when newVersionCheck is disabled', async () => {
+      await sut.onConfigUpdate({
+        oldConfig: { ...defaults, newVersionCheck: { enabled: true } },
+        newConfig: { ...defaults, newVersionCheck: { enabled: false } },
+      });
+      expect(mocks.job.queue).not.toHaveBeenCalled();
+    });
+
+    it('should not queue a version check job when newVersionCheck was already enabled', async () => {
+      await sut.onConfigUpdate({
+        oldConfig: { ...defaults, newVersionCheck: { enabled: true } },
+        newConfig: { ...defaults, newVersionCheck: { enabled: true } },
+      });
+      expect(mocks.job.queue).not.toHaveBeenCalled();
+    });
+  });
+
   describe('onWebsocketConnection', () => {
     it('should send on_server_version client event', async () => {
       await sut.onWebsocketConnection({ userId: '42' });

server/src/services/version.service.ts

@@ -55,6 +55,13 @@ export class VersionService extends BaseService {
     return this.versionRepository.getAll();
   }
 
+  @OnEvent({ name: 'ConfigUpdate' })
+  async onConfigUpdate({ oldConfig, newConfig }: ArgOf<'ConfigUpdate'>) {
+    if (!oldConfig.newVersionCheck.enabled && newConfig.newVersionCheck.enabled) {
+      await this.handleQueueVersionCheck();
+    }
+  }
+
   async handleQueueVersionCheck() {
     await this.jobRepository.queue({ name: JobName.VersionCheck, data: {} });
   }

server/test/fixtures/auth.stub.ts

@@ -48,6 +48,7 @@ export const authStub = {
       showExif: true,
       allowDownload: true,
       allowUpload: true,
+      albumId: null,
       expiresAt: null,
       password: null,
       userId: '42',

server/test/medium.factory.ts

@@ -220,9 +220,9 @@ export class MediumTestContext<S extends BaseService = BaseService> {
     return { result };
   }
 
-  async newAlbum(dto: Insertable<AlbumTable>) {
+  async newAlbum(dto: Insertable<AlbumTable>, assetIds?: string[]) {
     const album = mediumFactory.albumInsert(dto);
-    const result = await this.get(AlbumRepository).create(album, [], []);
+    const result = await this.get(AlbumRepository).create(album, assetIds ?? [], []);
     return { album, result };
   }
 

server/test/medium/specs/services/asset-media.service.spec.ts

@@ -1,12 +1,15 @@
 import { Kysely } from 'kysely';
+import { randomBytes } from 'node:crypto';
 import { AssetMediaStatus } from 'src/dtos/asset-media-response.dto';
 import { AssetMediaSize } from 'src/dtos/asset-media.dto';
-import { AssetFileType } from 'src/enum';
+import { AssetFileType, SharedLinkType } from 'src/enum';
 import { AccessRepository } from 'src/repositories/access.repository';
+import { AlbumRepository } from 'src/repositories/album.repository';
 import { AssetRepository } from 'src/repositories/asset.repository';
 import { EventRepository } from 'src/repositories/event.repository';
 import { JobRepository } from 'src/repositories/job.repository';
 import { LoggingRepository } from 'src/repositories/logging.repository';
+import { SharedLinkRepository } from 'src/repositories/shared-link.repository';
 import { StorageRepository } from 'src/repositories/storage.repository';
 import { UserRepository } from 'src/repositories/user.repository';
 import { DB } from 'src/schema';
@@ -22,7 +25,7 @@ let defaultDatabase: Kysely<DB>;
 const setup = (db?: Kysely<DB>) => {
   return newMediumService(AssetMediaService, {
     database: db || defaultDatabase,
-    real: [AccessRepository, AssetRepository, UserRepository],
+    real: [AccessRepository, AlbumRepository, AssetRepository, SharedLinkRepository, UserRepository],
     mock: [EventRepository, LoggingRepository, JobRepository, StorageRepository],
   });
 };
@@ -44,7 +47,6 @@ describe(AssetService.name, () => {
       const { asset } = await ctx.newAsset({ ownerId: user.id });
       await ctx.newExif({ assetId: asset.id, fileSizeInByte: 12_345 });
       const auth = factory.auth({ user: { id: user.id } });
-      const file = mediumFactory.uploadFile();
 
       await expect(
         sut.uploadAsset(
@@ -56,7 +58,7 @@ describe(AssetService.name, () => {
             fileCreatedAt: new Date(),
             assetData: Buffer.from('some data'),
           },
-          file,
+          mediumFactory.uploadFile(),
         ),
       ).resolves.toEqual({
         id: expect.any(String),
@@ -99,6 +101,168 @@ describe(AssetService.name, () => {
         status: AssetMediaStatus.CREATED,
       });
     });
+
+    it('should add to a shared link', async () => {
+      const { sut, ctx } = setup();
+
+      const sharedLinkRepo = ctx.get(SharedLinkRepository);
+
+      ctx.getMock(StorageRepository).utimes.mockResolvedValue();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+
+      const { user } = await ctx.newUser();
+
+      const sharedLink = await sharedLinkRepo.create({
+        key: randomBytes(50),
+        type: SharedLinkType.Individual,
+        description: 'Shared link description',
+        userId: user.id,
+        allowDownload: true,
+        allowUpload: true,
+      });
+
+      const auth = factory.auth({ user: { id: user.id }, sharedLink });
+      const file = mediumFactory.uploadFile();
+      const uploadDto = {
+        deviceId: 'some-id',
+        deviceAssetId: 'some-id',
+        fileModifiedAt: new Date(),
+        fileCreatedAt: new Date(),
+        assetData: Buffer.from('some data'),
+      };
+
+      const response = await sut.uploadAsset(auth, uploadDto, file);
+      expect(response).toEqual({ id: expect.any(String), status: AssetMediaStatus.CREATED });
+
+      const update = await sharedLinkRepo.get(user.id, sharedLink.id);
+      const assets = update!.assets;
+      expect(assets).toHaveLength(1);
+      expect(assets[0]).toMatchObject({ id: response.id });
+    });
+
+    it('should handle adding a duplicate asset to a shared link', async () => {
+      const { sut, ctx } = setup();
+
+      ctx.getMock(StorageRepository).utimes.mockResolvedValue();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+
+      const sharedLinkRepo = ctx.get(SharedLinkRepository);
+
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      await ctx.newExif({ assetId: asset.id, fileSizeInByte: 12_345 });
+
+      const sharedLink = await sharedLinkRepo.create({
+        key: randomBytes(50),
+        type: SharedLinkType.Individual,
+        description: 'Shared link description',
+        userId: user.id,
+        allowDownload: true,
+        allowUpload: true,
+        assetIds: [asset.id],
+      });
+
+      const auth = factory.auth({ user: { id: user.id }, sharedLink });
+      const uploadDto = {
+        deviceId: 'some-id',
+        deviceAssetId: 'some-id',
+        fileModifiedAt: new Date(),
+        fileCreatedAt: new Date(),
+        assetData: Buffer.from('some data'),
+      };
+
+      const response = await sut.uploadAsset(auth, uploadDto, mediumFactory.uploadFile({ checksum: asset.checksum }));
+      expect(response).toEqual({ id: expect.any(String), status: AssetMediaStatus.DUPLICATE });
+
+      const update = await sharedLinkRepo.get(user.id, sharedLink.id);
+      const assets = update!.assets;
+      expect(assets).toHaveLength(1);
+      expect(assets[0]).toMatchObject({ id: response.id });
+    });
+
+    it('should add to an album shared link', async () => {
+      const { sut, ctx } = setup();
+
+      const sharedLinkRepo = ctx.get(SharedLinkRepository);
+
+      ctx.getMock(StorageRepository).utimes.mockResolvedValue();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+
+      const { user } = await ctx.newUser();
+      const { album } = await ctx.newAlbum({ ownerId: user.id });
+
+      const sharedLink = await sharedLinkRepo.create({
+        key: randomBytes(50),
+        type: SharedLinkType.Album,
+        albumId: album.id,
+        description: 'Shared link description',
+        userId: user.id,
+        allowDownload: true,
+        allowUpload: true,
+      });
+
+      const auth = factory.auth({ user: { id: user.id }, sharedLink });
+      const uploadDto = {
+        deviceId: 'some-id',
+        deviceAssetId: 'some-id',
+        fileModifiedAt: new Date(),
+        fileCreatedAt: new Date(),
+        assetData: Buffer.from('some data'),
+      };
+
+      const response = await sut.uploadAsset(auth, uploadDto, mediumFactory.uploadFile());
+      expect(response).toEqual({ id: expect.any(String), status: AssetMediaStatus.CREATED });
+
+      const result = await ctx.get(AlbumRepository).getAssetIds(album.id, [response.id]);
+      const assets = [...result];
+      expect(assets).toHaveLength(1);
+      expect(assets[0]).toEqual(response.id);
+    });
+
+    it('should handle adding a duplicate asset to an album shared link', async () => {
+      const { sut, ctx } = setup();
+
+      const sharedLinkRepo = ctx.get(SharedLinkRepository);
+
+      ctx.getMock(StorageRepository).utimes.mockResolvedValue();
+      ctx.getMock(EventRepository).emit.mockResolvedValue();
+      ctx.getMock(JobRepository).queue.mockResolvedValue();
+
+      const { user } = await ctx.newUser();
+      const { asset } = await ctx.newAsset({ ownerId: user.id });
+      const { album } = await ctx.newAlbum({ ownerId: user.id }, [asset.id]);
+      // await ctx.newExif({ assetId: asset.id, fileSizeInByte: 12_345 });
+
+      const sharedLink = await sharedLinkRepo.create({
+        key: randomBytes(50),
+        type: SharedLinkType.Album,
+        albumId: album.id,
+        description: 'Shared link description',
+        userId: user.id,
+        allowDownload: true,
+        allowUpload: true,
+      });
+
+      const auth = factory.auth({ user: { id: user.id }, sharedLink });
+      const uploadDto = {
+        deviceId: 'some-id',
+        deviceAssetId: 'some-id',
+        fileModifiedAt: new Date(),
+        fileCreatedAt: new Date(),
+        assetData: Buffer.from('some data'),
+      };
+
+      const response = await sut.uploadAsset(auth, uploadDto, mediumFactory.uploadFile({ checksum: asset.checksum }));
+      expect(response).toEqual({ id: expect.any(String), status: AssetMediaStatus.DUPLICATE });
+
+      const result = await ctx.get(AlbumRepository).getAssetIds(album.id, [response.id]);
+      const assets = [...result];
+      expect(assets).toHaveLength(1);
+      expect(assets[0]).toEqual(response.id);
+    });
   });
 
   describe('viewThumbnail', () => {

server/test/small.factory.ts

@@ -63,12 +63,22 @@ const authSharedLinkFactory = (sharedLink: Partial<AuthSharedLink> = {}) => {
     expiresAt = null,
     userId = newUuid(),
     showExif = true,
+    albumId = null,
     allowUpload = false,
     allowDownload = true,
     password = null,
   } = sharedLink;
 
-  return { id, expiresAt, userId, showExif, allowUpload, allowDownload, password };
+  return {
+    id,
+    albumId,
+    expiresAt,
+    userId,
+    showExif,
+    allowUpload,
+    allowDownload,
+    password,
+  };
 };
 
 const authApiKeyFactory = (apiKey: Partial<AuthApiKey> = {}) => ({

web/package.json

@@ -72,10 +72,10 @@
     "@koddsson/eslint-plugin-tscompat": "^0.2.0",
     "@socket.io/component-emitter": "^3.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/enhanced-img": "^0.10.0",
+    "@sveltejs/enhanced-img": "^0.10.4",
     "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/vite-plugin-svelte": "6.2.4",
-    "@tailwindcss/vite": "^4.1.7",
+    "@sveltejs/vite-plugin-svelte": "7.0.0",
+    "@tailwindcss/vite": "^4.2.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.5.2",
@@ -100,13 +100,13 @@
     "prettier-plugin-sort-json": "^4.1.1",
     "prettier-plugin-svelte": "^3.3.3",
     "rollup-plugin-visualizer": "^6.0.0",
-    "svelte": "5.53.7",
+    "svelte": "5.53.13",
     "svelte-check": "^4.1.5",
     "svelte-eslint-parser": "^1.3.3",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.2",
+    "vite": "^8.0.0",
     "vitest": "^4.0.0"
   },
   "volta": {

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -20,12 +20,12 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import { QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { memoryManager, type MemoryAsset } from '$lib/managers/memory-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { memoryStore, type MemoryAsset } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
   import { getAssetMediaUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
@@ -187,7 +187,7 @@
     if (!current) {
       return;
     }
-    memoryStore.hideAssetsFromMemory(ids);
+    memoryManager.hideAssetsFromMemory(ids);
     init(page);
   };
 
@@ -196,7 +196,7 @@
       return;
     }
 
-    await memoryStore.deleteAssetFromMemory(current.asset.id);
+    await memoryManager.deleteAssetFromMemory(current.asset.id);
     init(page);
   };
 
@@ -205,7 +205,7 @@
       return;
     }
 
-    await memoryStore.deleteMemory(current.memory.id);
+    await memoryManager.deleteMemory(current.memory.id);
     toastManager.primary($t('removed_memory'));
     init(page);
   };
@@ -216,7 +216,7 @@
     }
 
     const newSavedState = !current.memory.isSaved;
-    await memoryStore.updateMemorySaved(current.memory.id, newSavedState);
+    await memoryManager.updateMemorySaved(current.memory.id, newSavedState);
     toastManager.primary(newSavedState ? $t('added_to_favorites') : $t('removed_from_favorites'));
     init(page);
   };
@@ -254,11 +254,11 @@
 
   const loadFromParams = (page: Page | NavigationTarget | null) => {
     const assetId = page?.params?.assetId ?? page?.url.searchParams.get(QueryParameter.ID) ?? undefined;
-    return memoryStore.getMemoryAsset(assetId);
+    return memoryManager.getMemoryAsset(assetId);
   };
 
   const init = (target: Page | NavigationTarget | null) => {
-    if (memoryStore.memories.length === 0) {
+    if (memoryManager.memories.length === 0) {
       return handlePromiseError(goto(Route.photos()));
     }
 
@@ -291,7 +291,7 @@
   };
 
   afterNavigate(({ from, to }) => {
-    memoryStore.ready().then(
+    memoryManager.ready().then(
       () => {
         let target;
         if (to?.params?.assetId) {

web/src/lib/components/server-statistics/ServerStatisticsCard.svelte

@@ -2,27 +2,22 @@
   import { ByteUnit } from '$lib/utils/byte-units';
   import { Icon, Text } from '@immich/ui';
 
-  type ValueData = {
-    value: number;
-    unit?: ByteUnit | undefined;
-  };
-
   interface Props {
     icon: string;
     title: string;
-    valuePromise: Promise<ValueData>;
+    value: number;
+    unit?: ByteUnit | undefined;
   }
 
-  let { icon, title, valuePromise }: Props = $props();
-  const zeros = (data?: ValueData) => {
-    let length = 13;
-    if (data) {
-      const valueLength = data.value.toString().length;
-      length = length - valueLength;
-    }
+  let { icon, title, value, unit = undefined }: Props = $props();
 
-    return '0'.repeat(length);
-  };
+  const zeros = $derived(() => {
+    const maxLength = 13;
+    const valueLength = value.toString().length;
+    const zeroLength = maxLength - valueLength;
+
+    return '0'.repeat(zeroLength);
+  });
 </script>
 
 <div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
@@ -31,37 +26,10 @@
     <Text size="giant" fontWeight="medium">{title}</Text>
   </div>
 
-  {#await valuePromise}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
-      <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros()}</span>
-    </div>
-  {:then data}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
-      <span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
-      {#if data.unit}
-        <code class="font-mono text-base font-normal">{data.unit}</code>
-      {/if}
-    </div>
-  {:catch _}
-    <div class="mx-auto font-mono text-2xl font-medium relative">
-      <span class="text-gray-300 dark:text-gray-600">{zeros()}</span>
-    </div>
-  {/await}
+  <div class="mx-auto font-mono text-2xl font-medium">
+    <span class="text-gray-300 dark:text-gray-600">{zeros()}</span><span>{value}</span>
+    {#if unit}
+      <code class="font-mono text-base font-normal">{unit}</code>
+    {/if}
+  </div>
 </div>
-
-<style>
-  .shimmer-text {
-    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1) 100%);
-    mask-size: 200% 100%;
-    animation: shimmer 2.25s infinite linear;
-  }
-
-  @keyframes shimmer {
-    from {
-      mask-position: 200% 0;
-    }
-    to {
-      mask-position: -200% 0;
-    }
-  }
-</style>

web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
+  import StatsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import type { ServerStatsResponseDto, UserAdminResponseDto } from '@immich/sdk';
+  import type { ServerStatsResponseDto } from '@immich/sdk';
   import {
     Code,
     FormatBytes,
@@ -19,28 +19,10 @@
   import { t } from 'svelte-i18n';
 
   type Props = {
-    statsPromise: Promise<ServerStatsResponseDto>;
-    users: UserAdminResponseDto[];
+    stats: ServerStatsResponseDto;
   };
 
-  const { statsPromise, users }: Props = $props();
-
-  const photosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.photos })));
-
-  const videosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.videos })));
-
-  const storagePromise = $derived.by(() =>
-    statsPromise.then((data) => {
-      const TiB = 1024 ** 4;
-      const [value, unit] = getBytesWithUnit(data.usage, data.usage > TiB ? 2 : 0);
-      return { value, unit };
-    }),
-  );
-
-  const getStorageUsageWithUnit = (usage: number) => {
-    const TiB = 1024 ** 4;
-    return getBytesWithUnit(usage, usage > TiB ? 2 : 0);
-  };
+  const { stats }: Props = $props();
 
   const zeros = (value: number, maxLength = 13) => {
     const valueLength = value.toString().length;
@@ -49,26 +31,18 @@
     return '0'.repeat(zeroLength);
   };
 
-  const getUserStatsPromise = async (userId: string) => {
-    const stats = await statsPromise;
-    return stats.usageByUser.find((userStats) => userStats.userId === userId);
-  };
+  const TiB = 1024 ** 4;
+  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0));
 </script>
 
-{#snippet placeholder()}
-  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
-  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
-  <TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-24"></span></TableCell>
-{/snippet}
-
 <div class="flex flex-col gap-5 my-4">
   <div>
     <Text class="mb-2" fontWeight="medium">{$t('total_usage')}</Text>
 
     <div class="hidden justify-between lg:flex gap-4">
-      <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
-      <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
-      <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} valuePromise={storagePromise} />
+      <StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
+      <StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
+      <StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
     </div>
 
     <div class="mt-5 flex lg:hidden">
@@ -80,13 +54,7 @@
           </div>
 
           <div class="relative text-center font-mono text-2xl font-medium">
-            {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
-            {:then stats}
-              <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
-            {:catch}
-              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
-            {/await}
+            <span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
           </div>
         </div>
         <div class="flex flex-wrap gap-x-12">
@@ -96,13 +64,7 @@
           </div>
 
           <div class="relative text-center font-mono text-2xl font-medium">
-            {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
-            {:then stats}
-              <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
-            {:catch}
-              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
-            {/await}
+            <span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
           </div>
         </div>
         <div class="flex flex-wrap gap-x-5">
@@ -112,20 +74,11 @@
           </div>
 
           <div class="relative flex text-center font-mono text-2xl font-medium">
-            {#await statsPromise}
-              <span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
-            {:then stats}
-              {@const storageUsageWithUnit = getStorageUsageWithUnit(stats.usage)}
-              <span class="text-light-300">{zeros(storageUsageWithUnit[0])}</span><span class="text-primary"
-                >{storageUsageWithUnit[0]}</span
-              >
+            <span class="text-light-300">{zeros(statsUsage)}</span><span class="text-primary">{statsUsage}</span>
 
-              <div class="absolute -end-1.5 -bottom-4">
-                <Code color="muted" class="text-xs font-light font-mono">{storageUsageWithUnit[1]}</Code>
-              </div>
-            {:catch}
-              <span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
-            {/await}
+            <div class="absolute -end-1.5 -bottom-4">
+              <Code color="muted" class="text-xs font-light font-mono">{statsUsageUnit}</Code>
+            </div>
           </div>
         </div>
       </div>
@@ -142,97 +95,34 @@
         <TableHeading class="w-1/4">{$t('usage')}</TableHeading>
       </TableHeader>
       <TableBody class="block max-h-80 overflow-y-auto">
-        {#each users as user (user.id)}
+        {#each stats.usageByUser as user (user.userId)}
           <TableRow>
-            <TableCell class="w-1/4">{user.name}</TableCell>
-            {#await getUserStatsPromise(user.id)}
-              {@render placeholder()}
-            {:then userStats}
-              {#if userStats}
-                <TableCell class="w-1/4">
-                  {userStats.photos.toLocaleString($locale)} (<FormatBytes bytes={userStats.usagePhotos} />)</TableCell
-                >
-                <TableCell class="w-1/4">
-                  {userStats.videos.toLocaleString($locale)} (<FormatBytes
-                    bytes={userStats.usageVideos}
-                    precision={0}
-                  />)</TableCell
-                >
-                <TableCell class="w-1/4">
-                  <FormatBytes bytes={userStats.usage} precision={0} />
-                  {#if userStats.quotaSizeInBytes !== null}
-                    / <FormatBytes bytes={userStats.quotaSizeInBytes} precision={0} />
-                  {/if}
-                  <span class="text-primary">
-                    {#if userStats.quotaSizeInBytes !== null && userStats.quotaSizeInBytes >= 0}
-                      ({(userStats.quotaSizeInBytes === 0
-                        ? 1
-                        : userStats.usage / userStats.quotaSizeInBytes
-                      ).toLocaleString($locale, {
-                        style: 'percent',
-                        maximumFractionDigits: 0,
-                      })})
-                    {:else}
-                      ({$t('unlimited')})
-                    {/if}
-                  </span>
-                </TableCell>
-              {:else}
-                {@render placeholder()}
+            <TableCell class="w-1/4">{user.userName}</TableCell>
+            <TableCell class="w-1/4">
+              {user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
+            >
+            <TableCell class="w-1/4">
+              {user.videos.toLocaleString($locale)} (<FormatBytes bytes={user.usageVideos} precision={0} />)</TableCell
+            >
+            <TableCell class="w-1/4">
+              <FormatBytes bytes={user.usage} precision={0} />
+              {#if user.quotaSizeInBytes !== null}
+                / <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
               {/if}
-            {/await}
+              <span class="text-primary">
+                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                  ({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
+                    style: 'percent',
+                    maximumFractionDigits: 0,
+                  })})
+                {:else}
+                  ({$t('unlimited')})
+                {/if}
+              </span>
+            </TableCell>
           </TableRow>
         {/each}
       </TableBody>
     </Table>
   </div>
 </div>
-
-<style>
-  .skeleton-loader {
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-    background-color: rgba(156, 163, 175, 0.35);
-  }
-
-  .skeleton-loader::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.8) 50%,
-      rgba(255, 255, 255, 0)
-    );
-    background-size: 200% 100%;
-    background-position: 200% 0;
-    animation: skeleton-animation 2000ms infinite;
-  }
-
-  @keyframes skeleton-animation {
-    from {
-      background-position: 200% 0;
-    }
-    to {
-      background-position: -200% 0;
-    }
-  }
-
-  .shimmer-text {
-    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1) 100%);
-    mask-size: 200% 100%;
-    animation: shimmer 2.25s infinite linear;
-  }
-
-  @keyframes shimmer {
-    from {
-      mask-position: 200% 0;
-    }
-    to {
-      mask-position: -200% 0;
-    }
-  }
-</style>

web/src/lib/components/shared-components/combobox.svelte

@@ -212,12 +212,12 @@
         bottom: `${rootHeight - top}px`,
         left: `${left}px`,
         width: `${boundary.width}px`,
-        maxHeight: maxHeight(top - dropdownOffset),
+        maxHeight: maxHeight(boundary.top - dropdownOffset),
       };
     }
 
-    const viewportHeight = visualViewport?.height || rootHeight;
-    const availableHeight = modalBounds ? rootHeight - bottom : viewportHeight - boundary.bottom;
+    const viewportHeight = visualViewport?.height || window.innerHeight;
+    const availableHeight = viewportHeight - boundary.bottom;
     return {
       top: `${bottom}px`,
       left: `${left}px`,

web/src/lib/managers/memory-manager.svelte.ts

@@ -21,7 +21,7 @@ export type MemoryAsset = MemoryIndex & {
   nextMemory?: MemoryResponseDto;
 };
 
-class MemoryStoreSvelte {
+class MemoryManager {
   #loading: Promise<void> | undefined;
 
   constructor() {
@@ -135,4 +135,4 @@ class MemoryStoreSvelte {
   }
 }
 
-export const memoryStore = new MemoryStoreSvelte();
+export const memoryManager = new MemoryManager();

web/src/lib/services/asset.service.ts

@@ -8,17 +8,16 @@ import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
 import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
 import { user as authUser, preferences } from '$lib/stores/user.store';
 import type { AssetControlContext } from '$lib/types';
-import { getSharedLink, sleep } from '$lib/utils';
+import { getAssetMediaUrl, getSharedLink, sleep } from '$lib/utils';
 import { downloadUrl } from '$lib/utils/asset-utils';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { asQueryString } from '$lib/utils/shared-links';
 import {
   AssetJobName,
+  AssetMediaSize,
   AssetTypeEnum,
   AssetVisibility,
   getAssetInfo,
-  getBaseUrl,
   runAssetJobs,
   updateAsset,
   type AssetJobsDto,
@@ -308,6 +307,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
     {
       filename: asset.originalFileName,
       id: asset.id,
+      cacheKey: asset.thumbhash,
     },
   ];
 
@@ -321,13 +321,12 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
       assets.push({
         filename: motionAsset.originalFileName,
         id: asset.livePhotoVideoId,
+        cacheKey: motionAsset.thumbhash,
       });
     }
   }
 
-  const queryParams = asQueryString(authManager.params);
-
-  for (const [i, { filename, id }] of assets.entries()) {
+  for (const [i, { filename, id, cacheKey }] of assets.entries()) {
     if (i !== 0) {
       // play nice with Safari
       await sleep(500);
@@ -335,12 +334,7 @@ export const handleDownloadAsset = async (asset: AssetResponseDto, { edited }: {
 
     try {
       toastManager.primary($t('downloading_asset_filename', { values: { filename } }));
-      downloadUrl(
-        getBaseUrl() +
-          `/assets/${id}/original` +
-          (queryParams ? `?${queryParams}&edited=${edited}` : `?edited=${edited}`),
-        filename,
-      );
+      downloadUrl(getAssetMediaUrl({ id, size: AssetMediaSize.Original, edited, cacheKey }), filename);
     } catch (error) {
       handleError(error, $t('errors.error_downloading', { values: { filename } }));
     }

web/src/lib/stores/upload.ts

@@ -80,7 +80,34 @@ function createUploadStore() {
   };
 
   const removeItem = (id: string) => {
-    uploadAssets.update((uploadingAsset) => uploadingAsset.filter((a) => a.id != id));
+    uploadAssets.update((uploadingAsset) => {
+      const assetToRemove = uploadingAsset.find((a) => a.id === id);
+      if (assetToRemove) {
+        stats.update((stats) => {
+          switch (assetToRemove.state) {
+            case UploadState.DONE: {
+              stats.success--;
+              break;
+            }
+
+            case UploadState.DUPLICATED: {
+              stats.duplicates--;
+              break;
+            }
+
+            case UploadState.ERROR: {
+              stats.errors--;
+              break;
+            }
+          }
+
+          stats.total--;
+          return stats;
+        });
+      }
+
+      return uploadingAsset.filter((a) => a.id != id);
+    });
   };
 
   const dismissErrors = () =>

web/src/lib/utils/file-uploader.ts

@@ -216,7 +216,7 @@ async function fileUploader({
       uploadAssetsStore.track('success');
     }
 
-    if (albumId) {
+    if (albumId && !authManager.isSharedLink) {
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_adding_to_album') });
       await addAssetsToAlbums([albumId], [responseData.id], { notify: false });
       uploadAssetsStore.updateItem(deviceAssetId, { message: $t('asset_added_to_album') });

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

@@ -287,7 +287,11 @@
     }
   };
 
-  const onAlbumAddAssets = async () => {
+  const onAlbumAddAssets = async ({ albumIds }: { albumIds: string[] }) => {
+    if (!albumIds.includes(album.id)) {
+      return;
+    }
+
     await refreshAlbum();
     timelineInteraction.clearMultiselect();
     await setModeToView();

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

@@ -20,13 +20,13 @@
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
   import Timeline from '$lib/components/timeline/Timeline.svelte';
   import { AssetAction } from '$lib/constants';
+  import { memoryManager } from '$lib/managers/memory-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
   import { getAssetBulkActions } from '$lib/services/asset.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
-  import { memoryStore } from '$lib/stores/memory.store.svelte';
   import { preferences, user } from '$lib/stores/user.store';
   import { getAssetMediaUrl, memoryLaneTitle } from '$lib/utils';
   import {
@@ -91,7 +91,7 @@
   });
 
   const items = $derived(
-    memoryStore.memories.map((memory) => ({
+    memoryManager.memories.map((memory) => ({
       id: memory.id,
       title: $memoryLaneTitle(memory),
       href: Route.memories({ id: memory.assets[0].id }),

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

@@ -178,19 +178,7 @@
 
   const handleFirst = () => navigateToIndex(0);
   const handlePrevious = () => navigateToIndex(Math.max(duplicatesIndex - 1, 0));
-  const handlePreviousShortcut = async () => {
-    if ($showAssetViewer) {
-      return;
-    }
-    await handlePrevious();
-  };
   const handleNext = async () => navigateToIndex(Math.min(duplicatesIndex + 1, duplicates.length - 1));
-  const handleNextShortcut = async () => {
-    if ($showAssetViewer) {
-      return;
-    }
-    await handleNext();
-  };
   const handleLast = () => navigateToIndex(duplicates.length - 1);
 
   const navigateToIndex = async (index: number) =>
@@ -198,10 +186,12 @@
 </script>
 
 <svelte:document
-  use:shortcuts={[
-    { shortcut: { key: 'ArrowLeft' }, onShortcut: handlePreviousShortcut },
-    { shortcut: { key: 'ArrowRight' }, onShortcut: handleNextShortcut },
-  ]}
+  use:shortcuts={$showAssetViewer
+    ? []
+    : [
+        { shortcut: { key: 'ArrowLeft' }, onShortcut: handlePrevious },
+        { shortcut: { key: 'ArrowRight' }, onShortcut: handleNext },
+      ]}
 />
 
 <UserPageLayout title={data.meta.title + ` (${duplicates.length.toLocaleString($locale)})`} scrollbar={true}>

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto, invalidate } from '$app/navigation';
+  import { goto } from '$app/navigation';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -7,7 +7,7 @@
   import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { type LibraryResponseDto } from '@immich/sdk';
+  import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
   import {
     CommandPaletteDefaultProvider,
     Container,
@@ -31,17 +31,32 @@
     data: LayoutData;
   };
 
-  const props: Props = $props();
+  let { children, data }: Props = $props();
 
-  let libraries = $derived([...props.data.libraries]);
-  let owners = $derived({ ...props.data.owners });
+  let libraries = $state(data.libraries);
+  let statistics = $state(data.statistics);
+  let owners = $state(data.owners);
 
   const onLibraryCreate = async (library: LibraryResponseDto) => {
     await goto(Route.viewLibrary(library));
   };
 
-  const onLibraryUpdate = () => invalidate('app:libraries');
-  const onLibraryDelete = () => invalidate('app:libraries');
+  const onLibraryUpdate = async (library: LibraryResponseDto) => {
+    const index = libraries.findIndex(({ id }) => id === library.id);
+
+    if (index === -1) {
+      return;
+    }
+
+    libraries[index] = await getLibrary({ id: library.id });
+    statistics[library.id] = await getLibraryStatistics({ id: library.id });
+  };
+
+  const onLibraryDelete = ({ id }: { id: string }) => {
+    libraries = libraries.filter((library) => library.id !== id);
+    delete statistics[id];
+    delete owners[id];
+  };
 
   const { Create, ScanAll } = $derived(getLibrariesActions($t));
 
@@ -64,7 +79,7 @@
 
 <CommandPaletteDefaultProvider name={$t('library')} actions={[Create, ScanAll]} />
 
-<AdminPageLayout breadcrumbs={[{ title: props.data.meta.title }]} actions={[ScanAll, Create]}>
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
   <Container size="large" center class="my-4">
     <div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
       {#if libraries.length > 0}
@@ -79,6 +94,8 @@
           </TableHeader>
           <TableBody>
             {#each libraries as library (library.id + library.name)}
+              {@const { photos, usage, videos } = statistics[library.id]}
+              {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(usage, 0)}
               {@const owner = owners[library.id]}
               <TableRow>
                 <TableCell class={classes.column1}>
@@ -87,40 +104,9 @@
                 <TableCell class={classes.column2}>
                   <Link href={Route.viewUser(owner)}>{owner.name}</Link>
                 </TableCell>
-                {#await props.data.statisticsPromise}
-                  <TableCell class={classes.column3}>
-                    <span class="skeleton-loader inline-block h-4 w-14"></span>
-                  </TableCell>
-                  <TableCell class={classes.column4}>
-                    <span class="skeleton-loader inline-block h-4 w-14"></span>
-                  </TableCell>
-                  <TableCell class={classes.column5}>
-                    <span class="skeleton-loader inline-block h-4 w-20"></span>
-                  </TableCell>
-                {:then loadedStats}
-                  {@const stats = loadedStats[library.id]}
-                  <TableCell class={classes.column3}>
-                    {stats.photos.toLocaleString($locale)}
-                  </TableCell>
-                  <TableCell class={classes.column4}>
-                    {stats.videos.toLocaleString($locale)}
-                  </TableCell>
-                  <TableCell class={classes.column5}>
-                    {@const [diskUsage, diskUsageUnit] = getBytesWithUnit(stats.usage, 0)}
-                    {diskUsage}
-                    {diskUsageUnit}
-                  </TableCell>
-                {:catch}
-                  <TableCell class={classes.column3}>
-                    <span class="skeleton-loader inline-block h-4 w-14"></span>
-                  </TableCell>
-                  <TableCell class={classes.column4}>
-                    <span class="skeleton-loader inline-block h-4 w-14"></span>
-                  </TableCell>
-                  <TableCell class={classes.column5}>
-                    <span class="skeleton-loader inline-block h-4 w-20"></span>
-                  </TableCell>
-                {/await}
+                <TableCell class={classes.column3}>{photos.toLocaleString($locale)}</TableCell>
+                <TableCell class={classes.column4}>{videos.toLocaleString($locale)}</TableCell>
+                <TableCell class={classes.column5}>{diskUsage} {diskUsageUnit}</TableCell>
                 <TableCell class={classes.column6}>
                   <ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
                 </TableCell>
@@ -137,41 +123,7 @@
         />
       {/if}
 
-      {@render props.children?.()}
+      {@render children?.()}
     </div>
   </Container>
 </AdminPageLayout>
-
-<style>
-  .skeleton-loader {
-    position: relative;
-    border-radius: 4px;
-    overflow: hidden;
-    background-color: rgba(156, 163, 175, 0.35);
-  }
-
-  .skeleton-loader::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-repeat: no-repeat;
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 0.8) 50%,
-      rgba(255, 255, 255, 0)
-    );
-    background-size: 200% 100%;
-    background-position: 200% 0;
-    animation: skeleton-animation 2000ms infinite;
-  }
-
-  @keyframes skeleton-animation {
-    from {
-      background-position: 200% 0;
-    }
-    to {
-      background-position: -200% 0;
-    }
-  }
-</style>

web/src/routes/admin/library-management/(list)/+layout.ts

@@ -3,15 +3,14 @@ import { getFormatter } from '$lib/utils/i18n';
 import { getAllLibraries, getLibraryStatistics, getUserAdmin, searchUsersAdmin } from '@immich/sdk';
 import type { LayoutLoad } from './$types';
 
-export const load = (async ({ url, depends }) => {
-  depends('app:libraries');
+export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
   await requestServerInfo();
   const allUsers = await searchUsersAdmin({ withDeleted: false });
   const $t = await getFormatter();
 
   const libraries = await getAllLibraries();
-  const statisticsPromise = Promise.all(
+  const statistics = await Promise.all(
     libraries.map(async ({ id }) => [id, await getLibraryStatistics({ id })] as const),
   );
   const owners = await Promise.all(
@@ -21,7 +20,7 @@ export const load = (async ({ url, depends }) => {
   return {
     allUsers,
     libraries,
-    statisticsPromise: statisticsPromise.then((stats) => Object.fromEntries(stats)),
+    statistics: Object.fromEntries(statistics),
     owners: Object.fromEntries(owners),
     meta: {
       title: $t('external_libraries'),

web/src/routes/admin/library-management/[id]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { goto, invalidate } from '$app/navigation';
+  import { goto } from '$app/navigation';
   import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
   import AdminCard from '$lib/components/AdminCard.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
@@ -15,7 +15,7 @@
     getLibraryFolderActions,
   } from '$lib/services/library.service';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-
+  import type { LibraryResponseDto } from '@immich/sdk';
   import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
   import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
   import type { Snippet } from 'svelte';
@@ -27,26 +27,22 @@
     data: LayoutData;
   };
 
-  let { children, data }: Props = $props();
+  const { children, data }: Props = $props();
 
-  const photosPromise = $derived(data.statisticsPromise.then((stats) => ({ value: stats.photos })));
+  const statistics = data.statistics;
+  const [storageUsage, unit] = getBytesWithUnit(statistics.usage);
 
-  const videosPromise = $derived(data.statisticsPromise.then((stats) => ({ value: stats.videos })));
+  let library = $state(data.library);
 
-  const usagePromise = $derived(
-    data.statisticsPromise.then((stats) => {
-      const [value, unit] = getBytesWithUnit(stats.usage);
-      return { value, unit };
-    }),
-  );
+  const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
+    if (newLibrary.id === library.id) {
+      library = newLibrary;
+    }
+  };
 
-  const library = $derived(data.library);
-
-  const onLibraryUpdate = () => invalidate('app:library');
-
-  const onLibraryDelete = ({ id }: { id: string }) => {
+  const onLibraryDelete = async ({ id }: { id: string }) => {
     if (id === library.id) {
-      void goto(Route.libraries());
+      await goto(Route.libraries());
     }
   };
 
@@ -65,9 +61,9 @@
     <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
       <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
       <div class="flex flex-col lg:flex-row gap-4 col-span-full">
-        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
-        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
-        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} valuePromise={usagePromise} />
+        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics.photos} />
+        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
+        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
       </div>
 
       <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>

web/src/routes/admin/library-management/[id]/+layout.ts

@@ -5,8 +5,7 @@ import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immi
 import { redirect } from '@sveltejs/kit';
 import type { LayoutLoad } from './$types';
 
-export const load = (async ({ params: { id }, url, depends }) => {
-  depends('app:library');
+export const load = (async ({ params: { id }, url }) => {
   await authenticate(url, { admin: true });
 
   let library: LibraryResponseDto;
@@ -17,12 +16,12 @@ export const load = (async ({ params: { id }, url, depends }) => {
     redirect(307, Route.libraries());
   }
 
-  const statisticsPromise = getLibraryStatistics({ id });
+  const statistics = await getLibraryStatistics({ id });
   const $t = await getFormatter();
 
   return {
     library,
-    statisticsPromise,
+    statistics,
     meta: {
       title: $t('admin.library_details'),
     },

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
   import ServerStatisticsPanel from '$lib/components/server-statistics/ServerStatisticsPanel.svelte';
-  import { getServerStatistics, type ServerStatsResponseDto } from '@immich/sdk';
+  import { getServerStatistics } from '@immich/sdk';
   import { Container } from '@immich/ui';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
@@ -12,14 +12,7 @@
 
   const { data }: Props = $props();
 
-  let stats = $state<ServerStatsResponseDto | undefined>(undefined);
-
-  const statsPromise = $derived.by(() => {
-    if (stats) {
-      return Promise.resolve(stats);
-    }
-    return data.statsPromise;
-  });
+  let stats = $state(data.stats);
 
   const updateStatistics = async () => {
     stats = await getServerStatistics();
@@ -34,6 +27,6 @@
 
 <AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
   <Container size="large" center>
-    <ServerStatisticsPanel {statsPromise} users={data.users} />
+    <ServerStatisticsPanel {stats} />
   </Container>
 </AdminPageLayout>

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

@@ -1,17 +1,15 @@
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getServerStatistics, searchUsersAdmin } from '@immich/sdk';
+import { getServerStatistics } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
-  const statsPromise = getServerStatistics();
-  const users = await searchUsersAdmin({ withDeleted: false });
+  const stats = await getServerStatistics();
   const $t = await getFormatter();
 
   return {
-    statsPromise,
-    users,
+    stats,
     meta: {
       title: $t('server_stats'),
     },

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

@@ -123,21 +123,9 @@
         </div>
         <div class="col-span-full">
           <div class="flex flex-col lg:flex-row gap-4 w-full">
-            <ServerStatisticsCard
-              icon={mdiCameraIris}
-              title={$t('photos')}
-              valuePromise={Promise.resolve({ value: userStatistics.images })}
-            />
-            <ServerStatisticsCard
-              icon={mdiPlayCircle}
-              title={$t('videos')}
-              valuePromise={Promise.resolve({ value: userStatistics.videos })}
-            />
-            <ServerStatisticsCard
-              icon={mdiChartPie}
-              title={$t('storage')}
-              valuePromise={Promise.resolve({ value: statsUsage, unit: statsUsageUnit })}
-            />
+            <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={userStatistics.images} />
+            <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={userStatistics.videos} />
+            <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
           </div>
         </div>