feat: enhance tab functionality with middle-click close and visual distinction for temporary previews

Author: aesopov

packages/ui/lib/components/PanelTabs/PanelTabs.tsx

@@ -44,7 +44,9 @@ export const PanelTabs = memo(function PanelTabs({
     () =>
       tabs.map((tab) => {
         const isPreview = tab.type === "preview";
-        const isTemp = isPreview && tab.isTemp && !tab.dirty;
+        // Temporary preview tabs are visually distinct (italic) until they are
+        // explicitly pinned (double-click) or promoted by edits.
+        const isTemp = isPreview && tab.isTemp;
         return {
           id: tab.id,
           label: tabLabel(tab),
@@ -63,7 +65,7 @@ export const PanelTabs = memo(function PanelTabs({
       onDoubleClickItem={onDoubleClickTab}
       onCloseItem={onCloseTab}
       onReorderItems={onReorderTabs}
-      getItemClassName={(item) => (item.temp ? panelTabsStyles.temp : undefined)}
+      getItemClassName={(item) => (item.temp ? "temp" : undefined)}
       rightSlot={
         <ActionBar>
           <NestedPopoverMenu

packages/ui/lib/components/Tabs/Tabs.module.css

@@ -93,6 +93,10 @@
   min-width: 48px;
 }
 
+.panelTab.temp .label {
+  font-style: italic;
+}
+
 .panelTab:hover {
   color: var(--fg);
   background: var(--entry-hover, rgba(255, 255, 255, 0.06));

packages/ui/lib/components/Tabs/Tabs.tsx

@@ -176,6 +176,12 @@ export const Tabs = memo(function Tabs<T extends TabsItem>({
                 event.preventDefault();
                 onDoubleClickItem(item.id);
               } : undefined}
+              onAuxClick={onCloseItem ? (event) => {
+                // Middle-click closes tabs (common desktop tab UX).
+                if (event.button !== 1) return;
+                event.preventDefault();
+                onCloseItem(item.id);
+              } : undefined}
               title={item.title}
               draggable={Boolean(onReorderItems)}
               onDragStart={onReorderItems ? (event) => handleDragStart(event, index) : undefined}