@noya-app/noya-designsystem 0.1.82 → 0.1.84

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { memoGeneric } from "@noya-app/react-utils";
-import React, { useMemo, useRef, useState } from "react";
-import { Button } from "../Button";
-import { DividerVertical } from "../Divider";
-import { Drawer } from "../Drawer";
+import React, { useMemo, useState } from "react";
+import { cssVarNames } from "../../theme";
+import { Divider } from "../Divider";
 import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
-import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
-import { LayoutProps, PanelLayoutState, SidebarRef } from "./types";
-import { VerticalTabMenu } from "./VerticalTabMenu";
+import { ToolbarMenu } from "../Toolbar";
+import { EDITOR_PANEL_GROUP_ID } from "./constants";
+import { LayoutProps, PanelLayoutState } from "./types";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -25,16 +24,46 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightTabValue,
   onChangeRightTab,
   onChangeLeftTab,
-  compactDrawerMenu,
 }: LayoutProps<LeftTab, RightTab>) {
-  const portalContainer = useRef<HTMLDivElement>(null);
-
   const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] =
     useState<PanelLayoutState>({
       leftSidebarCollapsed: true,
       rightSidebarCollapsed: true,
     });
 
+  // Expose expand/collapse methods via refs
+  React.useImperativeHandle(
+    leftSidebarRef,
+    () => ({
+      expand: () =>
+        setLayoutState((prev) => ({
+          ...prev,
+          leftSidebarCollapsed: false,
+          rightSidebarCollapsed: true,
+        })),
+      collapse: () =>
+        setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true })),
+      isExpanded: () => !leftSidebarCollapsed,
+    }),
+    [leftSidebarCollapsed]
+  );
+
+  React.useImperativeHandle(
+    rightSidebarRef,
+    () => ({
+      expand: () =>
+        setLayoutState((prev) => ({
+          ...prev,
+          rightSidebarCollapsed: false,
+          leftSidebarCollapsed: true,
+        })),
+      collapse: () =>
+        setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true })),
+      isExpanded: () => !rightSidebarCollapsed,
+    }),
+    [rightSidebarCollapsed]
+  );
+
   const allTabItems = useMemo(
     () =>
       [
@@ -44,15 +73,12 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
 
-  const hasTabs = allTabItems.length > 0;
-
-  // Determine if we should use the compact top-row menu variant.
   const allSelectableTabItems = useMemo(
     () => allTabItems.filter(isSelectableMenuItem),
     [allTabItems]
   );
-  const useCompactInToolbar =
-    !!compactDrawerMenu && allSelectableTabItems.length <= 1;
+
+  const hasTabs = allSelectableTabItems.length > 0;
 
   const leftSelectableTabItems = useMemo(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
@@ -64,165 +90,118 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     [rightTabItems]
   );
 
-  // Shared helpers for expanding/collapsing drawers
-  const toggleSidebar = (ref: React.RefObject<SidebarRef | null>) => {
-    if (ref.current?.isExpanded()) {
-      ref.current?.collapse();
-    } else {
-      ref.current?.expand();
-    }
-  };
-
-  const ensureExpanded = (ref: React.RefObject<SidebarRef | null>) => {
-    if (!ref.current?.isExpanded()) {
-      ref.current?.expand();
-    }
-  };
-
   const handleSelectTab = (value: LeftTab | RightTab) => {
-    if (leftSelectableTabItems.some((item) => item.value === value)) {
-      if (value === leftTabValue) {
-        toggleSidebar(leftSidebarRef);
+    const isLeftItem = leftSelectableTabItems.some(
+      (item) => item.value === value
+    );
+    const isRightItem = rightSelectableTabItems.some(
+      (item) => item.value === value
+    );
+
+    if (isLeftItem) {
+      if (value === leftTabValue && !leftSidebarCollapsed) {
+        // Toggle off - clicking same tab that's already open
+        setLayoutState((prev) => ({ ...prev, leftSidebarCollapsed: true }));
       } else {
-        ensureExpanded(leftSidebarRef);
+        // Open this tab, close other
+        setLayoutState({
+          leftSidebarCollapsed: false,
+          rightSidebarCollapsed: true,
+        });
         onChangeLeftTab?.(value as LeftTab);
       }
-    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
-      if (value === rightTabValue) {
-        toggleSidebar(rightSidebarRef);
+    } else if (isRightItem) {
+      if (value === rightTabValue && !rightSidebarCollapsed) {
+        // Toggle off - clicking same tab that's already open
+        setLayoutState((prev) => ({ ...prev, rightSidebarCollapsed: true }));
       } else {
-        ensureExpanded(rightSidebarRef);
+        // Open this tab, close other
+        setLayoutState({
+          leftSidebarCollapsed: true,
+          rightSidebarCollapsed: false,
+        });
         onChangeRightTab?.(value as RightTab);
       }
     }
   };
 
-  const { activeValue, isSidebarCollapsed } =
-    leftSelectableTabItems.length > 0 && !leftSidebarCollapsed
-      ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed }
-      : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed
-        ? {
-            activeValue: rightTabValue,
-            isSidebarCollapsed: rightSidebarCollapsed,
-          }
-        : { activeValue: undefined, isSidebarCollapsed: true };
+  // Determine which panel is currently showing
+  const activeDrawerPanel = !leftSidebarCollapsed
+    ? leftPanel
+    : !rightSidebarCollapsed
+      ? rightPanel
+      : null;
+
+  const isDrawerOpen = activeDrawerPanel !== null;
+
+  // Determine active tab value for highlighting
+  const activeTabValue = !leftSidebarCollapsed
+    ? leftTabValue
+    : !rightSidebarCollapsed
+      ? rightTabValue
+      : undefined;
+
+  // Create toolbar menu items with checked state
+  const toolbarMenuItems = useMemo(
+    () =>
+      allSelectableTabItems.map((item) => ({
+        ...item,
+        checked: activeTabValue === item.value,
+      })),
+    [allSelectableTabItems, activeTabValue]
+  );
 
   return (
     <div
-      ref={portalContainer}
       id={EDITOR_PANEL_GROUP_ID}
-      className="n-flex n-flex-1 n-relative focus:n-outline-none"
+      className="n-flex n-flex-col n-flex-1 n-relative focus:n-outline-none"
     >
-      {hasTabs && !useCompactInToolbar && (
+      {/* Horizontal toggle bar - secondary toolbar row */}
+      {hasTabs && (
         <>
-          <VerticalTabMenu
-            tooltipSide="right"
-            items={allTabItems}
-            activeValue={activeValue}
-            isSidebarCollapsed={isSidebarCollapsed}
-            onChange={(value) => handleSelectTab(value as LeftTab | RightTab)}
-          />
-          <DividerVertical className="n-h-full" />
+          <div
+            className="n-flex n-flex-row n-items-center n-gap-1 n-px-2 n-py-1.5 n-bg-sidebar-background n-flex-none"
+            style={{
+              [cssVarNames.colors.inputBackground]: "transparent",
+              [cssVarNames.colors.buttonBackground]: "transparent",
+            }}
+          >
+            <ToolbarMenu
+              items={toolbarMenuItems}
+              onSelectMenuItem={handleSelectTab}
+            />
+          </div>
+          <Divider />
         </>
       )}
 
-      {useCompactInToolbar && (
-        <div className="n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center">
-          {allSelectableTabItems[0] && (
-            <Button
-              variant="none"
-              className="n-rounded"
-              style={{
-                width: "var(--n-input-height)",
-                height: "var(--n-input-height)",
-              }}
-              icon={allSelectableTabItems[0].icon}
-              tooltip={
-                allSelectableTabItems[0].tooltip ??
-                allSelectableTabItems[0].title
+      {/* Main content area with drawer overlay */}
+      <div className="n-flex-1 n-flex n-flex-col n-relative n-min-h-0">
+        {/* Drawer panel - positioned absolutely over content */}
+        {isDrawerOpen && (
+          <div className="n-absolute n-inset-0 n-z-20 n-flex n-flex-col">
+            {/* Drawer content */}
+            <div className="n-flex-none n-max-h-[50vh] n-overflow-auto n-bg-sidebar-background n-border-b n-border-divider-strong n-shadow-lg">
+              {activeDrawerPanel}
+            </div>
+            {/* Backdrop - click to close */}
+            <div
+              className="n-flex-1 n-bg-black/30"
+              onClick={() =>
+                setLayoutState({
+                  leftSidebarCollapsed: true,
+                  rightSidebarCollapsed: true,
+                })
               }
-              active={(() => {
-                const value = allSelectableTabItems[0].value as
-                  | LeftTab
-                  | RightTab;
-                const isLeftItem = leftSelectableTabItems.some(
-                  (i) => i.value === value
-                );
-                const isRightItem = rightSelectableTabItems.some(
-                  (i) => i.value === value
-                );
-                return isLeftItem
-                  ? !leftSidebarCollapsed
-                  : isRightItem
-                    ? !rightSidebarCollapsed
-                    : false;
-              })()}
-              onClick={() => {
-                const value = allSelectableTabItems[0].value as
-                  | LeftTab
-                  | RightTab;
-                handleSelectTab(value);
-              }}
             />
-          )}
-        </div>
-      )}
+          </div>
+        )}
 
-      <div className="n-flex-1 n-flex n-relative">{centerPanel}</div>
-
-      {leftPanel && (
-        <Drawer
-          modal={false}
-          ref={leftSidebarRef}
-          className="n-flex-1"
-          style={
-            useCompactInToolbar
-              ? undefined
-              : { left: 48, maxWidth: "calc(100% - 48px)" }
-          }
-          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
-          open={!leftSidebarCollapsed}
-          positioning="absolute"
-          side="left"
-          trigger={null}
-          portalContainer={portalContainer.current}
-          onOpenChange={(open) => {
-            setLayoutState({
-              leftSidebarCollapsed: !open,
-              rightSidebarCollapsed: rightSidebarCollapsed,
-            });
-          }}
-        >
-          {leftPanel}
-        </Drawer>
-      )}
-      {rightPanel && (
-        <Drawer
-          id={RIGHT_SIDEBAR_ID}
-          modal={false}
-          ref={rightSidebarRef}
-          className="n-flex-1"
-          style={
-            useCompactInToolbar
-              ? undefined
-              : { left: 48, maxWidth: "calc(100% - 48px)" }
-          }
-          overlayStyle={useCompactInToolbar ? undefined : { left: 48 }}
-          open={!rightSidebarCollapsed}
-          positioning="absolute"
-          side="left"
-          trigger={null}
-          portalContainer={portalContainer.current}
-          onOpenChange={(open) => {
-            setLayoutState({
-              leftSidebarCollapsed: leftSidebarCollapsed,
-              rightSidebarCollapsed: !open,
-            });
-          }}
-        >
-          {rightPanel}
-        </Drawer>
-      )}
+        {/* Center content */}
+        <div className="n-flex-1 n-flex n-relative n-min-h-0">
+          {centerPanel}
+        </div>
+      </div>
     </div>
   );
 });

package/src/components/workspace/HorizontalTabBar.tsx

@@ -0,0 +1,43 @@
+import { memoGeneric } from "@noya-app/react-utils";
+import React from "react";
+import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
+import { SegmentedControl } from "../SegmentedControl";
+
+type HorizontalTabBarProps<TabValue extends string> = {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  onChange: (value: TabValue) => void;
+};
+
+export const HorizontalTabBar = memoGeneric(function HorizontalTabBar<
+  TabValue extends string,
+>({ items, activeValue, onChange }: HorizontalTabBarProps<TabValue>) {
+  const selectableItems = items.filter(isSelectableMenuItem);
+
+  // Don't render if there's nothing to switch between
+  if (selectableItems.length <= 1) {
+    return null;
+  }
+
+  return (
+    <div className="n-flex n-flex-col n-bg-sidebar-background n-flex-none">
+      <div className="n-flex n-flex-row n-px-3 n-py-3">
+        <SegmentedControl
+          enableCompactMode
+          className="n-flex-1"
+          value={activeValue}
+          onValueChange={onChange}
+          variant="default"
+          items={selectableItems.map((item) => ({
+            value: item.value,
+            title: item.title,
+            icon: item.icon,
+            tooltip: item.tooltip,
+            disabled: item.disabled,
+          }))}
+        />
+      </div>
+      {/* <Divider /> */}
+    </div>
+  );
+});

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -9,15 +9,14 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from "../resizablePanels";
-import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
 } from "./constants";
+import { HorizontalTabBar } from "./HorizontalTabBar";
 import { LayoutProps } from "./types";
-import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   LeftTab extends string,
@@ -37,17 +36,21 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  compactDrawerMenu,
+  onLeftSidebarStateChange,
+  onRightSidebarStateChange,
+  shouldAutoSave = true,
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const autoSaveId = useMemo(() => {
+    if (!shouldAutoSave) return undefined;
     return autoSavePrefix
-      ? `${autoSavePrefix}--v3--${EDITOR_PANEL_GROUP_ID}`
+      ? `${autoSavePrefix}--v5--${EDITOR_PANEL_GROUP_ID}`
       : Math.random().toString(36).substring(2, 15);
-  }, [autoSavePrefix]);
+  }, [autoSavePrefix, shouldAutoSave]);
 
-  // Track collapsed state based on layout changes
+  // Track collapsed state for rendering purposes (PanelGroup owns the source of truth)
   const [leftSidebarCollapsed, setLeftSidebarCollapsed] = useState(
     leftSidebarOptions.defaultCollapsed ?? false
   );
@@ -55,20 +58,72 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     rightSidebarOptions.defaultCollapsed ?? false
   );
 
+  // Track previous sidebar state to avoid redundant callbacks
+  const prevLeftSidebarState = useRef<{ width: number; collapsed: boolean } | null>(null);
+  const prevRightSidebarState = useRef<{ width: number; collapsed: boolean } | null>(null);
+
   const handleLayoutChange = useCallback(
     (sizes: number[]) => {
       // Update collapsed state based on sizes
       const leftIndex = leftPanel ? 0 : -1;
       const rightIndex = rightPanel ? (leftPanel ? 2 : 1) : -1;
 
+      // Get container width for pixel calculation using ref
+      const containerWidth = containerRef.current?.clientWidth ?? 0;
+
+      // Detect if sizes are in pixels or percentages by checking if they sum to ~100 or ~containerWidth
+      const sizesSum = sizes.reduce((a, b) => a + b, 0);
+
+      // Skip if sizesSum is too small compared to containerWidth - this indicates incomplete data
+      // during initial render (react-resizable-panels may report partial sizes)
+      if (containerWidth > 0 && sizesSum < containerWidth * 0.5 && sizesSum > 100) {
+        return;
+      }
+
+      const isPixels = containerWidth > 0 && Math.abs(sizesSum - containerWidth) < Math.abs(sizesSum - 100);
+
       if (leftIndex >= 0) {
-        setLeftSidebarCollapsed(sizes[leftIndex] === 0);
+        const collapsed = sizes[leftIndex] === 0;
+        setLeftSidebarCollapsed(collapsed);
+
+        // Calculate width in pixels - handle both percentage (0-100) and pixel formats
+        const widthPixels = isPixels
+          ? Math.round(sizes[leftIndex])
+          : containerWidth > 0
+            ? Math.round((sizes[leftIndex] / 100) * containerWidth)
+            : 0;
+
+        // Only call callback if state actually changed
+        if (
+          prevLeftSidebarState.current?.width !== widthPixels ||
+          prevLeftSidebarState.current?.collapsed !== collapsed
+        ) {
+          prevLeftSidebarState.current = { width: widthPixels, collapsed };
+          onLeftSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
       if (rightIndex >= 0) {
-        setRightSidebarCollapsed(sizes[rightIndex] === 0);
+        const collapsed = sizes[rightIndex] === 0;
+        setRightSidebarCollapsed(collapsed);
+
+        // Calculate width in pixels - handle both percentage (0-100) and pixel formats
+        const widthPixels = isPixels
+          ? Math.round(sizes[rightIndex])
+          : containerWidth > 0
+            ? Math.round((sizes[rightIndex] / 100) * containerWidth)
+            : 0;
+
+        // Only call callback if state actually changed
+        if (
+          prevRightSidebarState.current?.width !== widthPixels ||
+          prevRightSidebarState.current?.collapsed !== collapsed
+        ) {
+          prevRightSidebarState.current = { width: widthPixels, collapsed };
+          onRightSidebarStateChange?.({ width: widthPixels, collapsed });
+        }
       }
     },
-    [leftPanel, rightPanel]
+    [leftPanel, rightPanel, onLeftSidebarStateChange, onRightSidebarStateChange]
   );
 
   const handleLeftTabChange = useCallback(
@@ -107,39 +162,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     [onChangeRightTab, rightSidebarRef, rightTabValue]
   );
 
-  const showLeftTabs =
-    !!leftSidebarOptions.showTabs &&
-    !!leftTabItems &&
-    // When compact drawer UI is enabled, only show the rail when the
-    // sidebar is collapsed (for large screens/panel layout).
-    (!compactDrawerMenu || leftSidebarCollapsed);
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems;
 
   return (
-    <PanelGroup
-      ref={panelGroupRef}
-      id={EDITOR_PANEL_GROUP_ID}
-      className="n-flex-1"
-      direction="horizontal"
-      autoSaveId={autoSaveId}
-      onLayout={handleLayoutChange}
-    >
+    <div ref={containerRef} className="n-flex n-flex-1">
+      <PanelGroup
+        ref={panelGroupRef}
+        id={EDITOR_PANEL_GROUP_ID}
+        className="n-flex-1"
+        direction="horizontal"
+        autoSaveId={autoSaveId}
+        onLayout={handleLayoutChange}
+      >
       {leftPanel && (
         <>
-          {showLeftTabs && (
-            <VerticalTabMenu
-              tooltipSide="right"
-              items={leftTabItems}
-              activeValue={leftTabValue}
-              isSidebarCollapsed={leftSidebarCollapsed}
-              onChange={handleLeftTabChange}
-            />
-          )}
-          {showLeftTabs && !leftSidebarCollapsed && (
-            <DividerVertical className="n-h-full" />
-          )}
           <Panel
             id={LEFT_SIDEBAR_ID}
-            className="n-relative"
+            className="n-relative n-workspace-sidebar"
             order={1}
             ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
             defaultSize={leftSidebarOptions.initialSize}
@@ -153,9 +192,23 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             collapsible
             defaultCollapsed={leftSidebarOptions.defaultCollapsed}
           >
-            {leftSidebarCollapsed ? null : leftPanel}
+            {leftSidebarCollapsed ? null : (
+              <div className="n-flex n-flex-col n-h-full">
+                {showLeftTabs && (
+                  <HorizontalTabBar
+                    items={leftTabItems}
+                    activeValue={leftTabValue}
+                    onChange={handleLeftTabChange}
+                  />
+                )}
+                <div className="n-flex-1 n-relative n-min-h-0">{leftPanel}</div>
+              </div>
+            )}
           </Panel>
-          <PanelResizeHandle index={0} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle
+            index={0}
+            className={`n-cursor-col-resize n-w-px n-h-full ${leftSidebarCollapsed ? "" : "n-bg-divider"}`}
+          />
         </>
       )}
       <Panel
@@ -167,10 +220,13 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle index={1} className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
+          <PanelResizeHandle
+            index={1}
+            className={`n-cursor-col-resize n-w-px n-h-full ${rightSidebarCollapsed ? "" : "n-bg-divider"}`}
+          />
           <Panel
             id={RIGHT_SIDEBAR_ID}
-            className="n-relative"
+            className="n-relative n-workspace-sidebar"
             order={3}
             ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
             minSize={rightSidebarOptions.minSize}
@@ -184,22 +240,24 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             collapsible
             defaultCollapsed={rightSidebarOptions.defaultCollapsed}
           >
-            {rightSidebarCollapsed ? null : rightPanel}
+            {rightSidebarCollapsed ? null : (
+              <div className="n-flex n-flex-col n-h-full">
+                {rightSidebarOptions.showTabs && rightTabItems && (
+                  <HorizontalTabBar
+                    items={rightTabItems}
+                    activeValue={rightTabValue}
+                    onChange={handleRightTabChange}
+                  />
+                )}
+                <div className="n-flex-1 n-relative n-min-h-0">
+                  {rightPanel}
+                </div>
+              </div>
+            )}
           </Panel>
-          {rightSidebarOptions.showTabs &&
-            rightTabItems &&
-            !rightSidebarCollapsed && <DividerVertical className="n-h-full" />}
-          {rightSidebarOptions.showTabs && rightTabItems && (
-            <VerticalTabMenu
-              tooltipSide="left"
-              items={rightTabItems}
-              activeValue={rightTabValue}
-              isSidebarCollapsed={rightSidebarCollapsed}
-              onChange={handleRightTabChange}
-            />
-          )}
         </>
       )}
-    </PanelGroup>
+      </PanelGroup>
+    </div>
   );
 });