// Agenda UI components.
// All components expect global helpers from agenda-data.jsx
// (TODAY, addDays, daysBetween, fromISODate, toISODate, CATEGORIES, etc.)
// and the i18n helper t() from src/i18n/.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
/* ─── Icons ──────────────────────────────────────────────────────────── */
const Icon = {
plus: (p) => ,
close: (p) => ,
check: (p) => ,
moon: (p) => ,
sun: (p) => ,
trash: (p) => ,
edit: (p) => ,
left: (p) => ,
right: (p) => ,
list: (p) => ,
grid: (p) => ,
pin: (p) => ,
paperclip: (p) => ,
link2: (p) => ,
filePdf: (p) => ,
image: (p) => ,
video: (p) => ,
spinner: (p) => ,
bubbles: (p) => ,
user: (p) => ,
help: (p) => ,
};
/* ─── AttachIcon ─────────────────────────────────────────────────────── */
function AttachIcon({ type, ...props }) {
if (type === 'pdf') return ;
if (type === 'image') return ;
if (type === 'video') return ;
return ;
}
/* ─── FilterBar ─────────────────────────────────────────────────────── */
function FilterBar({ filters, onToggle }) {
const active = filters.hidePast || filters.hideDone;
return (
);
}
/* ─── ViewToggle ────────────────────────────────────────────────────── */
function ViewToggle({ value, onChange }) {
return (
);
}
/* ─── Header ────────────────────────────────────────────────────────── */
function Header({ dark, onToggleTheme, onAdd, syncStatus, view, onChangeView, username, onOpenAccount, onOpenHelp }) {
const greet = (() => {
const h = new Date().getHours();
if (h < 6) return t('header.greetingNight');
if (h < 13) return t('header.greetingMorning');
if (h < 21) return t('header.greetingAfternoon');
return t('header.greetingNight');
})();
return (
);
}
/* ─── ItemCard ──────────────────────────────────────────────────────── */
function ItemCard({ item, onOpen, onDelete, onToggleDone, index, big }) {
const d = fromISODate(item.date);
const c = CATEGORIES[item.cat] || CATEGORIES.personal;
const n = daysBetween(TODAY, d);
const overdue = n < 0;
const done = !!item.done;
const locName = item.location_name || item.location || '';
const locAddr = item.location_address || item.location_name || item.location || '';
const hasLocation = !!locName;
const attachments = item.attachments || [];
return (
);
}
/* ─── DaySection ─────────────────────────────────────────────────────── */
function DaySection({ date, items, onOpen, onDelete, onToggleDone, variant }) {
// variant: 'today' | 'tomorrow' | 'day' | 'overdue' | 'later'
const isToday = variant === 'today';
const isTomorrow = variant === 'tomorrow';
const isLater = variant === 'later';
const isOver = variant === 'overdue';
// "Far" = day of week is ambiguous (next week or later) → emphasize date too.
const n = date ? daysBetween(TODAY, date) : 0;
const isFar = variant === 'day' && n >= 7;
return (
{items.map((it, i) => (
))}
);
}
/* ─── AgendaView — list grouped by day ──────────────────────────────── */
function AgendaView({ items, onOpen, onDelete, onToggleDone, onAddOnDay }) {
const { sections, later, overdue } = useMemo(() => {
// Group by ISO date
const byDate = new Map();
items.forEach(it => {
if (!byDate.has(it.date)) byDate.set(it.date, []);
byDate.get(it.date).push(it);
});
const sortedDates = [...byDate.keys()].sort();
const sections = [];
const later = [];
const overdue = [];
sortedDates.forEach(iso => {
const d = fromISODate(iso);
const n = daysBetween(TODAY, d);
const its = byDate.get(iso).slice().sort((a, b) => {
if (a.time && b.time) return a.time.localeCompare(b.time);
if (a.time) return -1;
if (b.time) return 1;
return a.title.localeCompare(b.title);
});
if (n < 0) {
overdue.push({ date: d, items: its });
} else if (n <= 14) {
let variant = 'day';
if (n === 0) variant = 'today';
else if (n === 1) variant = 'tomorrow';
sections.push({ date: d, items: its, variant });
} else {
later.push(...its.map(it => ({ ...it, _d: d })));
}
});
later.sort((a,b) => a._d - b._d);
return { sections, later, overdue };
}, [items]);
// Always show today's section even when empty, with empty-state hint.
const todayKey = toISODate(TODAY);
const hasToday = sections.some(s => toISODate(s.date) === todayKey);
if (!hasToday) {
sections.unshift({ date: TODAY, items: [], variant: 'today' });
sections.sort((a,b) => a.date - b.date);
}
return (
{overdue.length > 0 && overdue.map(({ date, items }, i) => (
))}
{sections.map((s, i) => {
if (s.variant === 'today' && s.items.length === 0) {
return (
{t('agendaView.emptyToday')}
);
}
return (
);
})}
{later.length > 0 && (
)}
{fmtMonthYear(monthAnchor)}
{t('weekdaysShort').map(w =>
{w}
)}
{days.map(d => {
const inMonth = d.getMonth() === monthAnchor.getMonth();
const isToday = isSameDay(d, TODAY);
const isSel = selectedDate && isSameDay(d, selectedDate);
const count = counts.get(toISODate(d)) || 0;
return (
);
})}
);
}
/* ─── CalendarView — two months side by side, deadlines as pills ───── */
function CalendarView({ items, monthAnchor, setMonthAnchor, onOpen, onAddOnDay, onDelete, onToggleDone }) {
const monthA = startOfMonth(monthAnchor);
const monthB = startOfMonth(addDays(endOfMonth(monthA), 1));
const byDate = useMemo(() => {
const m = new Map();
items.forEach(it => {
if (!m.has(it.date)) m.set(it.date, []);
m.get(it.date).push(it);
});
m.forEach(arr => arr.sort((a, b) => {
if (a.time && b.time) return a.time.localeCompare(b.time);
if (a.time) return -1;
if (b.time) return 1;
return a.title.localeCompare(b.title);
}));
return m;
}, [items]);
const [pickDay, setPickDay] = useState(null);
const goPrev = () => setMonthAnchor(addDays(monthA, -1));
const goNext = () => setMonthAnchor(addDays(endOfMonth(monthA), 1));
const goToday = () => setMonthAnchor(TODAY);
return (
{fmtMonthYear(monthA)}
→
{fmtMonthYear(monthB)}
{pickDay && (
{ setPickDay(null); onOpen(it); }}
onDelete={onDelete}
onToggleDone={onToggleDone}
onClose={() => setPickDay(null)}
onAddOnDay={onAddOnDay}
floating
/>
)}
);
}
function CMonth({ month, byDate, onOpen, onAddOnDay, onMore }) {
const first = startOfMonth(month);
const gridStart = startOfWeek(first);
const lastOfMonth = endOfMonth(month);
const weeks = [];
let cursor = gridStart;
while (cursor <= lastOfMonth) {
weeks.push(Array.from({ length: 7 }, (_, i) => addDays(cursor, i)));
cursor = addDays(cursor, 7);
}
const monthIdx = month.getMonth();
const weekLoad = weeks.map(w =>
w.reduce((sum, d) => {
if (d.getMonth() !== monthIdx) return sum;
return sum + ((byDate.get(toISODate(d)) || []).length);
}, 0)
);
const maxLoad = Math.max(1, ...weekLoad);
return (
{t('monthsLong')[month.getMonth()]}
{month.getFullYear()}
{t('weekdaysShort').map(w =>
{w}
)}
{weeks.map((week, wi) => {
const load = weekLoad[wi];
const ratio = load / maxLoad;
return (
{load > 0 && {load}}
{week.map(d => {
const inMonth = d.getMonth() === monthIdx;
const isToday = isSameDay(d, TODAY);
const isPast = daysBetween(TODAY, d) < 0;
const its = inMonth ? (byDate.get(toISODate(d)) || []) : [];
return (
{its.length > 0 && (
{its.map(it => {
const c = CATEGORIES[it.cat] || CATEGORIES.personal;
return (
);
})}
)}
);
})}
);
})}
);
}
/* ─── DayPanel ──────────────────────────────────────────────────────── */
function DayPanel({ date, items, onOpen, onDelete, onToggleDone, onClose, onAddOnDay, floating }) {
if (!date) return null;
const content = (
{relativeLabel(date)}
{fmtLongDate(date)}
{items.length === 0 ? (
{t('daypanel.empty')}
) : (
{items.map((it, i) => (
))}
)}
);
if (!floating) return content;
return (
{ if (e.target === e.currentTarget) onClose(); }}>
{content}
);
}
/* ─── EditorModal ───────────────────────────────────────────────────── */
function EditorModal({ open, draft, onChange, onSave, onCancel, onDelete, apiBase }) {
const titleRef = useRef(null);
const fileInputRef = useRef(null);
const [addingLink, setAddingLink] = useState(false);
const [linkForm, setLinkForm] = useState({ name: '', url: '' });
const [uploading, setUploading] = useState(false);
const [uploadError, setUploadError] = useState('');
useEffect(() => {
if (open && titleRef.current) {
const tm = setTimeout(() => titleRef.current && titleRef.current.focus(), 60);
return () => clearTimeout(tm);
}
}, [open]);
useEffect(() => {
if (!open) {
setAddingLink(false);
setLinkForm({ name: '', url: '' });
setUploading(false);
setUploadError('');
}
}, [open]);
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === 'Escape') { if (addingLink) { setAddingLink(false); } else { onCancel(); } }
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) onSave();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, onSave, onCancel, addingLink]);
if (!open) return null;
const isEditing = !!draft.id && !draft.isNew;
const attachments = draft.attachments || [];
function removeAttachment(id) {
const att = attachments.find(a => a.id === id);
onChange({ ...draft, attachments: attachments.filter(a => a.id !== id) });
// Best-effort server cleanup for uploaded files
if (att && att.type !== 'link' && apiBase) {
const filename = att.url.split('/').pop();
fetch(`${apiBase}/upload/${encodeURIComponent(filename)}`, { method: 'DELETE', credentials: 'same-origin' }).catch(() => {});
}
}
function confirmLink() {
if (!linkForm.url.trim()) return;
const url = linkForm.url.trim();
const name = linkForm.name.trim() || url;
const newAtt = { id: `att-${Date.now().toString(36)}`, type: 'link', name, url };
onChange({ ...draft, attachments: [...attachments, newAtt] });
setAddingLink(false);
setLinkForm({ name: '', url: '' });
}
function handleFileChange(e) {
const file = e.target.files?.[0];
if (!file || !apiBase) return;
e.target.value = '';
setUploading(true);
setUploadError('');
const fd = new FormData();
fd.append('file', file);
fetch(`${apiBase}/upload`, { method: 'POST', body: fd, credentials: 'same-origin' })
.then(r => r.ok ? r.json() : r.json().then(j => Promise.reject(j.error || t('editor.uploadError'))))
.then(data => {
const newAtt = {
id: `att-${Date.now().toString(36)}`,
type: data.type,
name: data.name,
url: data.url,
};
onChange({ ...draft, attachments: [...attachments, newAtt] });
setUploading(false);
})
.catch(err => {
setUploadError(typeof err === 'string' ? err : t('editor.uploadError'));
setUploading(false);
});
}
return (
{ if (e.target === e.currentTarget) onCancel(); }}>
{isEditing ? t('editor.editTitle') : t('editor.newTitle')}