feat: start work from an empty mobile queue (Closes #691)

frontend/dashboard.css

@@ -77,6 +77,14 @@ main { position: relative; z-index: 1; display: grid; grid-template-columns: 300
 h2 { font-size: 13px; margin: 8px 0; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
 a { color: #60a5fa; text-decoration: none; }
 .muted { color: #94a3b8; }
+.empty-work-start { display:grid; gap:12px; margin:12px 0; padding:16px; border:1px solid #31577f; border-radius:14px; background:#0b1b2f; }
+.empty-work-start[hidden] { display:none; }
+.empty-work-start p { margin:6px 0 0; }
+.empty-work-start-actions { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px; }
+.empty-work-start-actions button { min-width:0; min-height:44px; white-space:normal; }
+@media (max-width:420px) {
+  .empty-work-start-actions { grid-template-columns:1fr; }
+}
 .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
 .kv .label { color: #94a3b8; }
 .kv .value { color: #e5e7eb; }

frontend/dashboard.js

@@ -49,11 +49,7 @@
     attentionInterruption.hidden = !pending;
     return pending;
   }
-  function openMobileWorkFallback() {
-    qs('[data-work-filter="all"]').click();
-    qs('#my-work').scrollIntoView({block:'start'});
-    qs('#my-work').focus();
-  }
+
   function selectMobileQueue(name) {
     if (name === 'attention' && workSession.checkpointed()) timer.beginAttention();
     renderAttentionInterruption();
@@ -71,7 +67,7 @@
     resumeToday: resumeTodaySession,
     startToday: startTodaySession,
     planToday: () => openPlanToday(mobileTaskButtons.work),
-    openFallback: openMobileWorkFallback,
+    findWork: () => qs('#find-work').click(),
   });
   let mobileQueueCounts = {};
   const mobileQueueLauncher = createMobileQueueLauncher({
@@ -122,6 +118,8 @@
     },
   });
   mobileTaskDock.start();
+  qs('#empty-work-find').addEventListener('click', () => qs('#find-work').click());
+  qs('#empty-work-create').addEventListener('click', () => qs('#new-issue').click());
   let liveMode = true;
   let offlineWorkMode = false;
   const WORK_FILTER_KEY = 'stackchain.my-work-filter.v1';
@@ -2433,6 +2431,10 @@
       filterMyWork(activeMyWork, selectedWorkFilter, selectedWorkMilestone);
     const incomplete = activeWorkStreams().some(stream => workPagination[stream]?.has_more);
     const visible = findQueueItems(queueItems, queueFindQuery);
+    const emptyWorkStart = qs('#empty-work-start');
+    const showEmptyStart = selectedWorkFilter === 'all' && !queueFindQuery &&
+      !queueItems.length && !incomplete && hasContextSnapshot;
+    emptyWorkStart.hidden = !showEmptyStart;
     updateQueueFinder(visible.length, queueItems.length, incomplete);
     const selection = notificationSelection.snapshot();
     const selectedIds = new Set(selection.ids);
@@ -2486,9 +2488,9 @@
         return '<article class="' + cardClasses + '">' + selector + '<a class="my-work-card-main pull-trigger" href="' + escAttr(routeHref) + '" data-pull-index="' + index + '">' + contents + '</a>' + readUpdate + markRead + planningActions + '</article>';
       }
       return '<article class="' + cardClasses + '">' + selector + '<a class="my-work-card-main update-trigger" href="' + escAttr(routeHref) + '" data-update-index="' + index + '">' + contents + '</a>' + markRead + planningActions + '</article>';
-    }).join('') : '<div class="muted">' + (incomplete ?
+    }).join('') : (showEmptyStart ? '' : '<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>';
+      '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-select-notification-id]').forEach(input => {
       input.addEventListener('change', () => {

frontend/index.html

@@ -183,6 +183,16 @@
       <div class="small" id="queue-find-status" role="status" aria-live="polite"></div>
       <button id="search-older-work" type="button" hidden>Search older work</button>
     </form>
+    <section class="empty-work-start" id="empty-work-start" aria-labelledby="empty-work-start-heading" hidden>
+      <div>
+        <strong id="empty-work-start-heading">Ready for something new?</strong>
+        <p class="small muted">Find an available issue to own, or create the work that needs doing.</p>
+      </div>
+      <div class="empty-work-start-actions">
+        <button id="empty-work-find" type="button">Find and start work</button>
+        <button id="empty-work-create" type="button">Create an issue</button>
+      </div>
+    </section>
     <div class="my-work-list" id="my-work-list"></div>
     <div class="small" id="work-page-status" aria-live="polite"></div>
     <button class="load-more-work" id="load-more-work" type="button" hidden>Load older work</button>

frontend/mobile-task-dock.js

@@ -69,6 +69,7 @@
       resume: ['Resume', 'Resume Today'],
       start: ['Start', 'Start Today'],
       plan: ['Plan', 'Plan Today'],
+      find: ['Find', 'Find work'],
       work: ['Work', 'Work'],
     };
     const workMode = labels[mode] ? mode : 'work';

frontend/mobile-work-entry.js

@@ -7,7 +7,7 @@
     if (options.getTodayCount() > 0 && options.isTodayResumable()) return 'resume';
     if (options.getTodayCount() > 0) return 'start';
     if (options.getEligibleCount() > 0) return 'plan';
-    return 'work';
+    return 'find';
   }
 
   function open() {
@@ -16,7 +16,7 @@
     else if (current === 'resume') options.resumeToday();
     else if (current === 'start') options.startToday();
     else if (current === 'plan') options.planToday();
-    else options.openFallback();
+    else options.findWork();
     return current;
   }