Merge pull request #606 from trails-cool/feat/planner-computing-overlay

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

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">
+                {/* Ambient indeterminate progress along the top edge */}
-                  <div className="h-full w-1/3 animate-[slide_1s_ease-in-out_infinite] bg-blue-500" />
+                <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={

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"}`}

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}
           />