uiprototype2/src/components/LibraryPanel.tsx

import { useState } from "react";
import { X, Search, Folder, Grid, Filter, Plus, Tag } from "lucide-react";
import { useAppStore } from "../store";

const ALL_TAGS = [
  "anatomy",
  "environment",
  "character",
  "lighting",
  "cyberpunk",
  "fantasy",
  "sci-fi",
];

const mockLibrary = Array.from({ length: 24 }).map((_, i) => ({
  url: `https://picsum.photos/id/${100 + i}/400/400`,
  tags: [ALL_TAGS[i % ALL_TAGS.length], ALL_TAGS[(i + 2) % ALL_TAGS.length]],
}));

export const LibraryPanel = () => {
  const { isLibraryOpen, setIsLibraryOpen, setImages, pan, zoom } =
    useAppStore();
  const [search, setSearch] = useState("");
  const [activeTag, setActiveTag] = useState<string | null>(null);

  const handleAdd = (src: string) => {
    const newImg = {
      id: Math.random().toString(36).substr(2, 9),
      url: src,
      x: (-pan.x + window.innerWidth / 4) / zoom,
      y: (-pan.y + window.innerHeight / 4) / zoom,
      width: 250,
      height: 250,
      aspectRatio: 1,
    };
    setImages((prev) => [...prev, newImg]);
  };

  const filteredLibrary = mockLibrary.filter((img) => {
    if (activeTag && !img.tags.includes(activeTag)) return false;
    if (search && !img.tags.some((t) => t.includes(search.toLowerCase())))
      return false;
    return true;
  });

  return (
    <div

      className={`absolute left-0 top-0 h-full w-[45%] max-w-[500px] bg-panel-bg shadow-2xl flex flex-col z-[60] transform transition-transform duration-500 ease-[cubic-bezier(0.19,1,0.22,1)] ${isLibraryOpen ? "translate-x-0" : "-translate-x-full"}`}

    >

      <div className="flex items-center justify-between p-4 bg-panel-bg z-10 border-b border-[#3A3A3E]">

        <div className="flex items-center gap-2 text-[#E0E0E0] text-[14px] font-medium tracking-tight">

          <Folder size={16} className="text-[#0A84FF]" />

          Asset Library

        </div>

        <button

          onClick={() => setIsLibraryOpen(false)}

          className="text-[#A0A0A0] hover:text-[#E0E0E0] p-1.5 rounded-md hover:bg-white/5 transition-colors"

        >

          <X size={16} />

        </button>

      </div>



      <div className="px-4 py-3 bg-[#2A2A2E] flex flex-col gap-3">

        <div className="relative group">

          <Search

            size={14}

            className="absolute left-3 top-1/2 -translate-y-1/2 text-[#808080] group-focus-within:text-[#0A84FF] transition-colors"

          />

          <input

            type="text"

            value={search}

            onChange={(e) => setSearch(e.target.value)}

            placeholder="Search assets or tags..."

            className="w-full bg-[#1C1C1E] text-[#E0E0E0] pl-9 pr-3 py-2 text-[13px] rounded-lg border border-[#3A3A3E] focus:border-[#0A84FF] outline-none transition-all placeholder:text-[#808080]"

          />

        </div>



        {/* Tag Pills */}

        <div className="flex items-center gap-1.5 overflow-x-auto hide-scrollbar pb-1">

          <button

            onClick={() => setActiveTag(null)}

            className={`whitespace-nowrap px-3 py-1 rounded-full text-[11px] font-medium transition-colors ${!activeTag ? "bg-[#0A84FF] text-white" : "bg-[#3A3A3E] text-[#C0C0C0] hover:bg-[#4A4A4E]"}`}

          >

            All

          </button>

          {ALL_TAGS.map((tag) => (

            <button

              key={tag}

              onClick={() => setActiveTag(tag)}

              className={`whitespace-nowrap px-3 py-1 rounded-full text-[11px] font-medium transition-colors flex items-center gap-1 ${activeTag === tag ? "bg-[#0A84FF] text-white" : "bg-[#3A3A3E] text-[#C0C0C0] hover:bg-[#4A4A4E]"}`}

            >

              <Tag size={10} />

              {tag}

            </button>

          ))}

        </div>

      </div>



      <div className="flex-1 overflow-y-auto bg-[#1C1C1E] p-4 custom-scrollbar">

        <div className="flex justify-between items-center mb-4">

          <span className="text-[11px] font-medium text-[#808080] uppercase tracking-widest">

            Images ({filteredLibrary.length})

          </span>

          <Grid size={14} className="text-[#808080]" />

        </div>

        <div className="grid grid-cols-3 gap-3">

          <div className="aspect-square bg-white/5 hover:bg-white/10 border border-dashed border-white/20 hover:border-white/30 rounded-xl cursor-pointer flex flex-col items-center justify-center text-[#A0A0A0] hover:text-[#E0E0E0] transition-all group shadow-sm">

            <div className="w-8 h-8 rounded-full bg-black/20 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">

              <Plus size={16} />

            </div>

            <span className="text-[11px] font-medium">Upload File</span>

          </div>

          {filteredLibrary.map((img, i) => (

            <div

              key={i}

              className="aspect-square bg-[#2A2A2E] rounded-xl cursor-pointer group relative overflow-hidden shadow-sm ring-1 ring-[#3A3A3E] hover:ring-[#0A84FF] transition-all"

              onClick={() => handleAdd(img.url)}

            >

              <img

                src={img.url}

                className="w-full h-full object-cover opacity-90 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500 ease-out"

              />

              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-2 pointer-events-none">

                <span className="text-[10px] text-white font-medium truncate mb-1">

                  IMG_{100 + i}.jpg

                </span>

                <div className="flex items-center gap-1 overflow-hidden">

                  {img.tags.map((t) => (

                    <span

                      key={t}

                      className="text-[9px] bg-white/20 text-white/90 px-1.5 py-0.5 rounded backdrop-blur"

                    >

                      {t}

                    </span>

                  ))}

                </div>

              </div>

            </div>

          ))}

        </div>

      </div>

    </div>
  );
};