This repository has no description
Something went wrong. Try again.
17 kB · 410 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411import React, { useState, useEffect, useRef } from 'react';import { X, UserPlus, Users, Copy, Check, Shield, Trash2, Loader2, AlertCircle, Palette, CheckCircle, ExternalLink,} from 'lucide-react';import { CalendarSpace, SpaceMember } from '../types/calendar';import { atprotoService, CALENDAR_COLORS } from '../services/atproto';import { useToast } from './Toast';import { useModalFocus } from '../hooks/useModalFocus';
interface ShareSpaceModalProps { isOpen: boolean; onClose: () => void; space: CalendarSpace | null; onMembersUpdated: () => void; onSpaceUpdated?: (updatedSpace: CalendarSpace) => void; onOpenTools?: () => void;}
export const ShareSpaceModal: React.FC<ShareSpaceModalProps> = ({ isOpen, onClose, space, onMembersUpdated, onSpaceUpdated, onOpenTools,}) => { const toast = useToast();
const [members, setMembers] = useState<SpaceMember[]>([]); const [loadingMembers, setLoadingMembers] = useState(false); const [membersError, setMembersError] = useState<string | null>(null); const [inviteIdentifier, setInviteIdentifier] = useState(''); const [inviting, setInviting] = useState(false); const [error, setError] = useState<string | null>(null); const [copied, setCopied] = useState(false); const [removingDid, setRemovingDid] = useState<string | null>(null);
const [spaceName, setSpaceName] = useState(''); const [spaceColor, setSpaceColor] = useState(''); const [spaceDescription, setSpaceDescription] = useState(''); const [savingSettings, setSavingSettings] = useState(false); const membersRequestId = useRef(0); const requestClose = () => { if (!inviting && !removingDid && !savingSettings) onClose(); }; const dialogRef = useModalFocus(isOpen, requestClose);
const currentDid = atprotoService.getCurrentDid();
useEffect(() => { if (isOpen && space) { setMembers([]); loadMembers(); setSpaceName(space.name); setSpaceColor(space.color); setSpaceDescription(space.description || ''); } return () => { membersRequestId.current += 1; }; }, [isOpen, space]);
const loadMembers = async (requestedSpace = space) => { if (!requestedSpace) return; const requestId = ++membersRequestId.current; setLoadingMembers(true); setMembersError(null); try { const list = await atprotoService.listSpaceMembers(requestedSpace.uri); if (requestId === membersRequestId.current && space?.uri === requestedSpace.uri) { setMembers(list); } } catch (err: any) { if (requestId === membersRequestId.current && space?.uri === requestedSpace.uri) { setMembersError(err.message || 'Failed to load space members.'); } } finally { if (requestId === membersRequestId.current) setLoadingMembers(false); } };
if (!isOpen || !space) return null;
const handleCopyUri = async () => { try { await navigator.clipboard.writeText(space.uri); setCopied(true); toast.success('Space URI copied to clipboard'); setTimeout(() => setCopied(false), 2000); } catch { toast.error('Could not copy the calendar address. Select and copy it manually.'); } };
const handleInvite = async (e: React.FormEvent) => { e.preventDefault(); if (!inviteIdentifier.trim()) return;
setInviting(true); setError(null);
try { await atprotoService.addSpaceMember(space.uri, inviteIdentifier.trim()); toast.success(`Invited ${inviteIdentifier.trim()} to space`); setInviteIdentifier(''); await loadMembers(); onMembersUpdated(); } catch (err: any) { setError(err.message || 'Failed to invite user to space. Check handle/DID.'); } finally { setInviting(false); } };
const handleRemove = async (did: string) => { setRemovingDid(did); setError(null); try { await atprotoService.removeSpaceMember(space.uri, did); toast.success('Member removed'); await loadMembers(); onMembersUpdated(); } catch (err: any) { setError(err.message || 'Failed to remove member.'); } finally { setRemovingDid(null); } };
const handleSaveSettings = async () => { if (!spaceName.trim()) return; setSavingSettings(true); try { await atprotoService.updateSpaceMeta(space.uri, { name: spaceName.trim(), color: spaceColor, description: spaceDescription.trim() || undefined, }); toast.success('Space settings updated'); if (onSpaceUpdated) { onSpaceUpdated({ ...space, name: spaceName.trim(), color: spaceColor, description: spaceDescription.trim() || undefined, }); } } catch { toast.error('Failed to update space settings'); } finally { setSavingSettings(false); } };
return ( <div className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/60 backdrop-blur-xs animate-fade-in" onClick={requestClose} > <div ref={dialogRef} role="dialog" aria-modal="true" aria-label="Calendar settings" tabIndex={-1} className="w-full max-w-lg bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 overflow-hidden flex flex-col max-h-[90vh]" onClick={(e) => e.stopPropagation()} > <div className="p-4 sm:p-5 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between"> <div className="flex items-center gap-2.5"> <div className="w-4 h-4 rounded-full flex-shrink-0" style={{ backgroundColor: spaceColor || space.color }} /> <div> <h3 className="font-semibold text-slate-900 dark:text-white text-base"> Calendar settings </h3> <p className="text-xs text-slate-500 dark:text-slate-400"> Access control, members, and calendar settings </p> </div> </div> <button onClick={requestClose} className="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition" > <X className="w-5 h-5" /> </button> </div>
<div className="px-5 pt-4"> <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5"> Space URI (AT Protocol Identifier) </label> <div className="flex items-center gap-2 bg-slate-50 dark:bg-slate-800/60 p-2 rounded-xl border border-slate-200 dark:border-slate-700"> <code className="text-[11px] font-mono text-slate-600 dark:text-slate-300 truncate flex-1 select-all"> {space.uri} </code> <button onClick={handleCopyUri} className="px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-700 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-100 transition flex items-center gap-1.5 flex-shrink-0 shadow-xs" > {copied ? ( <> <Check className="w-3.5 h-3.5 text-emerald-500" /> <span className="text-emerald-600 dark:text-emerald-400">Copied</span> </> ) : ( <> <Copy className="w-3.5 h-3.5" /> <span>Copy</span> </> )} </button> <a href={`https://pds.ls/${space.uri}`} target="_blank" rel="noopener noreferrer" aria-label="Open space in PDSls" title="Open in PDSls" className="px-2.5 py-1 text-xs font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-700 rounded-lg border border-slate-200 dark:border-slate-600 hover:bg-slate-100 transition flex items-center gap-1.5 flex-shrink-0 shadow-xs" > <ExternalLink className="w-3.5 h-3.5" /> <span>PDSls</span> </a> </div> </div>
{space.isOwner && ( <div className="px-5 pt-3"> <label htmlFor="calendar-name" className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1"> Calendar name </label> <div className="flex flex-col gap-3 sm:flex-row sm:items-center"> <input id="calendar-name" type="text" value={spaceName} onChange={(e) => setSpaceName(e.target.value)} className="flex-1 px-3 py-1.5 text-xs rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-primary-500" /> <div className="flex flex-wrap items-center gap-1" aria-label="Calendar color"> {CALENDAR_COLORS.map((c) => ( <button key={c} type="button" onClick={() => setSpaceColor(c)} aria-label={`Use ${c} calendar color`} aria-pressed={spaceColor === c} className={`w-6 h-6 rounded-full transition-transform ${ spaceColor === c ? 'scale-110 ring-2 ring-offset-1 ring-primary-500' : 'hover:scale-105' }`} style={{ backgroundColor: c }} /> ))} </div> {(spaceName !== space.name || spaceColor !== space.color || spaceDescription !== (space.description || '')) && ( <button type="button" onClick={handleSaveSettings} disabled={savingSettings} className="px-2.5 py-1 text-xs font-semibold text-white bg-primary-600 hover:bg-primary-700 rounded-lg shadow-xs transition" > Save </button> )} </div> <label htmlFor="calendar-description" className="mt-3 mb-1 block text-xs font-semibold text-slate-700 dark:text-slate-300"> Description </label> <textarea id="calendar-description" value={spaceDescription} onChange={(e) => setSpaceDescription(e.target.value)} rows={2} className="w-full resize-y rounded-xl border border-slate-300 bg-white px-3 py-2 text-xs text-slate-900 outline-none focus:ring-2 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-800 dark:text-white" /> </div> )}
<form onSubmit={handleInvite} className="p-5 pb-2"> <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1.5"> Invite Collaborator </label> <div className="flex gap-2"> <input type="text" placeholder="e.g. alice.spaces-alpha.bsky.network or did:plc:..." value={inviteIdentifier} onChange={(e) => setInviteIdentifier(e.target.value)} className="flex-1 px-3 py-2 text-xs rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-primary-500 outline-none transition" /> <button type="submit" disabled={inviting || !inviteIdentifier.trim()} className="px-4 py-2 text-xs font-semibold text-white bg-primary-600 hover:bg-primary-700 active:bg-primary-800 rounded-xl transition flex items-center gap-1.5 disabled:opacity-50 shadow-xs whitespace-nowrap" > {inviting ? ( <Loader2 className="w-3.5 h-3.5 animate-spin" /> ) : ( <UserPlus className="w-3.5 h-3.5" /> )} <span>Invite</span> </button> </div> </form>
{error && ( <div className="mx-5 mb-2 p-2.5 bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/50 rounded-xl text-xs text-red-600 dark:text-red-400 flex items-center gap-2"> <AlertCircle className="w-4 h-4 flex-shrink-0" /> <span>{error}</span> </div> )}
{membersError && ( <div role="alert" className="mx-5 mb-2 flex items-center justify-between gap-2 rounded-xl border border-red-200 bg-red-50 p-2.5 text-xs text-red-600 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-400"> <span>{membersError}</span> <button type="button" onClick={() => loadMembers()} className="font-semibold underline" disabled={loadingMembers}> Retry </button> </div> )}
<div className="p-5 pt-2 flex-1 overflow-y-auto"> <div className="flex items-center justify-between mb-2.5"> <span className="text-xs font-semibold text-slate-700 dark:text-slate-300 flex items-center gap-1.5"> <Users className="w-3.5 h-3.5" /> Members & Collaborators ({members.length}) </span> {loadingMembers && ( <span className="text-[11px] text-slate-400 flex items-center gap-1"> <Loader2 className="w-3 h-3 animate-spin" /> Loading... </span> )} </div>
<div className="space-y-2"> {members.map((member) => { const isCurrentUser = member.did === currentDid;
return ( <div key={member.did} className="flex items-center justify-between p-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition" > <div className="flex items-center gap-3 overflow-hidden"> <div className="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-xs font-bold text-slate-600 dark:text-slate-300 flex-shrink-0 overflow-hidden"> {member.avatar ? ( <img src={member.avatar} alt="Avatar" className="w-full h-full object-cover" /> ) : ( (member.displayName || member.handle || member.did).charAt(0).toUpperCase() )} </div> <div className="truncate"> <div className="flex items-center gap-1.5"> <span className="text-xs font-semibold text-slate-800 dark:text-slate-200 truncate"> {member.displayName || member.handle || 'Member'} </span> {isCurrentUser && ( <span className="px-1.5 py-0.2 rounded text-[9px] font-bold bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300"> You </span> )} {member.isOwner && ( <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-primary-100 dark:bg-primary-900/60 text-primary-700 dark:text-primary-300"> <Shield className="w-2.5 h-2.5" /> Owner </span> )} </div> <div className="text-[11px] text-slate-400 dark:text-slate-500 font-mono truncate"> {member.handle ? `@${member.handle} (${member.did})` : member.did} </div> </div> </div>
{!member.isOwner && ( <button onClick={() => handleRemove(member.did)} disabled={removingDid === member.did} title="Remove collaborator" className="p-1.5 rounded-lg text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/40 transition disabled:opacity-50" > {removingDid === member.did ? ( <Loader2 className="w-3.5 h-3.5 animate-spin" /> ) : ( <Trash2 className="w-3.5 h-3.5" /> )} </button> )} </div> ); })} </div> </div>
<div className="flex flex-wrap justify-between gap-2 border-t border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-800/40"> {onOpenTools && <button onClick={onOpenTools} className="rounded-xl px-4 py-2 text-xs font-semibold text-primary-700 transition hover:bg-primary-50 dark:text-primary-300 dark:hover:bg-slate-700">Calendar tools</button>} <button onClick={requestClose} className="px-4 py-2 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-xl transition" > Done </button> </div> </div> </div> );};