From e1141f8afd93f58abd36161925bed7ac01495c79 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 May 2025 14:01:32 +0200
Subject: [PATCH 01/18] wip POC

---
 demo/app/Sharp/SharpMenu.php         | 21 ++++++++++++++++++++-
 src/Utils/Menu/HasSharpMenuItems.php |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/demo/app/Sharp/SharpMenu.php b/demo/app/Sharp/SharpMenu.php
index 23040fecc..ccd4c8f0e 100644
--- a/demo/app/Sharp/SharpMenu.php
+++ b/demo/app/Sharp/SharpMenu.php
@@ -2,12 +2,14 @@
 
 namespace App\Sharp;
 
+use App\Models\Post;
 use App\Sharp\Entities\AuthorEntity;
 use App\Sharp\Entities\CategoryEntity;
 use App\Sharp\Entities\DemoDashboardEntity;
 use App\Sharp\Entities\PostEntity;
 use App\Sharp\Entities\ProfileEntity;
 use App\Sharp\Entities\TestEntity;
+use App\Sharp\Utils\Filters\StateFilter;
 use Code16\Sharp\Utils\Menu\SharpMenu as BaseSharpMenu;
 use Code16\Sharp\Utils\Menu\SharpMenuItemSection;
 use Code16\Sharp\Utils\Menu\SharpMenuUserMenu;
@@ -25,7 +27,24 @@ public function build(): self
             ->addSection('Blog', function (SharpMenuItemSection $section) {
                 $section
                     ->setCollapsible(false)
-                    ->addEntityLink(PostEntity::class, 'Posts', icon: 'lucide-file-text')
+                    ->addEntityLink(
+                        PostEntity::class, 'Posts',
+                        icon: 'lucide-file-text',
+                        // badge: new class extends SharpBadge {
+                        //     public function getFilters(): array
+                        //     {
+                        //         return [
+                        //             StateFilter::class => 'draft',
+                        //         ];
+                        //     }
+                        //     public function label()
+                        //     {
+                        //         return Post::query()
+                        //             ->where('state', 'draft')
+                        //             ->count();
+                        //     }
+                        // }
+                    )
                     ->addEntityLink(CategoryEntity::class, 'Categories', icon: 'lucide-tags')
                     ->addEntityLink(AuthorEntity::class, 'Authors', icon: 'lucide-signature');
             })
diff --git a/src/Utils/Menu/HasSharpMenuItems.php b/src/Utils/Menu/HasSharpMenuItems.php
index e4a25fb9e..01dce25b4 100644
--- a/src/Utils/Menu/HasSharpMenuItems.php
+++ b/src/Utils/Menu/HasSharpMenuItems.php
@@ -8,7 +8,7 @@ trait HasSharpMenuItems
 {
     protected array $items = [];
 
-    public function addEntityLink(string $entityKeyOrClassName, ?string $label = null, ?string $icon = null): self
+    public function addEntityLink(string $entityKeyOrClassName, ?string $label = null, ?string $icon = null, ?\Closure $badge = null): self
     {
         if (class_exists($entityKeyOrClassName)) {
             $entityKeyOrClassName = app(SharpEntityManager::class)

From df375b9b5eff78f36f530333beaada161f71104f Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 May 2025 15:56:00 +0200
Subject: [PATCH 02/18] Allow badge closure

---
 demo/app/Sharp/SharpMenu.php                  | 18 ++----------
 resources/js/Layouts/Layout.vue               | 21 +++++++++++---
 .../ui/sidebar/SidebarMenuBadge.vue           |  8 ++---
 resources/js/types/generated.d.ts             |  1 +
 src/Data/MenuItemData.php                     | 29 ++++++++++++-------
 src/Utils/Menu/HasSharpMenuItems.php          | 21 ++++++++++----
 src/Utils/Menu/SharpMenuItemLink.php          | 16 +++++++++-
 7 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/demo/app/Sharp/SharpMenu.php b/demo/app/Sharp/SharpMenu.php
index ccd4c8f0e..3346cfbe2 100644
--- a/demo/app/Sharp/SharpMenu.php
+++ b/demo/app/Sharp/SharpMenu.php
@@ -9,7 +9,6 @@
 use App\Sharp\Entities\PostEntity;
 use App\Sharp\Entities\ProfileEntity;
 use App\Sharp\Entities\TestEntity;
-use App\Sharp\Utils\Filters\StateFilter;
 use Code16\Sharp\Utils\Menu\SharpMenu as BaseSharpMenu;
 use Code16\Sharp\Utils\Menu\SharpMenuItemSection;
 use Code16\Sharp\Utils\Menu\SharpMenuUserMenu;
@@ -30,20 +29,9 @@ public function build(): self
                     ->addEntityLink(
                         PostEntity::class, 'Posts',
                         icon: 'lucide-file-text',
-                        // badge: new class extends SharpBadge {
-                        //     public function getFilters(): array
-                        //     {
-                        //         return [
-                        //             StateFilter::class => 'draft',
-                        //         ];
-                        //     }
-                        //     public function label()
-                        //     {
-                        //         return Post::query()
-                        //             ->where('state', 'draft')
-                        //             ->count();
-                        //     }
-                        // }
+                        badge: fn () => Post::query()
+                            ->where('state', 'draft')
+                            ->count(),
                     )
                     ->addEntityLink(CategoryEntity::class, 'Categories', icon: 'lucide-tags')
                     ->addEntityLink(AuthorEntity::class, 'Authors', icon: 'lucide-signature');
diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
index 77c66c97a..e2b93aa49 100644
--- a/resources/js/Layouts/Layout.vue
+++ b/resources/js/Layouts/Layout.vue
@@ -49,6 +49,7 @@ export function useMenuBoundaryElement() {
         SidebarGroupLabel,
         SidebarHeader, SidebarInset,
         SidebarMenu,
+        SidebarMenuBadge,
         SidebarMenuButton,
         SidebarMenuItem,
         SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger
@@ -161,9 +162,16 @@ export function useMenuBoundaryElement() {
                                                                             <template v-if="childItem.icon">
                                                                                 <Icon :icon="childItem.icon" class="size-4" />
                                                                             </template>
-                                                                            <span>{{ childItem.label }}</span>
+                                                                            <span class="flex-1">
+                                                                                {{ childItem.label }}
+                                                                            </span>
+                                                                            <template v-if="childItem.badge != null">
+                                                                                <SidebarMenuBadge>
+                                                                                    {{ childItem.badge }}
+                                                                                </SidebarMenuBadge>
+                                                                            </template>
                                                                             <template v-if="childItem.isExternalLink">
-                                                                                <ExternalLink class="ml-auto size-4 opacity-50" />
+                                                                                <ExternalLink class="size-4 opacity-50" />
                                                                             </template>
                                                                         </component>
                                                                     </SidebarMenuButton>
@@ -190,11 +198,16 @@ export function useMenuBoundaryElement() {
                                                             <template v-if="item.icon">
                                                                 <Icon :icon="item.icon" class="size-4" />
                                                             </template>
-                                                            <span>
+                                                            <span class="flex-1">
                                                                 {{ item.label }}
                                                             </span>
+                                                            <template v-if="item.badge != null">
+                                                                <SidebarMenuBadge>
+                                                                    {{ item.badge }}
+                                                                </SidebarMenuBadge>
+                                                            </template>
                                                             <template v-if="item.isExternalLink">
-                                                                <ExternalLink class="ml-auto size-4 opacity-50" />
+                                                                <ExternalLink class="size-4 opacity-50" />
                                                             </template>
                                                         </component>
                                                     </SidebarMenuButton>
diff --git a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
index bcec34585..84b3182ab 100644
--- a/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
+++ b/resources/js/components/ui/sidebar/SidebarMenuBadge.vue
@@ -11,11 +11,11 @@ const props = defineProps<{
   <div
     data-sidebar="menu-badge"
     :class="cn(
-      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      '-mr-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
       'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      'peer-data-[size=sm]/menu-button:top-1',
-      'peer-data-[size=default]/menu-button:top-1.5',
-      'peer-data-[size=lg]/menu-button:top-2.5',
+      // 'peer-data-[size=sm]/menu-button:top-1',
+      // 'peer-data-[size=default]/menu-button:top-1.5',
+      // 'peer-data-[size=lg]/menu-button:top-2.5',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index 921b0ff6e..fa240de88 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -655,6 +655,7 @@ export type MenuData = {
 export type MenuItemData = {
   icon: IconData | null;
   label: string | null;
+  badge: string | null;
   url: string | null;
   isExternalLink: boolean;
   entityKey: string | null;
diff --git a/src/Data/MenuItemData.php b/src/Data/MenuItemData.php
index f79e7348e..51ef4c009 100644
--- a/src/Data/MenuItemData.php
+++ b/src/Data/MenuItemData.php
@@ -4,6 +4,9 @@
 
 use Code16\Sharp\Utils\Icons\IconManager;
 use Code16\Sharp\Utils\Menu\SharpMenuItem;
+use Code16\Sharp\Utils\Menu\SharpMenuItemLink;
+use Code16\Sharp\Utils\Menu\SharpMenuItemSection;
+use Code16\Sharp\Utils\Menu\SharpMenuItemSeparator;
 use Code16\Sharp\Utils\Menu\SharpMenuManager;
 
 /**
@@ -14,6 +17,7 @@ final class MenuItemData extends Data
     public function __construct(
         public ?IconData $icon = null,
         public ?string $label = null,
+        public ?string $badge = null,
         public ?string $url = null,
         public bool $isExternalLink = false,
         public ?string $entityKey = null,
@@ -26,7 +30,7 @@ public function __construct(
 
     public static function from(SharpMenuItem $item)
     {
-        if ($item->isSection()) {
+        if ($item instanceof SharpMenuItemSection) {
             return new self(
                 label: $item->getLabel(),
                 children: self::collection(
@@ -39,20 +43,25 @@ public static function from(SharpMenuItem $item)
             );
         }
 
-        if ($item->isSeparator()) {
+        if ($item instanceof SharpMenuItemSeparator) {
             return new self(
                 label: $item->getLabel(),
                 isSeparator: true,
             );
         }
 
-        return new self(
-            icon: IconData::optional(app(IconManager::class)->iconToArray($item->getIcon())),
-            label: $item->getLabel(),
-            url: $item->getUrl(),
-            isExternalLink: $item->isExternalLink(),
-            entityKey: $item->isEntity() ? $item->getEntityKey() : null,
-            current: $item->isEntity() && $item->isCurrent(),
-        );
+        if ($item instanceof SharpMenuItemLink) {
+            return new self(
+                icon: IconData::optional(app(IconManager::class)->iconToArray($item->getIcon())),
+                label: $item->getLabel(),
+                badge: $item->getBadge(),
+                url: $item->getUrl(),
+                isExternalLink: $item->isExternalLink(),
+                entityKey: $item->isEntity() ? $item->getEntityKey() : null,
+                current: $item->isEntity() && $item->isCurrent(),
+            );
+        }
+
+        return new self();
     }
 }
diff --git a/src/Utils/Menu/HasSharpMenuItems.php b/src/Utils/Menu/HasSharpMenuItems.php
index 01dce25b4..f7d1c1511 100644
--- a/src/Utils/Menu/HasSharpMenuItems.php
+++ b/src/Utils/Menu/HasSharpMenuItems.php
@@ -2,28 +2,37 @@
 
 namespace Code16\Sharp\Utils\Menu;
 
+use Closure;
 use Code16\Sharp\Utils\Entities\SharpEntityManager;
 
 trait HasSharpMenuItems
 {
     protected array $items = [];
 
-    public function addEntityLink(string $entityKeyOrClassName, ?string $label = null, ?string $icon = null, ?\Closure $badge = null): self
-    {
+    public function addEntityLink(
+        string $entityKeyOrClassName,
+        ?string $label = null,
+        ?string $icon = null,
+        ?Closure $badge = null,
+    ): self {
         if (class_exists($entityKeyOrClassName)) {
             $entityKeyOrClassName = app(SharpEntityManager::class)
                 ->entityKeyFor($entityKeyOrClassName);
         }
 
-        $this->items[] = (new SharpMenuItemLink($label, $icon))
+        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge))
             ->setEntity($entityKeyOrClassName);
 
         return $this;
     }
 
-    public function addExternalLink(string $url, ?string $label = null, ?string $icon = null): self
-    {
-        $this->items[] = (new SharpMenuItemLink($label, $icon))->setUrl($url);
+    public function addExternalLink(
+        string $url,
+        ?string $label = null,
+        ?string $icon = null,
+        ?Closure $badge = null,
+    ): self {
+        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge))->setUrl($url);
 
         return $this;
     }
diff --git a/src/Utils/Menu/SharpMenuItemLink.php b/src/Utils/Menu/SharpMenuItemLink.php
index d6f5d7294..c9127ce9c 100644
--- a/src/Utils/Menu/SharpMenuItemLink.php
+++ b/src/Utils/Menu/SharpMenuItemLink.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Utils\Menu;
 
+use Closure;
 use Code16\Sharp\Utils\Entities\SharpDashboardEntity;
 use Code16\Sharp\Utils\Entities\SharpEntity;
 use Code16\Sharp\Utils\Entities\SharpEntityManager;
@@ -12,7 +13,11 @@ class SharpMenuItemLink extends SharpMenuItem
     protected ?string $entityKey = null;
     protected ?string $url = null;
 
-    public function __construct(protected ?string $label, protected ?string $icon) {}
+    public function __construct(
+        protected ?string $label,
+        protected ?string $icon,
+        protected ?Closure $badge,
+    ) {}
 
     public function setEntity(string $entityKey): self
     {
@@ -34,6 +39,15 @@ public function getIcon(): ?string
         return $this->icon;
     }
 
+    public function getBadge(): ?string
+    {
+        if ($this->badge instanceof Closure) {
+            return ($this->badge)();
+        }
+
+        return null;
+    }
+
     public function isDashboardEntity(): bool
     {
         return $this->isEntity() && $this->entity->isDashboard();

From 8197db0a79fd3c24638cc6d59fe19f75b76ac4b1 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 May 2025 17:57:12 +0200
Subject: [PATCH 03/18] Improve UI

---
 resources/js/Layouts/Layout.vue           | 9 +++++----
 resources/js/components/ui/badge/index.ts | 1 +
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
index e2b93aa49..78e98b6e0 100644
--- a/resources/js/Layouts/Layout.vue
+++ b/resources/js/Layouts/Layout.vue
@@ -58,6 +58,7 @@ export function useMenuBoundaryElement() {
     import GlobalSearch from "@/components/GlobalSearch.vue";
     import { vScrollIntoView } from "@/directives/scroll-into-view";
     import Content from "@/components/Content.vue";
+    import { Badge } from "@/components/ui/badge";
 
     const dialogs = useDialogs();
     const menu = useMenu();
@@ -166,9 +167,9 @@ export function useMenuBoundaryElement() {
                                                                                 {{ childItem.label }}
                                                                             </span>
                                                                             <template v-if="childItem.badge != null">
-                                                                                <SidebarMenuBadge>
+                                                                                <Badge class="-my-px -mr-1" variant="sidebar">
                                                                                     {{ childItem.badge }}
-                                                                                </SidebarMenuBadge>
+                                                                                </Badge>
                                                                             </template>
                                                                             <template v-if="childItem.isExternalLink">
                                                                                 <ExternalLink class="size-4 opacity-50" />
@@ -202,9 +203,9 @@ export function useMenuBoundaryElement() {
                                                                 {{ item.label }}
                                                             </span>
                                                             <template v-if="item.badge != null">
-                                                                <SidebarMenuBadge>
+                                                                <Badge class="-my-px -mr-1" variant="sidebar">
                                                                     {{ item.badge }}
-                                                                </SidebarMenuBadge>
+                                                                </Badge>
                                                             </template>
                                                             <template v-if="item.isExternalLink">
                                                                 <ExternalLink class="size-4 opacity-50" />
diff --git a/resources/js/components/ui/badge/index.ts b/resources/js/components/ui/badge/index.ts
index a774b9299..99bcf76c5 100644
--- a/resources/js/components/ui/badge/index.ts
+++ b/resources/js/components/ui/badge/index.ts
@@ -14,6 +14,7 @@ export const badgeVariants = cva(
         destructive:
           'border-transparent bg-destructive text-destructive-foreground dark:bg-destructive/60 hover:bg-destructive/80',
         outline: 'text-foreground',
+        sidebar: 'relative isolate before:-z-10 before:absolute before:inset-0 before:rounded-full before:bg-background/50 border-primary/10 text-primary',
       },
     },
     defaultVariants: {

From 3301c265991f79c22639b94627e0243a7c4c548d Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 May 2025 18:22:54 +0200
Subject: [PATCH 04/18] Allow page alert button

---
 demo/app/Sharp/Posts/PostList.php          |  6 +++++-
 resources/js/components/PageAlert.vue      | 23 ++++++++++++++++------
 resources/js/components/ui/button/index.ts |  2 +-
 resources/js/types/generated.d.ts          |  2 ++
 src/Data/PageAlertData.php                 |  2 ++
 src/Utils/PageAlerts/PageAlert.php         | 13 ++++++++++++
 6 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/demo/app/Sharp/Posts/PostList.php b/demo/app/Sharp/Posts/PostList.php
index 9b0d79cdb..e5bb803db 100644
--- a/demo/app/Sharp/Posts/PostList.php
+++ b/demo/app/Sharp/Posts/PostList.php
@@ -73,7 +73,11 @@ public function buildListConfig(): void
 
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
-        if (! auth()->user()->isAdmin()) {
+        if (($count = Post::where('state', 'draft')->count()) > 0) {
+            $pageAlert
+                ->setMessage(sprintf('%d posts are still in draft', $count))
+                ->setButton('Show drafts', LinkToEntityList::make(sharp()->context()->entityKey())->addFilter(StateFilter::class, 'draft'));
+        } elseif (! auth()->user()->isAdmin()) {
             $pageAlert
                 ->setMessage('As an editor, you can only edit your posts; you can see other posts except those which are still in draft.')
                 ->setLevelInfo();
diff --git a/resources/js/components/PageAlert.vue b/resources/js/components/PageAlert.vue
index 3042aa41d..6257fc678 100644
--- a/resources/js/components/PageAlert.vue
+++ b/resources/js/components/PageAlert.vue
@@ -2,10 +2,14 @@
     import { PageAlertData } from "@/types";
     import { Alert, AlertDescription } from "@/components/ui/alert";
     import { Info, TriangleAlert, OctagonAlert } from 'lucide-vue-next';
+    import { Button } from "@/components/ui/button";
+    import { isSharpLink } from "@/utils/url";
+    import { Link } from '@inertiajs/vue3';
 
     defineProps<{
         pageAlert: PageAlertData,
     }>();
+
 </script>
 
 <template>
@@ -25,11 +29,18 @@
         <template v-else>
             <Info class="w-4 h-4" />
         </template>
-        <AlertDescription :class="{
-            'font-medium': pageAlert.level === 'warning' || pageAlert.level === 'danger',
-            'text-foreground': pageAlert.level === 'warning',
-        }">
-            <div v-html="pageAlert.text"></div>
-        </AlertDescription>
+        <div class="flex items-center gap-4">
+            <AlertDescription class="flex-1" :class="{
+                'font-medium': pageAlert.level === 'warning' || pageAlert.level === 'danger',
+                'text-foreground': pageAlert.level === 'warning',
+            }">
+                <div v-html="pageAlert.text"></div>
+            </AlertDescription>
+            <template v-if="pageAlert.buttonLabel && window.location.origin + $page.url !== pageAlert.buttonUrl">
+                <Button class="-my-2" :as="isSharpLink(pageAlert.buttonUrl) ? Link : 'a'" size="sm" variant="link" :href="pageAlert.buttonUrl">
+                    {{ pageAlert.buttonLabel }}
+                </Button>
+            </template>
+        </div>
     </Alert>
 </template>
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
index ad5334ac9..42541865a 100644
--- a/resources/js/components/ui/button/index.ts
+++ b/resources/js/components/ui/button/index.ts
@@ -15,7 +15,7 @@ export const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-primary underline-offset-4 underline decoration-primary/40 hover:decoration-primary hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index fa240de88..851454db7 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -685,6 +685,8 @@ export type OrderedListWidgetData = {
 export type PageAlertData = {
   level: PageAlertLevel;
   text: string;
+  buttonLabel: string | null;
+  buttonUrl: string | null;
 };
 export type PageAlertLevel =
   | "danger"
diff --git a/src/Data/PageAlertData.php b/src/Data/PageAlertData.php
index 37074198d..55820c3b3 100644
--- a/src/Data/PageAlertData.php
+++ b/src/Data/PageAlertData.php
@@ -12,6 +12,8 @@ final class PageAlertData extends Data
     public function __construct(
         public PageAlertLevel $level,
         public string $text,
+        public ?string $buttonLabel = null,
+        public ?string $buttonUrl = null,
     ) {}
 
     public static function from(array $pageAlert): self
diff --git a/src/Utils/PageAlerts/PageAlert.php b/src/Utils/PageAlerts/PageAlert.php
index 68d950f21..6fe3a6eb5 100644
--- a/src/Utils/PageAlerts/PageAlert.php
+++ b/src/Utils/PageAlerts/PageAlert.php
@@ -4,12 +4,15 @@
 
 use Closure;
 use Code16\Sharp\Enums\PageAlertLevel;
+use Code16\Sharp\Utils\Links\SharpLinkTo;
 
 class PageAlert
 {
     protected PageAlertLevel $pageAlertLevel = PageAlertLevel::Info;
     protected ?string $text;
     protected array $data;
+    protected ?string $buttonLabel = null;
+    protected ?string $buttonUrl = null;
 
     final public function setData(array $data): self
     {
@@ -59,12 +62,22 @@ public function setMessage(Closure|string $message): self
         return $this;
     }
 
+    public function setButton(string $label, string|SharpLinkTo $link): self
+    {
+        $this->buttonLabel = $label;
+        $this->buttonUrl = $link instanceof SharpLinkTo ? $link->renderAsUrl() : $link;
+
+        return $this;
+    }
+
     final public function toArray(): ?array
     {
         return $this->isFilled()
             ? [
                 'level' => $this->pageAlertLevel,
                 'text' => $this->text,
+                'buttonLabel' => $this->buttonLabel,
+                'buttonUrl' => $this->buttonUrl,
             ]
             : null;
     }

From fc6c22170524f0991e9578ce77628e9513e31565 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 22 May 2025 19:42:42 +0200
Subject: [PATCH 05/18] wip entity list badge

---
 demo/app/Sharp/Posts/PostList.php             | 11 +++++++
 .../js/entity-list/components/EntityList.vue  |  9 +++++-
 resources/js/types/generated.d.ts             |  2 +-
 src/Data/EntityList/EntityListFieldData.php   |  2 +-
 .../Fields/EntityListBadgeField.php           | 30 +++++++++++++++++++
 .../SharpBadgeCustomTransformer.php           | 17 +++++++++++
 6 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 src/EntityList/Fields/EntityListBadgeField.php
 create mode 100644 src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php

diff --git a/demo/app/Sharp/Posts/PostList.php b/demo/app/Sharp/Posts/PostList.php
index 9b0d79cdb..f8f9c3045 100644
--- a/demo/app/Sharp/Posts/PostList.php
+++ b/demo/app/Sharp/Posts/PostList.php
@@ -13,6 +13,7 @@
 use App\Sharp\Utils\Filters\CategoryFilter;
 use App\Sharp\Utils\Filters\PeriodFilter;
 use App\Sharp\Utils\Filters\StateFilter;
+use Code16\Sharp\EntityList\Fields\EntityListBadgeField;
 use Code16\Sharp\EntityList\Fields\EntityListField;
 use Code16\Sharp\EntityList\Fields\EntityListFieldsContainer;
 use Code16\Sharp\EntityList\Fields\EntityListStateField;
@@ -22,6 +23,7 @@
 use Code16\Sharp\Utils\PageAlerts\PageAlert;
 use Code16\Sharp\Utils\Transformers\Attributes\Eloquent\SharpTagsTransformer;
 use Code16\Sharp\Utils\Transformers\Attributes\Eloquent\SharpUploadModelThumbnailUrlTransformer;
+use Code16\Sharp\Utils\Transformers\Attributes\SharpBadgeCustomTransformer;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Database\Eloquent\Builder;
 
@@ -30,6 +32,13 @@ class PostList extends SharpEntityList
     protected function buildList(EntityListFieldsContainer $fields): void
     {
         $fields
+            ->addField(
+                EntityListField::make('is_draft')
+                    ->setWidth(.01)
+            )
+            // ->addField(
+            //     EntityListBadgeField::make('is_draft')
+            // )
             ->addField(
                 EntityListField::make('cover')
                     ->setWidth(.1)
@@ -172,6 +181,8 @@ function (Builder $builder) {
             );
 
         return $this
+            ->setCustomTransformer('is_draft', fn ($value, Post $instance) => new SharpBadgeCustomTransformer()->apply($instance->isDraft()))
+            // ->setCustomTransformer('is_draft', fn ($value, Post $instance) => $instance->isDraft())
             ->setCustomTransformer('title', function ($value, Post $instance) {
                 return sprintf(
                     '<div>%s</div><div><small>[fr] %s</div>',
diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
index 491ca2d38..a3e56d0ae 100644
--- a/resources/js/entity-list/components/EntityList.vue
+++ b/resources/js/entity-list/components/EntityList.vue
@@ -642,7 +642,7 @@
                                                         '--width':
                                                             field.width === 'fill' ? (100 / visibleFields.length)+'%' :
                                                             field.width ? field.width :
-                                                            field.type === 'state' ? 0 : null
+                                                            field.type === 'state' || field.type === 'badge' ? 0 : null
                                                     }"
                                                 >
                                                     <template v-if="field.sortable">
@@ -737,6 +737,13 @@
                                                             </DropdownMenu>
                                                         </TableCell>
                                                     </template>
+                                                    <template v-else-if="field.type === 'badge'">
+                                                        <TableCell class="max-w-[70cqw]">
+                                                            <template v-if="item[field.key] === true">
+                                                                <div class="size-2 bg-primary rounded-full"></div>
+                                                            </template>
+                                                        </TableCell>
+                                                    </template>
                                                     <template v-else>
                                                         <TableCell class="max-w-[70cqw]">
                                                             <template v-if="field.html && typeof item[field.key] === 'string'">
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index fa240de88..0db1bad59 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -157,7 +157,7 @@ export type EntityListData = {
   pageAlert: PageAlertData | null;
 };
 export type EntityListFieldData = {
-  type: "text" | "state";
+  type: "text" | "state" | "badge";
   key: string;
   label: string;
   sortable: boolean;
diff --git a/src/Data/EntityList/EntityListFieldData.php b/src/Data/EntityList/EntityListFieldData.php
index e5297142f..ed55e3f99 100644
--- a/src/Data/EntityList/EntityListFieldData.php
+++ b/src/Data/EntityList/EntityListFieldData.php
@@ -12,7 +12,7 @@
 final class EntityListFieldData extends Data
 {
     public function __construct(
-        #[LiteralTypeScriptType('"text"|"state"')]
+        #[LiteralTypeScriptType('"text"|"state"|"badge"')]
         public string $type,
         public string $key,
         public string $label,
diff --git a/src/EntityList/Fields/EntityListBadgeField.php b/src/EntityList/Fields/EntityListBadgeField.php
new file mode 100644
index 000000000..687a01cf3
--- /dev/null
+++ b/src/EntityList/Fields/EntityListBadgeField.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Code16\Sharp\EntityList\Fields;
+
+class EntityListBadgeField implements IsEntityListField
+{
+    use HasCommonEntityListFieldAttributes;
+
+    private function __construct(string $key)
+    {
+        $this->key = $key;
+    }
+
+    public static function make(string $key): self
+    {
+        return new static($key);
+    }
+
+    public function getFieldProperties(): array
+    {
+        return [
+            'type' => 'badge',
+            'key' => $this->key,
+            'label' => $this->label,
+            'sortable' => $this->sortable,
+            'width' => $this->width,
+            'hideOnXS' => $this->hideOnXs,
+        ];
+    }
+}
diff --git a/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php b/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php
new file mode 100644
index 000000000..c438438d4
--- /dev/null
+++ b/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Code16\Sharp\Utils\Transformers\Attributes;
+
+use Code16\Sharp\Utils\Transformers\SharpAttributeTransformer;
+
+class SharpBadgeCustomTransformer implements SharpAttributeTransformer
+{
+    public function apply($value, $instance = null, $attribute = null)
+    {
+        if ($value === true) {
+            return '<div style="width: .5rem; height: .5rem; background: var(--primary); border-radius: 50%"></div>';
+        }
+
+        return '';
+    }
+}

From 5ea0aa7f94de72cf97bc3d7f8063eac5bb82b8cb Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Fri, 23 May 2025 09:20:33 +0200
Subject: [PATCH 06/18] CS

---
 demo/app/Sharp/Posts/PostList.php | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/demo/app/Sharp/Posts/PostList.php b/demo/app/Sharp/Posts/PostList.php
index e5bb803db..256063c70 100644
--- a/demo/app/Sharp/Posts/PostList.php
+++ b/demo/app/Sharp/Posts/PostList.php
@@ -73,11 +73,16 @@ public function buildListConfig(): void
 
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
-        if (($count = Post::where('state', 'draft')->count()) > 0) {
+        if (auth()->user()->isAdmin() && ($count = Post::where('state', 'draft')->count()) > 0) {
             $pageAlert
                 ->setMessage(sprintf('%d posts are still in draft', $count))
-                ->setButton('Show drafts', LinkToEntityList::make(sharp()->context()->entityKey())->addFilter(StateFilter::class, 'draft'));
-        } elseif (! auth()->user()->isAdmin()) {
+                ->setButton(
+                    'Show drafts',
+                    LinkToEntityList::make(PostEntity::class)->addFilter(StateFilter::class, 'draft')
+                );
+        }
+
+        if (! auth()->user()->isAdmin()) {
             $pageAlert
                 ->setMessage('As an editor, you can only edit your posts; you can see other posts except those which are still in draft.')
                 ->setLevelInfo();

From f275188864bdb0b158cedf6dd4e41b50dd8673b3 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 23 May 2025 15:05:46 +0200
Subject: [PATCH 07/18] handle tooltip

---
 demo/app/Sharp/Posts/PostList.php             | 11 +--
 resources/js/entity-list/EntityList.ts        | 35 ++++-----
 .../js/entity-list/components/EntityList.vue  | 77 ++++++++++++-------
 resources/js/types/generated.d.ts             |  3 +-
 src/Data/EntityList/EntityListFieldData.php   |  3 +-
 .../Fields/EntityListBadgeField.php           | 10 +++
 .../SharpBadgeCustomTransformer.php           | 17 ----
 7 files changed, 83 insertions(+), 73 deletions(-)
 delete mode 100644 src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php

diff --git a/demo/app/Sharp/Posts/PostList.php b/demo/app/Sharp/Posts/PostList.php
index f8f9c3045..e1b53aafc 100644
--- a/demo/app/Sharp/Posts/PostList.php
+++ b/demo/app/Sharp/Posts/PostList.php
@@ -23,7 +23,6 @@
 use Code16\Sharp\Utils\PageAlerts\PageAlert;
 use Code16\Sharp\Utils\Transformers\Attributes\Eloquent\SharpTagsTransformer;
 use Code16\Sharp\Utils\Transformers\Attributes\Eloquent\SharpUploadModelThumbnailUrlTransformer;
-use Code16\Sharp\Utils\Transformers\Attributes\SharpBadgeCustomTransformer;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Database\Eloquent\Builder;
 
@@ -33,12 +32,9 @@ protected function buildList(EntityListFieldsContainer $fields): void
     {
         $fields
             ->addField(
-                EntityListField::make('is_draft')
-                    ->setWidth(.01)
+                EntityListBadgeField::make('is_draft')
+                    ->setTooltip('This post is draft')
             )
-            // ->addField(
-            //     EntityListBadgeField::make('is_draft')
-            // )
             ->addField(
                 EntityListField::make('cover')
                     ->setWidth(.1)
@@ -181,8 +177,7 @@ function (Builder $builder) {
             );
 
         return $this
-            ->setCustomTransformer('is_draft', fn ($value, Post $instance) => new SharpBadgeCustomTransformer()->apply($instance->isDraft()))
-            // ->setCustomTransformer('is_draft', fn ($value, Post $instance) => $instance->isDraft())
+            ->setCustomTransformer('is_draft', fn ($value, Post $instance) => $instance->isDraft())
             ->setCustomTransformer('title', function ($value, Post $instance) {
                 return sprintf(
                     '<div>%s</div><div><small>[fr] %s</div>',
diff --git a/resources/js/entity-list/EntityList.ts b/resources/js/entity-list/EntityList.ts
index 625cf081a..14d9ecfbb 100644
--- a/resources/js/entity-list/EntityList.ts
+++ b/resources/js/entity-list/EntityList.ts
@@ -2,12 +2,12 @@ import {
     CommandData,
     ConfigCommandsData,
     EntityListData,
+    EntityListFieldData,
     EntityStateValueData,
     FilterData,
 } from "@/types";
 import { getAppendableParentUri, route } from "@/utils/url";
 import { EntityListInstance, InstanceId } from "./types";
-import { toRaw } from "vue";
 
 export class EntityList implements EntityListData {
     authorizations: EntityListData['authorizations'];
@@ -38,23 +38,6 @@ export class EntityList implements EntityListData {
         this.hiddenCommands = hiddenCommands;
     }
 
-    toData() {
-        return Object.fromEntries(
-            Object.entries({
-                authorizations: this.authorizations,
-                config: this.config,
-                data: this.data,
-                fields: this.fields,
-                forms: this.forms,
-                meta: this.meta,
-                pageAlert: this.pageAlert,
-                query: this.query,
-                filterValues: this.filterValues,
-                title: this.title,
-            }).map(([key, value]) => [key, toRaw(value)])
-        ) as EntityListData;
-    }
-
     get count() {
         return this.meta?.total ?? this.data.length;
     }
@@ -193,4 +176,20 @@ export class EntityList implements EntityListData {
             !this.config.deleteHidden && this.instanceCanDelete(instance)
         );
     }
+
+    fieldShouldBeVisible(field: EntityListFieldData, showEntityState: boolean): boolean {
+        if(field.type === 'badge') {
+            return this.data.some(item =>
+                item[field.key] === true
+                || typeof item[field.key] === 'number'
+                || typeof item[field.key] === 'string' && item[field.key].length > 0
+            );
+        }
+
+        if(field.type === 'state') {
+            return this.config.state && showEntityState;
+        }
+
+        return true;
+    }
 }
diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
index a3e56d0ae..06b735da3 100644
--- a/resources/js/entity-list/components/EntityList.vue
+++ b/resources/js/entity-list/components/EntityList.vue
@@ -310,7 +310,13 @@
     }
 
     const breakpoints = useBreakpoints();
-    const visibleFields = computed(() => props.entityList.fields.filter(field => breakpoints.md ? true : !field.hideOnXS));
+    const visibleFields = computed(() =>
+        props.entityList.fields
+            .filter(field =>
+                (breakpoints.md || !field.hideOnXS)
+                && props.entityList.fieldShouldBeVisible(field, props.showEntityState)
+            )
+    );
 
     watch([sortableTableBody, () => props.highlightedInstanceId], () => {
         if(sortableTableBody.value && props.highlightedInstanceId) {
@@ -649,7 +655,7 @@
                                                         <Button
                                                             variant="ghost"
                                                             size="sm"
-                                                            class="-ml-3 h-8 data-[state=open]:bg-accent"
+                                                            class="-ml-3 h-8 gap-2 data-[state=open]:bg-accent"
                                                             @click="onSortClick(field)"
                                                             :aria-label="
                                                                 nextSortDir(field) === 'asc'
@@ -659,13 +665,15 @@
                                                                         : __('sharp::entity_list.sort_default')
                                                             "
                                                         >
-                                                            <span>{{ field.label }}</span>
+                                                            <template v-if="field.label">
+                                                                <span>{{ field.label }}</span>
+                                                            </template>
                                                             <template v-if="entityList.currentSort === field.key">
-                                                                <ArrowDown v-if="entityList.currentSortDir === 'desc'" class="ml-2 h-3.5 w-3.5" />
-                                                                <ArrowUp v-else-if="entityList.currentSortDir === 'asc'" class="ml-2 h-3.5 w-3.5" />
+                                                                <ArrowDown v-if="entityList.currentSortDir === 'desc'" class="size-3.5" />
+                                                                <ArrowUp v-else-if="entityList.currentSortDir === 'asc'" class="size-3.5" />
                                                             </template>
                                                             <template v-else>
-                                                                <ChevronsUpDown class="ml-2 h-3.5 w-3.5" />
+                                                                <ChevronsUpDown class="size-3.5" />
                                                             </template>
                                                         </Button>
                                                     </template>
@@ -712,8 +720,8 @@
                                                     </TableCell>
                                                 </template>
                                                 <template v-for="(field, fieldIndex) in visibleFields" :key="field.key">
-                                                    <template v-if="field.type === 'state' && entityList.config.state && showEntityState">
-                                                        <TableCell class="max-w-[70cqw]">
+                                                    <TableCell class="max-w-[70cqw]">
+                                                        <template v-if="field.type === 'state'">
                                                             <DropdownMenu>
                                                                 <DropdownMenuTrigger as-child>
                                                                     <Button class="relative disabled:opacity-100 -mx-3" variant="ghost" size="sm" :disabled="!entityList.instanceCanUpdateState(item)" :aria-label="__('sharp::entity_list.state_dropdown.aria_label', { current_state_label: entityList.instanceStateValue(item)?.label })">
@@ -735,17 +743,32 @@
                                                                     </template>
                                                                 </DropdownMenuContent>
                                                             </DropdownMenu>
-                                                        </TableCell>
-                                                    </template>
-                                                    <template v-else-if="field.type === 'badge'">
-                                                        <TableCell class="max-w-[70cqw]">
-                                                            <template v-if="item[field.key] === true">
-                                                                <div class="size-2 bg-primary rounded-full"></div>
-                                                            </template>
-                                                        </TableCell>
-                                                    </template>
-                                                    <template v-else>
-                                                        <TableCell class="max-w-[70cqw]">
+                                                        </template>
+                                                        <template v-else-if="field.type === 'badge'">
+                                                            <TooltipProvider>
+                                                                <Tooltip :disabled="!field.tooltip" :delay-duration="0">
+                                                                    <TooltipTrigger as-child>
+                                                                        <div :class="field.tooltip ? 'relative z-2' : ''">
+                                                                            <template v-if="field.tooltip">
+                                                                                <div class="absolute -inset-2"></div>
+                                                                            </template>
+                                                                            <template v-if="item[field.key] === true">
+                                                                                <div class="size-2 bg-primary rounded-full"></div>
+                                                                            </template>
+                                                                            <template v-else-if="typeof item[field.key] === 'number' || (typeof item[field.key] === 'string' && item[field.key].length)">
+                                                                                <Badge class="px-1.5 justify-center min-w-5.5">
+                                                                                    {{ item[field.key] }}
+                                                                                </Badge>
+                                                                            </template>
+                                                                        </div>
+                                                                    </TooltipTrigger>
+                                                                    <TooltipContent :side-offset="10">
+                                                                        <div v-html="field.tooltip"></div>
+                                                                    </TooltipContent>
+                                                                </Tooltip>
+                                                            </TooltipProvider>
+                                                        </template>
+                                                        <template v-else>
                                                             <template v-if="field.html && typeof item[field.key] === 'string'">
                                                                 <Content class="break-words [&_a]:relative [&_a]:z-10"
                                                                     :class="{ '[&_a]:pointer-events-none': selecting || reordering }"
@@ -755,14 +778,14 @@
                                                             <template v-else>
                                                                 {{ item[field.key] }}
                                                             </template>
-                                                            <template v-if="fieldIndex === 0 && entityList.instanceUrl(item) && !selecting && !reordering">
-                                                                <Link class="absolute inset-0 ring-ring ring-inset focus-visible:outline-none focus-visible:ring-2 focus:group-data-highlighted/row:ring-2"
-                                                                    data-row-action
-                                                                    :href="entityList.instanceUrl(item)"
-                                                                ></Link>
-                                                            </template>
-                                                        </TableCell>
-                                                    </template>
+                                                        </template>
+                                                        <template v-if="fieldIndex === 0 && entityList.instanceUrl(item) && !selecting && !reordering">
+                                                            <Link class="absolute inset-0 ring-ring ring-inset focus-visible:outline-none focus-visible:ring-2 focus:group-data-highlighted/row:ring-2"
+                                                                data-row-action
+                                                                :href="entityList.instanceUrl(item)"
+                                                            ></Link>
+                                                        </template>
+                                                    </TableCell>
                                                 </template>
 
                                                 <TableCell class="w-0 pr-6 @5xl:pl-4 hidden group-data-reordering:table-cell">
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index 0db1bad59..031056025 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -163,7 +163,8 @@ export type EntityListFieldData = {
   sortable: boolean;
   width: string | null;
   hideOnXS: boolean;
-  html?: boolean;
+  html: boolean | null;
+  tooltip: string | null;
 };
 export type EntityListMultiformData = {
   key: string;
diff --git a/src/Data/EntityList/EntityListFieldData.php b/src/Data/EntityList/EntityListFieldData.php
index ed55e3f99..ffcd35aa3 100644
--- a/src/Data/EntityList/EntityListFieldData.php
+++ b/src/Data/EntityList/EntityListFieldData.php
@@ -4,7 +4,6 @@
 
 use Code16\Sharp\Data\Data;
 use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
-use Spatie\TypeScriptTransformer\Attributes\Optional;
 
 /**
  * @internal
@@ -19,7 +18,7 @@ public function __construct(
         public bool $sortable,
         public ?string $width,
         public bool $hideOnXS,
-        #[Optional]
         public ?bool $html = null,
+        public ?string $tooltip = null,
     ) {}
 }
diff --git a/src/EntityList/Fields/EntityListBadgeField.php b/src/EntityList/Fields/EntityListBadgeField.php
index 687a01cf3..3f93e610f 100644
--- a/src/EntityList/Fields/EntityListBadgeField.php
+++ b/src/EntityList/Fields/EntityListBadgeField.php
@@ -6,6 +6,8 @@ class EntityListBadgeField implements IsEntityListField
 {
     use HasCommonEntityListFieldAttributes;
 
+    protected ?string $tooltip = null;
+
     private function __construct(string $key)
     {
         $this->key = $key;
@@ -16,6 +18,13 @@ public static function make(string $key): self
         return new static($key);
     }
 
+    public function setTooltip(string $tooltip): self
+    {
+        $this->tooltip = $tooltip;
+
+        return $this;
+    }
+
     public function getFieldProperties(): array
     {
         return [
@@ -25,6 +34,7 @@ public function getFieldProperties(): array
             'sortable' => $this->sortable,
             'width' => $this->width,
             'hideOnXS' => $this->hideOnXs,
+            'tooltip' => $this->tooltip,
         ];
     }
 }
diff --git a/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php b/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php
deleted file mode 100644
index c438438d4..000000000
--- a/src/Utils/Transformers/Attributes/SharpBadgeCustomTransformer.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<?php
-
-namespace Code16\Sharp\Utils\Transformers\Attributes;
-
-use Code16\Sharp\Utils\Transformers\SharpAttributeTransformer;
-
-class SharpBadgeCustomTransformer implements SharpAttributeTransformer
-{
-    public function apply($value, $instance = null, $attribute = null)
-    {
-        if ($value === true) {
-            return '<div style="width: .5rem; height: .5rem; background: var(--primary); border-radius: 50%"></div>';
-        }
-
-        return '';
-    }
-}

From 2de74f5f7c733cdc0edd708308c049616f8d307d Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 23 May 2025 16:20:15 +0200
Subject: [PATCH 08/18] Increase size

---
 resources/js/entity-list/components/EntityList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
index 06b735da3..ac4b04c64 100644
--- a/resources/js/entity-list/components/EntityList.vue
+++ b/resources/js/entity-list/components/EntityList.vue
@@ -753,7 +753,7 @@
                                                                                 <div class="absolute -inset-2"></div>
                                                                             </template>
                                                                             <template v-if="item[field.key] === true">
-                                                                                <div class="size-2 bg-primary rounded-full"></div>
+                                                                                <div class="size-2.5 bg-primary rounded-full"></div>
                                                                             </template>
                                                                             <template v-else-if="typeof item[field.key] === 'number' || (typeof item[field.key] === 'string' && item[field.key].length)">
                                                                                 <Badge class="px-1.5 justify-center min-w-5.5">

From 6f62642ad0234a6045468a16345b94755606bf89 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 23 May 2025 16:54:27 +0200
Subject: [PATCH 09/18] Add tests

---
 resources/js/components/PageAlert.vue         |  2 +-
 src/Utils/PageAlerts/PageAlert.php            |  5 +--
 ...iEntityListEntityCommandControllerTest.php |  8 +++--
 ...ntityListInstanceCommandControllerTest.php |  8 +++--
 tests/Http/DashboardControllerTest.php        |  7 ++--
 tests/Http/EntityListControllerTest.php       | 23 +++++++++++--
 tests/Http/Form/FormControllerTest.php        |  7 ++--
 tests/Http/ShowControllerTest.php             | 10 ++++--
 tests/Unit/Dashboard/SharpDashboardTest.php   |  5 ++-
 tests/Unit/EntityList/SharpEntityListTest.php | 32 ++++++++++++++++++-
 tests/Unit/Form/SharpFormTest.php             |  5 ++-
 tests/Unit/Show/SharpShowTestDefault.php      |  5 ++-
 12 files changed, 96 insertions(+), 21 deletions(-)

diff --git a/resources/js/components/PageAlert.vue b/resources/js/components/PageAlert.vue
index 6257fc678..23d98b4f1 100644
--- a/resources/js/components/PageAlert.vue
+++ b/resources/js/components/PageAlert.vue
@@ -36,7 +36,7 @@
             }">
                 <div v-html="pageAlert.text"></div>
             </AlertDescription>
-            <template v-if="pageAlert.buttonLabel && window.location.origin + $page.url !== pageAlert.buttonUrl">
+            <template v-if="pageAlert.buttonLabel">
                 <Button class="-my-2" :as="isSharpLink(pageAlert.buttonUrl) ? Link : 'a'" size="sm" variant="link" :href="pageAlert.buttonUrl">
                     {{ pageAlert.buttonLabel }}
                 </Button>
diff --git a/src/Utils/PageAlerts/PageAlert.php b/src/Utils/PageAlerts/PageAlert.php
index 6fe3a6eb5..c282c3903 100644
--- a/src/Utils/PageAlerts/PageAlert.php
+++ b/src/Utils/PageAlerts/PageAlert.php
@@ -5,6 +5,7 @@
 use Closure;
 use Code16\Sharp\Enums\PageAlertLevel;
 use Code16\Sharp\Utils\Links\SharpLinkTo;
+use Illuminate\Support\Arr;
 
 class PageAlert
 {
@@ -73,12 +74,12 @@ public function setButton(string $label, string|SharpLinkTo $link): self
     final public function toArray(): ?array
     {
         return $this->isFilled()
-            ? [
+            ? Arr::whereNotNull([
                 'level' => $this->pageAlertLevel,
                 'text' => $this->text,
                 'buttonLabel' => $this->buttonLabel,
                 'buttonUrl' => $this->buttonUrl,
-            ]
+            ])
             : null;
     }
 
diff --git a/tests/Http/Api/Commands/ApiEntityListEntityCommandControllerTest.php b/tests/Http/Api/Commands/ApiEntityListEntityCommandControllerTest.php
index 30f09f659..c5869b343 100644
--- a/tests/Http/Api/Commands/ApiEntityListEntityCommandControllerTest.php
+++ b/tests/Http/Api/Commands/ApiEntityListEntityCommandControllerTest.php
@@ -1,6 +1,7 @@
 <?php
 
 use Code16\Sharp\EntityList\Commands\EntityCommand;
+use Code16\Sharp\Enums\PageAlertLevel;
 use Code16\Sharp\Exceptions\Form\SharpApplicativeException;
 use Code16\Sharp\Exceptions\Form\SharpFormFieldLayoutException;
 use Code16\Sharp\Form\Fields\SharpFormListField;
@@ -633,7 +634,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
                     {
                         $pageAlert
                             ->setLevelInfo()
-                            ->setMessage('My page alert');
+                            ->setMessage('My page alert')
+                            ->setButton('My button', 'https://example.com');
                     }
 
                     public function buildFormFields(FieldsContainer $formFields): void
@@ -657,7 +659,9 @@ public function execute(array $data = []): array
         ->assertJsonFragment([
             'pageAlert' => [
                 'text' => 'My page alert',
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
+                'buttonLabel' => 'My button',
+                'buttonUrl' => 'https://example.com',
             ],
         ]);
 });
diff --git a/tests/Http/Api/Commands/ApiEntityListInstanceCommandControllerTest.php b/tests/Http/Api/Commands/ApiEntityListInstanceCommandControllerTest.php
index 9a12dc88f..ef729e0a6 100644
--- a/tests/Http/Api/Commands/ApiEntityListInstanceCommandControllerTest.php
+++ b/tests/Http/Api/Commands/ApiEntityListInstanceCommandControllerTest.php
@@ -1,6 +1,7 @@
 <?php
 
 use Code16\Sharp\EntityList\Commands\InstanceCommand;
+use Code16\Sharp\Enums\PageAlertLevel;
 use Code16\Sharp\Exceptions\Form\SharpApplicativeException;
 use Code16\Sharp\Form\Fields\SharpFormTextField;
 use Code16\Sharp\Tests\Fixtures\Entities\PersonEntity;
@@ -462,7 +463,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
                     {
                         $pageAlert
                             ->setLevelInfo()
-                            ->setMessage('My page alert');
+                            ->setMessage('My page alert')
+                            ->setButton('My button', 'https://example.com');
                     }
 
                     public function buildFormFields(FieldsContainer $formFields): void
@@ -485,7 +487,9 @@ public function execute($instanceId, array $data = []): array
         ->assertJsonFragment([
             'pageAlert' => [
                 'text' => 'My page alert',
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
+                'buttonLabel' => 'My button',
+                'buttonUrl' => 'https://example.com',
             ],
         ]);
 });
diff --git a/tests/Http/DashboardControllerTest.php b/tests/Http/DashboardControllerTest.php
index 7b89a1458..17fe3f775 100644
--- a/tests/Http/DashboardControllerTest.php
+++ b/tests/Http/DashboardControllerTest.php
@@ -85,7 +85,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     });
 
@@ -93,8 +94,10 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
             ->where('dashboard.pageAlert', [
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
                 'text' => 'My page alert',
+                'buttonLabel' => 'My button',
+                'buttonUrl' => 'https://example.com',
             ])
             ->etc()
         );
diff --git a/tests/Http/EntityListControllerTest.php b/tests/Http/EntityListControllerTest.php
index af13d4015..522ccb6ea 100644
--- a/tests/Http/EntityListControllerTest.php
+++ b/tests/Http/EntityListControllerTest.php
@@ -1,6 +1,7 @@
 <?php
 
 use Code16\Sharp\Auth\SharpEntityPolicy;
+use Code16\Sharp\EntityList\Fields\EntityListBadgeField;
 use Code16\Sharp\EntityList\Fields\EntityListField;
 use Code16\Sharp\EntityList\Fields\EntityListFieldsContainer;
 use Code16\Sharp\Enums\NotificationLevel;
@@ -9,6 +10,7 @@
 use Code16\Sharp\Tests\Fixtures\Sharp\PersonForm;
 use Code16\Sharp\Tests\Fixtures\Sharp\PersonList;
 use Code16\Sharp\Tests\Fixtures\Sharp\PersonShow;
+use Code16\Sharp\Utils\Links\LinkToEntityList;
 use Code16\Sharp\Utils\PageAlerts\PageAlert;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Pagination\LengthAwarePaginator;
@@ -137,6 +139,10 @@ public function getListData(): array|Arrayable
         public function buildList(EntityListFieldsContainer $fields): void
         {
             $fields
+                ->addField(
+                    EntityListBadgeField::make('is_new')
+                        ->setTooltip('This person is new')
+                )
                 ->addField(
                     EntityListField::make('name')
                         ->setLabel('Name')
@@ -155,8 +161,16 @@ public function buildList(EntityListFieldsContainer $fields): void
     $this->get('/sharp/s-list/person')
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
-            ->has('entityList.fields', 2)
+            ->has('entityList.fields', 3)
             ->has('entityList.fields.0', fn (Assert $name) => $name
+                ->where('key', 'is_new')
+                ->where('type', 'badge')
+                ->where('tooltip', 'This person is new')
+                ->where('hideOnXS', false)
+                ->where('sortable', false)
+                ->etc()
+            )
+            ->has('entityList.fields.1', fn (Assert $name) => $name
                 ->where('key', 'name')
                 ->where('label', 'Name')
                 ->where('width', '50%')
@@ -164,7 +178,7 @@ public function buildList(EntityListFieldsContainer $fields): void
                 ->where('sortable', true)
                 ->etc()
             )
-            ->has('entityList.fields.1', fn (Assert $job) => $job
+            ->has('entityList.fields.2', fn (Assert $job) => $job
                 ->where('key', 'job')
                 ->where('label', 'Job')
                 ->where('width', '50%')
@@ -352,7 +366,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', LinkToEntityList::make('person'));
         }
     });
 
@@ -362,6 +377,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
             ->where('entityList.pageAlert', [
                 'level' => PageAlertLevel::Info->value,
                 'text' => 'My page alert',
+                'buttonLabel' => 'My button',
+                'buttonUrl' => LinkToEntityList::make('person')->renderAsUrl(),
             ])
             ->etc()
         );
diff --git a/tests/Http/Form/FormControllerTest.php b/tests/Http/Form/FormControllerTest.php
index c0a04a700..82b3a822a 100644
--- a/tests/Http/Form/FormControllerTest.php
+++ b/tests/Http/Form/FormControllerTest.php
@@ -443,7 +443,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     });
 
@@ -451,8 +452,10 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
             ->where('form.pageAlert', [
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
                 'text' => 'My page alert',
+                'buttonLabel' => 'My button',
+                'buttonUrl' => 'https://example.com',
             ])
             ->etc()
         );
diff --git a/tests/Http/ShowControllerTest.php b/tests/Http/ShowControllerTest.php
index 1e410f634..2cebddb42 100644
--- a/tests/Http/ShowControllerTest.php
+++ b/tests/Http/ShowControllerTest.php
@@ -2,6 +2,7 @@
 
 use Code16\Sharp\EntityList\Commands\EntityState;
 use Code16\Sharp\EntityList\Commands\InstanceCommand;
+use Code16\Sharp\Enums\PageAlertLevel;
 use Code16\Sharp\Show\Fields\SharpShowPictureField;
 use Code16\Sharp\Show\Fields\SharpShowTextField;
 use Code16\Sharp\Show\Layout\ShowLayout;
@@ -292,7 +293,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     });
 
@@ -300,8 +302,10 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
             ->where('show.pageAlert', [
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
                 'text' => 'My page alert',
+                'buttonLabel' => 'My button',
+                'buttonUrl' => 'https://example.com',
             ])
             ->etc()
         );
@@ -332,7 +336,7 @@ public function find($id): array
         ->assertOk()
         ->assertInertia(fn (Assert $page) => $page
             ->where('show.pageAlert', [
-                'level' => \Code16\Sharp\Enums\PageAlertLevel::Info->value,
+                'level' => PageAlertLevel::Info->value,
                 'text' => 'Hello Marie Curie',
             ])
             ->etc()
diff --git a/tests/Unit/Dashboard/SharpDashboardTest.php b/tests/Unit/Dashboard/SharpDashboardTest.php
index f3bb04642..9a48c4699 100644
--- a/tests/Unit/Dashboard/SharpDashboardTest.php
+++ b/tests/Unit/Dashboard/SharpDashboardTest.php
@@ -378,7 +378,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelWarning()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     };
 
@@ -386,5 +387,7 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->toEqual([
             'text' => 'My page alert',
             'level' => PageAlertLevel::Warning,
+            'buttonLabel' => 'My button',
+            'buttonUrl' => 'https://example.com',
         ]);
 });
diff --git a/tests/Unit/EntityList/SharpEntityListTest.php b/tests/Unit/EntityList/SharpEntityListTest.php
index 7d978a263..4a3e8776b 100644
--- a/tests/Unit/EntityList/SharpEntityListTest.php
+++ b/tests/Unit/EntityList/SharpEntityListTest.php
@@ -1,11 +1,13 @@
 <?php
 
 use Code16\Sharp\EntityList\Commands\ReorderHandler;
+use Code16\Sharp\EntityList\Fields\EntityListBadgeField;
 use Code16\Sharp\EntityList\Fields\EntityListField;
 use Code16\Sharp\EntityList\Fields\EntityListFieldsContainer;
 use Code16\Sharp\Enums\PageAlertLevel;
 use Code16\Sharp\Exceptions\SharpInvalidConfigException;
 use Code16\Sharp\Tests\Unit\EntityList\Fakes\FakeSharpEntityList;
+use Code16\Sharp\Utils\Links\LinkToEntityList;
 use Code16\Sharp\Utils\PageAlerts\PageAlert;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Pagination\LengthAwarePaginator;
@@ -36,6 +38,31 @@ public function buildList(EntityListFieldsContainer $fields): void
     ]);
 });
 
+it('allows to add badge fields', function () {
+    $list = new class() extends FakeSharpEntityList
+    {
+        public function buildList(EntityListFieldsContainer $fields): void
+        {
+            $fields->addField(
+                EntityListBadgeField::make('is_new')
+                    ->setTooltip('This person is new')
+            );
+        }
+    };
+
+    expect($list->fields())->toEqual([
+        [
+            'type' => 'badge',
+            'key' => 'is_new',
+            'label' => null,
+            'sortable' => false,
+            'width' => null,
+            'hideOnXS' => false,
+            'tooltip' => 'This person is new',
+        ],
+    ]);
+});
+
 it('allows to set fields width as a legacy 12-based grid', function () {
     $list = new class() extends FakeSharpEntityList
     {
@@ -239,7 +266,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelDanger()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', LinkToEntityList::make('person'));
         }
     };
 
@@ -247,6 +275,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->toEqual([
             'text' => 'My page alert',
             'level' => PageAlertLevel::Danger,
+            'buttonLabel' => 'My button',
+            'buttonUrl' => LinkToEntityList::make('person')->renderAsUrl(),
         ]);
 });
 
diff --git a/tests/Unit/Form/SharpFormTest.php b/tests/Unit/Form/SharpFormTest.php
index b6dc536be..2cf476d1d 100644
--- a/tests/Unit/Form/SharpFormTest.php
+++ b/tests/Unit/Form/SharpFormTest.php
@@ -115,7 +115,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     };
 
@@ -123,5 +124,7 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->toEqual([
             'text' => 'My page alert',
             'level' => PageAlertLevel::Info,
+            'buttonLabel' => 'My button',
+            'buttonUrl' => 'https://example.com',
         ]);
 });
diff --git a/tests/Unit/Show/SharpShowTestDefault.php b/tests/Unit/Show/SharpShowTestDefault.php
index f6885925b..abf173343 100644
--- a/tests/Unit/Show/SharpShowTestDefault.php
+++ b/tests/Unit/Show/SharpShowTestDefault.php
@@ -187,7 +187,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         {
             $pageAlert
                 ->setLevelInfo()
-                ->setMessage('My page alert');
+                ->setMessage('My page alert')
+                ->setButton('My button', 'https://example.com');
         }
     };
 
@@ -195,6 +196,8 @@ public function buildPageAlert(PageAlert $pageAlert): void
         ->toEqual([
             'text' => 'My page alert',
             'level' => PageAlertLevel::Info,
+            'buttonLabel' => 'My button',
+            'buttonUrl' => 'https://example.com',
         ]);
 });
 

From e1848d2eb7224d8407ae3cbf0f5b99baa1ccd686 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 23 May 2025 18:18:37 +0200
Subject: [PATCH 10/18] Handle menu badge tooltip / link

---
 demo/app/Sharp/SharpMenu.php                  |  4 ++
 resources/js/Layouts/Layout.vue               | 58 ++----------------
 resources/js/components/MenuItem.vue          | 60 +++++++++++++++++++
 resources/js/components/ui/badge/index.ts     |  2 +-
 .../components/ui/tooltip/TooltipContent.vue  |  2 +-
 resources/js/types/generated.d.ts             |  2 +
 src/Data/MenuItemData.php                     |  4 ++
 src/Utils/Menu/HasSharpMenuItems.php          | 10 +++-
 src/Utils/Menu/SharpMenuItemLink.php          | 17 ++++++
 9 files changed, 102 insertions(+), 57 deletions(-)
 create mode 100644 resources/js/components/MenuItem.vue

diff --git a/demo/app/Sharp/SharpMenu.php b/demo/app/Sharp/SharpMenu.php
index 3346cfbe2..db9a10c56 100644
--- a/demo/app/Sharp/SharpMenu.php
+++ b/demo/app/Sharp/SharpMenu.php
@@ -9,6 +9,8 @@
 use App\Sharp\Entities\PostEntity;
 use App\Sharp\Entities\ProfileEntity;
 use App\Sharp\Entities\TestEntity;
+use App\Sharp\Utils\Filters\StateFilter;
+use Code16\Sharp\Utils\Links\LinkToEntityList;
 use Code16\Sharp\Utils\Menu\SharpMenu as BaseSharpMenu;
 use Code16\Sharp\Utils\Menu\SharpMenuItemSection;
 use Code16\Sharp\Utils\Menu\SharpMenuUserMenu;
@@ -32,6 +34,8 @@ public function build(): self
                         badge: fn () => Post::query()
                             ->where('state', 'draft')
                             ->count(),
+                        badgeTooltip: 'See draft posts',
+                        badgeLink: LinkToEntityList::make(PostEntity::class)->addFilter(StateFilter::class, 'draft'),
                     )
                     ->addEntityLink(CategoryEntity::class, 'Categories', icon: 'lucide-tags')
                     ->addEntityLink(AuthorEntity::class, 'Authors', icon: 'lucide-signature');
diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
index 78e98b6e0..8b48edf9c 100644
--- a/resources/js/Layouts/Layout.vue
+++ b/resources/js/Layouts/Layout.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import {inject, Ref} from "vue";
+    import {inject, Ref} from "vue";
 
-export function useMenuBoundaryElement() {
+    export function useMenuBoundaryElement() {
         return inject<Ref<HTMLElement>>('menuBoundary');
     }
 </script>
@@ -49,16 +49,14 @@ export function useMenuBoundaryElement() {
         SidebarGroupLabel,
         SidebarHeader, SidebarInset,
         SidebarMenu,
-        SidebarMenuBadge,
         SidebarMenuButton,
         SidebarMenuItem,
         SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger
     } from "@/components/ui/sidebar";
     import { useEventListener, useStorage } from "@vueuse/core";
     import GlobalSearch from "@/components/GlobalSearch.vue";
-    import { vScrollIntoView } from "@/directives/scroll-into-view";
     import Content from "@/components/Content.vue";
-    import { Badge } from "@/components/ui/badge";
+    import MenuItem from "@/components/MenuItem.vue";
 
     const dialogs = useDialogs();
     const menu = useMenu();
@@ -153,30 +151,7 @@ export function useMenuBoundaryElement() {
                                                                 </div>
                                                             </template>
                                                             <template v-else>
-                                                                <SidebarMenuItem>
-                                                                    <SidebarMenuButton :is-active="childItem.current" as-child>
-                                                                        <component
-                                                                            :is="childItem.isExternalLink ? 'a' : Link"
-                                                                            :href="childItem.url"
-                                                                            v-scroll-into-view.center="childItem.current"
-                                                                        >
-                                                                            <template v-if="childItem.icon">
-                                                                                <Icon :icon="childItem.icon" class="size-4" />
-                                                                            </template>
-                                                                            <span class="flex-1">
-                                                                                {{ childItem.label }}
-                                                                            </span>
-                                                                            <template v-if="childItem.badge != null">
-                                                                                <Badge class="-my-px -mr-1" variant="sidebar">
-                                                                                    {{ childItem.badge }}
-                                                                                </Badge>
-                                                                            </template>
-                                                                            <template v-if="childItem.isExternalLink">
-                                                                                <ExternalLink class="size-4 opacity-50" />
-                                                                            </template>
-                                                                        </component>
-                                                                    </SidebarMenuButton>
-                                                                </SidebarMenuItem>
+                                                                <MenuItem :item="childItem" />
                                                             </template>
                                                         </template>
                                                     </SidebarMenu>
@@ -189,30 +164,7 @@ export function useMenuBoundaryElement() {
                                     <SidebarGroup>
                                         <SidebarGroupContent>
                                             <SidebarMenu>
-                                                <SidebarMenuItem>
-                                                    <SidebarMenuButton :is-active="item.current" as-child>
-                                                        <component
-                                                            :is="item.isExternalLink ? 'a' : Link"
-                                                            :href="item.url"
-                                                            v-scroll-into-view.center="item.current"
-                                                        >
-                                                            <template v-if="item.icon">
-                                                                <Icon :icon="item.icon" class="size-4" />
-                                                            </template>
-                                                            <span class="flex-1">
-                                                                {{ item.label }}
-                                                            </span>
-                                                            <template v-if="item.badge != null">
-                                                                <Badge class="-my-px -mr-1" variant="sidebar">
-                                                                    {{ item.badge }}
-                                                                </Badge>
-                                                            </template>
-                                                            <template v-if="item.isExternalLink">
-                                                                <ExternalLink class="size-4 opacity-50" />
-                                                            </template>
-                                                        </component>
-                                                    </SidebarMenuButton>
-                                                </SidebarMenuItem>
+                                                <MenuItem :item="item" />
                                             </SidebarMenu>
                                         </SidebarGroupContent>
                                     </SidebarGroup>
diff --git a/resources/js/components/MenuItem.vue b/resources/js/components/MenuItem.vue
new file mode 100644
index 000000000..baf9ca962
--- /dev/null
+++ b/resources/js/components/MenuItem.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+    import { Link } from '@inertiajs/vue3';
+    import { isSharpLink } from '@/utils/url';
+    import Icon from '@/components/ui/Icon.vue';
+    import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+    import { Badge } from '@/components/ui/badge';
+    import { ExternalLink } from 'lucide-vue-next';
+    import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+    import { vScrollIntoView } from '@/directives/scroll-into-view';
+    import { MenuItemData } from "@/types";
+
+    defineProps<{
+        item: MenuItemData,
+    }>()
+</script>
+
+<template>
+    <SidebarMenuItem>
+        <SidebarMenuButton
+            class="relative"
+            :is-active="item.current"
+            as-child
+        >
+            <div v-scroll-into-view.center="item.current">
+                <template v-if="item.icon">
+                    <Icon :icon="item.icon" class="size-4" />
+                </template>
+                <span class="flex-1">
+                    <component :is="item.isExternalLink ? 'a' : Link" :href="item.url">
+                        <span class="absolute inset-0 z-1"></span>
+                        {{ item.label }}
+                    </component>
+                </span>
+                <template v-if="item.badge != null && item.badge !== ''">
+                    <TooltipProvider>
+                        <Tooltip :delay-duration="0" :disabled="!item.badgeTooltip">
+                            <TooltipTrigger as-child>
+                                <Badge
+                                    :as="item.badgeUrl || item.badgeTooltip ? isSharpLink(item.badgeUrl || item.url) ? Link : 'a' : 'div'"
+                                    class="-my-px -mr-1"
+                                    :class="item.badgeUrl || item.badgeTooltip ? 'relative z-1' : ''"
+                                    :href="item.badgeUrl || item.url"
+                                    variant="sidebar"
+                                >
+                                    {{ item.badge }}
+                                </Badge>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                                {{ item.badgeTooltip }}
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                </template>
+                <template v-if="item.isExternalLink">
+                    <ExternalLink class="size-4 opacity-50" />
+                </template>
+            </div>
+        </SidebarMenuButton>
+    </SidebarMenuItem>
+</template>
diff --git a/resources/js/components/ui/badge/index.ts b/resources/js/components/ui/badge/index.ts
index 99bcf76c5..f1766f423 100644
--- a/resources/js/components/ui/badge/index.ts
+++ b/resources/js/components/ui/badge/index.ts
@@ -14,7 +14,7 @@ export const badgeVariants = cva(
         destructive:
           'border-transparent bg-destructive text-destructive-foreground dark:bg-destructive/60 hover:bg-destructive/80',
         outline: 'text-foreground',
-        sidebar: 'relative isolate before:-z-10 before:absolute before:inset-0 before:rounded-full before:bg-background/50 border-primary/10 text-primary',
+        sidebar: 'relative isolate before:transition-colors before:-z-10 before:absolute before:inset-0 before:rounded-full before:bg-background/50 hover:before:bg-background border-primary/10 text-primary',
       },
     },
     defaultVariants: {
diff --git a/resources/js/components/ui/tooltip/TooltipContent.vue b/resources/js/components/ui/tooltip/TooltipContent.vue
index ea3769dd7..7784b935a 100644
--- a/resources/js/components/ui/tooltip/TooltipContent.vue
+++ b/resources/js/components/ui/tooltip/TooltipContent.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <TooltipPortal>
-    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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', props.class)">
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden max-w-sm rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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', props.class)">
       <slot />
     </TooltipContent>
   </TooltipPortal>
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index 98482616b..149af6fcf 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -657,6 +657,8 @@ export type MenuItemData = {
   icon: IconData | null;
   label: string | null;
   badge: string | null;
+  badgeTooltip: string | null;
+  badgeUrl: string | null;
   url: string | null;
   isExternalLink: boolean;
   entityKey: string | null;
diff --git a/src/Data/MenuItemData.php b/src/Data/MenuItemData.php
index 51ef4c009..f5ecd0158 100644
--- a/src/Data/MenuItemData.php
+++ b/src/Data/MenuItemData.php
@@ -18,6 +18,8 @@ public function __construct(
         public ?IconData $icon = null,
         public ?string $label = null,
         public ?string $badge = null,
+        public ?string $badgeTooltip = null,
+        public ?string $badgeUrl = null,
         public ?string $url = null,
         public bool $isExternalLink = false,
         public ?string $entityKey = null,
@@ -55,6 +57,8 @@ public static function from(SharpMenuItem $item)
                 icon: IconData::optional(app(IconManager::class)->iconToArray($item->getIcon())),
                 label: $item->getLabel(),
                 badge: $item->getBadge(),
+                badgeTooltip: $item->getBadgeTooltip(),
+                badgeUrl: $item->getBadgeUrl(),
                 url: $item->getUrl(),
                 isExternalLink: $item->isExternalLink(),
                 entityKey: $item->isEntity() ? $item->getEntityKey() : null,
diff --git a/src/Utils/Menu/HasSharpMenuItems.php b/src/Utils/Menu/HasSharpMenuItems.php
index f7d1c1511..f79ad278b 100644
--- a/src/Utils/Menu/HasSharpMenuItems.php
+++ b/src/Utils/Menu/HasSharpMenuItems.php
@@ -4,6 +4,7 @@
 
 use Closure;
 use Code16\Sharp\Utils\Entities\SharpEntityManager;
+use Code16\Sharp\Utils\Links\SharpLinkTo;
 
 trait HasSharpMenuItems
 {
@@ -14,13 +15,15 @@ public function addEntityLink(
         ?string $label = null,
         ?string $icon = null,
         ?Closure $badge = null,
+        ?string $badgeTooltip = null,
+        string|SharpLinkTo|null $badgeLink = null,
     ): self {
         if (class_exists($entityKeyOrClassName)) {
             $entityKeyOrClassName = app(SharpEntityManager::class)
                 ->entityKeyFor($entityKeyOrClassName);
         }
 
-        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge))
+        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge, $badgeTooltip, $badgeLink))
             ->setEntity($entityKeyOrClassName);
 
         return $this;
@@ -31,8 +34,11 @@ public function addExternalLink(
         ?string $label = null,
         ?string $icon = null,
         ?Closure $badge = null,
+        ?string $badgeTooltip = null,
+        string|SharpLinkTo|null $badgeLink = null,
     ): self {
-        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge))->setUrl($url);
+        $this->items[] = (new SharpMenuItemLink($label, $icon, $badge, $badgeTooltip, $badgeLink))
+            ->setUrl($url);
 
         return $this;
     }
diff --git a/src/Utils/Menu/SharpMenuItemLink.php b/src/Utils/Menu/SharpMenuItemLink.php
index c9127ce9c..6c093439b 100644
--- a/src/Utils/Menu/SharpMenuItemLink.php
+++ b/src/Utils/Menu/SharpMenuItemLink.php
@@ -6,6 +6,7 @@
 use Code16\Sharp\Utils\Entities\SharpDashboardEntity;
 use Code16\Sharp\Utils\Entities\SharpEntity;
 use Code16\Sharp\Utils\Entities\SharpEntityManager;
+use Code16\Sharp\Utils\Links\SharpLinkTo;
 
 class SharpMenuItemLink extends SharpMenuItem
 {
@@ -17,6 +18,8 @@ public function __construct(
         protected ?string $label,
         protected ?string $icon,
         protected ?Closure $badge,
+        protected ?string $badgeTooltip = null,
+        protected string|SharpLinkTo|null $badgeLink = null,
     ) {}
 
     public function setEntity(string $entityKey): self
@@ -48,6 +51,20 @@ public function getBadge(): ?string
         return null;
     }
 
+    public function getBadgeTooltip(): ?string
+    {
+        return $this->badgeTooltip;
+    }
+
+    public function getBadgeUrl(): ?string
+    {
+        if ($this->badgeLink instanceof SharpLinkTo) {
+            return $this->badgeLink->renderAsUrl();
+        }
+
+        return $this->badgeLink;
+    }
+
     public function isDashboardEntity(): bool
     {
         return $this->isEntity() && $this->entity->isDashboard();

From d55598c626da4c84299a3db8725b091560f3ebeb Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 23 May 2025 18:21:33 +0200
Subject: [PATCH 11/18] Add docs

---
 docs/guide/building-entity-list.md | 17 ++++++++++++++
 docs/guide/page-alerts.md          | 37 +++++++++++++++++++++++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/docs/guide/building-entity-list.md b/docs/guide/building-entity-list.md
index bb156ef39..d54f6831c 100644
--- a/docs/guide/building-entity-list.md
+++ b/docs/guide/building-entity-list.md
@@ -55,6 +55,23 @@ To hide the column on small screens, use `->hideOnSmallScreens()`.
 
 Sorting columns must be handled in the `getListData()` method, see below.
 
+#### Add a badge field
+
+The `EntityListBadgeField` allows you to display a badge in the list. It is either a simple dot if the value is `true` or a badge containing the value if it is an integer or a string.
+
+```php
+class ProductList extends SharpEntityList
+{
+    protected function buildList(EntityListFieldsContainer $fields): void
+    {
+        $fields
+            ->addField(
+                EntityListBadgeField::make('is_new')
+            );
+    }
+}
+```
+
 ### `getListData()`
 
 Now the real work: grab and return the actual list data. This method must return an array of `instances` of our `entity`. You can do this however you want, so let's see a generic example:
diff --git a/docs/guide/page-alerts.md b/docs/guide/page-alerts.md
index 134a89394..93a257bf3 100644
--- a/docs/guide/page-alerts.md
+++ b/docs/guide/page-alerts.md
@@ -53,4 +53,39 @@ The `$data` array passed to the closure is the result of your `find()` (Show, Fo
 ::: tip
 If your message is complex to build, you can defer to a blade template to encapsulate the logic, eg:
 `return view('sharp._post-planned-info', ['data' => $data])->render();`
-:::
\ No newline at end of file
+:::
+
+## Add a button link
+
+The `setButton()` method allows you to add a link to your alert:
+
+```php
+class MyShow extends SharpShow
+{
+    // [...]
+    
+    protected function buildPageAlert(PageAlert $pageAlert): void
+    {
+        $pageAlert
+            ->setMessage('This page has been edited recently.')
+            ->setButton('Go to page', route('pages.show', sharp()->context()->instanceId()));
+    }
+}
+```
+
+You can also pass a `SharpLinkTo` object. It's useful for filtering an Entity List, for example:
+
+```php
+class MyEntityList extends SharpEntityList
+{
+    // [...]
+    
+    protected function buildPageAlert(PageAlert $pageAlert): void
+    {
+        $pageAlert
+            ->setMessage('There is 3 new orders')
+            ->setButton('See orders', LinkToEntityList::make(MyEntity::class)->addFilter('is_new', 1));
+    }
+}
+```
+

From 51a75f723c64b3c223afa27ce9e46e8a448e311c Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Mon, 26 May 2025 11:50:36 +0200
Subject: [PATCH 12/18] CS

---
 demo/app/Sharp/SharpMenu.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/demo/app/Sharp/SharpMenu.php b/demo/app/Sharp/SharpMenu.php
index db9a10c56..63aa55680 100644
--- a/demo/app/Sharp/SharpMenu.php
+++ b/demo/app/Sharp/SharpMenu.php
@@ -29,13 +29,15 @@ public function build(): self
                 $section
                     ->setCollapsible(false)
                     ->addEntityLink(
-                        PostEntity::class, 'Posts',
+                        entityKeyOrClassName: PostEntity::class,
+                        label: 'Posts',
                         icon: 'lucide-file-text',
                         badge: fn () => Post::query()
                             ->where('state', 'draft')
                             ->count(),
                         badgeTooltip: 'See draft posts',
-                        badgeLink: LinkToEntityList::make(PostEntity::class)->addFilter(StateFilter::class, 'draft'),
+                        badgeLink: LinkToEntityList::make(PostEntity::class)
+                            ->addFilter(StateFilter::class, 'draft'),
                     )
                     ->addEntityLink(CategoryEntity::class, 'Categories', icon: 'lucide-tags')
                     ->addEntityLink(AuthorEntity::class, 'Authors', icon: 'lucide-signature');

From beb10ff86f58ece2b23ccbaeceb7dc4a7d0083a5 Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Mon, 26 May 2025 11:53:52 +0200
Subject: [PATCH 13/18] Doc

---
 docs/guide/page-alerts.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/guide/page-alerts.md b/docs/guide/page-alerts.md
index 93a257bf3..0ec69c165 100644
--- a/docs/guide/page-alerts.md
+++ b/docs/guide/page-alerts.md
@@ -13,7 +13,7 @@ Create a `buildPageAlert()` method:
 ```php
 class MyShow extends SharpShow
 {
-    // [...]
+    // ...
     
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
@@ -33,7 +33,7 @@ To provide a dynamic message, depending on the actual data of the Show, Entity L
 ```php
 class MyShow extends SharpShow
 {
-    // [...]
+    // ...
     
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
@@ -62,7 +62,7 @@ The `setButton()` method allows you to add a link to your alert:
 ```php
 class MyShow extends SharpShow
 {
-    // [...]
+    // ...
     
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
@@ -78,13 +78,15 @@ You can also pass a `SharpLinkTo` object. It's useful for filtering an Entity Li
 ```php
 class MyEntityList extends SharpEntityList
 {
-    // [...]
+    // ...
     
     protected function buildPageAlert(PageAlert $pageAlert): void
     {
         $pageAlert
-            ->setMessage('There is 3 new orders')
-            ->setButton('See orders', LinkToEntityList::make(MyEntity::class)->addFilter('is_new', 1));
+            ->setMessage('There are new orders to handle.')
+            ->setButton('See orders', LinkToEntityList::make(MyEntity::class)
+                ->addFilter('is_new', 1)
+            );
     }
 }
 ```

From 800ba9a065d9c437a0a6ca349b30555b24fdf4ff Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Mon, 26 May 2025 11:58:56 +0200
Subject: [PATCH 14/18] Doc

---
 demo/app/Sharp/SharpMenu.php |  2 +-
 docs/guide/building-menu.md  | 26 +++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/demo/app/Sharp/SharpMenu.php b/demo/app/Sharp/SharpMenu.php
index 63aa55680..1d8b2701f 100644
--- a/demo/app/Sharp/SharpMenu.php
+++ b/demo/app/Sharp/SharpMenu.php
@@ -34,7 +34,7 @@ public function build(): self
                         icon: 'lucide-file-text',
                         badge: fn () => Post::query()
                             ->where('state', 'draft')
-                            ->count(),
+                            ->count() ?: null,
                         badgeTooltip: 'See draft posts',
                         badgeLink: LinkToEntityList::make(PostEntity::class)
                             ->addFilter(StateFilter::class, 'draft'),
diff --git a/docs/guide/building-menu.md b/docs/guide/building-menu.md
index 082fa9bf7..76cebd133 100644
--- a/docs/guide/building-menu.md
+++ b/docs/guide/building-menu.md
@@ -89,6 +89,30 @@ class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
 }
 ```
 
+### Handle notification badges
+
+You can display a notification badge on any link, with a count and a tooltip. You can also, optionally, define a tooltip and a link for the badge (usually to a filtered Entity List).
+
+Here’s an example of a badge on an Entity List link:
+
+```php
+class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
+{
+    public function build(): self
+    {
+        return $this
+            ->addEntityLink(
+                entityKeyOrClassName: PostEntity::class,
+                label: 'Posts',
+                badge: fn () => Post::query()->where('state', 'draft')->count(),
+                badgeTooltip: 'See draft posts',
+                badgeLink: LinkToEntityList::make(PostEntity::class)
+                    ->addFilter(StateFilter::class, 'draft'),
+            );
+    }
+}
+```
+
 ### Group links in sections
 
 Sections are groups that can be collapsed
@@ -182,4 +206,4 @@ class MySharpMenu extends Code16\Sharp\Utils\Menu\SharpMenu
 
 ### Global menu Filters
 
-If you want to display a filter on all pages, above the menu, useful to scope the entire data set (use cases: multi tenant app, customer selector...), you can define a global filter as described in the [Filters documentation](filters.md#global-menu-filters).
\ No newline at end of file
+If you want to display a filter on all pages, above the menu, useful to scope the entire data set (use cases: multi tenant app, customer selector...), you can define a global filter as described in the [Filters documentation](filters.md#global-menu-filters).

From ffb5d7c5118b558dc91794307634849b2d4125dc Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Mon, 26 May 2025 12:04:14 +0200
Subject: [PATCH 15/18] Add tests

---
 tests/Unit/Utils/SharpMenuTest.php | 48 ++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/tests/Unit/Utils/SharpMenuTest.php b/tests/Unit/Utils/SharpMenuTest.php
index ad6098b7a..b6347ad47 100644
--- a/tests/Unit/Utils/SharpMenuTest.php
+++ b/tests/Unit/Utils/SharpMenuTest.php
@@ -23,7 +23,7 @@ public function build(): SharpMenu
 });
 
 it('allows to add an entity link with its entity class name in the menu', function () {
-    sharp()->config()->addEntity('my-entity', PersonEntity::class);
+    sharp()->config()->declareEntity(PersonEntity::class);
 
     $menu = new class() extends SharpMenu
     {
@@ -37,8 +37,50 @@ public function build(): SharpMenu
         ->getLabel()->toEqual('test')
         ->getIcon()->toEqual('fa-user')
         ->isEntity()->toBeTrue()
-        ->getEntityKey()->toEqual('my-entity')
-        ->getUrl()->toEqual(route('code16.sharp.list', 'my-entity'));
+        ->getEntityKey()->toEqual('person')
+        ->getUrl()->toEqual(route('code16.sharp.list', 'person'));
+});
+
+it('allows to specify a notification badge in the menu', function () {
+    sharp()->config()->declareEntity(PersonEntity::class);
+
+    $menu = new class() extends SharpMenu
+    {
+        public function build(): SharpMenu
+        {
+            return $this->addEntityLink(
+                PersonEntity::class,
+                'test',
+                badge: fn () => 42,
+            );
+        }
+    };
+
+    expect($menu->build()->getItems()[0])
+        ->getBadge()->toEqual(42);
+});
+
+it('allows to specify a link and a tooltip for the notification badge', function () {
+    sharp()->config()->declareEntity(PersonEntity::class);
+
+    $menu = new class() extends SharpMenu
+    {
+        public function build(): SharpMenu
+        {
+            return $this->addEntityLink(
+                PersonEntity::class,
+                'test',
+                badge: fn () => 42,
+                badgeTooltip: 'See all persons',
+                badgeLink: \Code16\Sharp\Utils\Links\LinkToEntityList::make(PersonEntity::class),
+            );
+        }
+    };
+
+    expect($menu->build()->getItems()[0])
+        ->getBadge()->toEqual(42)
+        ->getBadgeTooltip()->toEqual('See all persons')
+        ->getBadgeUrl()->toEqual(route('code16.sharp.list', 'person'));
 });
 
 it('allows to add an external link in the menu', function () {

From b2a09d4b0ce3b09528cef0941c28482006adf583 Mon Sep 17 00:00:00 2001
From: philippe <philippe@code16.fr>
Date: Mon, 26 May 2025 12:06:00 +0200
Subject: [PATCH 16/18] CS

---
 tests/Unit/Utils/SharpMenuTest.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/Unit/Utils/SharpMenuTest.php b/tests/Unit/Utils/SharpMenuTest.php
index b6347ad47..45163a380 100644
--- a/tests/Unit/Utils/SharpMenuTest.php
+++ b/tests/Unit/Utils/SharpMenuTest.php
@@ -1,6 +1,7 @@
 <?php
 
 use Code16\Sharp\Tests\Fixtures\Entities\PersonEntity;
+use Code16\Sharp\Utils\Links\LinkToEntityList;
 use Code16\Sharp\Utils\Menu\SharpMenu;
 
 it('allows to add an entity link with its key in the menu', function () {
@@ -72,7 +73,7 @@ public function build(): SharpMenu
                 'test',
                 badge: fn () => 42,
                 badgeTooltip: 'See all persons',
-                badgeLink: \Code16\Sharp\Utils\Links\LinkToEntityList::make(PersonEntity::class),
+                badgeLink: LinkToEntityList::make(PersonEntity::class),
             );
         }
     };

From c7239e5820236d4e93e07086bcd14e3776f9e18c Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Mon, 26 May 2025 15:19:29 +0200
Subject: [PATCH 17/18] Improve state badge UI

---
 resources/js/Pages/Show/Show.vue              |   6 +-
 .../js/components/dev/StateBadgeTest.vue      | 259 ++++++++++++++++++
 resources/js/components/ui/StateBadge.vue     |  25 ++
 resources/js/components/ui/StateIcon.vue      |   6 +-
 .../js/entity-list/components/EntityList.vue  |  10 +-
 5 files changed, 296 insertions(+), 10 deletions(-)
 create mode 100644 resources/js/components/dev/StateBadgeTest.vue
 create mode 100644 resources/js/components/ui/StateBadge.vue

diff --git a/resources/js/Pages/Show/Show.vue b/resources/js/Pages/Show/Show.vue
index fea5c1f3d..cb7e3a064 100644
--- a/resources/js/Pages/Show/Show.vue
+++ b/resources/js/Pages/Show/Show.vue
@@ -43,6 +43,7 @@
     import DropdownChevronDown from "@/components/ui/DropdownChevronDown.vue";
     import { useEntityListHighlightedItem } from "@/composables/useEntityListHighlightedItem";
     import RootCardHeader from "@/components/ui/RootCardHeader.vue";
+    import StateBadge from "@/components/ui/StateBadge.vue";
 
     const props = defineProps<{
         show: ShowData,
@@ -220,10 +221,9 @@
                                                                         <Button class="pointer-events-auto h-8 -mx-2 disabled:opacity-100" variant="ghost" size="sm" :disabled="!show.config.state.authorization"
                                                                             :aria-label="__('sharp::show.state_dropdown.aria_label')"
                                                                         >
-                                                                            <Badge variant="outline">
-                                                                                <StateIcon class="-ml-0.5 mr-1.5" :state-value="show.instanceStateValue" />
+                                                                            <StateBadge :state-value="show.instanceStateValue">
                                                                                 {{ show.instanceStateValue?.label }}
-                                                                            </Badge>
+                                                                            </StateBadge>
                                                                         </Button>
                                                                     </DropdownMenuTrigger>
                                                                     <DropdownMenuContent>
diff --git a/resources/js/components/dev/StateBadgeTest.vue b/resources/js/components/dev/StateBadgeTest.vue
new file mode 100644
index 000000000..3d054348c
--- /dev/null
+++ b/resources/js/components/dev/StateBadgeTest.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+
+import StateBadge from "@/components/ui/StateBadge.vue";
+
+const tailwindColors = [
+    ' oklch(97.1% .013 17.38)',
+    ' oklch(93.6% .032 17.717)',
+    ' oklch(88.5% .062 18.334)',
+    ' oklch(80.8% .114 19.571)',
+    ' oklch(70.4% .191 22.216)',
+    ' oklch(63.7% .237 25.331)',
+    ' oklch(57.7% .245 27.325)',
+    ' oklch(50.5% .213 27.518)',
+    ' oklch(44.4% .177 26.899)',
+    ' oklch(39.6% .141 25.723)',
+    ' oklch(25.8% .092 26.042)',
+    ' oklch(98% .016 73.684)',
+    ' oklch(95.4% .038 75.164)',
+    ' oklch(90.1% .076 70.697)',
+    ' oklch(83.7% .128 66.29)',
+    ' oklch(75% .183 55.934)',
+    ' oklch(70.5% .213 47.604)',
+    ' oklch(64.6% .222 41.116)',
+    ' oklch(55.3% .195 38.402)',
+    ' oklch(47% .157 37.304)',
+    ' oklch(40.8% .123 38.172)',
+    ' oklch(26.6% .079 36.259)',
+    ' oklch(98.7% .022 95.277)',
+    ' oklch(96.2% .059 95.617)',
+    ' oklch(92.4% .12 95.746)',
+    ' oklch(87.9% .169 91.605)',
+    ' oklch(82.8% .189 84.429)',
+    ' oklch(76.9% .188 70.08)',
+    ' oklch(66.6% .179 58.318)',
+    ' oklch(55.5% .163 48.998)',
+    ' oklch(47.3% .137 46.201)',
+    ' oklch(41.4% .112 45.904)',
+    ' oklch(27.9% .077 45.635)',
+    ' oklch(98.7% .026 102.212)',
+    ' oklch(97.3% .071 103.193)',
+    ' oklch(94.5% .129 101.54)',
+    ' oklch(90.5% .182 98.111)',
+    ' oklch(85.2% .199 91.936)',
+    ' oklch(79.5% .184 86.047)',
+    ' oklch(68.1% .162 75.834)',
+    ' oklch(55.4% .135 66.442)',
+    ' oklch(47.6% .114 61.907)',
+    ' oklch(42.1% .095 57.708)',
+    ' oklch(28.6% .066 53.813)',
+    ' oklch(98.6% .031 120.757)',
+    ' oklch(96.7% .067 122.328)',
+    ' oklch(93.8% .127 124.321)',
+    ' oklch(89.7% .196 126.665)',
+    ' oklch(84.1% .238 128.85)',
+    ' oklch(76.8% .233 130.85)',
+    ' oklch(64.8% .2 131.684)',
+    ' oklch(53.2% .157 131.589)',
+    ' oklch(45.3% .124 130.933)',
+    ' oklch(40.5% .101 131.063)',
+    ' oklch(27.4% .072 132.109)',
+    ' oklch(98.2% .018 155.826)',
+    ' oklch(96.2% .044 156.743)',
+    ' oklch(92.5% .084 155.995)',
+    ' oklch(87.1% .15 154.449)',
+    ' oklch(79.2% .209 151.711)',
+    ' oklch(72.3% .219 149.579)',
+    ' oklch(62.7% .194 149.214)',
+    ' oklch(52.7% .154 150.069)',
+    ' oklch(44.8% .119 151.328)',
+    ' oklch(39.3% .095 152.535)',
+    ' oklch(26.6% .065 152.934)',
+    ' oklch(97.9% .021 166.113)',
+    ' oklch(95% .052 163.051)',
+    ' oklch(90.5% .093 164.15)',
+    ' oklch(84.5% .143 164.978)',
+    ' oklch(76.5% .177 163.223)',
+    ' oklch(69.6% .17 162.48)',
+    ' oklch(59.6% .145 163.225)',
+    ' oklch(50.8% .118 165.612)',
+    ' oklch(43.2% .095 166.913)',
+    ' oklch(37.8% .077 168.94)',
+    ' oklch(26.2% .051 172.552)',
+    ' oklch(98.4% .014 180.72)',
+    ' oklch(95.3% .051 180.801)',
+    ' oklch(91% .096 180.426)',
+    ' oklch(85.5% .138 181.071)',
+    ' oklch(77.7% .152 181.912)',
+    ' oklch(70.4% .14 182.503)',
+    ' oklch(60% .118 184.704)',
+    ' oklch(51.1% .096 186.391)',
+    ' oklch(43.7% .078 188.216)',
+    ' oklch(38.6% .063 188.416)',
+    ' oklch(27.7% .046 192.524)',
+    ' oklch(98.4% .019 200.873)',
+    ' oklch(95.6% .045 203.388)',
+    ' oklch(91.7% .08 205.041)',
+    ' oklch(86.5% .127 207.078)',
+    ' oklch(78.9% .154 211.53)',
+    ' oklch(71.5% .143 215.221)',
+    ' oklch(60.9% .126 221.723)',
+    ' oklch(52% .105 223.128)',
+    ' oklch(45% .085 224.283)',
+    ' oklch(39.8% .07 227.392)',
+    ' oklch(30.2% .056 229.695)',
+    ' oklch(97.7% .013 236.62)',
+    ' oklch(95.1% .026 236.824)',
+    ' oklch(90.1% .058 230.902)',
+    ' oklch(82.8% .111 230.318)',
+    ' oklch(74.6% .16 232.661)',
+    ' oklch(68.5% .169 237.323)',
+    ' oklch(58.8% .158 241.966)',
+    ' oklch(50% .134 242.749)',
+    ' oklch(44.3% .11 240.79)',
+    ' oklch(39.1% .09 240.876)',
+    ' oklch(29.3% .066 243.157)',
+    ' oklch(97% .014 254.604)',
+    ' oklch(93.2% .032 255.585)',
+    ' oklch(88.2% .059 254.128)',
+    ' oklch(80.9% .105 251.813)',
+    ' oklch(70.7% .165 254.624)',
+    ' oklch(62.3% .214 259.815)',
+    ' oklch(54.6% .245 262.881)',
+    ' oklch(48.8% .243 264.376)',
+    ' oklch(42.4% .199 265.638)',
+    ' oklch(37.9% .146 265.522)',
+    ' oklch(28.2% .091 267.935)',
+    ' oklch(96.2% .018 272.314)',
+    ' oklch(93% .034 272.788)',
+    ' oklch(87% .065 274.039)',
+    ' oklch(78.5% .115 274.713)',
+    ' oklch(67.3% .182 276.935)',
+    ' oklch(58.5% .233 277.117)',
+    ' oklch(51.1% .262 276.966)',
+    ' oklch(45.7% .24 277.023)',
+    ' oklch(39.8% .195 277.366)',
+    ' oklch(35.9% .144 278.697)',
+    ' oklch(25.7% .09 281.288)',
+    ' oklch(96.9% .016 293.756)',
+    ' oklch(94.3% .029 294.588)',
+    ' oklch(89.4% .057 293.283)',
+    ' oklch(81.1% .111 293.571)',
+    ' oklch(70.2% .183 293.541)',
+    ' oklch(60.6% .25 292.717)',
+    ' oklch(54.1% .281 293.009)',
+    ' oklch(49.1% .27 292.581)',
+    ' oklch(43.2% .232 292.759)',
+    ' oklch(38% .189 293.745)',
+    ' oklch(28.3% .141 291.089)',
+    ' oklch(97.7% .014 308.299)',
+    ' oklch(94.6% .033 307.174)',
+    ' oklch(90.2% .063 306.703)',
+    ' oklch(82.7% .119 306.383)',
+    ' oklch(71.4% .203 305.504)',
+    ' oklch(62.7% .265 303.9)',
+    ' oklch(55.8% .288 302.321)',
+    ' oklch(49.6% .265 301.924)',
+    ' oklch(43.8% .218 303.724)',
+    ' oklch(38.1% .176 304.987)',
+    ' oklch(29.1% .149 302.717)',
+    ' oklch(97.7% .017 320.058)',
+    ' oklch(95.2% .037 318.852)',
+    ' oklch(90.3% .076 319.62)',
+    ' oklch(83.3% .145 321.434)',
+    ' oklch(74% .238 322.16)',
+    ' oklch(66.7% .295 322.15)',
+    ' oklch(59.1% .293 322.896)',
+    ' oklch(51.8% .253 323.949)',
+    ' oklch(45.2% .211 324.591)',
+    ' oklch(40.1% .17 325.612)',
+    ' oklch(29.3% .136 325.661)',
+    ' oklch(97.1% .014 343.198)',
+    ' oklch(94.8% .028 342.258)',
+    ' oklch(89.9% .061 343.231)',
+    ' oklch(82.3% .12 346.018)',
+    ' oklch(71.8% .202 349.761)',
+    ' oklch(65.6% .241 354.308)',
+    ' oklch(59.2% .249 .584)',
+    ' oklch(52.5% .223 3.958)',
+    ' oklch(45.9% .187 3.815)',
+    ' oklch(40.8% .153 2.432)',
+    ' oklch(28.4% .109 3.907)',
+    ' oklch(96.9% .015 12.422)',
+    ' oklch(94.1% .03 12.58)',
+    ' oklch(89.2% .058 10.001)',
+    ' oklch(81% .117 11.638)',
+    ' oklch(71.2% .194 13.428)',
+    ' oklch(64.5% .246 16.439)',
+    ' oklch(58.6% .253 17.585)',
+    ' oklch(51.4% .222 16.935)',
+    ' oklch(45.5% .188 13.697)',
+    ' oklch(41% .159 10.272)',
+    ' oklch(27.1% .105 12.094)',
+    ' oklch(98.4% .003 247.858)',
+    ' oklch(96.8% .007 247.896)',
+    ' oklch(92.9% .013 255.508)',
+    ' oklch(86.9% .022 252.894)',
+    ' oklch(70.4% .04 256.788)',
+    ' oklch(55.4% .046 257.417)',
+    ' oklch(44.6% .043 257.281)',
+    ' oklch(37.2% .044 257.287)',
+    ' oklch(27.9% .041 260.031)',
+    ' oklch(20.8% .042 265.755)',
+    ' oklch(12.9% .042 264.695)',
+    ' oklch(98.5% .002 247.839)',
+    ' oklch(96.7% .003 264.542)',
+    ' oklch(92.8% .006 264.531)',
+    ' oklch(87.2% .01 258.338)',
+    ' oklch(70.7% .022 261.325)',
+    ' oklch(55.1% .027 264.364)',
+    ' oklch(44.6% .03 256.802)',
+    ' oklch(37.3% .034 259.733)',
+    ' oklch(27.8% .033 256.848)',
+    ' oklch(21% .034 264.665)',
+    ' oklch(13% .028 261.692)',
+    ' oklch(98.5% 0 0)',
+    ' oklch(96.7% .001 286.375)',
+    ' oklch(92% .004 286.32)',
+    ' oklch(87.1% .006 286.286)',
+    ' oklch(70.5% .015 286.067)',
+    ' oklch(55.2% .016 285.938)',
+    ' oklch(44.2% .017 285.786)',
+    ' oklch(37% .013 285.805)',
+    ' oklch(27.4% .006 286.033)',
+    ' oklch(21% .006 285.885)',
+    ' oklch(14.1% .005 285.823)',
+    ' oklch(98.5% 0 0)',
+    ' oklch(97% 0 0)',
+    ' oklch(92.2% 0 0)',
+    ' oklch(87% 0 0)',
+    ' oklch(70.8% 0 0)',
+    ' oklch(55.6% 0 0)',
+    ' oklch(43.9% 0 0)',
+    ' oklch(37.1% 0 0)',
+    ' oklch(26.9% 0 0)',
+    ' oklch(20.5% 0 0)',
+    ' oklch(14.5% 0 0)',
+    ' oklch(98.5% .001 106.423)',
+    ' oklch(97% .001 106.424)',
+    ' oklch(92.3% .003 48.717)',
+    ' oklch(86.9% .005 56.366)',
+    ' oklch(70.9% .01 56.259)',
+    ' oklch(55.3% .013 58.071)',
+    ' oklch(44.4% .011 73.639)',
+    ' oklch(37.4% .01 67.558)',
+    ' oklch(26.8% .007 34.298)',
+    ' oklch(21.6% .006 56.043)',
+    ' oklch(14.7% .004 49.25)',
+];
+</script>
+
+<template>
+    <div class="flex flex-wrap gap-3">
+        <template v-for="color in tailwindColors">
+            <StateBadge :state-value="{ color }">
+                Test
+            </StateBadge>
+        </template>
+    </div>
+</template>
diff --git a/resources/js/components/ui/StateBadge.vue b/resources/js/components/ui/StateBadge.vue
new file mode 100644
index 000000000..df51cbdb9
--- /dev/null
+++ b/resources/js/components/ui/StateBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+    import { Badge } from "@/components/ui/badge";
+    import { EntityStateValueData } from "@/types";
+    import StateIcon from "@/components/ui/StateIcon.vue";
+
+    defineProps<{
+        stateValue: EntityStateValueData | null,
+    }>();
+</script>
+
+<template>
+    <Badge class="text-(--foreground) border-(--border) bg-(--background)"
+        style="
+            --foreground: oklch(from var(--color) .35 min(c, 0.1) h);
+            --background: oklch(from var(--color) max(l, .97) min(calc(c * .2), 0.03) h);
+            --border: oklch(from var(--color) .9 min(calc(c * .2), 0.03) h);
+        "
+        :style="{
+            '--color': stateValue?.color ?? 'black',
+        }"
+    >
+        <StateIcon class="-ml-0.5 mr-1.5" :state-value="stateValue" />
+        <slot></slot>
+    </Badge>
+</template>
diff --git a/resources/js/components/ui/StateIcon.vue b/resources/js/components/ui/StateIcon.vue
index 46a7dff15..e87046609 100644
--- a/resources/js/components/ui/StateIcon.vue
+++ b/resources/js/components/ui/StateIcon.vue
@@ -7,8 +7,10 @@
 </script>
 
 <template>
-    <div class="relative rounded-full" :style="{ '--color': stateValue?.color ?? 'black' }">
+    <div class="relative rounded-full" :style="{ '--color': stateValue?.color ?? 'black' }"
+        style="--border: oklch(from var(--color) .9 min(calc(c * .2), 0.03) h);"
+    >
 <!--        <div class="absolute inset-0 rounded-full bg-[var(&#45;&#45;color)] opacity-10"></div>-->
-        <div class="h-1.5 w-1.5 rounded-full bg-(--color)"></div>
+        <div class="h-1 w-1 rounded-full bg-(--color) outline outline-(--border)"></div>
     </div>
 </template>
diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
index ac4b04c64..0907fdfa3 100644
--- a/resources/js/entity-list/components/EntityList.vue
+++ b/resources/js/entity-list/components/EntityList.vue
@@ -67,6 +67,7 @@
     import RootCardHeader from "@/components/ui/RootCardHeader.vue";
     import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
     import { useElementVisibility } from "@vueuse/core";
+    import StateBadge from "@/components/ui/StateBadge.vue";
 
     const props = withDefaults(defineProps<{
         entityKey: string,
@@ -725,10 +726,9 @@
                                                             <DropdownMenu>
                                                                 <DropdownMenuTrigger as-child>
                                                                     <Button class="relative disabled:opacity-100 -mx-3" variant="ghost" size="sm" :disabled="!entityList.instanceCanUpdateState(item)" :aria-label="__('sharp::entity_list.state_dropdown.aria_label', { current_state_label: entityList.instanceStateValue(item)?.label })">
-                                                                        <Badge variant="outline">
-                                                                            <StateIcon class="-ml-0.5 mr-1.5" :state-value="entityList.instanceStateValue(item)" />
+                                                                        <StateBadge :state-value="entityList.instanceStateValue(item)">
                                                                             {{ entityList.instanceStateValue(item)?.label }}
-                                                                        </Badge>
+                                                                        </StateBadge>
                                                                     </Button>
                                                                 </DropdownMenuTrigger>
                                                                 <DropdownMenuContent align="start" :align-offset="-16">
@@ -737,7 +737,7 @@
                                                                             :model-value="stateValue.value == entityList.instanceState(item)"
                                                                             @update:model-value="(checked) => checked && onInstanceStateChange(stateValue.value, entityList.instanceId(item))"
                                                                         >
-                                                                            <StateIcon class="mr-1.5" :state-value="stateValue" />
+                                                                            <StateIcon class="mr-2" :state-value="stateValue" />
                                                                             <span class="truncate">{{ stateValue.label }}</span>
                                                                         </DropdownMenuCheckboxItem>
                                                                     </template>
@@ -825,7 +825,7 @@
                                                                                             :model-value="stateValue.value == entityList.instanceState(item)"
                                                                                             @update:model-value="(checked) => checked && onInstanceStateChange(stateValue.value, entityList.instanceId(item))"
                                                                                         >
-                                                                                            <StateIcon class="mr-1.5" :state-value="stateValue" />
+                                                                                            <StateIcon class="mr-2" :state-value="stateValue" />
                                                                                             <span class="truncate">{{ stateValue.label }}</span>
                                                                                         </DropdownMenuCheckboxItem>
                                                                                     </template>

From 561930bbb203a439cc551d9b827015052b510804 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Tue, 27 May 2025 15:44:34 +0200
Subject: [PATCH 18/18] badge hover

---
 resources/js/Pages/Show/Show.vue                   | 2 +-
 resources/js/components/ui/StateBadge.vue          | 3 ++-
 resources/js/entity-list/components/EntityList.vue | 7 ++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/js/Pages/Show/Show.vue b/resources/js/Pages/Show/Show.vue
index cb7e3a064..88a06ee60 100644
--- a/resources/js/Pages/Show/Show.vue
+++ b/resources/js/Pages/Show/Show.vue
@@ -218,7 +218,7 @@
                                                             <template v-if="show.config.state">
                                                                 <DropdownMenu>
                                                                     <DropdownMenuTrigger as-child>
-                                                                        <Button class="pointer-events-auto h-8 -mx-2 disabled:opacity-100" variant="ghost" size="sm" :disabled="!show.config.state.authorization"
+                                                                        <Button class="pointer-events-auto h-8 -mx-2 disabled:opacity-100 hover:bg-transparent aria-expanded:bg-transparent" variant="ghost" size="sm" :disabled="!show.config.state.authorization"
                                                                             :aria-label="__('sharp::show.state_dropdown.aria_label')"
                                                                         >
                                                                             <StateBadge :state-value="show.instanceStateValue">
diff --git a/resources/js/components/ui/StateBadge.vue b/resources/js/components/ui/StateBadge.vue
index df51cbdb9..0bcf1c1c2 100644
--- a/resources/js/components/ui/StateBadge.vue
+++ b/resources/js/components/ui/StateBadge.vue
@@ -9,11 +9,12 @@
 </script>
 
 <template>
-    <Badge class="text-(--foreground) border-(--border) bg-(--background)"
+    <Badge class="text-(--foreground) border-(--border) bg-(--background) hover:bg-(--background) in-[button[aria-expanded=true]]:border-(--border-hover) in-[button:hover]:border-(--border-hover) hover:border-(--border-hover)"
         style="
             --foreground: oklch(from var(--color) .35 min(c, 0.1) h);
             --background: oklch(from var(--color) max(l, .97) min(calc(c * .2), 0.03) h);
             --border: oklch(from var(--color) .9 min(calc(c * .2), 0.03) h);
+            --border-hover: oklch(from var(--border) .7 min(calc(c * 5), 0.05) h);
         "
         :style="{
             '--color': stateValue?.color ?? 'black',
diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
index 0907fdfa3..37ff286f9 100644
--- a/resources/js/entity-list/components/EntityList.vue
+++ b/resources/js/entity-list/components/EntityList.vue
@@ -68,6 +68,7 @@
     import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
     import { useElementVisibility } from "@vueuse/core";
     import StateBadge from "@/components/ui/StateBadge.vue";
+    // import StateBadgeTest from "@/components/dev/StateBadgeTest.vue";
 
     const props = withDefaults(defineProps<{
         entityKey: string,
@@ -348,6 +349,10 @@
                 </div>
             </template>
 
+<!--            <div class="container my-10">-->
+<!--                <StateBadgeTest></StateBadgeTest>-->
+<!--            </div>-->
+
             <RootCard :class="reordering ? 'relative z-12' : ''">
                 <RootCardHeader :class="reordering || selecting ? 'sticky' : 'data-overflowing-viewport:sticky'" :collapsed="collapsed || !entityList">
                     <div class="flex flex-wrap md:flex-nowrap gap-y-4 gap-x-2">
@@ -725,7 +730,7 @@
                                                         <template v-if="field.type === 'state'">
                                                             <DropdownMenu>
                                                                 <DropdownMenuTrigger as-child>
-                                                                    <Button class="relative disabled:opacity-100 -mx-3" variant="ghost" size="sm" :disabled="!entityList.instanceCanUpdateState(item)" :aria-label="__('sharp::entity_list.state_dropdown.aria_label', { current_state_label: entityList.instanceStateValue(item)?.label })">
+                                                                    <Button class="relative disabled:opacity-100 -mx-3 hover:bg-transparent aria-expanded:bg-transparent" variant="ghost" size="sm" :disabled="!entityList.instanceCanUpdateState(item)" :aria-label="__('sharp::entity_list.state_dropdown.aria_label', { current_state_label: entityList.instanceStateValue(item)?.label })">
                                                                         <StateBadge :state-value="entityList.instanceStateValue(item)">
                                                                             {{ entityList.instanceStateValue(item)?.label }}
                                                                         </StateBadge>