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.
This commit is contained in:
2026-03-19 20:37:12 -04:00
parent 8cbf5cb20c
commit c510c2a138
2 changed files with 47 additions and 25 deletions

View File

@@ -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}