SkateSpots/IMPLEMENTATION_PLAN.md

# Implementation Plan - SkateSpots Refinements

**Date**: December 30, 2025  
**Status**: Planning Phase

---

## 🐛 CRITICAL FIXES (Priority 1)

### 1. Fix Signup Key Generation Error
**Priority**: CRITICAL  
**Effort**: 30-45 minutes  
**Budget**: $3-5

**Issue**: Error when generating secret key during signup  
**Root Cause**: Need to investigate console error - likely issue with nip19.decode or toast usage  

**Steps**:
1. Check SignupDialog.tsx for error in key generation
2. Test nip19.decode with generated nsec
3. Fix toast.toast() vs toast() usage inconsistency
4. Add error boundary and better error handling
5. Test complete signup flow end-to-end

**Files**: `src/components/auth/SignupDialog.tsx`

---

## 🎨 UI/UX IMPROVEMENTS (Priority 2)

### 2. Consistent UI Framing Across All Devices
**Priority**: HIGH  
**Effort**: 2-3 hours  
**Budget**: $10-15

**Issues**:
- Inconsistent padding/margins on mobile vs desktop
- Some elements not properly responsive
- Headers need consistent sizing
- Cards need consistent spacing

**Steps**:
1. Audit all pages for responsive issues
2. Standardize container padding (px-4 on mobile, px-6 on desktop)
3. Fix header sizing (ensure readable on all devices)
4. Ensure cards have consistent max-width and centering
5. Test on mobile (375px), tablet (768px), desktop (1920px)
6. Fix bottom navigation spacing on notched devices
7. Ensure forms are usable on small screens

**Files**: All page components, Layout.tsx, index.css

---

### 3. Day/Night Theme with Actual Contrast
**Priority**: HIGH  
**Effort**: 1-2 hours  
**Budget**: $5-10

**Issue**: Currently forced to dark mode, no real light theme option

**Steps**:
1. Create proper light theme CSS variables
2. Light theme: White background with neon accents
3. Keep neon effects but adjust for light bg (darker neons, subtle glows)
4. Ensure text remains readable in both modes
5. Update ThemeToggle to actually switch themes
6. Test all pages in both light and dark mode
7. Ensure minimum 4.5:1 contrast ratio (WCAG AA)

**Design**:
- **Light Mode**: White bg (#ffffff), dark neon colors, subtle shadows
- **Dark Mode**: Black bg (#000000), bright neons, glows (current)

**Files**: `src/index.css`, `src/components/ThemeToggle.tsx`

---

### 4. Login Required Notices
**Priority**: MEDIUM  
**Effort**: 1 hour  
**Budget**: $5

**Issue**: Features requiring login should show notice before user tries to use them

**Steps**:
1. Add "Login required" badges to event cards if logged out
2. Add notice on map page: "Login to add spots/shops"
3. Add notice on events page: "Login to create events"
4. Add notice on coaches page: "Login to become a coach"
5. Style with yellow neon theme
6. Make notices dismissible or subtle (not intrusive)

**Files**: `EventsPage.tsx`, `MapPage.tsx`, `CoachesPage.tsx`, event cards

---

## 🔗 LINK & NAVIGATION FIXES (Priority 2)

### 5. Add Links to Onboarding from Signup
**Priority**: MEDIUM  
**Effort**: 15 minutes  
**Budget**: $1-2

**Steps**:
1. Add button in SignupDialog welcome step
2. "Need help? View our onboarding guide" with link
3. Style as secondary/outline button

**Files**: `src/components/auth/SignupDialog.tsx`

---

### 6. Add nos2x Link to Onboarding
**Priority**: LOW  
**Effort**: 5 minutes  
**Budget**: $1

**Steps**:
1. Add nos2x to extension list in OnboardingPage
2. Format: `{ label: 'nos2x', url: 'https://github.com/fiatjaf/nos2x', note: 'Minimalist Nostr extension.' }`

**Files**: `src/pages/OnboardingPage.tsx`

---

### 7. Add Hyperlinks to Mobile Wallets
**Priority**: LOW  
**Effort**: 10 minutes  
**Budget**: $1

**Steps**:
1. Find wallet list in OnboardingPage
2. Add URLs to all wallets (Wallet of Satoshi, Blink, Zeus, Phoenix, Coinos)
3. Make names clickable links

**Files**: `src/pages/OnboardingPage.tsx`

---

### 8. Fix Plebeian Market Links
**Priority**: MEDIUM  
**Effort**: 15 minutes  
**Budget**: $1-2

**Issue**: Multiple confusing links, should have one clear CTA

**Steps**:
1. Remove "Browse Marketplace" internal link
2. Keep only "Visit Plebeian Market" external link
3. Update OnboardingPage to match
4. Link directly to https://plebeian.market

**Files**: `src/pages/MarketplacePage.tsx`, `src/pages/OnboardingPage.tsx`

---

### 9. Add OpenStreetMap Credit
**Priority**: LOW  
**Effort**: 10 minutes  
**Budget**: $1

**Steps**:
1. Add small text overlay on map: "Map data © OpenStreetMap contributors"
2. Position in bottom-left corner
3. Style: small, gray text with link
4. Or add to footer when map is visible

**Files**: `src/components/SpotMap.tsx`

---

## ⚙️ FEATURE ENHANCEMENTS (Priority 3)

### 10. NIP-05 Provider Options in Settings
**Priority**: MEDIUM  
**Effort**: 1-1.5 hours  
**Budget**: $5-8

**Steps**:
1. Create NIP-05 section in SettingsPage
2. List 4 providers:
   - **Free**: nostrcheck.me, nostr.directory
   - **Paid**: Nostr Plebs, nostr.band
3. Add links and brief descriptions
4. Show current NIP-05 if set
5. Add "Test your NIP-05" button
6. Style with neon theme

**Providers to Include** (single source of truth: `src/lib/nip05Providers.ts`):
- nostrcheck.me (Free)
- nostr.directory (Free)
- Nostr Plebs (Paid)
- nostr.band (Paid)

**Files**: `src/pages/SettingsPage.tsx`

---

### 11. Contact Info for Private/Ask Locals Spots
**Priority**: MEDIUM  
**Effort**: 45 minutes  
**Budget**: $4-5

**Steps**:
1. Add contactInfo field to CreateSpotPage
2. Show only when accessType is 'private' or 'locals'
3. Input field: "Contact info (phone, social, etc.)"
4. Save as 'contact' tag
5. Display on SpotDetailPage for private/locals spots
6. Only show to logged-in users

**Files**: `src/pages/CreateSpotPage.tsx`, `src/pages/SpotDetailPage.tsx`, `src/lib/types.ts`

---

### 12. Coach Contact Details & Rating System
**Priority**: HIGH  
**Effort**: 3-4 hours  
**Budget**: $15-20

**Complex Feature - Multiple Parts**:

#### Part A: Contact Information (1 hour, $5)
1. Add contactInfo field to BecomeCoachPage
2. Save as 'contact' tag
3. Show only to verified users (has NIP-05)
4. Display with lock icon: "Contact info visible to verified users only"

#### Part B: Rating System (2-3 hours, $10-15)
1. Create new kind for coach reviews (use nostr_generate_kind)
2. Create ReviewDialog component
3. Add 1-5 star rating
4. Add text review
5. Parse and display reviews on CoachDetailPage
6. Calculate average rating
7. Show "X reviews" count
8. Only verified users can leave reviews

**New Event Kind Needed**:
```json
{
  "kind": <generated>,
  "content": "review text",
  "tags": [
    ["a", "35001:coach-pubkey:identifier"],
    ["rating", "1-5"],
    ["t", "coach-review"]
  ]
}
```

**Files**: Multiple - `BecomeCoachPage.tsx`, `CoachDetailPage.tsx`, new components, types.ts

---

### 13. Shop Ownership Claiming
**Priority**: MEDIUM  
**Effort**: 1.5-2 hours  
**Budget**: $8-10

**Steps**:
1. Create ClaimShopDialog component
2. Add 'claimed_by' tag functionality
3. Require NIP-05 to claim
4. Show "Claimed by [name]" badge on shops
5. Allow original poster OR claimer to edit
6. Add verification checkmark for claimed shops
7. Handle claim conflicts (first claim wins)

**Technical**:
- Add `claimedBy` to SkateSpot interface
- Parse 'claimed_by' tag
- Create claim event (adds tag to existing shop)
- Update parseSkateSpot to handle claimed shops

**Files**: `src/pages/SpotDetailPage.tsx`, `src/lib/types.ts`, new ClaimShopDialog component

---

### 14. Hide Events from Logged-Out Users
**Priority**: LOW  
**Effort**: 30 minutes  
**Budget**: $2-3

**Issue**: Only logged-in users should see event listings

**Steps**:
1. Update EventsPage to check if user is logged in
2. Show "Login to view events" message if logged out
3. Update homepage to hide event section if logged out
4. Add login prompt where events would show

**Files**: `src/pages/EventsPage.tsx`, `src/pages/Index.tsx`

---

### 15. Update Homepage Tagline Explanation
**Priority**: LOW  
**Effort**: 15 minutes  
**Budget**: $1-2

**Current**: "Find Spots • Create Events • Learn • Shop • Contribute • Get Rewarded"

**Update To**: Add subtitle explaining the real-world focus:
> "The magic happens IRL - SkateSpots helps you find it, connect with it, and support it"

Or similar messaging emphasizing that the app enhances real skateboarding culture.

**Files**: `src/pages/Index.tsx`

---

## 📊 TOTAL BREAKDOWN

### By Priority:

| Priority | Features | Effort | Budget |
|----------|----------|--------|--------|
| **CRITICAL** | Signup Fix | 45 min | $3-5 |
| **HIGH** | UI Consistency + Theme + Coach Rating | 6-9 hours | $30-45 |
| **MEDIUM** | Contact Info + Claiming + Links + NIP-05 | 4-5 hours | $20-25 |
| **LOW** | Minor additions | 1-2 hours | $5-10 |

### **TOTAL ESTIMATE**:
- **Time**: 12-16 hours
- **Budget**: $58-85
- **Complexity**: Medium-High (coach rating system most complex)

---

## 🎯 RECOMMENDED IMPLEMENTATION ORDER

### Phase 1: Critical Fixes (1 hour, $5-8)
1. ✅ Fix signup key generation error
2. ✅ Fix Plebeian Market links
3. ✅ Add onboarding link to signup

### Phase 2: UI Polish (4-5 hours, $20-25)
4. ✅ Consistent UI framing across devices
5. ✅ Day/night theme with contrast
6. ✅ Login required notices

### Phase 3: Enhanced Features (5-7 hours, $25-35)
7. ✅ Contact info for spots (private/locals)
8. ✅ NIP-05 providers in settings
9. ✅ Coach contact details (verified only)
10. ✅ Shop claiming enhancement

### Phase 4: Advanced Features (2-3 hours, $10-15)
11. ✅ Coach rating system
12. ✅ Hide events from logged-out users

### Phase 5: Polish (1 hour, $3-7)
13. ✅ Add all missing links (nos2x, wallets, OpenStreetMap)
14. ✅ Update homepage messaging
15. ✅ Final testing across devices

---

## 💡 NOTES & CONSIDERATIONS

### Coach Rating System Complexity:
- Requires new Nostr event kind (needs generation)
- Needs validation to prevent spam
- Aggregation logic for average ratings
- UI for displaying ratings and reviews
- Review submission dialog
- Most complex feature in this list

### Alternative to Coach Ratings:
- Use existing NIP-25 reactions (simpler)
- Use comments only (no star ratings)
- Link to external review system
- **Recommended**: Start with comments, add ratings later

### Shop Claiming:
- First claim wins approach (simple)
- Or allow dispute resolution (complex)
- **Recommended**: Simple first claim + manual dispute

### Contact Info Security:
- Only show to verified users (has NIP-05)
- Prevents spam and abuse
- Builds trust in community

---

## 🚀 IMMEDIATE ACTIONS

**Start with these 3 critical fixes** (can be done in 1 hour):

1. **Fix signup error** - Test and debug key generation
2. **Fix Plebeian links** - Single clear CTA
3. **Add onboarding link** - Help new users

Then we can tackle the larger UI and feature work.

**Would you like me to start with Phase 1 (critical fixes)?**

---

## 📋 DETAILED TASK CHECKLIST

- [ ] Fix signup key generation error (CRITICAL)
- [ ] Consistent UI framing across devices
- [ ] Day/night theme with real contrast
- [ ] Login required notices throughout app
- [ ] Onboarding link in signup dialog
- [ ] nos2x link in onboarding extensions
- [ ] Hyperlinks for all mobile wallets
- [ ] Fix Plebeian Market links (single CTA)
- [ ] NIP-05 providers section in settings (4 options)
- [ ] Contact info for private/ask locals spots
- [ ] Coach contact details (verified users only)
- [ ] Coach rating/review system
- [ ] Shop claiming with ownership field
- [ ] Hide events from logged-out users
- [ ] OpenStreetMap credit on map
- [ ] Update homepage tagline explanation

**Total Tasks**: 16  
**Estimated Time**: 12-16 hours  
**Estimated Budget**: $58-85