Made data sheet the dominant object on the page

.vscode/settings.json

@@ -5,5 +5,33 @@
   },
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.js"
+  "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/__pycache__": true,
+    "[!s]*/**": true,
+    "s[!r]*/**": true,
+    "sr[!c]*/**": true,
+    "src/[!p]*/**": true,
+    "src/p[!a]*/**": true,
+    "src/pa[!g]*/**": true,
+    "src/pag[!e]*/**": true,
+    "src/page[!s]*/**": true,
+    "src/pages/[!m]*/**": true,
+    "src/pages/m[!a]*/**": true,
+    "src/pages/ma[!p]*/**": true,
+    "src/pages/map[!s]*/**": true,
+    "src/pages/maps/[!@]*/**": true,
+    "src/pages/maps/@[!i]*/**": true,
+    "src/pages/maps/@i[!d]*/**": true,
+    "src/pages/maps/@id/[!e]*/**": true,
+    "src/pages/maps/@id/e[!d]*/**": true,
+    "src/pages/maps/@id/ed[!i]*/**": true,
+    "src/pages/maps/@id/edi[!t]*/**": true
+  }
 }

src/components/map-navbar/index.ts

@@ -20,7 +20,16 @@ export function ParentRouteButton({
   return h(LinkButton, { to: "..", icon, minimal: true, ...rest });
 }
 
-export function MapNavbar({ title, isOpen, setOpen, parentRoute }) {
+export function MapNavbar({
+  title,
+  isOpen,
+  setOpen,
+  parentRoute,
+  minimal = false,
+}) {
+  if (minimal) {
+    return MapMinimalNavbar({ isOpen, setOpen });
+  }
   const { isLoading } = useMapStatus();
   return h(FloatingNavbar, { className: "searchbar map-navbar" }, [
     h([h(ParentRouteButton, { parentRoute }), h("h2.map-title", title)]),
@@ -32,3 +41,17 @@ export function MapNavbar({ title, isOpen, setOpen, parentRoute }) {
     }),
   ]);
 }
+
+function MapMinimalNavbar({ isOpen, setOpen }) {
+  const { isLoading } = useMapStatus();
+  return h("div.map-minimal-navbar map-navbar", [
+    h(FloatingNavbar, { className: "searchbar" }, [
+      h(MapLoadingButton, {
+        active: isOpen,
+        onClick: () => setOpen(!isOpen),
+        isLoading,
+      }),
+    ]),
+    h("div.spacer"),
+  ]);
+}

src/components/map-navbar/main.module.sass

@@ -12,3 +12,11 @@
       .map-title
         // Allow the title to wrap on hover
         overflow-x: visible
+
+.map-minimal-navbar
+  display: flex
+  flex-direction: row
+  &>.spacer
+    flex-grow: 1
+  .map-navbar
+    min-width: 0

src/pages/maps/@id/edit/components/index.ts

@@ -0,0 +1 @@
+export * from "./panels";

src/pages/maps/@id/edit/components/main.module.sass

@@ -0,0 +1,22 @@
+.width-adjustable-panel
+  transition: max-width 0.1s ease-in-out
+  height: 100%
+  display: flex
+  flex-direction: row
+  position: relative
+
+.width-adjustable-panel-content
+  overflow: scroll
+  height: 100%
+  flex-grow: 1
+  padding: 1em
+
+.width-adjuster
+  cursor: col-resize
+  width: 6px
+  height: 100%
+  // Not sure why this defaults to shrinking
+  flex-shrink: 0
+  background-color: #efefef
+  &:hover
+    background-color: #ddd

src/pages/maps/@id/edit/components/panels.ts

@@ -0,0 +1,80 @@
+import { ReactNode, useEffect } from "react";
+import { useRef } from "react";
+import { useStoredState } from "@macrostrat/ui-components";
+import hyper from "@macrostrat/hyper";
+import styles from "./main.module.sass";
+import { on } from "events";
+export const h = hyper.styled(styles);
+
+export enum AdjustSide {
+  LEFT = "left",
+  RIGHT = "right",
+}
+
+export function WidthAdjustablePanel({
+  children,
+  adjustSide = AdjustSide.RIGHT,
+  expand,
+  className,
+  storageID = null,
+}: {
+  children: ReactNode;
+  adjustSide?: AdjustSide;
+  expand?: boolean;
+  className?: string;
+  storageID?: string;
+}) {
+  const [maxWidth, setMaxWidth] = useStoredState(
+    storageID,
+    0,
+    (v) => typeof v === "number"
+  );
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    setMaxWidth(window.innerWidth / 2);
+  }, []);
+
+  if (expand) {
+    return h("div.width-adjustable-panel", { className }, [
+      h("div.width-adjustable-panel-content", {}, children),
+    ]);
+  }
+  return h(
+    "div.width-adjustable-panel",
+    { style: { maxWidth: maxWidth + "px" }, className },
+    [
+      h.if(adjustSide == AdjustSide.LEFT)(WidthAdjuster, {
+        onAdjust: (dx) => {
+          const newMaxWidth = maxWidth - dx;
+          setMaxWidth(newMaxWidth);
+        },
+      }),
+      h("div.width-adjustable-panel-content", {}, children),
+      h.if(adjustSide == AdjustSide.RIGHT)(WidthAdjuster, {
+        onAdjust: (dx) => {
+          const newMaxWidth = maxWidth + dx;
+          setMaxWidth(newMaxWidth);
+        },
+      }),
+    ]
+  );
+}
+
+function WidthAdjuster({ onAdjust }: { onAdjust: (dx: number) => void }) {
+  const startPosition = useRef(0);
+  return h(
+    "div.width-adjuster",
+    {
+      onDragStart: (e) => {
+        startPosition.current = e.clientX;
+      },
+      onDragEnd: (e) => {
+        const dx = e.clientX - startPosition.current;
+        onAdjust(dx);
+      },
+      draggable: true,
+    },
+    []
+  );
+}

src/pages/maps/@id/edit/edit-menu.module.sass → src/pages/maps/@id/edit/edit-page.module.sass

@@ -1,3 +1,24 @@
+.edit-page
+  display: flex
+  flex-direction: row
+  height: 100vh
+  width: 100vw
+  overflow: hidden
+
+.edit-page-header
+  display: flex
+  flex-direction: row
+
+.spacer
+  flex-grow: 1
+
+.map-panel-container, .edit-page-content
+  flex: 1
+  min-width: 0
+
+.edit-menu
+  flex-grow: 1
+
 div.interface
   height: 100%
   background-color: #efefef
@@ -17,28 +38,8 @@ button.icon-button
   .icon-label
     padding-bottom: 10px
 
-.width-adjustable-panel
-  transition: max-width 0.1s ease-in-out
-  height: 100%
-  display: flex
-  flex-direction: row
-  position: relative
 
-.width-adjustable-panel-content
-  overflow: scroll
-  height: 100%
-  flex-grow: 1
-  padding: 1em
 
 div.edit-table-wrapper
   overflow: scroll
   width: 100%
-
-div.width-adjuster
-  cursor: col-resize
-  width: 6px
-  height: 100%
-  // Not sure why this defaults to shrinking
-  flex-shrink: 0
-  &:hover
-    background-color: #efefef