Init with specs

specs/archived/011-mobile-first-ui/README.md

@@ -0,0 +1,74 @@
+---
+status: archived
+created: '2026-03-16'
+tags:
+  - ui
+  - mobile
+priority: high
+created_at: '2026-03-16T07:51:51.869Z'
+related:
+  - 005-poll-creation-management
+  - 008-voting-system
+  - 009-public-sharing
+updated_at: '2026-03-16T09:07:18.408Z'
+transitions:
+  - status: archived
+    at: '2026-03-16T09:07:18.408Z'
+---
+
+# Mobile-First UI Design
+
+> **Status**: 📦 Archived · **Priority**: High · **Created**: 2026-03-16 · **Tags**: ui, mobile
+
+## Overview
+
+Design all UI mobile-first. The primary use case is people voting on their phones. Desktop is a secondary concern—layouts should scale up, not be shoehorned down.
+
+## Design
+
+### Principles
+
+- Touch targets ≥ 44px
+- Single-column layout on mobile; expand on larger screens
+- Bottom navigation bar (thumb-friendly)
+- Minimal chrome—content first
+- System font stack for performance
+
+### Key Screens
+
+1. **Home / Poll list**: Cards showing poll title, status, vote count
+2. **Create poll**: Simple form, large inputs, toggle for anonymity
+3. **Poll detail**: Results visualization, vote buttons, participant list
+4. **Profile**: Edit name, bio, tags
+5. **Poll management** (owner/mod): User list, role controls, start/stop
+
+### Navigation
+
+- Bottom tab bar: Home, Create (+), Profile
+- Poll detail accessed by tapping a poll card
+- Management accessed via gear icon within poll detail
+
+### Styling
+
+- Tailwind CSS with mobile breakpoints as default
+- Dark mode support (respects `prefers-color-scheme`)
+- CSS transitions for state changes (vote submitted, poll status change)
+
+## Plan
+
+- [ ] Design bottom tab navigation component
+- [ ] Build poll list (home) with card layout
+- [ ] Build poll creation form (mobile-optimized)
+- [ ] Build poll detail view with results visualization
+- [ ] Build profile edit page with tag management
+- [ ] Build poll management panel (users, roles, lifecycle)
+- [ ] Add dark mode toggle / system preference detection
+- [ ] Test on various mobile viewport sizes
+
+## Test
+
+- [ ] All touch targets meet 44px minimum
+- [ ] Layout works on 320px–428px width (small to large phones)
+- [ ] No horizontal scroll on any page
+- [ ] Dark mode renders correctly
+- [ ] Navigation is accessible via keyboard/screen reader