feat: improve workspace focus UX (#731)

Author: jonathanlab

apps/twig/src/main/menu.ts

@@ -6,6 +6,7 @@ import os from "node:os";
 import path from "node:path";
 import {
   app,
+  BrowserWindow,
   clipboard,
   dialog,
   Menu,
@@ -206,8 +207,17 @@ function buildViewMenu(): MenuItemConstructorOptions {
   return {
     label: "View",
     submenu: [
-      { role: "reload" },
-      { role: "forceReload" },
+      {
+        label: "Reload",
+        accelerator: "CmdOrCtrl+Shift+R",
+        click: () => BrowserWindow.getFocusedWindow()?.webContents.reload(),
+      },
+      {
+        label: "Force Reload",
+        accelerator: "CmdOrCtrl+Shift+Alt+R",
+        click: () =>
+          BrowserWindow.getFocusedWindow()?.webContents.reloadIgnoringCache(),
+      },
       { role: "toggleDevTools" },
       { type: "separator" },
       { role: "resetZoom" },

apps/twig/src/renderer/components/GlobalEventHandlers.tsx

@@ -5,6 +5,7 @@ import { usePinnedTasksStore } from "@features/sidebar/stores/pinnedTasksStore";
 import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
 import { useTaskViewedStore } from "@features/sidebar/stores/taskViewedStore";
 import { useTasks } from "@features/tasks/hooks/useTasks";
+import { useFocusWorkspace } from "@features/workspace/hooks/useFocusWorkspace";
 import { useWorkspaceStore } from "@features/workspace/stores/workspaceStore";
 import { SHORTCUTS } from "@renderer/constants/keyboard-shortcuts";
 import { clearApplicationStorage } from "@renderer/lib/clearStorage";
@@ -43,6 +44,12 @@ export function GlobalEventHandlers({
   const toggleLeftSidebar = useSidebarStore((state) => state.toggle);
   const toggleRightSidebar = useRightSidebarStore((state) => state.toggle);
 
+  const currentTaskId = view.type === "task-detail" ? view.data?.id : undefined;
+  const { workspace: currentWorkspace, handleToggleFocus } = useFocusWorkspace(
+    currentTaskId ?? "",
+  );
+  const isWorktreeTask = currentWorkspace?.mode === "worktree";
+
   const { data: allTasks = [] } = useTasks();
   const pinnedTaskIds = usePinnedTasksStore((state) => state.pinnedTaskIds);
   const sessions = useSessions();
@@ -165,6 +172,16 @@ export function GlobalEventHandlers({
   useHotkeys(SHORTCUTS.TOGGLE_RIGHT_SIDEBAR, toggleRightSidebar, globalOptions);
   useHotkeys(SHORTCUTS.SHORTCUTS_SHEET, onToggleShortcutsSheet, globalOptions);
 
+  useHotkeys(
+    SHORTCUTS.TASK_REFRESH,
+    handleToggleFocus,
+    {
+      ...globalOptions,
+      enabled: !!currentTaskId && isWorktreeTask,
+    },
+    [handleToggleFocus],
+  );
+
   // Task switching with mod+0-9
   useHotkeys(
     SHORTCUTS.SWITCH_TASK,

apps/twig/src/renderer/components/ui/KeyHint.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+
+interface KeyHintProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+export function KeyHint({ children, style }: KeyHintProps) {
+  return (
+    <kbd
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        fontSize: "11px",
+        fontFamily: "inherit",
+        color: "var(--gray-11)",
+        ...style,
+      }}
+    >
+      {children}
+    </kbd>
+  );
+}

apps/twig/src/renderer/components/ui/Tooltip.tsx

@@ -0,0 +1,74 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type React from "react";
+import { KeyHint } from "./KeyHint";
+
+interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  shortcut?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  delayDuration?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function Tooltip({
+  children,
+  content,
+  shortcut,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  delayDuration = 200,
+  open,
+  defaultOpen,
+  onOpenChange,
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={delayDuration}>
+      <TooltipPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+      >
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            side={side}
+            align={align}
+            sideOffset={sideOffset}
+            className="dark"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              backgroundColor: "var(--gray-2)",
+              color: "var(--gray-12)",
+              padding: "6px 10px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              lineHeight: "1.4",
+              whiteSpace: "nowrap",
+              border: "1px solid var(--gray-4)",
+              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
+              zIndex: 9999,
+              animationDuration: "150ms",
+              animationTimingFunction: "ease-out",
+              willChange: "transform, opacity",
+            }}
+          >
+            <span>{content}</span>
+            {shortcut && (
+              <KeyHint style={{ fontSize: "12px" }}>{shortcut}</KeyHint>
+            )}
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
+export { TooltipPrimitive };

apps/twig/src/renderer/constants/keyboard-shortcuts.ts

@@ -43,8 +43,9 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
   {
     id: "task-refresh",
     keys: SHORTCUTS.TASK_REFRESH,
-    description: "Refresh app",
+    description: "Toggle focus mode",
     category: "general",
+    context: "Worktree task",
   },
   {
     id: "settings",

apps/twig/src/renderer/features/panels/components/DraggableTab.tsx

@@ -15,6 +15,7 @@ interface DraggableTabProps {
   tabData: TabData;
   isActive: boolean;
   index: number;
+  draggable?: boolean;
   closeable?: boolean;
   isPreview?: boolean;
   onSelect: () => void;
@@ -34,6 +35,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
   tabData,
   isActive,
   index,
+  draggable = true,
   closeable = true,
   isPreview,
   onSelect,
@@ -49,6 +51,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
     id: tabId,
     index,
     group: panelId,
+    disabled: !draggable,
     transition: {
       duration: 200,
       easing: "ease",
@@ -131,7 +134,7 @@ export const DraggableTab: React.FC<DraggableTabProps> = ({
       gap="1"
       pl="3"
       pr={onClose ? "1" : "3"}
-      className="group relative flex-shrink-0 cursor-grab select-none border-r border-b-2 transition-colors"
+      className={`group relative flex-shrink-0 select-none border-r border-b-2 transition-colors ${draggable ? "cursor-grab" : "cursor-pointer"}`}
       style={{
         borderRightColor: "var(--gray-6)",
         borderBottomColor: isActive ? "var(--accent-10)" : "transparent",

apps/twig/src/renderer/features/panels/components/PanelLayout.tsx

@@ -1,6 +1,5 @@
 import { DragDropProvider } from "@dnd-kit/react";
 import type { Task } from "@shared/types";
-import { useSettingsStore } from "@stores/settingsStore";
 import type React from "react";
 import { useCallback, useEffect } from "react";
 import { useDragDropHandlers } from "../hooks/useDragDropHandlers";
@@ -170,25 +169,14 @@ export const PanelLayout: React.FC<PanelLayoutProps> = ({ taskId, task }) => {
   const layout = usePanelLayoutStore((state) => state.getLayout(taskId));
   const initializeTask = usePanelLayoutStore((state) => state.initializeTask);
   const dragDropHandlers = useDragDropHandlers(taskId);
-  const terminalLayoutMode = useSettingsStore(
-    (state) => state.terminalLayoutMode,
-  );
-  const loadTerminalLayout = useSettingsStore(
-    (state) => state.loadTerminalLayout,
-  );
-  const isLoading = useSettingsStore((state) => state.isLoading);
 
   usePanelKeyboardShortcuts(taskId);
 
   useEffect(() => {
-    loadTerminalLayout();
-  }, [loadTerminalLayout]);
-
-  useEffect(() => {
-    if (!layout && !isLoading) {
-      initializeTask(taskId, terminalLayoutMode);
+    if (!layout) {
+      initializeTask(taskId);
     }
-  }, [taskId, layout, initializeTask, terminalLayoutMode, isLoading]);
+  }, [taskId, layout, initializeTask]);
 
   if (!layout) {
     return null;

apps/twig/src/renderer/features/panels/components/PanelTab.tsx

@@ -1,7 +1,6 @@
 import type { TabData } from "@features/panels/store/panelTypes";
 import type React from "react";
 import { DraggableTab } from "./DraggableTab";
-import { StaticTab } from "./StaticTab";
 
 interface PanelTabProps {
   tabId: string;
@@ -42,19 +41,6 @@ export const PanelTab: React.FC<PanelTabProps> = ({
   badge,
   hasUnsavedChanges,
 }) => {
-  if (!draggable) {
-    return (
-      <StaticTab
-        label={label}
-        isActive={isActive}
-        onSelect={onSelect}
-        icon={icon}
-        badge={badge}
-        hasUnsavedChanges={hasUnsavedChanges}
-      />
-    );
-  }
-
   return (
     <DraggableTab
       tabId={tabId}
@@ -63,6 +49,7 @@ export const PanelTab: React.FC<PanelTabProps> = ({
       tabData={tabData}
       isActive={isActive}
       index={index}
+      draggable={draggable}
       closeable={closeable}
       isPreview={isPreview}
       onSelect={onSelect}

apps/twig/src/renderer/features/panels/components/StaticTab.tsx

@@ -55,6 +55,7 @@ interface TabbedPanelProps {
   draggingTabPanelId?: string | null;
   onAddTerminal?: () => void;
   onSplitPanel?: (direction: SplitDirection) => void;
+  rightContent?: React.ReactNode;
 }
 
 export const TabbedPanel: React.FC<TabbedPanelProps> = ({
@@ -69,6 +70,7 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
   draggingTabPanelId = null,
   onAddTerminal,
   onSplitPanel,
+  rightContent,
 }) => {
   const activeTab = content.tabs.find((tab) => tab.id === content.activeTabId);
 
@@ -191,26 +193,30 @@ export const TabbedPanel: React.FC<TabbedPanelProps> = ({
               />
             )}
           </Flex>
-          {content.droppable && (onSplitPanel || onAddTerminal) && (
+          {(rightContent ||
+            (content.droppable && (onSplitPanel || onAddTerminal))) && (
             <Flex
+              align="center"
               style={{
                 position: "absolute",
                 right: 0,
                 top: 0,
                 height: "32px",
                 borderLeft: "1px solid var(--gray-6)",
+                borderBottom: "1px solid var(--gray-6)",
                 background: "var(--color-background)",
               }}
             >
-              {onSplitPanel && (
+              {rightContent}
+              {content.droppable && onSplitPanel && (
                 <TabBarButton
                   ariaLabel="Split panel"
                   onClick={handleSplitClick}
                 >
                   <SquareSplitHorizontalIcon width={12} height={12} />
                 </TabBarButton>
               )}
-              {onAddTerminal && (
+              {content.droppable && onAddTerminal && (
                 <TabBarButton ariaLabel="Add terminal" onClick={onAddTerminal}>
                   <Terminal size={14} />
                 </TabBarButton>