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