Add scrollable page thumbnails with scrollbar styling in page sidebar

components/editor/page-sidebar.tsx

@@ -33,63 +33,65 @@ export function PageSidebar({
   isOwner = true,
 }: PageSidebarProps) {
   return (
-    <aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between">
+    <aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between h-full">
       {/* Top section: page thumbnails */}
-      <div className="flex flex-col items-center gap-3">
+      <div className="flex-1 w-full overflow-y-auto min-h-0 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/60 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground">
-        {pages.map((page, index) => (
+        <div className="flex flex-col items-center gap-3 px-2 py-1">
-          <button
+          {pages.map((page, index) => (
-            key={page.id}
+            <button
-            onClick={() => onPageSelect(index)}
+              key={page.id}
-            disabled={loadingPageId === index}
+              onClick={() => onPageSelect(index)}
-            className={`
+              disabled={loadingPageId === index}
-              w-16 h-16 rounded-lg transition-all relative overflow-hidden
+              className={`
-              ${
+                w-16 h-16 rounded-lg transition-all relative overflow-hidden flex-shrink-0
-                currentPage === index
+                ${
-                  ? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
+                  currentPage === index
-                  : "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
+                    ? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
-              }
+                    : "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
-              ${loadingPageId === index ? "opacity-50" : ""}
+                }
-            `}
+                ${loadingPageId === index ? "opacity-50" : ""}
-          >
+              `}
-            {loadingPageId === index ? (
+            >
-              <div className="w-full h-full flex items-center justify-center">
+              {loadingPageId === index ? (
-                <Loader2 className="w-6 h-6 animate-spin text-white" />
+                <div className="w-full h-full flex items-center justify-center">
-              </div>
+                  <Loader2 className="w-6 h-6 animate-spin text-white" />
-            ) : (
-              <>
-                <img
-                  src={page.image || "/placeholder.svg"}
-                  alt={`Page ${index + 1}`}
-                  className="w-full h-full object-cover"
-                />
-                <div
-                  className={`
-                  absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
-                  ${
-                    currentPage === index
-                      ? "bg-indigo text-white"
-                      : "bg-black/70 text-white"
-                  }
-                `}
-                >
-                  {index + 1}
                 </div>
-              </>
+              ) : (
-            )}
+                <>
-          </button>
+                  <img
-        ))}
+                    src={page.image || "/placeholder.svg"}
+                    alt={`Page ${index + 1}`}
+                    className="w-full h-full object-cover"
+                  />
+                  <div
+                    className={`
+                    absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
+                    ${
+                      currentPage === index
+                        ? "bg-indigo text-white"
+                        : "bg-black/70 text-white"
+                    }
+                  `}
+                  >
+                    {index + 1}
+                  </div>
+                </>
+              )}
+            </button>
+          ))}
 
-        {isOwner && (
+          {isOwner && (
-          <button
+            <button
-            onClick={onAddPage}
+              onClick={onAddPage}
-            className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
+              className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center flex-shrink-0"
-          >
+            >
-            <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
+              <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
-          </button>
+            </button>
-        )}
+          )}
+        </div>
       </div>
 
-      <div className="flex flex-col items-center gap-3">
+      <div className="flex flex-col items-center gap-3 pt-2">
         {/* API Key Button */}
         <Button
           onClick={onApiKeyClick}