Cards were feeling too large at 5 per row. Updated calc to fit 6
cards uniformly across ContentRow and Browse (My List sections).
Co-authored-by: Cursor <cursoragent@cursor.com>
Cards used a fixed 280px width which showed ~6 on most desktops.
Algorithm filter tabs used a 5-column grid. This mismatch caused
layout jumping when switching tabs.
Now uses calc((100vw - 12rem) / 5) so exactly 5 cards are visible
on desktop for all scroll rows (Films, My List, Rentals, etc.),
matching the 5-column grid in filter views. Mobile stays at 200px.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Added several new dependencies related to the Applesauce library, including 'applesauce-accounts', 'applesauce-common', 'applesauce-core', 'applesauce-loaders', 'applesauce-relay', and 'applesauce-signers', all at version 5.1.0.
- Updated the development script in package.json to specify a port for Vite and added new seed scripts for profiles and activity.
- Removed outdated image files from the public directory to clean up unused assets.
- Enhanced the App.vue structure by integrating shared components like AppHeader and AuthModal for improved user experience.
- Refactored ContentDetailModal and MobileNav components to support new features and improve usability.
These changes improve the overall functionality and maintainability of the application while ensuring it utilizes the latest libraries for better performance.
- Added detailed labels to the deployment script for IndeedHub, including title, version, description, license, icon, and repository URL.
- Updated package dependencies in package.json and package-lock.json, including upgrading 'nostr-tools' to version 2.23.0 and adding 'axios' and '@tanstack/vue-query'.
- Improved README with a modern description of the platform and updated project structure details.
This commit enhances the clarity of the deployment process and ensures the project is using the latest dependencies for better performance and features.
Restructured scroll navigation:
- Arrow icons now in their own glass containers
- Minimal padding: 8px around icons
- 12px border-radius for rounded corners
- Positioned with left-2/right-2 and centered vertically
- Smaller, more elegant design
- Scale(1.05) on hover for subtle feedback
Icons are now compact glass pills instead of full-height bars.
Co-authored-by: Cursor <cursoragent@cursor.com>
Styled scroll buttons with glass treatment:
- Background: rgba(0, 0, 0, 0.35) with 24px backdrop blur
- Border: Subtle white border with glow
- Box shadow: Layered shadows with inset highlight
- Hover: Darker background with enhanced glow
- Opacity: 70% default, 100% on hover
- Matches overall glassmorphic design language
Buttons now have the same elegant glass styling as other UI elements.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed scroll buttons behavior:
- Always visible at 70% opacity when there's more content to scroll
- Increase to 100% opacity on hover
- Removed group-hover requirement
- Only show when canScrollLeft/canScrollRight is true
Users now have a clear indicator when more content is available
without needing to hover over the content row.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed content row titles to:
- font-bold (700 weight) for more emphasis
- letter-spacing: 0.05em (5% character spacing)
- Maintains gradient effect from #fafafa to #9ca3af
- More prominent and readable
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed content row titles to:
- font-semibold (less bold than before)
- Added gradient: #fafafa (very light grey) to #9ca3af (light grey)
- Used background-clip: text for gradient effect
- More subtle and elegant appearance
Co-authored-by: Cursor <cursoragent@cursor.com>
Changed section titles (Featured Films, etc.) to:
- Uppercase with 'uppercase' class
- font-bold on mobile, font-extrabold on desktop
- More prominent and attention-grabbing
Co-authored-by: Cursor <cursoragent@cursor.com>
- Update app-icon.svg with new gradient strokes and circle element
- Update logo.svg with matching design improvements and gradient borders
- Increase film title size to 20px (text-xl) with bold weight on desktop
- Keep 16px (text-base) with semibold weight on mobile for better proportions
Co-authored-by: Cursor <cursoragent@cursor.com>
- Added custom fonts 'Blade Knight' and 'Coligra' for a unique aesthetic
- Updated background color and styling for body and app components
- Improved content card design with glass morphism effects and hover states
- Enhanced mobile navigation with a floating glass effect and updated button styles
- Adjusted header layout for better responsiveness and visual appeal
Co-authored-by: Cursor <cursoragent@cursor.com>
- Updated content card width from 140/180px to 200/280px for improved visibility
- Changed image class to use 'object-contain' and added background color for better aesthetics
- Introduced a gradient background for the header with dynamic styles based on scroll position
- Added new CSS classes for header gradient effects and improved backdrop filter for a modern look
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduced card width from 200/280px to 140/180px
- Increased gap between cards from 8px to 32px (gap-8)
- Added vertical padding (py-4) to content rows
- Made title text smaller and responsive
- Hide description on mobile for cleaner look
Co-authored-by: Cursor <cursoragent@cursor.com>
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>
