hopefully fixed todo list issues

html/popup.html

@@ -319,6 +319,10 @@
                             <input type="checkbox" id="todo_ignore_card_colors" name="todo_ignore_card_colors">
                             <label for="todo_ignore_card_colors" class="sub-text">Ignore card colors</label>
                         </div>
+                        <div class="sub-option">
+                            <input type="checkbox" id="todo_hide_read" name="todo_hide_read">
+                            <label for="todo_hide_read" class="sub-text">Hide read announcements</label>
+                        </div>
                         <div class="sub-option">
                             <input type="checkbox" id="todo_remove_icons" name="todo_remove_icons">
                             <label for="todo_remove_icons" class="sub-text">Remove icons</label>

js/content.js

@@ -928,6 +928,7 @@ function applyOptionsChanges(changes) {
 			case "todo_timeframe":
 			// case "todo_overdues":
 			case "todo_hide_feedback":
+			case "todo_hide_read":
 			case "todo_full_height":
 			case "todo_ignore_card_colors":
 			case "todo_remove_icons":
@@ -3285,7 +3286,18 @@ async function createTodoSections(location) {
                 return cid === String(betterTodoProgressFilter);
             });
 
-        announcements = displayData.filter(item => item.plannable_type == "announcement");
+        // Announcements: dismissed (marked-complete) ones are always
+        // hidden, and already-read ones are hidden unless the user turned
+        // "Hide read announcements" off. This mirrors how native Canvas
+        // clears announcements from the to-do once seen; without it the list
+        // accumulated every announcement in the lookback window (reporters
+        // saw 200+ "Seen" entries from a single year).
+        announcements = displayData.filter(item => {
+            if (item.plannable_type != "announcement") return false;
+            if (item.planner_override?.marked_complete === true) return false;
+            if (options.todo_hide_read !== false && item.plannable.read_state == "read") return false;
+            return true;
+        });
         // Pinned items (locally forced incomplete, e.g. a submitted assignment
         // the user sent back to Tasks) always count as due; everything else is
         // due only when neither submitted nor marked complete.
@@ -3824,15 +3836,30 @@ function populateAnnouncements() {
 					</svg>`}
 				</div>
 			</div>
-			<div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;">
+			<div style="width:calc(100% - 40px);height:80%;display:flex;flex-direction:column;gap:5px;padding-left:2px;box-sizing:border-box;overflow:hidden;position:relative;">
 				<div style="display:flex;flex-direction:column;gap:3px;">
 					<span style="color:${classNameColor};font-size:12px;margin-top:-2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;box-sizing:border-box;padding-right:22px;">${item.context_name}</span>
 					<a href="${domain + item.html_url}" style="color:inherit;text-decoration:none;font-weight:bold;text-overflow:ellipsis;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-5px;">${item.plannable.title}</a>
 					<span style="color:var(--bctext-0);font-size:12px;margin-top:-5px;">${convertToDueDate(item.plannable_date)}</span>
 				</div>
+				<svg class="better-todo-announcement-checkmark" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:15px;height:15px;position:absolute;top:0px;right:5px;opacity:0.3;transition:all .3s ease;cursor:pointer;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.3'" title="Mark as seen">
+					<g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+					<g id="SVGRepo_iconCarrier"> <g id="Interface / Checkbox_Check">
+						<path id="Vector" d="M8 12L11 15L16 9M4 16.8002V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C19.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2842 4.21799 18.9079C4 18.4801 4 17.9203 4 16.8002Z" stroke="var(--bctext-0)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+					</g></g>
+				</svg>
 			</div>
 		</div>
 		`;
+		// "Mark as seen": sets the same planner override the task checkmark
+		// uses, which also hides the announcement from the list (see the
+		// announcements filter in createTodoSections). Two-way, so with "Hide
+		// read announcements" off a dismissed one can be un-seen again.
+		announcement.querySelector(".better-todo-announcement-checkmark").addEventListener("click", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			markAs(item, announcement.firstElementChild, !(item.planner_override?.marked_complete === true));
+		});
 		attachTodoHoverPreview(announcement, item);
 	});
 }

js/popup.js

@@ -2,6 +2,7 @@ const syncedSwitches = ['remind', 'tab_icons', 'dark_mode', 'remlogo', 'full_wid
 const syncedSubOptions = [
 	"grade_analytics_zones",
 	"todo_hide_feedback",
+	"todo_hide_read",
 	"todo_full_height",
     "todo_confetti",
     "todo_progress_rings",
@@ -58,7 +59,7 @@ const exportCardColorToggles = ["gradient_cards", "disable_color_overlay"];
 const exportCardStyles = ["customCardStyles", "imageSize", "cardRoundness", "imageRoundness", "cardSpacing", "cardWidth", "cardHeight", "cardPadding"];
 const exportLayout = ["full_width", "center_cards", "condensed_cards", "equal_height_cards", "remlogo", "hide_new_canvas", "tab_icons"];
 const exportSidebar = ["better_sidebar", "sidebar_scale"];
-const exportTodo = ["better_todo", "todo_hide_feedback", "todo_full_height", "todo_confetti", "todo_progress_rings", "todo_timeframe", "todo_hr24", "todo_separate_scrollbar", "todo_alternate_colors", "todo_ignore_card_colors", "todo_remove_icons", "hover_preview"];
+const exportTodo = ["better_todo", "todo_hide_feedback", "todo_hide_read", "todo_full_height", "todo_confetti", "todo_progress_rings", "todo_timeframe", "todo_hr24", "todo_separate_scrollbar", "todo_alternate_colors", "todo_ignore_card_colors", "todo_remove_icons", "hover_preview"];
 const exportGpa = ["gpa_calc", "gpa_calc_prepend", "gpa_calc_cumulative", "gpa_calc_weighted"];
 const exportBackground = ["customBackgroundLink", "customBackgroundScale", "customBackgroundDaily", "customBackgroundNasaDaily", "fitImageToScreen", "card_transparency", "bg_opacity", "sidebar_opacity", "bg_blur", "sidebar_blur", "card_opacity", "card_blur"];
 // Master "On/off toggles" = every visual toggle (no GPA, no dark-mode schedule,
@@ -120,6 +121,7 @@ const defaultOptions = {
 		"todo_alternate_colors": false,
 		"todo_ignore_card_colors": false,
 		"todo_remove_icons": false,
+        "todo_hide_read": true,
         "condensed_cards": false,
         "center_cards": false,
         "custom_cards": {},
@@ -945,6 +947,7 @@ function setup() {
 			"gpa_calc_cumulative",
 			// /*'card_method_date',*/ "show_updates",
             "todo_hide_feedback",
+            "todo_hide_read",
             "todo_confetti",
 			"todo_full_height",
 			"device_dark",
@@ -1853,6 +1856,7 @@ function saveCurrentTheme() {
                 "custom_font": current["custom_font"],
                 "better_todo": current["better_todo"],
                 "todo_hide_feedback": current["todo_hide_feedback"],
+                "todo_hide_read": current["todo_hide_read"] !== false,
                 "todo_full_height": current["todo_full_height"],
                 "todo_confetti": current["todo_confetti"],
                 "todo_progress_rings": current["todo_progress_rings"],