From eb27635f22d6a50056bdca00e24b6fffe1777134 Mon Sep 17 00:00:00 2001 From: bwees Date: Fri, 22 May 2026 11:35:16 -0500 Subject: [PATCH] refactor: use ControlBar UI Library component --- pnpm-lock.yaml | 10 +- web/package.json | 2 +- .../components/album-page/AlbumViewer.svelte | 2 +- .../components/pages/SharedLinkPage.svelte | 2 +- .../share-page/IndividualSharedViewer.svelte | 4 +- .../shared-components/ControlAppBar.svelte | 106 ++++++------------ .../timeline/AssetSelectControlBar.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 6 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 8 +- .../[[assetId=id]]/+page.svelte | 3 +- 11 files changed, 54 insertions(+), 93 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 91a94de23c..f380d940d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -758,8 +758,8 @@ importers: specifier: workspace:* version: link:../packages/sdk '@immich/ui': - specifier: ^0.77.0 - version: 0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4)) + specifier: ^0.79.0 + version: 0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4)) '@mapbox/mapbox-gl-rtl-text': specifier: 0.4.0 version: 0.4.0 @@ -3204,8 +3204,8 @@ packages: resolution: {integrity: sha512-O1SJ+BbeFVsUTF4af1MfagJZM+lPgLjI8lQ3SZNjpo8SGJReSbUl2ii03OKuGni/G0yp2GnRLpOTNSHYGtVrcg==} hasBin: true - '@immich/ui@0.77.3': - resolution: {integrity: sha512-h3jrYE3JyGDOwXF7A4tVUHenP0L7TsDV22FyFInBTdwlWjjXoknwE1HWeTvvLxLeMuO5SHCZ9Q2D2al84xVjNw==} + '@immich/ui@0.79.0': + resolution: {integrity: sha512-UEQZrP8CTc4Kth1xCV8/6Xmk1P51GQKISC7vKqcrM0BO0fxCaNwJK8Ocn6R8baVqH52JYfPb1yQR9bweBnCjXw==} peerDependencies: '@sveltejs/kit': ^2.13.0 svelte: ^5.0.0 @@ -15879,7 +15879,7 @@ snapshots: pg-connection-string: 2.13.0 postgres: 3.4.9 - '@immich/ui@0.77.3(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))': + '@immich/ui@0.79.0(@sveltejs/kit@2.60.1(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.55.8(@typescript-eslint/types@8.59.4))(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))(typescript@6.0.3)(vite@8.0.13(@types/node@24.12.4)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.99.0)(terser@5.47.1)(tsx@4.22.3)(yaml@2.9.0)))(svelte@5.55.8(@typescript-eslint/types@8.59.4))': dependencies: '@internationalized/date': 3.12.1 '@mdi/js': 7.4.47 diff --git a/web/package.json b/web/package.json index 13725c2d56..aa6e3a2692 100644 --- a/web/package.json +++ b/web/package.json @@ -27,7 +27,7 @@ "@formatjs/icu-messageformat-parser": "^3.0.0", "@immich/justified-layout-wasm": "^0.4.3", "@immich/sdk": "workspace:*", - "@immich/ui": "^0.77.0", + "@immich/ui": "^0.79.0", "@mapbox/mapbox-gl-rtl-text": "0.4.0", "@mdi/js": "^7.4.47", "@noble/hashes": "^2.2.0", diff --git a/web/src/lib/components/album-page/AlbumViewer.svelte b/web/src/lib/components/album-page/AlbumViewer.svelte index 85a032067f..4e7d6bce1a 100644 --- a/web/src/lib/components/album-page/AlbumViewer.svelte +++ b/web/src/lib/components/album-page/AlbumViewer.svelte @@ -103,7 +103,7 @@ {/if} {:else} - + {#snippet leading()} diff --git a/web/src/lib/components/pages/SharedLinkPage.svelte b/web/src/lib/components/pages/SharedLinkPage.svelte index 40cf0a193f..8cb4aadd7b 100644 --- a/web/src/lib/components/pages/SharedLinkPage.svelte +++ b/web/src/lib/components/pages/SharedLinkPage.svelte @@ -91,7 +91,7 @@
- + {#snippet leading()} diff --git a/web/src/lib/components/share-page/IndividualSharedViewer.svelte b/web/src/lib/components/share-page/IndividualSharedViewer.svelte index 86b716da40..936ccb0f41 100644 --- a/web/src/lib/components/share-page/IndividualSharedViewer.svelte +++ b/web/src/lib/components/share-page/IndividualSharedViewer.svelte @@ -18,7 +18,7 @@ import { toTimelineAsset } from '$lib/utils/timeline-util'; import { getAssetInfo, type SharedLinkResponseDto } from '@immich/sdk'; import { IconButton, Logo, toastManager } from '@immich/ui'; - import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js'; + import { mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js'; import { t } from 'svelte-i18n'; import ControlAppBar from '../shared-components/ControlAppBar.svelte'; import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte'; @@ -97,7 +97,7 @@ {/if} {:else} - goto(Route.photos())} backIcon={mdiArrowLeft} showBackButton={false}> + {#snippet leading()} diff --git a/web/src/lib/components/shared-components/ControlAppBar.svelte b/web/src/lib/components/shared-components/ControlAppBar.svelte index 85990a3b5c..f6e347251d 100644 --- a/web/src/lib/components/shared-components/ControlAppBar.svelte +++ b/web/src/lib/components/shared-components/ControlAppBar.svelte @@ -1,97 +1,59 @@ -
- + {#if trailing} + + {@render trailing()} + + {/if} +
diff --git a/web/src/lib/components/timeline/AssetSelectControlBar.svelte b/web/src/lib/components/timeline/AssetSelectControlBar.svelte index 49a3f26884..1567dae9fd 100644 --- a/web/src/lib/components/timeline/AssetSelectControlBar.svelte +++ b/web/src/lib/components/timeline/AssetSelectControlBar.svelte @@ -17,7 +17,7 @@ const assets = $derived(assetMultiSelectManager.assets); - + {#snippet leading()}

{assets.length}

diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte index 6258df34aa..42072c122b 100644 --- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte +++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte @@ -1,10 +1,8 @@