feat: tag display, search improvements, tag tooltips (#146)

* chore: extract component: TagDisplay

* chore: replace ambiguous tag-button with Filter button, more translation keys

* fix: size of Filter... button

* feat: tag description fancy tooltips, show tag description when adding tags to a mod

src/lib/components/mods/ModGrid.svelte

@@ -10,6 +10,7 @@
   import { browser } from '$app/environment';
   import { getTranslate } from '@tolgee/svelte';
   import { type PaginationSettings, Paginator } from '@skeletonlabs/skeleton';
+  import TagDisplay from '../utils/TagDisplay.svelte';
 
   export let colCount: 4 | 5 = 4;
   export let newMod = false;
@@ -121,10 +122,11 @@
         <div>
           <button
             type="button"
-            class="text-md variant-filled-surface btn btn-sm"
+            class="text-md variant-filled-surface btn btn-sm p-2 pl-4 pr-4"
             class:variant-ghost-primary={tagsOpen}
+            title={$t('filter.expand-button-tooltip')}
             on:click={() => (tagsOpen = !tagsOpen)}>
-            <span class="text-orange-500">#</span>tags
+            <span>{$t('filter.expand-button-text')}</span>
           </button>
         </div>
         <div>
@@ -146,7 +148,7 @@
             bind:value={searchField}
             class="border-0 bg-transparent p-1.5 ring-0"
             name="search"
-            placeholder="Search" />
+            placeholder={$t('search.placeholder-text')} />
           <button class="material-icons variant-filled-primary">arrow_forward</button>
         </div>
       </div>
@@ -160,9 +162,7 @@
                 class="chip hover:variant-filled-surface [&:not(:hover)]:variant-soft"
                 class:selected={selectedTags.indexOf(tag.id) >= 0}
                 on:click={() => toggleTag(tag.id)}>
-                <div class="lowercase text-neutral-300">
-                  <span class="text-orange-500">#</span>{tag.name}
-                </div>
+                <TagDisplay {tag} popupTriggerEvent="hover" />
               </button>
             {/each}
           {/if}

src/lib/components/utils/TagDisplay.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { type Tag } from '$lib/generated';
+  import { popup, type PopupSettings } from '@skeletonlabs/skeleton';
+  export let tag: Tag;
+  export let popupTriggerEvent: PopupSettings['event'] | null = 'click';
+
+  $: popupHover = {
+    event: popupTriggerEvent,
+    target: `popupHoverFor${tag.name}`,
+    placement: 'bottom-start'
+  } satisfies PopupSettings;
+</script>
+
+<div
+  class="lowercase text-neutral-300 [&>*]:pointer-events-none"
+  use:popup={popupHover}
+  title="Click for tag information">
+  <span class="text-orange-500">#</span>{tag.name}
+</div>
+
+<!-- Must use high z-index to ensure it draws on top of things like striped compatibility overlays in mod cards -->
+<!-- https://floating-ui.com/docs/misc#z-index-stacking -->
+<div class="card variant-filled-surface p-4" data-popup={`popupHoverFor${tag.name}`} style="z-index: 1000">
+  <p>TODO Tag information will appear here.</p>
+  <br />
+  <p>Use Mod Tags to filter your searches and quickly find similar mods.</p>
+  <div class="variant-filled-surface arrow" />
+</div>

src/lib/components/utils/TagList.svelte

@@ -4,6 +4,7 @@
   import { queryStore, getContextClient } from '@urql/svelte';
   import { Autocomplete, type AutocompleteOption, InputChip, type PopupSettings, popup } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
+  import TagDisplay from './TagDisplay.svelte';
 
   const client = getContextClient();
 
@@ -17,10 +18,11 @@
 
   export let tags: Tag[] = [];
   export let editable = false;
+  export let popupTriggerEvent: PopupSettings['event'] = 'click';
 
   $: allTags =
     $getAllTags.data?.getTags?.map((t) => ({
-      label: t.name,
+      label: `${t.name} - ${'TODO: Tag description this will become a very long string sometimes yes long string'}`,
       value: t.id
     })) || ([] satisfies AutocompleteOption[]);
 
@@ -31,7 +33,7 @@
   };
 
   let tagList = [];
-  const loadTagList = () => (tagList = tags.map((t) => t.name));
+  const loadTagList = () => (tagList = tags.map((t: Tag) => t.name));
 
   onMount(loadTagList);
 
@@ -63,9 +65,7 @@
     {#if tags.length > 0}
       <div class="text-md flex flex-row flex-wrap gap-1">
         {#each tags as tag}
-          <div class="lowercase text-neutral-300">
-            <span class="text-orange-500">#</span>{tag.name}
-          </div>
+          <TagDisplay {tag} {popupTriggerEvent} />
         {/each}
       </div>
     {/if}
@@ -81,7 +81,7 @@
         chips="variant-filled-primary" />
     </div>
 
-    <div class="card max-h-48 w-full max-w-sm overflow-y-auto p-4" tabindex="-1" data-popup="popupAutocomplete">
+    <div class="card max-h-48 w-max max-w-full overflow-y-auto p-4" tabindex="-1" data-popup="popupAutocomplete">
       <Autocomplete
         bind:input={inputTag}
         options={allTags.filter((t) => tagList.indexOf(t.label) < 0)}