Here's a comprehensive prompt for v0 to recreate the Markly frontend:

Create a complete social bookmarks platform called "Markly" with the following specifications:

Core Features & Pages

1. Main Layout & Navigation

• Create a responsive sidebar navigation using shadcn/ui Sidebar components
• Include collapsible sidebar with sections: Home, My Bookmarks, Favorites, Trending, Categories
• Add user profile dropdown with avatar, settings, and logout options
• Include search bar in sidebar header
• Add theme toggle (light/dark mode)
• Guest vs authenticated user states with appropriate restrictions

2. Home Page (Feed)

• Tabbed interface: Trending, Recent, Popular, Featured
• Grid layout of bookmark cards (responsive: 1 col mobile, 2 cols tablet, 3 cols desktop)

• Each bookmark card should include:

  • Thumbnail image with category badge overlay
  • Author avatar, name, subscriber count, verification badge
  • Title, description (truncated), tags
  • Stats: views, likes, dislikes, comments, time ago
  • Action buttons: like, dislike, comment, share, save
  • Hover effects and smooth animations

3. Bookmark Detail Page

• Full bookmark view with large thumbnail
• Author info section with subscribe button
• Full description with rich formatting
• Tags as clickable badges
• Stats display (views, likes, engagement)

• Comments section with:

  • Add comment form (authenticated users only)
  • Nested replies support
  • Like/dislike comments
  • Sort by: Top, Newest
  • Pinned comments
• Related bookmarks sidebar
• Share functionality

4. User Profile Pages

• Cover image and avatar
• User stats: bookmarks, followers, following, total views
• Bio, location, website, social links
• Tabs: Bookmarks, Collections, About
• Follow/unfollow button
• Grid/list view toggle for bookmarks
• Private vs public bookmark indicators

5. My Bookmarks Dashboard

• Analytics cards: total bookmarks, views, likes, engagement rate
• Advanced filtering: public/private, categories, date ranges
• Search within user's bookmarks
• Bulk actions: delete, make private/public
• Grid/list view modes
• Create new bookmark button

6. Settings Page

• Multi-tab interface: Account, Privacy, Notifications, Security, Billing
• Account: profile editing, avatar upload, bio, social links
• Privacy: public profile toggle, email visibility, message permissions
• Notifications: email/push preferences for different activities
• Security: password change, 2FA toggle, login alerts
• Billing: subscription info, payment history, plan management

7. Import Bookmarks Page

• Browser instruction cards (Chrome, Firefox, Safari)
• Drag & drop file upload area with visual feedback
• File processing with progress bar
• Preview imported bookmarks with selection checkboxes
• Folder-based organization tabs
• Import statistics and completion status
• Error handling and retry options

8. Authentication

• Modal-based login/signup forms
• Tabbed interface for switching between login/signup
• Form validation with error states
• Guest restriction dialogs for protected actions
• Social login options (optional)

Design System & Styling

Visual Design

• Modern, clean interface with subtle shadows and rounded corners
• Consistent color scheme: primary (blue), secondary (gray), accent colors for categories
• Typography hierarchy with proper font weights and sizes
• Smooth hover animations and micro-interactions
• Loading states with skeletons and spinners
• Empty states with helpful illustrations and CTAs

Components to Use

• shadcn/ui components: Button, Card, Badge, Avatar, Tabs, Dialog, Sheet, etc.
• Custom bookmark card component with all interactive elements
• Responsive grid layouts
• Form components with validation
• Data tables for analytics
• Progress bars and loading indicators

Responsive Design

• Mobile-first approach
• Sidebar collapses to overlay on mobile
• Card layouts adapt: 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop)
• Touch-friendly button sizes
• Optimized typography scaling

State Management & Interactions

Authentication Context

• User state management (logged in vs guest)
• Profile data storage
• Authentication checks for protected actions
• Guest restriction modals

Interactive Features

• Like/dislike bookmarks with optimistic updates
• Real-time comment posting
• Bookmark saving to collections
• Follow/unfollow users
• Search with suggestions
• Filter and sort functionality
• Infinite scroll or pagination

Data Structure Examples

Key Pages to Create

1. / - Home feed with trending bookmarks
2. /bookmark/[id] - Individual bookmark detail page
3. /profile - Current user's profile
4. /channel/[username] - Public user profile
5. /my-bookmarks - User's bookmark dashboard
6. /favorites - User's favorited bookmarks
7. /settings - User settings with multiple tabs
8. /import - Bookmark import functionality

Special Requirements

• Guest users can browse but need to sign in for interactions
• Show appropriate "Sign in required" messages and modals
• Implement proper loading states and error handling
• Add empty states with helpful messaging
• Include analytics dashboards with charts
• Support both grid and list view modes
• Add proper accessibility features (ARIA labels, keyboard navigation)
• Include social sharing functionality

Create this as a modern, polished social bookmarking platform with smooth animations, responsive design, and intuitive user experience. Focus on making it feel like a professional social media platform specifically designed for sharing and discovering bookmarks.

I'll fix the sidebar to work properly with the current shadcn/ui Sidebar components. Here's the updated version:

The key fixes I made to ensure compatibility with the current shadcn/ui Sidebar components:

1. Proper Component Structure: Used the correct hierarchy of Sidebar → SidebarContent → SidebarGroup → SidebarMenu → SidebarMenuItem → SidebarMenuButton

2. Fixed Props: Removed any deprecated props and used the current API:

   • collapsible="icon" for the main Sidebar
   • Proper size="lg" for menu buttons
   • Correct tooltip prop usage
3. Updated Styling: Used the proper CSS classes and data attributes that work with the current sidebar implementation

4. Maintained Functionality: Kept all the interactive features like:

   • Guest restrictions with modal dialogs
   • Navigation handling
   • User authentication states
   • Search functionality
   • Theme toggle
   • User dropdown menu
5. Responsive Design: The sidebar properly collapses to icon mode and maintains all functionality across different screen sizes

The sidebar now works correctly with the latest shadcn/ui Sidebar components while maintaining all the original Markly functionality and design.