From 68fed587bedc86c4ff0cfad62c066832be3fd489 Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Thu, 3 Apr 2025 15:15:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20d'une=20barre=20d'outils=20dans?=
 =?UTF-8?q?=20le=20composant=20MangaDetails,=20int=C3=A9gration=20de=20nou?=
 =?UTF-8?q?veaux=20boutons=20avec=20des=20actions=20configurables,=20et=20?=
 =?UTF-8?q?am=C3=A9lioration=20de=20la=20structure=20des=20composants=20de?=
 =?UTF-8?q?=20la=20barre=20d'outils=20pour=20une=20meilleure=20exp=C3=A9ri?=
 =?UTF-8?q?ence=20utilisateur.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../manga/presentation/pages/MangaDetails.vue | 69 ++++++++++++++++++-
 .../vue/app/shared/components/ui/Divider.vue  |  2 +-
 .../vue/app/shared/components/ui/Toolbar.vue  |  4 +-
 .../shared/components/ui/ToolbarButton.vue    |  7 +-
 .../shared/components/ui/ToolbarDropdown.vue  | 11 +--
 .../app/shared/components/ui/ToolbarLabel.vue | 13 ++++
 .../shared/components/ui/ToolbarSection.vue   |  2 +-
 7 files changed, 95 insertions(+), 13 deletions(-)
 create mode 100644 assets/vue/app/shared/components/ui/ToolbarLabel.vue

diff --git a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
index b2b32e0..cf1c472 100644
--- a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
@@ -4,6 +4,8 @@
     </div>
 
     <div v-else-if="currentManga" class="relative">
+        <Toolbar :config="toolbarConfig" />
+
         <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
             <ArrowPathIcon class="h-5 w-5 animate-spin" />
         </div>
@@ -31,7 +33,16 @@
 <script setup>
     import { computed, onUnmounted, watch } from 'vue';
     import { useRoute } from 'vue-router';
-    import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+    import {
+        ArrowPathIcon,
+        PencilSquareIcon,
+        DocumentArrowDownIcon,
+        Cog6ToothIcon,
+        BookmarkIcon,
+        WrenchIcon,
+        TrashIcon,
+        ChevronDoubleDownIcon
+    } from '@heroicons/vue/24/outline';
 
     import { useMangaDetails } from '../composables/useMangaDetails';
     import { useMangaVolumes } from '../composables/useMangaVolumes';
@@ -40,6 +51,7 @@
     import MangaVolumeList from '../components/MangaVolumeList.vue';
 
     import { useMangaStore } from '../../application/store/mangaStore';
+    import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 
     const route = useRoute();
     const mangaStore = useMangaStore();
@@ -60,6 +72,61 @@
         error: errorVolumes
     } = useMangaVolumes(mangaId);
 
+    const toolbarConfig = computed(() => ({
+        leftSection: [
+            {
+                icon: ArrowPathIcon,
+                label: 'Refresh metadata',
+                type: 'button',
+                onClick: () => console.log('Refresh metadata')
+            },
+            {
+                icon: PencilSquareIcon,
+                label: 'Rename chapters',
+                type: 'button',
+                onClick: () => console.log('Rename chapters')
+            },
+            {
+                icon: DocumentArrowDownIcon,
+                label: 'Manage cbz',
+                type: 'button',
+                onClick: () => console.log('Manage cbz')
+            },
+            {
+                icon: Cog6ToothIcon,
+                label: 'Preferred Sources',
+                type: 'button',
+                onClick: () => console.log('Preferred Sources')
+            }
+        ],
+        rightSection: [
+            {
+                icon: BookmarkIcon,
+                label: 'Monitoring',
+                type: 'button',
+                onClick: () => console.log('Monitoring')
+            },
+            {
+                icon: WrenchIcon,
+                label: 'Edit',
+                type: 'button',
+                onClick: () => console.log('Edit')
+            },
+            {
+                icon: TrashIcon,
+                label: 'Delete',
+                type: 'button',
+                onClick: () => console.log('Delete')
+            },
+            {
+                icon: ChevronDoubleDownIcon,
+                label: 'Expand all',
+                type: 'button',
+                onClick: () => console.log('Expand all')
+            }
+        ]
+    }));
+
     const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
     const isRefreshing = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value);
     const error = computed(() => errorDetails.value || errorVolumes.value);
diff --git a/assets/vue/app/shared/components/ui/Divider.vue b/assets/vue/app/shared/components/ui/Divider.vue
index 42ce174..7a12df1 100644
--- a/assets/vue/app/shared/components/ui/Divider.vue
+++ b/assets/vue/app/shared/components/ui/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
+    <div class="h-full mx-4 border-r opacity-50 border-green-500"></div>
 </template>
 
 <script setup>
diff --git a/assets/vue/app/shared/components/ui/Toolbar.vue b/assets/vue/app/shared/components/ui/Toolbar.vue
index 19ba376..ae09df1 100644
--- a/assets/vue/app/shared/components/ui/Toolbar.vue
+++ b/assets/vue/app/shared/components/ui/Toolbar.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="['bg-gray-800 p-3 min-h-14', $attrs.class]">
-        <div class="flex flex-row items-center justify-between">
+    <div :class="['bg-gray-800 h-[4.5rem] p-3', $attrs.class]">
+        <div class="flex flex-row items-center justify-between h-full">
             <!-- Left section -->
             <ToolbarSection :items="config.leftSection" />
 
diff --git a/assets/vue/app/shared/components/ui/ToolbarButton.vue b/assets/vue/app/shared/components/ui/ToolbarButton.vue
index 3eca4f0..ecc4321 100644
--- a/assets/vue/app/shared/components/ui/ToolbarButton.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarButton.vue
@@ -2,19 +2,20 @@
     <button
         @click="$emit('click')"
         :class="[
-            'flex flex-col items-center justify-center p-1 rounded group text-white min-w-[50px]',
+            'flex flex-col items-center justify-around h-full w-min p-1 rounded group text-white',
             active
                 ? 'text-green-500' // Style actif
                 : 'hover:text-green-500' // Effet de survol
         ]"
         :aria-label="label || 'Toolbar button'">
-        <component v-if="icon" :is="icon" class="h-6 w-6 mb-1" />
-        <span v-if="label" class="text-xs">{{ label }}</span>
+        <component v-if="icon" :is="icon" class="h-6 w-6" />
+        <ToolbarLabel :label="label" />
     </button>
 </template>
 
 <script setup>
     import { computed } from 'vue';
+    import ToolbarLabel from './ToolbarLabel.vue';
 
     defineProps({
         icon: {
diff --git a/assets/vue/app/shared/components/ui/ToolbarDropdown.vue b/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
index 92f1e3a..8b5bca2 100644
--- a/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
@@ -1,14 +1,14 @@
 <template>
-    <Menu as="div" class="relative inline-block">
-        <div>
+    <Menu as="div" class="relative inline-block h-full">
+        <div class="h-full">
             <MenuButton
                 :class="[
-                    'flex flex-col items-center justify-center p-1 rounded group text-white w-20 hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
+                    'flex flex-col items-center justify-around h-full w-min p-1 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
                     active ? 'text-green-500' : ''
                 ]"
                 :aria-label="label || 'Options'">
-                <component v-if="icon" :is="icon" class="h-6 w-6 mb-1" aria-hidden="true" />
-                <span v-if="label" class="text-xs truncate w-full px-1">{{ label }}</span>
+                <component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
+                <ToolbarLabel :label="label" />
             </MenuButton>
         </div>
 
@@ -33,6 +33,7 @@
 
 <script setup>
     import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
+    import ToolbarLabel from './ToolbarLabel.vue';
 
     defineProps({
         icon: {
diff --git a/assets/vue/app/shared/components/ui/ToolbarLabel.vue b/assets/vue/app/shared/components/ui/ToolbarLabel.vue
new file mode 100644
index 0000000..1e90d51
--- /dev/null
+++ b/assets/vue/app/shared/components/ui/ToolbarLabel.vue
@@ -0,0 +1,13 @@
+<template>
+    <span v-if="label" class="text-xs line-clamp-2 max-w-fit px-1 text-center min-h-[2rem]">{{ label }}</span>
+</template>
+
+<script setup>
+    defineProps({
+        label: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    });
+</script>
diff --git a/assets/vue/app/shared/components/ui/ToolbarSection.vue b/assets/vue/app/shared/components/ui/ToolbarSection.vue
index 7671669..1cd95e3 100644
--- a/assets/vue/app/shared/components/ui/ToolbarSection.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarSection.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2 h-full">
         <template v-for="(item, index) in items" :key="index">
             <ToolbarButton
                 v-if="item.type === 'button'"