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. -->
This commit is contained in:
committed by
GitHub
parent
c01677fcbd
commit
196f02c979
@@ -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,6 +27,9 @@ export function AppItem({
|
||||
}: AppItemProps) {
|
||||
return (
|
||||
<SidebarMenuItem className="mb-1 relative ">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex w-[190px] items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -62,6 +71,12 @@ export function AppItem({
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p>{app.name}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user