From 196f02c979453b516864a05f28765e9273305d42 Mon Sep 17 00:00:00 2001
From: Mohamed Aziz Mejri <mjrmohamedaziz@gmail.com>
Date: Thu, 4 Dec 2025 02:23:09 +0100
Subject: [PATCH] feat: add tooltip on project hover to display full project
 name (#1887)

closes #1885

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Added a tooltip to sidebar app items to show the full project name on
hover. Improves readability for long names without changing
interactions.

- **New Features**
- Wrapped the app row with TooltipProvider/Trigger and show
TooltipContent on the right with the full name.
  - Click and favorite actions remain unchanged.

<sup>Written for commit 274c250a27f244f926dcc30413dc1c3db62ca93a.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->
---
 src/components/appItem.tsx | 97 ++++++++++++++++++++++----------------
 1 file changed, 56 insertions(+), 41 deletions(-)

diff --git a/src/components/appItem.tsx b/src/components/appItem.tsx
index 16d3cf0..b9a9bbe 100644
--- a/src/components/appItem.tsx
+++ b/src/components/appItem.tsx
@@ -3,6 +3,12 @@ import { Star } from "lucide-react";
 import { SidebarMenuItem } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
 import { App } from "@/ipc/ipc_types";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 type AppItemProps = {
   app: App;
@@ -21,47 +27,56 @@ export function AppItem({
 }: AppItemProps) {
   return (
     <SidebarMenuItem className="mb-1 relative ">
-      <div className="flex w-[190px] items-center">
-        <Button
-          variant="ghost"
-          onClick={() => handleAppClick(app.id)}
-          className={`justify-start w-full text-left py-3 hover:bg-sidebar-accent/80 ${
-            selectedAppId === app.id
-              ? "bg-sidebar-accent text-sidebar-accent-foreground"
-              : ""
-          }`}
-          data-testid={`app-list-item-${app.name}`}
-        >
-          <div className="flex flex-col w-4/5">
-            <span className="truncate">{app.name}</span>
-            <span className="text-xs text-gray-500">
-              {formatDistanceToNow(new Date(app.createdAt), {
-                addSuffix: true,
-              })}
-            </span>
-          </div>
-        </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={(e) => handleToggleFavorite(app.id, e)}
-          disabled={isFavoriteLoading}
-          className="absolute top-1 right-1 p-1 mx-1 h-6 w-6 z-10"
-          key={app.id}
-          data-testid="favorite-button"
-        >
-          <Star
-            size={12}
-            className={
-              app.isFavorite
-                ? "fill-[#6c55dc] text-[#6c55dc]"
-                : selectedAppId === app.id
-                  ? "hover:fill-black hover:text-black"
-                  : "hover:fill-[#6c55dc] hover:stroke-[#6c55dc] hover:text-[#6c55dc]"
-            }
-          />
-        </Button>
-      </div>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex w-[190px] items-center">
+              <Button
+                variant="ghost"
+                onClick={() => handleAppClick(app.id)}
+                className={`justify-start w-full text-left py-3 hover:bg-sidebar-accent/80 ${
+                  selectedAppId === app.id
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : ""
+                }`}
+                data-testid={`app-list-item-${app.name}`}
+              >
+                <div className="flex flex-col w-4/5">
+                  <span className="truncate">{app.name}</span>
+                  <span className="text-xs text-gray-500">
+                    {formatDistanceToNow(new Date(app.createdAt), {
+                      addSuffix: true,
+                    })}
+                  </span>
+                </div>
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => handleToggleFavorite(app.id, e)}
+                disabled={isFavoriteLoading}
+                className="absolute top-1 right-1 p-1 mx-1 h-6 w-6 z-10"
+                key={app.id}
+                data-testid="favorite-button"
+              >
+                <Star
+                  size={12}
+                  className={
+                    app.isFavorite
+                      ? "fill-[#6c55dc] text-[#6c55dc]"
+                      : selectedAppId === app.id
+                        ? "hover:fill-black hover:text-black"
+                        : "hover:fill-[#6c55dc] hover:stroke-[#6c55dc] hover:text-[#6c55dc]"
+                  }
+                />
+              </Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>{app.name}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </SidebarMenuItem>
   );
 }