feat(web): support searching by EXIF rating (#16208)

* Add rating to search DTO

* Add search by EXIF rating in search query builder

* Generate OpenAPI spec

* Add rating filter on web

* Add rating filter to search docs

* Format / lint

* Hide rating filter if ratings are disabled

* chore: component order in form

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte

@@ -14,6 +14,7 @@
     date: SearchDateFilter;
     display: SearchDisplayFilters;
     mediaType: MediaType;
+    rating?: number;
   };
 </script>
 
@@ -26,6 +27,7 @@
   import SearchCameraSection, { type SearchCameraFilter } from './search-camera-section.svelte';
   import SearchDateSection from './search-date-section.svelte';
   import SearchMediaSection from './search-media-section.svelte';
+  import SearchRatingsSection from './search-ratings-section.svelte';
   import { parseUtcDate } from '$lib/utils/date-time';
   import SearchDisplaySection from './search-display-section.svelte';
   import SearchTextSection from './search-text-section.svelte';
@@ -34,6 +36,7 @@
   import { mdiTune } from '@mdi/js';
   import { generateId } from '$lib/utils/generate-id';
   import { SvelteSet } from 'svelte/reactivity';
+  import { preferences } from '$lib/stores/user.store';
 
   interface Props {
     searchQuery: MetadataSearchDto | SmartSearchDto;
@@ -81,6 +84,7 @@
         : searchQuery.type === AssetTypeEnum.Video
           ? MediaType.Video
           : MediaType.All,
+    rating: searchQuery.rating,
   });
 
   const resetForm = () => {
@@ -94,6 +98,7 @@
       date: {},
       display: {},
       mediaType: MediaType.All,
+      rating: undefined,
     };
   };
 
@@ -124,6 +129,7 @@
       personIds: filter.personIds.size > 0 ? [...filter.personIds] : undefined,
       tagIds: filter.tagIds.size > 0 ? [...filter.tagIds] : undefined,
       type,
+      rating: filter.rating,
     };
 
     onSearch(payload);
@@ -161,6 +167,11 @@
       <!-- DATE RANGE -->
       <SearchDateSection bind:filters={filter.date} />
 
+      <!-- RATING -->
+      {#if $preferences?.ratings.enabled}
+        <SearchRatingsSection bind:rating={filter.rating} />
+      {/if}
+
       <div class="grid md:grid-cols-2 gap-x-5 gap-y-10">
         <!-- MEDIA TYPE -->
         <SearchMediaSection bind:filteredMedia={filter.mediaType} />

web/src/lib/components/shared-components/search-bar/search-ratings-section.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+  import Combobox from '../combobox.svelte';
+
+  interface Props {
+    rating?: number;
+  }
+
+  let { rating = $bindable() }: Props = $props();
+
+  const options = [
+    { value: '0', label: $t('rating_count', { values: { count: 0 } }) },
+    { value: '1', label: $t('rating_count', { values: { count: 1 } }) },
+    { value: '2', label: $t('rating_count', { values: { count: 2 } }) },
+    { value: '3', label: $t('rating_count', { values: { count: 3 } }) },
+    { value: '4', label: $t('rating_count', { values: { count: 4 } }) },
+    { value: '5', label: $t('rating_count', { values: { count: 5 } }) },
+  ];
+</script>
+
+<div class="grid grid-auto-fit-40 gap-5">
+  <label class="immich-form-label" for="start-date">
+    <Combobox
+      label={$t('rating').toUpperCase()}
+      placeholder={$t('search_rating')}
+      {options}
+      selectedOption={rating === undefined ? undefined : options[rating]}
+      onSelect={(r) => (rating = r === undefined ? undefined : Number.parseInt(r.value))}
+    />
+  </label>
+</div>