Make tooltip easier to reuse across the app

app/components/sidebar/HistoryItem.tsx

@@ -2,6 +2,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import { useEffect, useRef, useState } from 'react';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import { exportChat } from '~/utils/chatExport';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
@@ -47,22 +48,27 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
         <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
           {hovering && (
             <div className="flex items-center p-1 text-bolt-elements-textSecondary">
-              <button
-                className="i-ph:download-simple scale-110 mr-2"
-                onClick={(event) => {
-                  event.preventDefault();
-                  exportChat(item.messages, item.description);
-                }}
-                title="Export chat"
-              />
-              {onDuplicate && (
+              <WithTooltip tooltip="Export chat">
                 <button
-                  className="i-ph:copy scale-110 mr-2"
-                  onClick={() => onDuplicate?.(item.id)}
-                  title="Duplicate chat"
+                  className="i-ph:download-simple scale-110 mr-2"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    exportChat(item.messages, item.description);
+                  }}
+                  title="Export chat"
                 />
+              </WithTooltip>
+              {onDuplicate && (
+                <WithTooltip tooltip="Duplicate chat">
+                  <button
+                    className="i-ph:copy scale-110 mr-2"
+                    onClick={() => onDuplicate?.(item.id)}
+                    title="Duplicate chat"
+                  />
+                </WithTooltip>
               )}
               <Dialog.Trigger asChild>
+                <WithTooltip tooltip="Delete chat">
                 <button
                   className="i-ph:trash scale-110"
                   onClick={(event) => {
@@ -71,6 +77,7 @@ export function HistoryItem({ item, onDelete, onDuplicate }: HistoryItemProps) {
                     onDelete?.(event);
                   }}
                 />
+                </WithTooltip>
               </Dialog.Trigger>
             </div>
           )}

app/components/sidebar/Menu.client.tsx

@@ -17,8 +17,8 @@ const menuVariants = {
     left: '-150px',
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
-    },
+      ease: cubicEasingFn
+    }
   },
   open: {
     opacity: 1,
@@ -26,9 +26,9 @@ const menuVariants = {
     left: 0,
     transition: {
       duration: 0.2,
-      ease: cubicEasingFn,
-    },
-  },
+      ease: cubicEasingFn
+    }
+  }
 } satisfies Variants;
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
@@ -136,7 +136,8 @@ export function Menu() {
           <DialogRoot open={dialogContent !== null}>
             {binDates(list).map(({ category, items }) => (
               <div key={category} className="mt-4 first:mt-0 space-y-1">
-                <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                <div
+                  className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
                   {category}
                 </div>
                 {items.map((item) => (