From a1ec4d94543c5f347d600bb5234cc47fc9f15b07 Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Tue, 18 Apr 2023 13:41:06 +1200
Subject: [PATCH 1/2] feat: add toggle sidebar-minimap functionality

---
 packages/trpc-panel/src/react-app/Root.tsx    |  2 +-
 .../src/react-app/components/Chevron.tsx      |  4 ++-
 .../src/react-app/components/SideNav.tsx      |  5 +--
 .../src/react-app/components/TopBar.tsx       | 32 ++++++++++++++++---
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/trpc-panel/src/react-app/Root.tsx b/packages/trpc-panel/src/react-app/Root.tsx
index 1c58eff..a2823f2 100644
--- a/packages/trpc-panel/src/react-app/Root.tsx
+++ b/packages/trpc-panel/src/react-app/Root.tsx
@@ -84,7 +84,7 @@ function AppInnards({ rootRouter }: { rootRouter: ParsedRouter }) {
 
   return (
     <div className="flex flex-col flex-1 relative">
-      <TopBar />
+      <TopBar open={sidebarOpen} setOpen={setSidebarOpen} />
       <div className="flex flex-row flex-1 bg-mainBackground">
         <SideNav
           rootRouter={rootRouter}
diff --git a/packages/trpc-panel/src/react-app/components/Chevron.tsx b/packages/trpc-panel/src/react-app/components/Chevron.tsx
index f3cc88b..35ff852 100644
--- a/packages/trpc-panel/src/react-app/components/Chevron.tsx
+++ b/packages/trpc-panel/src/react-app/components/Chevron.tsx
@@ -6,7 +6,7 @@ export function Chevron({
   direction,
 }: {
   className?: string;
-  direction: "up" | "down" | "right";
+  direction: "up" | "down" | "right" | "left";
 }) {
   return (
     <ChevronIcon
@@ -21,6 +21,8 @@ export function Chevron({
               return "-rotate-90";
             case "right":
               return "rotate-180";
+            case "left":
+              return "";
           }
         })()}`
       }
diff --git a/packages/trpc-panel/src/react-app/components/SideNav.tsx b/packages/trpc-panel/src/react-app/components/SideNav.tsx
index f7b281c..de847be 100644
--- a/packages/trpc-panel/src/react-app/components/SideNav.tsx
+++ b/packages/trpc-panel/src/react-app/components/SideNav.tsx
@@ -7,20 +7,21 @@ import { colorSchemeForNode } from "@src/react-app/components/style-utils";
 import { ItemTypeIcon } from "@src/react-app/components/ItemTypeIcon";
 export function SideNav({
   rootRouter,
+  open,
 }: // setOpen,
 {
   open: boolean;
   rootRouter: ParsedRouter;
   setOpen: (value: boolean) => void;
 }) {
-  return (
+  return open ? (
     <div
       style={{ maxHeight: "calc(100vh - 4rem)" }}
       className="min-w-[16rem] overflow-scroll shadow-sm flex-col flex items-start p-2 pr-4 space-y-2 bg-actuallyWhite border-r-2 border-r-panelBorder"
     >
       <SideNavItem node={rootRouter} path={[]} />
     </div>
-  );
+  ) : null;
 }
 
 function SideNavItem({
diff --git a/packages/trpc-panel/src/react-app/components/TopBar.tsx b/packages/trpc-panel/src/react-app/components/TopBar.tsx
index 1008359..97341e8 100644
--- a/packages/trpc-panel/src/react-app/components/TopBar.tsx
+++ b/packages/trpc-panel/src/react-app/components/TopBar.tsx
@@ -3,17 +3,39 @@ import { useHeadersContext } from "@src/react-app/components/contexts/HeadersCon
 import MailLockIcon from "@mui/icons-material/MailLockOutlined";
 import { LogoSvg } from "@src/react-app/components/LogoSvg";
 import { useIsMac } from "@src/react-app/components/hooks/useIsMac";
+import { Chevron } from "@src/react-app/components/Chevron";
 import Search from "@mui/icons-material/Search";
 import { useSearch } from "@src/react-app/components/contexts/SearchStore";
 
-export function TopBar() {
+export function TopBar({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
   const { setHeadersPopupShown } = useHeadersContext();
   return (
     <div className="w-full px-4 pr-8 flex flex-row justify-between items-center position-fixed left-0 h-16 right-0 top-0 bg-gray-50 drop-shadow-sm bg-actuallyWhite border-b border-b-panelBorder">
-      <span className="flex flex-row items-center text-lg font-bold font-mono">
-        <LogoSvg className="rounded-lg w-10 h-10 mr-2" />
-        tRPC.panel()
-      </span>
+      <div className="flex flex-row items-center gap-4">
+        <button
+          type="button"
+          role="button"
+          onClick={() => setOpen((prev) => !prev)}
+          aria-label="Toggle sidebar"
+          aria-pressed={open}
+        >
+          {open ? (
+            <Chevron className="w-4 h-4" direction="left" />
+          ) : (
+            <Chevron className="w-4 h-4" direction="right" />
+          )}
+        </button>
+        <span className="flex flex-row items-center text-lg font-bold font-mono">
+          <LogoSvg className="rounded-lg w-10 h-10 mr-2" />
+          tRPC.panel()
+        </span>
+      </div>
       <RouterSearchTooltip />
       <button
         onClick={() => setHeadersPopupShown(true)}

From ffef2dfe4beb27b316280c64c774409b40187abe Mon Sep 17 00:00:00 2001
From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Tue, 18 Apr 2023 17:47:24 +1200
Subject: [PATCH 2/2] feat: add persistence with local-storage for sidebar open
 state

---
 packages/trpc-panel/src/react-app/Root.tsx    |  6 +-
 .../components/hooks/useLocalStorage.tsx      | 88 +++++++++++++++++++
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/trpc-panel/src/react-app/components/hooks/useLocalStorage.tsx

diff --git a/packages/trpc-panel/src/react-app/Root.tsx b/packages/trpc-panel/src/react-app/Root.tsx
index a2823f2..946e8fe 100644
--- a/packages/trpc-panel/src/react-app/Root.tsx
+++ b/packages/trpc-panel/src/react-app/Root.tsx
@@ -8,6 +8,7 @@ import {
   HeadersContextProvider,
   useHeaders,
 } from "@src/react-app/components/contexts/HeadersContext";
+import { useLocalStorage } from "@src/react-app/components/hooks/useLocalStorage";
 import { HeadersPopup } from "@src/react-app/components/HeadersPopup";
 import { Toaster } from "react-hot-toast";
 import { SiteNavigationContextProvider } from "@src/react-app/components/contexts/SiteNavigationContext";
@@ -80,7 +81,10 @@ function ClientProviders({
 }
 
 function AppInnards({ rootRouter }: { rootRouter: ParsedRouter }) {
-  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useLocalStorage(
+    "trpc-panel.show-minimap",
+    true
+  );
 
   return (
     <div className="flex flex-col flex-1 relative">
diff --git a/packages/trpc-panel/src/react-app/components/hooks/useLocalStorage.tsx b/packages/trpc-panel/src/react-app/components/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..d84b4c9
--- /dev/null
+++ b/packages/trpc-panel/src/react-app/components/hooks/useLocalStorage.tsx
@@ -0,0 +1,88 @@
+// a stripped down version of https://usehooks-ts.com/react-hook/use-local-storage
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from "react";
+
+type SetValue<T> = Dispatch<SetStateAction<T>>;
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T
+): [T, SetValue<T>] {
+  // Get from local storage then
+  // parse stored json or return initialValue
+  const readValue = useCallback((): T => {
+    // Prevent build error "window is undefined" but keeps working
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (parseJSON(item) as T) : initialValue;
+    } catch (error) {
+      console.warn(
+        `tRPC-Panel.useLocalStorage: Error reading localStorage key “${key}”:`,
+        error
+      );
+      return initialValue;
+    }
+  }, [initialValue, key]);
+
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(readValue);
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue: SetValue<T> = useCallback(
+    (value) => {
+      // Prevent build error "window is undefined" but keeps working
+      if (typeof window === "undefined") {
+        console.warn(
+          `tRPC-Panel.useLocalStorage: Tried setting localStorage key “${key}” even though environment is not a client`
+        );
+      }
+
+      try {
+        // Allow value to be a function so we have the same API as useState
+        const newValue = value instanceof Function ? value(storedValue) : value;
+
+        // Save to local storage
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+
+        // Save state
+        setStoredValue(newValue);
+      } catch (error) {
+        console.warn(
+          `tRPC-Panel.useLocalStorage: Error setting localStorage key “${key}”:`,
+          error
+        );
+      }
+    },
+    [storedValue]
+  );
+
+  useEffect(() => {
+    setStoredValue(readValue());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [storedValue, setValue];
+}
+
+// A wrapper for "JSON.parse()"" to support "undefined" value
+function parseJSON<T>(value: string | null): T | undefined {
+  try {
+    return value === "undefined" ? undefined : JSON.parse(value ?? "");
+  } catch {
+    console.log("tRPC-Panel.useLocalStorage.parseJSON: parsing error on", {
+      value,
+    });
+    return undefined;
+  }
+}