Skip to content

M1 — Day plan (Visitacity pattern)

Status: agreed · Last session: 2026-09-27

Sources: requirements.md M1, M11, M13, M14 · decisions.md P17, P34, P35, A13 · prototype review 27 Sep (founder's screenshot of the Annapurna Circuit trip, web width).

Who and the job

  • Traveller (group member, view-only): "What are we doing today, when, and where do I need to be?"
  • Group leader (view-only, shares the link): "Does this plan look right and exciting enough to send to my group?"
  • NepWalk team (edits): "Shape each day quickly — add, move, fix stops — and see gaps before the leader does."

Value

This screen is the product: it is what the leader forwards and what travellers open every morning. If it is cramped, repeated or empty-looking, NepWalk looks like a spreadsheet, not a trip. It is also the demo that makes mentors and vendors understand NepWalk.

Placement — and why

Element Mobile Tablet / web Why
Day navigation Top tabs "Day 1 · Wed 1 Apr", scroll sideways Left list only: "Day 1 · Kathmandu to Besisahar · Wed 1 Apr". No top tabs One way to move between days per screen size. The 27 Sep review found tabs and list repeating the same thing on web
Day title + date Under the tabs Top of the main column Says where you are
Stop cards Full width, photo on top Main column, photo left, text right (row card) More stops visible at once on wide screens; photo-on-top works on a narrow phone
Day map (M13) Collapsed "Map" button above the cards Right column, numbered pins + tonight's hotel Fills the empty space with something useful — the Visitacity pattern
Travel between stops Slim line between cards Same "How do I get to the next place, how long"
Tonight's stay (P17) One line under the day title, tap for the hotel card Same Travellers learn the day's base first (changed 28 Sep; was last card)
Previous / next day Swipe sideways Arrow buttons on the edges of the main column The old pagination footer took a whole row for little value
Add a stop (editor only) Floating "+" → bottom sheet "+ Add stop" button in the day header → right drawer Never covers content on web; thumb reach on phones (28 Sep)
Edit / delete / drag (team only) On the card, behind "…" On hover Leaders and travellers see a calm plan, not controls

Wireframe

Mobile

┌──────────────────────────────┐
│ ← Annapurna Circuit    Share │
├──────────────────────────────┤
│[Day 1][Day 2][Day 3][Day 4]→ │  tabs scroll sideways
│ Wed 1 Apr                    │
├──────────────────────────────┤
│ Kathmandu to Besisahar       │
│ [ Map ▾ ]                    │  opens the day map
│ ┌──────────────────────────┐ │
│ │        PHOTO             │ │
│ │  (credit, small)         │ │
│ ├──────────────────────────┤ │
│ │ 06:00 · 4 h          …   │ │  "…" = team only
│ │ Drive from Kathmandu     │ │
│ │ Private jeep, Prithvi Hwy│ │  story, 3 lines max
│ │ 💡 Leave before 6 — traffic│ │  one tip
│ └──────────────────────────┘ │
│   🚗 4 h · Besisahar         │  travel line
│ ┌──────────────────────────┐ │
│ │ PHOTO … next stop        │ │
│ └──────────────────────────┘ │
│ 🌙 Tonight: Hotel X, Besisahar│
│                         (+)  │  floating add, team only
└──────────────────────────────┘
   ← swipe → for other days

Web / tablet

┌────────────────────────────────────────────────────────────────────────────┐
│ ← Dashboard  Annapurna Circuit Trek  ● Published        Services  Share  👤 │
├──────────────────────┬───────────────────────────────┬─────────────────────┤
│ DAYS                 │ ‹  Day 1 · Wed 1 Apr 2026  ›   │                     │
│ ▌1 Kathmandu to      │    Kathmandu to Besisahar ✎    │     DAY MAP         │
│    Besisahar · Wed 1 │                                │   ① ② ③  🏨         │
│  2 Besisahar to      │ ┌────────┬──────────────────┐ │   numbered pins,    │
│    Chame · Thu 2     │ │ PHOTO  │ 06:00 · 4 h    … │ │   tonight's hotel   │
│  3 Chame to Lower    │ │        │ Drive from KTM   │ │                     │
│    Pisang · Fri 3    │ │        │ story, 2 lines   │ │  [Open in Google    │
│  …                   │ │        │ 💡 tip           │ │   Maps]             │
│ 12 Pokhara to        │ └────────┴──────────────────┘ │                     │
│    Kathmandu · Sun 12│   🚗 4 h                       │                     │
│                      │ ┌────────┬──────────────────┐ │                     │
│ TRIP                 │ │ PHOTO  │ 11:00 · 1 h      │ │                     │
│ 12 days · 62 stops   │ │        │ …                │ │                     │
│ ⚙ Trip settings      │ └────────┴──────────────────┘ │                     │
│                      │ 🌙 Tonight: Hotel X, Besisahar │                (+)  │
└──────────────────────┴───────────────────────────────┴─────────────────────┘

Tablet: the map column drops below the cards (or behind a "Map" button) when the width is too small for three columns.

States

  • No photo: same-height placeholder with a type icon (built 27 Sep). A stop not linked to a library place never has a photo — see TBD 1.
  • No stops on a day: "Nothing planned yet" + (team) "Add a stop"; (leader / traveller) "Free day".
  • No hotel tonight: (team) "+ Add hotel"; (leader / traveller) nothing — the team warning is not theirs.
  • Stops without coordinates: no travel line, no map pin; never a made-up time.
  • Long day (10+ stops): cards stay compact on web (row cards); no inner scroll inside the main column.
  • Loading: grey card skeletons, same sizes. Error: "Couldn't load this day" + Retry.

Rules and edge cases

  • Travel times: src/lib/travel-time.ts (27 Sep) — formula for short hops, Nepal table for long hops, no time for unknown flights.
  • Tonight's stay: the STAY item covering that night (nights.ts); last day shows none (P17).
  • Meals and activities are suggestions, not bookings (P34): shown as stops, no vendor on them.
  • Leader and traveller never see edit controls, helper warnings or booking detail (M5, P28).

Decided

  • Day navigation: top tabs on mobile only; left list on tablet / web.
  • Web day list: "Day N · title · date", with "Night: " small underneath (27 Sep).
  • Previous / next: swipe on mobile, edge arrows on web; the pagination footer goes.
  • Add a stop: floating "+" opening a drawer (web) or bottom sheet (mobile), team only.
  • Web cards: photo left, text right. Mobile cards: photo on top.
  • Stop photos: the team links a stop to a library place from the edit form (photo, credit, story, tip and coordinates come with it); an unlinked stop shows the placeholder (27 Sep).
  • Map column: cards use the full main area until M13 is built; the map column arrives with M13 (27 Sep).
  • Stop notes are for travellers (28 Sep): everyone on the trip sees them; only the editor writes them for now (P36). The form label changes from "Private notes for trip leaders" to "Notes for travellers — everyone on this trip sees them".
  • "+ Add hotel" presets the type "Stay" in the add form (28 Sep).
  • Travel line mode (28 Sep): the line after a transport item uses that item's mode (after a flight, ✈).
  • Tonight's stay sits at the top of the day (28 Sep, replaces "last"): one line under the day title — "🌙 Tonight: Hotel Barahi · Pokhara" — that opens the hotel card when tapped. Travellers learn the day's base first (luggage, where to go back). The editor sees "+ Add hotel for tonight" there when a night has none; others see nothing.
  • Add a stop (28 Sep, replaces the floating "+" everywhere): tablet / web has an "+ Add stop" button in the day header, where it never covers content; phones keep the floating "+" (thumb reach). Both open the same drawer / sheet.
  • Only places are photo cards (28 Sep): a PLACE item, or any item linked to a library place, is a card with photo. Meals, free time and other activities are a compact row — no photo block, warm background, type icon by the time — so the day's sights stand out.
  • Travel line is clearly visible (28 Sep): a readable pill ("🚗 10 min") with space above and below, not small grey text. Tapping it will later show where the vehicle comes from (backlog).
  • Layout (28 Sep): the day body sits in the same centred container as the day header; more space between items.
  • Transport stops (drive, flight, transfer): shown as a travel line between cards ("🚗 4 h · Kathmandu → Besisahar"), not as full cards (27 Sep).

TBD

  • None open.

Backlog (after launch)

  • Weather per day; sunrise / sunset.
  • Offline copy of the day on the phone (PWA, M6).
  • Undo after delete (M14 says "remove with undo"; today it is a confirm dialog).
  • Reorder by drag on mobile.
  • Tap a travel line or vehicle to see where the vehicle comes from and its driver (needs vendor / slot data, M15).

Tasks

Agreed 27 Sep; in tasks.md → Build day 11 (M1 revision).

  1. Web / tablet: remove the top day tabs; left list shows "Day N · title · date" + "Night: ". Mobile keeps the tabs.
  2. Remove the pagination footer; add edge arrows (web) and swipe (mobile).
  3. Web row card (photo left, text right); keep mobile photo-on-top; cards use the full main width.
  4. Transport items (FLIGHT, VEHICLE, TRANSFER) render as travel lines, not cards.
  5. Floating "+" → right drawer (web) / bottom sheet (mobile); remove the "Add new activity" bar.
  6. Edit form: link a stop to a library place (search by name / alias); linked stops show its photo, credit, story, tip.
  7. Hide edit / delete / drag and helper warnings for leader and traveller views.
  8. Empty-day, loading and error states.