Phone app: "Add a trip" slot and demo tile at the end of a trip list

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.
@@ -97,14 +101,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
-              </button>
-              <button className="btn" onClick={onDemo}>
-                🏝️ Load demo trip
+            {/* 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="trip-row next-slot-row">{demoTile}</div>
             <p className="muted small center">Importing a newer export of the same trip replaces it.</p>
           </>
         )}

mobile/src/app.css

@@ -238,6 +238,16 @@ 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,
+.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;
@@ -364,12 +374,6 @@ p {
   color: var(--muted);
 }
 
-.actions {
-  display: grid;
-  gap: 10px;
-  margin: 20px 0 12px;
-}
-
 /* ---------- Day strip ---------- */
 
 .day-strip {