feat(web,server): search people (#5703)

* feat: search peoples

* fix: responsive design

* use existing count

* generate sql file

* fix: tests

* remove visible people

* fix: merge, hide...

* use component

* fix: linter

* chore: regenerate api

* fix: change name when searching for a face

* save search

* remove duplicate

* use enums for query parameters

* fix: increase to 20 for the local search

* use constants

* simplify

* fix: number of people more visible

* fix: merge

* fix: search

* fix: loading spinner position

* pr feedback

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -13,6 +13,7 @@
   import SettingSwitch from '../setting-switch.svelte';
   import SupportedDatetimePanel from './supported-datetime-panel.svelte';
   import SupportedVariablesPanel from './supported-variables-panel.svelte';
+  import { AppRoute } from '$lib/constants';
 
   export let savedConfig: SystemConfigDto;
   export let defaultConfig: SystemConfigDto;
@@ -185,7 +186,7 @@
                   <p>
                     Template changes will only apply to new assets. To retroactively apply the template to previously
                     uploaded assets, run the
-                    <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
+                    <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"
                       >Storage Migration Job</a
                     >.
                   </p>
@@ -193,7 +194,7 @@
                     The template variable <span class="font-mono">{`{{album}}`}</span> will always be empty for new
                     assets, so manually running the
 
-                    <a href="/admin/jobs-status" class="text-immich-primary dark:text-immich-dark-primary"
+                    <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"
                       >Storage Migration Job</a
                     >
                     is required in order to successfully use the variable.

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -19,6 +19,7 @@
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import { getAssetType } from '$lib/utils/asset-utils';
   import * as luxon from 'luxon';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { autoGrowHeight } from '$lib/utils/autogrow';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
@@ -132,7 +133,7 @@
     if (!message) {
       return;
     }
-    const timeout = setTimeout(() => (isSendingMessage = true), 100);
+    const timeout = setTimeout(() => (isSendingMessage = true), timeBeforeShowLoadingSpinner);
     try {
       const { data } = await api.activityApi.createActivity({
         activityCreateDto: { albumId, assetId, type: ReactionType.Comment, comment: message },

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -27,7 +27,7 @@
   import Map from '../shared-components/map/map.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { websocketStore } from '$lib/stores/websocket';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import ChangeLocation from '../shared-components/change-location.svelte';
   import { handleError } from '../../utils/handle-error';
   import { user } from '$lib/stores/user.store';
@@ -274,7 +274,7 @@
               on:mouseleave={() => ($boundingBoxesArray = [])}
             >
               <a
-                href="{AppRoute.PEOPLE}/{person.id}?previousRoute={albumId
+                href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={albumId
                   ? `${AppRoute.ALBUMS}/${albumId}`
                   : AppRoute.PHOTOS}"
                 on:click={() => dispatch('closeViewer')}

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -10,6 +10,7 @@
   import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
   import { handleError } from '$lib/utils/handle-error';
   import { photoViewer } from '$lib/stores/assets.store';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -90,7 +91,7 @@
   };
 
   const handleCreatePerson = async () => {
-    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingNewPerson = true), timeBeforeShowLoadingSpinner);
     const personToUpdate = peopleWithFaces.find((person) => person.id === peopleWithFaces[editedPersonIndex].id);
 
     const newFeaturePhoto = personToUpdate ? await zoomImageToBase64(personToUpdate) : null;
@@ -103,10 +104,10 @@
   };
 
   const searchPeople = async () => {
-    if ((searchedPeople.length < 20 && searchName.startsWith(searchWord)) || searchName === '') {
+    if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
       return;
     }
-    const timeout = setTimeout(() => (isShowLoadingSearch = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
     try {
       const { data } = await api.searchApi.searchPerson({ name: searchName });
       searchedPeople = data;
@@ -122,7 +123,7 @@
   };
 
   $: {
-    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 10);
+    searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
   }
 
   const initInput = (element: HTMLInputElement) => {

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -11,7 +11,7 @@
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
+  import { ActionQueryParameterValue, AppRoute, QueryParameter } from '$lib/constants';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -45,7 +45,7 @@
 
   const handleSwapPeople = () => {
     [person, selectedPeople[0]] = [selectedPeople[0], person];
-    $page.url.searchParams.set('action', 'merge');
+    $page.url.searchParams.set(QueryParameter.ACTION, ActionQueryParameterValue.MERGE);
     goto(`${AppRoute.PEOPLE}/${person.id}?${$page.url.searchParams.toString()}`);
   };
 

web/src/lib/components/faces-page/people-card.svelte

@@ -7,7 +7,7 @@
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import Portal from '../shared-components/portal/portal.svelte';
   import { createEventDispatcher } from 'svelte';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import { mdiDotsVertical } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
 
@@ -45,7 +45,7 @@
   on:mouseleave={() => (showVerticalDots = false)}
   role="group"
 >
-  <a href="{AppRoute.PEOPLE}/{person.id}?previousRoute={AppRoute.PEOPLE}" draggable="false">
+  <a href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={AppRoute.PEOPLE}" draggable="false">
     <div class="w-full h-full rounded-xl brightness-95 filter">
       <ImageThumbnail
         shadow

web/src/lib/components/faces-page/people-list.svelte

@@ -2,11 +2,10 @@
   import { api, type PersonResponseDto } from '@api';
   import FaceThumbnail from './face-thumbnail.svelte';
   import { createEventDispatcher } from 'svelte';
-  import Icon from '../elements/icon.svelte';
-  import { mdiClose, mdiMagnify } from '@mdi/js';
   import { handleError } from '$lib/utils/handle-error';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { searchNameLocal } from '$lib/utils/person';
+  import SearchBar from './search-bar.svelte';
+  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
@@ -21,17 +20,12 @@
     select: PersonResponseDto;
   }>();
 
-  const resetSearch = () => {
-    name = '';
-    people = peopleCopy;
-  };
-
   $: {
     people = peopleCopy.filter(
       (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
     );
     if (name) {
-      people = searchNameLocal(name, people, 10);
+      people = searchNameLocal(name, people, maximumLengthSearchPeople);
     }
   }
 
@@ -41,12 +35,12 @@
       return;
     }
     if (!force) {
-      if (people.length < 20 && name.startsWith(searchWord)) {
+      if (people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
         return;
       }
     }
 
-    const timeout = setTimeout(() => (isSearchingPeople = true), 100);
+    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
     try {
       const { data } = await api.searchApi.searchPerson({ name });
       people = data;
@@ -61,31 +55,15 @@
   };
 </script>
 
-<div class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center">
-  <button on:click={() => searchPeople(true)}>
-    <div class="w-fit">
-      <Icon path={mdiMagnify} size="24" />
-    </div>
-  </button>
-  <!-- svelte-ignore a11y-autofocus -->
-  <input
-    autofocus
-    class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
-    type="text"
-    placeholder="Search names"
-    bind:value={name}
-    on:input={() => searchPeople(false)}
+<div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
+  <SearchBar
+    bind:name
+    {isSearchingPeople}
+    on:reset={() => {
+      people = peopleCopy;
+    }}
+    on:search={({ detail }) => searchPeople(detail.force ?? false)}
   />
-  {#if name}
-    <button on:click={resetSearch}>
-      <Icon path={mdiClose} />
-    </button>
-  {/if}
-  {#if isSearchingPeople}
-    <div class="flex place-items-center">
-      <LoadingSpinner />
-    </div>
-  {/if}
 </div>
 
 <div

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -13,6 +13,7 @@
   import { websocketStore } from '$lib/stores/websocket';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
 
   export let assetId: string;
   export let assetType: AssetTypeEnum;
@@ -65,7 +66,7 @@
   }
 
   onMount(async () => {
-    const timeout = setTimeout(() => (isShowLoadingPeople = true), 100);
+    const timeout = setTimeout(() => (isShowLoadingPeople = true), timeBeforeShowLoadingSpinner);
     try {
       const { data } = await api.personApi.getAllPeople({ withHidden: true });
       allPeople = data.people;
@@ -99,7 +100,7 @@
   };
 
   const handleEditFaces = async () => {
-    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), 100);
+    loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), timeBeforeShowLoadingSpinner);
     const numberOfChanges =
       selectedPersonToCreate.filter((person) => person !== null).length +
       selectedPersonToReassign.filter((person) => person !== null).length;

web/src/lib/components/faces-page/search-bar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { mdiClose, mdiMagnify } from '@mdi/js';
+  import Icon from '../elements/icon.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import type { SearchOptions } from '$lib/utils/dipatch';
+  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+
+  export let name: string;
+  export let isSearchingPeople: boolean;
+
+  const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
+
+  const resetSearch = () => {
+    name = '';
+    dispatch('reset');
+  };
+</script>
+
+<div class="flex items-center text-sm rounded-lg bg-gray-100 p-2 dark:bg-gray-700 gap-2 place-items-center h-full">
+  <button on:click={() => dispatch('search', { force: true })}>
+    <div class="w-fit">
+      <Icon path={mdiMagnify} size="24" />
+    </div>
+  </button>
+  <!-- svelte-ignore a11y-autofocus -->
+  <input
+    autofocus
+    class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
+    type="text"
+    placeholder="Search names"
+    bind:value={name}
+    on:input={() => dispatch('search', { force: false })}
+  />
+  {#if isSearchingPeople}
+    <div class="flex place-items-center">
+      <LoadingSpinner />
+    </div>
+  {/if}
+  {#if name}
+    <button on:click={resetSearch}>
+      <Icon path={mdiClose} />
+    </button>
+  {/if}
+</div>

web/src/lib/components/faces-page/show-hide.svelte

@@ -24,7 +24,7 @@
   class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
 >
   <div
-    class="sticky top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
+    class="fixed top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
   >
     <div class="flex items-center">
       <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
@@ -47,7 +47,7 @@
     </div>
   </div>
 
-  <div class="flex w-full flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 md:pt-4">
+  <div class="flex w-full flex-wrap gap-1 bg-immich-bg p-2 pb-8 dark:bg-immich-dark-bg md:px-8 mt-16">
     <slot />
   </div>
 </section>

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -12,6 +12,7 @@
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import PeopleList from './people-list.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
 
   export let assetIds: string[];
   export let personAssets: PersonResponseDto;
@@ -63,7 +64,7 @@
   };
 
   const handleCreate = async () => {
-    const timeout = setTimeout(() => (showLoadingSpinnerCreate = true), 100);
+    const timeout = setTimeout(() => (showLoadingSpinnerCreate = true), timeBeforeShowLoadingSpinner);
 
     try {
       disableButtons = true;
@@ -88,7 +89,7 @@
   };
 
   const handleReassign = async () => {
-    const timeout = setTimeout(() => (showLoadingSpinnerReassign = true), 100);
+    const timeout = setTimeout(() => (showLoadingSpinnerReassign = true), timeBeforeShowLoadingSpinner);
     try {
       disableButtons = true;
       if (selectedPerson) {

web/src/lib/components/layouts/user-page-layout.svelte

@@ -7,6 +7,7 @@
   export let hideNavbar = false;
   export let showUploadButton = false;
   export let title: string | undefined = undefined;
+  export let description: string | undefined = undefined;
   export let scrollbar = true;
   export let admin = false;
 
@@ -37,7 +38,12 @@
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
-        <p class="font-medium">{title}</p>
+        <div class="flex gap-2 items-center">
+          <div class="font-medium">{title}</div>
+          {#if description}
+            <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
+          {/if}
+        </div>
         <slot name="buttons" />
       </div>
     {/if}

web/src/lib/components/memory-page/memory-viewer.svelte

@@ -6,7 +6,7 @@
   import { goto } from '$app/navigation';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import { fromLocalDateTime } from '$lib/utils/timeline-util';
-  import { AppRoute } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import { page } from '$app/stores';
   import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
@@ -18,8 +18,8 @@
 
   const parseIndex = (s: string | null, max: number | null) => Math.max(Math.min(parseInt(s ?? '') || 0, max ?? 0), 0);
 
-  $: memoryIndex = parseIndex($page.url.searchParams.get('memory'), $memoryStore?.length - 1);
-  $: assetIndex = parseIndex($page.url.searchParams.get('asset'), currentMemory?.assets.length - 1);
+  $: memoryIndex = parseIndex($page.url.searchParams.get(QueryParameter.MEMORY_INDEX), $memoryStore?.length - 1);
+  $: assetIndex = parseIndex($page.url.searchParams.get(QueryParameter.ASSET_INDEX), currentMemory?.assets.length - 1);
 
   $: previousMemory = $memoryStore?.[memoryIndex - 1];
   $: currentMemory = $memoryStore?.[memoryIndex];
@@ -32,11 +32,13 @@
   $: canGoForward = !!(nextMemory || nextAsset);
   $: canGoBack = !!(previousMemory || previousAsset);
 
-  const toNextMemory = () => goto(`?memory=${memoryIndex + 1}`);
-  const toPreviousMemory = () => goto(`?memory=${memoryIndex - 1}`);
+  const toNextMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex + 1}`);
+  const toPreviousMemory = () => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex - 1}`);
 
-  const toNextAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex + 1}`);
-  const toPreviousAsset = () => goto(`?memory=${memoryIndex}&asset=${assetIndex - 1}`);
+  const toNextAsset = () =>
+    goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${assetIndex + 1}`);
+  const toPreviousAsset = () =>
+    goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${assetIndex - 1}`);
 
   const toNext = () => (nextAsset ? toNextAsset() : toNextMemory());
   const toPrevious = () => (previousAsset ? toPreviousAsset() : toPreviousMemory());
@@ -113,7 +115,10 @@
           <CircleIconButton icon={paused ? mdiPlay : mdiPause} forceDark on:click={() => (paused = !paused)} />
 
           {#each currentMemory.assets as _, i}
-            <button class="relative w-full py-2" on:click={() => goto(`?memory=${memoryIndex}&asset=${i}`)}>
+            <button
+              class="relative w-full py-2"
+              on:click={() => goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${i}`)}
+            >
               <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
               {#await resetPromise}
                 <span class="absolute left-0 h-[2px] bg-white" style:width={`${i < assetIndex ? 100 : 0}%`} />

web/src/lib/components/photos-page/memory-lane.svelte

@@ -6,6 +6,7 @@
   import { goto } from '$app/navigation';
   import { fade } from 'svelte/transition';
   import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+  import { AppRoute, QueryParameter } from '$lib/constants';
 
   $: shouldRender = $memoryStore?.length > 0;
 
@@ -71,7 +72,7 @@
       {#each $memoryStore as memory, i (memory.title)}
         <button
           class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
-          on:click={() => goto(`/memory?memory=${i}`)}
+          on:click={() => goto(`${AppRoute.MEMORY}?${QueryParameter.MEMORY_INDEX}=${i}`)}
         >
           <img
             class="h-full w-full rounded-xl object-cover"

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -8,6 +8,7 @@
   import { goto } from '$app/navigation';
   import { mdiCircleEditOutline, mdiContentCopy, mdiDelete, mdiOpenInNew } from '@mdi/js';
   import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
+  import { AppRoute } from '$lib/constants';
 
   export let link: SharedLinkResponseDto;
 
@@ -120,8 +121,8 @@
             <div
               class="hover:cursor-pointer"
               title="Go to share page"
-              on:click={() => goto(`/share/${link.key}`)}
-              on:keydown={() => goto(`/share/${link.key}`)}
+              on:click={() => goto(`${AppRoute.SHARE}/${link.key}`)}
+              on:keydown={() => goto(`${AppRoute.SHARE}/${link.key}`)}
             >
               <Icon path={mdiOpenInNew} />
             </div>

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

@@ -14,6 +14,7 @@
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
   import { user } from '$lib/stores/user.store';
+  import { OpenSettingQueryParameterValue, QueryParameter } from '$lib/constants';
   import AppearanceSettings from './appearance-settings.svelte';
   import TrashSettings from './trash-settings.svelte';
 
@@ -54,7 +55,8 @@
   <SettingAccordion
     title="OAuth"
     subtitle="Manage your OAuth connection"
-    isOpen={oauthOpen || $page.url.searchParams.get('open') === 'oauth'}
+    isOpen={oauthOpen ||
+      $page.url.searchParams.get(QueryParameter.OPEN_SETTING) === OpenSettingQueryParameterValue.OAUTH}
   >
     <OAuthSettings user={$user} />
   </SettingAccordion>

web/src/lib/constants.ts

@@ -24,6 +24,7 @@ export enum AppRoute {
   PLACES = '/places',
   PHOTOS = '/photos',
   EXPLORE = '/explore',
+  SHARE = '/share',
   SHARING = '/sharing',
   SHARED_LINKS = '/sharing/sharedlinks',
   SEARCH = '/search',
@@ -59,6 +60,32 @@ export const dateFormats = {
   },
 };
 
+export enum QueryParameter {
+  ACTION = 'action',
+  ASSET_INDEX = 'assetIndex',
+  CLIP = 'clip',
+  MEMORY_INDEX = 'memoryIndex',
+  ONBOARDING_STEP = 'step',
+  OPEN_SETTING = 'openSetting',
+  QUERY = 'query',
+  PREVIOUS_ROUTE = 'previousRoute',
+  SEARCHED_PEOPLE = 'searchedPeople',
+  SEARCH_TERM = 'q',
+}
+
+export enum OpenSettingQueryParameterValue {
+  OAUTH = 'oauth',
+  JOB = 'job',
+  STORAGE_TEMPLATE = 'storageTemplate',
+}
+
+export enum ActionQueryParameterValue {
+  MERGE = 'merge',
+}
+
+export const maximumLengthSearchPeople: number = 20;
+
+export const timeBeforeShowLoadingSpinner: number = 100;
 // should be the same values as the ones in the app.html
 export enum Theme {
   LIGHT = 'light',

web/src/lib/utils/dipatch.ts

@@ -1,3 +1,7 @@
 export interface ResetOptions {
   default?: boolean;
 }
+
+export interface SearchOptions {
+  force?: boolean;
+}