Merge pull request 'feat(home): toolbar filtre/affichage et modale options d'affichage' (#46) from feat/home-toolbar-display-settings into main

Reviewed-on: #46

assets/vue/app/domain/manga/domain/entities/manga.js

@@ -4,6 +4,7 @@ export class Manga {
     slug,
     title,
     description = null,
+    author = null,
     authors = [],
     imageUrl = null,
     thumbnailUrl = null,
@@ -20,7 +21,7 @@ export class Manga {
     this.slug = slug;
     this.title = title;
     this.description = description;
-    this.authors = authors;
+    this.authors = authors.length ? authors : (author ? [author] : []);
     this.imageUrl = imageUrl;
     this.thumbnailUrl = thumbnailUrl;
     this.publicationYear = publicationYear;

assets/vue/app/domain/manga/presentation/components/HomeDisplaySettingsModal.vue

@@ -0,0 +1,161 @@
+<template>
+    <TransitionRoot as="template" :show="isOpen">
+        <Dialog as="div" class="relative z-50" @close="$emit('close')">
+            <TransitionChild
+                as="template"
+                enter="ease-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                            <div class="mb-6">
+                                <DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
+                                    Options d'affichage
+                                </DialogTitle>
+                            </div>
+
+                            <div class="space-y-6">
+                                <!-- Vue Grid -->
+                                <section>
+                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+                                        Vue Grille
+                                    </h4>
+                                    <div class="space-y-3">
+                                        <ToggleRow
+                                            label="Titre"
+                                            :value="options.grid.showTitle"
+                                            @update="setOption('grid', 'showTitle', $event)" />
+                                        <ToggleRow
+                                            label="Année de publication"
+                                            :value="options.grid.showYear"
+                                            @update="setOption('grid', 'showYear', $event)" />
+                                        <ToggleRow
+                                            label="Auteur(s)"
+                                            :value="options.grid.showAuthor"
+                                            @update="setOption('grid', 'showAuthor', $event)" />
+                                    </div>
+                                </section>
+
+                                <div class="border-t border-gray-200 dark:border-gray-700" />
+
+                                <!-- Vue Overview -->
+                                <section>
+                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+                                        Vue Overview
+                                    </h4>
+                                    <div class="space-y-3">
+                                        <ToggleRow
+                                            label="Couverture"
+                                            :value="options.overview.showCover"
+                                            @update="setOption('overview', 'showCover', $event)" />
+                                        <ToggleRow
+                                            label="Statut"
+                                            :value="options.overview.showStatus"
+                                            @update="setOption('overview', 'showStatus', $event)" />
+                                        <ToggleRow
+                                            label="Description"
+                                            :value="options.overview.showDescription"
+                                            @update="setOption('overview', 'showDescription', $event)" />
+                                        <ToggleRow
+                                            label="Auteur(s)"
+                                            :value="options.overview.showAuthor"
+                                            @update="setOption('overview', 'showAuthor', $event)" />
+                                        <ToggleRow
+                                            label="Année de publication"
+                                            :value="options.overview.showYear"
+                                            @update="setOption('overview', 'showYear', $event)" />
+                                    </div>
+                                </section>
+
+                                <div class="border-t border-gray-200 dark:border-gray-700" />
+
+                                <!-- Vue Table -->
+                                <section>
+                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
+                                        Vue Table
+                                    </h4>
+                                    <div class="space-y-3">
+                                        <ToggleRow
+                                            label="Monitoring"
+                                            :value="options.table.showMonitoring"
+                                            @update="setOption('table', 'showMonitoring', $event)" />
+                                        <ToggleRow
+                                            label="Source préférée"
+                                            :value="options.table.showPreferredSource"
+                                            @update="setOption('table', 'showPreferredSource', $event)" />
+                                        <ToggleRow
+                                            label="Progression chapitres"
+                                            :value="options.table.showChapters"
+                                            @update="setOption('table', 'showChapters', $event)" />
+                                        <ToggleRow
+                                            label="Statut"
+                                            :value="options.table.showStatus"
+                                            @update="setOption('table', 'showStatus', $event)" />
+                                        <ToggleRow
+                                            label="Auteur(s)"
+                                            :value="options.table.showAuthor"
+                                            @update="setOption('table', 'showAuthor', $event)" />
+                                        <ToggleRow
+                                            label="Année de publication"
+                                            :value="options.table.showYear"
+                                            @update="setOption('table', 'showYear', $event)" />
+                                    </div>
+                                </section>
+                            </div>
+
+                            <div class="mt-6 flex justify-end">
+                                <button
+                                    type="button"
+                                    class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                                    @click="$emit('close')"
+                                >
+                                    Fermer
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import ToggleRow from '../../../../shared/components/ui/ToggleRow.vue';
+
+defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    options: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits(['close', 'update']);
+
+function setOption(view, key, value) {
+    emit('update', { view, key, value });
+}
+</script>
+

assets/vue/app/domain/manga/presentation/components/MangaCard.vue

@@ -35,12 +35,13 @@
             </div>
         </div>
 
-        <!-- Titre + année -->
+        <!-- Titre + méta -->
         <RouterLink
             :to="{ name: 'manga-details', params: { id: manga.id } }"
             class="block p-2">
-            <h3 class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
+            <h3 v-if="options.showTitle" class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
-            <span v-if="manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
+            <span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
+            <span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400 truncate block">{{ manga.authors[0] }}</span>
         </RouterLink>
     </div>
 </template>
@@ -53,6 +54,10 @@ defineProps({
     manga: {
         type: Object,
         required: true
+    },
+    options: {
+        type: Object,
+        default: () => ({ showTitle: true, showYear: true, showAuthor: false })
     }
 });
 

assets/vue/app/domain/manga/presentation/components/MangaGrid.vue

@@ -4,6 +4,7 @@
             v-for="manga in mangas"
             :key="manga.id"
             :manga="manga"
+            :options="options"
             @edit="openEdit"
             @sources="openSources"
             @refresh="doRefresh" />
@@ -41,6 +42,10 @@ defineProps({
     mangas: {
         type: Array,
         required: true
+    },
+    options: {
+        type: Object,
+        default: () => ({ showTitle: true, showYear: true, showAuthor: false })
     }
 });
 

assets/vue/app/domain/manga/presentation/components/MangaOverview.vue

@@ -8,6 +8,7 @@
 
                 <!-- Cover -->
                 <img
+                    v-if="options.showCover"
                     :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
                     alt=""
                     class="h-36 w-24 object-cover flex-shrink-0 self-start"
@@ -23,13 +24,21 @@
                             {{ manga.title }}
                         </RouterLink>
                         <span
-                            v-if="manga.status"
+                            v-if="options.showStatus && manga.status"
                             class="text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0"
                             :class="statusClass(manga.status)">
                             {{ manga.status }}
                         </span>
                     </div>
-                    <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
+                    <div class="flex items-center gap-3 mt-1 flex-wrap">
+                        <span v-if="options.showAuthor && manga.authors?.length" class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ manga.authors.join(', ') }}
+                        </span>
+                        <span v-if="options.showYear && manga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ manga.publicationYear }}
+                        </span>
+                    </div>
+                    <p v-if="options.showDescription && manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">
                         {{ manga.description }}
                     </p>
                 </div>
@@ -100,6 +109,10 @@ const props = defineProps({
     mangas: {
         type: Array,
         required: true
+    },
+    options: {
+        type: Object,
+        default: () => ({ showCover: true, showStatus: true, showDescription: true, showAuthor: false, showYear: false })
     }
 });
 

assets/vue/app/domain/manga/presentation/components/MangaTable.vue

@@ -4,10 +4,13 @@
             <table class="w-full text-sm">
                 <thead>
                     <tr class="bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                        <th class="w-10 px-4 py-3"></th>
+                        <th v-if="options.showMonitoring" class="w-10 px-4 py-3"></th>
                         <th class="py-3 pr-4 text-left font-medium">Titre</th>
-                        <th class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
+                        <th v-if="options.showAuthor" class="py-3 pr-4 text-left font-medium w-36">Auteur</th>
-                        <th class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
+                        <th v-if="options.showYear" class="py-3 pr-4 text-left font-medium w-20">Année</th>
+                        <th v-if="options.showStatus" class="py-3 pr-4 text-left font-medium w-28">Statut</th>
+                        <th v-if="options.showPreferredSource" class="py-3 pr-4 text-left font-medium w-44">Source préférée</th>
+                        <th v-if="options.showChapters" class="py-3 pr-4 text-left font-medium w-44">Chapitres</th>
                         <th class="py-3 px-4 text-right font-medium w-28">Actions</th>
                     </tr>
                 </thead>
@@ -18,7 +21,7 @@
                         class="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
 
                         <!-- Monitoring -->
-                        <td class="px-4 py-3 text-center">
+                        <td v-if="options.showMonitoring" class="px-4 py-3 text-center">
                             <button
                                 :title="manga.monitored ? 'Monitoring actif — cliquer pour désactiver' : 'Monitoring inactif — cliquer pour activer'"
                                 :class="manga.monitored
@@ -41,13 +44,34 @@
                             </RouterLink>
                         </td>
 
+                        <!-- Auteur -->
+                        <td v-if="options.showAuthor" class="py-3 pr-4">
+                            <span class="text-sm text-gray-600 dark:text-gray-300">{{ manga.authors?.join(', ') || '—' }}</span>
+                        </td>
+
+                        <!-- Année -->
+                        <td v-if="options.showYear" class="py-3 pr-4">
+                            <span class="text-sm text-gray-600 dark:text-gray-300">{{ manga.publicationYear || '—' }}</span>
+                        </td>
+
+                        <!-- Statut -->
+                        <td v-if="options.showStatus" class="py-3 pr-4">
+                            <span
+                                v-if="manga.status"
+                                class="text-xs font-medium px-2 py-0.5 rounded-full"
+                                :class="statusClass(manga.status)">
+                                {{ manga.status }}
+                            </span>
+                            <span v-else class="text-gray-400 dark:text-gray-600 text-xs">—</span>
+                        </td>
+
                         <!-- Source préférée -->
-                        <td class="py-3 pr-4">
+                        <td v-if="options.showPreferredSource" class="py-3 pr-4">
                             <MangaPreferredSourceCell :manga-id="manga.id" />
                         </td>
 
                         <!-- Chapitres — barre de progression -->
-                        <td class="py-3 pr-4">
+                        <td v-if="options.showChapters" class="py-3 pr-4">
                             <div v-if="manga.chaptersTotal > 0">
                                 <div class="flex items-center justify-between mb-1">
                                     <span class="text-xs tabular-nums text-gray-500 dark:text-gray-400">
@@ -139,9 +163,19 @@ const props = defineProps({
     mangas: {
         type: Array,
         required: true
+    },
+    options: {
+        type: Object,
+        default: () => ({ showMonitoring: true, showPreferredSource: true, showChapters: true, showStatus: false, showAuthor: false, showYear: false })
     }
 });
 
+function statusClass(status) {
+    if (status === 'ongoing') return 'text-blue-600 bg-blue-50 dark:bg-blue-900/20';
+    if (status === 'completed') return 'text-green-600 bg-green-50 dark:bg-green-900/20';
+    return 'text-gray-500 bg-gray-100 dark:bg-gray-700';
+}
+
 function progressPercent(manga) {
     if (!manga.chaptersTotal) return 0;
     return Math.round((manga.chaptersScraped / manga.chaptersTotal) * 100);

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

@@ -3,12 +3,13 @@
         <Toolbar :config="toolbarConfig" />
         <div class="overflow-y-auto flex-1">
         <div class="w-full">
-            <MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" />
+            <MangaGrid v-if="viewMode === 'grid'" :mangas="pagedItems" :options="prefs.displayOptions.grid" />
             <MangaOverview
                 v-else-if="viewMode === 'list'"
                 :mangas="pagedItems"
+                :options="prefs.displayOptions.overview"
                 @manga-click="handleMangaClick" />
-            <MangaTable v-else-if="viewMode === 'table'" :mangas="pagedItems" />
+            <MangaTable v-else-if="viewMode === 'table'" :mangas="pagedItems" :options="prefs.displayOptions.table" />
             <Pagination
                 v-if="totalPages > 1"
                 :current-page="currentPage"
@@ -25,6 +26,12 @@
             </div>
         </div>
         </div>
+
+        <HomeDisplaySettingsModal
+            :is-open="isDisplaySettingsOpen"
+            :options="prefs.displayOptions"
+            @close="isDisplaySettingsOpen = false"
+            @update="({ view, key, value }) => prefs.setDisplayOption(view, key, value)" />
     </div>
 </template>
 
@@ -44,6 +51,7 @@ import { useUserPreferencesStore } from '../../../../domain/setting/application/
 import Pagination from '../../../../shared/components/ui/Pagination.vue';
 import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useMangaStore } from '../../application/store/mangaStore';
+import HomeDisplaySettingsModal from '../components/HomeDisplaySettingsModal.vue';
 import MangaGrid from '../components/MangaGrid.vue';
 import MangaOverview from '../components/MangaOverview.vue';
 import MangaTable from '../components/MangaTable.vue';
@@ -61,6 +69,7 @@ import MangaTable from '../components/MangaTable.vue';
 
     const viewMode = ref(prefs.defaultView);
     const currentPage = ref(1);
+    const isDisplaySettingsOpen = ref(false);
 
     onMounted(() => {
         mangaStore.loadCollection();
@@ -71,7 +80,12 @@ import MangaTable from '../components/MangaTable.vue';
     };
 
     const sortedCollection = computed(() => {
-        const items = [...(collection.value?.items || [])];
+        let items = [...(collection.value?.items || [])];
+        if (prefs.filterBy === 'completed') {
+            items = items.filter(m => m.status?.toLowerCase() === 'completed');
+        } else if (prefs.filterBy === 'ongoing') {
+            items = items.filter(m => m.status?.toLowerCase() === 'ongoing');
+        }
         if (prefs.sortBy === 'title') {
             items.sort((a, b) => a.title.localeCompare(b.title));
         } else if (prefs.sortBy === 'addedAt') {
@@ -91,7 +105,7 @@ import MangaTable from '../components/MangaTable.vue';
         currentPage.value = 1;
     });
 
-    const toolbarConfig = {
+    const toolbarConfig = computed(() => ({
         leftSection: [
             {
                 icon: ArrowPathIcon,
@@ -103,15 +117,15 @@ import MangaTable from '../components/MangaTable.vue';
             { icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
         ],
         rightSection: [
-            { icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
+            { icon: Cog6ToothIcon, label: 'Options', type: 'button', onClick: () => { isDisplaySettingsOpen.value = true; } },
             {
                 icon: EyeIcon,
                 type: 'dropdown',
                 label: 'View',
                 items: [
-                    { label: 'Overview', onClick: () => { viewMode.value = 'list'; prefs.setDefaultView('list'); } },
+                    { label: 'Overview', isSelected: prefs.defaultView === 'list',  onClick: () => { viewMode.value = 'list';  prefs.setDefaultView('list');  } },
-                    { label: 'Grid',     onClick: () => { viewMode.value = 'grid'; prefs.setDefaultView('grid'); } },
+                    { label: 'Grid',     isSelected: prefs.defaultView === 'grid',  onClick: () => { viewMode.value = 'grid';  prefs.setDefaultView('grid');  } },
-                    { label: 'Table',    onClick: () => { viewMode.value = 'table'; prefs.setDefaultView('table'); } }
+                    { label: 'Table',    isSelected: prefs.defaultView === 'table', onClick: () => { viewMode.value = 'table'; prefs.setDefaultView('table'); } }
                 ]
             },
             {
@@ -119,9 +133,9 @@ import MangaTable from '../components/MangaTable.vue';
                 type: 'dropdown',
                 label: 'Sort',
                 items: [
-                    { label: 'Title', onClick: () => prefs.setSortBy('title') },
+                    { label: 'Title',       isSelected: prefs.sortBy === 'title',   onClick: () => prefs.setSortBy('title') },
-                    { label: "Date d'ajout", onClick: () => prefs.setSortBy('addedAt') },
+                    { label: "Date d'ajout", isSelected: prefs.sortBy === 'addedAt', onClick: () => prefs.setSortBy('addedAt') },
-                    { label: 'Progression', onClick: () => prefs.setSortBy('progress') }
+                    { label: 'Progression', isSelected: prefs.sortBy === 'progress', onClick: () => prefs.setSortBy('progress') }
                 ]
             },
             {
@@ -129,11 +143,11 @@ import MangaTable from '../components/MangaTable.vue';
                 type: 'dropdown',
                 label: 'Filter',
                 items: [
-                    { label: 'All', onClick: () => {} },
+                    { label: 'All',         isSelected: prefs.filterBy === 'all',       onClick: () => prefs.setFilterBy('all') },
-                    { label: 'Completed', onClick: () => {} },
+                    { label: 'Completed',   isSelected: prefs.filterBy === 'completed', onClick: () => prefs.setFilterBy('completed') },
-                    { label: 'In Progress', onClick: () => {} }
+                    { label: 'In Progress', isSelected: prefs.filterBy === 'ongoing',   onClick: () => prefs.setFilterBy('ongoing') }
                 ]
             }
         ]
-    };
+    }));
 </script>

assets/vue/app/domain/setting/application/store/userPreferencesStore.js

@@ -8,6 +8,12 @@ const defaultState = {
     defaultView: 'grid',
     itemsPerPage: 20,
     sortBy: 'title',
+    filterBy: 'all',
+    displayOptions: {
+        grid:     { showTitle: true,  showYear: true,  showAuthor: false },
+        overview: { showCover: true,  showStatus: true, showDescription: true, showAuthor: false, showYear: false },
+        table:    { showMonitoring: true, showPreferredSource: true, showChapters: true, showStatus: false, showAuthor: false, showYear: false }
+    },
     readingDirection: 'ltr',
     readingMode: 'scroll',
     autoFullscreen: false,
@@ -88,6 +94,16 @@ export const useUserPreferencesStore = defineStore('userPreferences', {
             this.persist();
         },
 
+        setFilterBy(filter) {
+            this.filterBy = filter;
+            this.persist();
+        },
+
+        setDisplayOption(view, key, value) {
+            this.displayOptions[view][key] = value;
+            this.persist();
+        },
+
         setReadingDirection(direction) {
             this.readingDirection = direction;
             this.persist();
@@ -127,6 +143,8 @@ export const useUserPreferencesStore = defineStore('userPreferences', {
                     defaultView: this.defaultView,
                     itemsPerPage: this.itemsPerPage,
                     sortBy: this.sortBy,
+                    filterBy: this.filterBy,
+                    displayOptions: this.displayOptions,
                     readingDirection: this.readingDirection,
                     readingMode: this.readingMode,
                     autoFullscreen: this.autoFullscreen,

assets/vue/app/shared/components/ui/ToggleRow.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="flex items-center justify-between">
+        <span class="text-sm text-gray-700 dark:text-gray-300">{{ label }}</span>
+        <button
+            type="button"
+            role="switch"
+            :aria-checked="value"
+            :class="[
+                value ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600',
+                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2'
+            ]"
+            @click="$emit('update', !value)"
+        >
+            <span
+                :class="[
+                    value ? 'translate-x-4' : 'translate-x-0',
+                    'pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                ]"
+            />
+        </button>
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    label: {
+        type: String,
+        required: true
+    },
+    value: {
+        type: Boolean,
+        required: true
+    }
+});
+
+defineEmits(['update']);
+</script>

assets/vue/app/shared/components/ui/Toolbar.vue

@@ -8,7 +8,7 @@
             <slot name="center" />
 
             <!-- Right section -->
-            <ToolbarSection :items="config.rightSection" />
+            <ToolbarSection :items="config.rightSection" align="right" />
         </div>
     </div>
 </template>

assets/vue/app/shared/components/ui/ToolbarDropdown.vue

@@ -13,7 +13,10 @@
         </div>
 
         <MenuItems
-            class="absolute left-0 mt-2 w-max origin-top-left rounded-sm bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+            :class="[
+                'absolute mt-2 w-max rounded-sm bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-10',
+                align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
+            ]">
             <div class="px-1 py-1">
                 <MenuItem v-for="(item, index) in items" :key="index" v-slot="{ active }" :disabled="item.disabled">
                     <button
@@ -50,6 +53,11 @@ import ToolbarLabel from './ToolbarLabel.vue';
             type: Boolean,
             default: false
         },
+        align: {
+            type: String,
+            default: 'left',
+            validator: v => ['left', 'right'].includes(v)
+        },
         items: {
             type: Array,
             required: true,

assets/vue/app/shared/components/ui/ToolbarSection.vue

@@ -13,7 +13,8 @@
                 :icon="item.icon"
                 :label="item.label"
                 :active="item.active"
-                :items="item.items" />
+                :items="item.items"
+                :align="align" />
             <Divider v-else-if="item.type === 'divider'" />
             <span
                 v-else-if="item.type === 'label'"
@@ -43,6 +44,10 @@
                             (item.type === 'dropdown' && Array.isArray(item.items)))
                 );
             }
+        },
+        align: {
+            type: String,
+            default: 'left'
         }
     });
 </script>