); })()}
{/* achievements — compact pill; tap to open the full list overlay (like Rank Evolution) */}
{t('achievements')}
{(() => {
const unlockedMap = stats.achUnlocked || {};
const total = ACHIEVEMENTS.length;
const gotCount = ACHIEVEMENTS.filter((a) => unlockedMap[a.key]).length;
// preview: most-recently unlocked first, then locked — a glanceable strip of icons
const unlockedList = ACHIEVEMENTS.filter((a) => unlockedMap[a.key]).sort((a, b) => String(unlockedMap[b.key]).localeCompare(String(unlockedMap[a.key])));
const lockedList = ACHIEVEMENTS.filter((a) => !unlockedMap[a.key]);
const preview = unlockedList.concat(lockedList).slice(0, 6);
return (
);
})()}
);
}
// Weekly Activity — 7 bars (Mon–Sun) of daily focus minutes. Tap a bar for a
// premium tooltip showing the day and total; smooth fade in / out.
// Generic activity bar chart with a tap-to-reveal tooltip. Used for both the weekly
// (7 day) and monthly (4 week) views inside the ActivityCard.
function ActivityBars({ values, labelFor, tipFor, highlightIdx, accent, th }) {
const [sel, setSel] = React.useState(null);
const lastRef = React.useRef(highlightIdx != null ? highlightIdx : 0);
const n = values.length;
const max = Math.max(60, ...values);
const fmt = (m) => { const h = Math.floor(m / 60), mm = m % 60; return h > 0 ? `${h}h ${String(mm).padStart(2, '0')}m` : `${mm}m`; };
if (sel != null) lastRef.current = sel;
const tipIdx = sel != null ? sel : lastRef.current;
return (
{tipFor(tipIdx)}
{fmt(values[tipIdx])}
{values.map((m, i) => {
const bh = Math.max(6, Math.round((m / max) * 88));
const on = sel === i, hi = i === highlightIdx;
return (
);
})}
);
}
// Free activity card — segmented Weekly / Monthly switch, total + average-per-day,
// and an animated bar chart that swaps smoothly between the two views.
function ActivityCard({ stats, accent, th, t, lang }) {
const [view, setView] = React.useState('weekly');
const weekly = view === 'weekly';
const fmt = (m) => { const h = Math.floor(m / 60), mm = m % 60; return h > 0 ? `${h}h ${String(mm).padStart(2, '0')}m` : `${mm}m`; };
const week = (stats.weekDaily && stats.weekDaily.length === 7) ? stats.weekDaily : [0, 0, 0, 0, 0, 0, 0];
const month = (stats.monthWeekly && stats.monthWeekly.length === 4) ? stats.monthWeekly : [0, 0, 0, 0];
const total = weekly ? stats.weekMinutes : stats.monthMinutes;
const avg = weekly ? Math.round(stats.weekMinutes / 7) : Math.round(stats.monthMinutes / 30);
const todayIdx = (new Date().getDay() + 6) % 7;
const narrow = new Intl.DateTimeFormat(lang || 'en', { weekday: 'narrow' });
const long = new Intl.DateTimeFormat(lang || 'en', { weekday: 'long' });
const dayDate = (i) => new Date(2024, 0, 1 + i); // 2024-01-01 was a Monday
return (
);
}
function SectionTitle({ children, th }) {
return
{children}
;
}
// Goal progress bar — the entire pill is tappable and opens the goal editor.
function GoalBar({ th, accent, icon, label, done, goal, t, onEdit }) {
const pct = Math.min(100, Math.round((done / Math.max(1, goal)) * 100));
const reached = done >= goal;
return (
);
}
// ── RankJourney — the full 20-level progression as a vertical milestone timeline ──
// Completed ranks are checked, the current rank highlighted with its live progress,
// the next rank flagged as the target, locked ranks dimmed, and Crown made special.
function RankJourney({ levelIdx, totalHours, th, accent, onClose }) {
const { t, dir } = useI18n();
return (
{t('evolution')}
{t('journey_sub')}
{LEVELS.map((lv, i) => {
const reached = i <= levelIdx, current = i === levelIdx, next = i === levelIdx + 1, isCrown = i === LEVELS.length - 1;
const nextLv = LEVELS[i + 1];
const curPct = nextLv ? Math.max(3, Math.min(100, Math.round((totalHours / nextLv.hours) * 100))) : 100;
return (
{/* rail — vivid badges only, vertically centred against their card */}