kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add tooltip on project hover to display full project name (#1887)

Browse Source 
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. -->
This commit is contained in:
Mohamed Aziz Mejri
2025-12-04 02:23:09 +01:00
committed by GitHub
parent c01677fcbd
commit 196f02c979
1 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/appItem.tsx
View File

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