feat(web): people sidebar link (#4257)

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -9,13 +9,14 @@
   import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
   import Magnify from 'svelte-material-icons/Magnify.svelte';
   import Map from 'svelte-material-icons/Map.svelte';
+  import Account from 'svelte-material-icons/Account.svelte';
   import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
   import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
   import { AppRoute } from '../../../constants';
   import LoadingSpinner from '../loading-spinner.svelte';
   import StatusBox from '../status-box.svelte';
   import SideBarButton from './side-bar-button.svelte';
-  import { locale } from '$lib/stores/preferences.store';
+  import { locale, sidebarSettings } from '$lib/stores/preferences.store';
   import SideBarSection from './side-bar-section.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
 
@@ -67,6 +68,11 @@
       <SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
     </a>
   {/if}
+  {#if $sidebarSettings.people}
+    <a data-sveltekit-preload-data="hover" href={AppRoute.PEOPLE} draggable="false">
+      <SideBarButton title="People" logo={Account} isSelected={$page.route.id === '/(user)/people'} />
+    </a>
+  {/if}
   <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
     <SideBarButton
       title="Sharing"

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { sidebarSettings } from '../../stores/preferences.store';
+  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ml-4">
+        <SettingSwitch title="People" subtitle="Display a link to People" bind:checked={$sidebarSettings.people} />
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -6,12 +6,13 @@
   import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
+  import LibraryList from './library-list.svelte';
   import MemoriesSettings from './memories-settings.svelte';
   import OAuthSettings from './oauth-settings.svelte';
   import PartnerSettings from './partner-settings.svelte';
+  import SidebarSettings from './sidebar-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
-  import LibraryList from './library-list.svelte';
 
   export let user: UserResponseDto;
 
@@ -62,3 +63,7 @@
 <SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
   <PartnerSettings {user} bind:partners />
 </SettingAccordion>
+
+<SettingAccordion title="Sidebar" subtitle="Manage sidebar settings">
+  <SidebarSettings />
+</SettingAccordion>

web/src/lib/stores/preferences.store.ts

@@ -44,6 +44,14 @@ export interface AlbumViewSettings {
   view: string;
 }
 
+export interface SidebarSettings {
+  people: boolean;
+}
+
+export const sidebarSettings = persisted<SidebarSettings>('sidebar-settings', {
+  people: false,
+});
+
 export enum AlbumViewMode {
   Cover = 'Cover',
   List = 'List',