@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -1,12 +1,13 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
-import React, { useLayoutEffect, useRef, useState } from "react";
-import {
-  EDITOR_PANEL_GROUP_ID,
-  LEFT_SIDEBAR_ID,
-  RIGHT_SIDEBAR_ID,
-} from "../../hooks/usePreservePanelSize";
+import React, { useMemo, useRef, useState } from "react";
+import { DividerVertical } from "../Divider";
 import { Drawer } from "../Drawer";
-import { LayoutProps } from "./types";
+import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
+import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
+import { LayoutProps, PanelLayoutState } from "./types";
+import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -17,66 +18,146 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightPanel,
   rightSidebarRef,
   centerPanel,
-  internalLayoutState,
-  handleChangeLayoutState,
+  leftTabItems,
+  leftTabValue,
+  rightTabItems,
+  rightTabValue,
+  onChangeRightTab,
+  onChangeLeftTab,
 }: LayoutProps<LeftTab, RightTab>) {
   const portalContainer = useRef<HTMLDivElement>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useLayoutEffect(() => {
-    if (mounted) return;
 
-    setMounted(true);
-    handleChangeLayoutState({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] =
+    useState<PanelLayoutState>({
       leftSidebarCollapsed: true,
       rightSidebarCollapsed: true,
     });
-  }, [handleChangeLayoutState, mounted]);
 
-  const leftSidebarCollapsed =
-    internalLayoutState?.leftSidebarCollapsed ?? false;
-  const rightSidebarCollapsed =
-    internalLayoutState?.rightSidebarCollapsed ?? false;
+  const allTabItems = useMemo(
+    () =>
+      [
+        ...(leftPanel ? leftTabItems ?? [] : []),
+        ...(rightPanel ? rightTabItems ?? [] : []),
+      ] as MenuItem<LeftTab | RightTab>[],
+    [leftTabItems, rightTabItems, leftPanel, rightPanel]
+  );
+
+  const hasTabs = allTabItems.length > 0;
+
+  const leftSelectableTabItems = useMemo(
+    () => (leftTabItems ?? []).filter(isSelectableMenuItem),
+    [leftTabItems]
+  );
+
+  const rightSelectableTabItems = useMemo(
+    () => (rightTabItems ?? []).filter(isSelectableMenuItem),
+    [rightTabItems]
+  );
+
+  const { activeValue, isSidebarCollapsed } =
+    leftSelectableTabItems.length > 0 && !leftSidebarCollapsed
+      ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed }
+      : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed
+        ? {
+            activeValue: rightTabValue,
+            isSidebarCollapsed: rightSidebarCollapsed,
+          }
+        : { activeValue: undefined, isSidebarCollapsed: true };
 
   return (
     <div
       ref={portalContainer}
       id={EDITOR_PANEL_GROUP_ID}
-      className="flex flex-1 relative focus:outline-none"
+      className="n-flex n-flex-1 n-relative focus:n-outline-none"
     >
+      {hasTabs && (
+        <VerticalTabMenu
+          tooltipSide="right"
+          items={allTabItems}
+          activeValue={activeValue}
+          isSidebarCollapsed={isSidebarCollapsed}
+          onChange={(value) => {
+            if (leftSelectableTabItems.some((item) => item.value === value)) {
+              if (value === leftTabValue) {
+                if (leftSidebarRef.current?.isExpanded()) {
+                  leftSidebarRef.current?.collapse();
+                } else {
+                  leftSidebarRef.current?.expand();
+                }
+              } else {
+                if (!leftSidebarRef.current?.isExpanded()) {
+                  leftSidebarRef.current?.expand();
+                }
+
+                onChangeLeftTab?.(value as LeftTab);
+              }
+            } else if (
+              rightSelectableTabItems.some((item) => item.value === value)
+            ) {
+              if (value === rightTabValue) {
+                if (rightSidebarRef.current?.isExpanded()) {
+                  rightSidebarRef.current?.collapse();
+                } else {
+                  rightSidebarRef.current?.expand();
+                }
+              } else {
+                if (!rightSidebarRef.current?.isExpanded()) {
+                  rightSidebarRef.current?.expand();
+                }
+
+                onChangeRightTab?.(value as RightTab);
+              }
+            }
+          }}
+        />
+      )}
+      {hasTabs && <DividerVertical className="n-h-full" />}
+      <div className="n-flex-1 n-flex n-relative">{centerPanel}</div>
       {leftPanel && (
         <Drawer
-          id={LEFT_SIDEBAR_ID}
           ref={leftSidebarRef}
-          className="flex-1"
+          className="n-flex-1"
+          style={{
+            left: 48,
+            maxWidth: "calc(100% - 48px)",
+          }}
+          overlayStyle={{
+            left: 48,
+          }}
           open={!leftSidebarCollapsed}
           positioning="absolute"
           side="left"
           trigger={null}
           portalContainer={portalContainer.current}
           onOpenChange={(open) => {
-            handleChangeLayoutState({
-              rightSidebarCollapsed: rightSidebarCollapsed,
+            setLayoutState({
               leftSidebarCollapsed: !open,
+              rightSidebarCollapsed: rightSidebarCollapsed,
             });
           }}
         >
           {leftPanel}
         </Drawer>
       )}
-      {centerPanel}
       {rightPanel && (
         <Drawer
           id={RIGHT_SIDEBAR_ID}
           ref={rightSidebarRef}
-          className="flex-1"
+          className="n-flex-1"
+          style={{
+            left: 48,
+            maxWidth: "calc(100% - 48px)",
+          }}
+          overlayStyle={{
+            left: 48,
+          }}
           open={!rightSidebarCollapsed}
           positioning="absolute"
-          side="right"
+          side="left"
           trigger={null}
           portalContainer={portalContainer.current}
           onOpenChange={(open) => {
-            handleChangeLayoutState({
+            setLayoutState({
               leftSidebarCollapsed: leftSidebarCollapsed,
               rightSidebarCollapsed: !open,
             });

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -1,5 +1,11 @@
-import { memoGeneric } from "@noya-app/react-utils";
-import React, { ComponentProps, useRef } from "react";
+"use client";
+
+import {
+  clientStorage,
+  memoGeneric,
+  usePersistentStateObject,
+} from "@noya-app/react-utils";
+import React, { useCallback, useMemo, useRef } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -7,19 +13,25 @@ import {
   PanelGroup,
   PanelResizeHandle,
 } from "react-resizable-panels";
+import { DividerVertical } from "../Divider";
 import {
   CONTENT_AREA_ID,
   EDITOR_PANEL_GROUP_ID,
   LEFT_SIDEBAR_ID,
   RIGHT_SIDEBAR_ID,
-  usePreservePanelSize,
-} from "../../hooks/usePreservePanelSize";
-import { cssVarNames } from "../../theme";
-import { DividerVertical } from "../Divider";
-import { MenuItem } from "../internal/Menu";
-import { ToolbarMenu } from "../Toolbar";
-import { Tooltip } from "../Tooltip";
-import { LayoutProps } from "./types";
+} from "./constants";
+import {
+  getInitialLayout,
+  getLayoutCollapsedState,
+  getLayoutIds,
+  getPropertyKey,
+  getStorageKey,
+  panelStorage,
+  setInitialLayout,
+  toPixelSize,
+} from "./panelStorage";
+import { LayoutProps, WorkspaceLayoutState } from "./types";
+import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   LeftTab extends string,
@@ -32,7 +44,6 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightSidebarOptions,
   centerPanelPercentage,
   autoSavePrefix,
-  internalLayoutState,
   leftSidebarRef,
   rightSidebarRef,
   leftTabItems,
@@ -41,56 +52,140 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
   rightTabValue,
   onChangeLeftTab,
   onChangeRightTab,
-  handleChangeLayoutState,
 }: LayoutProps<LeftTab, RightTab>) {
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
-  usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
+  const hasLeftPanel = !!leftPanel;
+  const hasRightPanel = !!rightPanel;
+  const hasCenterPanel = !!centerPanel;
+
+  const autoSaveId = useMemo(() => {
+    return autoSavePrefix
+      ? `${autoSavePrefix}--v2--${EDITOR_PANEL_GROUP_ID}`
+      : Math.random().toString(36).substring(2, 15);
+  }, [autoSavePrefix]);
+
+  const layoutIds = getLayoutIds({
+    hasLeftPanel,
+    hasRightPanel,
+    hasCenterPanel,
+  });
+  const storageKey = getStorageKey(autoSaveId);
+  const propertyKey = getPropertyKey(layoutIds);
+
+  setInitialLayout({
+    storageKey,
+    propertyKey,
+    calculateLayout: () => {
+      return getInitialLayout({
+        layoutIds,
+        leftSidebarOptions,
+        rightSidebarOptions,
+        centerPanelPercentage,
+        hasLeftPanel,
+        hasRightPanel,
+        hasCenterPanel,
+      });
+    },
+  });
+
+  const [data, setData] = usePersistentStateObject<
+    WorkspaceLayoutState,
+    string
+  >(clientStorage, storageKey, {});
+
+  const layoutGroup = data?.[propertyKey];
+
+  const { leftSidebarCollapsed, rightSidebarCollapsed } = useMemo(() => {
+    return getLayoutCollapsedState({
+      layoutGroup,
+      propertyKey,
+      layoutIds,
+      hasLeftPanel,
+      hasRightPanel,
+    });
+  }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
+
+  const handleLeftTabChange = useCallback(
+    (value: LeftTab) => {
+      if (value === leftTabValue) {
+        if (leftSidebarRef.current?.isExpanded()) {
+          leftSidebarRef.current?.collapse();
+        } else {
+          leftSidebarRef.current?.expand();
+        }
+      } else {
+        if (!leftSidebarRef.current?.isExpanded()) {
+          leftSidebarRef.current?.expand();
+        }
+        onChangeLeftTab?.(value);
+      }
+    },
+    [leftSidebarRef, leftTabValue, onChangeLeftTab]
+  );
+
+  const handleRightTabChange = useCallback(
+    (value: RightTab) => {
+      if (value === rightTabValue) {
+        if (rightSidebarRef.current?.isExpanded()) {
+          rightSidebarRef.current?.collapse();
+        } else {
+          rightSidebarRef.current?.expand();
+        }
+      } else {
+        if (!rightSidebarRef.current?.isExpanded()) {
+          rightSidebarRef.current?.expand();
+        }
+        onChangeRightTab?.(value);
+      }
+    },
+    [onChangeRightTab, rightSidebarRef, rightTabValue]
+  );
+
+  const handleLayoutChange = useCallback(
+    (layout: number[]) => {
+      setData((prev) => {
+        const newData = {
+          ...prev,
+          [propertyKey]: {
+            layout: layout.map((size) => toPixelSize(size)),
+            expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
+          },
+        };
+
+        return newData;
+      });
+    },
+    [setData, propertyKey]
+  );
 
   return (
     <PanelGroup
       ref={panelGroupRef}
       id={EDITOR_PANEL_GROUP_ID}
-      className="flex-1"
+      className="n-flex-1"
       direction="horizontal"
-      autoSaveId={
-        autoSavePrefix
-          ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}`
-          : undefined
-      }
+      storage={panelStorage}
+      autoSaveId={autoSaveId}
+      onLayout={handleLayoutChange}
     >
       {leftPanel && (
         <>
-          {leftTabItems && (
+          {leftSidebarOptions.showTabs && leftTabItems && (
             <VerticalTabMenu
               tooltipSide="right"
               items={leftTabItems}
               activeValue={leftTabValue}
-              isSidebarCollapsed={
-                internalLayoutState?.leftSidebarCollapsed ?? false
-              }
-              onChange={(value) => {
-                if (value === leftTabValue) {
-                  if (leftSidebarRef.current?.isExpanded()) {
-                    leftSidebarRef.current?.collapse();
-                  } else {
-                    leftSidebarRef.current?.expand();
-                  }
-                } else {
-                  if (!leftSidebarRef.current?.isExpanded()) {
-                    leftSidebarRef.current?.expand();
-                  }
-                  onChangeLeftTab?.(value);
-                }
-              }}
+              isSidebarCollapsed={leftSidebarCollapsed}
+              onChange={handleLeftTabChange}
             />
           )}
-          {leftTabItems && !internalLayoutState?.leftSidebarCollapsed && (
-            <DividerVertical className="h-full" />
-          )}
+          {leftSidebarOptions.showTabs &&
+            leftTabItems &&
+            !leftSidebarCollapsed && <DividerVertical className="n-h-full" />}
           <Panel
             id={LEFT_SIDEBAR_ID}
-            className="relative"
+            className="n-relative"
             order={1}
             ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
             defaultSize={leftSidebarOptions.initialSize}
@@ -103,9 +198,9 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             }
             collapsible
           >
-            {internalLayoutState?.leftSidebarCollapsed ? null : leftPanel}
+            {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
-          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
         </>
       )}
       <Panel
@@ -113,16 +208,16 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
         order={2}
         defaultSize={centerPanelPercentage}
         minSize={10}
-        className="flex relative"
+        className="n-flex n-relative"
       >
         {centerPanel}
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
           <Panel
             id={RIGHT_SIDEBAR_ID}
-            className="relative"
+            className="n-relative"
             order={3}
             ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
             minSize={rightSidebarOptions.minSize}
@@ -135,33 +230,18 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
             }
             collapsible
           >
-            {internalLayoutState?.rightSidebarCollapsed ? null : rightPanel}
+            {rightSidebarCollapsed ? null : rightPanel}
           </Panel>
-          {rightTabItems && !internalLayoutState?.rightSidebarCollapsed && (
-            <DividerVertical className="h-full" />
-          )}
-          {rightTabItems && (
+          {rightSidebarOptions.showTabs &&
+            rightTabItems &&
+            !rightSidebarCollapsed && <DividerVertical className="n-h-full" />}
+          {rightSidebarOptions.showTabs && rightTabItems && (
             <VerticalTabMenu
               tooltipSide="left"
               items={rightTabItems}
               activeValue={rightTabValue}
-              isSidebarCollapsed={
-                internalLayoutState?.rightSidebarCollapsed ?? false
-              }
-              onChange={(value) => {
-                if (value === rightTabValue) {
-                  if (rightSidebarRef.current?.isExpanded()) {
-                    rightSidebarRef.current?.collapse();
-                  } else {
-                    rightSidebarRef.current?.expand();
-                  }
-                } else {
-                  if (!rightSidebarRef.current?.isExpanded()) {
-                    rightSidebarRef.current?.expand();
-                  }
-                  onChangeRightTab?.(value);
-                }
-              }}
+              isSidebarCollapsed={rightSidebarCollapsed}
+              onChange={handleRightTabChange}
             />
           )}
         </>
@@ -169,34 +249,3 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     </PanelGroup>
   );
 });
-
-function VerticalTabMenu<TabValue extends string>({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide,
-}: {
-  items: MenuItem<TabValue>[];
-  activeValue: TabValue | undefined;
-  isSidebarCollapsed: boolean;
-  onChange: (value: TabValue) => void;
-  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-}) {
-  return (
-    <div
-      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
-      style={{
-        [cssVarNames.colors.inputBackground]: "transparent",
-        [cssVarNames.colors.buttonBackground]: "transparent",
-      }}
-    >
-      <ToolbarMenu
-        items={items}
-        activeValue={isSidebarCollapsed ? undefined : activeValue}
-        onSelectMenuItem={onChange}
-        tooltipSide={tooltipSide}
-      />
-    </div>
-  );
-}

package/src/components/workspace/VerticalTabMenu.tsx

@@ -0,0 +1,46 @@
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { ComponentProps, useMemo } from "react";
+import { cssVarNames } from "../../theme";
+import { MenuItem } from "../internal/Menu";
+import { ToolbarMenu } from "../Toolbar";
+import { Tooltip } from "../Tooltip";
+
+type VerticalTabMenuProps<TabValue extends string> = {
+  items: MenuItem<TabValue>[];
+  activeValue: TabValue | undefined;
+  isSidebarCollapsed: boolean;
+  onChange: (value: TabValue) => void;
+  tooltipSide?: ComponentProps<typeof Tooltip>["side"];
+};
+
+export const VerticalTabMenu = memoGeneric(function VerticalTabMenu<
+  TabValue extends string,
+>({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide,
+}: VerticalTabMenuProps<TabValue>) {
+  const style = useMemo(() => {
+    return {
+      [cssVarNames.colors.inputBackground]: "transparent",
+      [cssVarNames.colors.buttonBackground]: "transparent",
+    };
+  }, []);
+
+  return (
+    <div
+      className="n-w-[47px] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3"
+      style={style}
+    >
+      <ToolbarMenu
+        items={items}
+        activeValue={isSidebarCollapsed ? undefined : activeValue}
+        onSelectMenuItem={onChange}
+        tooltipSide={tooltipSide}
+        displayFilter="iconOnly"
+      />
+    </div>
+  );
+});