diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte index f24a9cad65..c4f9f9ea2b 100644 --- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte +++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte @@ -235,6 +235,7 @@ /> @@ -296,7 +297,11 @@ - +
- +
- +
- +
- +
- +
- +

Manage + 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); + };

diff --git a/web/src/lib/components/user-settings-page/user-settings-list.svelte b/web/src/lib/components/user-settings-page/user-settings-list.svelte index e00cac83b5..60a5871775 100644 --- a/web/src/lib/components/user-settings-page/user-settings-list.svelte +++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte @@ -27,32 +27,33 @@ } - + - + - + - + - + - + {#if $featureFlags.loaded && $featureFlags.oauth} {/if} - + - + - + - + diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts index a1ac68c216..295bd99433 100644 --- a/web/src/lib/constants.ts +++ b/web/src/lib/constants.ts @@ -63,14 +63,15 @@ export const dateFormats = { export enum QueryParameter { ACTION = 'action', ASSET_INDEX = 'assetIndex', - SMART_SEARCH = 'smartSearch', + IS_OPEN = 'isOpen', MEMORY_INDEX = 'memoryIndex', ONBOARDING_STEP = 'step', OPEN_SETTING = 'openSetting', - QUERY = 'query', PREVIOUS_ROUTE = 'previousRoute', + QUERY = 'query', SEARCHED_PEOPLE = 'searchedPeople', SEARCH_TERM = 'q', + SMART_SEARCH = 'smartSearch', } export enum OpenSettingQueryParameterValue { diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts new file mode 100644 index 0000000000..059b526508 --- /dev/null +++ b/web/src/lib/utils.ts @@ -0,0 +1,33 @@ +import { goto } from '$app/navigation'; +import { page } from '$app/stores'; +import { get } from 'svelte/store'; + +interface UpdateParamAction { + param: string; + value: string; + add: boolean; +} + +const getParamValues = (param: string) => + new Set((get(page).url.searchParams.get(param) || '').split(' ').filter((x) => x !== '')); + +export const hasParamValue = (param: string, value: string) => getParamValues(param).has(value); + +export const updateParamList = async ({ param, value, add }: UpdateParamAction) => { + const values = getParamValues(param); + + if (add) { + values.add(value); + } else { + values.delete(value); + } + + const searchParams = new URLSearchParams(get(page).url.searchParams); + searchParams.set(param, [...values.values()].join(' ')); + + if (values.size === 0) { + searchParams.delete(param); + } + + await goto(`?${searchParams.toString()}`, { replaceState: true, noScroll: true, keepFocus: true }); +}; diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte index a52f797ccb..8bf63d58c6 100644 --- a/web/src/routes/admin/system-settings/+page.svelte +++ b/web/src/routes/admin/system-settings/+page.svelte @@ -1,5 +1,4 @@ @@ -157,8 +176,8 @@
- {#each settings as { item, title, subtitle, isOpen }} - + {#each settings as { item, title, subtitle, key }} + handleSave(detail)}