Files
hackerspace.sh/app/(app)/layout.tsx
T
Moheeb Zara 30bba045f8 feat: configurable member onboarding + UX/persona research
A new member who joins via invite code now walks through an
admin-defined onboarding sequence before reaching the app.

Schema (migration 022, folded into schema.sql Section 14):
- space_onboarding_steps: step_key, step_type
  (welcome|code_of_conduct|profile|payment|content), title, body,
  config jsonb, is_enabled, is_required, is_system, sort_order,
  unique per (space, step_key). Full RLS: members read, admin/board
  write, admin delete non-system.
- space_members.onboarding_completed_at + onboarding_progress jsonb.
- Trigger seeds four default steps per space (welcome, code of
  conduct [required], profile, dues). Backfill seeds existing spaces
  and marks all existing members complete so the new gate never
  traps them.

Flow:
- /onboarding (top-level route, outside the (app) group so no
  redirect loop). Progress bar, step counter, back/continue, per-type
  rendering. Profile step calls updateMyProfile; payment step is a
  non-blocking nudge with optional link and "Remind me later".
- (app)/layout.tsx redirects to /onboarding while
  onboarding_completed_at is null.
- createSpace marks the founder complete: founders configure the
  space, they do not run the member flow (matches admin-vs-end-user
  persona research).
- finishOnboarding re-checks required steps server-side so a tampered
  client cannot skip a required code-of-conduct acknowledgement.
  skipOnboarding only works when nothing is required.

Admin config:
- Settings -> Onboarding tab: reorder, edit title/body/payment link,
  toggle enabled/required, add custom content steps, delete
  non-system steps.

Safety:
- components/safe-markdown.tsx renders admin-authored markdown and a
  sanitized subset of HTML (rehype-raw + rehype-sanitize). Added
  those two deps.

Also:
- bio added to updateMyProfileSchema (members can self-set it; not
  blocked by the migration-015 trigger).
- docs/UX_AND_PERSONAS.md: 4 personas and prioritized UX audit
  findings. Onboarding was finding #1; 2-6 deferred and tracked.

266/266 unit tests pass. Production build clean, /onboarding in the
route table. Migration 022 applies idempotently on the next deploy.
2026-05-15 15:38:40 -07:00

73 lines
2.6 KiB
TypeScript

import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'
import { AppSidebar } from '@/components/app-sidebar'
export default async function AppLayout({ children }: { children: React.ReactNode }) {
const supabase = await createClient()
const { data: { user } } = await supabase.auth.getUser()
if (!user) redirect('/login')
const { data: member } = await supabase
.from('space_members')
.select('*, spaces(*)')
.eq('user_id', user.id)
.in('status', ['current', 'unverified', 'late'])
.order('joined_at', { ascending: true })
.limit(1)
.maybeSingle()
if (!member || !member.spaces) {
// No space found - redirect to signup to create/join one
const { data: { user: currentUser } } = await supabase.auth.getUser()
if (currentUser) {
redirect(`/signup?email=${encodeURIComponent(currentUser.email || '')}`)
}
redirect('/login')
}
// New members walk through the space's configured onboarding before they
// reach the app. Founders (createSpace) and pre-existing members (migration
// 022 backfill) have onboarding_completed_at set, so this only gates
// genuinely-new joiners. /onboarding is outside this layout group, so there
// is no redirect loop.
if (!(member as { onboarding_completed_at?: string | null }).onboarding_completed_at) {
redirect('/onboarding')
}
// Count badges
const { count: taskCount } = await supabase
.from('tasks')
.select('*', { count: 'exact', head: true })
.eq('space_id', member.space_id)
.in('status', ['open', 'claimed'])
const { count: paymentCount } = await supabase
.from('payments')
.select('*', { count: 'exact', head: true })
.eq('space_id', member.space_id)
.eq('link_status', 'unlinked')
return (
<div className="flex h-screen bg-background overflow-hidden">
<AppSidebar
member={member}
taskBadge={taskCount ?? 0}
paymentBadge={paymentCount ?? 0}
/>
<main className="flex-1 overflow-y-auto pt-[52px] md:pt-0 flex flex-col">
<div className="flex-1">{children}</div>
{member.spaces && (member.spaces as { mission_statement?: string | null }).mission_statement && (
<footer className="border-t border-border bg-card px-4 md:px-6 py-3">
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">
{member.spaces.name}
</p>
<p className="font-sans text-xs text-muted-foreground italic">
{(member.spaces as { mission_statement: string }).mission_statement}
</p>
</footer>
)}
</main>
</div>
)
}