Stream C from docs/information-architecture.md. The navbar's account
cluster (<username> + Settings + Logout) was three controls for the
same concept; the cluster now collapses behind an avatar dropdown.
On mobile, all primary nav and account controls move into a
hamburger drawer so the top bar stays at logo + bell + hamburger
without wrapping at small viewports.
- New apps/journal/app/components/Avatar.tsx — initials-only avatar
(no image-upload story yet; the component is the single place to
add image fallback when one lands).
- New apps/journal/app/components/AccountDropdown.tsx — click the
avatar trigger to reveal Profile / Settings / Log Out menuitems.
Click-outside + Escape-to-close. role="menu" + role="menuitem" for
a11y.
- New apps/journal/app/components/MobileNavMenu.tsx — hamburger
trigger + slide-out drawer at md and below. Contains all primary
nav (Feed, Explore, Routes, Activities, Notifications) plus the
account cluster (Profile, Settings, Log Out). Auto-closes on
navigation; locks body scroll while open.
- apps/journal/app/root.tsx — refactor NavBar:
* Brand + primary nav links hide at md and below (drawer covers
them).
* Right cluster: bell on every viewport; avatar dropdown on
desktop, hamburger on mobile.
* Loader exposes user.displayName so Avatar can compute initials.
* Drops the now-unused Form import; Form moved into the
dropdown/drawer components.
E2E tests updated:
- e2e/auth.test.ts — logout helper opens the avatar dropdown via
aria-label = displayName||username, then clicks the Log Out
menuitem. Username assertions in nav switch from getByText to
getByRole("button", {name: username}) (the avatar button).
- e2e/settings.test.ts — "settings link visible in nav" opens the
avatar dropdown first, then asserts the Settings menuitem.
i18n: nav.openMenu, nav.closeMenu keys for the hamburger trigger
labels (EN + DE).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .claude | ||
| .github | ||
| apps | ||
| docker/brouter | ||
| docs | ||
| e2e | ||
| infrastructure | ||
| openspec | ||
| packages | ||
| scripts | ||
| .gitignore | ||
| .gitleaks.toml | ||
| .mcp.json | ||
| .prettierrc | ||
| .sops.yaml | ||
| CLAUDE.md | ||
| docker-compose.dev.yml | ||
| eslint.config.js | ||
| LICENSE | ||
| package.json | ||
| playwright.config.ts | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| SECURITY.md | ||
| tsconfig.base.json | ||
| turbo.json | ||
| vitest.config.ts | ||
| vitest.setup.ts | ||
| vitest.shared.ts | ||
trails.cool
Collaborative route planning and federated activity sharing for outdoor enthusiasts.
Planner — Plan routes together in real-time. Share a link, invite friends, edit waypoints collaboratively. Powered by BRouter for intelligent routing with elevation awareness.
Journal — Track your adventures. Import activities from Garmin, Strava, or Wahoo. Share routes and rides with friends. Self-host your own instance and federate with others via ActivityPub.
Status
Early development. See the architecture plan and project philosophy.
Project Structure
This is a TypeScript monorepo using pnpm workspaces and Turborepo.
apps/
planner/ Collaborative route editor (React Router 7 + Yjs + Leaflet)
journal/ Activity social platform (React Router 7 + Fedify + PostGIS)
packages/
types/ Shared TypeScript interfaces
ui/ Shared React components (Tailwind)
map/ Leaflet map wrappers
gpx/ GPX parsing and generation
i18n/ Internationalization (English + German)
Getting Started
Prerequisites: Node.js 20+, pnpm, Docker
# Clone
git clone https://github.com/trails-cool/trails.git
cd trails
# Install dependencies
pnpm install
# Start development (apps only, no database or routing)
pnpm dev
# Start full stack (PostgreSQL + BRouter + apps)
pnpm dev:full
Full Local Dev Setup
pnpm dev:full starts everything needed to test the Planner end-to-end:
- PostgreSQL + PostGIS on port 5432 (via Docker)
- BRouter routing engine on port 17777 (via Docker)
- Database schema pushed automatically via Drizzle
- BRouter segment downloaded for Berlin area (~124MB, cached)
- Journal on http://localhost:3000
- Planner on http://localhost:3001
Other useful commands:
pnpm dev:services # Start Docker services only (DB + BRouter)
pnpm db:push # Push database schema changes
pnpm db:studio # Open Drizzle Studio (DB browser)
Development Tools
This project uses AI-assisted, spec-driven development. See docs/tooling.md for details.
| Tool | Purpose |
|---|---|
| cmux | Native macOS terminal for running multiple AI coding sessions |
| Claude Code | AI coding assistant (primary development tool) |
| GitHub Copilot | AI coding assistant |
| Crit | Browser-based inline code review |
| OpenSpec | Spec-driven development workflow |
Self-Hosting
The Journal is designed to be self-hosted. A single Docker Compose file gets you running:
curl -O https://raw.githubusercontent.com/trails-cool/trails/main/infrastructure/docker-compose.yml
docker compose up -d
See docs/architecture.md for details on self-hosting configuration.
Philosophy
- Privacy by design — The Planner collects zero user data
- Data ownership — Export everything, self-host, no lock-in
- Open source — MIT licensed, built on open standards
- Simplicity — Start simple, add complexity only when needed
Read more: docs/philosophy.md
Contributing
Human contributions are welcome! This project is built with AI-assisted development (Claude Code + OpenSpec), but we value human judgment, design taste, and community input.
License
MIT