Move the top bar to the bottom, icon overhauls, simplify URLs, and ot…

…her nice things (#250) * update the version state * kill all of the /requestor URLs * update webhonc badge to be a bit more chill * initial move to the bottom * Formatting * add radix menubar * remove unnecessary * add settings menubar * Formatting * add bottom toolbar icons and use store for panel state * formatting * some more attempts at making the side panel not suck * formatting * remove unused items * remove branding temporarily * icon hover/active states * make routes panel even more chill * formatting * fix up the key sequence to not cause massive re-renders (spoiler: it was the useState inside) * formatting * simplify nav panel and fix overflow issues * remove ArrowUp/Down key navigation as scoping is currently difficult to implement and interferes too much with browser-native things * simplify keySequence hook * fit RoutesItem * formatting * remove unused * re-add branding * formatting * bump canary version
fiberplane · Sep 13, 2024 · 35bdf32 · 35bdf32
1 parent 5baa430
commit 35bdf32
Show file tree

Hide file tree

Showing 24 changed files with 571 additions and 468 deletions.
diff --git a/api/package.json b/api/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0-beta.11",
+  "version": "0.8.1-canary.3",
   "name": "@fiberplane/studio",
   "description": "Local development debugging interface for Hono apps",
   "author": "Fiberplane<[email protected]>",

diff --git a/packages/types/package.json b/packages/types/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fiberplane/fpx-types",
   "description": "Shared types and schemas for fpx",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "exports": {
     ".": "./dist/index.js"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/studio/package.json b/studio/package.json
@@ -30,6 +30,7 @@
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-separator": "^1.0.3",

diff --git a/studio/src/App.tsx b/studio/src/App.tsx
@@ -1,12 +1,6 @@
 import { QueryClientProvider, queryClient } from "@/queries";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { type ReactNode, useEffect } from "react";
-import {
-  Route,
-  BrowserRouter as Router,
-  Routes,
-  useNavigate,
-} from "react-router-dom";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 import { Layout } from "./Layout";
 import { Toaster } from "./components/ui/toaster";
 import { RequestDetailsPage } from "./pages/RequestDetailsPage/RequestDetailsPage";
@@ -20,7 +14,6 @@ export function App() {
         <TooltipProvider>
           <Layout>
             <Routes>
-              <Route path="/" element={<Redirect />} />
               <Route path="/requests" element={<RequestsPage />} />
               <Route
                 path="/requests/otel/:traceId"
@@ -30,11 +23,8 @@ export function App() {
                 path="/requests/:traceId"
                 element={<RequestDetailsPage />}
               />
-              <Route path="/requestor" element={<RequestorPage />} />
-              <Route
-                path="/requestor/:requestType/:id"
-                element={<RequestorPage />}
-              />
+              <Route path="/" element={<RequestorPage />} />
+              <Route path="/:requestType/:id" element={<RequestorPage />} />
             </Routes>
           </Layout>
           <Toaster />
@@ -45,12 +35,3 @@ export function App() {
 }
 
 export default App;
-
-function Redirect({ to = "/requestor" }: { to?: string }): ReactNode {
-  const navigate = useNavigate();
-  useEffect(() => {
-    navigate(to);
-  }, [to, navigate]);
-
-  return null;
-}
diff --git a/studio/src/Layout/FloatingSidePanel.tsx b/studio/src/Layout/FloatingSidePanel.tsx
@@ -18,17 +18,20 @@ import { useRequestorStore } from "../pages/RequestorPage/store";
 import { cn } from "../utils";
 
 export function FloatingSidePanel() {
-  const { sidePanelOpen, setSidePanelOpen } = useRequestorStore(
-    "sidePanelOpen",
-    "setSidePanelOpen",
+  const { sidePanel, togglePanel } = useRequestorStore(
+    "sidePanel",
+    "togglePanel",
     "path",
   );
 
   const isLgScreen = useIsLgScreen();
 
   return (
     <aside>
-      <Root open={!isLgScreen && sidePanelOpen} onOpenChange={setSidePanelOpen}>
+      <Root
+        open={!isLgScreen && sidePanel === "open"}
+        onOpenChange={() => togglePanel("sidePanel")}
+      >
         <DialogPortal>
           <DialogOverlay className="fixed top-0 left-0 w-full h-full bg-black/40" />
           <DialogContent