Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-02-04 01:09:14 -05:00
Code Issues Activity

refactor: ui icon buttons (#15531)

Browse source
This commit is contained in:
Jason Rasmussen 2025-01-22 16:44:59 -05:00 • committed by GitHub
parent 1f19a65d1a
commit 78464a4ba3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 163 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/package-lock.json generated
View file

@ -11,7 +11,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.14.1",
"@immich/ui": "^0.15.0",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",
@ -1343,9 +1343,9 @@
"link": true
},
"node_modules/@immich/ui": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.14.1.tgz",
"integrity": "sha512-s5HGT35Odu6PrjO49xJ1Kpe7v1K53iMV03tv6MePVIdIM9sZHA04+o0tJgMm2KqLPZrkU+jhKPSfSy0PqkoEyQ==",
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.15.0.tgz",
"integrity": "sha512-vGDNEOGj5Ma/BAIgj31M1roAVoEOVWws5lkgt1xPlIxSHk4pMhGRFMQaJaCsfXeX/nTRsQCd3gOk7Yo0XNrVfg==",
"license": "GNU Affero General Public License version 3",
"dependencies": {
"@mdi/js": "^7.4.47",

2
web/package.json
View file

@ -67,7 +67,7 @@
"dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.14.1",
"@immich/ui": "^0.15.0",
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5",

36
web/src/lib/components/album-page/albums-controls.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import Dropdown from '$lib/components/elements/dropdown.svelte';
import GroupTab from '$lib/components/elements/group-tab.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import {
AlbumFilter,
@ -129,8 +128,13 @@
</div>
<!-- Create Album -->
<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlusBoxOutline} />
<Button
leadingIcon={mdiPlusBoxOutline}
onclick={() => createAlbumAndRedirect()}
size="small"
variant="ghost"
color="secondary"
>
<p class="hidden md:block">{$t('create_album')}</p>
</Button>
@ -190,12 +194,24 @@
{/if}
<!-- Cover/List Display Toggle -->
<Button onclick={() => handleChangeListMode()} size="small" variant="ghost" color="secondary">
{#if $albumViewSettings.view === AlbumViewMode.List}
<Icon path={mdiViewGridOutline} />
{#if $albumViewSettings.view === AlbumViewMode.List}
<Button
leadingIcon={mdiViewGridOutline}
onclick={() => handleChangeListMode()}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('covers')}</Text>
{:else}
<Icon path={mdiFormatListBulletedSquare} size="18" />
</Button>
{:else}
<Button
leadingIcon={mdiFormatListBulletedSquare}
onclick={() => handleChangeListMode()}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('list')}</Text>
{/if}
</Button>
</Button>
{/if}

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

@ -3,7 +3,6 @@
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
@ -99,11 +98,13 @@
</div>
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<Button onclick={onUploadClick} class="hidden lg:block" variant="ghost" color="secondary">
<div class="flex gap-2">
<Icon path={mdiTrayArrowUp} size="1.5em" />
<span>{$t('upload')}</span>
</div>
<Button
leadingIcon={mdiTrayArrowUp}
onclick={onUploadClick}
class="hidden lg:flex"
variant="ghost"
color="secondary"
>{$t('upload')}
</Button>
<CircleIconButton
onclick={onUploadClick}

13
web/src/routes/(user)/people/+page.svelte
View file

@ -30,7 +30,7 @@
updatePerson,
type PersonResponseDto,
} from '@immich/sdk';
import { Button, Text } from '@immich/ui';
import { Button } from '@immich/ui';
import { mdiAccountOff, mdiEyeOutline } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -392,10 +392,13 @@
/>
</div>
</div>
<Button onclick={() => (selectHidden = !selectHidden)} size="small" variant="ghost" color="secondary">
<Icon path={mdiEyeOutline} />
<Text>{$t('show_and_hide_people')}</Text>
</Button>
<Button
leadingIcon={mdiEyeOutline}
onclick={() => (selectHidden = !selectHidden)}
size="small"
variant="ghost"
color="secondary">{$t('show_and_hide_people')}</Button
>
</div>
{/if}
{/snippet}

20
web/src/routes/(user)/sharing/+page.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import empty2Url from '$lib/assets/empty-2.svg';
import Albums from '$lib/components/album-page/albums-list.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
@ -15,7 +14,7 @@
type AlbumViewSettings,
} from '$lib/stores/preferences.store';
import { createAlbumAndRedirect } from '$lib/utils/album-utils';
import { Button, HStack } from '@immich/ui';
import { Button, HStack, Text } from '@immich/ui';
import { mdiLink, mdiPlusBoxOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@ -40,14 +39,17 @@
<UserPageLayout title={data.meta.title}>
{#snippet buttons()}
<HStack gap={0}>
<Button onclick={() => createAlbumAndRedirect()} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlusBoxOutline} class="shrink-0" />
<span class="leading-none max-sm:text-xs">{$t('create_album')}</span>
<Button
leadingIcon={mdiPlusBoxOutline}
onclick={() => createAlbumAndRedirect()}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('create_album')}</Text>
</Button>
<Button href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
<Icon path={mdiLink} class="shrink-0" />
<span class="leading-none max-sm:text-xs">{$t('shared_links')}</span>
<Button leadingIcon={mdiLink} href={AppRoute.SHARED_LINKS} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('shared_links')}</Text>
</Button>
</HStack>
{/snippet}

12
web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -2,7 +2,6 @@
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@ -169,18 +168,15 @@
{#snippet buttons()}
<HStack>
<Button onclick={handleCreate} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlus} />
<p class="hidden md:block">{$t('create_tag')}</p>
<Button leadingIcon={mdiPlus} onclick={handleCreate} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('create_tag')}</Text>
</Button>
{#if pathSegments.length > 0 && tag}
<Button onclick={handleEdit} size="small" variant="ghost" color="secondary">
<Icon path={mdiPencil} size="18" />
<Button leadingIcon={mdiPencil} onclick={handleEdit} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('edit_tag')}</Text>
</Button>
<Button onclick={handleDelete} size="small" variant="ghost" color="secondary">
<Icon path={mdiTrashCanOutline} />
<Button leadingIcon={mdiTrashCanOutline} onclick={handleDelete} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('delete_tag')}</Text>
</Button>
{/if}

11
web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import empty3Url from '$lib/assets/empty-3.svg';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
@ -21,7 +20,7 @@
import { handlePromiseError } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { emptyTrash, restoreTrash } from '@immich/sdk';
import { Button, HStack } from '@immich/ui';
import { Button, HStack, Text } from '@immich/ui';
import { mdiDeleteForeverOutline, mdiHistory } from '@mdi/js';
import { onDestroy } from 'svelte';
import { t } from 'svelte-i18n';
@ -115,24 +114,24 @@
{#snippet buttons()}
<HStack gap={0}>
<Button
leadingIcon={mdiHistory}
onclick={handleRestoreTrash}
disabled={assetInteraction.selectionActive}
variant="ghost"
color="secondary"
size="small"
>
<Icon path={mdiHistory} />
{$t('restore_all')}
<Text class="hidden md:block">{$t('restore_all')}</Text>
</Button>
<Button
leadingIcon={mdiDeleteForeverOutline}
onclick={() => handleEmptyTrash()}
disabled={assetInteraction.selectionActive}
variant="ghost"
color="secondary"
size="small"
>
<Icon path={mdiDeleteForeverOutline} />
{$t('empty_trash')}
<Text class="hidden md:block">{$t('empty_trash')}</Text>
</Button>
</HStack>
{/snippet}

19
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import DuplicatesModal from '$lib/components/shared-components/duplicates-modal.svelte';
@ -17,7 +16,7 @@
import { handleError } from '$lib/utils/handle-error';
import type { AssetResponseDto } from '@immich/sdk';
import { deleteAssets, updateAssets } from '@immich/sdk';
import { Button, HStack, IconButton } from '@immich/ui';
import { Button, HStack, IconButton, Text } from '@immich/ui';
import { mdiCheckOutline, mdiInformationOutline, mdiKeyboard, mdiTrashCanOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@ -164,18 +163,24 @@
{#snippet buttons()}
<HStack gap={0}>
<Button
leadingIcon={mdiTrashCanOutline}
onclick={() => handleDeduplicateAll()}
disabled={!hasDuplicates}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiTrashCanOutline} />
{$t('deduplicate_all')}
<Text class="hidden md:block">{$t('deduplicate_all')}</Text>
</Button>
<Button onclick={() => handleKeepAll()} disabled={!hasDuplicates} size="small" variant="ghost" color="secondary">
<Icon path={mdiCheckOutline} />
{$t('keep_all')}
<Button
leadingIcon={mdiCheckOutline}
onclick={() => handleKeepAll()}
disabled={!hasDuplicates}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('keep_all')}</Text>
</Button>
<IconButton
shape="round"

19
web/src/routes/admin/jobs-status/+page.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
@ -12,7 +11,7 @@
import { asyncTimeout } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { createJob, getAllJobsStatus, ManualJobName, type AllJobStatusResponseDto } from '@immich/sdk';
import { Button, HStack } from '@immich/ui';
import { Button, HStack, Text } from '@immich/ui';
import { mdiCog, mdiPlus } from '@mdi/js';
import { onDestroy, onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -72,13 +71,17 @@
<UserPageLayout title={data.meta.title} admin>
{#snippet buttons()}
<HStack gap={0}>
<Button onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
<Icon path={mdiPlus} size="18" />
{$t('admin.create_job')}
<Button leadingIcon={mdiPlus} onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('admin.create_job')}</Text>
</Button>
<Button href="{AppRoute.ADMIN_SETTINGS}?isOpen=job" size="small" variant="ghost" color="secondary">
<Icon path={mdiCog} size="18" />
{$t('admin.manage_concurrency')}
<Button
leadingIcon={mdiCog}
href="{AppRoute.ADMIN_SETTINGS}?isOpen=job"
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
</Button>
</HStack>
{/snippet}

22
web/src/routes/admin/library-management/+page.svelte
View file

@ -29,7 +29,7 @@
type LibraryStatsResponseDto,
type UserResponseDto,
} from '@immich/sdk';
import { Button } from '@immich/ui';
import { Button, Text } from '@immich/ui';
import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -220,18 +220,18 @@
{#snippet buttons()}
<div class="flex justify-end gap-2">
{#if libraries.length > 0}
<Button onclick={handleScanAll} size="small" variant="ghost" color="secondary">
<div class="flex gap-1 text-sm">
<Icon path={mdiSync} size="18" />
<span>{$t('scan_all_libraries')}</span>
</div>
<Button leadingIcon={mdiSync} onclick={handleScanAll} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('scan_all_libraries')}</Text>
</Button>
{/if}
<Button onclick={() => (toCreateLibrary = true)} size="small" variant="ghost" color="secondary">
<div class="flex gap-1 text-sm">
<Icon path={mdiPlusBoxOutline} size="18" />
<span>{$t('create_library')}</span>
</div>
<Button
leadingIcon={mdiPlusBoxOutline}
onclick={() => (toCreateLibrary = true)}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('create_library')}</Text>
</Button>
</div>
{/snippet}

20
web/src/routes/admin/repair/+page.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import empty4Url from '$lib/assets/empty-4.svg';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import {
@ -14,7 +13,7 @@
import { downloadBlob } from '$lib/utils/asset-utils';
import { handleError } from '$lib/utils/handle-error';
import { fixAuditFiles, getAuditFiles, getFileChecksums, type FileReportItemDto } from '@immich/sdk';
import { Button, HStack } from '@immich/ui';
import { Button, HStack, Text } from '@immich/ui';
import { mdiCheckAll, mdiContentCopy, mdiDownload, mdiRefresh, mdiWrench } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { PageData } from './$types';
@ -187,38 +186,37 @@
{#snippet buttons()}
<HStack gap={0}>
<Button
leadingIcon={mdiWrench}
onclick={() => handleRepair()}
disabled={matches.length === 0 || repairing}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiWrench} />
{$t('admin.repair_all')}
<Text class="hidden md:block">{$t('admin.repair_all')}</Text>
</Button>
<Button
leadingIcon={mdiCheckAll}
onclick={() => handleCheckAll()}
disabled={extras.length === 0 || checking}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiCheckAll} />
{$t('admin.check_all')}
<Text class="hidden md:block">{$t('admin.check_all')}</Text>
</Button>
<Button
leadingIcon={mdiDownload}
onclick={() => handleDownload()}
disabled={extras.length + orphans.length === 0}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiDownload} />
{$t('export')}
<Text class="hidden md:block">{$t('export')}</Text>
</Button>
<Button onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
<Icon path={mdiRefresh} />
{$t('refresh')}
<Button leadingIcon={mdiRefresh} onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('refresh')}</Text>
</Button>
</HStack>
{/snippet}

114
web/src/routes/admin/system-settings/+page.svelte
View file

@ -17,8 +17,7 @@
import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
import { Button, HStack } from '@immich/ui';
import Icon from '$lib/components/elements/icon.svelte';
import { Button, Text, HStack, Alert } from '@immich/ui';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@ -29,7 +28,6 @@
import { downloadBlob } from '$lib/utils/asset-utils';
import {
mdiAccountOutline,
mdiAlert,
mdiBackupRestore,
mdiBellOutline,
mdiBookshelf,
@ -243,68 +241,64 @@
<input bind:this={inputElement} type="file" accept=".json" style="display: none" onchange={uploadConfig} />
<div class="h-svh flex flex-col overflow-hidden">
{#if $featureFlags.configFile}
<div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
<Icon path={mdiAlert} class="text-yellow-400" size={18} />
<h2 class="text-md text-immich-primary dark:text-immich-dark-primary">
{$t('admin.config_set_by_file')}
</h2>
</div>
{/if}
<UserPageLayout title={data.meta.title} admin>
{#snippet buttons()}
<HStack gap={1}>
<div class="hidden lg:block">
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
</div>
<UserPageLayout title={data.meta.title} admin>
{#snippet buttons()}
<HStack gap={1}>
<div class="hidden lg:block">
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
</div>
<Button
leadingIcon={mdiContentCopy}
onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
size="small"
variant="ghost"
color="secondary"
>
<Text class="hidden md:block">{$t('copy_to_clipboard')}</Text>
</Button>
<Button leadingIcon={mdiDownload} onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
<Text class="hidden md:block">{$t('export_as_json')}</Text>
</Button>
{#if !$featureFlags.configFile}
<Button
onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
leadingIcon={mdiUpload}
onclick={() => inputElement?.click()}
size="small"
variant="ghost"
color="secondary"
>
<Icon path={mdiContentCopy} />
{$t('copy_to_clipboard')}
<Text class="hidden md:block">{$t('import_from_json')}</Text>
</Button>
<Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
<Icon path={mdiDownload} />
{$t('export_as_json')}
</Button>
{#if !$featureFlags.configFile}
<Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
<Icon path={mdiUpload} />
{$t('import_from_json')}
</Button>
{/if}
</HStack>
{/snippet}
{/if}
</HStack>
{/snippet}
<AdminSettings bind:config bind:this={adminSettingElement}>
{#snippet children({ savedConfig, defaultConfig })}
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
<div class="block lg:hidden">
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
</div>
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
{#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
<SettingAccordion {title} {subtitle} {key} {icon}>
<Component
onSave={(config) => adminSettingElement?.handleSave(config)}
onReset={(options) => adminSettingElement?.handleReset(options)}
disabled={$featureFlags.configFile}
bind:config
{defaultConfig}
{savedConfig}
/>
</SettingAccordion>
{/each}
</SettingAccordionState>
</section>
<AdminSettings bind:config bind:this={adminSettingElement}>
{#snippet children({ savedConfig, defaultConfig })}
<section id="setting-content" class="flex place-content-center sm:mx-4">
<section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
{#if $featureFlags.configFile}
<Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
{/if}
<div class="block lg:hidden">
<SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
</div>
<SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
{#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
<SettingAccordion {title} {subtitle} {key} {icon}>
<Component
onSave={(config) => adminSettingElement?.handleSave(config)}
onReset={(options) => adminSettingElement?.handleReset(options)}
disabled={$featureFlags.configFile}
bind:config
{defaultConfig}
{savedConfig}
/>
</SettingAccordion>
{/each}
</SettingAccordionState>
</section>
{/snippet}
</AdminSettings>
</UserPageLayout>
</div>
</section>
{/snippet}
</AdminSettings>
</UserPageLayout>