helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: migrate to SvelteKit app state (#14807)

Browse source 
* chore: migrate to SvelteKit app state

* update package-lock.json
This commit is contained in:
Ben McCann 2024-12-20 15:18:22 -07:00 • committed by GitHub
parent a14735846c
commit da70a1e457
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 171 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/components/faces-page/merge-face-selector.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { page } from '$app/state';
import Icon from '$lib/components/elements/icon.svelte';
import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
@ -41,8 +41,8 @@
const handleSwapPeople = async () => {
[person, selectedPeople[0]] = [selectedPeople[0], person];
$page.url.searchParams.set(QueryParameter.ACTION, ActionQueryParameterValue.MERGE);
await goto(`${AppRoute.PEOPLE}/${person.id}?${$page.url.searchParams.toString()}`);
page.url.searchParams.set(QueryParameter.ACTION, ActionQueryParameterValue.MERGE);
await goto(`${AppRoute.PEOPLE}/${person.id}?${page.url.searchParams.toString()}`);
};
const onSelect = async (selected: PersonResponseDto) => {

6
web/src/lib/components/shared-components/drag-and-drop-upload-overlay.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/state';
import { shouldIgnoreEvent } from '$lib/actions/shortcut';
import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
import { fileUploadHandler } from '$lib/utils/file-uploader';
@ -8,8 +8,8 @@
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
let albumId = $derived(isAlbumsRoute($page.route?.id) ? $page.params.albumId : undefined);
let isShare = $derived(isSharedLinkRoute($page.route?.id));
let albumId = $derived(isAlbumsRoute(page.route?.id) ? page.params.albumId : undefined);
let isShare = $derived(isSharedLinkRoute(page.route?.id));
let dragStartTarget: EventTarget | null = $state(null);

4
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/state';
import { focusTrap } from '$lib/actions/focus-trap';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@ -90,7 +90,7 @@
size="sm"
shadow={false}
border
aria-current={$page.url.pathname.includes('/admin') ? 'page' : undefined}
aria-current={page.url.pathname.includes('/admin') ? 'page' : undefined}
>
<div class="flex place-content-center place-items-center text-center gap-2 px-2">
<Icon path={mdiWrench} size="18" ariaHidden />

4
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/state';
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
@ -96,7 +96,7 @@
/>
</div>
{#if !$page.url.pathname.includes('/admin') && showUploadButton}
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<LinkButton onclick={onUploadClick} class="hidden lg:block">
<div class="flex gap-2">
<Icon path={mdiTrayArrowUp} size="1.5em" />

6
web/src/lib/components/shared-components/settings/setting-accordion-state.svelte
View file

@ -8,13 +8,13 @@
<script lang="ts">
import { writable, type Writable } from 'svelte/store';
import { createContext } from '$lib/utils/context';
import { page } from '$app/stores';
import { page } from '$app/state';
import { handlePromiseError } from '$lib/utils';
import { goto } from '$app/navigation';
import type { Snippet } from 'svelte';
const getParamValues = (param: string) => {
return new Set(($page.url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
return new Set((page.url.searchParams.get(param) || '').split(' ').filter((x) => x !== ''));
};
interface Props {
@ -28,7 +28,7 @@
$effect(() => {
if (queryParam && $state) {
const searchParams = new URLSearchParams($page.url.searchParams);
const searchParams = new URLSearchParams(page.url.searchParams);
if ($state.size > 0) {
searchParams.set(queryParam, [...$state].join(' '));
} else {

4
web/src/lib/components/shared-components/side-bar/side-bar-link.svelte
View file

@ -2,7 +2,7 @@
import Icon from '$lib/components/elements/icon.svelte';
import { mdiChevronDown, mdiChevronLeft } from '@mdi/js';
import { resolveRoute } from '$app/paths';
import { page } from '$app/stores';
import { page } from '$app/state';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
@ -32,7 +32,7 @@
let routePath = $derived(resolveRoute(routeId, {}));
$effect(() => {
isSelected = ($page.route.id?.match(/^\/(admin|\(user\))\/[^/]*/) || [])[0] === routeId;
isSelected = (page.route.id?.match(/^\/(admin|\(user\))\/[^/]*/) || [])[0] === routeId;
});
</script>

6
web/src/routes/(user)/share/[key]/+error.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/state';
</script>
<svelte:head>
@ -8,7 +8,7 @@
<section class="flex flex-col px-4 h-screen w-screen place-content-center place-items-center">
<h1 class="py-10 text-4xl text-immich-primary dark:text-immich-dark-primary">Page not found :/</h1>
{#if $page.error?.message}
<h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{$page.error.message}</h2>
{#if page.error?.message}
<h2 class="text-xl text-immich-fg dark:text-immich-dark-fg">{page.error.message}</h2>
{/if}
</section>

4
web/src/routes/+error.svelte
View file

@ -1,6 +1,6 @@
<script>
import { page } from '$app/stores';
import { page } from '$app/state';
import Error from '$lib/components/error.svelte';
</script>
<Error error={$page.error}></Error>
<Error error={page.error}></Error>

34
web/src/routes/+layout.svelte
View file

@ -2,7 +2,7 @@
import { run } from 'svelte/legacy';
import { afterNavigate, beforeNavigate } from '$app/navigation';
import { page } from '$app/stores';
import { page } from '$app/state';
import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
import AppleHeader from '$lib/components/shared-components/apple-header.svelte';
import FullscreenContainer from '$lib/components/shared-components/fullscreen-container.svelte';
@ -52,7 +52,7 @@
};
const getMyImmichLink = () => {
return new URL($page.url.pathname + $page.url.search, 'https://my.immich.app');
return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
};
onMount(() => {
@ -66,8 +66,8 @@
document.removeEventListener('change', handleChangeTheme);
});
if (isSharedLinkRoute($page.route?.id)) {
setKey($page.params.key);
if (isSharedLinkRoute(page.route?.id)) {
setKey(page.params.key);
}
beforeNavigate(({ from, to }) => {
@ -95,33 +95,33 @@
</script>
<svelte:head>
<title>{$page.data.meta?.title || 'Web'} - Immich</title>
<title>{page.data.meta?.title || 'Web'} - Immich</title>
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<meta name="theme-color" content="currentColor" />
<AppleHeader />
{#if $page.data.meta}
<meta name="description" content={$page.data.meta.description} />
{#if page.data.meta}
<meta name="description" content={page.data.meta.description} />
<!-- Facebook Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content={$page.data.meta.title} />
<meta property="og:description" content={$page.data.meta.description} />
{#if $page.data.meta.imageUrl}
<meta property="og:title" content={page.data.meta.title} />
<meta property="og:description" content={page.data.meta.description} />
{#if page.data.meta.imageUrl}
<meta
property="og:image"
content={new URL($page.data.meta.imageUrl, $serverConfig.externalDomain || globalThis.location.origin).href}
content={new URL(page.data.meta.imageUrl, $serverConfig.externalDomain || globalThis.location.origin).href}
/>
{/if}
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={$page.data.meta.title} />
<meta name="twitter:description" content={$page.data.meta.description} />
{#if $page.data.meta.imageUrl}
<meta name="twitter:title" content={page.data.meta.title} />
<meta name="twitter:description" content={page.data.meta.description} />
{#if page.data.meta.imageUrl}
<meta
name="twitter:image"
content={new URL($page.data.meta.imageUrl, $serverConfig.externalDomain || globalThis.location.origin).href}
content={new URL(page.data.meta.imageUrl, $serverConfig.externalDomain || globalThis.location.origin).href}
/>
{/if}
{/if}
@ -142,8 +142,8 @@
}}
/>
{#if $page.data.error}
<Error error={$page.data.error}></Error>
{#if page.data.error}
<Error error={page.data.error}></Error>
{:else}
{@render children?.()}
{/if}