feat: guide mobile Find Work workflow (Closes #979)

frontend/index.html

@@ -843,42 +843,60 @@
       <div><div class="small">Open · unassigned</div><h3 id="find-work-heading">Find work</h3></div>
       <div class="find-work-header-actions"><button id="select-find-work" type="button">Select work</button><button id="close-find-work" type="button">Close</button></div>
     </div>
-    <p class="small">Claim an available issue and continue it in My Work.</p>
-    <form class="find-work-search" id="find-work-search-form" role="search">
-      <label for="find-work-search">Search repository, #number, or title</label>
-      <div><input id="find-work-search" type="search" maxlength="100" autocomplete="off" />
-      <button id="clear-find-work-search" type="button" hidden>Clear</button></div>
-      <span id="find-work-match-status" class="small" aria-live="polite"></span>
-    </form>
-    <details class="find-work-filters" id="find-work-filters">
-      <summary>Filter work <span id="find-work-filter-count" class="small"></span></summary>
-      <div class="find-work-filter-panel" aria-label="Filter available work">
-        <fieldset><legend>Repositories</legend><div id="find-work-repository-filters" class="find-work-filter-options"></div></fieldset>
-        <fieldset><legend>Labels</legend><div id="find-work-label-filters" class="find-work-filter-options"></div></fieldset>
-        <button id="clear-find-work-filters" type="button">Clear filters</button>
-      </div>
-    </details>
-    <button class="fill-find-work-today" id="fill-find-work-today" type="button"
-      aria-describedby="find-work-selection-status">Fill remaining Today slots</button>
-    <div id="find-work-status" class="small" aria-live="assertive">Open Find Work to load available issues.</div>
-    <button class="find-work-batch-recovery" id="resume-find-work-batch" type="button"
-      aria-describedby="find-work-status" hidden>Resume assigning &amp; queueing</button>
-    <div class="find-work-list" id="find-work-list"></div>
-    <button class="find-work-more" id="load-more-available" type="button" hidden>Load more available issues</button>
-    <section class="find-work-estimate-review" id="find-work-estimate-review" aria-labelledby="find-work-estimate-heading" hidden>
-      <div><strong id="find-work-estimate-heading">Fit this work into Today</strong>
-        <span class="small" id="find-work-estimate-summary" aria-live="polite"></span></div>
-      <div id="find-work-estimate-list"></div>
-      <div class="find-work-estimate-actions">
-        <button id="cancel-find-work-estimates" type="button">Back</button>
-        <button id="confirm-find-work-estimates" type="button">Confirm &amp; assign</button>
+    <p class="small">Choose available issues, review the batch, then fit it into Today.</p>
+    <nav class="mobile-find-work-nav" aria-label="Find Work steps">
+      <button type="button" data-find-work-stage="discover">Discover</button>
+      <button type="button" data-find-work-stage="review" disabled>Review</button>
+      <button type="button" data-find-work-stage="fit" disabled>Fit &amp; assign</button>
+    </nav>
+    <section class="find-work-stage" id="find-work-discover-stage" tabindex="-1" aria-labelledby="find-work-heading">
+      <form class="find-work-search" id="find-work-search-form" role="search">
+        <label for="find-work-search">Search repository, #number, or title</label>
+        <div><input id="find-work-search" type="search" maxlength="100" autocomplete="off" />
+        <button id="clear-find-work-search" type="button" hidden>Clear</button></div>
+        <span id="find-work-match-status" class="small" aria-live="polite"></span>
+      </form>
+      <details class="find-work-filters" id="find-work-filters">
+        <summary>Filter work <span id="find-work-filter-count" class="small"></span></summary>
+        <div class="find-work-filter-panel" aria-label="Filter available work">
+          <fieldset><legend>Repositories</legend><div id="find-work-repository-filters" class="find-work-filter-options"></div></fieldset>
+          <fieldset><legend>Labels</legend><div id="find-work-label-filters" class="find-work-filter-options"></div></fieldset>
+          <button id="clear-find-work-filters" type="button">Clear filters</button>
+        </div>
+      </details>
+      <button class="fill-find-work-today" id="fill-find-work-today" type="button"
+        aria-describedby="find-work-selection-status">Fill remaining Today slots</button>
+      <div id="find-work-status" class="small" aria-live="assertive">Open Find Work to load available issues.</div>
+      <button class="find-work-batch-recovery" id="resume-find-work-batch" type="button"
+        aria-describedby="find-work-status" hidden>Resume assigning &amp; queueing</button>
+      <div class="find-work-list" id="find-work-list"></div>
+      <button class="find-work-more" id="load-more-available" type="button" hidden>Load more available issues</button>
+      <div class="find-work-batch-actions" id="batch-find-work-actions" hidden>
+        <span id="find-work-selection-status" class="small" aria-live="polite">No work selected.</span>
+        <button id="cancel-find-work-selection" type="button">Cancel</button>
+        <button id="claim-selected-work" type="button" disabled>Review selected</button>
+      </div>
+    </section>
+    <section class="find-work-stage find-work-review" id="find-work-review-stage" tabindex="-1" aria-labelledby="find-work-review-heading" hidden>
+      <div><strong id="find-work-review-heading">Review selected work</strong>
+        <span class="small" id="find-work-review-summary" aria-live="polite"></span></div>
+      <div class="find-work-review-list" id="find-work-review-list"></div>
+      <div class="find-work-stage-actions">
+        <button id="back-find-work-discover" type="button">Back to discover</button>
+        <button id="continue-find-work-fit" type="button">Continue</button>
+      </div>
+    </section>
+    <section class="find-work-stage" id="find-work-fit-stage" tabindex="-1" aria-labelledby="find-work-estimate-heading" hidden>
+      <div class="find-work-estimate-review" id="find-work-estimate-review">
+        <div><strong id="find-work-estimate-heading">Fit this work into Today</strong>
+          <span class="small" id="find-work-estimate-summary" aria-live="polite"></span></div>
+        <div id="find-work-estimate-list"></div>
+        <div class="find-work-estimate-actions">
+          <button id="cancel-find-work-estimates" type="button">Back to review</button>
+          <button id="confirm-find-work-estimates" type="button">Confirm &amp; assign</button>
+        </div>
       </div>
     </section>
-    <div class="find-work-batch-actions" id="batch-find-work-actions" hidden>
-      <span id="find-work-selection-status" class="small" aria-live="polite">No work selected.</span>
-      <button id="cancel-find-work-selection" type="button">Cancel</button>
-      <button id="claim-selected-work" type="button" disabled>Assign &amp; queue Today</button>
-    </div>
   </section>
 </div>
 
@@ -1596,6 +1614,7 @@
 <script src="static/mobile-review-detail-nav.js"></script>
 <script src="static/mobile-search-preview-nav.js"></script>
 <script src="static/mobile-plan-today-nav.js"></script>
+<script src="static/mobile-find-work-nav.js"></script>
 <script src="static/dashboard.js"></script>
 </body>
 </html>