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>
2026-05-24 21:51:58 +03:00
parent 3f3b835ee9
commit b7440bef39
10 changed files with 515 additions and 227 deletions
@@ -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>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6"
-                onClick={handleMenuButtonClick}
-              >
-                <Icon name="more-2-fill" className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="inline-flex">
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={handleMenuButtonClick}
+                      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
-            variant="ghost"
-            size="sm"
-            onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
-            className="h-8 w-8 p-0 flex-shrink-0"
-            title={t('sidebarFilesTree.actions.newFileTitle')}
-          >
-            <Icon name="file-add" className="h-4 w-4" />
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
+                  className="h-8 w-8 p-0 flex-shrink-0"
+                  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
-            variant="ghost"
-            size="sm"
-            onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
-            className="h-8 w-8 p-0 flex-shrink-0"
-            title={t('sidebarFilesTree.actions.newFolderTitle')}
-          >
-            <Icon name="folder-add" className="h-4 w-4" />
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFolder', { path: currentDirectory, type: 'directory' })}
+                  className="h-8 w-8 p-0 flex-shrink-0"
+                  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')}>
-          <Icon name="refresh" className="h-4 w-4" />
-        </Button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <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">
@@ -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>
  )
 }
@@ -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
-              variant="ghost"
-              size="sm"
-              onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
-              className={cn(
-                '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')}
-            >
-              {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
-            </Button>
+            {withTooltip(autoSaveEnabled ? t('filesView.editor.autoSaveOn') : t('filesView.editor.manualSave'),
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setAutoSaveEnabled((enabled) => !enabled)}
+                className={cn(
+                  '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')}
+              >
+                {autoSaveEnabled ? <Icon name="file-check-fill" className="size-4" /> : <Icon name="file-check" className="size-4" />}
+              </Button>
+            )}
          </>
        )}

        <DropdownMenu onOpenChange={handleToolbarDropdownOpenChange}>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-              title={t('filesView.editor.openInDesktopApp')}
-              aria-label={t('filesView.editor.openInDesktopApp')}
-            >
-              <Icon name="file-transfer" className="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex">
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="size-6 p-0 text-foreground opacity-100 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+                    title={t('filesView.editor.openInDesktopApp')}
+                    aria-label={t('filesView.editor.openInDesktopApp')}
+                  >
+                    <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
-              variant="ghost"
-              size="sm"
-              onClick={() => setWrapLines(!wrapLines)}
-              className={cn(
-                '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')}
-            >
-              <Icon name="text-wrap" className="size-4" />
-            </Button>
+            {withTooltip(wrapLines ? t('filesView.editor.disableLineWrap') : t('filesView.editor.enableLineWrap'),
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setWrapLines(!wrapLines)}
+                className={cn(
+                  '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')}
+              >
+                <Icon name="text-wrap" className="size-4" />
+              </Button>
+            )}
            {textViewMode === 'edit' && (
              <>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(event) => {
-                    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')}
-                >
-                  <Icon name="search" className="size-4" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(event) => {
-                    setIsGoToLineOpen((open) => !open);
-                    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.goToLine')}
-                >
-                  <Icon name="menu-fold-2" className="size-4" />
-                </Button>
+                {withTooltip(t('filesView.editor.findInFile'),
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(event) => {
+                      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')}
+                  >
+                    <Icon name="search" className="size-4" />
+                  </Button>
+                )}
+                {withTooltip(t('filesView.editor.goToLine'),
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={(event) => {
+                      setIsGoToLineOpen((open) => !open);
+                      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.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
-            variant="ghost"
-            size="sm"
-            onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
-            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" />
-            ) : (
-              <Icon name="node-tree" className="size-4" />
-            )}
-          </Button>
+          withTooltip(jsonViewMode === 'tree' ? t('filesView.editor.switchToTextView') : t('filesView.editor.switchToTreeView'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => saveJsonViewMode(jsonViewMode === 'tree' ? 'text' : 'tree')}
+              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" />
+              ) : (
+                <Icon name="node-tree" className="size-4" />
+              )}
+            </Button>
+          )
        )}

        {canCopy && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={async () => {
-              const result = await copyTextToClipboard(fileContent);
-              if (result.ok) {
-                setCopiedContent(true);
-                if (copiedContentTimeoutRef.current !== null) {
-                  window.clearTimeout(copiedContentTimeoutRef.current);
+          withTooltip(t('filesView.editor.copyFileContents'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                const result = await copyTextToClipboard(fileContent);
+                if (result.ok) {
+                  setCopiedContent(true);
+                  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);
-                }, 1200);
-              } else {
-                toast.error(t('filesView.toast.copyFailed'));
-              }
-            }}
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            title={t('filesView.editor.copyFileContents')}
-            aria-label={t('filesView.editor.copyFileContents')}
-          >
-            {copiedContent ? (
-              <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            ) : (
-              <Icon name="clipboard" className="size-4" />
-            )}
-          </Button>
+              }}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.copyFileContents')}
+              aria-label={t('filesView.editor.copyFileContents')}
+            >
+              {copiedContent ? (
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
+              ) : (
+                <Icon name="clipboard" className="size-4" />
+              )}
+            </Button>
+          )
        )}

        {canCopyPath && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={async () => {
-              const result = await copyTextToClipboard(displaySelectedPath);
-              if (result.ok) {
-                setCopiedPath(true);
-                if (copiedPathTimeoutRef.current !== null) {
-                  window.clearTimeout(copiedPathTimeoutRef.current);
+          withTooltip(t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath }),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={async () => {
+                const result = await copyTextToClipboard(displaySelectedPath);
+                if (result.ok) {
+                  setCopiedPath(true);
+                  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);
-                }, 1200);
-              } else {
-                toast.error(t('filesView.toast.copyFailed'));
-              }
-            }}
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-            aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
-          >
-            {copiedPath ? (
-              <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
-            ) : (
-              <Icon name="file-copy-2" className="size-4" />
-            )}
-          </Button>
+              }}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+              aria-label={t('filesView.editor.copyFilePathTitle', { path: displaySelectedPath })}
+            >
+              {copiedPath ? (
+                <Icon name="check" className="size-4 text-[color:var(--status-success)]" />
+              ) : (
+                <Icon name="file-copy-2" className="size-4" />
+              )}
+            </Button>
+          )
        )}

        {files.downloadFile && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => {
-              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')}
-            aria-label={t('filesView.editor.saveFile')}
-          >
-            <Icon name="download" className="size-4" />
-          </Button>
+          withTooltip(t('filesView.editor.saveFile'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                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')}
+              aria-label={t('filesView.editor.saveFile')}
+            >
+              <Icon name="download" className="size-4" />
+            </Button>
+          )
        )}

        {exitFullscreenOnly ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setIsFullscreen(false)}
-            className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
-            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 ? (
+          withTooltip(t('filesView.editor.exitFullscreen'),
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsFullscreen(false)}
+              className="size-6 p-0 hover:bg-transparent focus-visible:bg-transparent active:bg-transparent"
+              title={t('filesView.editor.exitFullscreen')}
+              aria-label={t('filesView.editor.exitFullscreen')}
+            >
              <Icon name="fullscreen-exit" className="size-4" />
-            ) : (
-              <Icon name="fullscreen" className="size-4" />
-            )}
-          </Button>
+            </Button>
+          )
+        ) : (!isMobile && mode === 'full' && (
+          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
-                variant="ghost"
-                size="sm"
-                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"
-                aria-label={t('filesView.editor.showControlsAria')}
-                title={t('filesView.editor.controlsTitle')}
-              >
-                <Icon name="more-2-fill" className="size-4" />
-              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="inline-flex">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      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"
+                      aria-label={t('filesView.editor.showControlsAria')}
+                      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
-            variant="ghost"
-            size="sm"
-            onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
-            className="size-8 p-0 flex-shrink-0"
-            title={t('filesView.tree.actions.newFileTitle')}
-          >
-            <Icon name="file-add" className="size-4" />
-          </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')}
-          >
-            <Icon name="folder-add" className="size-4" />
-          </Button>
-          <Button variant="ghost" size="sm" onClick={() => void refreshRoot()} className="size-8 p-0 flex-shrink-0">
-            <Icon name="refresh" className="size-4" />
-          </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleOpenDialog('createFile', { path: currentDirectory, type: 'directory' })}
+                  className="size-8 p-0 flex-shrink-0"
+                  title={t('filesView.tree.actions.newFileTitle')}
+                  aria-label={t('filesView.tree.actions.newFileTitle')}
+                >
+                  <Icon name="file-add" className="size-4" />
+                </Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" sideOffset={6}>{t('filesView.tree.actions.newFileTitle')}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="inline-flex flex-shrink-0">
+                <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>

@@ -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.',
@@ -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.",
@@ -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': '원본 내용을 보려면 텍스트 모드로 전환하세요.',
@@ -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}',
@@ -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.",
@@ -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": "Перейдіть у текстовий режим, щоб переглянути необроблений вміст.",
@@ -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': '请切换到文本模式查看原始内容。',