Collection Page and Walk Detail Redesign

All issues reported in the page feedback have been addressed:

1. /collection — Added Animal Category & Redesigned <SpeciesCard>

• Animal category added:
  • Updated lib/hunt.ts, lib/db.ts, and app/api/identify/route.ts to include 'animal'.
  • Added { kind: 'animal', label: 'Animals' } with PawPrint icon to components/collection/collection-filter-bar.tsx and app/collection/page.tsx.
• Species Card redesign:
  • Transformed SpeciesCard into a card container with a square cutout for the image (aspect-square rounded frame with kind and encounter badges).
  • Placed all details (common name, verification mark, scientific name, and first recorded date) underneath the image cutout.

2. /journal/[walkId] — Correct Map Location, Distance, Removed Tabs, and Activity Chat Log

• Map centering & distance:
  • Fixed components/map/walk-map.tsx: Instead of falling back to default coordinates when userPosition is null, the map now inspects walk trackPoints, specimenEntries, and audioNotes to calculate its center and bounds.
  • Added trailEndpointMarkersRef: Stationary / single-point walks now render a Start location pin directly at the recorded point; moving walks display green Start and rose Finish pins along the polyline.
  • Dynamically computes geodesic distance in app/journal/[walkId]/page.tsx from GPS track points if distance was recorded as 0.
• Removed the 3 tab buttons:
  • Removed "Stats & Telemetry", "Confirmed Specimens", and "Voice Notes" tabs.
• Kept stats & added walking chat log:
  • Preserved the stats and telemetry grid (Duration, Distance, Avg Pace, GPS Points, Start/End times).
  • Replaced the tab content below the stats with the interactive ActivityLog displaying voice notes (with playback and transcription), text notes, and specimen photos in chronological order. Fixed text note rendering in ActivityLog.

3. /journal — Vertical Rectangle Cards & 25 Hairline Natural Element Covers

• Vertical card styling:
  • Replaced the vertical stack in app/journal/page.tsx with a responsive multi-column grid (grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4).
  • Updated WalkCard into a vertical rectangle card with a prominent cover section.
• Cover style rules:
  • When walk has photos: Displays the first image mounted inside crisp white borders with specimen captioning.
  • When walk has no photos: Created components/hairline/natural-covers.tsx with a collection of 25 distinct isometric line illustrations adhering to the Hairline aesthetic (pebbles, bird's nest, acorn, pinecone, chanterelle, fern, oak leaf, water ripples, spiral shell, tree rings, clover, feather, honeycomb, mountain ridge, seedling, quartz crystals, dewdrop, twig, wild blossom, pine needles, lichen, dragonfly wing, dandelion seed, ginkgo, and brook). Each walk deterministically selects a cover from the collection.

Both issues have been resolved:

1. Fixed Rules of Hooks Console & Runtime Error in WalkDetailPage

• Root cause: computedDistanceMeters was using React.useMemo placed after early return conditions (if (walk === undefined) and if (walk === null)). During the initial load, the component returned early before reaching the hook, causing the total hook count to change between renders.
• Fix: Moved computedDistanceMeters in app/journal/[walkId]/page.tsx to the top hook declarations block (before any conditional early returns), ensuring consistent hook execution on every render.

2. /journal — Simplified <WalkCard> Cover Design

• Removed extra wrappers and captions: Removed the inner .relative > .relative specimen container and text. When an image is present, it now renders as a clean vertical rectangle photograph filling the card within crisp white borders.
• Removed bottom .p-4 stats container: Stripped away the bottom content section with duration, distance, badges, and footer links.
• Clean Card Presentation:
  • components/journal/walk-card.tsx: The card is now a minimal vertical rectangle (aspect-[3/4]):
    • If the walk has an image: Displays only the image framed by white borders.
    • If the walk has no image: Displays the Hairline natural element illustration in the card frame.
    • Includes title and aria-label on the link for accessibility and native tooltips.

All requested updates across /journal/[walkId], /journal, and /entry/[id] have been implemented and verified:

1. /journal/[walkId] Updates

• Removed Headers: Removed the <h2>Trail Activity Log</h2> heading and {N} records counter.
• Direct Chat Layout: Removed the outer card/border container around <ActivityLog>, laying down the chronological chat messages (specimens, voice notes, route highlights) directly into the page flow.
• Top-to-Bottom Vines & Insects: Added <PageAmbience pageWidth={896} /> to render continuous vines along the side margins with animated butterflies and buzzing bees.

2. /entry/[id] Updates

• Added <PageAmbience pageWidth={672} /> to render top-to-bottom margins with vines, bees, and butterflies matching the field journal aesthetic.

3. /journal Walk Cards & Context Menu

• Right-Click Context Menu:
  • Right-clicking any <WalkCard> opens a custom menu positioned at the cursor (also accessible via hover/focus 3-dots button for mobile/touch accessibility).
  • Option 1: Change Cover: Opens a dialog with an Upload Image option first (accepts local JPG/PNG/WebP), followed by all 25 preset Hairline natural element covers (pebbles, nest, acorn, fern-frond, pinecone, mushroom, leaf-venation, lichen, snail-shell, etc.). Selecting any cover immediately updates the database.
  • Option 2: Share: Supports local-first sharing without needing a remote database. Utilizes the native Web Share API (navigator.share) on supported browsers, with an offline dialog fallback offering Copy Formatted Text (expedition stats, finds, voice notes summary) and Export JSON download.
  • Option 3: Delete: Opens a confirmation dialog and securely removes the walk session and its associated entries and notes from Dexie storage.

I have resolved both issues:

1. Right-Click Context Menu & Modals Opening

• Base UI ContextMenu Built & Integrated: Created components/ui/context-menu.tsx wrapping Base UI's native ContextMenu primitives with portal mounting.
• Event Decoupling: Replaced raw window.addEventListener('click') listeners in components/journal/walk-card.tsx with Base UI's context menu. Added event decoupling timers (setTimeout) so menu dismissals do not clash with or prematurely close dialog backdrops.
• All 3 Options Active:
  1. Change cover: Opens the modal featuring the custom image upload button followed by all 25 Hairline natural elements.
  2. Share expedition: Opens the expedition summary card with Copy Text, Export JSON, and native device share menu options.
  3. Delete walk: Opens the confirmation dialog to remove the walk, finds, and voice notes. (The 3-dot floating button remains available as a hover/touch quick trigger as well).

2. Top-to-Bottom Vines, Butterflies, and Pollinating Bees

• Full Viewport Framing: Updated components/nature/page-ambience.tsx to be fixed inset-0 z-20 pointer-events-none so the vines reliably frame the viewport from top to bottom across scroll positions.
• Lush Botanical Styling & High Contrast:
  • Boosted stems with crisp botanical paths (stroke-primary, strokeWidth="2.4"), spiraling tendrils, and leaves (fill-primary/55, stroke-primary).
  • Added blooming 5-petal blossoms in meadow tints (--bloom-1, --bloom-2, --bloom-3) with pollen centers.
  • Added fluttering butterflies and pollinating bees along both margins.
  • Positioned cleanly in the side gutters on /journal, /journal/[walkId], and /entry/[id].

I have applied your feedback across the journal and natural element collection:

1. Scaled-Down Card Container & Thinned Borders

• Scaled-Down Grid: Updated app/journal/page.tsx from 1–4 wide columns to grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4, scaling down card dimensions to compact field placard sizes.
• Thinned Border: In components/journal/walk-card.tsx, reduced the border to a delicate border border-border/40 hover:border-primary/50 with lighter shadows and refined rounded-xl corners.

2. Centered Walk Title at the Bottom

• Placard Layout: Inside WalkCard, structured the card into:
  1. Top Artwork/Cover Frame: Square specimen plate for photos (with clean matting) or Hairline drawings.
  2. Bottom Center Placard: Renders the walk's title centered (font-serif text-xs sm:text-[13px] line-clamp-1) with the start time (font-mono text-[10px] text-muted-foreground/75) directly below it.

3. Sophisticated 25-Item Hairline Natural Covers

• Re-authored all 25 illustrations in components/hairline/natural-covers.tsx following the official Hairline study rules (2:1 isometric projection, volumetric rounded hulls, single-stroke hierarchy with offset dim creases opacity-40, and single specimen focus dots):
  • River Pebbles: 3D river-worn isometric stones resting in an elliptical silt bed.
  • Bird's Nest: Interlocking woven torus with an inner hollow holding three speckled eggs.
  • Forest Acorn: Tilted pedunculate nut with a shingle-textured cupule cap and reflective sheen crease.
  • Scots Pinecone: Articulated Fibonacci bract scales curving down a central cone axis.
  • Wild Chanterelle: Undulating fluted trumpet cap with descending gill ridges and a button companion.
  • Fern Fiddlehead: Unfurling crosier spiral with alternating pinnae bud curls.
  • English Oak Leaf: Sinuate lobed perimeter with lateral veins and basal auricles.
  • Clear Spring Ripples: 5 concentric isometric wave crests with a rebound Worthington column and suspended droplet.
  • Nautilus Shell: Logarithmic equiangular spiral hull with internal camerae septa walls.
  • Ancient Tree Rings: Isometric tree cookie slab with bark thickness, eccentric rings, and radial shrinkage checks.
  • Field Shamrock: Four cordate leaflets with pale chevron watermark arcs.
  • Songbird Feather: Curved rachis with asymmetric vane, barb striations, and calamus base.
  • Wild Honeycomb: Isometric hexagonal wax cells with sunken prism depth and a honey droplet.
  • Alpine Topography: Knife-edge arête ridgeline separating windward and leeward elevation terraces.
  • Spring Seedling: Emerging hypocotyl stem with two plump cotyledons and terminal epicotyl bud.
  • Quartz Crystals: Terminating hexagonal prism cluster with rhombohedral pyramid points and striation lines.
  • Morning Dew: Gracefully arching fescue blade with a gravity-poised spherical dewdrop and caustic reflection.
  • Winter Twig: Dormant hardwood stem with swollen leaf scar nodes and imbricate bud scales.
  • Wild Anemone: Five overlapping obovate petals with radiating anther filaments and domed pistil.
  • Pine Fascicle: Twin needle bundle held in a wrapped basal sheath with resin tip droplets.
  • Rock Lichen: Foliose thallus rosette with crenulated margins and raised apothecia cups.
  • Odonata Wing: Articulated dragonfly wing with subcostal vein, pterostigma cell, and cell lattice.
  • Dandelion Achene: Radiating capillary pappus parachute with slender rostrum beak and barbed seed.
  • Ginkgo Biloba: Fan blade with a distinct central sinus cleft and dichotomously branching veins.
  • Meandering Brook: Sinuous alluvial river bend with steep cutbank, point bar shelf, and thalweg flow thread.

The updates have been implemented across /journal:

1. Scaled Down the Container:

   • Updated the journal grid in app/journal/page.tsx to use grid-cols-[repeat(auto-fill,minmax(130px,160px))] so cards never stretch across large columns and remain compact (~130–160px).
   • Constrained the walk card in components/journal/walk-card.tsx with w-full max-w-[160px] and compact p-2 placard padding.

2. Thinned the Border:

   • Replaced default 1px borders with explicit hairline border-[0.5px] border-border/40.
   • Applied delicate border-[0.5px] borders to both the inner white photo cutout and the natural cover plate.

3. Centered Walk Title at the Bottom:

   • Positioned beneath the cover artwork: a centered title placard displaying the walk title (walk.title || label) with font-serif text-xs font-medium and subtle uppercase timestamp beneath.
   • Container has no overflow-hidden clipping, guaranteeing full visibility.

4. Enhanced 25 Natural Covers:

   • Wired cards to use CoverArt with the cover-anim micro-motion hooks and 2:1 isometric projections.

The card sizing is governed by two files:

1. The Grid Column Width (Page Level)

In app/journal/page.tsx:

• minmax(130px,160px):
  • The first value (130px) is the minimum width a card can shrink to before dropping down to the next row.
  • The second value (160px) is the maximum width each card column will expand to.
  • To make cards wider/narrower overall, change these numbers (e.g. minmax(180px,220px) for larger cards, or minmax(120px,140px) for mini cards).
• gap-3 sm:gap-4: Controls the spacing between cards.

2. The Card Container & Image Proportions (Card Level)

In components/journal/walk-card.tsx:

• max-w-[160px]: Keeps the card locked to this maximum width even if a grid column is wider. Match this with the max value you pick in the grid (or remove max-w-[...] if you want the card to always fill 100% of the grid cell).
• p-2: Padding between the card border and the cover art (can be p-1.5, p-2.5, p-3).
• aspect-[4/5]: The vertical proportion of the image area:
  • aspect-[4/5] or aspect-[3/4] for vertical rectangles.
  • aspect-square for 1:1 squares.
  • aspect-[2/3] for taller portrait cards.

The debugging overrides have been removed and the flower garden stages are now strictly determined by the distance walked:

1. Distance-Based Flower Bloom Stages

The bloom growth for each day in components/journal/flower-garden.tsx is calculated from the total distance walked on that date:

• Stage 0 (0 m): Empty garden plot (no walk recorded).
• Stage 1 (< 500 m): Sprout / Seedling — First stage for walks under 500 meters.
• Stage 2 (500 m – 2 km): Opening Bud — Second stage for walks between 500 meters and 2 kilometers.
• Stage 3 (2 – 5 km): Full Bloom — Third stage for walks between 2 and 5 kilometers.
• Stage 4 (5+ km): Flourishing Bloom — Fourth stage for long expeditions of 5 kilometers or more.

2. Distance Telemetry Calculation

• Integrated calculateHaversineDistance fallback so that if walk.distance was recorded as 0 but GPS track points exist, the geodesic distance is computed from trackPoints.

3. Removed Debugging Controls

• Removed debugStages and debugSpecies state overrides.
• Removed stage cycling on cell clicks (cycleDebugStage) and the "Preview" debug caption text.
• Clicking or hovering on any day cell now acts as an inspection trigger that highlights the selected day (ring-2 ring-primary) and shows the exact date, flower stage, walk count, and distance (in meters or kilometers) in the caption.
• Updated the bottom garden legend to show the distance progression: 0 km → < 500 m → 500 m – 2 km → 2 – 5 km → 5+ km.