(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
JSX
at ui-refactor
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135import { useState, useEffect, useCallback } from "react";import { Folder, Plus } from "lucide-react";import { getCollections } from "../api/client";import { useAuth } from "../context/AuthContext";import CollectionModal from "../components/CollectionModal";import CollectionRow from "../components/CollectionRow";
export default function Collections() { const { user } = useAuth(); const [collections, setCollections] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [editingCollection, setEditingCollection] = useState(null);
const fetchCollections = useCallback(async () => { try { setLoading(true); const data = await getCollections(user.did); setCollections(data.items || []); } catch (err) { console.error(err); setError("Failed to load collections"); } finally { setLoading(false); } }, [user]);
useEffect(() => { if (user) { fetchCollections(); } }, [user, fetchCollections]);
const handleCreateSuccess = () => { fetchCollections(); setIsCreateModalOpen(false); setEditingCollection(null); };
const handleDelete = () => { fetchCollections(); setEditingCollection(null); };
if (loading) { return ( <div className="feed-page"> <div style={{ display: "flex", justifyContent: "center", padding: "60px 0", }} > <div className="spinner"></div> </div> </div> ); }
return ( <div className="feed-page"> <div className="page-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", }} > <div> <h1 className="page-title">Collections</h1> <p className="page-description"> Organize your annotations, highlights, and bookmarks </p> </div> <button onClick={() => setIsCreateModalOpen(true)} className="btn btn-primary" > <Plus size={20} /> New Collection </button> </div>
{error ? ( <div className="empty-state card"> <div className="empty-state-icon">⚠️</div> <h3 className="empty-state-title">Something went wrong</h3> <p className="empty-state-text">{error}</p> </div> ) : collections.length === 0 ? ( <div className="empty-state card"> <div className="empty-state-icon"> <Folder size={32} /> </div> <h3 className="empty-state-title">No collections yet</h3> <p className="empty-state-text mb-6"> Create your first collection to start organizing your web annotations. </p> <button onClick={() => setIsCreateModalOpen(true)} className="btn btn-secondary" > Create Collection </button> </div> ) : ( <div className="collections-list"> {collections.map((collection) => ( <CollectionRow key={collection.uri} collection={collection} onEdit={() => setEditingCollection(collection)} /> ))} </div> )}
<CollectionModal isOpen={isCreateModalOpen || !!editingCollection} onClose={() => { setIsCreateModalOpen(false); setEditingCollection(null); }} onSuccess={handleCreateSuccess} onDelete={handleDelete} collectionToEdit={editingCollection} /> </div> );}