Fix (mobile) add long-press support to shared tooltips (#1386)

* Add long-press support to shared tooltips

* fix bot comments

* Fix controlled tooltip long-press suppression

---------

Co-authored-by: Konstantin Zolin <zolin_ka@vk.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/layout/SidebarFilesTree.tsx

@@ -19,6 +19,7 @@ import {
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
@@ -230,16 +231,25 @@ const FileRow: React.FC<FileRowProps> = ({
             open={contextMenuPath === node.path}
             onOpenChange={(open) => setContextMenuPath(open ? node.path : null)}
           >
-            <DropdownMenuTrigger asChild>
+            <Tooltip>
-              <Button
+              <TooltipTrigger asChild>
-                variant="ghost"
+                <span className="inline-flex">
-                size="icon"
+                  <DropdownMenuTrigger asChild>
-                className="h-6 w-6"
+                    <Button
-                onClick={handleMenuButtonClick}
+                      variant="ghost"
-              >
+                      size="icon"
-                <Icon name="more-2-fill" className="h-4 w-4" />
+                      className="h-6 w-6"
-              </Button>
+                      onClick={handleMenuButtonClick}
-            </DropdownMenuTrigger>
+                      title={t('sidebarFilesTree.actions.fileMenuTitle')}
+                      aria-label={t('sidebarFilesTree.actions.fileMenuTitle')}
+                    >
+                      <Icon name="more-2-fill" className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={6}>{t('sidebarFilesTree.actions.fileMenuTitle')}</TooltipContent>
+            </Tooltip>
             <DropdownMenuContent align="end" side="bottom" onCloseAutoFocus={() => setContextMenuPath(null)}>
               {canRename && (
                 <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('rename', node); }}>
@@ -825,30 +835,53 @@ export const SidebarFilesTree: React.FC = () => {
           ) : null}
         </div>
         {canCreateFile && (
-          <Button
+          <Tooltip>
-            variant="ghost"
+            <TooltipTrigger asChild>
-            size="sm"
+              <span className="inline-flex flex-shrink-0">
-            onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
+                <Button
-            className="h-8 w-8 p-0 flex-shrink-0"
+                  variant="ghost"
-            title={t('sidebarFilesTree.actions.newFileTitle')}
+                  size="sm"
-          >
+                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
-            <Icon name="file-add" className="h-4 w-4" />
+                  className="h-8 w-8 p-0 flex-shrink-0"
-          </Button>
+                  title={t('sidebarFilesTree.actions.newFileTitle')}
+                  aria-label={t('sidebarFilesTree.actions.newFileTitle')}
+                >
+                  <Icon name="file-add" className="h-4 w-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('sidebarFilesTree.actions.newFileTitle')}</TooltipContent>
+          </Tooltip>
         )}
         {canCreateFolder && (
-          <Button
+          <Tooltip>
-            variant="ghost"
+            <TooltipTrigger asChild>
-            size="sm"
+              <span className="inline-flex flex-shrink-0">
-            onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
+                <Button
-            className="h-8 w-8 p-0 flex-shrink-0"
+                  variant="ghost"
-            title={t('sidebarFilesTree.actions.newFolderTitle')}
+                  size="sm"
-          >
+                  onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
-            <Icon name="folder-add" className="h-4 w-4" />
+                  className="h-8 w-8 p-0 flex-shrink-0"
-          </Button>
+                  title={t('sidebarFilesTree.actions.newFolderTitle')}
+                  aria-label={t('sidebarFilesTree.actions.newFolderTitle')}
+                >
+                  <Icon name="folder-add" className="h-4 w-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('sidebarFilesTree.actions.newFolderTitle')}</TooltipContent>
+          </Tooltip>
         )}
-        <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="h-8 w-8 p-0 flex-shrink-0" title={t('sidebarFilesTree.actions.refreshTitle')}>
+        <Tooltip>
-          <Icon name="refresh" className="h-4 w-4" />
+          <TooltipTrigger asChild>
-        </Button>
+            <span className="inline-flex flex-shrink-0">
+              <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="h-8 w-8 p-0 flex-shrink-0" title={t('sidebarFilesTree.actions.refreshTitle')} aria-label={t('sidebarFilesTree.actions.refreshTitle')}>
+                <Icon name="refresh" className="h-4 w-4" />
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" sideOffset={6}>{t('sidebarFilesTree.actions.refreshTitle')}</TooltipContent>
+        </Tooltip>
       </div>
 
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="p-2">

packages/ui/src/components/ui/tooltip.tsx

@@ -3,6 +3,20 @@ import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
 
 import { cn } from "@/lib/utils"
 
+const MOBILE_LONG_PRESS_DELAY = 600
+const MOBILE_LONG_PRESS_CLOSE_DELAY = 1600
+const MOBILE_LONG_PRESS_MOVE_TOLERANCE = 10
+
+type LongPressTooltipContextValue = {
+  handlePointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+  handlePointerMove: (event: React.PointerEvent<HTMLElement>) => void;
+  handlePointerEnd: () => void;
+  handleClickCapture: (event: React.MouseEvent<HTMLElement>) => void;
+  handleContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+const LongPressTooltipContext = React.createContext<LongPressTooltipContextValue | null>(null)
+
 type AsChildRenderProps = {
   render?: React.ReactElement;
   children?: React.ReactNode;
@@ -52,11 +66,126 @@ type TooltipRootProps = React.ComponentProps<typeof BaseTooltip.Root> & {
   delayDuration?: number
 }
 
+type TooltipChangeEventDetails = Parameters<NonNullable<TooltipRootProps['onOpenChange']>>[1]
+
 function Tooltip({
   delayDuration,
+  open,
+  onOpenChange,
   ...props
 }: TooltipRootProps) {
-  const tooltip = <BaseTooltip.Root {...props} />
+  const [longPressOpen, setLongPressOpen] = React.useState(false)
+  const longPressTimeoutRef = React.useRef<number | null>(null)
+  const closeTimeoutRef = React.useRef<number | null>(null)
+  const startPointRef = React.useRef<{ x: number; y: number } | null>(null)
+  const suppressClickRef = React.useRef(false)
+  const controlled = open !== undefined
+  const tooltipOpen = controlled ? open : longPressOpen
+
+  const clearLongPressTimeout = React.useCallback(() => {
+    if (longPressTimeoutRef.current !== null) {
+      window.clearTimeout(longPressTimeoutRef.current)
+      longPressTimeoutRef.current = null
+    }
+  }, [])
+
+  const clearCloseTimeout = React.useCallback(() => {
+    if (closeTimeoutRef.current !== null) {
+      window.clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }, [])
+
+  const setTooltipOpen = React.useCallback((nextOpen: boolean) => {
+    if (!controlled) {
+      setLongPressOpen(nextOpen)
+    }
+  }, [controlled])
+
+  const contextValue = React.useMemo<LongPressTooltipContextValue>(() => ({
+    handlePointerDown: (event) => {
+      if (event.pointerType !== 'touch' && event.pointerType !== 'pen') {
+        return
+      }
+
+      clearLongPressTimeout()
+      clearCloseTimeout()
+      startPointRef.current = { x: event.clientX, y: event.clientY }
+
+      longPressTimeoutRef.current = window.setTimeout(() => {
+        if (controlled) {
+          return
+        }
+
+        suppressClickRef.current = true
+        setTooltipOpen(true)
+      }, MOBILE_LONG_PRESS_DELAY)
+    },
+    handlePointerMove: (event) => {
+      const startPoint = startPointRef.current
+
+      if (!startPoint) {
+        return
+      }
+
+      const movedX = Math.abs(event.clientX - startPoint.x)
+      const movedY = Math.abs(event.clientY - startPoint.y)
+
+      if (movedX > MOBILE_LONG_PRESS_MOVE_TOLERANCE || movedY > MOBILE_LONG_PRESS_MOVE_TOLERANCE) {
+        clearLongPressTimeout()
+        startPointRef.current = null
+      }
+    },
+    handlePointerEnd: () => {
+      clearLongPressTimeout()
+      startPointRef.current = null
+
+      if (suppressClickRef.current) {
+        clearCloseTimeout()
+        closeTimeoutRef.current = window.setTimeout(() => {
+          suppressClickRef.current = false
+          setTooltipOpen(false)
+        }, MOBILE_LONG_PRESS_CLOSE_DELAY)
+      }
+    },
+    handleClickCapture: (event) => {
+      if (!suppressClickRef.current) {
+        return
+      }
+
+      suppressClickRef.current = false
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    handleContextMenu: (event) => {
+      if (!suppressClickRef.current) {
+        return
+      }
+
+      event.preventDefault()
+    },
+  }), [clearCloseTimeout, clearLongPressTimeout, controlled, setTooltipOpen])
+
+  React.useEffect(() => {
+    return () => {
+      clearLongPressTimeout()
+      clearCloseTimeout()
+    }
+  }, [clearCloseTimeout, clearLongPressTimeout])
+
+  const handleOpenChange = React.useCallback((nextOpen: boolean, event: TooltipChangeEventDetails) => {
+    if (!controlled) {
+      setLongPressOpen(nextOpen)
+    }
+
+    onOpenChange?.(nextOpen, event)
+  }, [controlled, onOpenChange])
+
+  const tooltip = (
+    <LongPressTooltipContext.Provider value={contextValue}>
+      <BaseTooltip.Root open={tooltipOpen} onOpenChange={handleOpenChange} {...props} />
+    </LongPressTooltipContext.Provider>
+  )
 
   if (delayDuration === undefined) {
     return tooltip
@@ -68,14 +197,57 @@ function Tooltip({
 function TooltipTrigger({
   asChild,
   children,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onClickCapture,
+  onContextMenu,
   ...props
 }: React.ComponentProps<typeof BaseTooltip.Trigger> & { asChild?: boolean }) {
+  const longPressTooltip = React.useContext(LongPressTooltipContext)
   const renderProps: AsChildRenderProps = asChild && React.isValidElement(children)
     ? { render: children as React.ReactElement }
     : { children };
   return (
     <TooltipPartBoundary fallback={children}>
-      <BaseTooltip.Trigger data-slot="tooltip-trigger" {...props} {...renderProps} />
+      <BaseTooltip.Trigger
+        data-slot="tooltip-trigger"
+        onPointerDown={(event) => {
+          onPointerDown?.(event)
+          longPressTooltip?.handlePointerDown(event)
+        }}
+        onPointerMove={(event) => {
+          onPointerMove?.(event)
+          longPressTooltip?.handlePointerMove(event)
+        }}
+        onPointerUp={(event) => {
+          onPointerUp?.(event)
+          longPressTooltip?.handlePointerEnd()
+        }}
+        onPointerCancel={(event) => {
+          onPointerCancel?.(event)
+          longPressTooltip?.handlePointerEnd()
+        }}
+        onClickCapture={(event) => {
+          longPressTooltip?.handleClickCapture(event)
+          if (event.defaultPrevented) {
+            return
+          }
+
+          onClickCapture?.(event)
+        }}
+        onContextMenu={(event) => {
+          longPressTooltip?.handleContextMenu(event)
+          if (event.defaultPrevented) {
+            return
+          }
+
+          onContextMenu?.(event)
+        }}
+        {...props}
+        {...renderProps}
+      />
     </TooltipPartBoundary>
   )
 }

packages/ui/src/components/views/FilesView.tsx

@@ -13,6 +13,7 @@ import {
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { CodeMirrorEditor } from '@/components/ui/CodeMirrorEditor';
 import { GoToLineDialog } from './GoToLineDialog';
 import { PreviewToggleButton } from './PreviewToggleButton';
@@ -2650,6 +2651,17 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
       return null;
     }
 
+    const withTooltip = (label: React.ReactNode, trigger: React.ReactElement) => (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="inline-flex">
+            {trigger}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" sideOffset={6}>{label}</TooltipContent>
+      </Tooltip>
+    );
+
     return (
       <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
         {canEdit && textViewMode === 'edit' && (
@@ -2664,7 +2676,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
                 <Icon name="check" className="size-3.5" />
                 {t('filesView.editor.saved')}
               </span>
-            ) : isDirty ? (
+            ) : isDirty ? withTooltip(t(autoSaveEnabled ? 'filesView.editor.saveNowTitle' : 'filesView.editor.saveNowManualTitle', { shortcut: `${getModifierLabel()}+S` }),
               <Button
                 variant="ghost"
                 size="sm"
@@ -2676,34 +2688,43 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
                 <Icon name="save-3" className="size-4" />
               </Button>
             ) : null}
-            <Button
+            {withTooltip(autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave'),
-              variant="ghost"
+              <Button
-              size="sm"
+                variant="ghost"
-              onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
+                size="sm"
-              className={cn(
+                onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
-                'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
+                className={cn(
-                autoSaveEnabled ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
+                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
-              )}
+                  autoSaveEnabled ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
-              title={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
+                )}
-              aria-label={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
+                title={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
-            >
+                aria-label={autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave')}
-              {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
+              >
-            </Button>
+                {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
+              </Button>
+            )}
           </>
         )}
 
         <DropdownMenu onOpenChange={handleToolbarDropdownOpenChange}>
-          <DropdownMenuTrigger asChild>
+          <Tooltip>
-            <Button
+            <TooltipTrigger asChild>
-              variant="ghost"
+              <span className="inline-flex">
-              size="sm"
+                <DropdownMenuTrigger asChild>
-              className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                  <Button
-              title={t('filesView.editor.openInDesktopApp')}
+                    variant="ghost"
-              aria-label={t('filesView.editor.openInDesktopApp')}
+                    size="sm"
-            >
+                    className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              <Icon name="file-transfer" className="size-4" />
+                    title={t('filesView.editor.openInDesktopApp')}
-            </Button>
+                    aria-label={t('filesView.editor.openInDesktopApp')}
-          </DropdownMenuTrigger>
+                  >
+                    <Icon name="file-transfer" className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.openInDesktopApp')}</TooltipContent>
+          </Tooltip>
           <DropdownMenuContent align="end" className="w-56 max-h-[70vh] overflow-y-auto">
             {openInApps.map((app) => (
               <DropdownMenuItem
@@ -2729,44 +2750,50 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
 
         {!isSelectedImage && (
           <>
-            <Button
+            {withTooltip(wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap'),
-              variant="ghost"
+              <Button
-              size="sm"
+                variant="ghost"
-              onClick={() => setWrapLines(!wrapLines)}
+                size="sm"
-              className={cn(
+                onClick={() => setWrapLines(!wrapLines)}
-                'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
+                className={cn(
-                wrapLines ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
+                  'size-6 p-0 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent',
-              )}
+                  wrapLines ? 'text-foreground opacity-100' : 'text-muted-foreground opacity-65 hover:opacity-100'
-              title={wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap')}
+                )}
-            >
+                title={wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap')}
-              <Icon name="text-wrap" className="size-4" />
+              >
-            </Button>
+                <Icon name="text-wrap" className="size-4" />
+              </Button>
+            )}
             {textViewMode === 'edit' && (
               <>
-                <Button
+                {withTooltip(t('filesView.editor.findInFile'),
-                  variant="ghost"
+                  <Button
-                  size="sm"
+                    variant="ghost"
-                  onClick={(event) => {
+                    size="sm"
-                    setIsSearchOpen(!isSearchOpen);
+                    onClick={(event) => {
-                    event.currentTarget.blur();
+                      setIsSearchOpen(!isSearchOpen);
-                  }}
+                      event.currentTarget.blur();
-                  className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                    }}
-                  title={t('filesView.editor.findInFile')}
+                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                >
+                    title={t('filesView.editor.findInFile')}
-                  <Icon name="search" className="size-4" />
+                  >
-                </Button>
+                    <Icon name="search" className="size-4" />
-                <Button
+                  </Button>
-                  variant="ghost"
+                )}
-                  size="sm"
+                {withTooltip(t('filesView.editor.goToLine'),
-                  onClick={(event) => {
+                  <Button
-                    setIsGoToLineOpen((open) => !open);
+                    variant="ghost"
-                    event.currentTarget.blur();
+                    size="sm"
-                  }}
+                    onClick={(event) => {
-                  className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                      setIsGoToLineOpen((open) => !open);
-                  title={t('filesView.editor.goToLine')}
+                      event.currentTarget.blur();
-                >
+                    }}
-                  <Icon name="menu-fold-2" className="size-4" />
+                    className="size-6 p-0 text-foreground opacity-100 transition-opacity hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                </Button>
+                    title={t('filesView.editor.goToLine')}
+                  >
+                    <Icon name="menu-fold-2" className="size-4" />
+                  </Button>
+                )}
                 <GoToLineDialog
                   open={isGoToLineOpen}
                   onOpenChange={setIsGoToLineOpen}
@@ -2801,123 +2828,135 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
         )}
 
         {isJson && (
-          <Button
+          withTooltip(jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView'),
-            variant="ghost"
+            <Button
-            size="sm"
+              variant="ghost"
-            onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
+              size="sm"
-            className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
+              onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
-            title={jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView')}
+              className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
-          >
+              title={jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView')}
-            {jsonViewMode === 'tree' ? (
+            >
-              <Icon name="code-sslash" className="size-4" />
+              {jsonViewMode === 'tree' ? (
-            ) : (
+                <Icon name="code-sslash" className="size-4" />
-              <Icon name="node-tree" className="size-4" />
+              ) : (
-            )}
+                <Icon name="node-tree" className="size-4" />
-          </Button>
+              )}
+            </Button>
+          )
         )}
 
         {canCopy && (
-          <Button
+          withTooltip(t('filesView.editor.copyFileContents'),
-            variant="ghost"
+            <Button
-            size="sm"
+              variant="ghost"
-            onClick={async () => {
+              size="sm"
-              const result = await copyTextToClipboard(fileContent);
+              onClick={async () => {
-              if (result.ok) {
+                const result = await copyTextToClipboard(fileContent);
-                setCopiedContent(true);
+                if (result.ok) {
-                if (copiedContentTimeoutRef.current !== null) {
+                  setCopiedContent(true);
-                  window.clearTimeout(copiedContentTimeoutRef.current);
+                  if (copiedContentTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedContentTimeoutRef.current);
+                  }
+                  copiedContentTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedContent(false);
+                  }, 1200);
+                } else {
+                  toast.error(t('filesView.toast.copyFailed'));
                 }
-                copiedContentTimeoutRef.current = window.setTimeout(() => {
+              }}
-                  setCopiedContent(false);
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                }, 1200);
+              title={t('filesView.editor.copyFileContents')}
-              } else {
+              aria-label={t('filesView.editor.copyFileContents')}
-                toast.error(t('filesView.toast.copyFailed'));
+            >
-              }
+              {copiedContent ? (
-            }}
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              ) : (
-            title={t('filesView.editor.copyFileContents')}
+                <Icon name="clipboard" className="size-4" />
-            aria-label={t('filesView.editor.copyFileContents')}
+              )}
-          >
+            </Button>
-            {copiedContent ? (
+          )
-              <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            ) : (
-              <Icon name="clipboard" className="size-4" />
-            )}
-          </Button>
         )}
 
         {canCopyPath && (
-          <Button
+          withTooltip(t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath }),
-            variant="ghost"
+            <Button
-            size="sm"
+              variant="ghost"
-            onClick={async () => {
+              size="sm"
-              const result = await copyTextToClipboard(displaySelectedPath);
+              onClick={async () => {
-              if (result.ok) {
+                const result = await copyTextToClipboard(displaySelectedPath);
-                setCopiedPath(true);
+                if (result.ok) {
-                if (copiedPathTimeoutRef.current !== null) {
+                  setCopiedPath(true);
-                  window.clearTimeout(copiedPathTimeoutRef.current);
+                  if (copiedPathTimeoutRef.current !== null) {
+                    window.clearTimeout(copiedPathTimeoutRef.current);
+                  }
+                  copiedPathTimeoutRef.current = window.setTimeout(() => {
+                    setCopiedPath(false);
+                  }, 1200);
+                } else {
+                  toast.error(t('filesView.toast.copyFailed'));
                 }
-                copiedPathTimeoutRef.current = window.setTimeout(() => {
+              }}
-                  setCopiedPath(false);
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-                }, 1200);
+              title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-              } else {
+              aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-                toast.error(t('filesView.toast.copyFailed'));
+            >
-              }
+              {copiedPath ? (
-            }}
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              ) : (
-            title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+                <Icon name="file-copy-2" className="size-4" />
-            aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+              )}
-          >
+            </Button>
-            {copiedPath ? (
+          )
-              <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            ) : (
-              <Icon name="file-copy-2" className="size-4" />
-            )}
-          </Button>
         )}
 
         {files.downloadFile && (
-          <Button
+          withTooltip(t('filesView.editor.saveFile'),
-            variant="ghost"
+            <Button
-            size="sm"
+              variant="ghost"
-            onClick={() => {
+              size="sm"
-              const fn = files.downloadFile;
+              onClick={() => {
-              if (fn) void fn(selectedFile.path);
+                const fn = files.downloadFile;
-            }}
+                if (fn) void fn(selectedFile.path);
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              }}
-            title={t('filesView.editor.saveFile')}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            aria-label={t('filesView.editor.saveFile')}
+              title={t('filesView.editor.saveFile')}
-          >
+              aria-label={t('filesView.editor.saveFile')}
-            <Icon name="download" className="size-4" />
+            >
-          </Button>
+              <Icon name="download" className="size-4" />
+            </Button>
+          )
         )}
 
         {exitFullscreenOnly ? (
-          <Button
+          withTooltip(t('filesView.editor.exitFullscreen'),
-            variant="ghost"
+            <Button
-            size="sm"
+              variant="ghost"
-            onClick={() => setIsFullscreen(false)}
+              size="sm"
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              onClick={() => setIsFullscreen(false)}
-            title={t('filesView.editor.exitFullscreen')}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            aria-label={t('filesView.editor.exitFullscreen')}
+              title={t('filesView.editor.exitFullscreen')}
-          >
+              aria-label={t('filesView.editor.exitFullscreen')}
-            <Icon name="fullscreen-exit" className="size-4" />
+            >
-          </Button>
-        ) : (!isMobile && mode === 'full' && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsFullscreen(!isFullscreen)}
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            title={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
-            aria-label={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
-          >
-            {isFullscreen ? (
               <Icon name="fullscreen-exit" className="size-4" />
-            ) : (
+            </Button>
-              <Icon name="fullscreen" className="size-4" />
+          )
-            )}
+        ) : (!isMobile && mode === 'full' && (
-          </Button>
+          withTooltip(isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsFullscreen(!isFullscreen)}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
+              aria-label={isFullscreen ? t('filesView.editor.exitFullscreen') : t('filesView.editor.fullscreen')}
+            >
+              {isFullscreen ? (
+                <Icon name="fullscreen-exit" className="size-4" />
+              ) : (
+                <Icon name="fullscreen" className="size-4" />
+              )}
+            </Button>
+          )
         ))}
       </div>
     );
@@ -3113,16 +3152,23 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
             {isFloatingToolbarOpen ? (
               renderFloatingFileControls()
             ) : (
-              <Button
+              <Tooltip>
-                variant="ghost"
+                <TooltipTrigger asChild>
-                size="sm"
+                  <span className="inline-flex">
-                onClick={() => setIsFloatingToolbarOpen(true)}
+                    <Button
-                className="size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 text-muted-foreground shadow-sm hover:text-foreground"
+                      variant="ghost"
-                aria-label={t('filesView.editor.showControlsAria')}
+                      size="sm"
-                title={t('filesView.editor.controlsTitle')}
+                      onClick={() => setIsFloatingToolbarOpen(true)}
-              >
+                      className="size-8 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-0 text-muted-foreground shadow-sm hover:text-foreground"
-                <Icon name="more-2-fill" className="size-4" />
+                      aria-label={t('filesView.editor.showControlsAria')}
-              </Button>
+                      title={t('filesView.editor.controlsTitle')}
+                    >
+                      <Icon name="more-2-fill" className="size-4" />
+                    </Button>
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={6}>{t('filesView.editor.controlsTitle')}</TooltipContent>
+              </Tooltip>
             )}
           </div>
         )}
@@ -3356,27 +3402,50 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
               </button>
             )}
           </div>
-          <Button
+          <Tooltip>
-            variant="ghost"
+            <TooltipTrigger asChild>
-            size="sm"
+              <span className="inline-flex flex-shrink-0">
-            onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
+                <Button
-            className="size-8 p-0 flex-shrink-0"
+                  variant="ghost"
-            title={t('filesView.tree.actions.newFileTitle')}
+                  size="sm"
-          >
+                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
-            <Icon name="file-add" className="size-4" />
+                  className="size-8 p-0 flex-shrink-0"
-          </Button>
+                  title={t('filesView.tree.actions.newFileTitle')}
-          <Button
+                  aria-label={t('filesView.tree.actions.newFileTitle')}
-            variant="ghost"
+                >
-            size="sm"
+                  <Icon name="file-add" className="size-4" />
-            onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
+                </Button>
-            className="size-8 p-0 flex-shrink-0"
+              </span>
-            title={t('filesView.tree.actions.newFolderTitle')}
+            </TooltipTrigger>
-          >
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFileTitle')}</TooltipContent>
-            <Icon name="folder-add" className="size-4" />
+          </Tooltip>
-          </Button>
+          <Tooltip>
-          <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="size-8 p-0 flex-shrink-0">
+            <TooltipTrigger asChild>
-            <Icon name="refresh" className="size-4" />
+              <span className="inline-flex flex-shrink-0">
-          </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
+                  className="size-8 p-0 flex-shrink-0"
+                  title={t('filesView.tree.actions.newFolderTitle')}
+                  aria-label={t('filesView.tree.actions.newFolderTitle')}
+                >
+                  <Icon name="folder-add" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFolderTitle')}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="size-8 p-0 flex-shrink-0" title={t('filesView.tree.actions.refreshTitle')} aria-label={t('filesView.tree.actions.refreshTitle')}>
+                  <Icon name="refresh" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.refreshTitle')}</TooltipContent>
+          </Tooltip>
         </div>
       </div>
 

packages/ui/src/lib/i18n/messages/en.ts

@@ -886,6 +886,7 @@ export const dict = {
   'sidebarFilesTree.actions.newFileTitle': 'New File',
   'sidebarFilesTree.actions.newFolderTitle': 'New Folder',
   'sidebarFilesTree.actions.refreshTitle': 'Refresh',
+  'sidebarFilesTree.actions.fileMenuTitle': 'File menu',
   'sidebarFilesTree.state.searching': 'Searching...',
   'sidebarFilesTree.state.loading': 'Loading...',
   'sidebarFilesTree.dialog.createFile.title': 'Create File',
@@ -959,6 +960,7 @@ export const dict = {
   'filesView.tree.search.searching': 'Searching...',
   'filesView.tree.actions.newFileTitle': 'New File',
   'filesView.tree.actions.newFolderTitle': 'New Folder',
+  'filesView.tree.actions.refreshTitle': 'Refresh',
   'filesView.editor.imageAltFallback': 'Image',
   'filesView.error.jsonViewerUnavailable': 'JSON viewer unavailable',
   'filesView.error.switchToTextMode': 'Switch to text mode to view raw content.',

packages/ui/src/lib/i18n/messages/es.ts

@@ -852,6 +852,7 @@ export const dict: Record<I18nKey, string> = {
   "sidebarFilesTree.actions.newFileTitle": "Nuevo archivo",
   "sidebarFilesTree.actions.newFolderTitle": "Nueva carpeta",
   "sidebarFilesTree.actions.refreshTitle": "Actualizar",
+  "sidebarFilesTree.actions.fileMenuTitle": "Menú de archivo",
   "sidebarFilesTree.state.searching": "Buscando...",
   "sidebarFilesTree.state.loading": "Cargando...",
   "sidebarFilesTree.dialog.createFile.title": "Crear archivo",
@@ -925,6 +926,7 @@ export const dict: Record<I18nKey, string> = {
   "filesView.tree.search.searching": "Buscando...",
   "filesView.tree.actions.newFileTitle": "Nuevo archivo",
   "filesView.tree.actions.newFolderTitle": "Nueva carpeta",
+  "filesView.tree.actions.refreshTitle": "Actualizar",
   "filesView.editor.imageAltFallback": "Imagen",
   "filesView.error.jsonViewerUnavailable": "Visualizador JSON no disponible",
   "filesView.error.switchToTextMode": "Cambia al modo de texto para ver contenido bruto.",

packages/ui/src/lib/i18n/messages/ko.ts

@@ -889,6 +889,7 @@ export const dict: Record<I18nKey, string> = {
   'sidebarFilesTree.actions.newFileTitle': '새 파일',
   'sidebarFilesTree.actions.newFolderTitle': '새 폴더',
   'sidebarFilesTree.actions.refreshTitle': '새로고침',
+  'sidebarFilesTree.actions.fileMenuTitle': '파일 메뉴',
   'sidebarFilesTree.state.searching': '검색 중…',
   'sidebarFilesTree.state.loading': '로드 중…',
   'sidebarFilesTree.dialog.createFile.title': '파일 생성',
@@ -962,6 +963,7 @@ export const dict: Record<I18nKey, string> = {
   'filesView.tree.search.searching': '검색 중…',
   'filesView.tree.actions.newFileTitle': '새 파일',
   'filesView.tree.actions.newFolderTitle': '새 폴더',
+  'filesView.tree.actions.refreshTitle': '새로고침',
   'filesView.editor.imageAltFallback': '이미지',
   'filesView.error.jsonViewerUnavailable': 'JSON 뷰어를 사용할 수 없음',
   'filesView.error.switchToTextMode': '원본 내용을 보려면 텍스트 모드로 전환하세요.',

packages/ui/src/lib/i18n/messages/pl.ts

@@ -1363,6 +1363,7 @@ export const dict: Record<I18nKey, string> = {
   'filesView.toast.writeFileFailed': 'Nie udało się zapisać pliku',
   'filesView.tree.actions.newFileTitle': 'Nowy plik',
   'filesView.tree.actions.newFolderTitle': 'Nowy folder',
+  'filesView.tree.actions.refreshTitle': 'Odśwież',
   'filesView.tree.search.clearAria': 'Wyczyść wyszukiwanie',
   'filesView.tree.search.placeholder': 'Szukaj plików...',
   'filesView.tree.search.searching': 'Wyszukiwanie...',
@@ -2129,6 +2130,7 @@ export const dict: Record<I18nKey, string> = {
   'sidebarFilesTree.actions.newFileTitle': 'Nowy plik',
   'sidebarFilesTree.actions.newFolderTitle': 'Nowy folder',
   'sidebarFilesTree.actions.refreshTitle': 'Odśwież',
+  'sidebarFilesTree.actions.fileMenuTitle': 'Menu pliku',
   'sidebarFilesTree.dialog.cancel': 'Anuluj',
   'sidebarFilesTree.dialog.confirm': 'Potwierdź',
   'sidebarFilesTree.dialog.createFile.description': 'Utwórz nowy plik w {path}',

packages/ui/src/lib/i18n/messages/pt-BR.ts

@@ -852,6 +852,7 @@ export const dict: Record<I18nKey, string> = {
   "sidebarFilesTree.actions.newFileTitle": "Novo arquivo",
   "sidebarFilesTree.actions.newFolderTitle": "Nova pasta",
   "sidebarFilesTree.actions.refreshTitle": "Atualizar",
+  "sidebarFilesTree.actions.fileMenuTitle": "Menu do arquivo",
   "sidebarFilesTree.state.searching": "Buscando...",
   "sidebarFilesTree.state.loading": "Carregando...",
   "sidebarFilesTree.dialog.createFile.title": "Criar arquivo",
@@ -925,6 +926,7 @@ export const dict: Record<I18nKey, string> = {
   "filesView.tree.search.searching": "Buscando...",
   "filesView.tree.actions.newFileTitle": "Novo arquivo",
   "filesView.tree.actions.newFolderTitle": "Nova pasta",
+  "filesView.tree.actions.refreshTitle": "Atualizar",
   "filesView.editor.imageAltFallback": "Imagem",
   "filesView.error.jsonViewerUnavailable": "Visualizador JSON não disponível",
   "filesView.error.switchToTextMode": "Alterne para o modo de texto para ver o conteúdo bruto.",

packages/ui/src/lib/i18n/messages/uk.ts

@@ -852,6 +852,7 @@ export const dict: Record<I18nKey, string> = {
   "sidebarFilesTree.actions.newFileTitle": "Новий файл",
   "sidebarFilesTree.actions.newFolderTitle": "Нова папка",
   "sidebarFilesTree.actions.refreshTitle": "Оновити",
+  "sidebarFilesTree.actions.fileMenuTitle": "Меню файлу",
   "sidebarFilesTree.state.searching": "Пошук...",
   "sidebarFilesTree.state.loading": "Завантаження...",
   "sidebarFilesTree.dialog.createFile.title": "Створити файл",
@@ -925,6 +926,7 @@ export const dict: Record<I18nKey, string> = {
   "filesView.tree.search.searching": "Пошук...",
   "filesView.tree.actions.newFileTitle": "Новий файл",
   "filesView.tree.actions.newFolderTitle": "Нова папка",
+  "filesView.tree.actions.refreshTitle": "Оновити",
   "filesView.editor.imageAltFallback": "Зображення",
   "filesView.error.jsonViewerUnavailable": "Переглядач JSON недоступний",
   "filesView.error.switchToTextMode": "Перейдіть у текстовий режим, щоб переглянути необроблений вміст.",

packages/ui/src/lib/i18n/messages/zh-CN.ts

@@ -852,6 +852,7 @@ export const dict: Record<I18nKey, string> = {
   'sidebarFilesTree.actions.newFileTitle': '新建文件',
   'sidebarFilesTree.actions.newFolderTitle': '新建文件夹',
   'sidebarFilesTree.actions.refreshTitle': '刷新',
+  'sidebarFilesTree.actions.fileMenuTitle': '文件菜单',
   'sidebarFilesTree.state.searching': '搜索中...',
   'sidebarFilesTree.state.loading': '加载中...',
   'sidebarFilesTree.dialog.createFile.title': '新建文件',
@@ -925,6 +926,7 @@ export const dict: Record<I18nKey, string> = {
   'filesView.tree.search.searching': '搜索中...',
   'filesView.tree.actions.newFileTitle': '新建文件',
   'filesView.tree.actions.newFolderTitle': '新建文件夹',
+  'filesView.tree.actions.refreshTitle': '刷新',
   'filesView.editor.imageAltFallback': '图片',
   'filesView.error.jsonViewerUnavailable': 'JSON 查看器不可用',
   'filesView.error.switchToTextMode': '请切换到文本模式查看原始内容。',