Profile System

Overview

Civix has a unified profile system that allows users to personalize their experience with a photo and name. Profile data is set during onboarding OR later in Settings.

---

User Flow

Option 1: Onboarding (First Launch)

App Launch → Onboarding → Profile Setup → Main App

• Photo picker (gallery or camera)
• Name input
• Live preview showing how it appears
• Skip option available

Option 2: Settings (Anytime)

Settings → Profile Section → Edit Photo/Name

• Tap photo to change
• Tap name row to edit
• Instant save, no confirmation needed

---

File Locations

File	Purpose
/app/onboarding.tsx	Initial profile setup
/app/(tabs)/settings.tsx	Profile editing
/app/(tabs)/index.tsx	Profile display (home)
/store/useAppStore.ts	Profile state storage
/lib/useGreeting.ts	Personalized greetings

---

Store State

// State
userName?: string
userImage?: string

// Actions
setUserName: (name: string) => void
setUserImage: (img: string) => void

---

Where Profile Appears

Home Page (index.tsx)

• Profile photo in hero section (top right)
• Personalized greeting: "Good Evening, {name}"
• Level badge overlaid on photo

Settings Page (settings.tsx)

• Profile section at top
• Editable photo with pencil badge
• Editable name with edit icon
• Hint: "Your photo will appear on the home screen"

Completion Page (completion.tsx)

• Can show profile in celebration states

---

Onboarding vs Settings

Feature	Onboarding	Settings
Photo Gallery	Yes	Yes
Photo Camera	Yes	No (gallery only)
Live Preview	Yes	No
Skip Option	Yes	N/A
Both Optional	Yes	Yes

---

Profile Section Styling

// Profile container
profileSection: {
  flexDirection: "row",
  alignItems: "center",
  padding: 16,
  gap: 16,
}

// Photo with gold border
profilePhoto: {
  width: 72,
  height: 72,
  borderRadius: 36,
  borderWidth: 3,
  borderColor: "#D4AF37", // Gold
}

// Dashed placeholder when no photo
profilePhotoPlaceholder: {
  width: 72,
  height: 72,
  borderRadius: 36,
  backgroundColor: "rgba(99, 102, 241, 0.1)",
  borderWidth: 2,
  borderStyle: "dashed",
  justifyContent: "center",
  alignItems: "center",
}

// Edit badge on photo
photoEditBadge: {
  position: "absolute",
  bottom: 0,
  right: 0,
  width: 24,
  height: 24,
  borderRadius: 12,
  backgroundColor: theme.primary,
  borderWidth: 2,
  borderColor: "#fff",
}

---

Name Edit Modal

Settings uses a modal for name editing:

• Semi-transparent overlay
• Card with rounded corners
• Text input with placeholder
• Cancel/Save buttons
• Auto-focus on open
• Submit on Enter key

// Modal overlay
modalOverlay: {
  flex: 1,
  backgroundColor: "rgba(0,0,0,0.6)",
  justifyContent: "center",
  alignItems: "center",
  padding: 24,
}

// Modal card
modalContent: {
  width: "100%",
  maxWidth: 360,
  borderRadius: 20,
  padding: 20,
  backgroundColor: theme.card,
}

---

Translations

All profile strings are translated in /lib/i18n.ts:

Key	English	Farsi	Pashto
profile	Profile	پروفایل	پروفایل
your_name	Your Name	نام شما	ستاسو نوم
tap_to_add	Tap to add name	برای افزودن نام بزنید	د نوم اضافه کولو لپاره ټک ورکړئ
photo_hint	Your photo will appear...	عکس شما در صفحه اصلی...	ستاسو عکس به په کور پاڼه...
edit_name	Edit Name	ویرایش نام	نوم سم کړئ
enter_name	Enter your name	نام خود را وارد کنید	خپل نوم ولیکئ
save	Save	ذخیره	خوندي کړئ

---

Greeting System

The /lib/useGreeting.ts hook generates personalized greetings:

// Time-based greeting
const hour = new Date().getHours();
const base = hour < 12 ? "Good Morning"
           : hour < 17 ? "Good Afternoon"
           : "Good Evening";

// Personalized if name set
return userName ? `${base}, ${userName}` : base;

Supports: English, Farsi, Pashto with proper translations.

---

Best Practices

1. Always Optional - Never force photo/name
2. Instant Save - Changes save immediately
3. Visual Feedback - Haptics on all interactions
4. Consistent Styling - Gold border for profile photos
5. Clear Affordances - Pencil/edit icons indicate tappable