- remove if-tags from around search-albums-section

- Add translation to remove filter button tooltip

i18n/en.json

@@ -1487,6 +1487,7 @@
   "refreshing_metadata": "Refreshing metadata",
   "regenerating_thumbnails": "Regenerating thumbnails",
   "remove": "Remove",
+  "remove_album": "Remove album",
   "remove_assets_album_confirmation": "Are you sure you want to remove {count, plural, one {# asset} other {# assets}} from the album?",
   "remove_assets_shared_link_confirmation": "Are you sure you want to remove {count, plural, one {# asset} other {# assets}} from this shared link?",
   "remove_assets_title": "Remove assets?",

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
   import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
-  import { preferences } from '$lib/stores/user.store';
   import { getAssetThumbnailUrl } from '$lib/utils';
   import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
   import { mdiClose } from '@mdi/js';
@@ -15,12 +14,13 @@
 
   let { selectedAlbums = $bindable() }: Props = $props();
 
-
   let allAlbums: AlbumResponseDto[] = $state([]);
   let albumMap = $derived(Object.fromEntries(allAlbums.map((album) => [album.id, album])));
   let selectedOption = $state(undefined);
 
-  let sortedSelectedAlbums = $derived(Array.from(selectedAlbums).sort((a, b) => albumMap[b]?.albumName?.length - albumMap[a]?.albumName?.length));
+  let sortedSelectedAlbums = $derived(
+    Array.from(selectedAlbums).sort((a, b) => albumMap[b]?.albumName?.length - albumMap[a]?.albumName?.length),
+  );
 
   onMount(async () => {
     allAlbums = await getAllAlbums({});
@@ -36,60 +36,57 @@
     selectedOption = undefined;
   };
 
-  const handleRemove = (tag: string) => {
+  const handleRemove = (album: string) => {
-    selectedAlbums.delete(tag);
+    selectedAlbums.delete(album);
   };
 </script>
 
-{#if $preferences?.tags?.enabled}
+<div id="location-selection">
-  <div id="location-selection">
+  <form autocomplete="off" id="create-album-form">
-    <form autocomplete="off" id="create-album-form">
+    <div class="my-4 flex flex-col gap-2">
-      <div class="my-4 flex flex-col gap-2">
+      <Combobox
-        <Combobox
+        onSelect={handleSelect}
-          onSelect={handleSelect}
+        hasThumbnails
-          hasThumbnails
+        label={$t('albums').toUpperCase()}
-          label={$t('albums').toUpperCase()}
+        defaultFirstOption
-          defaultFirstOption
+        options={allAlbums.map((album) => ({
-          options={allAlbums.map((album) => ({
+          id: album.id,
-            id: album.id,
+          label: album.albumName,
-            label: album.albumName,
+          value: album.id,
-            value: album.id,
+          thumbnail: album.albumThumbnailAssetId ? getAssetThumbnailUrl(album.albumThumbnailAssetId) : undefined,
-            thumbnail: album.albumThumbnailAssetId ? getAssetThumbnailUrl(album.albumThumbnailAssetId) : undefined,
+        }))}
-          }))}
+        bind:selectedOption
-          bind:selectedOption
+        placeholder={$t('search_albums')}
-          placeholder={$t('search_albums')}
+      />
-        />
+    </div>
-      </div>
+  </form>
-    </form>
 
-    <section class="flex flex-wrap pt-2 gap-1">
+  <section class="flex flex-wrap pt-2 gap-1">
-      {#each sortedSelectedAlbums as albumId (albumId)}
+    {#each sortedSelectedAlbums as albumId (albumId)}
-        {@const album = albumMap[albumId]}
+      {@const album = albumMap[albumId]}
-        {#if album}
+      {#if album}
-          <div class="album-chip-container flex group transition-all">
+        <div class="album-chip-container flex group transition-all">
-            <span
+          <span
-              class="album-chip inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+            class="album-chip inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-            >
+          >
-              <p class="text-sm album-chip">
+            <p class="text-sm album-chip">
-                {album.albumName}
+              {album.albumName}
-              </p>
+            </p>
-            </span>
+          </span>
-
-            <button
-              type="button"
-              class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
-              title="Remove tag"
-              onclick={() => handleRemove(albumId)}
-            >
-              <Icon path={mdiClose} />
-            </button>
-          </div>
-        {/if}
-      {/each}
-    </section>
-  </div>
-{/if}
 
+          <button
+            type="button"
+            class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+            title={$t('remove_album')}
+            onclick={() => handleRemove(albumId)}
+          >
+            <Icon path={mdiClose} />
+          </button>
+        </div>
+      {/if}
+    {/each}
+  </section>
+</div>
 
 <style>
   .album-chip-container {