# Navigation Redesign: 3-Tab System with Header Actions

**Date:** 2025-11-12
**Status:** Approved
**Implementation Branch:** `claude/update-app-navigation-011CV4jHzsbwyqChwtgBeV6j`

## Problem Statement

The current 5-tab navigation system with a "More" overflow section doesn't follow iOS best practices and creates a fragmented user experience. Important features like Store, Achievements, Daily Rewards, and Characters are hidden behind the "More" tab, reducing discoverability and requiring extra navigation steps.

## Design Goals

1. **Reduce cognitive load:** Eliminate the "More" overflow pattern
2. **Follow iOS conventions:** Use header-based navigation for secondary actions
3. **Maintain accessibility:** Ensure all features remain easily discoverable
4. **Preserve cozy aesthetic:** Keep the warm, game-like visual style
5. **Optimize for usage patterns:** Home as primary hub, with quick access to key actions

## Proposed Solution: Minimalist 3-Tab + Header Actions

### Navigation Structure

#### Bottom Tab Bar (3 tabs)
1. **Home** - Main character view and life simulation hub
2. **Activities** - School, work, extracurriculars
3. **Dating** - Romantic relationships and interactions

#### Header Actions (Right Side)
1. **Messages Icon** - Opens MessagesView
   - Badge indicator for unread messages
   - Follows iOS convention (like Instagram, Twitter)

2. **Profile/Menu Icon** - Opens ProfileMenuView
   - Contains: Store, Achievements, Daily Rewards, Daily Quests, Items, Characters
   - Badge indicator for claimable rewards/quests
   - Grouped as "player-related" features

### Feature Mapping

| Current Location | New Location | Rationale |
|-----------------|--------------|-----------|
| Home (Tab 1) | Home (Tab 1) | No change - primary hub |
| Activities (Tab 2) | Activities (Tab 2) | No change - frequently used |
| Dating (Tab 3) | Dating (Tab 3) | No change - frequently used |
| Messages (Tab 4) | **Header Icon** | iOS convention, stays visible |
| More → Characters | Profile Menu | Player-related feature |
| More → Store | Profile Menu | Player-related feature |
| More → Time Skip | Profile Menu | Player action |
| More → Achievements | Profile Menu | Player progression |
| More → Daily Rewards | Profile Menu | Player rewards |
| More → Daily Quests | Profile Menu | Player tasks |
| More → Items | Profile Menu | Player inventory |

### ProfileMenuView Design

A cozy, organized menu using a card-based grid layout:

**Visual Style:**
- Soft, rounded cards with gentle shadows
- Icons and labels for each feature
- Badge indicators for claimable items (red dot)
- Pastel color scheme matching game aesthetic

**Layout:**
```
┌─────────────────────────────────┐
│     Profile & Progress         │
├─────────────────────────────────┤
│  [Store]     [Achievements]     │
│  [Daily      [Daily Quests]     │
│   Rewards]                      │
│  [Items]     [Characters]       │
│  [Time Skip]                    │
└─────────────────────────────────┘
```

**Features:**
- 2-column grid for easy thumb access
- Large touch targets (minimum 44x44 points)
- Visual feedback on tap (scale animation)
- Badge indicators for:
  - Daily Rewards (can claim)
  - Daily Quests (claimable count)

## Implementation Details

### Files to Modify

1. **ContentView.swift** (lichunWebsocket/ContentView.swift:31-78)
   - Reduce TabView from 5 tabs to 3
   - Remove Messages and More tabs
   - Keep: Home, Activities, Dating

2. **HeaderView.swift** (lichunWebsocket/Features/Home/Components/HeaderView.swift)
   - Add HStack with Messages and Profile icons (right side)
   - Integrate badge indicators from WebSocketService
   - Messages badge: Check `webSocketService.player.conversations` for unread
   - Profile badge: Check Daily Rewards/Quests state

3. **New: ProfileMenuView.swift**
   - Create in `lichunWebsocket/Features/Home/Views/ProfileMenuView.swift`
   - Grid layout with NavigationLinks and Buttons
   - Reuse existing views: StoreView, AchievementsView, etc.
   - Badge logic for Daily Rewards and Quests

4. **AppViewModel.swift** (lichunWebsocketApp.swift:55-59)
   - Add `@Published var showProfileMenu: Bool = false`
   - Add `@Published var showMessagesFromHeader: Bool = false`

### State Management

**Header Icons:**
```swift
@EnvironmentObject var appViewModel: AppViewModel

// Messages button
Button(action: { appViewModel.showMessagesFromHeader = true }) {
    ZStack {
        Image(systemName: "message.circle.fill")
        if hasUnreadMessages {
            Circle().fill(Color.red).frame(width: 8, height: 8)
                .offset(x: 10, y: -10)
        }
    }
}

// Profile button
Button(action: { appViewModel.showProfileMenu = true }) {
    ZStack {
        Image(systemName: "person.circle.fill")
        if hasClaimableRewards {
            Circle().fill(Color.red).frame(width: 8, height: 8)
                .offset(x: 10, y: -10)
        }
    }
}
```

**Navigation Presentation:**
- Messages: Use `.sheet` modifier on ContentView
- Profile Menu: Use `.sheet` modifier on ContentView

### Visual Design Specifications

**Header Icons:**
- Size: 24x24 points
- Color: AppColors.primaryText with 0.8 opacity
- Active color: AppColors.primary
- Spacing: 12 points between icons
- Badge: 8x8 circle, Color.red, positioned top-right

**ProfileMenuView:**
- Background: AppColors.primaryBackground
- Card background: AppColors.cardBackground
- Card radius: 16 points
- Card padding: 16 points
- Grid spacing: 12 points
- Card shadow: radius 4, opacity 0.1

## User Flow Examples

### Accessing Messages
1. User sees Messages icon in header (with badge if unread)
2. Taps icon → Messages view opens as modal
3. Returns to previous view when done

### Accessing Daily Rewards
1. User taps Profile icon in header (with badge if claimable)
2. Profile menu opens showing all features
3. Taps "Daily Rewards" card
4. Daily Rewards modal opens
5. Claims reward, returns to profile menu or closes

### Quick Navigation Flow
1. User starts on Home
2. Quick access via tabs: Activities, Dating
3. Header always visible: Messages, Profile menu
4. All features accessible within 2 taps maximum

## Benefits

1. **Cleaner UI:** Bottom bar reduced from 5 to 3 tabs
2. **iOS Best Practices:** Header-based secondary navigation
3. **Better Discoverability:** Profile menu provides organized feature access
4. **Maintained Accessibility:** All features still within 2 taps
5. **Visual Clarity:** Badge indicators show when action needed
6. **Scalability:** Easy to add new features to profile menu
7. **Cozy Aesthetic:** Maintained through card-based design and warm colors

## Migration Notes

- Existing MoreView.swift can be archived (not deleted immediately)
- All existing views (StoreView, AchievementsView, etc.) remain unchanged
- Navigation state in AppViewModel extended, not replaced
- Backwards compatible with existing WebSocketService state

## Testing Checklist

- [ ] All 3 tabs navigate correctly
- [ ] Messages icon opens MessagesView
- [ ] Profile icon opens ProfileMenuView
- [ ] Badge indicators appear/disappear correctly
- [ ] All features in profile menu are accessible
- [ ] Navigation state persists correctly
- [ ] Header icons remain visible during tab switches
- [ ] Modal presentations work smoothly
- [ ] Visual design matches cozy aesthetic
- [ ] Touch targets meet iOS minimum (44x44 points)

## Future Enhancements

1. Add haptic feedback on navigation actions
2. Consider swipe gestures for quick tab switching
3. Add onboarding tooltips for new header icons
4. Implement deep linking to profile menu features
5. Add animation transitions between views