Replace planner queue + inline forms with searchable add-task modal

- Single "Add task" button in the planner header opens a modal
- Day tabs (Mon–Fri with dates) let you switch the target day without closing
- Live search filters all course items across all courses instantly
- Items pre-fetched in background when planner loads — no per-click delay
- Clicking an item schedules it immediately (no separate Save step)
- Column "+ Add" buttons still work and open the modal pre-selected to that day
- Offline task field at the bottom for non-course entries
- Backdrop click or ✕ closes modal and re-renders the planner

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-08-04 14:25:36 -04:00
1 parent 6b7b77829e
commit 7580257ba0
3 files changed
+151 -72

No files matched your search

+18 -1
View File
@@ -336,7 +336,7 @@
<button id="planner-next" class="secondary">Next →</button>
<button id="planner-copy" class="secondary">Copy last week</button>
<button id="planner-print">🖨 Print</button>
<button id="planner-save-all" hidden>💾 Save 0 items</button>
<button id="planner-add-btn">+ Add task</button>
</div>
<details id="auto-schedule-details" class="admin-card" style="margin-bottom:1rem">
@@ -546,6 +546,23 @@
<div id="toast" role="status" aria-live="polite" hidden></div>
<!-- Planner add-task modal -->
<div id="planner-add-modal" class="modal" hidden>
<div class="modal-box planner-add-box">
<div class="planner-modal-header">
<h3>Add to planner</h3>
<button id="planner-modal-close" class="secondary small">✕</button>
</div>
<div id="planner-day-tabs" class="day-tabs"></div>
<input id="planner-item-search" type="search" class="planner-item-search" placeholder="Search course items…" autocomplete="off">
<div id="planner-item-list" class="item-list"></div>
<div class="planner-offline-row">
<input id="planner-offline-input" placeholder="Or type an offline task…">
<button id="planner-offline-add">Add</button>
</div>
</div>
</div>
<script src="admin.js"></script>
</body>
</html>