[console] - consolidated Mosaic component

synnaxlabs · Sep 26, 2024 · 41bed72 · 41bed72
1 parent cb53272
commit 41bed72
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 26 deletions.
diff --git a/console/src/layouts/Mosaic.tsx b/console/src/layouts/Mosaic.tsx
@@ -17,7 +17,7 @@ import {
   Button,
   componentRenderProp,
   Eraser,
-  Menu,
+  Menu as PMenu,
   Modal,
   Mosaic as Core,
   Nav,
@@ -34,6 +34,7 @@ import { memo, type ReactElement, useCallback, useLayoutEffect } from "react";
 import { useDispatch, useStore } from "react-redux";
 
 import { Controls } from "@/components";
+import { Menu } from "@/components/menu";
 import { NAV_DRAWERS, NavDrawer, NavMenu } from "@/components/nav/Nav";
 import { Confirm } from "@/confirm";
 import { Layout } from "@/layout";
@@ -70,17 +71,22 @@ const FILE_HANDLERS = [Schematic.fileHandler, LinePlot.fileHandler];
 
 export const ContextMenu = ({
   keys,
-}: Menu.ContextMenuMenuProps): ReactElement | null => {
-  if (keys.length === 0) return null;
+}: PMenu.ContextMenuMenuProps): ReactElement | null => {
+  if (keys.length === 0)
+    return (
+      <PMenu.Menu level="small" iconSpacing="small">
+        <Menu.HardReloadItem />
+      </PMenu.Menu>
+    );
   const layoutKey = keys[0];
   const layout = Layout.useSelect(layoutKey);
   if (layout == null) return null;
   const C = Layout.useContextMenuRenderer(layout?.type);
   if (C == null) {
     return (
-      <Menu.Menu level="small" iconSpacing="small">
+      <PMenu.Menu level="small" iconSpacing="small">
         <Layout.MenuItems layoutKey={layoutKey} />
-      </Menu.Menu>
+      </PMenu.Menu>
     );
   }
   const res = <C layoutKey={layoutKey} />;

diff --git a/pluto/src/mosaic/Mosaic.tsx b/pluto/src/mosaic/Mosaic.tsx
@@ -43,12 +43,6 @@ export interface MosaicProps
   activeTab?: string;
 }
 
-export const Mosaic = memo((props: MosaicProps): ReactElement => {
-  return <MosaicInternal {...props} />;
-});
-
-interface MosaicInternalProps extends MosaicProps {}
-
 /***
  * Mosaic renders a tree of tab panes, with the ability to drag and drop tabs to
  * different locations in the tree as well as resize the panes (think of your typical
@@ -64,7 +58,7 @@ interface MosaicInternalProps extends MosaicProps {}
  * @param props.onResize - The callback executed when a pane is resized. This prop is
  *  provided by the Mosaic.use hook.
  */
-const MosaicInternal = memo((props: MosaicInternalProps): ReactElement | null => {
+export const Mosaic = memo((props: MosaicProps): ReactElement | null => {
   const { onResize, ...tabsProps } = props;
   const {
     root: { tabs, direction, first, last, key, size },
@@ -95,18 +89,8 @@ const MosaicInternal = memo((props: MosaicInternalProps): ReactElement | null =>
         className={CSS.BE("mosaic", "resize")}
         {...resizeProps}
       >
-        <MosaicInternal
-          key={first.key}
-          {...childProps}
-          root={first}
-          onResize={onResize}
-        />
-        <MosaicInternal
-          key={last.key}
-          {...childProps}
-          root={last}
-          onResize={onResize}
-        />
+        <Mosaic key={first.key} {...childProps} root={first} onResize={onResize} />
+        <Mosaic key={last.key} {...childProps} root={last} onResize={onResize} />
       </Resize.Multiple>
     );
   else {
@@ -117,9 +101,8 @@ const MosaicInternal = memo((props: MosaicInternalProps): ReactElement | null =>
   return key === 1 ? <Haul.Provider>{content}</Haul.Provider> : content;
 });
 Mosaic.displayName = "Mosaic";
-MosaicInternal.displayName = "Mosaic";
 
-interface TabLeafProps extends Omit<MosaicInternalProps, "onResize"> {}
+interface TabLeafProps extends Omit<MosaicProps, "onResize"> {}
 
 /**
  * This type should be used when the user wants to drop a tab in the mosaic.