trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(planner): restyle sidebar on tokens (waypoints, notes, days)

Browse source 
Migrate the whole sidebar surface onto the design system:

- SidebarTabs: token tab bar, sage active indicator.
- WaypointSidebar: token surfaces/text; sage number badges; overnight
  marker uses the Badge (stop tone) primitive; route summary + stats
  footer in Geist Mono; destructive delete signalled via bg-nogo.
- NotesPanel + DayBreakdown headers/rows on tokens.
- i18n the previously-hardcoded empty-state string (en + de).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-07-16 00:39:12 +02:00
parent 2bc6afcf4f
commit b09d810301
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
6 changed files with 49 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/planner/app/components/SessionView.tsx
View file

@ -119,17 +119,17 @@ function SidebarTabs({ yjs, routeStats, days, onWaypointHover, onWaypointSelect
const [tab, setTab] = useState<"waypoints" | "notes">("waypoints");
return (
<aside className="hidden w-72 border-l border-gray-200 bg-white md:flex md:flex-col">
<div className="flex border-b border-gray-200">
<aside className="hidden w-72 border-l border-border bg-bg-raised md:flex md:flex-col">
<div className="flex border-b border-border">
<button
onClick={() => setTab("waypoints")}
className={`flex-1 px-3 py-2 text-xs font-medium ${tab === "waypoints" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
className={`flex-1 px-3 py-2 text-xs font-medium transition-colors ${tab === "waypoints" ? "border-b-2 border-accent text-accent" : "text-text-md hover:text-text-hi"}`}
>
{t("sidebar.waypoints", "Waypoints")}
</button>
<button
onClick={() => setTab("notes")}
className={`flex-1 px-3 py-2 text-xs font-medium ${tab === "notes" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-500 hover:text-gray-700"}`}
className={`flex-1 px-3 py-2 text-xs font-medium transition-colors ${tab === "notes" ? "border-b-2 border-accent text-accent" : "text-text-md hover:text-text-hi"}`}
>
{t("sidebar.notes", "Notes")}
</button>