// Login-awards fetch runs on every navigation (including hx-boost body swaps // which preserve window, so it must live outside the __appInit guard). // Server-side _loginStreakDone cache makes it idempotent; localStorage dedupes the modal. // On a full page load we wait for the window 'load' event so React has finished // hydrating before any DOM mutations (toast injection, modal open) happen. // On hx-boost navigations readyState is already 'complete' so we fire immediately. (function() { function doLoginAwards() { fetch('/api/htmx/login-awards', { method: 'POST' }) .then(function(r) { if (!r.ok) return { html: '', repair: false }; var repair = r.headers.get('X-Streak-Repair') === '1'; return r.text().then(function(html) { return { html: html, repair: repair }; }); }) .then(function(data) { if (data.html) { var tc = document.getElementById('toast-container'); if (tc) { tc.insertAdjacentHTML('beforeend', data.html); Array.from(tc.children).forEach(function(t) { if (!t.dataset.autoDismiss) { t.dataset.autoDismiss = '1'; setTimeout(function() { t.style.transition = 'opacity 300ms ease-out'; t.style.opacity = '0'; setTimeout(function() { if (t.isConnected) t.remove(); }, 300); }, 3000); } }); } } if (data.repair) document.dispatchEvent(new Event('openStreakRepairModal')); }).catch(function() {}); } if (document.readyState === 'complete') { doLoginAwards(); } else { window.addEventListener('load', doLoginAwards, { once: true }); } })(); (function() { if (window.__appInit) return; window.__appInit = true; // Dark mode toggle document.addEventListener('click', function(e) { if (!e.target.closest('[data-theme-toggle]')) return; var isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); }); // Nav dropdown — close when clicking outside document.addEventListener('click', function(e) { document.querySelectorAll('details[data-nav-dropdown]').forEach(function(d) { if (d.open && !d.contains(e.target)) d.removeAttribute('open'); }); }); // Position a dropdown above or below its trigger depending on available space. // BOTTOM_SAFE accounts for the fixed bottom tab bar (h-14 = 56px) plus margin. function positionActionMenu(trigger, menu) { var BOTTOM_SAFE = 72; var parent = menu.offsetParent || menu.parentElement; if (!parent) return; var triggerRect = trigger.getBoundingClientRect(); var parentRect = parent.getBoundingClientRect(); var spaceBelow = window.innerHeight - triggerRect.bottom - BOTTOM_SAFE; if (spaceBelow < menu.offsetHeight) { menu.style.top = 'auto'; menu.style.bottom = (parentRect.bottom - triggerRect.top) + 'px'; } else { menu.style.top = (triggerRect.bottom - parentRect.top) + 'px'; menu.style.bottom = 'auto'; } } // Action menus (three-dot) — close when clicking outside document.addEventListener('click', function(e) { document.querySelectorAll('details[data-action-menu]').forEach(function(d) { if (d.open && !d.contains(e.target)) d.removeAttribute('open'); }); // Task card action menu trigger — toggle dropdown var trigger = e.target.closest('[data-action-menu-trigger]'); var openedId = null; if (trigger) { var menuId = trigger.getAttribute('data-action-menu-trigger'); var menu = document.getElementById(menuId); if (menu) { menu.hidden = !menu.hidden; if (!menu.hidden) { openedId = menuId; positionActionMenu(trigger, menu); } } } // Close any other open action dropdowns document.querySelectorAll('[data-action-dropdown]:not([hidden])').forEach(function(d) { if (d.id !== openedId && !d.contains(e.target)) d.hidden = true; }); }); // Habit card action menus use

— reposition on open using capture-phase toggle document.addEventListener('toggle', function(e) { if (!e.target.matches('details[data-action-menu]') || !e.target.open) return; var summary = e.target.querySelector('summary'); var dropdown = e.target.querySelector(':scope > div'); if (summary && dropdown) positionActionMenu(summary, dropdown); }, true); // Avatar image fallback — replace broken img with initials circle. // error doesn't bubble so we use capture phase. document.addEventListener('error', function(e) { var img = e.target; if (!img || img.tagName !== 'IMG' || !img.dataset.initials) return; var div = document.createElement('div'); div.className = 'w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-teal-400 flex items-center justify-center text-white text-xs font-bold select-none'; div.textContent = img.dataset.initials; img.replaceWith(div); }, true); // Optimistic task-completion UI var CHECKMARK = ''; function showClientToast(message, type) { var container = document.getElementById('toast-container'); if (!container) return; var el = document.createElement('div'); el.className = 'flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg text-sm font-medium animate-slide-in ' + (type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'); el.innerHTML = '' + (type === 'error' ? '✕' : 'ℹ') + '' + message + ''; container.appendChild(el); setTimeout(function() { el.style.transition = 'opacity 300ms ease-out'; el.style.opacity = '0'; setTimeout(function() { if (el.isConnected) el.remove(); }, 300); }, 3000); } document.addEventListener('click', function(e) { var btn = e.target.closest('[data-complete-btn], [data-uncomplete-btn]'); if (!btn || btn.disabled) return; btn.dataset.origClass = btn.className; btn.dataset.origInner = btn.innerHTML; if ('habitPill' in btn.dataset) { // Habit pill: only swap the checkbox indicator, leave the rest of the pill intact var checkbox = btn.querySelector('[data-habit-checkbox]'); if (checkbox) { var filled = document.createElement('span'); filled.className = 'w-4 h-4 rounded-full bg-teal-400 flex items-center justify-center flex-shrink-0 transition-colors'; filled.innerHTML = ''; checkbox.replaceWith(filled); } } else { btn.className = btn.dataset.doneClass; btn.innerHTML = btn.hasAttribute('data-uncomplete-btn') ? '' : CHECKMARK; } btn.disabled = true; // Optimistically update the parent task's progress bar (subtasks only) var subtaskList = btn.closest('[id^="subtask-list-"]'); if (subtaskList) { var taskId = subtaskList.id.replace('subtask-list-', ''); var track = document.getElementById('task-progress-' + taskId); var fill = track && track.firstElementChild; if (fill) { var all = subtaskList.querySelectorAll('[data-complete-btn], [data-uncomplete-btn]').length; var done = subtaskList.querySelectorAll('[data-uncomplete-btn]').length + (btn.hasAttribute('data-complete-btn') ? 1 : -1); done = Math.max(0, Math.min(all, done)); var pct = all > 0 ? Math.round((done / all) * 100) : 0; btn.dataset.origProgressWidth = fill.style.width; fill.style.width = pct + '%'; } } }); function revert(elt) { if (!elt || !elt.dataset || !elt.dataset.origClass) return; elt.className = elt.dataset.origClass; elt.innerHTML = elt.dataset.origInner || ''; elt.disabled = false; if (elt.dataset.origProgressWidth !== undefined) { var subtaskList = elt.closest('[id^="subtask-list-"]'); if (subtaskList) { var taskId = subtaskList.id.replace('subtask-list-', ''); var track = document.getElementById('task-progress-' + taskId); var fill = track && track.firstElementChild; if (fill) fill.style.width = elt.dataset.origProgressWidth; } delete elt.dataset.origProgressWidth; } delete elt.dataset.origClass; delete elt.dataset.origInner; } document.addEventListener('htmx:responseError', function(e) { if (!e.detail.elt.dataset.origClass) return; revert(e.detail.elt); showClientToast(e.detail.elt.dataset.errorMsg || 'Action failed. Please try again.', 'error'); }); document.addEventListener('htmx:sendError', function(e) { if (!e.detail.elt.dataset.origClass) return; revert(e.detail.elt); showClientToast('Network error. Please check your connection.', 'error'); }); // Escape cancels subtask add and edit forms document.addEventListener('keydown', function(e) { if (e.key !== 'Escape') return; // Add form — just remove it document.querySelectorAll('[id^="subtask-form-"] form').forEach(function(f) { f.remove(); }); // Edit form — click Cancel to trigger the HTMX restore request document.querySelectorAll('form[id^="task-"][hx-patch]').forEach(function(f) { var cancel = f.querySelector('button[hx-get]'); if (cancel) cancel.click(); }); }); // Sort select navigation — fires when data-sort-nav select changes document.addEventListener('change', function(e) { var el = e.target; if (!el || !el.dataset) return; if (el.dataset.sortNav) { window.location.href = el.dataset.sortNav.replace('sort=', 'sort=' + encodeURIComponent(el.value)); } else if (el.dataset.statusNav) { var url = new URL(el.dataset.statusNav.replace('status=', 'status=' + encodeURIComponent(el.value)), location.origin); if (el.value === 'completed') { url.searchParams.set('sort', 'completed'); url.searchParams.set('dir', 'desc'); } else { if (url.searchParams.get('sort') === 'completed') url.searchParams.set('sort', 'due'); url.searchParams.set('dir', 'asc'); } window.location.href = url.pathname + '?' + url.searchParams.toString(); } else if ('proUpsell' in el.dataset) { if (el.value) { el.value = 'proUpsellOriginal' in el.dataset ? el.dataset.proUpsellOriginal : ''; var proModal = document.getElementById('pro-upsell-modal'); var proIcon = document.getElementById('pro-upsell-icon'); var proBody = document.getElementById('pro-upsell-body'); if (proIcon) proIcon.textContent = el.dataset.proUpsellIcon || '📦'; if (proBody) proBody.textContent = el.dataset.proUpsellBody || ''; if (proModal) proModal.showModal(); } } }); // Pro upsell modal document.addEventListener('openProUpsellModal', function(e) { document.querySelectorAll('.task-deleting').forEach(function(el) { el.classList.remove('task-deleting'); }); var detail = (e && e.detail) || {}; var iconEl = document.getElementById('pro-upsell-icon'); var bodyEl = document.getElementById('pro-upsell-body'); if (iconEl) iconEl.textContent = detail.icon || '📦'; if (bodyEl) bodyEl.textContent = detail.body || "The backlog lets you park tasks you're not ready for without cluttering your active list. Upgrade to unlock it."; var m = document.getElementById('pro-upsell-modal'); if (m) m.showModal(); }); var proClose = document.getElementById('pro-upsell-close'); if (proClose) proClose.onclick = function() { var m = document.getElementById('pro-upsell-modal'); if (m) m.close(); }; // Edit modal — open/close via HX-Trigger response headers document.addEventListener('openEditModal', function() { var m = document.getElementById('task-edit-modal'); if (m) m.showModal(); }); document.addEventListener('closeEditModal', function() { var m = document.getElementById('task-edit-modal'); if (m) m.close(); }); // Habit preset radio — toggle custom days picker document.addEventListener('change', function(e) { var radio = e.target; if (!radio || !radio.dataset || !('presetRadio' in radio.dataset)) return; var hidden = document.getElementById('habit-preset-value'); var cd = document.getElementById('habit-custom-days'); if (hidden) hidden.value = radio.value; if (cd) { if (radio.value === 'custom') { cd.classList.remove('hidden'); cd.classList.add('flex'); } else { cd.classList.add('hidden'); cd.classList.remove('flex'); } } }); // Habit modal — open/close via HX-Trigger response headers document.addEventListener('openHabitModal', function() { var m = document.getElementById('habit-modal'); if (m) m.showModal(); }); document.addEventListener('closeHabitModal', function() { var m = document.getElementById('habit-modal'); if (m) m.close(); }); // Update progress bar when a subtask is added document.addEventListener('htmx:afterSwap', function(e) { var target = e.detail.target; if (!target || !target.id) return; var match = target.id.match(/^subtask-list-(.+)$/); if (!match) return; var taskId = match[1]; var all = target.querySelectorAll('[data-complete-btn], [data-uncomplete-btn]').length; if (all === 0) return; // Add border-left styling if this is the first subtask if (!target.classList.contains('border-l-2')) { target.className = 'mt-3 space-y-0.5 border-l-2 border-gray-100 dark:border-gray-700 pl-3'; } // Unhide and update progress bar var track = document.getElementById('task-progress-' + taskId); if (!track) return; track.classList.remove('hidden'); var done = target.querySelectorAll('[data-uncomplete-btn]').length; var pct = Math.round((done / all) * 100); if (track.firstElementChild) track.firstElementChild.style.width = pct + '%'; }); // Auto-remove tasks after 5s when they no longer belong in the current view. // Uses htmx:load (fires on new DOM content) instead of htmx:afterSwap // because outerHTML swap detaches the trigger element, preventing afterSwap // from bubbling to document. document.addEventListener('htmx:load', function(e) { var taskEl = e.detail.elt; if (!taskEl || !taskEl.id) return; var action = taskEl.getAttribute('data-auto-remove'); if (!action) return; // Only handle top-level tasks (not subtasks) if (taskEl.closest('[id^="subtask-list-"]')) return; var isTasksPage = window.location.pathname === '/tasks'; var statusFilter = new URLSearchParams(window.location.search).get('status') || 'active'; // Determine whether this task should be removed from current view var shouldRemove = true; // "all" view: never remove if (isTasksPage && statusFilter === 'all') shouldRemove = false; // Uncomplete on a non-"completed" view: don't remove if (action === 'uncompleted' && !(isTasksPage && statusFilter === 'completed')) shouldRemove = false; // Complete on "completed" view: don't remove (it belongs here) if (action === 'completed' && isTasksPage && statusFilter === 'completed') shouldRemove = false; if (!shouldRemove) { // Cancel any pending removal from a previous toggle if (taskEl._removeTimeout) { clearTimeout(taskEl._removeTimeout); taskEl._removeTimeout = null; } taskEl.removeAttribute('data-auto-remove'); return; } var timeout = setTimeout(function() { // If user re-toggled (attribute removed), cancel removal if (!taskEl.isConnected || !taskEl.hasAttribute('data-auto-remove')) return; taskEl.style.transition = 'opacity 0.4s ease, max-height 0.5s ease, margin-bottom 0.5s ease'; taskEl.style.overflow = 'hidden'; taskEl.style.maxHeight = taskEl.offsetHeight + 'px'; taskEl.style.opacity = '0'; requestAnimationFrame(function() { requestAnimationFrame(function() { taskEl.style.maxHeight = '0'; taskEl.style.marginBottom = '0'; }); }); setTimeout(function() { if (taskEl.isConnected) taskEl.remove(); }, 500); }, 3000); taskEl._removeTimeout = timeout; }); // Delete confirmation — intercept hx-confirm before browser dialog var __pendingDeleteRequest = null; document.addEventListener('htmx:confirm', function(e) { if (!e.detail.question) return; e.preventDefault(); __pendingDeleteRequest = e.detail.issueRequest; var msg = document.getElementById('delete-confirm-message'); if (msg) msg.textContent = e.detail.question; var dlg = document.getElementById('delete-confirm-dialog'); if (dlg) dlg.showModal(); }); var delOk = document.getElementById('delete-confirm-ok'); if (delOk) delOk.onclick = function() { var dlg = document.getElementById('delete-confirm-dialog'); if (dlg) dlg.close(); if (__pendingDeleteRequest) { __pendingDeleteRequest(true); __pendingDeleteRequest = null; } }; var delCancel = document.getElementById('delete-confirm-cancel'); if (delCancel) delCancel.onclick = function() { var dlg = document.getElementById('delete-confirm-dialog'); if (dlg) dlg.close(); __pendingDeleteRequest = null; }; // Rest-day due-date confirmation var __pendingRestDayForm = null; document.addEventListener('submit', function(e) { var form = e.target; if (!form || form.tagName !== 'FORM') return; var restDay = form.dataset && form.dataset.restDay; if (restDay == null || restDay === '') return; if (form === __pendingRestDayForm) { __pendingRestDayForm = null; return; } var dueInput = form.querySelector('[name="dueDate"]'); if (!dueInput || !dueInput.value) return; var p = dueInput.value.split('-'); if (p.length !== 3) return; var d = new Date(+p[0], +p[1] - 1, +p[2]); if (d.getDay() !== +restDay) return; e.preventDefault(); e.stopImmediatePropagation(); __pendingRestDayForm = form; var rdDlg = document.getElementById('rest-day-confirm-dialog'); if (rdDlg) rdDlg.showModal(); }, true); var rdOk = document.getElementById('rest-day-confirm-ok'); if (rdOk) rdOk.onclick = function() { var dlg = document.getElementById('rest-day-confirm-dialog'); if (dlg) dlg.close(); if (__pendingRestDayForm) { __pendingRestDayForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true })); } }; var rdCancel = document.getElementById('rest-day-confirm-cancel'); if (rdCancel) rdCancel.onclick = function() { var dlg = document.getElementById('rest-day-confirm-dialog'); if (dlg) dlg.close(); __pendingRestDayForm = null; }; // Reorder habit pills — completed to end, uncompleted before completed document.addEventListener('htmx:afterSettle', function(e) { var pill = e.detail.elt; if (!pill || !pill.hasAttribute || !pill.hasAttribute('data-habit-pill')) return; var container = pill.closest('.flex.flex-wrap'); if (!container) return; var details = container.querySelector('details'); if (pill.hasAttribute('data-uncomplete-btn')) { // Just completed — move to end (before details overflow if present) if (details) container.insertBefore(pill, details); else container.appendChild(pill); } else { // Just uncompleted — move before the first completed pill var firstCompleted = container.querySelector('[data-uncomplete-btn]'); if (firstCompleted) { container.insertBefore(pill, firstCompleted); } else if (details) { container.insertBefore(pill, details); } else { container.appendChild(pill); } } }); // Sick day modal — open/close document.addEventListener('openSickDayModal', function() { var c = document.getElementById('sick-day-modal-content'); if (c) c.innerHTML = ''; var m = document.getElementById('sick-day-modal'); if (m) m.showModal(); }); // Backfill modal — open/close document.addEventListener('openBackfillModal', function() { var c = document.getElementById('backfill-modal-content'); if (c) c.innerHTML = ''; var m = document.getElementById('backfill-modal'); if (m) m.showModal(); }); // Streak repair modal — shown once per day after login if streaks are broken document.addEventListener('openStreakRepairModal', function() { var today = new Date().toISOString().split('T')[0]; if (localStorage.getItem('streakRepairShownDate') === today) return; localStorage.setItem('streakRepairShownDate', today); var m = document.getElementById('streak-repair-modal'); if (m) m.showModal(); }); // Highlight active bottom tab via injected

Sign in to Achiever