feat: side menu in explorer

app/app.nix

@@ -9,7 +9,7 @@
     {
       packages = {
         app = unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-5+fAahFR7yOAx9zFXe9r+AbQDjAXkWoYV9auuQZop6E=";
+          npmDepsHash = "sha256-SUMH9KcMtIluaUBGSqPL3HcE4mZIzfp8NHFVgmtvER4=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [ "--legacy-peer-deps" ];

app/package.json

@@ -32,7 +32,9 @@
     "formsnap": "^1.0.0",
     "gql.tada": "^1.7.5",
     "graphql-request": "^7.0.1",
+    "lucide-svelte": "^0.379.0",
     "mode-watcher": "^0.3.0",
+    "paneforge": "^0.0.4",
     "svelte-french-toast": "^1.2.0",
     "svelte-legos": "^0.2.3",
     "svelte-persisted-store": "^0.9.4",

app/src/lib/components/header/header.svelte

@@ -11,7 +11,7 @@ import { routes } from "$lib/components/navigation/index.ts"
 <header
   class={cn(
     'p-2 md:px-4 min-w-full w-screen flex flex-row items-center gap-4',
-    'bg-card flex justify-between space-x-2 sm:space-x-3 border-b-[1px] border-solid border-[#4545538c]/30',
+    'bg-card flex justify-between space-x-2 sm:space-x-3 border-b-[1px] border-solid border-secondary',
   )}
 >
   <Button

app/src/lib/components/navigation/index.ts

@@ -3,7 +3,7 @@ import Navigation from "./navigation.svelte"
 const routes = {
   transfer: { draft: false, path: "/transfer" },
   faucet: { draft: false, path: "/faucet" },
-  explorer: {draft: false, path: "/explorer" },
+  explorer: { draft: false, path: "/explorer" },
   transfers: { draft: true, path: "/transfers" }
 } as const
 

app/src/lib/components/ui/resizable/index.ts

@@ -0,0 +1,15 @@
+import Handle from "./resizable-handle.svelte"
+import PaneGroup from "./resizable-pane-group.svelte"
+import { Pane, type PaneProps, type PaneGroupProps } from "paneforge"
+
+export {
+  type PaneProps,
+  type PaneGroupProps,
+  PaneGroup,
+  Pane,
+  Handle,
+  //
+  PaneGroup as ResizablePaneGroup,
+  Pane as ResizablePane,
+  Handle as ResizableHandle
+}

app/src/lib/components/ui/resizable/resizable-handle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+import GripVertical from "virtual:icons/tabler/grip-vertical"
+import * as ResizablePrimitive from "paneforge"
+import { cn } from "$lib/utilities/shadcn.js"
+
+type $$Props = ResizablePrimitive.PaneResizerProps & {
+  withHandle?: boolean
+}
+
+export let withHandle: $$Props["withHandle"] = false
+export let el: $$Props["el"] = undefined
+let className: $$Props["class"] = undefined
+export { className as class }
+</script>
+
+<ResizablePrimitive.PaneResizer
+	bind:el
+	class={cn(
+		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
+		className
+	)}
+>
+	{#if withHandle}
+		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border -ml-4">
+			<GripVertical class="size-3" />
+		</div>
+	{/if}
+</ResizablePrimitive.PaneResizer>

app/src/lib/components/ui/resizable/resizable-pane-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import * as ResizablePrimitive from "paneforge"
+import { cn } from "$lib/utilities/shadcn.js"
+
+type $$Props = ResizablePrimitive.PaneGroupProps
+
+let className: $$Props["class"] = undefined
+export let direction: $$Props["direction"]
+export let paneGroup: $$Props["paneGroup"] = undefined
+export let el: $$Props["el"] = undefined
+export { className as class }
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:el
+	bind:paneGroup
+	{direction}
+	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	{...$$restProps}
+>
+	<slot />
+</ResizablePrimitive.PaneGroup>

app/src/lib/utilities/index.ts

@@ -1,4 +1,4 @@
-function raise(message?: string, opts?: ErrorOptions): never {
+export function raise(message?: string, opts?: ErrorOptions): never {
   throw new Error(message, opts)
 }
 

app/src/routes/+layout.svelte

@@ -18,7 +18,6 @@ import PreloadingIndicator from "$lib/components/preloading-indicator.svelte"
 import { QueryClient, MutationCache, notifyManager } from "@tanstack/svelte-query"
 import { PersistQueryClientProvider } from "@tanstack/svelte-query-persist-client"
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"
-    import { cn } from "$lib/utilities/shadcn";
 
 if (browser) notifyManager.setScheduler(window.requestAnimationFrame)
 

app/src/routes/explorer/+layout.svelte

@@ -1,14 +1,64 @@
-<script>
-    import { cn } from "$lib/utilities/shadcn";
+<script lang="ts">
+import Menu from "./components/menu.svelte"
+import type { LayoutData } from "./$types.ts"
+import { cn } from "$lib/utilities/shadcn.ts"
+import * as Resizable from "$lib/components/ui/resizable"
+import GripVerticalIcon from "virtual:icons/tabler/grip-vertical"
+import { ScrollArea } from "$lib/components/ui/scroll-area/index.ts"
+
+export let data: LayoutData
+
+let innerWidth = window.innerWidth
+
+let isCollapsed = false
+$: [leftSize, rightSize] = [12, 88]
+
+const onLayoutChange: Resizable.PaneGroupProps["onLayoutChange"] = sizes => {
+  document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}`
+}
+
+const onCollapse: Resizable.PaneProps["onExpand"] = () => {
+  isCollapsed = true
+  document.cookie = `PaneForge:collapsed=${true}`
+}
+
+const onExpand: Resizable.PaneProps["onExpand"] = () => {
+  isCollapsed = false
+  document.cookie = `PaneForge:collapsed=${false}`
+}
+
+const onResize: Resizable.PaneProps["onResize"] = (size, _previousSize) => {
+  leftSize = size
+}
 </script>
 
 <main class="flex flex-row flex-1 overflow-y-hidden">
-  <nav class={cn("flex flex-col border-solid border-r border-red-500 w-40")}>
-    <a href="/explorer/blocks">blocks</a>
-    <a href="/explorer/connections">connections</a>
-  </nav>
-
-  <div class="flex-1 overflow-y-scroll">
-    <slot/>
-  </div>
+  <Resizable.PaneGroup direction="horizontal" class="w-full rounded-lg" {onLayoutChange}>
+    <Resizable.Pane
+      {onExpand}
+      {onResize}
+      {onCollapse}
+      maxSize={14}
+      minSize={12}
+      collapsible={true}
+      collapsedSize={4.5}
+      defaultSize={leftSize}
+      class={cn('w-40 border-r border-solid border-r-secondary')}
+    >
+      <Menu tableRoutes={data.tables} {isCollapsed} />
+    </Resizable.Pane>
+    <Resizable.Handle
+      withHandle
+      class="relative flex w-4 max-w-4 items-center justify-center bg-background"
+    >
+      <div class="h-full w-12 items-center justify-center rounded-sm border bg-muted">
+        <GripVerticalIcon />
+      </div>
+    </Resizable.Handle>
+    <Resizable.Pane defaultSize={rightSize} class="rounded-lg">
+      <ScrollArea class="size-full flex-1">
+        <slot />
+      </ScrollArea>
+    </Resizable.Pane>
+  </Resizable.PaneGroup>
 </main>

app/src/routes/explorer/+layout.ts

@@ -0,0 +1,23 @@
+import type { LayoutLoad } from "./$types"
+import type { SvelteComponent } from "svelte"
+
+import TvIcon from "virtual:icons/lucide/tv"
+import BlocksIcon from "virtual:icons/lucide/blocks"
+import ConnectionIcon from "virtual:icons/mdi/connection"
+import SendHorizontalIcon from "virtual:icons/lucide/send-horizontal"
+
+const tables = ["blocks", "packets", "channels", "connections"] as const
+
+export interface Table {
+  route: (typeof tables)[number]
+  icon: typeof SvelteComponent
+}
+
+export const load = (_loadEvent => ({
+  tables: [
+    { route: "blocks", icon: BlocksIcon },
+    { route: "channels", icon: TvIcon },
+    { route: "packets", icon: SendHorizontalIcon },
+    { route: "connections", icon: ConnectionIcon }
+  ] as Array<Table>
+})) satisfies LayoutLoad

app/src/routes/explorer/channels/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { cn } from "$lib/utilities/shadcn.ts"
+</script>
+
+<section class={cn('py-3')}>
+  <h1>Channels</h1>
+</section>

app/src/routes/explorer/components/menu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+import { page } from "$app/stores"
+import { cn } from "$lib/utilities/shadcn.ts"
+import type { LayoutData } from "../$types.ts"
+import { Button } from "$lib/components/ui/button/index.ts"
+import * as Tooltip from "$lib/components/ui/tooltip/index.ts"
+
+export let tableRoutes: LayoutData["tables"]
+
+const devBorder = 0 && "outline outline-[1px] outline-pink-200/40"
+
+export let isCollapsed = false
+
+$: selectedTable = $page.route.id?.split("/").at(-1) || "blocks"
+
+let innerWidth = window.innerWidth
+let alwaysCollapsedWidth = 580
+let alwaysCollapsed = innerWidth <= alwaysCollapsedWidth
+</script>
+
+<svelte:window bind:innerWidth />
+
+<nav
+  class={cn(
+    devBorder,
+    'flex flex-col items-start text-xs',
+    isCollapsed || alwaysCollapsed ? 'p-1' : 'p-2',
+  )}
+>
+  {#each tableRoutes as { route, icon }}
+    {#if isCollapsed}
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild let:builder>
+          <Button
+            title={route}
+            variant="link"
+            builders={[builder]}
+            href={`/explorer/${route}`}
+            class={cn(
+              selectedTable === route ? 'bg-muted' : 'bg-transparent',
+              'px-1 text-center mb-2 w-full flex py-0 hover:no-underline hover:bg-muted',
+            )}
+          >
+            <svelte:component this={icon} class="block size-5" />
+            <span class="sr-only">{route}</span>
+          </Button>
+        </Tooltip.Trigger>
+
+        <Tooltip.Content
+          side="right"
+          class="border border-solid border-accent dark:bg-card-foreground dark:text-muted"
+        >
+          {route}
+        </Tooltip.Content>
+      </Tooltip.Root>
+    {:else}
+      <Button
+        title={route}
+        variant="link"
+        href={`/explorer/${route}`}
+        class={cn(
+          'mb-2 w-full flex py-0 hover:no-underline hover:bg-muted px-3 text-left justify-start self-start gap-x-1',
+          selectedTable === route ? 'bg-muted' : 'bg-transparent',
+        )}
+      >
+        <svelte:component this={icon} class={'size-4.5 mr-2'} />
+        <span class="block">{route}</span>
+      </Button>
+    {/if}
+  {/each}
+</nav>

app/src/routes/transfer/+page.svelte

@@ -57,6 +57,7 @@ onMount(() => {
 export let data: PageData
 const { chains, assets } = data
 
+const devBorder = 0 && "outline outline-[1px] outline-pink-200/40"
 
 const queryParams = queryParameters(
   {

app/tailwind.config.ts

@@ -120,6 +120,8 @@ export default (<Config>{
         28: "7rem"
       }),
       spacing: _ => ({
+        4.5: "1.125rem",
+        5.5: "1.375rem",
         18: "4.5rem",
         22: "5.5rem",
         28: "7rem"

app/tsconfig.json

@@ -9,6 +9,7 @@
     "module": "ESNext",
     "skipLibCheck": true,
     "alwaysStrict": true,
+    "isolatedModules": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "moduleResolution": "Bundler",

dictionary.txt

@@ -743,6 +743,7 @@ oxalica
 oxlint
 pagefind
 paloma
+paneforge
 paramaters
 paramproposal
 paramsclient
@@ -1142,6 +1143,7 @@ zerg
 zerion
 zerolog
 zetachain
+zkgm
 zkps
 zktrie
 zstd