{tT(lang, "Habits · last 7 days", "Hábitos · últimos 7 días")}
{tT(lang, "Tap to log · cycles empty → half → full", "Toca para marcar")}
{tT(lang, "Habit", "Hábito")}
{letters.map((d, i) => {d})}
{habits.map((h) => {
const streak = computeStreak(h.checks);
return (
{h.name[lang === "ES" ? "es" : "en"]}
0 ? "var(--sand)" : "var(--muted-2)" }} /> {streak}d
{dates.map((d, i) => {
const val = h.checks[d] || 0;
return (
toggle(h.id, d)}
/>
);
})}
);
})}
);
};
/* ============================================
STATS — read from pomodoro.daily
============================================ */
const Bar = ({ h, val, day, today }) => (
);
const StatsCard = ({ lang, pomodoro, fullWidth }) => {
const [scope, setScope] = useState("week");
const tabs = [
{ id: "week", en: "Week", es: "Semana" },
{ id: "month", en: "Month", es: "Mes" },
{ id: "all", en: "All time", es: "Total" },
];
const dates = T.last7DaysISO();
const labels = T.last7DayLabels(lang);
const vals = dates.map(d => pomodoro.daily[d] || 0);
const max = Math.max(8, ...vals); // floor target of 8 for sense of scale
const weekTotal = vals.reduce((a, b) => a + b, 0);
const allDays = Object.keys(pomodoro.daily);
const allTotal = allDays.reduce((a, d) => a + pomodoro.daily[d], 0);
const targetDays = vals.filter(v => v >= 4).length;
const targetPct = Math.round(targetDays / 7 * 100);
const totalMin = weekTotal * 55;
const focusH = Math.floor(totalMin / 60);
const focusM = totalMin % 60;
return (
{tT(lang, "Focus · last 7 days", "Enfoque · últimos 7 días")}
{tT(lang, "Real Pomodoros from your history · target 4 / day", "Pomodoros reales · meta 4 / día")}
{tabs.map(tab => (
))}
{vals.map((v, i) => (
))}
{weekTotal}
{tT(lang, "This week", "Esta semana")}
{focusH}h {focusM}m
{tT(lang, "Total focus time", "Tiempo total")}
{targetPct}%
{tT(lang, "Days hit target", "Días con meta")}
{scope === "all" && (
{tT(lang, "All-time Pomodoros logged", "Pomodoros totales")}:
{allTotal}
)}
);
};
/* ============================================
NOTES — dynamic dates
============================================ */
const NotesCard = ({ lang, notes, onAdd, onEdit, fullWidth }) => {
const [hover, setHover] = useState(null);
const tagStyle = (c) => {
if (c === "sage") return { background: "var(--sage-soft)", color: "var(--sage-deep)" };
if (c === "sky") return { background: "var(--sky-soft)", color: "#3d6a7d" };
if (c === "rust") return { background: "#f4dcd1", color: "#8a4a32" };
return {};
};
return (
{tT(lang, "Recent notes", "Notas recientes")}
{tT(lang, `Markdown · ${notes.length} notes · stored locally`, `Markdown · ${notes.length} notas · locales`)}
{notes.map((n) => (
onEdit && onEdit(n)}
onMouseEnter={() => setHover(n.id)}
onMouseLeave={() => setHover(null)}
style={{ cursor: "pointer", transform: hover === n.id ? "translateY(-2px)" : "none", transition: "transform 0.15s, box-shadow 0.15s", boxShadow: hover === n.id ? "var(--shadow-md)" : "none" }}
>
{n.pinned && }
{n.title[lang === "ES" ? "es" : "en"]}
{n.snippet[lang === "ES" ? "es" : "en"]}
{n.tag}
{T.relativePast(n.updatedISO, lang)}
))}
);
};
/* ============================================
EISENHOWER MATRIX — read-from-tasks 2x2 quadrant view
============================================ */
const QuadrantPanel = ({ qid, qDef, tasks, lang, onTaskClick, onEditTask }) => {
const tag = qid.toUpperCase();
const [expanded, setExpanded] = useState(false);
const visibleTasks = expanded ? tasks : tasks.slice(0, 5);
return (
{tag}
{PHub.localize(qDef.name, lang)}
{PHub.localize(qDef.sub, lang)}
{tasks.length}
{tasks.length === 0 ? (
— {tT(lang, "Empty", "Vacío")}
) : (
visibleTasks.map(t => (
onEditTask && onEditTask(t)}>{t.text[lang === "ES" ? "es" : "en"]}
))
)}
{tasks.length > 5 && (
)}
);
};
const EisenhowerCard = ({ lang, tasks, setTasks, onEditTask, fullWidth }) => {
const undone = tasks.items.filter(t => !t.done);
const all = tasks.items;
// Use undone for body, but also include done so user sees check-off effect briefly
const visible = all; // show all so checking off doesn't make it disappear instantly
const bucket = { q1: [], q2: [], q3: [], q4: [] };
visible.forEach(t => {
const q = PHub.inferQuadrant(t);
bucket[q].push(t);
});
// sort: not done first, then done
Object.keys(bucket).forEach(k => {
bucket[k].sort((a, b) => (a.done ? 1 : 0) - (b.done ? 1 : 0));
});
const toggle = (id) => {
setTasks((tk) => ({ ...tk, items: tk.items.map(i => i.id === id ? { ...i, done: !i.done } : i) }));
};
const Q = PHub.quadrants;
return (
{tT(lang, "Eisenhower matrix", "Matriz de Eisenhower")}
{tT(lang, "Important × Urgent quadrants", "Importancia × Urgencia")}
);
};
window.cardsTimers = { PomodoroCard, CountdownCard };
window.cardsTasks = { TasksCard, HabitsCard, EisenhowerCard };
window.cardsInsight = { StatsCard, NotesCard };