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>
- Updated the `seedComments` function to return an array of published comment event IDs for tracking.
- Introduced `seedCommentReactions` to seed upvotes and downvotes on comments, improving interaction visibility.
- Enhanced the `App.vue` and `MobileNav.vue` components to support a mobile search overlay, allowing users to search films seamlessly.
- Added a new `MobileSearch` component for better search experience on mobile devices.
- Implemented a search feature in `AppHeader.vue` with dropdown results for improved content discovery.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Introduced a new content source toggle in the profile and app header to switch between IndeeHub and TopDoc films.
- Updated the content fetching logic to dynamically load content based on the selected source.
- Enhanced the seeding process to include a combined catalog of IndeeHub and TopDoc films, ensuring diverse content availability.
- Improved user interaction by preventing duplicate reactions and ensuring a smoother voting experience across comments and content.
- Added support for Amber login (NIP-55) for Android users, integrating it into the existing authentication flow.
Co-authored-by: Cursor <cursoragent@cursor.com>
Replaced the grid layout on the algo filter view with the same flex
slider container (gap-8, pt-6 pb-8, fixed card widths) used by
ContentRow and My List, with flex-wrap so all items remain visible.
Co-authored-by: Cursor <cursoragent@cursor.com>
Replaced grid layout in My List sections with the same horizontal
scroll slider used by ContentRow: flex gap-8, fixed card widths
(200px/280px), matching padding and overflow behavior. Cards,
spacing, and scrolling now look identical across Films and My List.
Co-authored-by: Cursor <cursoragent@cursor.com>
Title and description text sizes in the My List (Continue Watching,
Saved Films, Rentals) and filtered grid views were smaller than
the Films tab ContentRow cards. Aligned all to use the same
text-base/md:text-xl title and text-base description sizing.
Co-authored-by: Cursor <cursoragent@cursor.com>
Add the same truncated description line to Continue Watching
and My Rentals grids so card sizing matches the other screens.
Co-authored-by: Cursor <cursoragent@cursor.com>
- Clicking My List when not logged in now opens the auth modal
directly instead of navigating to a page with a sign-in button
- After successful login, auto-redirects to /library (My List)
- Works on both desktop header and mobile tab bar
- App.vue tracks a pending redirect path so the post-login
navigation happens seamlessly
- Direct URL navigation to /library when not logged in also
triggers the modal and redirects back to Films
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add nostr-rs-relay service to docker-compose for persistent
comments, reactions, and profiles on the dev server
- Add one-shot seeder container that auto-populates the relay
with test personas, reactions, and comments on first deploy
- Proxy WebSocket connections through nginx at /relay so the
frontend connects to the relay on the same host (no CORS)
- Make relay URL dynamic: reads from VITE_NOSTR_RELAYS in dev,
auto-detects /relay proxy path in production Docker builds
- Make seed scripts configurable via RELAY_URL and ORIGIN env vars
- Add wait-for-relay script for reliable container orchestration
- Add "Resume last played" hero banner on My List tab
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.
Applied same styling as content row titles:
- Gradient from #fafafa to #9ca3af
- letter-spacing: 0.05em (5% character spacing)
- Used background-clip: text for gradient effect
- Maintains uppercase and bold styling
Hero title now matches the visual language of section titles.
Co-authored-by: Cursor <cursoragent@cursor.com>
Changes:
- Moved .profile-avatar styles from Browse.vue to src/style.css
- Restored original gradient fill: orange (#f97316) to pink (#ec4899)
- Kept gradient border treatment
- Added z-index to span for proper layering
- Now available globally for reuse
Co-authored-by: Cursor <cursoragent@cursor.com>
Applied the same gradient border treatment as other UI elements:
- Inner gradient fill: Red to orange to blue
- Outer gradient border: White to red with mask composite
- 2px border width with rounded corners
- Applied to both desktop and mobile profile avatars
Co-authored-by: Cursor <cursoragent@cursor.com>
- Logo: ml-2 on mobile (8px left margin)
- Profile: mr-2 on mobile (8px right margin)
- Desktop: ml-0/mr-0 (no extra margins)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Reduce opacity from 0.95 to 0.85 (85% transparent)
- Hover state: 0.95 for subtle feedback
- More glassmorphic appearance with background showing through
- Better matches design system glass aesthetic
Co-authored-by: Cursor <cursoragent@cursor.com>
Header Layout Changes:
- Move navigation buttons next to logo on left side (40px gap)
- Remove centered navigation positioning
- Add profile dropdown after search on right side
Profile Dropdown Features:
- Shows user avatar, name 'Dorian', and chevron icon
- Glassmorphic dropdown menu with our button styles
- Menu items: Profile, Settings, Sign Out
- Icons for each menu item
- Smooth slide-down animation
- Click outside to close
- Desktop only (hidden on mobile)
- Uses same glass effect as nav buttons
Responsive:
- Mobile shows simple avatar without dropdown
- Search button hidden on mobile
- Nav stays in mobile bottom bar
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>
- Updated film data to use 21 locally downloaded images
- All posters and backdrops now served from /public/images/films/
- No external CDN dependencies for core films
- Includes Bitcoin docs, dramas, and independent films
- Images: webp, png, jpeg formats (optimized)
Co-authored-by: Cursor <cursoragent@cursor.com>
- Downloaded 15 film posters and backdrops from CloudFront CDN
- Updated film data to use local images where available
- Remaining films still use CDN URLs
- Images saved in public/images/films/ directory
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replaced placeholder content with 20 real IndeeHub films
- All films now use IndeeHub's CloudFront CDN for images
- Added actual film titles, descriptions, and metadata
- Reduced hero section height (60vh/65vh) for better fold usage
- Content starts higher on page with more visible films
Films include:
- Bitcoin documentaries: God Bless Bitcoin, Bitcoiners, Hard Money
- Dramas: The Things We Carry, Kismet, Clemont, Bender
- Economics: Bitcoin: End of Money, Menger Notes, Housing Bubble
- Plus shorts and independent films
Images served from d1yvaqj97q119b.cloudfront.net
Co-authored-by: Cursor <cursoragent@cursor.com>
- Made header transparent on scroll for premium Netflix-style look
- Added browser console script to download all IndeeHub images
- Created Python script for batch image downloading
- Added shell script for curl-based downloads
The header now starts fully transparent and transitions to semi-transparent
black with blur when scrolling, creating a floating navigation effect.
Download scripts will extract all film posters, backdrops, and metadata
from IndeeHub.studio screening room.
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>
