From 46018c9f898059bc8258df12a745ce6df2bce171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Thu, 16 Jul 2026 01:01:08 +0200
Subject: [PATCH] feat(planner): move "computing route" from topbar to a map
 overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/planner/app/components/SessionView.tsx | 17 ++++++++++++-----
 apps/planner/app/components/Topbar.tsx      |  7 -------
 apps/planner/app/routes/dev.ui.tsx          |  3 +--
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx
index f7e0b16..a558528 100644
--- a/apps/planner/app/components/SessionView.tsx
+++ b/apps/planner/app/components/SessionView.tsx
@@ -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={
diff --git a/apps/planner/app/components/Topbar.tsx b/apps/planner/app/components/Topbar.tsx
index d61f48c..c34d00b 100644
--- a/apps/planner/app/components/Topbar.tsx
+++ b/apps/planner/app/components/Topbar.tsx
@@ -14,7 +14,6 @@ interface TopbarProps {
   canRedo: boolean;
   onUndo: () => void;
   onRedo: () => void;
-  computing?: boolean;
   /** App-specific interactive slot (profile selector). */
   profileSlot?: ReactNode;
   /** Right-aligned action slot (save-to-journal, export). */
@@ -43,7 +42,6 @@ export function Topbar({
   canRedo,
   onUndo,
   onRedo,
-  computing = false,
   profileSlot,
   actions,
 }: TopbarProps) {
@@ -86,11 +84,6 @@ export function Topbar({
       </div>
       <div className="flex shrink-0 items-center gap-2 sm:gap-3">
         {actions}
-        {computing && (
-          <span className="hidden text-xs text-accent sm:inline">
-            {t("computingRoute")}
-          </span>
-        )}
         <span className="hidden items-center gap-1.5 text-sm text-text-md sm:inline-flex">
           <span
             className={`inline-block h-1.5 w-1.5 rounded-full ${connected ? "bg-accent" : "bg-text-lo"}`}
diff --git a/apps/planner/app/routes/dev.ui.tsx b/apps/planner/app/routes/dev.ui.tsx
index 02fdeee..5b7f263 100644
--- a/apps/planner/app/routes/dev.ui.tsx
+++ b/apps/planner/app/routes/dev.ui.tsx
@@ -193,7 +193,7 @@ export default function DevUi() {
             actions={actionsPlaceholder}
           />
         </TopbarConfig>
-        <TopbarConfig caption="Multiplayer · connected · computing route · undo available">
+        <TopbarConfig caption="Multiplayer · connected · undo available">
           <Topbar
             participants={PARTY}
             connected
@@ -202,7 +202,6 @@ export default function DevUi() {
             canRedo={false}
             onUndo={noop}
             onRedo={noop}
-            computing
             profileSlot={profilePlaceholder}
             actions={actionsPlaceholder}
           />