feat: avatar opener

components/selection-toolbar/collections-drawer.tsx

@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
 import { FolderPlus, Check, Plus, Loader2 } from "lucide-react";
 import {
   Drawer,
@@ -245,8 +246,22 @@ export function CollectionsDrawer({
                 className="flex items-center justify-between gap-3 w-full px-3 py-3 rounded-lg text-left hover:bg-white/10 transition-colors disabled:hover:bg-transparent disabled:cursor-not-allowed disabled:opacity-60"
               >
                 <div className="flex items-center gap-3 min-w-0">
-                  <div className="flex items-center justify-center size-9 rounded-lg bg-white/10 shrink-0">
-                    <FolderPlus className="size-4 text-white/60" />
+                  {/* Cover thumb — falls back to the FolderPlus glyph when
+                      the collection has no cover_url. `overflow-hidden`
+                      so the Image's fill respects the rounded slot. */}
+                  <div className="relative flex items-center justify-center size-9 rounded-lg bg-white/10 shrink-0 overflow-hidden">
+                    {c.cover_url ? (
+                      <Image
+                        src={c.cover_url}
+                        alt=""
+                        fill
+                        sizes="36px"
+                        className="object-cover"
+                        unoptimized
+                      />
+                    ) : (
+                      <FolderPlus className="size-4 text-white/60" />
+                    )}
                   </div>
                   <div className="min-w-0">
                     <p className="text-sm font-medium text-white/90 truncate">