Lantern

Appearance

Frens System — User Flow Integration ​

How to access and use the Frens feature in Lantern

📍 Access Points ​

1. Save a Connection (Add Fren) ​

From: Active chat after accepting a wave

Location: Chat header (top-right)

Action:

  1. Accept a wave from someone
  2. Chat with them
  3. Tap the 👤+ icon (UserPlus) in the chat header
  4. Review the "Save Connection" modal:
    • Explains venue-bound broadcasting
    • Shows their interests
    • Clarifies privacy model
  5. Tap "Save Fren" or "Maybe Later"

Result:

  • They can now see YOUR lantern when you light it at that venue
  • You won't see theirs unless they save you back

2. View Your Frens List ​

From: Dashboard bottom navigation

Location: Bottom navigation bar (4 buttons)

Buttons (left to right):

  1. Places (MapPin) - Venue discovery
  2. Frens (Heart) - Your saved connections 🆕
  3. Lantern (Flame) - Light/manage your lantern (center, elevated)
  4. Me (Users) - Your profile

Badge: Shows count of frens with lit lanterns (e.g., "3" in purple badge)

Action:

  1. Tap "Frens" button (heart icon)
  2. Opens frens list at #/frens

3. View a Fren's Profile ​

From: Frens list

Action:

  1. Navigate to Frens list (#/frens)
  2. Tap any fren card
  3. Opens individual fren profile at #/frens/:id

What you see:

  • Their lantern name and interests
  • Current status (lit/not lit)
  • Where you met
  • Shared venues
  • Broadcast settings
  • Wave button (if currently lit)

🎨 Visual Guide ​

Dashboard Navigation (Bottom Bar) ​

┌────────────────────────────────────────┐
│                                        │
│                                        │
│         (Main content area)            │
│                                        │
│                                        │
└────────────────────────────────────────┘
┌────────────────────────────────────────┐
│  Places    Frens    🔥    Me           │
│   📍       💜 (3)                       │
│   Map      Heart   Flame   Users       │
└────────────────────────────────────────┘

"Frens" button shows:

  • Purple heart icon
  • "Frens" label
  • Badge with count (if any frens lit)

Chat Header with Save Button ​

┌────────────────────────────────────────┐
│  💬 Chat with Sapphire Crystal         │
│  Anonymous Lantern                     │
│                      [👤+]  [⋮]  [✕]  │
│                       ↑                │
│                  Save Connection       │
└────────────────────────────────────────┘

Buttons (right side):

  1. UserPlus (👤+) - Save connection
  2. MoreVertical (⋮) - Menu (block/delete)
  3. X (✕) - Close chat

Save Connection Modal ​

┌────────────────────────────────────────┐
│  Save Sapphire Crystal?                │
│  🏷️ Jazz  Coffee  Art                  │
│                                        │
│  ┌──────────────────────────────────┐ │
│  │ 🏮 They'll see when you're at    │ │
│  │    Coffee House                  │ │
│  │                                  │ │
│  │ 🔒 Privacy-first                 │ │
│  │    You won't see their lantern   │ │
│  │    unless they save you back     │ │
│  └──────────────────────────────────┘ │
│                                        │
│  [Maybe Later]    [Save Fren]          │
└────────────────────────────────────────┘

Frens List Screen ​

┌────────────────────────────────────────┐
│  ← Frens                          🔍   │
│  [All (3)]  [🏮 Lit (2)]  [Mutual (1)]│
├────────────────────────────────────────┤
│  🏮 2 frens have lit lanterns          │
├────────────────────────────────────────┤
│  ● Sapphire Crystal          [👋 Wave]│
│    At The Speakeasy • 15m ago          │
│    Jazz, Coffee, Art                   │
│    Shared venues: Coffee House         │
│                                        │
│  ● Amber Beacon                        │
│    At Coffee House • Now               │
│    Late Night, Music                   │
│                                        │
│  ○ Nova Light                          │
│    Last seen 2 days ago                │
│    Books, Coffee, Quiet                │
└────────────────────────────────────────┘
│  Places    Frens    🔥    Me           │
└────────────────────────────────────────┘

Indicators:

  • ● (filled dot) = Lantern currently lit
  • ○ (empty dot) = Not currently active
  • Purple "Mutual" badge = Both saved each other
  • Wave button = Only shown if currently lit

Fren Profile Screen ​

┌────────────────────────────────────────┐
│  ← Sapphire Crystal                    │
│     ✨ Mutual Fren                     │
├────────────────────────────────────────┤
│  🏮 Currently at The Speakeasy         │
│     Lantern lit 15m ago                │
│                                        │
│     [👋 Send Wave]                     │
├────────────────────────────────────────┤
│  Interests:                            │
│  🏷️ Jazz  Coffee  Art  Late Night     │
├────────────────────────────────────────┤
│  Connection:                           │
│  Met at Coffee House                   │
│  January 9, 2026                       │
├────────────────────────────────────────┤
│  Venue Broadcasting:          [Manage] │
│                                        │
│  📡 You're broadcasting to them at:    │
│      • Coffee House                    │
│      • The Speakeasy                   │
│                                        │
│  👀 They're broadcasting to you at:    │
│      • Coffee House                    │
│                                        │
│  ✨ Mutual at 1 venue:                 │
│     Coffee House                       │
└────────────────────────────────────────┘

🔄 Complete User Journey ​

Scenario: Meeting and Reconnecting ​

Step 1: First Meeting

1. You're at Coffee House
2. Light your lantern
3. Receive wave from "Sapphire Crystal"
4. Accept wave → Chat opens
5. Chat for a bit
6. Tap [👤+] "Save Connection"
7. Review modal → Tap "Save Fren"
8. ✅ Saved! They can now see your lantern at Coffee House

Step 2: Later That Week

1. You light your lantern at Coffee House again
2. Sapphire Crystal sees notification: "Amber Beacon is at Coffee House"
3. They decide to show up
4. Both at venue → Can chat again

Step 3: Mutual Connection

1. Sapphire Crystal also saves you
2. 🎉 Both get "Mutual Connection!" notification
3. Now you can BOTH see each other's lanterns at Coffee House
4. Frens list shows them with "Mutual" badge

Step 4: Expanding Venues

1. You both happen to be at The Speakeasy
2. System prompts: "Also broadcast at The Speakeasy?"
3. Tap "Add Venue"
4. Now they can see you at Coffee House AND The Speakeasy

🎯 Key Interaction Points ​

From Dashboard ​

  • Bottom nav "Frens" button → Frens list
  • Badge shows count → Lit frens indicator

From Chat ​

  • 👤+ button in header → Save connection modal
  • After save → Success confirmation

From Frens List ​

  • Filter buttons → All / Lit / Mutual
  • Search bar → Find by name
  • Tap fren card → View profile

From Fren Profile ​

  • Wave button → Send wave (if lit)
  • Manage venues → Choose broadcast locations
  • Remove connection → Delete fren

🚀 Quick Actions ​

I want to...How to do it
Save someone after chattingChat header → Tap [👤+] icon
View my frensBottom nav → Tap "Frens" (heart)
See who's litFrens list → Filter "🏮 Lit"
Wave a frenFrens list/profile → Tap "👋 Wave"
Manage venuesFren profile → "Manage" button
Remove a frenFren profile → "Remove Connection"

📱 Navigation Hierarchy ​

Dashboard (Home)
  └─ Bottom Nav
      ├─ Places → Venue discovery
      ├─ Frens → #/frens (Frens list) 🆕
      │   └─ Tap fren → #/frens/:id (Fren profile)
      ├─ Lantern → Hub modal
      └─ Me → #/profile (Settings)

Chat (after wave acceptance)
  └─ Header
      └─ [👤+] Save Connection 🆕
          └─ SaveConnectionPrompt modal

🔧 Developer Notes ​

State Management ​

Dashboard.jsx:

javascript
frensCount={0} // TODO: Load from Firebase

Chat.jsx:

javascript
const handleSaveConnection = async (person) => {
  // TODO: Wire to Firebase - save to connections collection
  console.log('Saving connection:', person)
}

Routes ​

  • #/frens - FrensList screen
  • #/frens/:id - FrenProfile screen

Next Steps ​

  1. Wire handleSaveConnection to Firebase
  2. Load frens count for nav badge
  3. Query lit frens in real-time
  4. Implement venue broadcasting queries

Status: ✅ UI Complete | ⏳ Backend Integration Pending

Built with VitePress

Copyright © 2026 Lantern