feat: collapse mobile card planning controls (#393)

frontend/card-planning.js

@@ -0,0 +1,39 @@
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) module.exports = factory;
+  else root.createCardPlanning = factory;
+})(typeof self !== 'undefined' ? self : this, function createCardPlanning(root) {
+  function sync(disclosure) {
+    disclosure.querySelector('summary')?.setAttribute(
+      'aria-expanded', String(disclosure.open)
+    );
+  }
+
+  function wire() {
+    const disclosures = Array.from(root.querySelectorAll('[data-card-planning]'));
+    disclosures.forEach(disclosure => {
+      if (disclosure.dataset.cardPlanningBound === 'true') return;
+      disclosure.dataset.cardPlanningBound = 'true';
+      sync(disclosure);
+      disclosure.addEventListener('toggle', () => {
+        if (disclosure.open) {
+          disclosures.forEach(other => {
+            if (other === disclosure || !other.open) return;
+            other.open = false;
+            sync(other);
+          });
+        }
+        sync(disclosure);
+      });
+      disclosure.addEventListener('keydown', event => {
+        if (event.key !== 'Escape' || !disclosure.open) return;
+        disclosure.open = false;
+        sync(disclosure);
+        disclosure.querySelector('summary')?.focus();
+        event.preventDefault();
+        event.stopPropagation();
+      });
+    });
+  }
+
+  return { wire };
+});

frontend/dashboard.css

@@ -121,6 +121,10 @@ textarea { resize: vertical; min-height: 120px; }
 .later-actions, .today-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
 .later-actions button { min-height:44px; width:100%; }
 .today-actions button { min-height:44px; width:100%; }
+.card-planning { min-width:0; }
+.card-planning > summary { display:none; }
+.card-planning:not([open]) > .card-planning-actions { display:grid; }
+.card-planning-actions { display:grid; gap:8px; min-width:0; }
 .detail-defer { grid-column:1/-1; max-width:100%; }
 .detail-defer summary, .detail-defer button { min-height:44px; display:flex; align-items:center; justify-content:center; }
 .detail-defer summary { cursor:pointer; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
@@ -351,6 +355,11 @@ textarea { resize: vertical; min-height: 120px; }
   .work-settings:not([open]) > .work-settings-panel { display:none; }
   .work-settings-panel { display:grid; gap:10px; margin-top:8px; }
   .my-work-list { grid-template-columns:1fr; }
+  .my-work-card { min-width:0; overflow-x:hidden; }
+  .card-planning > summary { min-height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #60a5fa; border-radius:10px; font-weight:700; list-style:none; }
+  .card-planning > summary::-webkit-details-marker { display:none; }
+  .card-planning:not([open]) > .card-planning-actions { display:none; }
+  .card-planning[open] > .card-planning-actions { display:grid; margin-top:8px; }
   .plan-today-panel { width:100%; border-left:0; padding:14px; }
   .plan-today-item { grid-template-columns:1fr; }
   .plan-today-item-actions { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }

frontend/dashboard.js

@@ -1,6 +1,7 @@
 (function(){
   const qs = (s, el=document) => el.querySelector(s);
   const fmt = (d) => new Date(d).toLocaleString();
+  const cardPlanning = createCardPlanning(document);
   const mobileComposerViewport = createMobileComposerViewport({
     viewport: window.visualViewport,
     mediaQuery: window.matchMedia('(max-width: 600px)'),
@@ -1215,7 +1216,7 @@
       const todayActions = selectedWorkFilter === 'today' ?
         '<div class="today-actions" aria-label="Reorder Today"><button type="button" data-today-move="up" data-work-index="' + index + '"' + (todayPosition.can_up ? '' : ' disabled') + '>Move up</button><button type="button" data-today-move="down" data-work-index="' + index + '"' + (todayPosition.can_down ? '' : ' disabled') + '>Move down</button><button type="button" data-today-remove data-work-index="' + index + '">Remove from Today</button></div>' :
         '<div class="today-actions"><button type="button" data-today-add data-work-index="' + index + '"' + (alreadyToday ? ' disabled' : planningDisabled) + '>' + (alreadyToday ? 'Added to Today' : 'Add to Today') + '</button></div>';
-      const planningActions = todayActions + laterActions;
+      const planningActions = '<details class="card-planning" data-card-planning><summary aria-expanded="false">Plan or defer</summary><div class="card-planning-actions">' + todayActions + laterActions + '</div></details>';
       if (item.is_review) {
         return '<article class="my-work-card"><a class="my-work-card-main review-trigger" href="' + escAttr(routeHref) + '" data-review-index="' + index + '">' + contents + '</a>' + readUpdate + markRead + planningActions + '</article>';
       }
@@ -1229,6 +1230,7 @@
     }).join('') : '<div class="muted">' + (incomplete ?
       'More work is available. Load the next page.' :
       'No ' + (selectedWorkFilter === 'attention' ? 'items need attention' : (selectedWorkFilter === 'review' ? 'reviews' : (selectedWorkFilter === 'update' ? 'unread updates' : (selectedWorkFilter === 'later' ? 'deferred work' : (selectedWorkFilter === 'all' ? 'work' : selectedWorkFilter + ' items'))))) + '.') + '</div>';
+    cardPlanning.wire();
     document.querySelectorAll('[data-review-index]').forEach(button => {
       button.addEventListener('click', event => { event.preventDefault(); openRoutedWork(lastMyWork[Number(button.dataset.reviewIndex)], button); });
     });

frontend/index.html

@@ -582,6 +582,7 @@
 <script src="static/offline-work.js"></script>
 <script src="static/offline-today.js"></script>
 <script src="static/my-work.js"></script>
+<script src="static/card-planning.js"></script>
 <script src="static/today-work.js"></script>
 <script src="static/plan-today.js"></script>
 <script src="static/today-sync.js"></script>

frontend/service-worker.js

@@ -24,6 +24,7 @@ const SHELL = [
   BASE + 'static/offline-work.js',
   BASE + 'static/offline-today.js',
   BASE + 'static/my-work.js',
+  BASE + 'static/card-planning.js',
   BASE + 'static/today-work.js',
   BASE + 'static/plan-today.js',
   BASE + 'static/today-sync.js',