// tnych-admin.jsx — Admin panel, clean redesign const { useState, useMemo, useEffect } = React; function useMobile() { const [m, setM] = useState(typeof window !== 'undefined' && window.innerWidth < 720); useEffect(() => { const fn = () => setM(window.innerWidth < 720); window.addEventListener('resize', fn);return () => window.removeEventListener('resize', fn); }, []); return m; } /* ── Icons ── */ const ILink = ({ s = 16 }) => ; const IPlus = ({ s = 16 }) => ; const ISettings = ({ s = 16 }) => ; const IMenu = ({ s = 18 }) => ; const IEdit = ({ s = 14 }) => ; const ICopy = ({ s = 14 }) => ; const IQR = ({ s = 14 }) => ; const ITrash = ({ s = 14 }) => ; const ICheck = ({ s = 14 }) => ; const IChev = ({ s = 13, up = false }) => ; const IClose = ({ s = 18 }) => ; const IList = ({ s = 16 }) => ; const IData = ({ s = 14 }) => ; /* ── Sidebar ── */ function SidebarContent({ nav, setNav, domain, onLogout, onBack, onNew, onClose }) { return ( <>
{domain}
admin
{onClose && }
); } /* ── Stats strip — 3 stats, no Traps ── */ function StatsStrip({ links, isMobile }) { const total = links.length; const clicks = links.reduce((a, l) => a + (l.clicks || 0), 0).toLocaleString(); const pubCount = links.filter((l) => l.visibility === 'public' && !l.scammerTrap).length; const stats = [ { label: 'Links', value: total, color: 'var(--accent)' }, { label: 'Clicks', value: clicks, color: 'var(--text)' }, { label: 'Public', value: pubCount, color: 'var(--green)' }]; return (
{stats.map((s, i) =>
{s.value}
{s.label}
)}
); } /* ── Link row ── */ function LinkRow({ link, domain, expanded, onToggle, onEdit, onQR, onDelete, onViewData, isMobile }) { const [copied, setCopied] = useState(false); const [confirmDel, setConfirmDel] = useState(false); const vis = { public: { cls: 'badge-green', l: 'public' }, private: { cls: 'badge-muted', l: 'private' }, restricted: { cls: 'badge-amber', l: 'restricted' } }[link.visibility] || { cls: 'badge-muted', l: link.visibility }; const copy = (e) => { e.stopPropagation(); navigator.clipboard.writeText(`https://${domain}/${link.shortCode}`).catch(() => {}); setCopied(true);setTimeout(() => setCopied(false), 1400); }; const tryDel = (e) => { e.stopPropagation(); if (confirmDel) {onDelete(link.id);return;} setConfirmDel(true);setTimeout(() => setConfirmDel(false), 2200); }; const hasUtm = link.utmSource || link.utmMedium || link.utmCampaign; const fmt = (d) => new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); return (
{/* Row */}
/{link.shortCode} {!isMobile && link.label && {link.label}} {!isMobile && {link.dest}} {isMobile && } {(link.clicks || 0).toLocaleString()} {!isMobile && {vis.l}} {link.scammerTrap && trap} {link.trackDetails && !link.scammerTrap && !isMobile && tracking}
{/* Expanded detail */}
Destination
{link.dest}
Details
{link.label && <>{link.label}
} Added {fmt(link.created)}
Embed {link.embedEnabled ? 'on' : 'off'} {' · '}Logging {link.trackDetails ? 'on' : 'off'}
{hasUtm &&
UTM Parameters
{[link.utmSource && `src=${link.utmSource}`, link.utmMedium && `med=${link.utmMedium}`, link.utmCampaign && `cam=${link.utmCampaign}`].filter(Boolean).join(' · ')}
}
{link.scammerTrap && onViewData && ( )}
); } /* ── Sections ── */ const SECTIONS = [ { id: 'public', label: 'Public', dot: 'var(--green)', filter: (l) => l.visibility === 'public' && !l.scammerTrap }, { id: 'private', label: 'Private & Restricted', dot: 'var(--text-muted)', filter: (l) => (l.visibility === 'private' || l.visibility === 'restricted') && !l.scammerTrap }, { id: 'traps', label: 'Traps', dot: 'oklch(72% 0.16 52)', filter: (l) => l.scammerTrap }]; function LinksView({ links, allLinks, domain, expandedId, setExpandedId, searchQ, setSearchQ, onNew, onEdit, onQR, onDelete, onViewTrap, isMobile }) { return (
{/* Header */} {!isMobile &&

Links

} {/* Stats */} {/* Search */} setSearchQ(e.target.value)} placeholder="Search links…" style={{ marginBottom: 22, maxWidth: isMobile ? '100%' : 280 }} /> {/* Sections */} {SECTIONS.map((section) => { const sl = links.filter(section.filter); if (!sl.length) return null; return (
{section.label} {sl.length}
{sl.map((link) => setExpandedId(expandedId === link.id ? null : link.id)} onEdit={onEdit} onQR={onQR} onDelete={onDelete} onViewData={onViewTrap} /> )}
); })} {links.length === 0 &&
No links match.{' '}
}
); } /* LogsView is provided by tnych-logs.jsx via window.LogsView */ /* ── Settings ── */ function SettingsView({ domain, domains, onDomainsChange, onDomainChange }) { const [newDom, setNewDom] = useState(''); const [domErr, setDomErr] = useState(''); const addDomain = () => { const d = newDom.trim().toLowerCase().replace(/^https?:\/\//,'').replace(/\/$/,''); if (!d) return; if (domains.includes(d)) { setDomErr('Already in list.'); return; } onDomainsChange([...domains, d]); setNewDom(''); setDomErr(''); }; const removeDomain = (d) => { if (domains.length <= 1) return; onDomainsChange(domains.filter(x => x !== d)); }; return (

Settings

Domains
{domains.map(d => (
{d} {d === domain ? active : }
))}
{ setNewDom(e.target.value); setDomErr(''); }} onKeyDown={e => e.key === 'Enter' && addDomain()} placeholder="newdomain.com" style={{ flex: 1 }} />
{domErr &&

{domErr}

}
); } /* ── Admin root ── */ function Admin({ domain, onLogout, onBack, onDomainChange }) { const [links, setLinks] = useState([]); const [loading, setLoading] = useState(true); const [domains, setDomains] = useState(['tnych.cc', 'tnych.dev']); const [nav, setNav] = useState('links'); const [expandedId, setExpandedId] = useState(null); const [searchQ, setSearchQ] = useState(''); const [modalOpen, setModalOpen] = useState(false); const [editingLink, setEditingLink] = useState(null); const [qrLink, setQrLink] = useState(null); const [trapViewLink, setTrapViewLink] = useState(null); const [drawer, setDrawer] = useState(false); const isMobile = useMobile(); // any 401 means the session expired — bounce back to login const authed = (r) => { if (r.status === 401) { onLogout(); throw new Error('Session expired'); } return r.json(); }; useEffect(() => { fetch('/api/links').then(authed).then(setLinks).catch(e => console.error(e)).finally(() => setLoading(false)); fetch('/api/domains').then(authed).then(setDomains).catch(e => console.error(e)); }, []); const handleDomainsChange = (next) => { const added = next.filter(d => !domains.includes(d)); const removed = domains.filter(d => !next.includes(d)); setDomains(next); added.forEach(d => fetch('/api/domains', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ domain: d }) }).catch(e => console.error(e))); removed.forEach(d => fetch(`/api/domains/${encodeURIComponent(d)}`, { method: 'DELETE' }).catch(e => console.error(e))); }; const filtered = useMemo(() => links.filter((l) => { if (!searchQ) return true; const q = searchQ.toLowerCase(); return l.shortCode.includes(q) || l.dest.toLowerCase().includes(q) || (l.label || '').toLowerCase().includes(q); }), [links, searchQ]); const openNew = () => {setEditingLink(null);setModalOpen(true);}; const openEdit = (link) => {setEditingLink(link);setModalOpen(true);}; const handleSave = (data) => { const method = data.id ? 'PUT' : 'POST'; const url = data.id ? `/api/links/${data.id}` : '/api/links'; fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) .then(authed) .then((resp) => { if (resp && resp.error) { console.error('Save error:', resp.error); return; } const norm = { ...data, active: data.active ? 1 : 0, scammerTrap: data.scammerTrap ? 1 : 0, trackDetails: data.trackDetails ? 1 : 0, embedEnabled: data.embedEnabled ? 1 : 0 }; setLinks(prev => data.id ? prev.map(l => l.id === data.id ? { ...l, ...norm } : l) : [...prev, { ...norm, id: resp.id, clicks: 0, created: resp.created }]); setModalOpen(false); }) .catch(e => console.error('Save error:', e)); }; const handleDelete = (id) => { fetch(`/api/links/${id}`, { method: 'DELETE' }) .then(authed) .then(() => { setLinks(prev => prev.filter(l => l.id !== id)); if (expandedId === id) setExpandedId(null); }) .catch(e => console.error('Delete error:', e)); }; const LinkModal = window.LinkModal; const QRModal = window.QRModal; const LogsView = window.LogsView; const TrapDataModal = window.TrapDataModal; const sidebarBase = { display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--surface)', borderRight: '1px solid var(--border)' }; return (
{/* Desktop sidebar */} {!isMobile && } {/* Mobile drawer backdrop */} {isMobile && drawer &&
setDrawer(false)} style={{ position: 'fixed', inset: 0, background: 'oklch(0% 0 0 / 0.5)', zIndex: 299, backdropFilter: 'blur(2px)' }} /> } {/* Mobile drawer */} {isMobile && } {/* Main */}
{/* Mobile topbar */} {isMobile &&
{domain}
}
{nav === 'links' && setTrapViewLink(link)} /> } {nav === 'logs' && } {nav === 'settings' && }
{modalOpen && LinkModal && setModalOpen(false)} />} {qrLink && QRModal && setQrLink(null)} />} {trapViewLink && TrapDataModal && setTrapViewLink(null)} />}
); } Object.assign(window, { Admin });