Improve layout and fix toggle

immich-app · Dec 21, 2024 · ccdde67 · ccdde67
1 parent 6affe87
commit ccdde67
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -121,10 +121,17 @@
       <CircleIconButton icon={mdiClose} title={$t('cancel_search')} onclick={() => (searchFaces = false)} />
     {/if}
   </div>
-  <div class="flex w-full justify-center">
-    <SettingSwitch bind:checked={sortFaces} onToggle={loadPeople} title={$t('sort_people_by_similarity')} />
-  </div>
   <div class="px-4 py-4 text-sm">
+    <div class="flex w-full justify-center">
+      <SettingSwitch
+        bind:checked={sortFaces}
+        onToggle={async (checked) => {
+          sortFaces = checked;
+          await loadPeople();
+        }}
+        title={$t('sort_people_by_similarity')}
+      />
+    </div>
     <h2 class="mb-8 mt-4 uppercase">{$t('all_people')}</h2>
     {#if isShowLoadingPeople}
       <div class="flex w-full justify-center">

diff --git a/web/src/lib/components/faces-page/people-list.svelte b/web/src/lib/components/faces-page/people-list.svelte
@@ -6,12 +6,12 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   interface Props {
-    sortFaces: boolean;
+    sortFaces?: boolean;
     screenHeight: number;
     people: PersonResponseDto[];
     peopleToNotShow: PersonResponseDto[];
     onSelect: (person: PersonResponseDto) => void;
-    handleSearch: () => void;
+    handleSearch?: () => void;
   }
 
   let { sortFaces = $bindable(true), screenHeight, people, peopleToNotShow, onSelect, handleSearch }: Props = $props();
@@ -30,12 +30,18 @@
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
   <SearchPeople type="searchBar" placeholder={$t('search_people')} bind:searchName={name} bind:searchedPeopleLocal />
 </div>
-
-<div class=" w-40 sm:w-48 md:w-96 mb-8">
-  <SettingSwitch onToggle={handleSearch} bind:checked={sortFaces} title={$t('sort_people_by_similarity')}
-  ></SettingSwitch>
-</div>
-
+{#if handleSearch}
+  <div class=" w-40 sm:w-48 md:w-96 mb-8">
+    <SettingSwitch
+      onToggle={(checked) => {
+        sortFaces = checked;
+        handleSearch();
+      }}
+      bind:checked={sortFaces}
+      title={$t('sort_people_by_similarity')}
+    ></SettingSwitch>
+  </div>
+{/if}
 <div
   class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
   style:max-height={screenHeight - 400 + 'px'}