Skip to content

Commit 10cb612

Browse files
michelheusschenmichelheusschen
authored
feat(web): theme/locale preferences and improve SSR (immich-app#1832)
1 parent a9a769d commit 10cb612

File tree

20 files changed

+145
-147
lines changed

20 files changed

+145
-147
lines changed

‎web/__mocks__/$app/environment.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
browser: false
3+
};

‎web/package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"luxon": "^3.1.1",
6969
"rxjs": "^7.8.0",
7070
"socket.io-client": "^4.5.1",
71+
"svelte-local-storage-store": "^0.4.0",
7172
"svelte-material-icons": "^2.0.2"
7273
}
7374
}

‎web/src/app.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
%sveltekit.head%
7+
<script>
8+
/**
9+
* Prevent FOUC on page load.
10+
*/
11+
const theme = localStorage.getItem('color-theme') || 'dark';
12+
if (theme === 'light') {
13+
document.documentElement.classList.remove('dark');
14+
}
15+
</script>
716
</head>
817

918
<body class="bg-immich-bg dark:bg-immich-dark-bg">

‎web/src/lib/components/admin-page/jobs/job-tile.svelte‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import SelectionSearch from 'svelte-material-icons/SelectionSearch.svelte';
44
import Play from 'svelte-material-icons/Play.svelte';
55
import AllInclusive from 'svelte-material-icons/AllInclusive.svelte';
6-
6+
import { locale } from '$lib/stores/preferences.store';
77
import { createEventDispatcher } from 'svelte';
88
import { JobCounts } from '@api';
99
@@ -22,8 +22,6 @@
2222
const run = (includeAllAssets: boolean) => {
2323
dispatch('click', { includeAllAssets });
2424
};
25-
26-
const locale = navigator.language;
2725
</script>
2826

2927
<div class="flex justify-between rounded-3xl bg-gray-100 dark:bg-immich-dark-gray">
@@ -45,7 +43,7 @@
4543
<p>Active</p>
4644
<p class="text-2xl">
4745
{#if jobCounts.active !== undefined}
48-
{jobCounts.active.toLocaleString(locale)}
46+
{jobCounts.active.toLocaleString($locale)}
4947
{:else}
5048
<LoadingSpinner />
5149
{/if}
@@ -57,7 +55,7 @@
5755
>
5856
<p class="text-2xl">
5957
{#if jobCounts.waiting !== undefined}
60-
{jobCounts.waiting.toLocaleString(locale)}
58+
{jobCounts.waiting.toLocaleString($locale)}
6159
{:else}
6260
<LoadingSpinner />
6361
{/if}

‎web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { getBytesWithUnit, asByteUnitString } from '../../../utils/byte-units';
88
import { onMount, onDestroy } from 'svelte';
99
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
10+
import { locale } from '$lib/stores/preferences.store';
1011
1112
export let allUsers: Array<UserResponseDto>;
1213
@@ -37,8 +38,6 @@
3738
3839
// Stats are unavailable if data is not loaded yet
3940
$: [spaceUsage, spaceUnit] = getBytesWithUnit(stats ? stats.usageRaw : 0);
40-
41-
const locale = navigator.language;
4241
</script>
4342

4443
<div class="flex flex-col gap-5">
@@ -83,8 +82,10 @@
8382
}`}
8483
>
8584
<td class="text-sm px-2 w-1/4 text-ellipsis">{getFullName(user.userId)}</td>
86-
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString(locale)}</td>
87-
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString(locale)}</td>
85+
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.photos.toLocaleString($locale)}</td
86+
>
87+
<td class="text-sm px-2 w-1/4 text-ellipsis">{user.videos.toLocaleString($locale)}</td
88+
>
8889
<td class="text-sm px-2 w-1/4 text-ellipsis">{asByteUnitString(user.usageRaw)}</td>
8990
</tr>
9091
{/each}

‎web/src/lib/components/album-page/album-card.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
1818
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
1919
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
20+
import { locale } from '$lib/stores/preferences.store';
2021
2122
export let album: AlbumResponseDto;
2223
@@ -52,8 +53,6 @@
5253
onMount(async () => {
5354
imageData = (await loadHighQualityThumbnail(album.albumThumbnailAssetId)) || noThumbnailUrl;
5455
});
55-
56-
const locale = navigator.language;
5756
</script>
5857

5958
<div
@@ -91,7 +90,10 @@
9190
</p>
9291

9392
<span class="text-xs flex gap-2 dark:text-immich-dark-fg" data-testid="album-details">
94-
<p>{album.assetCount.toLocaleString(locale)} {album.assetCount == 1 ? `item` : `items`}</p>
93+
<p>
94+
{album.assetCount.toLocaleString($locale)}
95+
{album.assetCount == 1 ? `item` : `items`}
96+
</p>
9597

9698
{#if album.shared}
9799
<p>·</p>

‎web/src/lib/components/album-page/album-viewer.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
import ThemeButton from '../shared-components/theme-button.svelte';
4040
import { openFileUploadDialog } from '$lib/utils/file-uploader';
4141
import { bulkDownload } from '$lib/utils/asset-utils';
42+
import { locale } from '$lib/stores/preferences.store';
4243
import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
4344
import ImmichLogo from '../shared-components/immich-logo.svelte';
4445
@@ -88,7 +89,6 @@
8889
}
8990
});
9091
91-
const locale = navigator.language;
9292
const albumDateFormat: Intl.DateTimeFormatOptions = {
9393
month: 'short',
9494
day: 'numeric',
@@ -99,8 +99,8 @@
9999
const startDate = new Date(album.assets[0].fileCreatedAt);
100100
const endDate = new Date(album.assets[album.assetCount - 1].fileCreatedAt);
101101
102-
const startDateString = startDate.toLocaleDateString(locale, albumDateFormat);
103-
const endDateString = endDate.toLocaleDateString(locale, albumDateFormat);
102+
const startDateString = startDate.toLocaleDateString($locale, albumDateFormat);
103+
const endDateString = endDate.toLocaleDateString($locale, albumDateFormat);
104104
105105
// If the start and end date are the same, only show one date
106106
return startDateString === endDateString
@@ -380,7 +380,7 @@
380380
>
381381
<svelte:fragment slot="leading">
382382
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
383-
Selected {multiSelectAsset.size.toLocaleString(locale)}
383+
Selected {multiSelectAsset.size.toLocaleString($locale)}
384384
</p>
385385
</svelte:fragment>
386386
<svelte:fragment slot="trailing">

‎web/src/lib/components/album-page/asset-selection.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
assetsInAlbumStoreState,
1212
selectedAssets
1313
} from '$lib/stores/asset-interaction.store';
14+
import { locale } from '$lib/stores/preferences.store';
1415
1516
const dispatch = createEventDispatcher();
1617
1718
export let albumId: string;
1819
export let assetsInAlbum: AssetResponseDto[];
19-
const locale = navigator.language;
2020
2121
onMount(() => {
2222
$assetsInAlbumStoreState = assetsInAlbum;
@@ -51,7 +51,7 @@
5151
<p class="text-lg dark:text-immich-dark-fg">Add to album</p>
5252
{:else}
5353
<p class="text-lg dark:text-immich-dark-fg">
54-
{$selectedAssets.size.toLocaleString(locale)} selected
54+
{$selectedAssets.size.toLocaleString($locale)} selected
5555
</p>
5656
{/if}
5757
</svelte:fragment>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
2525
import { assetStore } from '$lib/stores/assets.store';
2626
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
27+
import { browser } from '$app/environment';
2728
2829
export let asset: AssetResponseDto;
2930
export let publicSharedKey = '';
@@ -54,7 +55,9 @@
5455
});
5556
5657
onDestroy(() => {
57-
document.removeEventListener('keydown', onKeyboardPress);
58+
if (browser) {
59+
document.removeEventListener('keydown', onKeyboardPress);
60+
}
5861
});
5962
6063
$: asset.id && getAllAlbums(); // Update the album information when the asset ID changes

0 commit comments

Comments
 (0)