Migrate to Nuxt 4.0.0

app/app.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import TooltipProvider from './components/ui/tooltip/TooltipProvider.vue';
+
+</script>
+
+<template>
+    <div class="relative flex flex-col min-h-svh">
+        <header class="w-full sticky top-0 z-50">
+            <UiNavbar />
+        </header>
+        <main class="flex flex-1 flex-col">
+            <TooltipProvider disableHoverableContent :delay-duration="200">
+                <NuxtPage />
+            </TooltipProvider>
+        </main>
+        <Toaster />
+    </div>
+</template>

app/assets/css/main.css

@@ -0,0 +1,3 @@
+.dark img {
+    filter: brightness(1.1) contrast(0.9);
+}

app/assets/css/tailwind.css

@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/components/ui/anime-card/AnimeCard.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Result } from '~/openapi/search';
+import { Vibrant } from "node-vibrant/browser";
+import Tooltip from '../tooltip/Tooltip.vue';
+import TooltipTrigger from '../tooltip/TooltipTrigger.vue';
+import TooltipContent from '../tooltip/TooltipContent.vue';
+
+interface AnimeItemProp {
+    item: Result
+}
+const props = withDefaults(defineProps<AnimeItemProp>(), {
+})
+
+const vibrantColor = ref<string | null>(null);
+
+onMounted(async () => {
+    const posterUrl = props.item.material_data?.anime_poster_url;
+    if (!posterUrl) return;
+    try {
+        const proxiedPosterUrl = `/api/proxy-image?url=${encodeURIComponent(posterUrl)}`
+        const palette = await Vibrant.from(proxiedPosterUrl).getPalette();
+        const rgbColor = palette.LightVibrant?.rgb ?? [0, 0, 0]
+        vibrantColor.value = rgbColor.join(',') || null;
+        console.log(vibrantColor.value)
+    } catch (error) {
+        console.error("Failed to extract vibrant color:", error);
+    }
+});
+</script>
+
+<template>
+    <Tooltip>
+        <TooltipTrigger as-child>
+            <NuxtLink :to="`/anime/${props.item.id}`" class="w-full group">
+                <div v-if="props.item.material_data?.anime_poster_url"
+                    :style="{ 'background-image': 'url(' + props.item.material_data.anime_poster_url + ')', '--tw-shadow-color': 'rgb(' + vibrantColor + ')' }"
+                    :alt="item.title"
+                    class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96 group-hover:shadow transition-shadow">
+                    <div
+                        class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs ">
+                        <Icon name="gg:play-list" />
+                        {{ props.item.material_data?.episodes_total }}
+                        episode
+                    </div>
+                </div>
+                <div>
+                    <h3 className="text-xl font-semibold tracking-tight">
+                        {{ props.item.title }}
+                    </h3>
+                </div>
+            </NuxtLink>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+            <div class="max-w-96">
+                <span class="break-words">
+                    {{ props.item.material_data?.description }}
+                </span>
+            </div>
+        </TooltipContent>
+    </Tooltip>
+</template>

app/components/ui/anime-card/index.ts

@@ -0,0 +1 @@
+export { default as AnimeCard } from './AnimeCard.vue'

app/components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AspectRatio, type AspectRatioProps } from 'reka-ui'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio
+    data-slot="aspect-ratio"
+    v-bind="props"
+  >
+    <slot />
+  </AspectRatio>
+</template>

app/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'

app/components/ui/button/Button.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

app/components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+                destructive:
+                    'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+                outline:
+                    'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+                secondary:
+                    'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+                ghost:
+                    'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+                link: 'text-primary underline-offset-4 hover:underline',
+            },
+            size: {
+                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+                sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+                icon: 'size-9',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

app/components/ui/dialog/Dialog.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
+</template>

app/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

app/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+    DialogClose,
+    DialogContent,
+    type DialogContentEmits,
+    type DialogContentProps,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import DialogOverlay from './DialogOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'], close?: () => void }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'close')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const handleClose = () => {
+    if (props.close) {
+        props.close()
+    }
+}
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent data-slot="dialog-content" @escape-key-down="handleClose" @interact-outside="handleClose"
+            @pointer-down-outside="handleClose" v-bind="forwarded" :class="cn(
+                'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                props.class,
+            )">
+            <slot />
+
+            <DialogClose @click="handleClose"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

app/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

app/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay, type DialogOverlayProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

app/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

app/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

app/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>

app/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogOverlay } from './DialogOverlay.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'

app/components/ui/input/Input.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>

app/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

app/components/ui/label/Label.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Label, type LabelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'

app/components/ui/navbar/Navbar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import Button from '../button/Button.vue'
+
+const colorMode = useColorMode()
+
+function toggleColorMode(): void {
+    const currentColorMode = colorMode.value
+    if (currentColorMode === 'light') {
+        colorMode.preference = 'dark'
+    }
+    if (currentColorMode === 'dark') {
+        colorMode.preference = 'light'
+    }
+}
+</script>
+
+<template>
+    <div class="flex justify-around items-center p-2 border-b-2 backdrop-blur">
+        <div class="self-start">
+            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight select-none">
+                Anyame
+            </h3>
+        </div>
+        <div class="self-end">
+            <Button variant="outline" @click="toggleColorMode()">
+                <Icon icon="radix-icons:moon"
+                    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Icon icon="radix-icons:sun"
+                    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span class="sr-only">Toggle theme</span>
+            </Button>
+        </div>
+    </div>
+</template>

app/components/ui/navbar/index.ts

@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar.vue'

app/components/ui/player/Player.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import Artplayer from "artplayer";
+import Hls from "hls.js";
+
+interface Props {
+    src: string;
+    id: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+});
+
+const emit = defineEmits(['get-instance'])
+
+const options = computed(() => {
+    console.log(props.src)
+    return {
+        url: props.src || '',
+        type: 'm3u8',
+        customType: {
+            m3u8: playM3u8,
+        },
+        autoSize: true,
+        autoMini: true,
+        playbackRate: true,
+        fullscreen: true,
+        aspectRatio: true,
+        setting: true,
+        lock: true,
+        autoOrientation: true,
+        autoPlayback: true,
+        id: props.id,
+    }
+})
+const artplayerRef = ref();
+const instance = ref();
+
+function playM3u8(video: HTMLMediaElement, url: string, art: Artplayer) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+onMounted(() => {
+    instance.value = new Artplayer({
+        container: artplayerRef.value,
+        ...options.value,
+    })
+    nextTick(() => {
+        emit('get-instance')
+    })
+})
+
+onBeforeUnmount(() => {
+    if (instance.value && instance.value.destroy) {
+        instance.value.destroy(false)
+    }
+})
+</script>
+
+<template>
+    <div class="flex items-center justify-center">
+        <div class="w-1/2 aspect-video" ref="artplayerRef"></div>
+    </div>
+    <div class="h-lvh">
+        test
+        test
+        ste
+        t
+
+        t
+
+        t
+    </div>
+    <div class="h-lvh">
+    </div>
+</template>

app/components/ui/player/index.ts

@@ -0,0 +1 @@
+export { default as Player } from './Player.vue'

app/components/ui/select/Select.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot />
+  </SelectRoot>
+</template>

app/components/ui/select/SelectContent.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

app/components/ui/select/SelectGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+
+const props = defineProps<SelectGroupProps>()
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="props"
+  >
+    <slot />
+  </SelectGroup>
+</template>

app/components/ui/select/SelectItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Check } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        `focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="size-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

app/components/ui/select/SelectItemText.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>

app/components/ui/select/SelectLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('px-2 py-1.5 text-sm font-medium', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>

app/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

app/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

app/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>

app/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
+  { size: 'default' },
+)
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      `border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

app/components/ui/select/SelectValue.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>

app/components/ui/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+
+    }"
+  />
+</template>

app/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

app/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TooltipRoot>
+</template>

app/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

app/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

app/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>

app/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

app/openapi/extractor.json

@@ -0,0 +1 @@
+{"openapi":"3.1.0","info":{"title":"OpenAPI definition","version":"v0"},"servers":[{"url":"http://localhost:8081","description":"Generated server url"}],"paths":{"/metadata/shikimori":{"get":{"tags":["metadata-controller"],"operationId":"shikimori","parameters":[{"name":"id","in":"query","required":true,"schema":{"type":"string"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikMetadata"}}}}}}},"/metadata/kodik":{"get":{"tags":["metadata-controller"],"operationId":"kodik","parameters":[{"name":"id","in":"query","required":true,"schema":{"type":"string"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikMetadata"}}}}}}},"/extract/video":{"get":{"tags":["extract-controller"],"operationId":"video","parameters":[{"name":"translationDTO","in":"query","required":true,"schema":{"$ref":"#/components/schemas/KodikTranslationDTO"}},{"name":"quality","in":"query","required":true,"schema":{"type":"string"}},{"name":"episode","in":"query","required":true,"schema":{"type":"integer","format":"int32"}}],"responses":{"200":{"description":"OK","content":{"*/*":{"schema":{"$ref":"#/components/schemas/KodikVideoLinks"}}}}}}}},"components":{"schemas":{"KodikMetadata":{"type":"object","properties":{"title":{"type":"string"},"translations":{"type":"array","items":{"$ref":"#/components/schemas/KodikTranslation"}}}},"KodikTranslation":{"type":"object","properties":{"id":{"type":"string"},"title":{"type":"string"},"mediaId":{"type":"string"},"mediaHash":{"type":"string"},"mediaType":{"type":"string"},"translationType":{"type":"string"},"episodeCount":{"type":"integer","format":"int32"}}},"KodikTranslationDTO":{"type":"object","properties":{"mediaType":{"type":"string"},"mediaId":{"type":"string"},"mediaHash":{"type":"string"}}},"KodikVideoLinks":{"type":"object","properties":{"links":{"type":"object","additionalProperties":{"type":"array","items":{"$ref":"#/components/schemas/Link"}}}}},"Link":{"type":"object","properties":{"type":{"type":"string"},"src":{"type":"string"}}}}}}

app/openapi/extractor.ts

@@ -0,0 +1,184 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+export interface KodikMetadata {
+  title?: string;
+  translations?: KodikTranslation[];
+}
+
+export interface KodikTranslation {
+  id?: string;
+  title?: string;
+  mediaId?: string;
+  mediaHash?: string;
+  mediaType?: string;
+  translationType?: string;
+  episodeCount?: number;
+}
+
+export interface KodikTranslationDTO {
+  mediaType?: string;
+  mediaId?: string;
+  mediaHash?: string;
+}
+
+export type KodikVideoLinksLinks = {[key: string]: Link[]};
+
+export interface KodikVideoLinks {
+  links?: KodikVideoLinksLinks;
+}
+
+export interface Link {
+  type?: string;
+  src?: string;
+}
+
+export type ShikimoriParams = {
+id: string;
+};
+
+export type KodikParams = {
+id: string;
+};
+
+export type VideoParams = {
+translationDTO: KodikTranslationDTO;
+quality: string;
+episode: number;
+};
+
+export type shikimoriResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type shikimoriResponseComposite = shikimoriResponse200;
+    
+export type shikimoriResponse = shikimoriResponseComposite & {
+  headers: Headers;
+}
+
+export const getShikimoriUrl = (params: ShikimoriParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/shikimori?${stringifiedParams}` : `http://localhost:8081/metadata/shikimori`
+}
+
+export const shikimori = async (params: ShikimoriParams, options?: RequestInit): Promise<shikimoriResponse> => {
+  
+  const res = await fetch(getShikimoriUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: shikimoriResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as shikimoriResponse
+}
+
+
+
+export type kodikResponse200 = {
+  data: KodikMetadata
+  status: 200
+}
+    
+export type kodikResponseComposite = kodikResponse200;
+    
+export type kodikResponse = kodikResponseComposite & {
+  headers: Headers;
+}
+
+export const getKodikUrl = (params: KodikParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/metadata/kodik?${stringifiedParams}` : `http://localhost:8081/metadata/kodik`
+}
+
+export const kodik = async (params: KodikParams, options?: RequestInit): Promise<kodikResponse> => {
+  
+  const res = await fetch(getKodikUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: kodikResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as kodikResponse
+}
+
+
+
+export type videoResponse200 = {
+  data: KodikVideoLinks
+  status: 200
+}
+    
+export type videoResponseComposite = videoResponse200;
+    
+export type videoResponse = videoResponseComposite & {
+  headers: Headers;
+}
+
+export const getVideoUrl = (params: VideoParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8081/extract/video?${stringifiedParams}` : `http://localhost:8081/extract/video`
+}
+
+export const video = async (params: VideoParams, options?: RequestInit): Promise<videoResponse> => {
+  
+  const res = await fetch(getVideoUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: videoResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as videoResponse
+}

app/openapi/search.json

@@ -0,0 +1,365 @@
+{
+    "openapi": "3.1.0",
+    "info": {
+        "title": "OpenAPI definition",
+        "version": "v0"
+    },
+    "servers": [
+        {
+            "url": "http://localhost:8080",
+            "description": "Generated server url"
+        }
+    ],
+    "paths": {
+        "/search": {
+            "get": {
+                "tags": [
+                    "search-controller"
+                ],
+                "operationId": "search",
+                "parameters": [
+                    {
+                        "name": "title",
+                        "in": "query",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "*/*": {
+                                "schema": {
+                                    "$ref": "#/components/schemas/KodikResponse"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    "components": {
+        "schemas": {
+            "KodikResponse": {
+                "type": "object",
+                "properties": {
+                    "total": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "results": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/components/schemas/Result"
+                        }
+                    }
+                }
+            },
+            "MaterialData": {
+                "type": "object",
+                "properties": {
+                    "title": {
+                        "type": "string"
+                    },
+                    "year": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "description": {
+                        "type": "string"
+                    },
+                    "screenshots": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "duration": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "countries": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "actors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "directors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "producers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "writers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "composers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "editors": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "designers": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "operators": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_title": {
+                        "type": "string"
+                    },
+                    "title_en": {
+                        "type": "string"
+                    },
+                    "other_titles": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "other_titles_en": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "other_titles_jp": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_license_name": {
+                        "type": "string"
+                    },
+                    "anime_licensed_by": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_kind": {
+                        "type": "string"
+                    },
+                    "all_status": {
+                        "type": "string"
+                    },
+                    "anime_status": {
+                        "type": "string"
+                    },
+                    "anime_description": {
+                        "type": "string"
+                    },
+                    "poster_url": {
+                        "type": "string"
+                    },
+                    "anime_poster_url": {
+                        "type": "string"
+                    },
+                    "all_genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_genres": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "anime_studios": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "kinopoisk_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "kinopoisk_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "imdb_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "imdb_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "shikimori_rating": {
+                        "type": "number",
+                        "format": "double"
+                    },
+                    "shikimori_votes": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "premiere_world": {
+                        "type": "string"
+                    },
+                    "aired_at": {
+                        "type": "string"
+                    },
+                    "released_at": {
+                        "type": "string"
+                    },
+                    "rating_mpaa": {
+                        "type": "string"
+                    },
+                    "minimal_age": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_total": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_aired": {
+                        "type": "integer",
+                        "format": "int32"
+                    }
+                }
+            },
+            "Result": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "string"
+                    },
+                    "type": {
+                        "type": "string"
+                    },
+                    "link": {
+                        "type": "string"
+                    },
+                    "title": {
+                        "type": "string"
+                    },
+                    "translation": {
+                        "$ref": "#/components/schemas/Translation"
+                    },
+                    "year": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "quality": {
+                        "type": "string"
+                    },
+                    "camrip": {
+                        "type": "boolean"
+                    },
+                    "lgbt": {
+                        "type": "boolean"
+                    },
+                    "screenshots": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "title_orig": {
+                        "type": "string"
+                    },
+                    "other_title": {
+                        "type": "string"
+                    },
+                    "last_season": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "last_episode": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "episodes_count": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "kinopoisk_id": {
+                        "type": "string"
+                    },
+                    "imdb_id": {
+                        "type": "string"
+                    },
+                    "worldart_link": {
+                        "type": "string"
+                    },
+                    "shikimori_id": {
+                        "type": "string"
+                    },
+                    "blocked_countries": {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        }
+                    },
+                    "created_at": {
+                        "type": "string"
+                    },
+                    "updated_at": {
+                        "type": "string"
+                    },
+                    "material_data": {
+                        "$ref": "#/components/schemas/MaterialData"
+                    }
+                }
+            },
+            "Translation": {
+                "type": "object",
+                "properties": {
+                    "id": {
+                        "type": "integer",
+                        "format": "int32"
+                    },
+                    "title": {
+                        "type": "string"
+                    },
+                    "type": {
+                        "type": "string"
+                    }
+                }
+            }
+        }
+    }
+}

app/openapi/search.ts

@@ -0,0 +1,136 @@
+/**
+ * Generated by orval v7.10.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+export interface KodikResponse {
+  total?: number;
+  results?: Result[];
+}
+
+export interface MaterialData {
+  title?: string;
+  year?: number;
+  description?: string;
+  screenshots?: string[];
+  duration?: number;
+  countries?: string[];
+  genres?: string[];
+  actors?: string[];
+  directors?: string[];
+  producers?: string[];
+  writers?: string[];
+  composers?: string[];
+  editors?: string[];
+  designers?: string[];
+  operators?: string[];
+  anime_title?: string;
+  title_en?: string;
+  other_titles?: string[];
+  other_titles_en?: string[];
+  other_titles_jp?: string[];
+  anime_license_name?: string;
+  anime_licensed_by?: string[];
+  anime_kind?: string;
+  all_status?: string;
+  anime_status?: string;
+  anime_description?: string;
+  poster_url?: string;
+  anime_poster_url?: string;
+  all_genres?: string[];
+  anime_genres?: string[];
+  anime_studios?: string[];
+  kinopoisk_rating?: number;
+  kinopoisk_votes?: number;
+  imdb_rating?: number;
+  imdb_votes?: number;
+  shikimori_rating?: number;
+  shikimori_votes?: number;
+  premiere_world?: string;
+  aired_at?: string;
+  released_at?: string;
+  rating_mpaa?: string;
+  minimal_age?: number;
+  episodes_total?: number;
+  episodes_aired?: number;
+}
+
+export interface Result {
+  id?: string;
+  type?: string;
+  link?: string;
+  title?: string;
+  translation?: Translation;
+  year?: number;
+  quality?: string;
+  camrip?: boolean;
+  lgbt?: boolean;
+  screenshots?: string[];
+  title_orig?: string;
+  other_title?: string;
+  last_season?: number;
+  last_episode?: number;
+  episodes_count?: number;
+  kinopoisk_id?: string;
+  imdb_id?: string;
+  worldart_link?: string;
+  shikimori_id?: string;
+  blocked_countries?: string[];
+  created_at?: string;
+  updated_at?: string;
+  material_data?: MaterialData;
+}
+
+export interface Translation {
+  id?: number;
+  title?: string;
+  type?: string;
+}
+
+export type SearchParams = {
+title: string;
+};
+
+export type searchResponse200 = {
+  data: KodikResponse
+  status: 200
+}
+    
+export type searchResponseComposite = searchResponse200;
+    
+export type searchResponse = searchResponseComposite & {
+  headers: Headers;
+}
+
+export const getSearchUrl = (params: SearchParams,) => {
+  const normalizedParams = new URLSearchParams();
+
+  Object.entries(params || {}).forEach(([key, value]) => {
+    
+    if (value !== undefined) {
+      normalizedParams.append(key, value === null ? 'null' : value.toString())
+    }
+  });
+
+  const stringifiedParams = normalizedParams.toString();
+
+  return stringifiedParams.length > 0 ? `http://localhost:8080/search?${stringifiedParams}` : `http://localhost:8080/search`
+}
+
+export const search = async (params: SearchParams, options?: RequestInit): Promise<searchResponse> => {
+  
+  const res = await fetch(getSearchUrl(params),
+  {      
+    ...options,
+    method: 'GET'
+    
+    
+  }
+)
+
+  const body = [204, 205, 304].includes(res.status) ? null : await res.text()
+  const data: searchResponse['data'] = body ? JSON.parse(body) : {}
+
+  return { data, status: res.status, headers: res.headers } as searchResponse
+}

app/pages/anime/[slug].vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Button } from '~/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '~/components/ui/dialog';
+import { kodik, type KodikTranslation } from '~/openapi/extractor';
+
+const route = useRoute();
+const animeId = ref(route.params.slug as string)
+
+const results = ref<KodikTranslation[]>([])
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+
+const isSelectingEpisode = ref(false)
+const currentSelectionItem = ref<KodikTranslation | null>(null)
+
+watchEffect(async () => {
+    if (!animeId.value) return
+    try {
+        isLoading.value = true
+        error.value = null
+        const response = await kodik({ id: animeId.value })
+        results.value = response?.data?.translations || []
+    } catch (err) {
+        error.value = err
+        console.error('Failed to fetch anime details:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+
+function episodesSelect(item: KodikTranslation) {
+    currentSelectionItem.value = item
+    isSelectingEpisode.value = true
+}
+
+function closeDialog() {
+    console.log('Dialog closed')
+    isSelectingEpisode.value = false
+}
+</script>
+
+<template>
+    <div v-for="item in results" :key="item.id" class="flex w-[32rem]">
+        <div @click="episodesSelect(item)">
+            <span>{{ item.title }}</span>
+            <span>{{ item.episodeCount }}</span>
+        </div>
+    </div>
+    <p>{{ route.params.slug }}</p>
+    <Dialog v-bind:open="isSelectingEpisode">
+        <DialogTrigger as-child>
+            <Button variant="outline">
+                Select episode
+            </Button>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px] max-h-[90dvh] overflow-y-auto" :close="closeDialog">
+            <DialogHeader>
+                <DialogTitle>Select episode</DialogTitle>
+            </DialogHeader>
+            <div class="grid gap-4 py-4">
+                <div v-for="n in currentSelectionItem?.episodeCount || 0" :key="n"
+                    class="flex items-center justify-between">
+                    <NuxtLink
+                        :to="{ path: '/watch', query: { mediaType: currentSelectionItem?.mediaType, mediaId: currentSelectionItem?.mediaId, mediaHash: currentSelectionItem?.mediaHash, episode: n } }"
+                        class="flex items-center justify-between gap-2 w-full">
+                        <span>Episode {{ n }}</span>
+                        <Button variant="outline" @click="closeDialog">Watch</Button>
+                    </NuxtLink>
+                </div>
+            </div>
+        </DialogContent>
+    </Dialog>
+</template>

app/pages/index.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+
+import kodikImage from "assets/img/kodik.png";
+import shikimoriImage from "assets/img/shikimori.png";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue
+} from "~/components/ui/select";
+import { toast } from "vue-sonner";
+import 'vue-sonner/style.css'
+import { Icon } from "#components";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+const router = useRouter()
+const searchProvider = ref('kodik')
+const displaySearchProvider = computed(() => {
+    let label = '';
+    let image;
+    if (searchProvider.value === 'kodik') {
+        label = 'Kodik';
+        image = kodikImage;
+    }
+    if (searchProvider.value === 'shikimori') {
+        label = 'Shikimori';
+        image = shikimoriImage;
+    }
+    return {
+        label,
+        image
+    }
+})
+const search = defineModel<string>("")
+function querySearch() {
+    if (!search.value || search.value.trim() === "") {
+        toast('Please enter a value');
+        return;
+    }
+    router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
+        .catch(err => {
+            console.error('Navigation error:', err);
+            toast.error('Failed to navigate to search results');
+        });
+}
+</script>
+
+<template>
+    <div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
+        <form @submit.prevent="querySearch" class="flex items-center gap-2">
+            <Select v-model="searchProvider">
+                <SelectTrigger>
+                    <SelectValue placeholder="Select an provider">
+                        <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
+                        <span>{{ displaySearchProvider.label }}</span>
+                    </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectLabel>Providers</SelectLabel>
+                        <SelectItem value="kodik">
+                            <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
+                            <span>Kodik</span>
+                        </SelectItem>
+                        <SelectItem value="shikimori">
+                            <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
+                            Shikimori
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+            <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
+            <Button type="submit">
+                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
+            </Button>
+        </form>
+    </div>
+</template>

app/pages/search.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { AnimeCard } from '~/components/ui/anime-card'
+import { search, type Result } from '~/openapi/search'
+
+const route = useRoute()
+const searchQuery = ref(route.query.title as string || '')
+
+const results = ref<Result[]>([])
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+
+watchEffect(async () => {
+    if (!searchQuery.value) return
+
+    try {
+        isLoading.value = true
+        error.value = null
+        const response = await search({ title: searchQuery.value })
+        results.value = response.data.results || []
+    } catch (err) {
+        error.value = err
+        console.error('Search failed:', err)
+    } finally {
+        isLoading.value = false
+    }
+}, {
+    flush: 'post'
+})
+</script>
+
+<template>
+    <div>
+        <div v-if="isLoading">
+            Loading results...
+        </div>
+
+        <div v-if="error">
+            Error loading results: {{ error }}
+        </div>
+
+        <div v-if="results.length > 0"
+            class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
+            <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
+                <AnimeCard :item="item" />
+            </div>
+        </div>
+
+        <div v-if="!isLoading && !error && results.length === 0 && searchQuery">
+            No results found for "{{ searchQuery }}"
+        </div>
+    </div>
+</template>

app/pages/watch.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <h1>Watch Page</h1>
+        <div v-if="mediaId">
+            <p>Media Type: {{ mediaType }}</p>
+            <p>Media ID: {{ mediaId }}</p>
+            <p>Media Hash: {{ mediaHash }}</p>
+            <p>Episode: {{ episode }}</p>
+
+            <div v-if="hlsUrl">
+                <Player :id="mediaId.toString()" :src="hlsUrl" />
+            </div>
+
+            <!-- Loading and Error States -->
+            <div v-if="isLoading" class="loading">Loading video...</div>
+            <div v-if="error" class="error">Error loading video: {{ error }}</div>
+        </div>
+        <div v-else>
+            <p>No media selected.</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+import { Player } from '~/components/ui/player'
+import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
+
+const route = useRoute()
+const mediaType = route.query.mediaType
+const mediaId = route.query.mediaId
+const mediaHash = route.query.mediaHash
+const episode = route.query.episode
+
+const results = ref<KodikVideoLinks | null>(null)
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+const hlsUrl = ref<string | null>(null)
+
+const playerOptions = ref({
+    autoplay: false,
+    controls: true,
+    responsive: true,
+    fluid: true,
+    sources: [{
+        src: hlsUrl.value,
+        type: 'application/x-mpegURL'
+    }]
+})
+
+watchEffect(async () => {
+    if (!mediaType || !mediaId || !mediaHash || !episode) return
+
+    try {
+        isLoading.value = true
+        error.value = null
+
+        const translationDto: KodikTranslationDTO = {
+            mediaType: mediaType as string,
+            mediaId: mediaId as string,
+            mediaHash: mediaHash as string,
+        }
+
+        const videoParams: VideoParams = {
+            translationDTO: translationDto,
+            episode: Number(episode as string),
+            quality: '360',
+        }
+
+        const response = await video(videoParams)
+        results.value = response?.data || null
+
+        if (results.value?.links) {
+            const qualities = Object.keys(results.value.links)
+            const bestQuality = qualities.includes('360') ? '360' :
+                qualities[0]
+
+            const hlsLink = results.value.links[bestQuality ?? '360']?.find(link =>
+                link.type?.includes('hls') || link.src?.includes('.m3u8')
+            )
+            console.log(bestQuality)
+
+            if (hlsLink?.src) {
+                hlsUrl.value = hlsLink.src
+                if (playerOptions.value?.sources[0]) {
+                    playerOptions.value.sources[0].src = hlsUrl.value
+                }
+            } else {
+                throw new Error('No HLS stream found in response')
+            }
+        }
+    } catch (err) {
+        error.value = err
+        console.error('Failed to fetch video:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+</script>