[Feat] all pro sessions at one place

[apsinghdev]

Description

we want to host all of our pro weekly sessions at one place so all the users can have it at a single consolidated place

also we wanna show what topics are covered in each session so that they can directly jump into those parts

we can add this somewhere inside /pro/dashboard

pls come up with an ui for it.

Context

No response

Additional Information

No response

[Lucifer-0612]

Pro Weekly Sessions UI - Proposed Design

Overview

I'd like to propose a creative UI solution for hosting all pro weekly sessions in one consolidated place at /pro/dashboard/sessions. This will allow users to easily browse sessions and jump directly to specific topics using timestamps.

UI Mockup

Note: Replace the image URL above with the actual uploaded screenshot

Key Features

1. Video Session Cards

• Grid layout with video thumbnails and play button overlays
• Session metadata: title, date, duration, host info
• Expandable cards to reveal topic timestamps
• Glassmorphism effects for premium feel

2. Topic Timestamps

• Each session shows a list of topics covered with timestamps
• Clickable timestamps to jump directly to that part of the video
• Example: 00:00 - Introduction, 05:30 - State Management, 15:45 - Performance Optimization

3. Search & Filter

• Search by session title or topic
• Filter by date range
• Filter by duration
• Sort options (newest first, oldest first, most popular)

4. Responsive Design

• Mobile: 1 column grid
• Tablet: 2 column grid
• Desktop: 3 column grid

Technical Implementation

New Files to Create

apps/web/src/
├── app/(main)/dashboard/pro/dashboard/sessions/
│   └── page.tsx                          # Main sessions page
├── components/pro/
│   ├── SessionCard.tsx                   # Individual session card
│   ├── TopicTimestamp.tsx                # Timestamp link component
│   ├── SessionsGrid.tsx                  # Grid container
│   └── SessionFilters.tsx                # Search/filter controls
├── types/
│   └── sessions.types.ts                 # TypeScript interfaces
├── data/pro/
│   └── sessions.data.ts                  # Session data (mock/API)
└── hooks/
    └── useSessionsFilter.ts              # Filter logic hook

Data Structure

interface Session {
  id: string;
  title: string;
  description: string;
  videoUrl: string;
  thumbnailUrl: string;
  date: string;
  duration: number; // in seconds
  host: {
    name: string;
    avatar: string;
  };
  topics: Topic[];
}

interface Topic {
  id: string;
  title: string;
  timestamp: number; // in seconds
  description?: string;
}

Design System Consistency

Using existing Opensox design tokens:

• Background: bg-ox-content (dark theme)
• Cards: bg-ox-sidebar with glassmorphism
• Accent: bg-brand-purple (#8B5CF6)
• Text: text-text-primary, text-text-secondary
• Borders: border-ox-header

User Experience Flow

1. User navigates to /pro/dashboard/sessions
2. Sees grid of all weekly sessions with thumbnails
3. Can search/filter to find specific sessions or topics
4. Clicks on a session card to expand and view topics
5. Clicks on a timestamp to jump to that part of the video
6. Video opens (YouTube/Vimeo/embedded player) at the exact timestamp

Questions for Maintainers

Before I start implementation, I'd like to clarify:

1. Video Hosting: Where will session videos be hosted? (YouTube, Vimeo, self-hosted?)
2. Data Source: Should I create mock data initially, or is there an API endpoint available?
3. Video Player: Should videos be embedded in the page or open in external links?
4. Navigation: Should this be added to the sidebar navigation menu?
5. Additional Features: Any other features you'd like in the initial version?
   • Bookmark/save favorite sessions
   • Progress tracking (watched/unwatched)
   • Download session resources/materials
   • Comments/discussions

Benefits

✅ Consolidated Access - All sessions in one place
✅ Time-Saving - Jump directly to relevant topics
✅ Better UX - Easy to browse and search
✅ Professional Look - Premium design matching Opensox branding
✅ Mobile-Friendly - Works seamlessly on all devices

Next Steps

Once approved, I can:

1. Create the component structure
2. Implement the UI with mock data
3. Add search/filter functionality
4. Make it fully responsive
5. Integrate with actual video data source

Looking forward to your feedback! 🚀

[Lucifer-0612]

[huamanraj]

Hey @Lucifer-0612 , appreciate the work. This issue is assigned to me, and I am actively working on it right now.

[Lucifer-0612]

Oh.. okay no problem sry i didn't noticed that.