Immich/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte

<script lang="ts">
  import { searchManager } from '$lib/managers/search-manager.svelte';
  import { searchStore } from '$lib/stores/search.svelte';
  import { Icon, IconButton, Text } from '@immich/ui';
  import { mdiClockOutline, mdiClose } from '@mdi/js';
  import { t } from 'svelte-i18n';

  interface Props {
    onSelectSearchTerm: (searchTerm: string) => void;
    onClearSearchTerm: (searchTerm: string) => void;
    onClearAllSearchTerms: () => void;
    onActiveSelectionChange: (selectedId: string | undefined) => void;
  }

  let { onSelectSearchTerm, onClearSearchTerm, onClearAllSearchTerms, onActiveSelectionChange }: Props = $props();

  let searchBoxText = $derived(searchManager.filter.query);
  let filteredSearchTerms = $derived(
    searchStore.savedSearchTerms.filter((term) => term.toLowerCase().includes(searchBoxText.toLowerCase())),
  );

  let isSearchSuggestions = $derived(filteredSearchTerms.length > 0);

  let showClearAll = $derived(searchBoxText === '');
  let suggestionCount = $derived(showClearAll ? filteredSearchTerms.length + 1 : filteredSearchTerms.length);

  let selectedIndex: number | undefined = $state(undefined);
  let element = $state<HTMLDivElement>();

  const rootId = $props.id();

  export function moveSelection(increment: 1 | -1) {
    if (!isSearchSuggestions) {
      return;
    }
    if (selectedIndex === undefined) {
      selectedIndex = increment === 1 ? 0 : suggestionCount - 1;
    } else if (selectedIndex + increment < 0 || selectedIndex + increment >= suggestionCount) {
      clearSelection();
    } else {
      selectedIndex = (selectedIndex + increment + suggestionCount) % suggestionCount;
    }
    onActiveSelectionChange(getId(selectedIndex));
  }

  export function clearSelection() {
    selectedIndex = undefined;
    onActiveSelectionChange(undefined);
  }

  export function selectActiveOption() {
    if (selectedIndex === undefined) {
      return;
    }
    const selectedElement = element?.querySelector(`#${getId(selectedIndex)}`) as HTMLElement;
    selectedElement?.click();
  }

  const handleClearAll = () => {
    clearSelection();
    onClearAllSearchTerms();
  };

  const handleClearSingle = (searchTerm: string) => {
    clearSelection();
    onClearSearchTerm(searchTerm);
  };

  const handleSelect = (searchTerm: string) => {
    clearSelection();
    onSelectSearchTerm(searchTerm);
  };

  const getId = (index: number | undefined) => {
    if (index === undefined) {
      return undefined;
    }
    return `${rootId}-entry-${index}`;
  };
</script>

<div id="history-section">
  {#if isSearchSuggestions}
    <div class="flex items-center justify-between px-5 pt-5">
      <Text aria-hidden={true} fontWeight="medium" class="pb-5">{$t('recent_searches')}</Text>
      {#if showClearAll}
        <button
          id={getId(0)}
          type="button"
          class="rounded-lg p-2 font-semibold text-primary hover:bg-immich-primary/25 aria-selected:bg-immich-primary/25"
          role="option"
          onclick={() => handleClearAll()}
          tabindex="-1"
          aria-selected={selectedIndex === 0}
          aria-label={$t('clear_all_recent_searches')}
        >
          {$t('clear_all')}
        </button>
      {/if}
    </div>

    {#each filteredSearchTerms as savedSearchTerm, i (i)}
      <div class="flex w-full items-center justify-between text-black dark:text-gray-300">
        <div class="relative w-full items-center">
          {const index = $derived(showClearAll ? i + 1 : i)}
          <!-- svelte-ignore a11y_click_events_have_key_events -->
          <div
            id={getId(index)}
            class="relative flex w-full cursor-pointer gap-3 py-3 ps-5 hover:bg-gray-100 aria-selected:bg-gray-100 dark:hover:bg-gray-500/30 dark:aria-selected:bg-gray-500/30"
            onclick={() => handleSelect(savedSearchTerm)}
            role="option"
            tabindex="-1"
            aria-selected={selectedIndex === index}
            aria-label={savedSearchTerm}
          >
            <Icon icon={mdiClockOutline} size="1.5em" aria-hidden />
            {savedSearchTerm}
          </div>
          <div aria-hidden={true} class="absolute inset-e-5 top-0 items-center justify-center py-1">
            <IconButton
              shape="round"
              color="secondary"
              variant="ghost"
              icon={mdiClose}
              aria-label={$t('remove')}
              size="medium"
              tabindex={-1}
              onclick={() => handleClearSingle(savedSearchTerm)}
            />
          </div>
        </div>
      </div>
    {/each}
  {/if}
</div>