feat: add QR code for app access in README

- Created LaunchScreen.storyboard for app launch interface.
- Added Main.storyboard for the main app interface with a bridge view controller.
- Initialized Info.plist with necessary app configuration settings.
- Set up .gitignore for SPM dependencies and build artifacts.
- Created Package.swift for managing SPM dependencies, including Capacitor and Cordova.
- Added README.md for CapApp-SPM package documentation.
- Implemented a simple CapApp-SPM.swift file to indicate the app is a Capacitor app.
- Introduced debug.xcconfig to manage debug configuration settings.

README.md

@@ -6,6 +6,17 @@ A lightweight bus transport web app that uses the gateway OpenAPI contract at:
 
 The frontend is built with SvelteKit. It dynamically loads transport endpoints from the OpenAPI spec and calls them through a SvelteKit server hook proxy.
 
+## Live demo
+
+Access the app at https://bus.furyhawk.lol/ or scan the QR code below:
+
+[![QR code to bus.furyhawk.lol](docs/screenshots/bus-qr-code.png)](https://bus.furyhawk.lol/)
+
+## Screenshot
+
+![Nearby Bus Arrivals UI](docs/screenshots/bus-ui-v2.png)
+![Nearby Bus Arrivals UI Mobile](docs/screenshots/bus-ui-mobile.png)
+
 ## Stack
 
 - SvelteKit + Vite + Svelte 5
@@ -13,7 +24,7 @@ The frontend is built with SvelteKit. It dynamically loads transport endpoints f
 
 ## Run
 
-1. Ensure your API gateway is running at http://localhost:8067.
+1. Ensure your API gateway is running at http://localhost:8067. Refer to https://github.com/furyhawk/lta_datamall_api.git
 2. Install dependencies:
 
 ```bash
@@ -156,10 +167,6 @@ You can replace `ENGINE=docker` with `ENGINE=podman` in all commands.
 APP_PORT=3001 API_ORIGIN=http://host.docker.internal:8067 make up ENGINE=docker
 ```
 
-## Screenshot
-
-![Nearby Bus Arrivals UI](docs/screenshots/bus-ui.jpeg)
-
 ## Project structure
 
 ```text

bun.lock

@@ -12,7 +12,6 @@
       },
       "devDependencies": {
         "@capacitor/cli": "^8.3.4",
-        "@sveltejs/adapter-auto": "^7.0.1",
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/kit": "^2.61.1",
         "svelte": "^5.56.0",
@@ -165,8 +164,6 @@
 
     "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.10", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-4WfKk68eTih+MiJD4fSbxN7E8kVBmTMPWHUPYjvl2N0rMs53YLTT8/YjKU5Dtnz5LqDjl7LEw4U7lXR2W3J5WA=="],
 
-    "@sveltejs/adapter-auto": ["@sveltejs/adapter-auto@7.0.1", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-dvuPm1E7M9NI/+canIQ6KKQDU2AkEefEZ2Dp7cY6uKoPq9Z/PhOXABe526UdW2mN986gjVkuSLkOYIBnS/M2LQ=="],
-
     "@sveltejs/adapter-static": ["@sveltejs/adapter-static@3.0.10", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew=="],
 
     "@sveltejs/kit": ["@sveltejs/kit@2.61.1", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.9", "@types/cookie": "^0.6.0", "acorn": "^8.16.0", "cookie": "^0.6.0", "devalue": "^5.8.1", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "set-cookie-parser": "^3.0.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0 || ^7.0.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.3.3 || ^6.0.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 || ^8.0.0" }, "optionalPeers": ["@opentelemetry/api", "typescript"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-Ny8s1SR1TyQS2hD2Rvw0XKzU2Nw1eUF52dTb6T2bdcgz7wSC+Nyb5IwjWYlR4b2dvbbR5NJDiQwHg3rnNseghg=="],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bus-sg-app",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "private": true,
   "description": "Singapore bus transport app powered by OpenAPI gateway",
   "type": "module",

src/app.css

@@ -21,46 +21,64 @@ body {
   margin: 0;
   font-family: "Space Grotesk", sans-serif;
   color: var(--ink);
-  min-height: 100vh;
-  background: radial-gradient(circle at 15% 15%, #fff4dc 0%, transparent 35%),
-    radial-gradient(circle at 82% 0%, #ffd3b6 0%, transparent 32%),
-    linear-gradient(155deg, var(--bg-0), var(--bg-1));
-  overflow-x: hidden;
-}
-
-.bg-grid {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0.2;
-  background-image: linear-gradient(to right, #a88f63 1px, transparent 1px),
-    linear-gradient(to bottom, #a88f63 1px, transparent 1px);
-  background-size: 36px 36px;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: #1e1b16;
 }
 
 .app-shell {
-  width: min(1100px, calc(100% - 2rem));
-  margin: 1.05rem auto 2.2rem;
+  position: fixed;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  overflow: hidden;
+  padding: 1rem;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.app-shell > * {
+  pointer-events: auto;
+}
+
+.sidebar-left {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 290px;
+  flex-shrink: 0;
+  max-height: 100%;
   position: relative;
   z-index: 1;
 }
 
 .hero {
-  margin-bottom: 0.4rem;
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  background: rgba(255, 251, 243, 0.88);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 0.55rem 1rem;
+  box-shadow: 0 8px 24px rgba(54, 39, 12, 0.18);
   animation: rise 420ms ease-out both;
 }
 
 .hero-title-row {
   display: flex;
   align-items: baseline;
-  gap: 0.75rem;
+  gap: 0.6rem;
 }
 
 .kicker {
   margin: 0;
   text-transform: uppercase;
   letter-spacing: 0.17em;
-  font-size: 0.76rem;
+  font-size: 0.7rem;
   color: var(--accent-dark);
   white-space: nowrap;
 }
@@ -80,23 +98,20 @@ h1 {
 
 .hero-title-row h1 {
   margin-top: 0;
+  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
 }
 
 .subtitle {
-  max-width: 60ch;
-  color: var(--ink-soft);
-  margin: 0.25rem 0 0;
-  font-size: 0.81rem;
+  display: none;
 }
 
 .panel {
-  background: var(--card);
+  background: rgba(255, 251, 243, 0.88);
   border: 1px solid var(--line);
   border-radius: 16px;
-  box-shadow: var(--shadow);
-  padding: 1rem;
-  margin-top: 1rem;
-  backdrop-filter: blur(4px);
+  box-shadow: 0 8px 28px rgba(54, 39, 12, 0.18);
+  padding: 0.85rem 1rem;
+  backdrop-filter: blur(10px);
   animation: rise 520ms ease-out both;
 }
 
@@ -112,19 +127,6 @@ h1 {
   margin-bottom: 0.65rem;
 }
 
-.map-title-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.2rem;
-}
-
-.map-actions {
-  display: flex;
-  gap: 0.45rem;
-  align-items: center;
-}
-
 .arrivals-head-actions {
   display: flex;
   align-items: center;
@@ -229,8 +231,8 @@ button:hover {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  gap: 0.7rem;
-  margin-bottom: 0.7rem;
+  gap: 0.6rem;
+  margin-bottom: 0.4rem;
 }
 
 .location-head .hint {
@@ -238,25 +240,20 @@ button:hover {
   flex: 1;
 }
 
-.map-panel {
-  width: 100%;
-  height: 580px;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  overflow: hidden;
-  margin-bottom: 0.8rem;
-}
-
 .map-wrap {
-  position: relative;
-  margin-bottom: 0.8rem;
+  position: fixed;
+  inset: 0;
+  z-index: 0;
   isolation: isolate;
 }
 
-.map-wrap .map-panel {
-  margin-bottom: 0;
-  position: relative;
-  z-index: 1;
+.map-panel {
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
 }
 
 .selected-stop-marker {
@@ -264,18 +261,19 @@ button:hover {
 }
 
 .map-arrivals-overlay {
+  display: none;
   position: absolute;
-  right: 0.7rem;
-  bottom: 0.7rem;
-  z-index: 900;
-  width: min(320px, calc(100% - 1.4rem));
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 3;
+  width: min(300px, calc(100% - 2rem));
   padding: 0.62rem 0.72rem;
-  background: rgba(31, 26, 19, 0.84);
+  background: rgba(31, 26, 19, 0.82);
   color: #f8edd5;
-  border: 1px solid rgba(251, 219, 180, 0.35);
+  border: 1px solid rgba(251, 219, 180, 0.3);
   border-radius: 12px;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 10px 20px rgba(17, 13, 9, 0.25);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 10px 24px rgba(17, 13, 9, 0.3);
 }
 
 .map-arrivals-overlay h3 {
@@ -350,8 +348,25 @@ button:hover {
 
 .stop-meta {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.7rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.stop-meta.compact {
+  gap: 0.4rem;
+}
+
+.stop-meta.compact .meta-item {
+  padding: 0.3rem 0.45rem;
+  border-radius: 10px;
+}
+
+.stop-meta.compact .meta-item strong {
+  font-size: 0.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
 }
 
 .meta-item {
@@ -363,41 +378,94 @@ button:hover {
 
 .meta-label {
   display: block;
-  font-size: 0.75rem;
+  font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: #846950;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.1rem;
 }
 
-.nearby-stops {
-  margin-top: 0.85rem;
+/* --- Nearby panel (separate, hideable) --- */
+
+.nearby-panel {
+  margin: 0;
+  padding: 0.65rem 0.75rem;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.nearby-panel.collapsed {
+  opacity: 0;
+  transform: translateY(-8px);
+  pointer-events: none;
+}
+
+.nearby-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.nearby-header .meta-label {
+  margin-bottom: 0;
+}
+
+.toggle-btn {
+  background: transparent;
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.2rem 0.5rem;
+  border-radius: 8px;
+  min-height: 0;
+  border: 1px solid transparent;
+}
+
+.toggle-btn:hover {
+  border-color: var(--line);
+  background: rgba(210, 95, 31, 0.06);
+}
+
+.nearby-panel::-webkit-scrollbar {
+  width: 4px;
+}
+
+.nearby-panel::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 999px;
 }
 
 .nearby-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.55rem;
+  gap: 0.4rem;
 }
 
 .stop-choice {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 0.6rem;
+  gap: 0.5rem;
   text-align: left;
   width: 100%;
   border: 1px solid #d7c3a6;
   background: #fff8ea;
   color: #3f3325;
-  padding: 0.62rem 0.72rem;
-  min-height: 48px;
+  padding: 0.48rem 0.6rem;
+  min-height: 40px;
+  font-size: 0.82rem;
 }
 
 .stop-choice small {
   color: #846950;
   font-weight: 600;
   white-space: nowrap;
+  font-size: 0.75rem;
 }
 
 .stop-choice.active {
@@ -513,81 +581,103 @@ button:hover {
 }
 
 @media (max-width: 760px) {
-  body {
-    padding-bottom: 12.2rem;
+  .app-shell {
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 0.4rem;
   }
 
-  .app-shell {
-    width: min(1100px, calc(100% - 1rem));
-    margin-top: 0.3rem;
-    margin-bottom: 1.2rem;
+  .sidebar-left {
+    width: auto;
+    flex: none;
+    max-height: none;
+    gap: 0.35rem;
   }
 
   .hero {
-    margin-bottom: 0.1rem;
+    padding: 0.35rem 0.65rem;
+    border-radius: 12px;
+    gap: 0;
+  }
+
+  .hero h1 {
+    font-size: clamp(0.95rem, 4.5vw, 1.25rem);
   }
 
   .kicker {
-    font-size: 0.66rem;
-    letter-spacing: 0.13em;
-  }
-
-  h1 {
-    font-size: clamp(1.3rem, 5.0vw, 1.75rem);
-    margin-top: 0;
+    font-size: 0.55rem;
   }
 
   .hero-title-row {
-    gap: 0.45rem;
+    gap: 0.35rem;
   }
 
-  .subtitle {
-    display: none;
+  .controls-panel {
+    padding: 0.35rem 0.5rem;
   }
 
-  .stop-meta,
-  .arrivals-actions,
-  .nearby-list {
-    grid-template-columns: 1fr;
-  }
-
-  .panel-header {
-    flex-wrap: wrap;
-  }
-
-  .map-actions {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .map-title-row .map-actions {
-    width: auto;
-    display: flex;
-    grid-template-columns: none;
+  .controls-panel .panel-header.compact {
+    margin-bottom: 0.15rem;
   }
 
   .location-head {
     flex-direction: row;
-    align-items: flex-start;
-    gap: 0.55rem;
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.2rem;
   }
 
-  .map-panel {
-    height: clamp(320px, 66dvh, 580px);
+  .location-head .hint {
+    font-size: 0.72rem;
+  }
+
+  .stop-meta.compact {
+    gap: 0.25rem;
+  }
+
+  .stop-meta.compact .meta-item {
+    padding: 0.15rem 0.3rem;
+    border-radius: 8px;
+  }
+
+  .stop-meta.compact .meta-label {
+    font-size: 0.58rem;
+    margin-bottom: 0;
+  }
+
+  .stop-meta.compact .meta-item strong {
+    font-size: 0.72rem;
+  }
+
+  .stop-meta,
+  .arrivals-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .nearby-panel {
+    display: none;
+  }
+
+  .nearby-list {
+    grid-template-columns: 1fr;
+    gap: 0.3rem;
   }
 
   .map-arrivals-overlay {
+    display: block;
     right: 0.5rem;
     left: 0.5rem;
     width: auto;
-    bottom: 0.5rem;
-    padding: 0.48rem 0.58rem;
+    bottom: 4.8rem;
+    padding: 0.42rem 0.52rem;
+  }
+
+  .leaflet-control-zoom {
+    display: none;
   }
 
   .panel {
     padding: 0.68rem;
-    margin-top: 0.58rem;
     border-radius: 14px;
   }
 
@@ -601,17 +691,17 @@ button:hover {
   .map-overlay-empty,
   .map-arrivals-list li,
   .map-overlay-fallback-list li {
-    font-size: 0.74rem;
+    font-size: 0.72rem;
   }
 
   .meta-item {
-    padding: 0.5rem 0.58rem;
+    padding: 0.4rem 0.5rem;
   }
 
   .stop-choice {
-    min-height: 42px;
-    padding: 0.5rem 0.58rem;
-    font-size: 0.83rem;
+    min-height: 38px;
+    padding: 0.4rem 0.5rem;
+    font-size: 0.78rem;
   }
 
   .arrivals-actions {
@@ -646,6 +736,7 @@ button:hover {
   }
 
   .arrivals-panel {
+    display: none;
     position: fixed;
     left: 0.5rem;
     right: 0.5rem;
@@ -738,3 +829,38 @@ button:hover {
     font-size: 0.86rem;
   }
 }
+
+.controls-panel {
+  margin: 0;
+  padding: 0.65rem 0.75rem;
+}
+
+.controls-panel .panel-header.compact {
+  margin-bottom: 0.35rem;
+}
+
+.arrivals-panel {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  bottom: 1rem;
+  width: 350px;
+  overflow-y: auto;
+  margin: 0;
+  overscroll-behavior: contain;
+}
+
+.arrivals-panel::-webkit-scrollbar {
+  width: 5px;
+}
+
+.arrivals-panel::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 999px;
+}
+
+.map-hint {
+  margin: 0 0 0.55rem;
+  color: var(--ink-soft);
+  font-size: 0.86rem;
+}

src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { onDestroy, onMount } from "svelte";
 
   const RAW_API_BASE = import.meta.env.VITE_API_BASE ?? "";
+  const ARRIVAL_REFRESH_MS = 30000;
 
   function resolveApiBase() {
     const base = RAW_API_BASE.trim().replace(/\/+$/, "");
@@ -29,6 +30,7 @@
   let locating = false;
   let loadingArrivals = false;
   let mobileSheetOpen = false;
+  let stopsVisible = true;
 
   let userLocation = null;
   let selectedStop = null;
@@ -44,6 +46,7 @@
   let linkLine;
   let nearbyStopMarkers = [];
   let isMapClickPicking = false;
+  let arrivalRefreshTimer;
 
   $: mapArrivals =
     selectedStop && arrivalsStopCode === selectedStop.code
@@ -247,10 +250,12 @@
 
     if (!map) {
       map = leaflet.map(mapContainer, {
-        zoomControl: true,
+        zoomControl: false,
         scrollWheelZoom: true
       });
 
+      leaflet.control.zoom({ position: "bottomleft" }).addTo(map);
+
       map.on("click", async (event) => {
         if (isMapClickPicking) {
           return;
@@ -370,7 +375,13 @@
     }
 
     responseText = JSON.stringify(payload, null, 2);
-    services = Array.isArray(payload?.Services) ? payload.Services.slice(0, 12) : [];
+    services = Array.isArray(payload?.Services)
+      ? payload.Services.slice(0, 12).sort((a, b) => {
+          const aTime = new Date(a?.NextBus?.EstimatedArrival).getTime();
+          const bTime = new Date(b?.NextBus?.EstimatedArrival).getTime();
+          return (isNaN(aTime) ? Infinity : aTime) - (isNaN(bTime) ? Infinity : bTime);
+        })
+      : [];
 
     if (!response.ok) {
       throw new Error(`Arrival request failed (${response.status})`);
@@ -409,9 +420,17 @@
     }
   }
 
+  async function refreshArrivalsIfReady() {
+    if (!selectedStop || loadingArrivals || locating) {
+      return;
+    }
+
+    await runArrival();
+  }
+
   async function selectBusStop(stop, loadArrivals = false) {
     selectedStop = stop;
-    locationMessage = `Selected stop: ${stop.description} (${stop.code})`;
+    locationMessage = `Selected stop: <strong>${escapeHtml(stop.description)}</strong> (${stop.code})`;
     await updateMap();
     if (loadArrivals) {
       await runArrival();
@@ -425,7 +444,7 @@
       throw new Error("No nearby bus stop found.");
     }
 
-    locationMessage = `Nearest stop found: ${selectedStop.description} (${selectedStop.code}). Tap another stop in the list or map.`;
+    locationMessage = `Nearest stop found: <strong>${escapeHtml(selectedStop.description)}</strong> (${selectedStop.code}). Tap another stop in the list or map.`;
     await updateMap();
     setStatus("Location Ready", "ok");
 
@@ -456,11 +475,17 @@
   }
 
   onMount(async () => {
+    arrivalRefreshTimer = setInterval(() => {
+      refreshArrivalsIfReady();
+    }, ARRIVAL_REFRESH_MS);
+
     await updateMap();
     await resolveLocationAndNearestStop();
   });
 
   onDestroy(() => {
+    clearInterval(arrivalRefreshTimer);
+
     if (map) {
       map.remove();
       map = null;
@@ -478,123 +503,133 @@
   />
 </svelte:head>
 
-<div class="bg-grid"></div>
+<div class="map-wrap">
+  <div class="map-panel" bind:this={mapContainer}></div>
+</div>
+
 <main class="app-shell">
-  <header class="hero">
-    <div class="hero-title-row">
-      <h1>Nearby Bus Arrivals</h1>
-      <p class="kicker">Singapore Transit</p>
-    </div>
-    <p class="subtitle">Map-first view using your location and taps to find nearby stops and live arrivals.</p>
-  </header>
-
-  <section class="panel">
-    <div class="panel-header compact">
-      <div>
-        <div class="location-head">
-          <button
-            class="btn-ghost icon-btn"
-            type="button"
-            aria-label={locating ? "Resolving current location" : "Use current location"}
-            title={locating ? "Locating" : "Use Current Location"}
-            on:click={() => resolveLocationAndNearestStop()}
-            disabled={locating}
-          >
-            {#if locating}
-              <svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-                <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
-                <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-              </svg>
-            {:else}
-              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-                <circle cx="12" cy="12" r="2" fill="currentColor" />
-                <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
-                <path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
-              </svg>
-            {/if}
-            <span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
-          </button>
-          <p class="hint">{locationMessage}</p>
-        </div>
+  <div class="sidebar-left">
+    <header class="hero">
+      <div class="hero-title-row">
+        <h1>Nearby Bus Arrivals</h1>
+        <p class="kicker">Singapore Transit</p>
       </div>
-    </div>
+      <p class="subtitle">Map-first view using your location and taps to find nearby stops and live arrivals.</p>
+    </header>
 
-    <div class="map-wrap">
-      <div class="map-panel" bind:this={mapContainer}></div>
-
-      <aside class="map-arrivals-overlay" aria-live="polite">
-        <h3>Arrivals</h3>
-        <p class="map-overlay-stop">
-          {#if selectedStop}
-            {selectedStop.code} - {selectedStop.description}
-          {:else}
-            No stop selected
-          {/if}
-        </p>
-
-        {#if loadingArrivals}
-          <p class="map-overlay-empty">Loading arrivals...</p>
-        {:else if mapArrivals.length > 0}
-          <ul class="map-arrivals-list">
-            {#each mapArrivals as item}
-              <li>
-                <strong>{item.serviceNo}</strong>
-                <span>{item.next}</span>
-                <small>Then {item.following}</small>
-              </li>
-            {/each}
-          </ul>
-        {:else if overlayNearbyStops.length > 0}
-          <p class="map-overlay-empty">Nearby stops</p>
-          <ul class="map-overlay-fallback-list">
-            {#each overlayNearbyStops as stop}
-              <li>
-                <strong>{stop.code}</strong>
-                <span>{formatDistance(stop.distanceMeters)}</span>
-              </li>
-            {/each}
-          </ul>
-        {:else}
-          <p class="map-overlay-empty">Waiting for location to load stops...</p>
-        {/if}
-      </aside>
-    </div>
-
-    <div class="stop-meta">
-      <div class="meta-item">
-        <span class="meta-label">Selected stop</span>
-        <strong>{selectedStop ? `${selectedStop.code} - ${selectedStop.description}` : "Not resolved"}</strong>
-      </div>
-      <div class="meta-item">
-        <span class="meta-label">Road</span>
-        <strong>{selectedStop?.roadName || "-"}</strong>
-      </div>
-      <div class="meta-item">
-        <span class="meta-label">Distance</span>
-        <strong>{selectedStop ? formatDistance(selectedStop.distanceMeters) : "-"}</strong>
-      </div>
-    </div>
-
-    <div class="nearby-stops">
-      <p class="meta-label">Nearby stops</p>
-      {#if nearbyStops.length > 0}
-        <div class="nearby-list">
-          {#each nearbyStops as stop}
+    <section class="panel controls-panel">
+      <div class="panel-header compact">
+        <div>
+          <div class="location-head">
             <button
-              class={`stop-choice ${selectedStop?.code === stop.code ? "active" : ""}`}
+              class="btn-ghost icon-btn"
               type="button"
-              on:click={() => selectBusStop(stop, true)}
+              aria-label={locating ? "Resolving current location" : "Use current location"}
+              title={locating ? "Locating" : "Use Current Location"}
+              on:click={() => resolveLocationAndNearestStop()}
+              disabled={locating}
             >
-              <span>{stop.code} - {stop.description}</span>
-              <small>{formatDistance(stop.distanceMeters)}</small>
+              {#if locating}
+                <svg class="spin" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" />
+                  <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+                </svg>
+              {:else}
+                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+                  <circle cx="12" cy="12" r="2" fill="currentColor" />
+                  <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" stroke-width="1.8" />
+                  <path d="M12 2v3m0 14v3M2 12h3m14 0h3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+                </svg>
+              {/if}
+              <span class="visually-hidden">{locating ? "Locating..." : "Use Current Location"}</span>
             </button>
-          {/each}
+            <p class="hint">{@html locationMessage}</p>
+          </div>
         </div>
-      {:else}
-        <p class="hint">No nearby stops loaded yet.</p>
+      </div>
+
+      <div class="stop-meta compact">
+        <div class="meta-item">
+          <span class="meta-label">Road</span>
+          <strong>{selectedStop?.roadName || "-"}</strong>
+        </div>
+        <div class="meta-item">
+          <span class="meta-label">Dist</span>
+          <strong>{selectedStop ? formatDistance(selectedStop.distanceMeters) : "-"}</strong>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel nearby-panel" class:collapsed={!stopsVisible} aria-hidden={!stopsVisible}>
+      <div class="nearby-header">
+        <p class="meta-label">Nearby stops</p>
+        <button
+          class="toggle-btn"
+          type="button"
+          aria-label={stopsVisible ? "Hide nearby stops" : "Show nearby stops"}
+          on:click={() => (stopsVisible = !stopsVisible)}
+        >
+          {stopsVisible ? "Hide" : "Show"}
+        </button>
+      </div>
+
+      {#if stopsVisible}
+        {#if nearbyStops.length > 0}
+          <div class="nearby-list">
+            {#each nearbyStops as stop}
+              <button
+                class={`stop-choice ${selectedStop?.code === stop.code ? "active" : ""}`}
+                type="button"
+                on:click={() => selectBusStop(stop, true)}
+              >
+                <span>{stop.code} - {stop.description}</span>
+                <small>{formatDistance(stop.distanceMeters)}</small>
+              </button>
+            {/each}
+          </div>
+        {:else}
+          <p class="hint">No nearby stops loaded yet.</p>
+        {/if}
       {/if}
-    </div>
-  </section>
+    </section>
+  </div>
+
+  <aside class="map-arrivals-overlay" aria-live="polite">
+    <h3>Arrivals</h3>
+    <p class="map-overlay-stop">
+      {#if selectedStop}
+        {selectedStop.code} - {selectedStop.description}
+      {:else}
+        No stop selected
+      {/if}
+    </p>
+
+    {#if loadingArrivals}
+      <p class="map-overlay-empty">Loading arrivals...</p>
+    {:else if mapArrivals.length > 0}
+      <ul class="map-arrivals-list">
+        {#each mapArrivals as item}
+          <li>
+            <strong>{item.serviceNo}</strong>
+            <span>{item.next}</span>
+            <small>Then {item.following}</small>
+          </li>
+        {/each}
+      </ul>
+    {:else if overlayNearbyStops.length > 0}
+      <p class="map-overlay-empty">Nearby stops</p>
+      <ul class="map-overlay-fallback-list">
+        {#each overlayNearbyStops as stop}
+          <li>
+            <strong>{stop.code}</strong>
+            <span>{formatDistance(stop.distanceMeters)}</span>
+          </li>
+        {/each}
+      </ul>
+    {:else}
+      <p class="map-overlay-empty">Waiting for location to load stops...</p>
+    {/if}
+  </aside>
 
   <section class="panel arrivals-panel" class:sheet-collapsed={!mobileSheetOpen}>
     <button