fix: tighten vertical tab spacing and add inline rename

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>

Author: Copilot

frontend/app/tab/vtab.tsx

@@ -3,6 +3,9 @@
 
 import { makeIconClass } from "@/util/util";
 import { cn } from "@/util/util";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const RenameFocusDelayMs = 50;
 
 export interface VTabItem {
     id: string;
@@ -17,6 +20,7 @@ interface VTabProps {
     isReordering: boolean;
     onSelect: () => void;
     onClose?: () => void;
+    onRename?: (newName: string) => void;
     onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
@@ -30,27 +34,108 @@ export function VTab({
     isReordering,
     onSelect,
     onClose,
+    onRename,
     onDragStart,
     onDragOver,
     onDrop,
     onDragEnd,
 }: VTabProps) {
+    const [originalName, setOriginalName] = useState(tab.name);
+    const [isEditable, setIsEditable] = useState(false);
+    const editableRef = useRef<HTMLDivElement>(null);
+    const editableTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        setOriginalName(tab.name);
+    }, [tab.name]);
+
+    useEffect(() => {
+        return () => {
+            if (editableTimeoutRef.current) {
+                clearTimeout(editableTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const selectEditableText = useCallback(() => {
+        if (!editableRef.current) {
+            return;
+        }
+        editableRef.current.focus();
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (!selection) {
+            return;
+        }
+        range.selectNodeContents(editableRef.current);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }, []);
+
+    const startRename = useCallback(() => {
+        if (onRename == null || isReordering) {
+            return;
+        }
+        if (editableTimeoutRef.current) {
+            clearTimeout(editableTimeoutRef.current);
+        }
+        setIsEditable(true);
+        editableTimeoutRef.current = setTimeout(() => {
+            selectEditableText();
+        }, RenameFocusDelayMs);
+    }, [isReordering, onRename, selectEditableText]);
+
+    const handleBlur = () => {
+        if (!editableRef.current) {
+            return;
+        }
+        const newText = editableRef.current.textContent?.trim() || originalName;
+        editableRef.current.textContent = newText;
+        setIsEditable(false);
+        if (newText !== originalName) {
+            onRename?.(newText);
+        }
+    };
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+        if (!editableRef.current) {
+            return;
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            editableRef.current.blur();
+            return;
+        }
+        if (event.key !== "Escape") {
+            return;
+        }
+        editableRef.current.textContent = originalName;
+        editableRef.current.blur();
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
     return (
         <div
             draggable
             onClick={onSelect}
+            onDoubleClick={(event) => {
+                event.stopPropagation();
+                startRename();
+            }}
             onDragStart={onDragStart}
             onDragOver={onDragOver}
             onDrop={onDrop}
             onDragEnd={onDragEnd}
             className={cn(
-                "group relative flex h-9 w-full cursor-pointer items-center rounded-md border pl-2 pr-1 text-sm transition-colors select-none",
+                "group relative flex h-9 w-full cursor-pointer items-center border-b border-border/70 pl-2 text-sm transition-colors select-none",
                 "whitespace-nowrap",
                 active
-                    ? "border-accent/40 bg-accent/20 text-primary"
+                    ? "bg-accent/20 text-primary"
                     : isReordering
-                      ? "border-transparent bg-transparent text-secondary"
-                      : "border-transparent bg-transparent text-secondary hover:border-border hover:bg-hover",
+                      ? "bg-transparent text-secondary"
+                      : "bg-transparent text-secondary hover:bg-hover",
                 isDragging && "opacity-50"
             )}
         >
@@ -59,19 +144,28 @@ export function VTab({
                     <i className={makeIconClass(tab.indicator.icon, true, { defaultIcon: "bell" })} />
                 </span>
             )}
-            <span
+            <div
+                ref={editableRef}
                 className={cn(
                     "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap transition-[padding-right]",
-                    onClose && !isReordering && "group-hover:pr-6"
+                    onClose && !isReordering && "group-hover:pr-[18px]",
+                    isEditable && "rounded-[2px] bg-white/15 outline-none"
                 )}
+                contentEditable={isEditable}
+                role="textbox"
+                aria-label="Tab name"
+                aria-readonly={!isEditable}
+                onBlur={handleBlur}
+                onKeyDown={handleKeyDown}
+                suppressContentEditableWarning={true}
             >
                 {tab.name}
-            </span>
+            </div>
             {onClose && (
                 <button
                     type="button"
                     className={cn(
-                        "absolute top-1/2 right-0 shrink-0 -translate-y-1/2 cursor-pointer p-1 text-secondary transition",
+                        "absolute top-1/2 right-0 shrink-0 -translate-y-1/2 cursor-pointer py-1 pl-1 pr-1.5 text-secondary transition",
                         isReordering ? "opacity-0" : "opacity-0 group-hover:opacity-100 hover:text-primary"
                     )}
                     onClick={(event) => {

frontend/app/tab/vtabbar.tsx

@@ -13,6 +13,7 @@ interface VTabBarProps {
     className?: string;
     onSelectTab?: (tabId: string) => void;
     onCloseTab?: (tabId: string) => void;
+    onRenameTab?: (tabId: string, newName: string) => void;
     onReorderTabs?: (tabIds: string[]) => void;
 }
 
@@ -29,7 +30,7 @@ function clampWidth(width?: number): number {
     return width;
 }
 
-export function VTabBar({ tabs, activeTabId, width, className, onSelectTab, onCloseTab, onReorderTabs }: VTabBarProps) {
+export function VTabBar({ tabs, activeTabId, width, className, onSelectTab, onCloseTab, onRenameTab, onReorderTabs }: VTabBarProps) {
     const [orderedTabs, setOrderedTabs] = useState<VTabItem[]>(tabs);
     const [dragTabId, setDragTabId] = useState<string | null>(null);
     const [dropIndex, setDropIndex] = useState<number | null>(null);
@@ -81,7 +82,7 @@ export function VTabBar({ tabs, activeTabId, width, className, onSelectTab, onCl
             style={{ width: barWidth }}
         >
             <div
-                className="flex min-h-0 flex-1 flex-col overflow-y-auto p-1"
+                className="flex min-h-0 flex-1 flex-col overflow-y-auto"
                 onDragOver={(event) => {
                     event.preventDefault();
                     if (event.target === event.currentTarget) {
@@ -106,6 +107,7 @@ export function VTabBar({ tabs, activeTabId, width, className, onSelectTab, onCl
                             isReordering={dragTabId != null}
                             onSelect={() => onSelectTab?.(tab.id)}
                             onClose={onCloseTab ? () => onCloseTab(tab.id) : undefined}
+                            onRename={onRenameTab ? (newName) => onRenameTab(tab.id, newName) : undefined}
                             onDragStart={(event) => {
                                 dragSourceRef.current = tab.id;
                                 event.dataTransfer.effectAllowed = "move";

frontend/preview/previews/vtabbar.preview.tsx

@@ -50,6 +50,11 @@ export function VTabBarPreview() {
                     width={width}
                     onSelectTab={setActiveTabId}
                     onCloseTab={handleCloseTab}
+                    onRenameTab={(tabId, newName) => {
+                        setTabs((prevTabs) =>
+                            prevTabs.map((tab) => (tab.id === tabId ? { ...tab, name: newName } : tab))
+                        );
+                    }}
                     onReorderTabs={(tabIds) => {
                         setTabs((prevTabs) => {
                             const tabById = new Map(prevTabs.map((tab) => [tab.id, tab]));