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

feat(planner): move "computing route" from topbar to a map overlay

Browse source 
The topbar's "Route wird berechnet…" text appeared/disappeared with
routing, shifting the topbar layout. Move it onto the map as a floating
status pill (spinner + label, top-center, pointer-events-none) that
appears temporarily without affecting the topbar. Restyle the ambient
top-edge progress bar to accent tokens. Drop the now-unused `computing`
prop from Topbar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-07-16 01:01:08 +02:00
parent 8eae92b8a2
commit 46018c9f89
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
3 changed files with 13 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -236,7 +236,6 @@ export function SessionView({ sessionId, hasJournalCallback, returnUrl, initialW
canRedo={canRedo}
onUndo={undo}
onRedo={redo}
computing={computing}
profileSlot={<ProfileSelector yjs={yjs} />}
actions={
<>
@ -255,11 +254,19 @@ export function SessionView({ sessionId, hasJournalCallback, returnUrl, initialW
<main className="flex-1 flex flex-col">
<div className="relative flex-1">
{computing && (
<div className="absolute inset-x-0 top-0 z-[1000]">
<div className="h-1 w-full overflow-hidden bg-blue-100">
<div className="h-full w-1/3 animate-[slide_1s_ease-in-out_infinite] bg-blue-500" />
<>
{/* Ambient indeterminate progress along the top edge */}
<div className="absolute inset-x-0 top-0 z-[1000]">
<div className="h-0.5 w-full overflow-hidden bg-accent-bg">
<div className="h-full w-1/3 animate-[slide_1s_ease-in-out_infinite] bg-accent" />
</div>
</div>
</div>
{/* Floating status pill — overlays the map without shifting layout */}
<div className="pointer-events-none absolute left-1/2 top-3 z-[1000] flex -translate-x-1/2 items-center gap-2 rounded-full border border-border bg-bg-raised px-3 py-1 text-xs font-medium text-text-md shadow-md">
<span className="h-3 w-3 shrink-0 animate-spin rounded-full border-2 border-accent border-t-transparent" aria-hidden />
{t("computingRoute")}
</div>
</>
)}
<Suspense
fallback={