feat: initial project

src/components/EpisodeRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="bg-[#0d1219] flex gap-4 p-3 hover:bg-[#121920] transition-colors">
+    <div class="w-24 flex-shrink-0">
+      <img
+          v-if="ep.cover"
+          :src="imageUrl(ep.cover)"
+          :alt="ep.name"
+          class="w-full aspect-video object-cover"
+      />
+      <div v-else class="w-full aspect-video bg-[#121920]"></div>
+    </div>
+
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2 mb-1">
+        <span class="text-[10px] text-[#e8513a]">FILM {{ ep.number }}</span>
+        <span class="text-sm font-bold text-white truncate">{{ ep.name }}</span>
+      </div>
+      <div class="text-[10px] text-[#5a7a94] mb-1">
+        Épisodes {{ ep.episodes }} · {{ ep.duration }}
+      </div>
+      <p class="text-xs text-[#5a7a94] leading-relaxed line-clamp-2">{{ ep.description }}</p>
+    </div>
+
+    <div class="flex-shrink-0 flex items-center">
+      <a
+        v-if="ep.path_fr"
+        :href="`https://fankai.fr/productions/${productionId}?episode=${ep.number}`"
+        target="_blank"
+        title="Streamable sur fankai.fr"
+        class="text-[10px] text-[#3ae87a] border border-[#3ae87a] px-2 py-1 tracking-widest hover:bg-[#3ae87a]/10 transition-colors"
+        @click.stop
+      >
+        ▶ STREAM
+      </a>
+      <div
+          v-else
+          class="text-[10px] text-[#1e2d3d] border border-[#1e2d3d] px-2 py-1 tracking-widest"
+      >
+        BIENTÔT
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { imageUrl, type Episode } from '@/api/fankai'
+
+defineProps<{
+  ep: Episode
+  productionId: number
+}>()
+</script>

src/components/ToastContainer.vue

@@ -0,0 +1,36 @@
+<template>
+  <Teleport to="body">
+    <div class="fixed top-4 right-4 z-50 flex flex-col gap-2">
+      <TransitionGroup name="toast">
+        <div
+            v-for="t in toasts"
+            :key="t.id"
+            @click="remove(t.id)"
+            :class="{
+            'border-[#3ae87a] text-[#3ae87a]': t.type === 'success',
+            'border-[#e8513a] text-[#e8513a]': t.type === 'error',
+            'border-[#3a8fe8] text-[#3a8fe8]': t.type === 'info',
+          }"
+            class="bg-[#0d1219] border px-4 py-3 text-xs tracking-wider cursor-pointer flex items-center gap-3 min-w-64"
+        >
+          <span v-if="t.type === 'success'">✓</span>
+          <span v-else-if="t.type === 'error'">✕</span>
+          <span v-else>·</span>
+          {{ t.message }}
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '@/composables/useToast'
+const { toasts, remove } = useToast()
+</script>
+
+<style scoped>
+.toast-enter-active { transition: all 0.2s ease; }
+.toast-leave-active { transition: all 0.2s ease; }
+.toast-enter-from { opacity: 0; transform: translateX(20px); }
+.toast-leave-to   { opacity: 0; transform: translateX(20px); }
+</style>