feat(help): in-app help center with per-screen guides and pictures

A help icon on every screen opens a panel with the screen's overview, its
sub-screens, task guides with a framed picture per step, search across guides
and the wiki, and a switch to any other screen's help. Guides exist for the
dashboard, Vacay, Atlas, Collections, Journey (list, journal, studio), Settings
(all tabs), Admin (all tabs) and the trip frame; the trip's own screens are
in progress. Pictures are produced by Playwright (client/e2e/help), texts in
all 23 languages.
This commit is contained in:
Maurice
2026-09-21 23:20:27 +02:00
parent 151e32107f
commit 4346d7f2c1
483 changed files with 47654 additions and 33 deletions
+89
View File
@@ -0,0 +1,89 @@
import {
Plus, Pencil, Image, Copy, Archive, Trash2, SlidersHorizontal, CalendarPlus, LayoutDashboard, Coins, Clock, Compass,
CalendarCheck, CircleDot, Hourglass, Calculator, CalendarRange, Building2, Flag, GraduationCap, CalendarOff, CalendarDays,
Repeat, UserPlus, Share2, Globe, MapPin, Search, Star, Eye, LandPlot, BarChart3, MinusCircle, Landmark,
DownloadCloud, CheckCircle2, PanelRight, Tags, Upload, FileInput, Library, Bookmark, BookOpen, Sparkles, ThumbsUp, Images, Link,
Book, Palette, Map, Bell, Plug, CloudOff, User, Lock, ShieldCheck, Fingerprint, KeyRound,
Route, Users, UserRound, Crown, PanelLeftClose, Undo2, Ticket, Train, ListChecks, Wallet, FolderOpen, MessagesSquare,
type LucideIcon,
} from 'lucide-react'
import type { HelpIcon } from '../../help/types'
/** The registry names icons; the components draw them. Unknown names fall back to the compass. */
const ICONS: Record<HelpIcon, LucideIcon> = {
plus: Plus,
pencil: Pencil,
image: Image,
copy: Copy,
archive: Archive,
trash: Trash2,
filter: SlidersHorizontal,
calendar: CalendarPlus,
layout: LayoutDashboard,
coins: Coins,
clock: Clock,
compass: Compass,
calendarCheck: CalendarCheck,
halfDay: CircleDot,
hourglass: Hourglass,
calculator: Calculator,
calendarRange: CalendarRange,
building: Building2,
flag: Flag,
graduationCap: GraduationCap,
calendarOff: CalendarOff,
calendarDays: CalendarDays,
repeat: Repeat,
userPlus: UserPlus,
share: Share2,
globe: Globe,
mapPin: MapPin,
search: Search,
star: Star,
eye: Eye,
regions: LandPlot,
chart: BarChart3,
minusCircle: MinusCircle,
landmark: Landmark,
download: DownloadCloud,
checkCircle: CheckCircle2,
panelRight: PanelRight,
tags: Tags,
upload: Upload,
fileInput: FileInput,
library: Library,
bookmark: Bookmark,
bookOpen: BookOpen,
sparkles: Sparkles,
thumbsUp: ThumbsUp,
gallery: Images,
link: Link,
book: Book,
sliders: SlidersHorizontal,
palette: Palette,
map: Map,
bell: Bell,
plug: Plug,
cloudOff: CloudOff,
user: User,
lock: Lock,
shield: ShieldCheck,
fingerprint: Fingerprint,
key: KeyRound,
route: Route,
users: Users,
userRound: UserRound,
crown: Crown,
panelLeft: PanelLeftClose,
undo: Undo2,
ticket: Ticket,
train: Train,
listChecks: ListChecks,
wallet: Wallet,
folder: FolderOpen,
messages: MessagesSquare,
}
export function helpIcon(name: HelpIcon): LucideIcon {
return ICONS[name] ?? Compass
}