Match Komoot import page layout to Wahoo import page

- Switch to max-w-4xl to match the generic import page
- Move the trigger button to the header row (title on left, action on right)
- Show progress inline as "X / Y" in the header while running
- Progress card only appears once a batch exists; empty state is a
  centered paragraph like the generic page's "no workouts" message
- Link to /activities on completion instead of a separate paragraph

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/journal/app/routes/sync.import.komoot.tsx

@@ -50,8 +50,6 @@ export async function action({ request }: Route.ActionArgs) {
   const user = await getSessionUser(request);
   if (!user) return redirect("/auth/login");
 
-  // Delegate to the API route — just redirect so the page reloads with
-  // the new batch after the POST.
   const resp = await fetch(
     new URL("/api/sync/komoot/import", new URL(request.url).origin),
     { method: "POST", headers: { cookie: request.headers.get("cookie") ?? "" } },
@@ -78,59 +76,62 @@ export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
   const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const isActive = batch?.status === "pending" || batch?.status === "running";
+  const isIdle = triggerFetcher.state === "idle";
 
   useEffect(() => {
     if (isActive) {
-      pollingRef.current = setInterval(() => {
-        revalidator.revalidate();
-      }, 2000);
+      pollingRef.current = setInterval(() => revalidator.revalidate(), 2000);
     }
-    return () => {
-      if (pollingRef.current) clearInterval(pollingRef.current);
-    };
+    return () => { if (pollingRef.current) clearInterval(pollingRef.current); };
   }, [isActive]);
 
   const elapsedSeconds = batch
     ? Math.floor(
-        (batch.completedAt
-          ? new Date(batch.completedAt).getTime()
-          : Date.now()) - new Date(batch.startedAt).getTime(),
-      ) / 1000
+        ((batch.completedAt ? new Date(batch.completedAt) : new Date()).getTime()
+          - new Date(batch.startedAt).getTime()) / 1000,
+      )
     : 0;
 
   return (
-    <div className="mx-auto max-w-2xl px-4 py-8">
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      {/* Header row — mirrors sync.import.$provider layout */}
+      <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-gray-900">
           {t("sync.importFrom", { provider: "Komoot" })}
         </h1>
 
-      <div className="mt-6 rounded-lg border border-gray-200 p-6">
-        {!batch && (
-          <div className="text-center">
-            <p className="text-gray-600">{t("komoot.import.noImportYet")}</p>
-            <triggerFetcher.Form method="post" className="mt-4">
+        {isActive ? (
+          <span className="text-sm text-gray-500">
+            {batch.totalFound > 0
+              ? t("sync.importingProgress", {
+                  current: batch.importedCount + batch.duplicateCount,
+                  total: batch.totalFound,
+                })
+              : t("komoot.import.status.running")}
+          </span>
+        ) : (
+          <triggerFetcher.Form method="post">
             <button
               type="submit"
-                disabled={triggerFetcher.state !== "idle"}
-                className="rounded-md bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+              disabled={!isIdle}
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
             >
-                {triggerFetcher.state !== "idle"
-                  ? t("komoot.import.starting")
-                  : t("komoot.import.startImport")}
+              {!isIdle ? t("komoot.import.starting") : t("komoot.import.startImport")}
             </button>
           </triggerFetcher.Form>
-          </div>
         )}
+      </div>
 
+      {/* Progress card — shown once a batch exists */}
       {batch && (
-          <div className="space-y-4">
+        <div className="mt-6 rounded-lg border border-gray-200 p-6">
           <div className="flex items-center justify-between">
             <StatusBadge status={batch.status} t={t} />
             {(batch.status === "completed" || batch.status === "failed") && (
               <triggerFetcher.Form method="post">
                 <button
                   type="submit"
-                    disabled={triggerFetcher.state !== "idle"}
+                  disabled={!isIdle}
                   className="text-sm text-blue-600 hover:underline disabled:opacity-50"
                 >
                   {t("komoot.import.runAgain")}
@@ -140,7 +141,7 @@ export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
           </div>
 
           {isActive && (
-              <div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
+            <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100">
               <div
                 className="h-2 rounded-full bg-blue-500 transition-all duration-500"
                 style={{
@@ -152,33 +153,33 @@ export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
             </div>
           )}
 
-            <dl className="grid grid-cols-3 gap-4 text-center">
+          <dl className="mt-4 grid grid-cols-3 gap-4 text-center">
             <StatBox label={t("komoot.import.found")} value={batch.totalFound} />
             <StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
             <StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
           </dl>
 
           {batch.status === "completed" && (
-              <p className="text-sm text-gray-500">
+            <p className="mt-3 text-sm text-gray-500">
               {t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
+              {" · "}
+              <a href="/activities" className="text-blue-600 hover:underline">
+                {t("komoot.import.viewActivities")}
+              </a>
             </p>
           )}
 
           {batch.status === "failed" && batch.errorMessage && (
-              <p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+            <p className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
               {batch.errorMessage}
             </p>
           )}
         </div>
       )}
-      </div>
 
-      {batch?.status === "completed" && (
-        <p className="mt-4 text-center text-sm text-gray-500">
-          <a href={`/users/me`} className="text-blue-600 hover:underline">
-            {t("komoot.import.viewActivities")}
-          </a>
-        </p>
+      {/* Empty state — no batch yet */}
+      {!batch && (
+        <p className="mt-8 text-center text-gray-500">{t("komoot.import.noImportYet")}</p>
       )}
     </div>
   );