Restore default tooltip styling for truncated titles

Author: beNative

components/PromptTreeItem.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 // Fix: Correctly import the DocumentOrFolder type.
 import type { DocumentOrFolder, DraggedNodeTransfer } from '../types';
 import IconButton from './IconButton';
 import { FileIcon, FolderIcon, FolderOpenIcon, TrashIcon, ChevronRightIcon, ChevronDownIcon, CopyIcon, ArrowUpIcon, ArrowDownIcon, CodeIcon, SaveIcon, LockClosedIcon, LockOpenIcon } from './Icons';
+import Tooltip from './Tooltip';
 
 export interface DocumentNode extends DocumentOrFolder {
   children: DocumentNode[];
@@ -139,10 +140,12 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
   const [dropPosition, setDropPosition] = useState<'before' | 'after' | 'inside' | null>(null);
   const [isHovered, setIsHovered] = useState(false);
   const [lockedRowHeight, setLockedRowHeight] = useState<number | null>(null);
+  const [isTitleTruncated, setIsTitleTruncated] = useState(false);
 
   const renameInputRef = useRef<HTMLInputElement>(null);
   const itemRef = useRef<HTMLLIElement>(null);
   const rowRef = useRef<HTMLDivElement>(null);
+  const titleRef = useRef<HTMLSpanElement>(null);
 
   const isSelected = selectedIds.has(node.id);
   const isFocused = focusedItemId === node.id;
@@ -190,6 +193,51 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
     }
   }, [isSelected, isRenaming]);
 
+  useLayoutEffect(() => {
+    if (!isHovered || !areActionsVisible || isRenaming) {
+      setIsTitleTruncated(false);
+      return;
+    }
+
+    const titleElement = titleRef.current;
+
+    if (!titleElement) {
+      setIsTitleTruncated(false);
+      return;
+    }
+
+    const checkTruncation = () => {
+      const truncated = titleElement.scrollWidth > titleElement.clientWidth + 0.5;
+      setIsTitleTruncated(truncated);
+    };
+
+    checkTruncation();
+
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    let frame: number | null = window.requestAnimationFrame(checkTruncation);
+
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(checkTruncation);
+      resizeObserver.observe(titleElement);
+    }
+
+    window.addEventListener('resize', checkTruncation);
+
+    return () => {
+      if (frame !== null) {
+        window.cancelAnimationFrame(frame);
+      }
+      window.removeEventListener('resize', checkTruncation);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [areActionsVisible, displayTitle, isHovered, isRenaming, searchTerm]);
+
   const handleRenameStart = (e: React.MouseEvent) => {
     e.stopPropagation();
     setIsRenaming(true);
@@ -381,6 +429,7 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
                     />
                 ) : (
                     <span
+                        ref={titleRef}
                         className={`flex-1 px-1 ${
                             areActionsVisible ? 'truncate' : 'whitespace-normal break-words'
                         }`}
@@ -390,6 +439,20 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
                 )}
             </div>
 
+            {isHovered && isTitleTruncated && titleRef.current && (
+                <Tooltip
+                    targetRef={titleRef}
+                    content={(
+                        <span className="inline-flex max-w-xs whitespace-pre-wrap break-words text-left leading-snug gap-1">
+                            {emojiForNode && !isFolder && (
+                                <span aria-hidden="true">{emojiForNode}</span>
+                            )}
+                            <span>{highlightMatches(displayTitle, searchTerm)}</span>
+                        </span>
+                    )}
+                />
+            )}
+
             {!isRenaming && (
                 <div
                     className={`transition-opacity flex items-center ${

components/StatusBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Tooltip from './Tooltip';
-import Hint from './Hint';
 import type { LLMStatus, DiscoveredLLMModel, DiscoveredLLMService, PreviewMetadata } from '../types';
 import { DatabaseIcon, ChevronDownIcon, MinusIcon, PlusIcon, RefreshIcon } from './Icons';
 
@@ -54,8 +53,6 @@ const statusConfig: Record<LLMStatus, { text: string; color: string; tooltip: st
   },
 };
 
-const zoomButtonTooltipClass = '!bg-transparent !shadow-none !p-0 text-inherit';
-
 interface ZoomButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   hint: string;
   icon: React.ReactNode;
@@ -98,11 +95,7 @@ const ZoomButton: React.FC<ZoomButtonProps> = ({ hint, icon, className = '', dis
         </button>
       </span>
       {hasHint && showTooltip && wrapperRef.current && (
-        <Tooltip
-          targetRef={wrapperRef}
-          content={<Hint role="note">{hint}</Hint>}
-          className={zoomButtonTooltipClass}
-        />
+        <Tooltip targetRef={wrapperRef} content={hint} />
       )}
     </>
   );