UI refactor (claude) - #153
Merged
Merged
Conversation
Replace Parcel with Vite, introduce a 'paper FIDS' design language (cream background, yellow accent, JetBrains Mono + Space Grotesk), and add a new app shell with a hamburger right-side sheet nav. Existing pages still render in a transitional state; they will be rebuilt in subsequent milestones. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add UI primitives (Button, Input, Label, Panel, Badge, Dialog, Sheet, Switch, Tabs, Combobox, Select, DataBlock, SplitFlap, Spinner) in client/components/ui, all styled in the paper/FIDS language. Add a typed query/mutation layer (client/api/queries.ts) on top of the existing axios client, providing useFlights / useStatistics / useCurrentUser / useDecorations / etc. Old API singleton is kept as the transport. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Boarding-pass style sign-in card with airport-board top strip, yellow accent CTA, and tanstack-query mutation flow. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New WorldMap component using the cream/yellow palette and responsive viewBox sizing. New Home page lays out: stat strip with split-flap reveals, restyled world map, recent-flights mini-board. Old client/components/WorldMap.tsx kept for now: still used by SingleFlight, will be removed when the flights detail view is rebuilt in M5. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New /flights list uses TanStack Table with zebra rows, sticky sortable headers, filter-pill bar with a Sheet for advanced filters, and a mobile card layout. Whole-row click opens the detail view as requested. New flight detail view: airport-board banner with origin/dest codes, data blocks for departure/arrival/airline/aircraft, restyled route map, and inline edit mode (Combobox for airport/airline search). Delete with confirm. The old SingleFlight, AllFlights table, and components/WorldMap file are no longer imported but kept on disk for now and will be deleted in the cleanup milestone. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Re-laid out as Route + Schedule/Aircraft + Travelers panels with a prominent yellow Fetch button at the top for adsbdb callsign lookup (preserved as requested). Airport/airline selection now uses the Combobox primitive with debounced search. Admin delegation: tap username pills to add/remove travelers; each selected user gets their own seat/class/purpose/notes block. Submit posts to /flights or /flights/many depending on count. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New stats page: top counter strip with split-flap reveal, flights- per-month bar chart, cumulative-distance line chart, top airports and airlines horizontal bars, ticket-class and seat donuts, and top countries bar. All charts use the cream/yellow palette. Timeline data is computed client-side from /flights (no backend change). Filters live in a Sheet on all screen sizes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Split the 327-line monolith into four tabs: Preferences (switches for map/units/timezone), Import/Export (file uploads + downloads), Account (own profile + edit + logout), and admin-only Users and Jobs (connections + airlines). User edit and create flows use the Dialog primitive. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Delete legacy components (Elements, Navbar, SearchInput, SingleFlight, Stats, UserSelect, FetchConnection, old WorldMap) and utils.ts. All flows have been replaced. - Code-split Statistics (Recharts), New flight, Settings, and the WorldMap component out of the initial bundle. Initial chunk dropped from ~990KB to ~435KB; Statistics loads its 410KB Recharts chunk on demand. - Remove the transitional legacy-container CSS shim. - Make tabs horizontally scrollable on narrow screens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
In dev, vite proxies /api/* to the FastAPI backend so module requests like /api/queries.ts were being answered with JSON, breaking the page. Move client/api/queries.ts to client/lib/ queries.ts and update imports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Bare /api prefix was also catching the client/api.ts module request. Use a regex anchored on /api/ so only real backend calls are proxied. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Backend enum expects ASC/DESC; updated FlightsFilters type and the two callers (Home recent strip, AllFlights table). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Backend JSON uses snake_case keys (FastAPI 0.103 doesn't serialize
with by_alias even though the model has an alias generator). Add a
camelize() pass over read responses so frontend keeps camelCase
access. This was the root cause of empty fields on the flight
detail page (departureTime, ticketClass, tailNumber, ...).
Other fixes:
- Decorations endpoint returns a tuple [lines, markers], not an
object. Split it in useDecorations, which restores the
trajectories on the home world map and single-flight route map.
- DELETE / PATCH /flights use ?id= query param, not /flights/{id}.
- airportCode now handles a bare ICAO string defensively.
- Add a dedicated Departure / Arrival airport panel on the flight
detail page so the airport name, city, country, timezone etc.
are visible (this info was hidden in the new layout).
- Switch thumb: use items-center + horizontal padding so the
square is vertically centered.
- New flight Fetch button: lay out input + button as siblings in
a flex row at matching height, with the helper text below.
- Login: drop the boarding-pass framing, just a centered form.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Black markers on the cream palette were too heavy and overlapping airports merged into a blob. Switch to a translucent orange fill (55% opacity on the world map, 70% on the single-flight map) with a thin darker outline so stacked markers visibly accumulate. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Single-flight map now renders the world geographies as a backdrop beneath the trajectory, matching the home page styling. - All Flights page: client-driven pagination via the existing limit/offset query params. Per-page selector (10/20/50), Prev/Next buttons, and a 'Showing X–Y' label. Detects 'has next page' by fetching limit+1. Filters & sort changes reset to page 1. - Drop Limit/Offset inputs from the filters sheet (now redundant with pagination). - Style file inputs consistently: native button gets a bordered, uppercase-mono treatment that lines up with the row height, so the Import section reads as a clean vertical list. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Home counters, recent flights, and Statistics now always pass username=me, instead of relying on the backend default. Admins can still pick a specific other user from the Statistics filters sheet; the 'any user' option is gone because the backend can't aggregate across users. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Track ZoomableGroup zoom level and multiply marker radii, line widths, and stroke widths by 1/sqrt(zoom) so they look the same size on screen as the user zooms in. Restores the behaviour from the pre-refactor map. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
'2021-01' becomes 'Jan '21' on the flights-per-month and cumulative-distance charts. Easier to read at a glance and fits more ticks on narrow screens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Inline control next to the page title: a number input + unit select that auto-sets filters.start to (today - X * unit). Both blank = all time. Plays alongside the existing filter sheet for custom date ranges. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Most chart tooltips have an empty series name, so Recharts was rendering a lonely ': value' line under the title. Set separator='' on those tooltips and inline the unit into the value text. The donut keeps a colon-like ' — ' separator since the category name is meaningful there. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Recharts colored item text with the series fill (yellow), which was illegible on the cream tooltip background. Force itemStyle color to ink so values stay readable across all charts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Owner
Author
|
… menu - Login success and Logout now call queryClient.clear() so the next user's data isn't read from the previous user's cache. Removes the need to hard-refresh after switching accounts. - The nav sheet now shows the currently signed-in username (with an 'admin' badge for admins) above the Logout button. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Owner
Author
|
Backend is completely untouched, gonna do some more QA and testing before merging. |
New 'Flights table' tab in Settings: drag rows to reorder columns, toggle each on/off, hit Reset to restore defaults. Origin and destination are locked as required and always visible. - Column registry covers every Flight field returned by the API (date, route, times, duration, distance, seat, side, class, purpose, airline, airplane, tail/flight number, user, notes, connection, id). - Prefs persist in localStorage and self-heal across releases — unknown columns are dropped, new ones get appended with their default visibility. - FlightsTable now renders columns dynamically based on prefs. Mobile card view keeps its compact preset for screen-size reasons. - AllFlights page subscribes to a 'columns-changed' event so edits in Settings show up without a full reload. Drag and drop powered by @dnd-kit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Pulls in toast notifications (PR #150). Keeps ui-refactor's file deletions (FetchConnection) and design-system changes where they overlapped. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Complete UI refactor while keeping the same theme and spirit of original. Overall closer to my vision for what Jetlog should look like, but coding frontend is tedious and im not a graphic designer so i relied on ai.
Closes #144, #141, #49, #15, #151, #149, #61