From 356e61d0435e14cd6a48eb0c4004b5ec17735c39 Mon Sep 17 00:00:00 2001 From: Paul Trowbridge Date: Sun, 2 Aug 2026 14:09:06 -0400 Subject: [PATCH] Add a mobile layout and stop shipping Perspective to every page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Below md: the sidebar is replaced by a fixed bottom bar carrying the same destinations plus the theme toggle. NAV moved to navItems.jsx so the two can't drift apart. Perspective is now lazy-loaded. It was ~90% of the bundle and only Pivot uses it, so the initial download drops from 4.9 MB gzipped to 173 kB and the rest arrives only when a pivot is opened. Desktop benefits as much as phones do. Bridge's balance table becomes stacked cards under sm: with the same subtotals, source tabs scroll rather than wrap, and page gutters tighten on small screens. Rules, Mappings, and Records are deliberately untouched — they are wide data tables and belong on a desktop. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01G2HFeU5neCKagTnmA6o9Tu --- ui/index.html | 2 +- ui/src/App.jsx | 12 ++++-- ui/src/components/BottomNav.jsx | 40 ++++++++++++++++++ ui/src/components/Sidebar.jsx | 71 +------------------------------- ui/src/components/SourceTabs.jsx | 4 +- ui/src/components/navItems.jsx | 70 +++++++++++++++++++++++++++++++ ui/src/pages/Bridge.jsx | 40 +++++++++++++++++- ui/src/pages/Import.jsx | 4 +- ui/src/pages/ImportHub.jsx | 2 +- ui/src/pages/Mappings.jsx | 2 +- ui/src/pages/Pivot.jsx | 2 +- ui/src/pages/Records.jsx | 2 +- ui/src/pages/Remap.jsx | 2 +- ui/src/pages/Rules.jsx | 4 +- ui/src/pages/SourceDetail.jsx | 4 +- ui/src/pages/SourceList.jsx | 2 +- 16 files changed, 173 insertions(+), 90 deletions(-) create mode 100644 ui/src/components/BottomNav.jsx create mode 100644 ui/src/components/navItems.jsx diff --git a/ui/index.html b/ui/index.html index 830671e..1ae87a4 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,7 +4,7 @@ - ui + Dataflow
diff --git a/ui/src/App.jsx b/ui/src/App.jsx index ad35e53..c513404 100644 --- a/ui/src/App.jsx +++ b/ui/src/App.jsx @@ -1,7 +1,8 @@ -import { useState, useEffect, createElement } from 'react' +import { useState, useEffect, createElement, lazy, Suspense } from 'react' import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom' import { api, setCredentials, clearCredentials } from './api' import Sidebar from './components/Sidebar.jsx' +import BottomNav from './components/BottomNav.jsx' import SourceTabs from './components/SourceTabs.jsx' import Login from './pages/Login' import SourceList from './pages/SourceList' @@ -13,7 +14,7 @@ import Rules from './pages/Rules' import Mappings from './pages/Mappings' import Records from './pages/Records' import Log from './pages/Log' -import Pivot from './pages/Pivot' +const Pivot = lazy(() => import('./pages/Pivot')) import Remap from './pages/Remap' import Stacks from './pages/Stacks' @@ -134,12 +135,14 @@ export default function App() {
+
+
{/* Main */}
@@ -191,7 +194,8 @@ export default function App() {
)} -
+
+ Loading…
}> } /> @@ -212,9 +216,11 @@ export default function App() { } /> } /> +
+ ) } diff --git a/ui/src/components/BottomNav.jsx b/ui/src/components/BottomNav.jsx new file mode 100644 index 0000000..4a7869c --- /dev/null +++ b/ui/src/components/BottomNav.jsx @@ -0,0 +1,40 @@ +import { NavLink } from 'react-router-dom' +import useTheme from '../theme.jsx' +import { NAV } from './navItems.jsx' + +// Phone-sized replacement for the sidebar: same destinations, thumb-reachable. +// Hidden from md: upward, where the sidebar takes over. +export default function BottomNav() { + const { dark, setDark } = useTheme() + + return ( + + ) +} diff --git a/ui/src/components/Sidebar.jsx b/ui/src/components/Sidebar.jsx index 38a0879..6741839 100644 --- a/ui/src/components/Sidebar.jsx +++ b/ui/src/components/Sidebar.jsx @@ -1,75 +1,6 @@ import { NavLink } from 'react-router-dom' import useTheme from '../theme.jsx' - -const NAV = [ - { - to: '/sources', - label: 'Sources', - icon: ( - - - - - - ), - }, - { - to: '/import', - label: 'Import', - icon: ( - - - - - - ), - }, - { - to: '/bridge', - label: 'Bridge', - icon: ( - - - - - - - ), - }, - { - to: '/remap', - label: 'Remap', - icon: ( - - - - - - - ), - }, - { - to: '/stacks', - label: 'Stacks', - icon: ( - - - - - - ), - }, - { - to: '/log', - label: 'Log', - icon: ( - - - - - ), - }, -] +import { NAV } from './navItems.jsx' export default function Sidebar({ expanded, setExpanded, loginUser, onLogout }) { const { dark, setDark } = useTheme() diff --git a/ui/src/components/SourceTabs.jsx b/ui/src/components/SourceTabs.jsx index fd0bd30..5924c74 100644 --- a/ui/src/components/SourceTabs.jsx +++ b/ui/src/components/SourceTabs.jsx @@ -18,7 +18,7 @@ export default function SourceTabs({ sources }) { return (
-
+
Sources / @@ -30,7 +30,7 @@ export default function SourceTabs({ sources }) { )}
-