feat: add bookmarks link to sidebar navigation

- Introduced a new "Bookmarks" link in the sidebar for easy access to bookmarked content.
- Integrated the Bookmark icon from lucide-react for visual consistency.

src/app/bookmarks/page.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import InlineVideoPlayer from "@/components/inline-video-player";
+import { Bookmark, Heart, Star, Film } from 'lucide-react';
+
+interface Video {
+  id: number;
+  title: string;
+  path: string;
+  size: number;
+  thumbnail: string;
+  type: string;
+  bookmark_count: number;
+  star_count: number;
+  avg_rating: number;
+  library_path: string;
+}
+
+export default function BookmarksPage() {
+  const [videos, setVideos] = useState<Video[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
+  const [scrollPosition, setScrollPosition] = useState(0);
+
+  useEffect(() => {
+    fetchBookmarkedVideos();
+  }, []);
+
+  const fetchBookmarkedVideos = async () => {
+    try {
+      const response = await fetch('/api/bookmarks');
+      const data = await response.json();
+      setVideos(data);
+    } catch (error) {
+      console.error('Error fetching bookmarked videos:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const handleVideoClick = (video: Video) => {
+    setScrollPosition(window.scrollY);
+    setSelectedVideo(video);
+    setIsPlayerOpen(true);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleClosePlayer = () => {
+    setIsPlayerOpen(false);
+    setSelectedVideo(null);
+    // Restore scroll position
+    setTimeout(() => {
+      window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
+    }, 100);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading bookmarked videos...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-zinc-950">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center">
+              <Bookmark className="h-6 w-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-white">Bookmarked Videos</h1>
+              <p className="text-zinc-400 mt-1">
+                {videos.length} {videos.length === 1 ? 'video' : 'videos'} bookmarked
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {videos.length === 0 ? (
+          <div className="flex flex-col items-center justify-center min-h-[60vh]">
+            <div className="text-center max-w-md">
+              <div className="w-20 h-20 bg-zinc-900 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
+                <Bookmark className="h-10 w-10 text-zinc-400" />
+              </div>
+              <h2 className="text-2xl font-bold text-white mb-2">No Bookmarks Yet</h2>
+              <p className="text-zinc-400">
+                Start bookmarking videos by clicking the bookmark icon in the video player.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
+            {videos.map((video) => (
+              <Card
+                key={video.id}
+                className="group bg-white dark:bg-slate-800 border-0 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden cursor-pointer"
+                onClick={() => handleVideoClick(video)}
+              >
+                <CardHeader className="p-0">
+                  <div className="aspect-video bg-slate-200 dark:bg-slate-700 relative overflow-hidden">
+                    {video.thumbnail ? (
+                      <img
+                        src={video.thumbnail}
+                        alt={video.title}
+                        className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800">
+                        <Film className="w-12 h-12 text-slate-400" />
+                      </div>
+                    )}
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  </div>
+                </CardHeader>
+                <CardContent className="p-3">
+                  <CardTitle className="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate mb-1">
+                    {video.title || video.path.split('/').pop()}
+                  </CardTitle>
+                  <CardDescription className="text-xs text-slate-600 dark:text-slate-400">
+                    {formatFileSize(video.size)}
+                  </CardDescription>
+                  
+                  {/* Stats */}
+                  <div className="flex items-center gap-3 mt-2 text-xs text-slate-500 dark:text-slate-400">
+                    <div className="flex items-center gap-1">
+                      <Heart className="h-3 w-3" />
+                      <span>{video.bookmark_count || 0}</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Star className="h-3 w-3" />
+                      <span>{video.avg_rating?.toFixed(1) || '0.0'}</span>
+                    </div>
+                  </div>
+                  
+                  <div className="text-xs text-slate-500 dark:text-slate-400 mt-1 truncate">
+                    {video.library_path?.split('/').pop()}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Inline Video Player */}
+      {selectedVideo && (
+        <InlineVideoPlayer
+          video={{
+            id: selectedVideo.id,
+            title: selectedVideo.title || selectedVideo.path.split('/').pop() || 'Untitled',
+            path: selectedVideo.path,
+            size: selectedVideo.size,
+            thumbnail: selectedVideo.thumbnail || '',
+          }}
+          isOpen={isPlayerOpen}
+          onClose={handleClosePlayer}
+          scrollPosition={scrollPosition}
+        />
+      )}
+    </div>
+  );
+}

src/components/sidebar.tsx

@@ -15,6 +15,7 @@ import {
   Image as ImageIcon,
   Play,
   FolderOpen,
+  Bookmark,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -49,6 +50,7 @@ const SidebarContent = () => {
     { href: "/", label: "Home", icon: Home },
     { href: "/videos", label: "Videos", icon: Film },
     { href: "/photos", label: "Photos", icon: ImageIcon },
+    { href: "/bookmarks", label: "Bookmarks", icon: Bookmark },
     { href: "/settings", label: "Settings", icon: Settings },
   ];