From 3dc1eecf7191f89421d0693027e8bc16daec7162 Mon Sep 17 00:00:00 2001
From: Zane Staggs <zane@squareup.com>
Date: Tue, 25 Nov 2025 09:44:12 -0700
Subject: [PATCH] add tooltips for icons in sidebar and recipes

---
 .../src/components/Layout/AppLayout.tsx       |  44 +++-
 .../src/components/recipes/RecipesView.tsx    | 215 +++++++++++-------
 2 files changed, 162 insertions(+), 97 deletions(-)

diff --git a/ui/desktop/src/components/Layout/AppLayout.tsx b/ui/desktop/src/components/Layout/AppLayout.tsx
index 26029c48f6..b140234b91 100644
--- a/ui/desktop/src/components/Layout/AppLayout.tsx
+++ b/ui/desktop/src/components/Layout/AppLayout.tsx
@@ -5,6 +5,7 @@ import { View, ViewOptions } from '../../utils/navigationUtils';
 import { AppWindowMac, AppWindow } from 'lucide-react';
 import { Button } from '../ui/button';
 import { Sidebar, SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from '../ui/sidebar';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/Tooltip';
 
 const AppLayoutContent: React.FC = () => {
   const navigate = useNavigate();
@@ -76,18 +77,37 @@ const AppLayoutContent: React.FC = () => {
     <div className="flex flex-1 w-full relative animate-fade-in">
       {!shouldHideButtons && (
         <div className={`${headerPadding} absolute top-3 z-100 flex items-center`}>
-          <SidebarTrigger
-            className={`no-drag hover:border-border-strong hover:text-text-default hover:!bg-background-medium hover:scale-105`}
-          />
-          <Button
-            onClick={handleNewWindow}
-            className="no-drag hover:!bg-background-medium"
-            variant="ghost"
-            size="xs"
-            title="Start a new session in a new window"
-          >
-            {safeIsMacOS ? <AppWindowMac className="w-4 h-4" /> : <AppWindow className="w-4 h-4" />}
-          </Button>
+          <TooltipProvider delayDuration={300}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <SidebarTrigger
+                  className={`no-drag hover:border-border-strong hover:text-text-default hover:!bg-background-medium hover:scale-105`}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Toggle sidebar</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={handleNewWindow}
+                  className="no-drag hover:!bg-background-medium"
+                  variant="ghost"
+                  size="xs"
+                >
+                  {safeIsMacOS ? (
+                    <AppWindowMac className="w-4 h-4" />
+                  ) : (
+                    <AppWindow className="w-4 h-4" />
+                  )}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>New window</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
       )}
       <Sidebar variant="inset" collapsible="offcanvas">
diff --git a/ui/desktop/src/components/recipes/RecipesView.tsx b/ui/desktop/src/components/recipes/RecipesView.tsx
index d8e62625bc..73f0dd153d 100644
--- a/ui/desktop/src/components/recipes/RecipesView.tsx
+++ b/ui/desktop/src/components/recipes/RecipesView.tsx
@@ -32,6 +32,7 @@ import { generateDeepLink, Recipe } from '../../recipe';
 import { useNavigation } from '../../hooks/useNavigation';
 import { CronPicker } from '../schedule/CronPicker';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/Tooltip';
 import cronstrue from 'cronstrue';
 
 export default function RecipesView() {
@@ -338,92 +339,136 @@ export default function RecipesView() {
           </div>
         </div>
 
-        <Button
-          onClick={(e) => {
-            e.stopPropagation();
-            handleOpenSlashCommandDialog(recipeManifestResponse);
-          }}
-          variant={slash_command ? 'default' : 'outline'}
-          size="sm"
-          className="h-8 w-8 p-0"
-          title={slash_command ? 'Edit slash command' : 'Add slash command'}
-        >
-          <Terminal className="w-4 h-4" />
-        </Button>
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleOpenSlashCommandDialog(recipeManifestResponse);
+                }}
+                variant={slash_command ? 'default' : 'outline'}
+                size="sm"
+                className="h-8 w-8 p-0"
+              >
+                <Terminal className="w-4 h-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{slash_command ? 'Edit slash command' : 'Add slash command'}</p>
+            </TooltipContent>
+          </Tooltip>
 
-        <div className="flex items-center gap-2 shrink-0">
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleStartRecipeChat(recipe, recipeManifestResponse.id);
-            }}
-            size="sm"
-            className="h-8 w-8 p-0"
-            title="Use recipe"
-          >
-            <Play className="w-4 h-4" />
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleStartRecipeChatInNewWindow(recipeManifestResponse.id);
-            }}
-            variant="outline"
-            size="sm"
-            className="h-8 w-8 p-0"
-            title="Open in new window"
-          >
-            <ExternalLink className="w-4 h-4" />
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleEditRecipe(recipeManifestResponse);
-            }}
-            variant="outline"
-            size="sm"
-            className="h-8 w-8 p-0"
-            title="Edit recipe"
-          >
-            <Edit className="w-4 h-4" />
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleCopyDeeplink(recipeManifestResponse);
-            }}
-            variant="outline"
-            size="sm"
-            className="h-8 w-8 p-0"
-            title="Copy deeplink"
-          >
-            <Link className="w-4 h-4" />
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleOpenScheduleDialog(recipeManifestResponse);
-            }}
-            variant={schedule_cron ? 'default' : 'outline'}
-            size="sm"
-            className="h-8 w-8 p-0"
-            title={schedule_cron ? 'Edit schedule' : 'Add schedule'}
-          >
-            <Clock className="w-4 h-4" />
-          </Button>
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              handleDeleteRecipe(recipeManifestResponse);
-            }}
-            variant="ghost"
-            size="sm"
-            className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
-            title="Delete recipe"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
-        </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleStartRecipeChat(recipe, recipeManifestResponse.id);
+                  }}
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                >
+                  <Play className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Launch recipe</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleStartRecipeChatInNewWindow(recipeManifestResponse.id);
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                >
+                  <ExternalLink className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Launch in new window</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleEditRecipe(recipeManifestResponse);
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                >
+                  <Edit className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Edit recipe</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCopyDeeplink(recipeManifestResponse);
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                >
+                  <Link className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Copy deeplink</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleOpenScheduleDialog(recipeManifestResponse);
+                  }}
+                  variant={schedule_cron ? 'default' : 'outline'}
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                >
+                  <Clock className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{schedule_cron ? 'Edit schedule' : 'Add schedule'}</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDeleteRecipe(recipeManifestResponse);
+                  }}
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Delete recipe</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
       </div>
     </Card>
   );