feat(web): improve UI/UX for settings pages (#12626)

* fix(web): local date time for buckets

* feat(web): improve UI/UX for setting pages

* search admin settings and icon

* clean up

* fix translation file

* Update web/src/routes/admin/system-settings/+page.svelte

Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>

* Update web/src/lib/components/shared-components/settings/setting-accordion.svelte

Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>

* better search bar on smaller screen

* lint

* template syntax

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Ben <45583362+ben-basten@users.noreply.github.com>

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -71,7 +71,7 @@
 <div>
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ml-4 mt-4 flex flex-col">
         <SettingAccordion
           key="oauth"
           title={$t('admin.oauth_settings')}

web/src/lib/components/shared-components/settings/setting-accordion.svelte

@@ -2,6 +2,7 @@
   import { slide } from 'svelte/transition';
   import { getAccordionState } from './setting-accordion-state.svelte';
   import { onDestroy } from 'svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
 
   const accordionState = getAccordionState();
 
@@ -10,6 +11,7 @@
   export let key: string;
   export let isOpen = $accordionState.has(key);
   export let autoScrollTo = false;
+  export let icon = '';
 
   let accordionElement: HTMLDivElement;
 
@@ -38,7 +40,12 @@
   });
 </script>
 
-<div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700" bind:this={accordionElement}>
+<div
+  class="border rounded-2xl my-4 px-6 py-4 transition-all {isOpen
+    ? 'border-immich-primary/40 dark:border-immich-dark-primary/50 shadow-md'
+    : 'dark:border-gray-800'}"
+  bind:this={accordionElement}
+>
   <button
     type="button"
     aria-expanded={isOpen}
@@ -46,12 +53,17 @@
     class="flex w-full place-items-center justify-between text-left"
   >
     <div>
-      <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
-        {title}
-      </h2>
+      <div class="flex gap-2 place-items-center">
+        {#if icon}
+          <Icon path={icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" ariaHidden />
+        {/if}
+        <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
+          {title}
+        </h2>
+      </div>
 
       <slot name="subtitle">
-        <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+        <p class="text-sm dark:text-immich-dark-fg mt-1">{subtitle}</p>
       </slot>
     </div>
 

web/src/lib/components/user-settings-page/feature-settings.svelte

@@ -55,7 +55,7 @@
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ml-4 mt-4 flex flex-col">
         <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
           <div class="ml-4 mt-6">
             <SettingSwitch title={$t('enable')} bind:checked={foldersEnabled} />

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

@@ -19,6 +19,19 @@
   import DownloadSettings from '$lib/components/user-settings-page/download-settings.svelte';
   import UserPurchaseSettings from '$lib/components/user-settings-page/user-purchase-settings.svelte';
   import FeatureSettings from '$lib/components/user-settings-page/feature-settings.svelte';
+  import {
+    mdiAccountGroupOutline,
+    mdiAccountOutline,
+    mdiApi,
+    mdiBellOutline,
+    mdiCogOutline,
+    mdiDevices,
+    mdiDownload,
+    mdiFeatureSearchOutline,
+    mdiKeyOutline,
+    mdiOnepassword,
+    mdiTwoFactorAuthentication,
+  } from '@mdi/js';
 
   export let keys: ApiKeyResponseDto[] = [];
   export let sessions: SessionResponseDto[] = [];
@@ -29,23 +42,34 @@
 </script>
 
 <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-  <SettingAccordion key="app-settings" title={$t('app_settings')} subtitle={$t('manage_the_app_settings')}>
+  <SettingAccordion
+    icon={mdiCogOutline}
+    key="app-settings"
+    title={$t('app_settings')}
+    subtitle={$t('manage_the_app_settings')}
+  >
     <AppSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="account" title={$t('account')} subtitle={$t('manage_your_account')}>
+  <SettingAccordion icon={mdiAccountOutline} key="account" title={$t('account')} subtitle={$t('manage_your_account')}>
     <UserProfileSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="api-keys" title={$t('api_keys')} subtitle={$t('manage_your_api_keys')}>
+  <SettingAccordion icon={mdiApi} key="api-keys" title={$t('api_keys')} subtitle={$t('manage_your_api_keys')}>
     <UserAPIKeyList bind:keys />
   </SettingAccordion>
 
-  <SettingAccordion key="authorized-devices" title={$t('authorized_devices')} subtitle={$t('manage_your_devices')}>
+  <SettingAccordion
+    icon={mdiDevices}
+    key="authorized-devices"
+    title={$t('authorized_devices')}
+    subtitle={$t('manage_your_devices')}
+  >
     <DeviceList bind:devices={sessions} />
   </SettingAccordion>
 
   <SettingAccordion
+    icon={mdiDownload}
     key="download-settings"
     title={$t('download_settings')}
     subtitle={$t('download_settings_description')}
@@ -53,16 +77,27 @@
     <DownloadSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="feature" title={$t('features')} subtitle={$t('features_setting_description')}>
+  <SettingAccordion
+    icon={mdiFeatureSearchOutline}
+    key="feature"
+    title={$t('features')}
+    subtitle={$t('features_setting_description')}
+  >
     <FeatureSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="notifications" title={$t('notifications')} subtitle={$t('notifications_setting_description')}>
+  <SettingAccordion
+    icon={mdiBellOutline}
+    key="notifications"
+    title={$t('notifications')}
+    subtitle={$t('notifications_setting_description')}
+  >
     <NotificationsSettings />
   </SettingAccordion>
 
   {#if $featureFlags.loaded && $featureFlags.oauth}
     <SettingAccordion
+      icon={mdiTwoFactorAuthentication}
       key="oauth"
       title={$t('oauth')}
       subtitle={$t('manage_your_oauth_connection')}
@@ -72,15 +107,21 @@
     </SettingAccordion>
   {/if}
 
-  <SettingAccordion key="password" title={$t('password')} subtitle={$t('change_your_password')}>
+  <SettingAccordion icon={mdiOnepassword} key="password" title={$t('password')} subtitle={$t('change_your_password')}>
     <ChangePasswordSettings />
   </SettingAccordion>
 
-  <SettingAccordion key="partner-sharing" title={$t('partner_sharing')} subtitle={$t('manage_sharing_with_partners')}>
+  <SettingAccordion
+    icon={mdiAccountGroupOutline}
+    key="partner-sharing"
+    title={$t('partner_sharing')}
+    subtitle={$t('manage_sharing_with_partners')}
+  >
     <PartnerSettings user={$user} />
   </SettingAccordion>
 
   <SettingAccordion
+    icon={mdiKeyOutline}
     key="user-purchase-settings"
     title={$t('user_purchase_settings')}
     subtitle={$t('user_purchase_settings_description')}