Something went wrong. Try again.
FlockOff is a mass-block tool for the Atmosphere flockoff.app
Something went wrong. Try again.
2.7 kB · 78 lines
TSX
at master
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879import { AccountCard } from '@/components/AccountCard'import type { EngagementAccount } from '@/types'
interface AccountListProps { accounts: EngagementAccount[] selectedDids: Set<string> onToggle: (did: string) => void onSelectAll: () => void onDeselectAll: () => void}
const RELATIONSHIP_ORDER = { mutual: 0, following: 1, follower: 2, none: 3 } as const
export function AccountList({ accounts, selectedDids, onToggle, onSelectAll, onDeselectAll,}: AccountListProps) { const sorted = [...accounts].sort((a, b) => { const ra = RELATIONSHIP_ORDER[a.relationship] const rb = RELATIONSHIP_ORDER[b.relationship] if (ra !== rb) return ra - rb return a.profile.handle.localeCompare(b.profile.handle) })
const selectedCount = accounts.filter((a) => selectedDids.has(a.profile.did)).length
return ( <div className="bg-card border border-border rounded-xl flex flex-col" style={{ boxShadow: 'var(--fo-shadow-card)' }}> {/* Header */} <div className="flex items-center justify-between px-4 py-3 border-b border-border"> <div className="flex items-center gap-2"> <span className="font-mono text-xs uppercase tracking-wide text-[var(--fo-text3)]"> Who to block </span> <span className="font-mono text-xs bg-secondary text-[var(--fo-text2)] px-2 py-0.5 rounded-full border border-border"> {selectedCount.toLocaleString()} / {accounts.length.toLocaleString()} </span> </div> <div className="flex gap-3"> <button onClick={onSelectAll} className="text-xs font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors" > Select all </button> <span className="text-border text-xs">·</span> <button onClick={onDeselectAll} className="text-xs font-medium text-[var(--fo-text2)] hover:text-foreground transition-colors" > Deselect mutuals </button> </div> </div>
{/* Account list — scrollable */} <div className="overflow-y-auto max-h-[480px] flex flex-col p-2"> {sorted.length === 0 ? ( <p className="text-sm text-[var(--fo-text2)] text-center py-8"> No engagers found for the selected criteria. </p> ) : ( sorted.map((account) => ( <AccountCard key={account.profile.did} account={account} selected={selectedDids.has(account.profile.did)} onToggle={() => onToggle(account.profile.did)} /> )) )} </div> </div> )}