[Design] Add contextual in-app documentation

[KacperKozak]

Vescape needs contextual documentation inside the app. Features with behavior that is not obvious should be able to show a small "How this works" link or button. It should open a native drawer with short, readable documentation without sending the rider to a website.

Build this as a Core UI feature that any app module can use. Each module should own its guide copy. The shared component should own presentation, scrolling, dismissal, and accessibility.

Group Ride is the first adoption point because riders need to understand discovery, location sharing, joining, stale riders, and what happens when they leave.

Likely files

• src/components/overlays/EdgeDrawer.tsx - existing native drawer behavior to reuse
• src/components/base/Markdown.tsx - existing native renderer for structured local content
• src/app/settings/components/markdown.tsx - current Markdown examples and visual preview
• src/app/settings/components/modals.tsx - shared drawer previews and controls
• src/modules/group-ride/components/SocialSheet.tsx - first feature to adopt the shared help UI
• docs/adr/0020-group-ride-server-relayed-native-presence.md - source of truth for the first guide's behavior and privacy copy
• docs/design.md - app layout, typography, and interaction rules

[KacperKozak]

Agent brief, corrected scope

Category: enhancement
Summary: Add reusable contextual documentation to the Core UI, then use it to explain Group Ride.

Current behavior:
The app has no standard way for a feature to explain itself in context. A module can build a one-off modal or send riders elsewhere, but neither gives Vescape a consistent, offline "How this works" pattern.

Group Ride is the first clear need. Its panel shows identity controls, nearby rides, the active roster, and create, join, or leave actions. It does not explain how discovery works, when location is shared, what other riders can see, or why someone may appear offline or disappear.

Desired behavior:
Core UI provides a reusable contextual help action and native, scrollable documentation drawer. Any feature module can supply a title and local content. The shared UI owns presentation and interaction, while each feature owns its copy.

Group Ride adopts the pattern first with a clearly named "How this works" action. Its guide should explain:

• nearby Group Rides can be discovered within 20 km
• creating or joining a ride shares Rider Presence with the group
• Rider Presence includes location and heading, plus speed and battery estimate when available
• merely viewing nearby rides does not send the rider's location to the relay
• a rider can belong to one Group Ride at a time
• Group Rides are temporary, have no owner, and end when everyone leaves
• stale or disconnected riders may turn grey before disappearing
• leaving stops Group Ride presence sharing

Write for riders, not developers. Keep protocol names, implementation details, and architecture jargon out of the copy.

Likely files

• src/components/overlays/EdgeDrawer.tsx - existing native drawer behavior to reuse
• src/components/base/Markdown.tsx - existing native renderer for structured local content
• src/app/settings/components/markdown.tsx - current Markdown examples and visual preview
• src/app/settings/components/modals.tsx - shared drawer previews and controls
• src/modules/group-ride/components/SocialSheet.tsx - first feature to adopt the shared help UI
• docs/adr/0020-group-ride-server-relayed-native-presence.md - source of truth for the first guide's behavior and privacy copy
• docs/design.md - app layout, typography, and interaction rules

Key interfaces:

• The shared help UI accepts a title and local content without importing any product domain.
• Feature modules own their documentation copy and decide where to place the entry action.
• The action and drawer have accessible labels, support native back-button dismissal, and do not require a network connection.

Acceptance criteria:

• Core UI has a reusable contextual documentation pattern suitable for any feature module.
• The API keeps feature copy outside the shared component and does not introduce cross-module imports.
• Group Ride has a visible "How this works" action using the shared pattern.
• Tapping it opens a scrollable native drawer with the Group Ride topics listed above.
• Closing the guide returns to Group Ride without changing rider identity, ride membership, or connection state.
• The guide remains readable on small screens and with larger accessibility text.
• The new reusable UI has a Components showcase entry with representative short and long content.
• Documentation content stays local to the app and works offline.

Out of scope:

• Adding guides to every app feature in this issue
• Remote or server-managed documentation
• Search, a table of contents, completion tracking, or a full help center
• Changing Group Ride behavior or privacy rules