From f4382304df6e4a81308df4935ed65e5b977eb66a Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Thu, 19 Mar 2026 20:37:12 -0400
Subject: [PATCH] feat(frontend): add genre display UI and enhance link
 component

- Anime.svelte: Add genre display section with clickable badges that link
  to AniList search results for each genre. Genres are now displayed above
  the existing tags section with consistent styling.

- WebsiteLink.svelte: Enhance component to support custom URLs via the `url`
  export parameter. Previously, the component only generated URLs based on
  service prefixes (a-, m-, s-). Now it accepts a direct URL parameter for
  flexible linking to AniList searches and other external resources.

These changes provide users with an improved browsing experience by making
genres interactive and easily searchable.
---
 frontend/src/helperComponents/Anime.svelte    | 32 +++++++++++---
 .../src/helperComponents/WebsiteLink.svelte   | 44 ++++++++++---------
 2 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
index db98563..d9b5ddb 100644
--- a/frontend/src/helperComponents/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -6,7 +6,12 @@
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import {userStore} from "../helperFunctions/userStore"
     import { push } from "svelte-spa-router";
+<<<<<<< HEAD
     import type { AniListGetSingleAnime } from "../types/AniListCurrentUserWatchListType";
+=======
+    import WebsiteLink from "./WebsiteLink.svelte";
+    import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
+>>>>>>> a222c6b (feat(frontend): add genre display UI and enhance link component)
     import Rating from "./Rating.svelte";
     import {
         convertAniListDateToString,
@@ -38,7 +43,7 @@
     } from "../../wailsjs/go/main/App";
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import Datepicker from "./Datepicker.svelte";
-    import {Badge, Tooltip} from "flowbite-svelte";
+    import { Badge, Tooltip } from "flowbite-svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let currentAniListAnime: AniListGetSingleAnime;
@@ -817,15 +822,32 @@
 
     <div class="flex m-5">
         <div>
+            <h3 class="text-2xl">Genres</h3>
+            {#each currentAniListAnime.data.MediaList.media.genres as genre}
+                <div>
+                    <Badge large border color="blue" class="m-1 w-52">
+                        <div>
+                            <WebsiteLink
+                                id={genre}
+                                url="https://anilist.co/search/anime/{genre}"
+                            />
+                        </div>
+                    </Badge>
+                    <Tooltip>{genre}</Tooltip>
+                </div>
+            {/each}
             <h3 class="text-2xl">Tags</h3>
             <div class="mt-2">
                 {#each currentAniListAnime.data.MediaList.media.tags as tag}
                     <div>
                         <Badge large border color="blue" class="m-1 w-52">
-                                <div>
-                                    {tag.name} -
-                                    <span class="text-xs">{tag.rank}%</span>
-                                </div>
+                            <div>
+                                <WebsiteLink
+                                    id={tag.name}
+                                    url="https://anilist.co/search/anime/?genres={tag.name}"
+                                />
+                                <span class="text-xs">({tag.rank}%)</span>
+                            </div>
                         </Badge>
                         <Tooltip>{tag.description}</Tooltip>
                     </div>
diff --git a/frontend/src/helperComponents/WebsiteLink.svelte b/frontend/src/helperComponents/WebsiteLink.svelte
index 4d21d50..0ceb3f8 100644
--- a/frontend/src/helperComponents/WebsiteLink.svelte
+++ b/frontend/src/helperComponents/WebsiteLink.svelte
@@ -1,28 +1,32 @@
 <script lang="ts">
-  import {BrowserOpenURL} from "../../wailsjs/runtime"
+    import { BrowserOpenURL } from "../../wailsjs/runtime";
 
-  export let id: string
-  let url = ""
-  let isAniList = false
-  let isMAL = false
-  let isSimkl = false
-  let newId = id
-  let re = /[ams]?-?(.*)/
-  if (id !== undefined && id.length > 0) {
-    isAniList = id.includes("a-")
-    isMAL = id.includes("m-")
-    isSimkl = id.includes("s-")
-    newId = id.match(re)[1]
-  }
+    export let id: string;
+    export let url = "";
+    let isAniList = false;
+    let isMAL = false;
+    let isSimkl = false;
+    let newId = id;
+    let re = /[ams]?-?(.*)/;
+    if (id !== undefined && id.length > 0) {
+        isAniList = id.includes("a-");
+        isMAL = id.includes("m-");
+        isSimkl = id.includes("s-");
+        if (isAniList || isMAL || isSimkl) newId = id.match(re)[1];
+        else newId = id;
+    }
 
-
-  if (isAniList) url = `https://anilist.co/anime/${newId}`
-  if (isMAL) url = `https://myanimelist.net/anime/${newId}`
-  if (isSimkl) url = `https://simkl.com/anime/${newId}`
+    if (isAniList) url = `https://anilist.co/anime/${newId}`;
+    if (isMAL) url = `https://myanimelist.net/anime/${newId}`;
+    if (isSimkl) url = `https://simkl.com/anime/${newId}`;
 </script>
 
 {#if url.length > 0}
-  <button class="underline underline-offset-2 px-4 py-1" on:click={() => BrowserOpenURL(url)}>{newId}</button>
+    <button
+        type="button"
+        class="underline underline-offset-2 px-4 py-1"
+        on:click={() => BrowserOpenURL(url)}>{newId}</button
+    >
 {:else}
-  {id}
+    {id}
 {/if}