Skip to content

Add option to hide completed tasks #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AnSq wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add option to hide completed tasks #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd65556
added option to hide completed tasks
AnSq Jun 22, 2026
57ab7a1
Merge branch 'main' into autohide
AnSq Jun 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "task-checklist",
"version": "5.1.1",
"version": "5.2",
"description": "A Warframe Task Checklist to track daily, weekly, and other tasks. Built with HTML, CSS, and vanilla JavaScript, processed with Vite.",
"type": "module",
"scripts": {
Expand Down
6 changes: 3 additions & 3 deletions sources/css/critical.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ h1 {
font-size: 1.75rem;
}
}
h2 {
#checklist-container h2 {
color: var(--text-header);
cursor: pointer;
display: flex;
Expand All @@ -210,10 +210,10 @@ h2 {
margin-bottom: 0.25rem;
border-bottom: 1px solid var(--border-color);
}
h2 > span:first-of-type {
#checklist-container h2 > span:first-of-type {
flex-grow: 1;
}
h2 .reset-time-local {
#checklist-container h2 .reset-time-local {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-secondary);
Expand Down
73 changes: 66 additions & 7 deletions sources/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
/* display: none; by default, JS will make one visible */
}

:where(label) {
cursor: pointer;
}

/* --- Content Box Element Styling (Non-Critical Parts) --- */
h2:hover {
background-color: var(--section-header-hover-bg);
Expand Down Expand Up @@ -219,12 +223,12 @@ input[type="checkbox"]:indeterminate::after {
content: "\1F512\FE0E"; /* LOCK + VARIATION SELECTOR-15 (text presentation) */
color: var(--checkbox-lock-color);
}
li.task-item {
.task-item {
display: flex;
align-items: start;
margin-bottom: 0.5rem;
}
li.parent-task-container {
.parent-task-container {
display: flex;
flex-direction: column;
align-items: stretch;
Expand Down Expand Up @@ -296,17 +300,22 @@ li.parent-task-container {
opacity: 1;
color: var(--menu-close-btn-hover-color);
}
#options-menu .menu-btn {
#options-menu :is(.menu-btn, .menu-item) {
font-weight: 600;
display: block;
width: 100%;
text-align: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0.75rem;
}
#options-menu .menu-btn:last-child {
#options-menu :is(.menu-btn, .menu-item):last-child {
margin-bottom: 0;
}
#options-menu .checkbox-option {
display: flex;
align-items: start;
}

/* Dialogs */
dialog {
Expand All @@ -318,6 +327,12 @@ dialog::backdrop {
backdrop-filter: var(--backdrop-filter);
}

dialog hr {
border: none;
border-top: 1px solid var(--menu-panel-border);
margin: 1rem 0;
}

@media (prefers-reduced-motion: no-preference) {
dialog {
--dialog-anim-duration: 0.15s;
Expand Down Expand Up @@ -377,8 +392,9 @@ body:not(.light-mode) img.icon-filter {
margin: 0;
}

/* Collapsible Extra Task Info */
.task-info-expander {
/* Collapsible Stuff */
.task-info-expander,
.task-autohide-expander {
display: grid;
grid-template-rows: 1fr;
overflow: hidden;
Expand All @@ -389,7 +405,8 @@ body:not(.light-mode) img.icon-filter {
.task-item .checked .task-info-expander {
grid-template-rows: 0fr;
}
.task-info-expander > div {
.task-info-expander > div,
.task-autohide-expander > div {
min-height: 0;
}

Expand Down Expand Up @@ -523,3 +540,45 @@ body:not(.light-mode) img.icon-filter {
text-decoration: underline dotted;
cursor: pointer;
}

/* Hide completed tasks */
body.hide-completed-tasks .task-autohide-expander:has(> .task-item > .checked),
body.hide-completed-tasks .task-autohide-expander:has(> .parent-task-container > .parent-task-header > .checked) {
grid-template-rows: 0fr;
@media (prefers-reduced-motion: no-preference) {
transition: grid-template-rows 200ms 5s;
}
@media (prefers-reduced-motion: reduce) {
transition: grid-template-rows 0s 5s;
}

&::after {
background-color: color(from var(--checkbox-checked-bg) srgb r g b / 0.25);
width: 0;
}
}
body.hide-completed-tasks .task-autohide-expander > .task-item:has(> .checked) {
margin: 0;
@media (prefers-reduced-motion: no-preference) {
transition: margin 200ms 5s;
}
@media (prefers-reduced-motion: reduce) {
transition: margin 0s 5s;
}
}
/* countdown bar */
.task-autohide-expander {
position: relative;
}
.task-autohide-expander::after {
position: absolute;
top: 0.125rem;
left: 1.75rem;
width: 100%;
height: 0.25rem;
border-radius: 0.125rem;
background-color: transparent;
content: "";
z-index: -1;
transition: width 5s linear;
}
5 changes: 5 additions & 0 deletions sources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,11 @@ <h2 class="section-toggle" aria-expanded="true" aria-controls="other-tasks-conte
<h2 class="menu-title">Options</h2>
<button class="menu-close-button" aria-label="Close menu">&times;</button>
</header>
<div class="menu-item checkbox-option">
<input id="hide-completed" type="checkbox">
<label for="hide-completed">Hide completed tasks</label>
</div>
<hr>
<button id="reset-daily-button" class="menu-btn">Reset Daily Checks</button>
<button id="reset-weekly-button" class="menu-btn">Reset Weekly Checks</button>
<button id="reset-button" class="menu-btn">Reset All Checks</button>
Expand Down
53 changes: 36 additions & 17 deletions sources/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ const dailyBackgroundImageIds = [
'bg-image-4',
// Add more IDs if you add more background image divs in HTML
];
const APP_VERSION = "5.1.1";
const APP_VERSION = "5.2";
const GIT_COMMIT_HASH_LONG = import.meta.env.VITE_GIT_COMMIT_HASH;
const GIT_COMMIT_HASH = GIT_COMMIT_HASH_LONG.slice(0,7);
const WARFRAME_VERSION = "43.0.2";
const WARFRAME_VERSION = "43.0.3";
const THEME_STORAGE_KEY = 'warframeChecklistTheme';

// only update DATA_STORAGE_KEY when the data storage format changes
Expand Down Expand Up @@ -66,7 +66,8 @@ _prepTasks();
let bodyElement, themeToggleButton, hamburgerButton, optionsMenu, resetDailyButton, resetWeeklyButton, resetButton,
unhideTasksButton, lastSavedTimestampElement, saveStatusElement, sectionToggles, dailyResetTimeElement,
weeklyResetTimeElement, errorDisplayElement, errorMessageElement, errorCloseButton, errorCopyButton,
appVersionElement, gitHashElement, wfVersionElement, scheduleDialog, moreInfoDialog, backgroundDivs = [];
appVersionElement, gitHashElement, wfVersionElement, scheduleDialog, moreInfoDialog, backgroundDivs,
hideCompletedToggle = [];


// --- State Variables ---
Expand All @@ -86,7 +87,8 @@ let checklistData = {
manuallyHiddenSections: {},
lastTaskResetTimes: {},
notificationPreferences: {},
notificationsSent: {}
notificationsSent: {},
hideCompletedTasks: false
};

let currentTheme = 'dark';
Expand Down Expand Up @@ -118,6 +120,7 @@ function initializeDOMElements() {
wfVersionElement = document.querySelector('.warframe-version-text');
scheduleDialog = document.getElementById("cycle-schedule");
moreInfoDialog = document.getElementById("more-info");
hideCompletedToggle = document.getElementById("hide-completed");

backgroundDivs = [];
dailyBackgroundImageIds.forEach((id) => {
Expand Down Expand Up @@ -426,10 +429,13 @@ function showNotification(title, body) {
function createChecklistItem(task, isChecked, isSubtask = false) {
const isAvailable = calcTaskTimes(task, new Date()).isAvailable;

const listItem = document.createElement('li');
listItem.classList.add('task-item');
const listItem = document.createElement("li");
listItem.classList.add("task-autohide-expander");

const taskItem = document.createElement("div");
taskItem.classList.add("task-item");
if (checklistData.hiddenTasks[task.id]) {
listItem.classList.add('hidden-task');
taskItem.classList.add("hidden-task");
}

// Checkbox
Expand Down Expand Up @@ -497,14 +503,14 @@ function createChecklistItem(task, isChecked, isSubtask = false) {
hideButton.addEventListener('click', (e) => {
e.stopPropagation();
checklistData.hiddenTasks[task.id] = true;
listItem.classList.add('hidden-task');
updateSectionControls(listItem.closest('section').id);
taskItem.classList.add("hidden-task");
updateSectionControls(taskItem.closest("section").id);
saveData(false);
});
controlsContainer.appendChild(hideButton);

if (task.subtasks) {
listItem.classList.add('parent-task-container');
taskItem.classList.add("parent-task-container");

const parentHeaderDiv = document.createElement('div');
parentHeaderDiv.classList.add('parent-task-header');
Expand Down Expand Up @@ -533,7 +539,7 @@ function createChecklistItem(task, isChecked, isSubtask = false) {

parentHeaderDiv.appendChild(controlsContainer);
parentHeaderDiv.appendChild(collapseIcon);
listItem.appendChild(parentHeaderDiv);
taskItem.appendChild(parentHeaderDiv);

// Subtasks
const subtaskCollapsible = document.createElement("div");
Expand All @@ -550,7 +556,7 @@ function createChecklistItem(task, isChecked, isSubtask = false) {
});
}
subtaskCollapsible.appendChild(subtaskList)
listItem.appendChild(subtaskCollapsible);
taskItem.appendChild(subtaskCollapsible);

// On Click -> Collapse/Expand
parentHeaderDiv.addEventListener('click', (e) => {
Expand Down Expand Up @@ -613,10 +619,10 @@ function createChecklistItem(task, isChecked, isSubtask = false) {
// Info Line & Cycle Schedule
makeInfoLine(task, label);

listItem.appendChild(checkbox);
if (task.icon) { listItem.appendChild(icon); }
listItem.appendChild(label);
listItem.appendChild(controlsContainer);
taskItem.appendChild(checkbox);
if (task.icon) { taskItem.appendChild(icon); }
taskItem.appendChild(label);
taskItem.appendChild(controlsContainer);

// Checkbox Changed
checkbox.addEventListener("change", (event) => {
Expand Down Expand Up @@ -653,6 +659,7 @@ function createChecklistItem(task, isChecked, isSubtask = false) {
saveData();
});
}
listItem.appendChild(taskItem);
return listItem;
}

Expand Down Expand Up @@ -1079,11 +1086,12 @@ function loadData() {
checklistData.lastTaskResetTimes = parsedData.lastTaskResetTimes || {};
checklistData.notificationPreferences = parsedData.notificationPreferences || {};
checklistData.notificationsSent = parsedData.notificationsSent || {};
checklistData.hideCompletedTasks = parsedData.hideCompletedTasks || false;
} else { console.warn("Invalid data format found in localStorage. Starting fresh."); }
} catch (e) {
console.error("Error parsing saved data:", e);
displayError("Failed to load saved progress. Data might be corrupted.");
checklistData = { progress: {}, lastSaved: null, lastDailyReset: null, lastWeeklyReset: null, hiddenTasks: {}, manuallyHiddenSections: {}, lastTaskResetTimes: {}, notificationPreferences: {}, notificationsSent: {} };
checklistData = { progress: {}, lastSaved: null, lastDailyReset: null, lastWeeklyReset: null, hiddenTasks: {}, manuallyHiddenSections: {}, lastTaskResetTimes: {}, notificationPreferences: {}, notificationsSent: {}, hideCompletedTasks: false };
}
}
}
Expand Down Expand Up @@ -1112,6 +1120,17 @@ export function loadAndInitializeApp() {
if (wfVersionElement) { wfVersionElement.textContent = `Warframe Version ${WARFRAME_VERSION}`; }
else { console.error("Warframe version element not found!"); }

if (hideCompletedToggle) {
hideCompletedToggle.addEventListener("change", (event) => {
bodyElement.classList.toggle("hide-completed-tasks", event.target.checked);
checklistData.hideCompletedTasks = event.target.checked;
saveData();
});
hideCompletedToggle.checked = checklistData.hideCompletedTasks;
bodyElement.classList.toggle("hide-completed-tasks", checklistData.hideCompletedTasks);
}
else { console.error("Hide Completed Toggle not found!"); }

if (resetDailyButton) { resetDailyButton.addEventListener('click', () => handleResetConfirmation(resetDailyButton, 'daily', 'Reset Daily Checks', resetDailyAction)); }
else { console.error("Reset Daily button element not found!"); }

Expand Down