Hanh’s Log

One app for trip planning (Wanderlog) and eateries (Savorlog), sharing one login and one database (its own Supabase project; the old Wanderlog site and database are separate and untouched). Live at https://hellohanh.github.io/hanhs-log/

Current state (Session 11, OCT 15 2026)

What’s built

• Phones (screens 760 px or narrower; monitor and laptop unchanged): a slim header with a ☰ menu; on a trip, one title bar, map buttons for Map look, My location and Day route, and Places / Itinerary as sheets that slide up from the bottom. The itinerary opens on today during the trip; tap a time block to edit its times; the back gesture steps back one layer. Day route fades the other pins as on the computer (E90, E91). Still to come: add/edit forms, the splash and Savorlog on phones.
• Savorlog City/Country field: above the eatery search, type a city or country and pick it; the map fits that place and the catalogue shows it (E92).
• Nom-Nom is an ordinary A–Z category in a trip’s Places list (E89).
• Splash (/):
  • Hanh’s watercolor hero (Amalfi, phở, Eiffel Tower, bánh mì) in a 1080 × 800 container; its edge fades into the page’s paper colour.
  • Scrolling flies Hanh’s red paper plane (no shadow, paper-plane-v2.webp) along the route Hanh mapped; late in the flight it turns into the jet.
  • At the end the jet settles in the sky by the Eiffel Tower, and the search panel, Where to? section, and Wanderlog and Savorlog cards fade in.
  • With reduced motion, the page shows the finished picture straight away.
• Wanderlog trip list (/wander): a clean slate in Hanh’s Log’s own database. Upcoming trips (soonest first) and past trips (faded), with cities · Country, dates, pin count (sorted pins only) and people, owned/shared labels; owner-only delete. New trip opens a popup: Trip name; Country (suggests as you type); Primary City (the map opens here), Secondary, Tertiary; dates optional; it shows “✓ Map opens on: …” before saving. Built for a 2560 × 1440 monitor first.
• Trip page (/wander/trip/): name, cities · Country and dates, people, Edit trip (same form), and Share & people (invite link, owner-only Reset link and Remove, first names).
• Trip map: opens on the Primary City’s centre at zoom 13, with the trip’s own pins drawn on it.
  • Map look: 11 looks. Defaults are Google standard (light) and Google dark (dark), remembered per mode on this device.
  • Pins / No pins: hides Google’s shop, restaurant and landmark pins and keeps transit pins (this is separate from the trip’s own pins).
  • Districts: the old Wanderlog’s coloured HCMC overlay; the chip shows whenever a district is in view.
  • Camera control: our own 3 × 4 control with tilt (10°), rotate (15°) and a reset button. Tilt works on Google’s own looks (and needs a Vector Map ID); it’s greyed out on hand-made looks and while pins are hidden.
• Places panel (left of the map): a Google search box adds a place; the add/edit card sets the category by hand (category › sub › sub-sub), each person’s WTG / VIS status (visited gets a verdict — revisit, 2nd chance, don’t go back — and an optional half-star rating), MICHELIN (mentioned / 1–3 stars + year, food and drink only) and Street food / Fine dining. The list groups pins by category (a category shows only when it has pins). Show all pins and a MICHELIN chip fade the map’s pins.
• Pins on the map: teardrops carrying the pin’s icon, colour and a status badge (orange WTG, or green ✓ / yellow – / red ✗ for visited); MICHELIN places are the red flower pin with a stars chip.
• Itinerary panel: on the map’s right edge (closed by default; 320 or 640 px, remembered): day tabs for the trip’s dates plus extra days, day notes, travel legs (flight, train, bus, own transport), activity blocks, and places scheduled onto the day as time blocks. A scheduled place can be a trip pin or a Savorlog eatery (M5): add one by dragging a Places or Nom-Nom row onto a day tab or timeline slot, the Add popup’s Place picker, a + on a list row, or (pins) the card’s Add to day. Day route draws the day’s route on the map across pins and eateries alike and fades the rest. Click a time to add; drag an item’s edges or middle to change its time.
• Savorlog (/savor): one shared eatery catalogue, filed cuisine-country → main dish, held by a single family circle and belonging to no trip. Opening it asks where first — a country (framed to its mainland) or a city (zoom 13); the catalogue tree and the map then show only that place’s eateries. A Google search-to-add opens the add/edit card: cuisine → dish, price $–$$$$, MICHELIN, Street food / Fine dining, your WTG/VIS + rating, a note, and up to 3 photos (uploads → a Google place photo → a “Photo coming soon” placeholder). Remove sends an eatery to a pending-deletion queue the owner confirms. A Family button shares a signed-in-family-only invite (/savor/join/) with owner-only reset/remove. The same eatery shows on any trip within 20 km of its cities (M5): a trip’s Places panel lists them under Nom-Nom (an A–Z category), the map draws them, picking the Nom-Nom category while adding a place on a trip opens this same add panel (saving to the catalogue, not a trip pin), and an eatery can be scheduled onto an itinerary day like a pin.
• Invite links (/wander/join/): signed-in people join straight away; others tap Join trip (no email) and are asked for a first name.
• City search (/search?city=…): one results page per city; trips and eateries fill in later.
• Sign in (/signin): email link through Hanh’s Log’s own Supabase project.
• Fonts: Segoe UI inside Wanderlog and Savorlog; Newsreader and Public Sans on the splash and header.
• Import old pins (/wander/import): a button on the trip list (Savorlog owner only) opens the import queue. Load Claude’s prepared file once (made from the Wanderlog export; kept out of the repo). Pick a city, the trip its non-food places go into, then each category in order; every place opens the real add card already filled in (English : Local name, category or dish, MICHELIN, badges, old note, WTG) with Save and next, Skip for good and ‹ Back. Progress is in the database, so it carries on from any device.
• Place names: every pin and eatery is English : Local (Japan: 明治神宮 (Meiji Jingū)), typed in two boxes on the add cards (E72).
• Travel legs: Title first on the form; blocks read AUSTIN (AUS) 06:00 CST (UTC−6) •••🛬••• LOS ANGELES (LAX) 07:46 PST (UTC−8) (E73). A copy icon links a leg to another trip (long layovers): one leg shown on both, read only on the other trip, deleting removes it everywhere (E74).
• Trip list: ✎ on each card edits the trip without opening it (E75).
• Maps: the GPins ON / GPins OFF chip hides Google’s place pins; on Google standard and Google dark a second, no-pins Map ID keeps tilt, rotate and 3D buildings with GPins OFF (E76). Map look → Check all controls tests every camera button on every look on your screen (E77).
• Map pin popup: clicking a pin, or a place in the left list, opens a popup on the pin: bold name, ✎ to edit, a bin (asks first), address, phone (tap to call), website, View in Google Maps and the note, editable in place; a click outside closes it (E85). Status badges now sit inside the pin, just above the point (E86). With the itinerary panel open, centring uses the visible part of the map, and the map shifts when the panel opens or closes (E87).
• Places lists: an eye on every row (trip Places and Savorlog) picks what shows when Show all is off, e.g. your hotel plus the bánh mì spots (E84). Labels are in Title Case and every level is A–Z (E88). The same Google place can be pinned only once per trip (E82).
• Itinerary times: 24-hour hour and minute menus everywhere (E81). A flight across the date line that lands “before” it left gets a second tab for the same date (e.g. Sun Jan 3 · Seoul, Sun Jan 3 · Seattle), with the flight split across both (E80). The day route’s drive line is bright blue.
• Savorlog: the place popup can be closed; then the map starts on the world and the list follows what’s on the map (E83).
• Speed: the splash’s soft edge is baked into the picture (about 85% less drawing work while the plane flies), and replaced maps are cleaned up (E79). Packages are current with npm audit clean (E78).
• Pin standard: every category, colour and icon for Wanderlog and Savorlog pins is in docs/pin-standard.md; Hanh’s own icons are in src/assets/pin-icons/. Every Nom-Nom cuisine has its dish list (top 5 each, Vietnamese 28; Fusion has none, E70).
• Safety net:
  • every pull request gets a preview link, a build check, migration rules, two-person security tests and browser tests at phone, laptop, 150% zoom and monitor sizes;
  • database changes run only through the approval-gated migrations workflow, after a backup;
  • backups run nightly, encrypted;
  • every preview build runs a read-only connection check (website project, sign-in settings, database);
  • publishes to the site never overlap: each waits for any running GitHub Pages job, then confirms GitHub published it and retries a hiccup by itself (L41);
  • all workflow actions run on Node 24 (L42).

What’s next

1. Map check results: run Map look → Check all controls on the live site and grey out anything Google can’t do on Terrain / Satellite.
2. Work through the old-pin import at /wander/import with hanhs-log-import-2026-10-13.json (E71); fix anything the queue shows up.
3. Phone steps 3–5: add/edit forms, the splash (Q1), Savorlog — each mockup first (E90).
4. M5.2b — a migration (0015) forbidding new food pins in the pins table going forward (existing ones left alone), landed with its test rework. The only deferred piece of M5.
5. M6 itinerary polish, then M7 switch-over.

Also open: Q6 (American icon names: chicken bucket, curly fries, chili bowl, side bowl), Q7 (no lobster icon), Q1 (splash phone layout, phone step 4). Q8 is resolved (E76). Tidy-up for Hanh: delete the 64 merged branches on GitHub (Branches page) and tick Settings → General → Automatically delete head branches.

One-time setup is done (sessions 8–9): migrations 0001–0014 are applied, and the public eatery-photos bucket exists with INSERT/DELETE (and SELECT) policies for authenticated, limited to bucket_id = 'eatery-photos'. Savorlog’s owner is the first signed-in person to open /savor (check: Family → your name says Owner, and Reset link shows). After GitHub moves ubuntu-latest to Ubuntu 26 (Oct 19, 2026), check a run is still green.

Resume prompt

We’re continuing Hanh’s Log (repo hellohanh/hanhs-log, live at hellohanh.github.io/hanhs-log). Read SKILL.md (E1–E92, Q1–Q10, L1–L55), README.md, SESSION_LEDGER.md and docs/pin-standard.md first, plus CLAUDE.md for the working agreement. Hanh’s Log has its own Supabase project and started from a clean slate (live Wanderlog is never touched). M3, M4 and M5 are live: trips + map + itinerary, all of Savorlog (catalogue, location gate, add/edit + photos, family invite), and Savorlog on trips (catalogue eateries by city, food-adds into the catalogue, eateries schedulable on days), every Nom-Nom cuisine has its dish list (E70), the old-pin import queue is built (E71, /wander/import, prepared file made by Claude), names follow English : Local (E72), travel blocks have the new look (E73), legs can be linked to another trip (E74), and trips can be edited from the list (E75). Maps have the GPins chip with a no-pins Map ID (E76) and a Map check (E77); packages are on vite 8 / React Router 7 (E78); the splash is lighter (E79). Since then: date-line repeat days (E80), 24-hour time menus (E81), one pin per place per trip (E82), a closable Savorlog place popup (E83), eyes on Places rows (E84), the map pin popup (E85), badges inside pins (E86), centring beside the itinerary panel (E87), and Title Case A–Z lists (E88). Session 11: Nom-Nom as an A–Z category (E89), the phone layout steps 1–2 (E90) and its Day route (E91), and Savorlog’s City/Country field (E92). Next: phone step 3 (add/edit forms, mockup first at 412 × 891), or the Map check results. Help me with the import as I work through it; the only deferred M5 piece is M5.2b (now migration 0015, forbidding new food pins in pins). Ask decisions as tappable multiple-choice questions, never infer, always show the merge link when something’s ready to merge, and don’t leave red build runs: fix them.

Working agreement

• Every change goes on a branch and through a pull request; never push to main.
• Run npm run build before every push.
• All checks must be green before Hanh is asked to merge.
• Visual changes need a mockup or preview Hanh approves first.
• Database changes only as numbered migrations, applied by the approval-gated workflow, to Hanh’s Log’s own project. Never hand over SQL to paste. Never touch live Wanderlog’s site or database.
• Keys and secrets live only in GitHub Settings → Secrets.
• Decisions are asked as tappable multiple-choice questions; nothing is inferred.
• Each session ends with the Stop Protocol (see SKILL.md):
  • update SKILL.md, README.md and SESSION_LEDGER.md;
  • make sure the build is clean;
  • produce a numbered zip.

How changes ship

1. Claude commits each change to a branch and opens a pull request.
2. The PR gets a preview link (a comment from the preview bot) at https://hellohanh.github.io/hanhs-log/pr-preview/pr-/. Check it on your phone and laptop.
3. Click Merge (use “Create a merge commit”). The live site updates in about two minutes.

Git history is the full record. A zip snapshot is also made at each Stop Protocol (latest: S010 OCT 14 2026).

Database

The database is shared with Wanderlog, so it has its own rules, nightly encrypted backups and an approval step before any change runs. See docs/database.md.

Tests

Every pull request runs:

• security tests, covering the owner, a stranger, an invited guest and a signed-out visitor;
• browser tests at phone, laptop, 150% zoom and a 2560 × 1440 monitor, including the signed-in Wanderlog screens against a stand-in database.

See docs/testing.md.

Running it on your own computer (optional)

npm install
npm run dev

Keep the folder on a local drive, in a path with no apostrophes or other quote characters (see Wanderlog lesson L37).