/* profile-ui.jsx — shared UI for the Profile feature (icons, Screen scaffold,
Toggle, SettingsRow, Stat, reaction pills, SlideToConfirm). Exports to window. */
/* ============================================================
Hand-drawn line icons (stroke = currentColor)
============================================================ */
function Ic({ d, size = 24, fill = 'none', sw = 2, vb = 24, children, style }) {
return (
);
}
const IconGear = (p) => (
);
const IconBell = (p) => (
);
const IconShield = (p) => (
);
const IconDoc = (p) => (
);
const IconPencil = (p) => (
);
const IconMoon = (p) => (
);
const IconLogout = (p) => (
);
const IconTrash = (p) => (
);
const IconShare = (p) => (
);
const IconChevron = (p) => ;
const IconGrid = (p) => (
);
const IconHeart = (p) => (
);
/* reaction glyphs */
const IconSip = (p) => ( // coffee cup
);
const IconSplash = (p) => ( // repost arrows
);
const IconTake = (p) => ( // speech bubble
);
const IconWhisper = (p) => ( // envelope
);
const IconCamera = (p) => ( // camera
);
const IconX = (p) => ;
/* ============================================================
Screen scaffold (header / scroll body / footer)
============================================================ */
function Screen({ title, onBack, headerRight, children, footer, padX = 20, bodyRef, headerLeft }) {
return (
{onBack ? : (headerLeft || )}
{title != null &&
{title}
}
{headerRight || }
{children}
{footer &&
{footer}
}
);
}
/* round icon button (header actions) */
function IconBtn({ onClick, label, children, tiltDeg = -3 }) {
return (
);
}
/* ============================================================
Toggle switch
============================================================ */
function Toggle({ checked, onChange, label }) {
return (
);
}
/* ============================================================
Settings row
============================================================ */
function SettingsRow({ icon, iconBg, title, sub, detail, right, onClick, danger, last, chevron = true }) {
const clickable = !!onClick && !right;
return (
clickable && (e.key === 'Enter') && onClick()}
style={last ? { borderBottom: 'none' } : undefined}>
{icon && {icon}}
{title}
{sub && {sub}}
{detail && {detail}}
{right}
{!right && chevron && onClick && }
);
}
/* ============================================================
Reaction pill + inline stat
============================================================ */
function ReactionPill({ icon, n, on, onClick }) {
return (
);
}
/* ============================================================
Slide-to-confirm (delete)
============================================================ */
function SlideToConfirm({ label = 'slide to delete', onConfirm }) {
const trackRef = React.useRef(null);
const [x, setX] = React.useState(0);
const xRef = React.useRef(0);
const [done, setDone] = React.useState(false);
const drag = React.useRef(false);
const maxRef = React.useRef(0);
const setPos = (v) => { xRef.current = v; setX(v); };
const measure = () => {
const t = trackRef.current; if (!t) return 0;
maxRef.current = t.offsetWidth - 56 - 6; return maxRef.current;
};
const onDown = (e) => { if (done) return; drag.current = true; measure(); try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {} };
const onMove = (e) => {
if (!drag.current) return;
const t = trackRef.current; const rect = t.getBoundingClientRect();
let nx = e.clientX - rect.left - 30;
nx = Math.max(0, Math.min(maxRef.current, nx));
setPos(nx);
};
const finish = () => {
if (!drag.current) return; drag.current = false;
if (xRef.current >= maxRef.current - 8) { setPos(maxRef.current); setDone(true); setTimeout(onConfirm, 240); }
else setPos(0);
};
const pct = maxRef.current ? x / maxRef.current : 0;
return (
);
}
Object.assign(window, {
Ic, IconGear, IconBell, IconShield, IconDoc, IconPencil, IconMoon, IconLogout, IconTrash,
IconShare, IconChevron, IconGrid, IconHeart, IconSip, IconSplash, IconTake, IconWhisper, IconCamera, IconX,
Screen, IconBtn, Toggle, SettingsRow, ReactionPill, SlideToConfirm,
});