import { useState, useEffect } from "react"; import { X, Folder, Star, Heart, Bookmark, Lightbulb, Zap, Coffee, Music, Camera, Code, Globe, Flag, Tag, Box, Archive, FileText, Image, Video, Mail, MapPin, Calendar, Clock, Search, Settings, User, Users, Home, Briefcase, Gift, Award, Target, TrendingUp, Activity, Cpu, Database, Cloud, Sun, Moon, Flame, Leaf, Trash2, } from "lucide-react"; import { createCollection, updateCollection, deleteCollection, } from "../api/client"; const EMOJI_OPTIONS = [ "📁", "📚", "💡", "⭐", "🔖", "💻", "🎨", "📝", "🔬", "🎯", "🚀", "💎", "🌟", "📌", "💼", "🎮", "🎵", "🎬", "❤️", "🔥", "🌈", "🌸", "🌿", "🧠", "🏆", "📊", "🎓", "✨", "🔧", "⚡", ]; const ICON_OPTIONS = [ { icon: Folder, name: "folder" }, { icon: Star, name: "star" }, { icon: Heart, name: "heart" }, { icon: Bookmark, name: "bookmark" }, { icon: Lightbulb, name: "lightbulb" }, { icon: Zap, name: "zap" }, { icon: Coffee, name: "coffee" }, { icon: Music, name: "music" }, { icon: Camera, name: "camera" }, { icon: Code, name: "code" }, { icon: Globe, name: "globe" }, { icon: Flag, name: "flag" }, { icon: Tag, name: "tag" }, { icon: Box, name: "box" }, { icon: Archive, name: "archive" }, { icon: FileText, name: "file" }, { icon: Image, name: "image" }, { icon: Video, name: "video" }, { icon: Mail, name: "mail" }, { icon: MapPin, name: "pin" }, { icon: Calendar, name: "calendar" }, { icon: Clock, name: "clock" }, { icon: Search, name: "search" }, { icon: Settings, name: "settings" }, { icon: User, name: "user" }, { icon: Users, name: "users" }, { icon: Home, name: "home" }, { icon: Briefcase, name: "briefcase" }, { icon: Gift, name: "gift" }, { icon: Award, name: "award" }, { icon: Target, name: "target" }, { icon: TrendingUp, name: "trending" }, { icon: Activity, name: "activity" }, { icon: Cpu, name: "cpu" }, { icon: Database, name: "database" }, { icon: Cloud, name: "cloud" }, { icon: Sun, name: "sun" }, { icon: Moon, name: "moon" }, { icon: Flame, name: "flame" }, { icon: Leaf, name: "leaf" }, ]; export default function CollectionModal({ isOpen, onClose, onSuccess, collectionToEdit, onDelete, }) { const [name, setName] = useState(""); const [description, setDescription] = useState(""); const [icon, setIcon] = useState(""); const [customEmoji, setCustomEmoji] = useState(""); const [activeTab, setActiveTab] = useState("emoji"); const [loading, setLoading] = useState(false); const [deleting, setDeleting] = useState(false); const [error, setError] = useState(null); useEffect(() => { if (collectionToEdit) { setName(collectionToEdit.name); setDescription(collectionToEdit.description || ""); const savedIcon = collectionToEdit.icon || ""; setIcon(savedIcon); setCustomEmoji(savedIcon); if (savedIcon.startsWith("icon:")) { setActiveTab("icons"); } } else { setName(""); setDescription(""); setIcon(""); setCustomEmoji(""); } setError(null); }, [collectionToEdit, isOpen]); if (!isOpen) return null; const handleEmojiSelect = (emoji) => { if (icon === emoji) { setIcon(""); setCustomEmoji(""); } else { setIcon(emoji); setCustomEmoji(emoji); } }; const handleIconSelect = (iconName) => { const value = `icon:${iconName}`; if (icon === value) { setIcon(""); setCustomEmoji(""); } else { setIcon(value); setCustomEmoji(value); } }; const handleCustomEmojiChange = (e) => { const value = e.target.value; setCustomEmoji(value); const emojiMatch = value.match( /(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)/gu, ); if (emojiMatch && emojiMatch.length > 0) { setIcon(emojiMatch[emojiMatch.length - 1]); } else if (value === "") { setIcon(""); } }; const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(null); try { if (collectionToEdit) { await updateCollection(collectionToEdit.uri, name, description, icon); } else { await createCollection(name, description, icon); } onSuccess(); onClose(); } catch (err) { console.error(err); setError(err.message || "Failed to save collection"); } finally { setLoading(false); } }; const handleDelete = async () => { if ( !confirm( "Delete this collection and all its items? This cannot be undone.", ) ) { return; } setDeleting(true); setError(null); try { await deleteCollection(collectionToEdit.uri); if (onDelete) { onDelete(); } else { onSuccess(); } onClose(); } catch (err) { console.error(err); setError(err.message || "Failed to delete collection"); } finally { setDeleting(false); } }; return (

e.stopPropagation()} >

{collectionToEdit ? "Edit Collection" : "New Collection"}

{error && (

{error}

)}

Icon

{activeTab === "emoji" && (

{EMOJI_OPTIONS.map((emoji) => ( ))}

)} {activeTab === "icons" && (

{ICON_OPTIONS.map(({ icon: IconComponent, name: iconName }) => ( ))}

)}

Name setName(e.target.value)} required className="form-input" placeholder="My Favorites" />

Description

setDescription(e.target.value)}
              rows={2}
              className="form-textarea"
              placeholder="A collection of..."
            />
          </div>

<div className="modal-actions">
            {collectionToEdit && (
              <button
                type="button"
                onClick={handleDelete}
                disabled={deleting}
                className="btn btn-danger"
              >
                <Trash2 size={16} />
                {deleting ? "Deleting..." : "Delete"}
              </button>
            )}
            <div style={{ flex: 1 }} />
            <button type="button" onClick={onClose} className="btn btn-ghost">
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="btn btn-primary"
              style={loading ? { opacity: 0.7, cursor: "wait" } : {}}
            >
              {loading
                ? "Saving..."
                : collectionToEdit
                  ? "Save Changes"
                  : "Create Collection"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
</article></body></html>