feat: debut d'un front vue.js + ajout de cursorrules

assets/vue/app/domain/manga/presentation/pages/HomePage.vue

@@ -0,0 +1,67 @@
+<template>
+  <Layout @add-manga-click="handleAddMangaClick">
+    <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
+    <div class="container mx-auto px-4">
+      <MangaGrid :mangas="collection?.items || []" />
+      <div v-if="isBackgroundLoading" class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
+        Mise à jour en cours...
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useMangaStore } from '../../application/store/mangaStore';
+import Layout from '../../../../shared/components/layout/Layout.vue';
+import MangaGrid from '../components/MangaGrid.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { 
+  ArrowPathIcon,
+  MagnifyingGlassIcon,
+  Cog6ToothIcon,
+  EyeIcon,
+  ArrowsUpDownIcon,
+  FunnelIcon
+} from '@heroicons/vue/24/outline';
+
+const router = useRouter();
+const mangaStore = useMangaStore();
+
+const { 
+  collection, 
+  loading, 
+  error, 
+  isBackgroundLoading 
+} = storeToRefs(mangaStore);
+
+const { loadCollection, refreshCollectionInBackground } = mangaStore;
+
+onMounted(() => {
+  loadCollection();
+});
+
+const handleAddMangaClick = (query = '') => {
+  router.push(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
+};
+
+const toolbarConfig = {
+  leftSection: [
+    { 
+      icon: ArrowPathIcon, 
+      label: 'Refresh', 
+      onClick: refreshCollectionInBackground,
+      active: isBackgroundLoading
+    },
+    { icon: MagnifyingGlassIcon, label: 'Search', onClick: () => {} }
+  ],
+  rightSection: [
+    { icon: Cog6ToothIcon, onClick: () => {} },
+    { icon: EyeIcon, onClick: () => {} },
+    { icon: ArrowsUpDownIcon, onClick: () => {} },
+    { icon: FunnelIcon, onClick: () => {} }
+  ]
+};
+</script>