mirror of
https://github.com/immich-app/immich.git
synced 2025-12-20 09:15:35 +03:00
a02e1f5e7c
* remove import and referenced file * first pass at replacing all CircleIconButtons * fix linting issues * fix combobox formatting issues * fix button context menu coloring * remove circle icon button from search history box * use theme switcher from UI lib * dark mode force the asset viewer icons * fix forced dark mode icons * dark mode memory viewer icons * fix: back button in memory viewer --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
59 lines
1.9 KiB
Svelte
59 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
|
|
import { type PersonResponseDto } from '@immich/sdk';
|
|
import { t } from 'svelte-i18n';
|
|
import FaceThumbnail from './face-thumbnail.svelte';
|
|
import { mdiSwapVertical } from '@mdi/js';
|
|
import { IconButton } from '@immich/ui';
|
|
|
|
interface Props {
|
|
screenHeight: number;
|
|
people: PersonResponseDto[];
|
|
peopleToNotShow: PersonResponseDto[];
|
|
onSelect: (person: PersonResponseDto) => void;
|
|
handleSearch?: (sortFaces: boolean) => void;
|
|
}
|
|
|
|
let { screenHeight, people, peopleToNotShow, onSelect, handleSearch }: Props = $props();
|
|
let searchedPeopleLocal: PersonResponseDto[] = $state([]);
|
|
let sortBySimilarirty = $state(false);
|
|
let name = $state('');
|
|
|
|
const showPeople = $derived(
|
|
(name ? searchedPeopleLocal : people).filter(
|
|
(person) => !peopleToNotShow.some((unselectedPerson) => unselectedPerson.id === person.id),
|
|
),
|
|
);
|
|
</script>
|
|
|
|
<div class="w-40 sm:w-48 md:w-full h-14 flex gap-4 place-items-center">
|
|
<div class="md:w-96">
|
|
<SearchPeople type="searchBar" placeholder={$t('search_people')} bind:searchName={name} bind:searchedPeopleLocal />
|
|
</div>
|
|
|
|
{#if handleSearch}
|
|
<IconButton
|
|
shape="round"
|
|
color="secondary"
|
|
variant="ghost"
|
|
icon={mdiSwapVertical}
|
|
onclick={() => {
|
|
sortBySimilarirty = !sortBySimilarirty;
|
|
handleSearch(sortBySimilarirty);
|
|
}}
|
|
aria-label={$t('sort_people_by_similarity')}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<div
|
|
class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray mt-6"
|
|
style:max-height={screenHeight - 400 + 'px'}
|
|
>
|
|
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
|
|
{#each showPeople as person (person.id)}
|
|
<FaceThumbnail {person} onClick={() => onSelect(person)} circle border selectable />
|
|
{/each}
|
|
</div>
|
|
</div>
|