Files

T

Sylvain Duchesne 901fd659df NextGraph integration (WIP), broker banner, and feature-based architecture

- Add NextGraph data layer with @ng-org/orm, SHEX shapes (Event, UserProfile,
  Participation), session management, and FestipodDataContext with dual-mode
  operation (connected via NextGraph or local seed data)
- Add BrokerBanner and NgStatus components showing connection status
- Refactor to feature-based architecture: organize code by business domain
  (event, user, home, auth, workshop, meeting, notification) instead of
  technical layer. Modules only import from shared/, never from each other
- Collocate BDD features and step definitions with their modules: event-specific
  steps in event/steps/, user steps in user/steps/, shared generic steps remain
  in shared/steps/
- Set up multi-layer BDD structure (frontend/backend/e2e steps per module)
- Add project documentation (AGENTS.md, .project/knowledge/)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-03-11 12:19:45 +01:00

3.6 KiB

Raw Blame History

Screens

16 mobile mockup screens using the sketchy hand-drawn component library.

Screen Inventory

Home Module (`src/modules/home/screens/`)

ID	Name	File	Description
`welcome`	Bienvenue	WelcomeScreen.tsx	Onboarding/welcome page
`home`	Accueil	HomeScreen.tsx	Dashboard with upcoming events, quick actions
`settings`	Parametres	SettingsScreen.tsx	Notifications, privacy, location settings

Event Module (`src/modules/event/screens/`)

ID	Name	File	Description
`events`	Decouvrir	EventsScreen.tsx	Event discovery/search
`event-detail`	Detail evenement	EventDetailScreen.tsx	Event info, participants, join/leave
`create-event`	Relayer evenement	CreateEventScreen.tsx	Create/relay event, import from Mobilizon/Transiscope
`update-event`	Modifier evenement	UpdateEventScreen.tsx	Edit existing event
`invite`	Inviter des amis	InviteScreen.tsx	Invite contacts to event
`participants-list`	Liste des participants	ParticipantsListScreen.tsx	Event participant list
`meeting-points`	Points de rencontre	MeetingPointsScreen.tsx	Carpooling/meeting coordination

User Module (`src/modules/user/screens/`)

ID	Name	File	Description
`profile`	Mon profil	ProfileScreen.tsx	Current user profile
`update-profile`	Modifier mon profil	UpdateProfileScreen.tsx	Edit profile form
`user-profile`	Profil d'un utilisateur	UserProfileScreen.tsx	View another user's profile
`friends-list`	Mon reseau	FriendsListScreen.tsx	Network/friends list
`share-profile`	Partager mon profil	ShareProfileScreen.tsx	QR code + link sharing

Auth Module (`src/modules/auth/screens/`)

ID	Name	File	Description
`login`	Connexion	LoginScreen.tsx	Login (NextGraph + email fallback)

Screen Registry

src/screens/index.ts imports all screens and exports:

export interface ScreenProps {
  navigate: (screenId: string) => void;
}

export const screenGroups: ScreenGroup[]  // Grouped: home, events, user, general
export const screens: Screen[]            // Flat list
export function getScreen(id: string): Screen | undefined

Sketchy Component Library

src/shared/components/sketchy/ — hand-drawn UI with custom font:

Component	Usage
`Header`	Screen header with back button
`NavBar`	Bottom tab navigation
`Button`	Action buttons
`Card`	Content cards
`Input`	Text inputs
`Title`, `Subtitle`, `Text`	Typography
`Avatar`	User avatars with initials
`Badge`	Status/category badges
`Toggle`, `Checkbox`	Form controls
`ListItem`	List row items
`Divider`	Section separators
`Placeholder`	Image/content placeholders
`PhoneFrame`	Phone device frame wrapper
`BrokerBanner`	NextGraph connection status banner
`NgStatus`	Connection indicator dot

Screen Patterns

All screens follow the same pattern:

import { Header, Button, ... } from '../../../shared/components/sketchy';
import { useFestipodData } from '../../../shared/context/FestipodDataContext';
import type { ScreenProps } from '../../../screens';

export function MyScreen({ navigate }: ScreenProps) {
  const { events, currentUser, ... } = useFestipodData();
  // render with sketchy components
}

Navigation between screens uses navigate(screenId) — the prototyping tool intercepts this to switch the displayed screen.

3.6 KiB Raw Blame History