16 — Menu Architecture, ContactID & Platform Design
Reference/Archive — superseded by
00-ROADMAP.mdon any conflict. Written for a web-first + Capacitor strategy that is superseded (iOS is native SwiftUI; one dashboard per20-UI-SIMPLIFICATION.md). Update 2026-07-03: ContactID is now a Release headline feature — the release-era spec is53-CONTACTID-RELEASE.md, which supersedes this doc's framing (web placement, React/qrcode.reactimplementation plan, effort table). The card-design exploration below (three visual concepts, "Vinyl Card" recommended) remains valid reference.
Purpose: Design exploration for navigation/menu system, ContactID feature, and iOS/iPadOS considerations. Date: March 2026 Context: Web-first deployment with strong iOS/iPadOS ambition. ContactID elevated to Phase 0-1 priority.
Table of Contents
- ContactID — Feature Design
- Menu & Navigation Architecture
- Menu Component Options — Desktop vs Mobile
- iOS/iPadOS Considerations
- Design Decision Matrix
1. ContactID — Feature Design
Why Phase 0-1 (Not Phase 4)
ContactID is not a gimmick — it's the social currency of the platform. In 2026+, every professional creative needs a shareable digital identity that works at events, studios, networking sessions, and online. It's the first thing you share when you meet someone in the industry.
| Without ContactID | With ContactID |
|---|---|
| "What's your Instagram?" → fragmented | "Scan my Sonnance card" → entire portfolio |
| Email a Google Drive link | One tap → public portfolio + tracks + CV |
| Business card with Linktree | Living, verified professional identity |
| No proof of credits | Verifiable credit history + collaborations |
ContactID v1 Scope (Phase 0-1)
| Feature | Description | Complexity |
|---|---|---|
| QR Code | Dynamic QR linking to public profile | Low |
| Share Link | Copyable URL (sonnance.com/@username) | Low |
| Card Preview | Visual card design with avatar, name, role, key stats | Medium |
| Download as Image | Save card as PNG for social media | Low |
| Add to Apple Wallet | .pkpass generation for iOS Wallet | Medium |
| NFC Write (future v2) | Write URL to NFC tag from mobile app | Phase 3 |
ContactID v1 — Where It Lives
Primary Access: Profile Dropdown
┌─────────────────────────────────┐
│ ┌──────┐ │
│ │Avatar│ Facundo Ferreyra │
│ └──────┘ facundo@sonnance.com │
├─────────────────────────────────┤
│ ★ My ContactID [→] │ ← NEW: Opens ContactID modal/page
│ ───────────────────────────── │
│ ⚙ Account Settings │
│ 🔄 Replay Onboarding │
│ 🎨 Appearance [dark ▾] │
│ ───────────────────────────── │
│ ↪ Sign Out │
└─────────────────────────────────┘Secondary Access Points:
- Profile page → "Share My Profile" button → opens ContactID card
- Account Settings → new "ContactID" tab
- Share modal → "Share as ContactID" option
ContactID Card — 3 Design Options
Option A: "Vinyl Card" (Recommended)
Fits the Sonnance brand identity. The card looks like a vinyl record sleeve.
┌─────────────────────────────────────────────┐
│ │
│ DESKTOP / TABLET │
│ │
│ ┌────────────────────────────────────┐ │
│ │ ╭─────────╮ │ │
│ │ │ │ FACUNDO FERREYRA │ │
│ │ │ Avatar │ @facundo │ │
│ │ │ (CD │ Producer · Madrid │ │
│ │ │ style) │ │ │
│ │ ╰─────────╯ ♪ 42 tracks │ │
│ │ ★ 12 projects │ │
│ │ 👥 8 collabs │ │
│ │ │ │
│ │ ┌─────────┐ [Copy Link] │ │
│ │ │ QR │ [Download Card] │ │
│ │ │ Code │ [Add to Wallet] │ │
│ │ │ │ [Share...] │ │
│ │ └─────────┘ │ │
│ │ │ │
│ │ sonnance.com/@facundo │ │
│ └────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────┘
┌─────────────────────────┐
│ │
│ MOBILE │
│ │
│ ╭──────────────────╮ │
│ │ │ │
│ │ ┌──────┐ │ │
│ │ │Avatar│ │ │
│ │ │ (CD) │ │ │
│ │ └──────┘ │ │
│ │ │ │
│ │ FACUNDO FERREYRA │ │
│ │ @facundo │ │
│ │ Producer · Madrid│ │
│ │ │ │
│ │ ♪42 ★12 👥8 │ │
│ │ │ │
│ │ ┌─────────┐ │ │
│ │ │ QR Code │ │ │
│ │ └─────────┘ │ │
│ │ │ │
│ ╰──────────────────╯ │
│ │
│ [Copy Link] │
│ [Download Card] │
│ [Add to Wallet] │
│ [Share...] │
│ │
└─────────────────────────┘Option B: "Studio Pass" (Badge Style)
Inspired by backstage passes / VIP badges. Vertical format, lanyard aesthetic.
DESKTOP MOBILE
┌───────────────────────┐ ┌──────────────────┐
│ · SONNANCE · │ │ · SONNANCE · │
│ ╭──────────────╮ │ │ ╭────────────╮ │
│ │ │ │ │ │ │ │
│ │ [Avatar] │ │ │ │ [Avatar] │ │
│ │ │ │ │ │ │ │
│ ╰──────────────╯ │ │ ╰────────────╯ │
│ │ │ │
│ FACUNDO FERREYRA │ │ FACUNDO FERREYRA │
│ ───────────────── │ │ ──────────────── │
│ Producer · Musician │ │ Producer │
│ Madrid, Spain │ │ Madrid │
│ │ │ │
│ ♪ 42 tracks │ │ ♪42 ★12 👥8 │
│ ★ 12 projects │ │ │
│ 👥 8 collaborations │ │ ┌────────────┐ │
│ │ │ │ QR Code │ │
│ ┌────────┐ [Actions] │ │ └────────────┘ │
│ │QR Code │ Copy Link │ │ │
│ │ │ Download │ │ [Actions...] │
│ │ │ Wallet │ └──────────────────┘
│ └────────┘ Share │
│ │
│ ═══════════════════ │
│ sonnance.com/@user │
└───────────────────────┘Option C: "Minimal Card" (Modern/Clean)
Borderless, floating, Apple-inspired. Relies on backdrop blur and subtle shadows.
DESKTOP MOBILE
╭──────────────────────────────╮ ╭───────────────────╮
│ │ │ │
│ [Avatar] FACUNDO FERREYRA │ │ [Avatar] │
│ @facundo │ │ │
│ Producer · Madrid │ │ Facundo Ferreyra │
│ │ │ @facundo │
│ ♪ 42 ★ 12 👥 8 │ │ Producer · Madrid │
│ │ │ │
│ ┌──────┐ │ │ ♪42 ★12 👥8 │
│ │ QR │ sonnance/@facundo │ │ │
│ └──────┘ │ │ ┌──────┐ │
│ │ │ │ QR │ │
│ [Copy] [Download] [Wallet] │ │ └──────┘ │
╰──────────────────────────────╯ │ │
│ [Copy] [↓] [W] │
╰───────────────────╯ContactID — Recommended Implementation
Option A (Vinyl Card) aligns best with Sonnance's brand (CD/vinyl metaphors, music industry aesthetic). The card becomes a shareable brand asset — users will screenshot and share it on social media, which is organic marketing.
Implementation path:
- Create
ContactIdCardcomponent (React + Tailwind) - Add QR generation (library:
qrcode.react) - Add "Download as PNG" (library:
html-to-image) - Add to Profile Dropdown menu
- Add Apple Wallet pass generation (backend:
.pkpassviapasskit-generator) - Create public profile route:
/u/[username]or/@[username]
2. Menu & Navigation Architecture
Current State Analysis
| Element | Desktop (Beryllium) | Mobile | Issues |
|---|---|---|---|
| Left sidebar | Icon rail (Home, Library, Usage) | Hidden → hamburger drawer | Only 3 items — underutilizes the space |
| Header | Search + Notifications + Profile | Same but compact | No messages, no quick actions |
| Profile dropdown | Settings, Appearance, Sign Out | Same | Missing: ContactID, Profile, Team |
| Bottom bar | Contextual player/actions | Same | Not a true mobile nav — no persistent tabs |
| Account Settings | My Details, Subscription, Usage tabs | Same | 5 tabs commented out (Profile, Password, Team, Notifications, Integrations) |
Proposed Menu Architecture — 3 Options
Option 1: "Spotify-Style" (Recommended for Music SaaS)
Why: Users already understand this pattern. Left sidebar for navigation, right panel for context.
DESKTOP / TABLET (landscape)
┌────┬──────────────────────────────────────────────────────┐
│ │ ┌─ Search ─────────────────┐ 🔔 💬 [Avatar ▾] │
│ │ └──────────────────────────┘ │
│ ┌──┤──────────────────────────────────────────────────────┤
│ │🏠│ │
│ │ │ MAIN CONTENT AREA │
│ │📚│ │
│ │ │ (Dashboard / Artist / Project / Track / Wave) │
│ │🎵│ │
│ │ │ │
│ │📊│ │
│ │ │ │
│ │──│ │
│ │📁│ │
│ │ │ │
│ │🗑│ │
│ └──┘ │
├───────────────────────────────────────────────────────────┤
│ ◀ ▶ │ ♪ Track Name ─────●─────── 2:34/4:12 │ 🔊─── │
└───────────────────────────────────────────────────────────┘
SIDEBAR ITEMS (expanded on hover or click):
──────────────────────
🏠 Home (Dashboard)
📚 Library
🎵 Projects
📊 Insights
──────────────────────
📁 Transfers
🗑 Trash
☁️ Storage
──────────────────────
＋ New Space
──────────────────────MOBILE (iPhone / iPad portrait)
┌──────────────────────────────────┐
│ [☰] SONNANCE 🔔 [Avatar] │
├──────────────────────────────────┤
│ │
│ MAIN CONTENT AREA │
│ │
│ (scrollable, full-width) │
│ │
│ │
├──────────────────────────────────┤
│ ♪ Track ──●── 2:34 ▶ │ 🔊 │ ← Mini player (if playing)
├──────────────────────────────────┤
│ 🏠 📚 ＋ 🔔 👤 │ ← Bottom tab bar (persistent)
│ Home Lib Create Alerts Me │
└──────────────────────────────────┘Option 2: "Notion-Style" (Sidebar Focus)
Why: Power users love it. Emphasizes workspace hierarchy.
DESKTOP / TABLET
┌─────────────────┬──────────────────────────────────────┐
│ SONNANCE │ 🔍 Search 🔔 💬 [👤 ▾] │
│ ├──────────────────────────────────────┤
│ ★ Quick Access │ │
│ Recent Tracks│ MAIN CONTENT AREA │
│ Favorites │ │
│ │ │
│ ───────────── │ │
│ 📂 My Spaces │ │
│ ├ Studio X │ │
│ ├ Band Y │ │
│ └ Solo... │ │
│ │ │
│ 📁 Transfers │ │
│ 📚 Library │ │
│ 📊 Insights │ │
│ │ │
│ ───────────── │ │
│ 🗑 Trash │ │
│ ☁️ Storage │ │
│ ⚙ Settings │ │
│ │ │
│ ───────────── │ │
│ ＋ New Space │ │
├─────────────────┴──────────────────────────────────────┤
│ ◀ ▶ │ ♪ Track ──────●─────── 2:34/4:12 │ 🔊─── │
└────────────────────────────────────────────────────────┘
MOBILE: Same bottom tab bar as Option 1Option 3: "Apple Music / Pro" (Top Nav + Sidebar Hybrid)
Why: Familiar for Apple ecosystem users (iPad/iOS target). Great for tablet landscape.
DESKTOP / TABLET (landscape)
┌──────────────────────────────────────────────────────────┐
│ SONNANCE [Home] [Library] [Projects] [Insights] │
│ 🔍 🔔 💬 [👤 ▾] │
├──────────────────────────────────────────────────────────┤
│ │
│ MAIN CONTENT AREA │
│ │
│ (Full width. Secondary nav via tabs within pages) │
│ │
│ │
├──────────────────────────────────────────────────────────┤
│ ◀ ▶ │ ♪ Track ──────●─────── 2:34/4:12 │ 🔊─── │
└──────────────────────────────────────────────────────────┘
iPAD PORTRAIT: Compact top tabs, hamburger for overflow items
MOBILE: Bottom tab bar (same as Option 1)Navigation Comparison
| Criteria | Option 1 (Spotify) | Option 2 (Notion) | Option 3 (Apple) |
|---|---|---|---|
| Familiarity | ★★★★★ | ★★★★☆ | ★★★★★ |
| Scalability (add more items) | ★★★★☆ | ★★★★★ | ★★★☆☆ |
| Mobile adaptation | ★★★★★ | ★★★★☆ | ★★★★☆ |
| Complexity to build | Low (close to current) | Medium (tree nav) | Medium (top tabs new) |
| Fits music aesthetic | ★★★★★ | ★★★☆☆ | ★★★★☆ |
| iPad landscape | ★★★★☆ | ★★★★★ | ★★★★★ |
| WOW factor | ★★★★☆ | ★★★☆☆ | ★★★★☆ |
| Progressive disclosure | ★★★★☆ | ★★★★★ | ★★★☆☆ |
Recommendation: Option 1 (Spotify-Style) for Phase 0-1. It's closest to the current Beryllium layout (just expand the icon rail), universally understood, and scales well. Migrate toward Option 2 patterns as the feature set grows (Phase 2+).
3. Menu Component Options — Desktop vs Mobile
Desktop/Tablet Menu Items (Recommended)
Organized by frequency of use and user flow:
SIDEBAR (left rail, expandable)
────────────────────────────────
MAIN
🏠 Home / Dashboard
📚 Library
🎵 Projects ← dedicaed projects view (all projects across spaces)
📊 Insights ← AI-powered analytics
COLLABORATE
💬 Messages ← Phase 1 (DMs + group)
📁 Transfers ← already exists (uncomment)
👥 Network ← Phase 2 (discovery/maps)
MANAGE
📋 Kanban ← Phase 1-2
📅 Calendar ← Phase 2
📄 Contracts ← Phase 2
SYSTEM
🗑 Trash ← already exists (uncomment)
☁️ Storage
＋ New Space ← primary CTA
────────────────────────────────Mobile Bottom Tab Bar (5 items max — iOS HIG)
| Tab | Icon | Label | Notes |
|---|---|---|---|
| Home | 🏠 | Home | Dashboard with recent, insights, notifications |
| Library | 📚 | Library | All content browse/search |
| Create | ＋ | (center fab) | New Space / New Project / Upload — action sheet |
| Activity | 🔔 | Activity | Notifications + mentions + messages combined |
| Profile | 👤 | Me | Profile, ContactID, Settings, Subscription |
Why 5: iOS Human Interface Guidelines recommend max 5 tabs. The center "Create" button is a floating action — most engaging pattern for creator tools.
Profile/Me Tab Content (Mobile)
When tapping "Me" on mobile, shows a full profile page:
┌──────────────────────────────┐
│ ╭──────╮ │
│ │Avatar│ Facundo Ferreyra │
│ ╰──────╯ @facundo │
│ Producer · Madrid│
│ │
│ [★ My ContactID] │ ← Primary action
│ [✏️ Edit Profile] │
│ │
│ ─── STATS ────────────── │
│ ♪ 42 tracks ★ 12 projects │
│ 👥 8 collabs ☁️ 12GB used │
│ │
│ ─── MENU ─────────────── │
│ 📁 Transfers │
│ 📋 Kanban │
│ 📄 Contracts │
│ 📅 Calendar │
│ ☁️ Storage │
│ 🗑 Trash │
│ ───────────────────────── │
│ ⚙ Settings │
│ 💳 Subscription │
│ 📊 Usage │
│ ───────────────────────── │
│ ↪ Sign Out │
└──────────────────────────────┘Header (Desktop) — Recommended Components
┌────────────────────────────────────────────────────────────┐
│ [☰/◀] ┌─ 🔍 Search artists, projects, tracks ──────┐ │
│ └─────────────────────────────────────────────┘ │
│ │
│ 🔔(3) 💬(2) [Avatar ▾] │
│ notif. messages profile menu │
└────────────────────────────────────────────────────────────┘New additions vs current:
- Messages icon (💬) — currently commented out. Uncomment + connect to messaging feature (Phase 1)
- Notification count badge — already exists, enhance with smart grouping
Profile Dropdown (Desktop) — Recommended
Current → Proposed additions marked with [NEW]
┌─────────────────────────────────┐
│ ┌──────┐ │
│ │Avatar│ Facundo Ferreyra │
│ └──────┘ facundo@sonnance.com │
├─────────────────────────────────┤
│ ★ My ContactID [NEW] │ ← Opens ContactID modal
│ 👤 My Profile [NEW] │ ← Goes to /profile (uncomment)
│ ───────────────────────────── │
│ ⚙ Account Settings │ ← existing
│ 💳 Subscription [NEW] │ ← direct link
│ 📊 Usage [NEW] │ ← direct link
│ ───────────────────────────── │
│ 🔄 Replay Onboarding │ ← existing
│ 🎨 Appearance [dark ▾] │ ← existing
│ ───────────────────────────── │
│ ↪ Sign Out │ ← existing
└─────────────────────────────────┘4. iOS/iPadOS Considerations
Deployment Strategy
| Phase | Platform | Technology | Notes |
|---|---|---|---|
| Now (Phase 0) | Web (all devices) | Next.js + PWA | Add PWA manifest, icons, splash screens |
| Phase 1 | iOS/iPadOS (PWA) | Safari Add to Home Screen | Instant "app" feel with no App Store |
| Phase 2 | iOS/iPadOS (native wrapper) | Capacitor.js or React Native WebView | App Store presence, push notifications |
| Phase 3 | Native iOS app | React Native or Swift UI | Full native experience, NFC, Apple Wallet deep integration |
PWA-First (Recommended for Phase 0-1)
A Progressive Web App gives 80% of native feel with 20% of the effort:
| Feature | PWA Support (2026 Safari) | Native Required? |
|---|---|---|
| Offline mode | ✅ Service Workers | No |
| Home screen icon | ✅ Web App Manifest | No |
| Push notifications | ✅ (Safari 16.4+) | No |
| Full-screen mode | ✅ standalone display | No |
| Audio playback (background) | ⚠️ Limited | For background play: yes |
| NFC reading/writing | ❌ | Yes |
| Apple Wallet passes | ✅ (via .pkpass download) | No |
| QR code scanning | ✅ (camera API) | No |
| Haptic feedback | ❌ | Yes |
iPad Layout Adaptations
iPAD LANDSCAPE (1024px+)
─────────────────────────────────────────────────
Same as desktop — sidebar + content + player bar.
Consider: wider content area, side-by-side panels
(e.g., track list + waveform player simultaneously).
iPAD PORTRAIT (768-1024px)
─────────────────────────────────────────────────
Collapsible sidebar (icon-only rail like Beryllium).
Tap icon → slide-out panel with full labels.
Content takes most of the width.
Bottom player bar remains.
iPAD SPLIT VIEW / SLIDE OVER
─────────────────────────────────────────────────
Graceful degradation to mobile layout when window
is narrow (multitasking). Already handled by
responsive breakpoints.iOS-Specific Design Tokens
| Element | iOS HIG Recommendation | Sonnance Adaptation |
|---|---|---|
| Tab bar | Bottom, max 5 items, filled icons | ✅ Match exactly for mobile bottom tabs |
| Navigation | Large title collapses on scroll | Apply to page headers (Dashboard, Library) |
| Modals | Sheet presentation (drag to dismiss) | Already using RizzUI drawers — add drag handle |
| Haptics | Light tap on button press | Add via Capacitor when native wrapper ships |
| Safe areas | Respect notch + home indicator | Tailwind safe-area-inset-* classes |
| Dynamic Island | Live Activity for now-playing | Phase 3 (native only) |
5. Design Decision Matrix
Summary of Recommendations
| Decision | Recommended Option | Rationale |
|---|---|---|
| ContactID design | Option A (Vinyl Card) | Brand alignment, shareable aesthetic, WOW factor |
| ContactID access | Profile dropdown (primary) + Profile page button | Low friction, discoverable, doesn't clutter main nav |
| Desktop nav | Option 1 (Spotify-style sidebar) | Closest to current code, universally understood, music-native |
| Mobile nav | 5-tab bottom bar (Home, Library, Create, Activity, Me) | iOS HIG standard, covers all key flows |
| iPad nav | Desktop layout with collapsible sidebar | Maximizes screen real estate |
| iOS deployment | PWA first → Capacitor wrapper → Native (phased) | Fastest to market, progressive investment |
| Menu items to add now | Projects, Insights, Transfers (uncomment), Trash (uncomment) | Quick wins — most already exist in code |
| Profile dropdown additions | ContactID, My Profile, Subscription, Usage | No new pages needed — just links + ContactID modal |
Implementation Priority
| Step | What | Effort | Impact |
|---|---|---|---|
| 1 | Uncomment Messages icon in header | 5 min | Visual placeholder ready |
| 2 | Uncomment Transfers + Trash in sidebar | 5 min | 2 more nav items instantly |
| 3 | Add ContactID to profile dropdown | 1 day | New menu item + placeholder modal |
| 4 | Uncomment Profile/Password/Team/Notifications in Account Settings nav | 10 min | Full settings visible |
| 5 | Build ContactID card component (QR + share link) | 3-5 days | Shareable identity — first differentiator |
| 6 | Add "Projects" sidebar item (aggregate view) | 2-3 days | Quick access across all spaces |
| 7 | Add mobile bottom tab bar | 3-5 days | Mobile UX transformation |
| 8 | Add PWA manifest + icons + splash | 1-2 days | iOS home screen installable |
| 9 | Build Messages feature (DMs) | 4-6 weeks | Social layer foundation |
| 10 | Build Insights/Analytics page | 3-4 weeks | AI agent surface area |
Appendix: Component Library Recommendations
For new features, leverage the existing stack:
| Need | Recommended | Already in project? |
|---|---|---|
| QR Code generation | qrcode.react | No — add |
| Card export to PNG | html-to-image | No — add |
| Apple Wallet passes | passkit-generator (backend) | No — add |
| Bottom tab bar | Custom with Tailwind + Framer Motion | Build (small component) |
| Kanban board | @hello-pangea/dnd (already have DnD) | Evaluate — may already have dnd lib |
| Calendar | react-day-picker or RizzUI datepicker | Check RizzUI |
| Chat/Messages | Socket.io (already configured) + custom UI | Socket exists — build UI |
| Maps | react-map-gl (Mapbox) or Google Maps | No — add |
| Rich text (posts) | tiptap editor | No — add |