From 54797f0a75c82849f62cdf24d31a28e0db449ec1 Mon Sep 17 00:00:00 2001
From: Krzysztof Liszankowski <39725441+Torgh@users.noreply.github.com>
Date: Sat, 24 Oct 2026 11:49:48 +0200
Subject: [PATCH 1/2] Phone app: the "Add a trip" slot at the end of a trip
 list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dashed slot from the empty list now also ends a list with trips:
"Add a trip – import a .tripdeck.json you exported on your PC" opens the
import, keeping the trip tiles' width. It replaces the Import trip file
button; Load demo trip stays below.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 mobile/src/TripList.tsx | 17 ++++++++++++++---
 mobile/src/app.css      |  6 ++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/mobile/src/TripList.tsx b/mobile/src/TripList.tsx
index 057683c..9a64940 100644
--- a/mobile/src/TripList.tsx
+++ b/mobile/src/TripList.tsx
@@ -97,10 +97,21 @@ export function TripList({ trips, now, onOpen, onImport, onDemo, onDelete }: Pro
 
         {sorted.length > 0 && (
           <>
-            <div className="actions">
-              <button className="btn primary" onClick={onImport}>
-                📥 Import trip file
+            {/* The next trip's slot at the end of the deck, as on an empty list. */}
+            <div className="trip-row">
+              <button className="first-slot next-slot" onClick={onImport}>
+                <span className="first-plus" aria-hidden>
+                  +
+                </span>
+                <span className="trip-text">
+                  <span className="trip-name">Add a trip</span>
+                  <span className="muted small">
+                    Import a <code>.tripdeck.json</code> you exported on your PC
+                  </span>
+                </span>
               </button>
+            </div>
+            <div className="actions">
               <button className="btn" onClick={onDemo}>
                 🏝️ Load demo trip
               </button>
diff --git a/mobile/src/app.css b/mobile/src/app.css
index 5d58c60..7f67ad4 100644
--- a/mobile/src/app.css
+++ b/mobile/src/app.css
@@ -238,6 +238,12 @@ p {
   background: transparent;
   text-align: left;
 }
+/* At the end of a list, the slot keeps the trip tiles' width (they have a bin beside them). */
+.next-slot {
+  flex: 1;
+  min-width: 0;
+  margin-right: 48px;
+}
 .first-plus {
   flex: none;
   display: grid;

From 708f2fdc4ce527f3b0db6458182679583b489417 Mon Sep 17 00:00:00 2001
From: Krzysztof Liszankowski <39725441+Torgh@users.noreply.github.com>
Date: Sat, 24 Oct 2026 11:56:09 +0200
Subject: [PATCH 2/2] Phone app: the demo as a trip tile at the end of a trip
 list too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Under the "Add a trip" slot, a list with trips now ends with the same
demo tile an empty list shows (the logo miniature, "Demo · 7 days ·
dives, ferries, a rental car", Try ›) instead of the Load demo trip
button, at the trip tiles' width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 mobile/src/TripList.tsx | 30 +++++++++++++++---------------
 mobile/src/app.css      | 12 +++++-------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/mobile/src/TripList.tsx b/mobile/src/TripList.tsx
index 9a64940..c0e1167 100644
--- a/mobile/src/TripList.tsx
+++ b/mobile/src/TripList.tsx
@@ -17,6 +17,19 @@ export function TripList({ trips, now, onOpen, onImport, onDemo, onDelete }: Pro
   const sorted = sortTrips(trips, now);
   const next = nextTripId(trips, now);
   const demo = useMemo(() => demoTrip(), []);
+  // The demo as a trip tile, on an empty list and at the end of a full one.
+  const demoTile = (
+    <div className="trip-deck">
+      <button className="trip-card" onClick={onDemo}>
+        <img src="./trip-thumb.svg" alt="" className="trip-thumb" />
+        <span className="trip-text">
+          <span className="trip-name">{demo.name}</span>
+          <span className="muted small">Demo · {demo.days.length} days · dives, ferries, a rental car</span>
+        </span>
+        <span className="try">Try ›</span>
+      </button>
+    </div>
+  );
 
   return (
     <div className="screen">
@@ -41,16 +54,7 @@ export function TripList({ trips, now, onOpen, onImport, onDemo, onDelete }: Pro
               </span>
             </button>
             <p className="muted small first-or">Or look around first</p>
-            <div className="trip-deck">
-              <button className="trip-card" onClick={onDemo}>
-                <img src="./trip-thumb.svg" alt="" className="trip-thumb" />
-                <span className="trip-text">
-                  <span className="trip-name">{demo.name}</span>
-                  <span className="muted small">Demo · {demo.days.length} days · dives, ferries, a rental car</span>
-                </span>
-                <span className="try">Try ›</span>
-              </button>
-            </div>
+            {demoTile}
             <p className="first-how muted small">
               <b>How to bring a trip:</b> on your PC choose Export → JSON in a trip, then save the file to OneDrive,
               Google Drive or Downloads, or email it to yourself.
@@ -111,11 +115,7 @@ export function TripList({ trips, now, onOpen, onImport, onDemo, onDelete }: Pro
                 </span>
               </button>
             </div>
-            <div className="actions">
-              <button className="btn" onClick={onDemo}>
-                🏝️ Load demo trip
-              </button>
-            </div>
+            <div className="trip-row next-slot-row">{demoTile}</div>
             <p className="muted small center">Importing a newer export of the same trip replaces it.</p>
           </>
         )}
diff --git a/mobile/src/app.css b/mobile/src/app.css
index 7f67ad4..679d1b1 100644
--- a/mobile/src/app.css
+++ b/mobile/src/app.css
@@ -239,11 +239,15 @@ p {
   text-align: left;
 }
 /* At the end of a list, the slot keeps the trip tiles' width (they have a bin beside them). */
-.next-slot {
+.next-slot,
+.next-slot-row > .trip-deck {
   flex: 1;
   min-width: 0;
   margin-right: 48px;
 }
+.next-slot-row {
+  margin-top: 4px;
+}
 .first-plus {
   flex: none;
   display: grid;
@@ -370,12 +374,6 @@ p {
   color: var(--muted);
 }
 
-.actions {
-  display: grid;
-  gap: 10px;
-  margin: 20px 0 12px;
-}
-
 /* ---------- Day strip ---------- */
 
 .day-strip {