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">