Add status filtering and segmented progress v0.3

app/static/index.html

@@ -42,7 +42,11 @@
             <span>Progress</span>
             <span id="progress-count">0 / 0</span>
           </div>
-          <div class="progress-track"><div id="progress-bar" class="progress-bar"></div></div>
+          <div class="progress-track" role="progressbar" aria-label="Photo processing progress" aria-valuemin="0" aria-valuemax="100">
+            <div id="progress-saved" class="progress-segment saved" title="Saved"></div>
+            <div id="progress-skipped" class="progress-segment skipped" title="Skipped"></div>
+            <div id="progress-failed" class="progress-segment failed" title="Failed"></div>
+          </div>
           <div class="status-legend">
             <span><i class="dot saved"></i>Saved</span>
             <span><i class="dot skipped"></i>Skipped</span>
@@ -53,7 +57,20 @@
 
         <section class="panel-section file-section">
           <div class="section-heading"><span>Photos</span><span id="photo-count">0</span></div>
-          <input id="filter-input" class="input filter" type="search" placeholder="Filter filenames…" disabled>
+          <div class="file-controls">
+            <input id="filter-input" class="input filter filename-filter" type="search" placeholder="Filter filenames…" aria-label="Filter photos by filename" disabled>
+            <select id="status-filter" class="input filter" aria-label="Filter photos by status" disabled>
+              <option value="all">All statuses</option>
+              <option value="pending">Pending</option>
+              <option value="saved">Saved</option>
+              <option value="skipped">Skipped</option>
+              <option value="failed">Failed</option>
+            </select>
+            <select id="sort-select" class="input filter" aria-label="Sort photos" disabled>
+              <option value="filename">Sort: Filename</option>
+              <option value="status">Sort: Status</option>
+            </select>
+          </div>
           <div id="file-list" class="file-list" aria-live="polite">
             <div class="empty-list">Choose a folder containing JPG or JPEG photos.</div>
           </div>