@@ -46,3 +83,24 @@
+
+{#if isOpen}
+
+
+
+{/if}
diff --git a/web/src/routes/admin/system-settings/+page.svelte b/web/src/routes/admin/system-settings/+page.svelte
index d03865cb39..e443c1b518 100644
--- a/web/src/routes/admin/system-settings/+page.svelte
+++ b/web/src/routes/admin/system-settings/+page.svelte
@@ -27,11 +27,33 @@
import { copyToClipboard } from '$lib/utils';
import { downloadBlob } from '$lib/utils/asset-utils';
import type { SystemConfigDto } from '@immich/sdk';
- import { mdiAlert, mdiContentCopy, mdiDownload, mdiUpload } from '@mdi/js';
+ import {
+ mdiAccountOutline,
+ mdiAlert,
+ mdiBellOutline,
+ mdiBookshelf,
+ mdiContentCopy,
+ mdiDatabaseOutline,
+ mdiDownload,
+ mdiFileDocumentOutline,
+ mdiFolderOutline,
+ mdiImageOutline,
+ mdiLockOutline,
+ mdiMapMarkerOutline,
+ mdiPaletteOutline,
+ mdiRobotOutline,
+ mdiServerOutline,
+ mdiSync,
+ mdiTrashCanOutline,
+ mdiUpdate,
+ mdiUpload,
+ mdiVideoOutline,
+ } from '@mdi/js';
import type { PageData } from './$types';
import { t } from 'svelte-i18n';
import type { ComponentType, SvelteComponent } from 'svelte';
import type { SettingsComponentProps } from '$lib/components/admin-page/settings/admin-settings';
+ import SearchBar from '$lib/components/elements/search-bar.svelte';
export let data: PageData;
@@ -68,104 +90,128 @@
title: string;
subtitle: string;
key: string;
+ icon: string;
}> = [
{
component: AuthSettings,
title: $t('admin.authentication_settings'),
subtitle: $t('admin.authentication_settings_description'),
- key: 'image',
+ key: 'authentication',
+ icon: mdiLockOutline,
},
{
component: ImageSettings,
title: $t('admin.image_settings'),
subtitle: $t('admin.image_settings_description'),
key: 'image',
+ icon: mdiImageOutline,
},
{
component: JobSettings,
title: $t('admin.job_settings'),
subtitle: $t('admin.job_settings_description'),
key: 'job',
+ icon: mdiSync,
},
{
component: MetadataSettings,
title: $t('admin.metadata_settings'),
subtitle: $t('admin.metadata_settings_description'),
key: 'metadata',
+ icon: mdiDatabaseOutline,
},
{
component: LibrarySettings,
title: $t('admin.library_settings'),
subtitle: $t('admin.library_settings_description'),
key: 'external-library',
+ icon: mdiBookshelf,
},
{
component: LoggingSettings,
title: $t('admin.logging_settings'),
subtitle: $t('admin.manage_log_settings'),
key: 'logging',
+ icon: mdiFileDocumentOutline,
},
{
component: MachineLearningSettings,
title: $t('admin.machine_learning_settings'),
subtitle: $t('admin.machine_learning_settings_description'),
key: 'machine-learning',
+ icon: mdiRobotOutline,
},
{
component: MapSettings,
title: $t('admin.map_gps_settings'),
subtitle: $t('admin.map_gps_settings_description'),
key: 'location',
+ icon: mdiMapMarkerOutline,
},
{
component: NotificationSettings,
title: $t('admin.notification_settings'),
subtitle: $t('admin.notification_settings_description'),
key: 'notifications',
+ icon: mdiBellOutline,
},
{
component: ServerSettings,
title: $t('admin.server_settings'),
subtitle: $t('admin.server_settings_description'),
key: 'server',
+ icon: mdiServerOutline,
},
{
component: StorageTemplateSettings,
title: $t('admin.storage_template_settings'),
subtitle: $t('admin.storage_template_settings_description'),
key: 'storage-template',
+ icon: mdiFolderOutline,
},
{
component: ThemeSettings,
title: $t('admin.theme_settings'),
subtitle: $t('admin.theme_settings_description'),
key: 'theme',
+ icon: mdiPaletteOutline,
},
{
component: TrashSettings,
title: $t('admin.trash_settings'),
subtitle: $t('admin.trash_settings_description'),
key: 'trash',
+ icon: mdiTrashCanOutline,
},
{
component: UserSettings,
title: $t('admin.user_settings'),
subtitle: $t('admin.user_settings_description'),
key: 'user-settings',
+ icon: mdiAccountOutline,
},
{
component: NewVersionCheckSettings,
title: $t('admin.version_check_settings'),
subtitle: $t('admin.version_check_settings_description'),
key: 'version-check',
+ icon: mdiUpdate,
},
{
component: FFmpegSettings,
title: $t('admin.transcoding_settings'),
subtitle: $t('admin.transcoding_settings_description'),
key: 'video-transcoding',
+ icon: mdiVideoOutline,
},
];
+
+ let searchQuery = '';
+
+ $: filteredSettings = settings.filter(({ title, subtitle }) => {
+ const query = searchQuery.toLowerCase();
+ return title.toLowerCase().includes(query) || subtitle.toLowerCase().includes(query);
+ });
@@ -182,6 +228,9 @@
+
+
+
copyToClipboard(JSON.stringify(config, null, 2))}>
@@ -206,10 +255,13 @@
-
+
+
+
+
- {#each settings as { component: Component, title, subtitle, key }}
-
+ {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
+
handleSave(config)}
onReset={(options) => handleReset(options)}