/* Right-side Detail slide-over.
v2: single-date default + range toggle, product conditional on category=Products,
sub-product (MegaETH app) conditional on product=MegaETH, sub-tasks for
multi-day events, SVG header icons, prominent stage chip.
*/
const { useState: useStateDt, useRef: useRefDt, useEffect: useEffectDt, useCallback: useCallbackDt, useMemo: useMemoDt } = React;
const UD = window.mcalUtils;
/* Regex constants hoisted to module scope so they're not re-compiled
per function call. */
const SCHEME_RE = /^[a-z][a-z0-9+\-.]*:/i;
const MENTION_SEG_RE = /^[A-Za-z0-9_\-.]*$/;
const NON_WORD_RE = /[^A-Za-z0-9_]/;
const URL_PREFIX_RE = /^(https?:\/\/[^\s<>'"]+|www\.[^\s<>'"]+)/i;
/* Normalize a user-entered URL — if they typed bare 'typefully.com/...'
without a scheme, prepend https:// so the link actually opens. */
function normalizeUrl(raw) {
if (!raw) return '';
const v = raw.trim();
if (!v) return '';
if (SCHEME_RE.test(v)) return v; // already has scheme
return 'https://' + v;
}
/* Display a URL compactly — hostname + truncated path. */
function prettyUrl(raw) {
try {
const u = new URL(normalizeUrl(raw));
const host = u.hostname.replace(/^www\./, '');
const path = (u.pathname + (u.search || '')).replace(/\/$/, '');
if (!path) return host;
const short = path.length > 28 ? path.slice(0, 28) + '…' : path;
return host + short;
} catch {
return raw;
}
}
/* SVG icons — bigger / more legible than the unicode glyphs */
const Ic = {
ExternalLink: () => (
),
Trash: () => (
),
Close: () => (
),
Plus: () => (
),
};
/* Stage glyph rendered as SVG — gives precise pie-fill control,
so 35% / 75% etc are renderable (Unicode only offers 0/25/50/75/100). */
function StageGlyph({ pct, size = 12 }) {
const p = Math.max(0, Math.min(100, pct || 0));
const r = 5;
const cx = 6, cy = 6;
if (p <= 0) {
return (
);
}
if (p >= 100) {
return (
);
}
const angle = (p / 100) * 2 * Math.PI;
const endX = cx + r * Math.sin(angle);
const endY = cy - r * Math.cos(angle);
const largeArc = p > 50 ? 1 : 0;
return (
);
}
function StageChip({ stageId, options, bigger, full }) {
const s = UD.stageById(options, stageId);
if (!s) return null;
const label = full ? s.name : (s.short || s.name);
return (
{label}
);
}
function ProductTag({ event, options, bigger }) {
if (!event.product) return null;
const prod = options.products.find(p => p.id === event.product);
if (!prod) return null;
const sub = event.subproduct ? (options.subproducts || []).find(s => s.id === event.subproduct) : null;
return (
{prod.name.toUpperCase()}
{sub && / {sub.name.toUpperCase()}}
);
}
window.mcalStageChip = StageChip;
window.mcalStageGlyph = StageGlyph;
window.mcalProductTag = ProductTag;
/* Glyph-only stage indicator used on tight month-view pills.
No text — just the SVG circle in its stage color. */
function StageGlyphPill({ stageId, options, size }) {
const s = UD.stageById(options, stageId);
if (!s) return null;
const pct = s.fillPct != null ? s.fillPct : ((s.order + 1) / 4) * 100;
return (
);
}
window.mcalStageGlyphPill = StageGlyphPill;
/* Render free text with auto-linked URLs AND @mention highlighting.
- URLs (http(s):// or bare www.*) →
- @Name where Name matches an owner's full name OR first name →
bold span colored with the owner's accent.
Returns an array of strings/elements, or the original text if no
matches. Empty input returns null. */
function renderRichText(text, options) {
if (!text) return null;
const owners = (options && options.owners) || [];
// Pre-compute lowercase name + first-name pairs once per call so the
// inner mention loop doesn't re-toLowerCase on every character.
const ownerKeys = owners.length
? owners.map(o => {
const lc = (o.name || '').toLowerCase();
const first = lc.split(' ')[0] || '';
return { o, candidates: lc === first ? [lc] : [lc, first] };
})
: null;
const parts = [];
let buf = '';
let keyN = 0;
const flush = () => { if (buf) { parts.push(buf); buf = ''; } };
let i = 0;
while (i < text.length) {
// URL detection
const urlMatch = text.slice(i).match(URL_PREFIX_RE);
if (urlMatch) {
flush();
const raw = urlMatch[0];
const href = raw.startsWith('http') ? raw : 'https://' + raw;
parts.push(
e.stopPropagation()}
>{raw}
);
i += raw.length;
continue;
}
// @mention detection — match the longest of (full name, first name)
// for any owner. Boundary is end-of-string or any non-word char so
// "@Aaron." or "@Aaron," still resolve.
if (text[i] === '@' && ownerKeys) {
const restLc = text.slice(i + 1).toLowerCase();
let matched = null;
let matchLen = 0;
for (const ok of ownerKeys) {
for (const cand of ok.candidates) {
if (!cand) continue;
if (cand.length <= matchLen) continue;
if (restLc.startsWith(cand)) {
const next = text[i + 1 + cand.length];
if (next === undefined || NON_WORD_RE.test(next)) {
matchLen = cand.length;
matched = ok.o;
}
}
}
}
if (matched) {
flush();
// Display the canonical-cased slice the user typed (the lower-
// case `matchLen` is the same length as the user's slice).
const displayed = text.slice(i, i + 1 + matchLen);
parts.push(
{displayed}
);
i += 1 + matchLen;
continue;
}
}
buf += text[i];
i++;
}
flush();
return parts.length === 0 ? text : parts;
}
window.mcalRichText = renderRichText;
/* Notes editor — display mode renders auto-linked text + @mentions
colored by the owner's accent. Click to edit, blur or Cmd/Ctrl+Enter
to save, Esc to revert. */
function NotesField({ value, onChange, placeholder, rows, options }) {
const [editing, setEditing] = useStateDt(false);
const [draft, setDraft] = useStateDt(value || '');
const taRef = useRefDt(null);
useEffectDt(() => { if (!editing) setDraft(value || ''); }, [value, editing]);
// Auto-grow: each render in edit mode, resize textarea to fit content.
// Set height to 'auto' first so scrollHeight reflects the natural size
// (otherwise it keeps the previous larger height).
const autoSize = () => {
const ta = taRef.current;
if (!ta) return;
ta.style.height = 'auto';
ta.style.height = ta.scrollHeight + 'px';
};
useEffectDt(() => {
if (editing && taRef.current) {
taRef.current.focus();
const v = taRef.current.value;
taRef.current.setSelectionRange(v.length, v.length);
autoSize();
}
}, [editing]);
useEffectDt(() => { if (editing) autoSize(); }, [draft, editing]);
if (editing) {
return (
);
}
const display = value || '';
return (
setEditing(true)}
title="Click to edit"
>
{display ? renderRichText(display, options) : (placeholder || 'Click to add notes…')}
);
}
function NotesEditor({ taRef, draft, setDraft, value, rows, placeholder, options, onChange, setEditing }) {
const mention = useMentionAutocomplete(taRef, draft, setDraft, options);
return (