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

feat(web): store accordion state in search params (#6435)

Browse source 
* keep admin settings accordion state in search params

* refactor: sync implementation

* fix: avoid mutating svelte's internal search params

* add query parameter to enum

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Daniel Dietzler 2024-02-11 00:25:02 +01:00 • committed by GitHub
parent 6e7865519a
commit a9e6657a37
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 132 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
View file

@ -235,6 +235,7 @@
/>
<SettingAccordion
key="hardware-acceleration"
title="Hardware Acceleration"
subtitle="Experimental; much faster, but will have lower quality at the same bitrate"
>
@ -296,7 +297,11 @@
</div>
</SettingAccordion>
<SettingAccordion title="Advanced" subtitle="Options most users should not need to change">
<SettingAccordion
key="advanced-options"
title="Advanced"
subtitle="Options most users should not need to change"
>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingInputField
inputType={SettingInputFieldType.NUMBER}

14
web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
View file

@ -26,7 +26,12 @@
<div>
<div in:fade={{ duration: 500 }}>
<SettingAccordion title="Library watching (EXPERIMENTAL)" subtitle="Automatically watch for changed files" isOpen>
<SettingAccordion
key="library-watching"
title="Library watching (EXPERIMENTAL)"
subtitle="Automatically watch for changed files"
isOpen
>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
@ -70,7 +75,12 @@
</form>
</SettingAccordion>
<SettingAccordion title="Periodic Scanning" subtitle="Configure periodic library scanning" isOpen>
<SettingAccordion
key="library-scanning"
title="Periodic Scanning"
subtitle="Configure periodic library scanning"
isOpen
>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch

12
web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
View file

@ -42,7 +42,11 @@
/>
</div>
<SettingAccordion title="Smart Search" subtitle="Search for images semantically using CLIP embeddings">
<SettingAccordion
key="smart-search"
title="Smart Search"
subtitle="Search for images semantically using CLIP embeddings"
>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title="ENABLED"
@ -69,7 +73,11 @@
</div>
</SettingAccordion>
<SettingAccordion title="Facial Recognition" subtitle="Detect, recognize and group faces in images">
<SettingAccordion
key="facial-recognition"
title="Facial Recognition"
subtitle="Detect, recognize and group faces in images"
>
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title="ENABLED"

4
web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
View file

@ -21,7 +21,7 @@
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="flex flex-col gap-4">
<SettingAccordion title="Map Settings" subtitle="Manage map settings">
<SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
<div class="ml-4 mt-4 flex flex-col gap-4">
<SettingSwitch
title="ENABLED"
@ -51,7 +51,7 @@
</div></SettingAccordion
>
<SettingAccordion title="Reverse Geocoding Settings">
<SettingAccordion key="reverse-geocoding" title="Reverse Geocoding Settings">
<svelte:fragment slot="subtitle">
<p class="text-sm dark:text-immich-dark-fg">
Manage <a

18
web/src/lib/components/admin-page/settings/setting-accordion.svelte
View file

@ -1,10 +1,24 @@
<script lang="ts">
import { page } from '$app/stores';
import { QueryParameter } from '$lib/constants';
import { hasParamValue, updateParamList } from '$lib/utils';
import { slide } from 'svelte/transition';
export let title: string;
export let subtitle = '';
export let key: string;
export let isOpen = false;
const toggle = () => (isOpen = !isOpen);
const syncFromUrl = () => (isOpen = hasParamValue(QueryParameter.IS_OPEN, key));
const syncToUrl = (isOpen: boolean) => updateParamList({ param: QueryParameter.IS_OPEN, value: key, add: isOpen });
isOpen ? syncToUrl(true) : syncFromUrl();
$: $page.url && syncFromUrl();
const toggle = () => {
isOpen = !isOpen;
syncToUrl(isOpen);
};
</script>
<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">

21
web/src/lib/components/user-settings-page/user-settings-list.svelte
View file

@ -27,32 +27,33 @@
}
</script>
<SettingAccordion title="Appearance" subtitle="Manage your Immich appearance">
<SettingAccordion key="appearance" title="Appearance" subtitle="Manage your Immich appearance">
<AppearanceSettings />
</SettingAccordion>
<SettingAccordion title="Account" subtitle="Manage your account">
<SettingAccordion key="account" title="Account" subtitle="Manage your account">
<UserProfileSettings user={$user} />
</SettingAccordion>
<SettingAccordion title="API Keys" subtitle="Manage your API keys">
<SettingAccordion key="api-keys" title="API Keys" subtitle="Manage your API keys">
<UserAPIKeyList bind:keys />
</SettingAccordion>
<SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
<SettingAccordion key="authorized-devices" title="Authorized Devices" subtitle="Manage your logged-in devices">
<DeviceList bind:devices />
</SettingAccordion>
<SettingAccordion title="Libraries" subtitle="Manage your asset libraries">
<SettingAccordion key="libraries" title="Libraries" subtitle="Manage your asset libraries">
<LibraryList />
</SettingAccordion>
<SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
<SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
<MemoriesSettings user={$user} />
</SettingAccordion>
{#if $featureFlags.loaded && $featureFlags.oauth}
<SettingAccordion
key="oauth"
title="OAuth"
subtitle="Manage your OAuth connection"
isOpen={oauthOpen ||
@ -62,18 +63,18 @@
</SettingAccordion>
{/if}
<SettingAccordion title="Password" subtitle="Change your password">
<SettingAccordion key="password" title="Password" subtitle="Change your password">
<ChangePasswordSettings />
</SettingAccordion>
<SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
<SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
<PartnerSettings user={$user} />
</SettingAccordion>
<SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">
<SettingAccordion key="sidebar" title="Sidebar" subtitle="Manage sidebar settings">
<SidebarSettings />
</SettingAccordion>
<SettingAccordion title="Trash" subtitle="Manage trash settings">
<SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
<TrashSettings />
</SettingAccordion>