Initial commit: IndeeHub decentralized streaming platform

Built a complete Netflix-style streaming interface for IndeeHub's decentralized media platform with real film content.

Features:
- Vue 3 + TypeScript + Vite setup with hot module reloading
- Netflix-inspired UI with hero section and horizontal scrolling content rows
- Glass morphism design system with custom Tailwind configuration
- 20+ real IndeeHub films organized into 6 categories (Bitcoin, Documentaries, Drama, etc.)
- Full-featured video player component with custom controls
- Mobile-responsive design with bottom navigation
- Nostr integration ready (nostr-tools, relay pool, NIP-71 support)
- Pinia state management for content
- MCP tools configured (Filesystem, Memory, Nostr, Puppeteer)

Components:
- Browse.vue: Main streaming interface with hero and content rows
- ContentRow.vue: Horizontal scrolling film cards with navigation arrows
- VideoPlayer.vue: Custom video player with play/pause, seek, volume, fullscreen
- MobileNav.vue: Bottom tab navigation for mobile devices

Tech Stack:
- Frontend: Vue 3 (Composition API), TypeScript
- Build: Vite 7
- Styling: Tailwind CSS with custom theme
- State: Pinia 3
- Router: Vue Router 4.6
- Protocol: Nostr (nostr-tools 2.22)

Design:
- 4px grid spacing system
- Glass morphism UI components
- Netflix-style hero section with featured content
- Smooth animations and hover effects
- Mobile-first responsive breakpoints
- Dark theme with custom color palette

Content:
- 20+ IndeeHub films with titles, descriptions, categories
- Bitcoin documentaries: God Bless Bitcoin, Dirty Coin, Searching for Satoshi
- Independent films and documentaries
- Working Unsplash CDN images for thumbnails and backdrops

Ready for deployment to Umbrel, Start9, and Archy nodes.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/rules/mobile-ux-patterns.mdc

@@ -0,0 +1,118 @@
+---
+description: Mobile-first UX patterns and touch interaction design
+alwaysApply: false
+globs: **/*.{ts,tsx,js,jsx,vue,css,scss}
+---
+
+# Mobile UX Patterns & Touch Interactions
+
+## Mobile-First Philosophy
+
+Start with mobile constraints, then progressively enhance for larger screens.
+
+### Design Process
+
+1. **Mobile (320-480px)**: Core functionality only
+2. **Tablet (768-1024px)**: Add supporting features
+3. **Desktop (1280px+)**: Enhanced experience
+
+## Touch Target Sizing
+
+### Minimum 44x44px Touch Targets
+
+```css
+.touch-target {
+  min-width: 44px;
+  min-height: 44px;
+  /* Apple HIG recommendation */
+}
+
+.touch-target-optimal {
+  min-width: 48px;
+  min-height: 48px;
+  /* Material Design recommendation */
+}
+```
+
+### Spacing Between Targets
+
+```css
+.button-group {
+  display: flex;
+  gap: 16px; /* Comfortable spacing */
+}
+```
+
+## Thumb-Friendly Zones
+
+```
+┌─────────────────┐
+│  Hard to reach  │ ← Top 20%
+├─────────────────┤
+│   Easy reach    │ ← Middle 60%
+├─────────────────┤
+│  Natural thumb  │ ← Bottom 20%
+│      zone       │ (place primary actions here)
+└─────────────────┘
+```
+
+Primary actions should be placed in the bottom 20% for one-handed use.
+
+## Dynamic Viewport Height
+
+```css
+/* Use dvh instead of vh for mobile */
+.hero {
+  height: 100dvh; /* Dynamic viewport height */
+}
+
+/* Fallback for older browsers */
+.hero {
+  height: 100vh;
+  height: 100dvh;
+}
+```
+
+## Safe Area Insets (iOS)
+
+```css
+.header {
+  padding-top: env(safe-area-inset-top);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+.footer {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+```
+
+## Form Input Optimization
+
+```html
+<!-- Use correct input types for mobile keyboards -->
+<input type="email" inputmode="email">
+<input type="number" inputmode="numeric">
+<input type="tel" inputmode="tel">
+<input type="url" inputmode="url">
+```
+
+```css
+/* Prevent iOS zoom on focus */
+input, select, textarea {
+  font-size: 16px; /* Minimum to prevent zoom */
+}
+```
+
+## Touch Feedback
+
+```css
+.button {
+  transition: transform 0.1s ease, opacity 0.1s ease;
+}
+
+.button:active {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
+```