From c1e03e6c61b3bab12a9fd796ab8d4c3805e169fb Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 7 Apr 2025 13:47:06 +0200
Subject: [PATCH] Add favorite icon tooltip to project title in [slug].vue

- Wrapped the project title and favorite icon in a flex container for better alignment.
- Added a tooltip to the favorite icon to provide context when hovered over.
---
 app/pages/projects/[slug].vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/pages/projects/[slug].vue b/app/pages/projects/[slug].vue
index e4aa3a0..0d65454 100644
--- a/app/pages/projects/[slug].vue
+++ b/app/pages/projects/[slug].vue
@@ -32,11 +32,28 @@ useSeoMeta({
     </div>
     <div class="mt-2">
       <div class="flex items-end justify-between gap-2 flex-wrap">
-        <h1
-          class="font-bold text-3xl text-black dark:text-white"
-        >
-          {{ project.title }}
-        </h1>
+        <div class="flex items-center gap-2">
+          <h1
+            class="font-bold text-3xl text-black dark:text-white"
+          >
+            {{ project.title }}
+          </h1>
+          <UTooltip
+            :text="t('tooltip.favorite')" :content="{
+              align: 'center',
+              side: 'right',
+              sideOffset: 8,
+            }"
+            arrow
+          >
+            <UIcon
+              v-if="project.favorite"
+              name="i-ph-star-duotone"
+              size="24"
+              class="text-amber-500"
+            />
+          </UTooltip>
+        </div>
         <div
           class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
         >