Make the sidebar resizeable

Using [react-resizable-panels.vercel.app](https://react-resizable-panels.vercel.app/), we can have a resizable sidebar. This is helpful because sites have varying URL lengths. If they're long, you can temporarily make the sidebar larger to see them better and click one of the options. Demo: https://twitter.com/alvarlagerlof/status/1694109234420428869 Fixes #222
alvarlagerlof · Aug 22, 2023 · b08f89a · b08f89a
1 parent 2eaeef1
commit b08f89a
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -63,6 +63,7 @@
   "types": "./dist/js/src/main.d.ts",
   "style": "./dist/style.css",
   "dependencies": {
-    "react-error-boundary": "4.0.11"
+    "react-error-boundary": "4.0.11",
+    "react-resizable-panels": "^0.0.55"
   }
 }
diff --git a/packages/core/src/tabs/path/PathTabs.tsx b/packages/core/src/tabs/path/PathTabs.tsx
@@ -3,6 +3,7 @@ import * as Ariakit from "@ariakit/react";
 import { RscChunkMessage } from "../../main";
 import { getColorForFetch } from "../../color";
 import { useSortedFetchPaths } from "../../stream/hooks";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 export function usePathTabs(
   messages: RscChunkMessage[],
@@ -61,48 +62,51 @@ export function PathTabs({
   children,
 }: ReturnType<typeof usePathTabs> & { children: ReactNode }) {
   return (
-    <div className="flex grow flex-row divide-x-1 dark:divide-slate-600">
-      <Ariakit.TabList
-        store={tabStore}
-        className="flex w-[30%] min-w-[30%] flex-col gap-1 pr-3"
-      >
-        {tabs.map((tab) => (
-          <Ariakit.Tab className="group w-full text-left" key={tab} id={tab}>
-            <div className="flex w-full flex-row items-center gap-3 rounded-md border-none px-1.5 py-0.5 group-aria-selected:bg-slate-200 dark:group-aria-selected:bg-slate-700">
-              <div
-                className="h-[14px] min-h-[14px] w-[14px] min-w-[14px] rounded-full"
-                style={{
-                  background: getColorForFetch(
-                    messages.find((m) => m.data.fetchUrl === tab)?.data
-                      .fetchStartTime ?? 0,
-                  ),
-                }}
-              ></div>
-              <div>
-                <span className="text-slate-900 dark:text-white">
-                  {new URL(tab).pathname}
-                </span>
-                <span className="text-slate-500 dark:text-slate-400">
-                  {new URL(tab).search}
-                </span>
+    <PanelGroup direction="horizontal" units="pixels">
+      <Panel id="sidebar" minSize={150} order={1} defaultSize={220}>
+        <Ariakit.TabList store={tabStore} className="flex flex-col gap-1 pr-3">
+          {tabs.map((tab) => (
+            <Ariakit.Tab className="group w-full text-left" key={tab} id={tab}>
+              <div className="flex w-full flex-row items-center gap-3 rounded-md border-none px-1.5 py-0.5 group-aria-selected:bg-slate-200 dark:group-aria-selected:bg-slate-700">
+                <div
+                  className="h-[14px] min-h-[14px] w-[14px] min-w-[14px] rounded-full"
+                  style={{
+                    background: getColorForFetch(
+                      messages.find((m) => m.data.fetchUrl === tab)?.data
+                        .fetchStartTime ?? 0,
+                    ),
+                  }}
+                ></div>
+                <div>
+                  <span className="text-slate-900 dark:text-white">
+                    {new URL(tab).pathname}
+                  </span>
+                  <span className="text-slate-500 dark:text-slate-400">
+                    {new URL(tab).search}
+                  </span>
+                </div>
               </div>
-            </div>
-          </Ariakit.Tab>
-        ))}
-      </Ariakit.TabList>
+            </Ariakit.Tab>
+          ))}
+        </Ariakit.TabList>
+      </Panel>
 
-      <Ariakit.TabPanel
-        store={tabStore}
-        tabId={currentTab}
-        alwaysVisible={true}
-        className={`flex min-w-0 grow flex-col gap-4 pl-3 transition-opacity delay-75 duration-100 ${
-          isPending ? "opacity-60" : ""
-        }`}
-        aria-label="Paths"
-        aria-busy={isPending}
-      >
-        {children}
-      </Ariakit.TabPanel>
-    </div>
+      <PanelResizeHandle className="w-1 rounded bg-slate-600" />
+
+      <Panel order={2} minSize={350} className="dark:text-white">
+        <Ariakit.TabPanel
+          store={tabStore}
+          tabId={currentTab}
+          alwaysVisible={true}
+          className={`flex min-w-0 grow flex-col gap-4 pl-3 transition-opacity delay-75 duration-100 ${
+            isPending ? "opacity-60" : ""
+          }`}
+          aria-label="Paths"
+          aria-busy={isPending}
+        >
+          {children}
+        </Ariakit.TabPanel>
+      </Panel>
+    </PanelGroup>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3290,6 +3290,7 @@ __metadata:
     react: 18.2.0
     react-dom: 18.2.0
     react-error-boundary: 4.0.11
+    react-resizable-panels: ^0.0.55
     storybook: 7.3.2
     storybook-dark-mode: 3.0.1
     tailwindcss: 3.3.3
@@ -12227,6 +12228,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-resizable-panels@npm:^0.0.55":
+  version: 0.0.55
+  resolution: "react-resizable-panels@npm:0.0.55"
+  peerDependencies:
+    react: ^16.14.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
+  checksum: a7cb938403b57d2489638eb2cf93fddcb420fbd51b8af2b959881ada83ba052f79f51610d650019e577f0e6018542e9195e4bfe45e4e884b4821744c45837646
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
   version: 2.2.1
   resolution: "react-style-singleton@npm:2.2.1"