Restore collapsible filter accordions alongside new sort chip

Status and Filters dropdowns are back as expanding chips. Sort chip sits inline to the right of the two accordion headers as a peer element in a flex filter-row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/index.css

@@ -261,8 +261,31 @@ html, body, #root { height: 100%; margin: 0; font-size: 14px; }
 .badge-unusable { background: var(--danger); }
 
 /* ── Filter chips ──────────────────────────────────────────── */
-.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
-.chip-divider { width: 1px; height: 20px; background: var(--card-border); flex-shrink: 0; margin: 0 2px; }
+.filter-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
+.filter-row .filter-section { flex: 1; min-width: 0; margin-bottom: 0; }
+.filter-row .sort-chip { flex-shrink: 0; align-self: center; white-space: nowrap; }
+.filter-section { margin-bottom: 10px; }
+.filter-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--card-bg);
+  border: 1px solid var(--card-border);
+  cursor: pointer;
+  user-select: none;
+  font-size: 12px;
+  color: var(--text-mid);
+  transition: border-color .12s;
+}
+.filter-section-header:hover { border-color: var(--gold); }
+.filter-section-label { font-weight: 600; color: var(--text-dark); white-space: nowrap; }
+.filter-section-summary { flex: 1; color: var(--gold); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.filter-section-summary.muted { color: var(--text-mid); font-weight: 400; }
+.filter-section-chevron { flex-shrink: 0; transition: transform .18s; }
+.filter-section-chevron.open { transform: rotate(180deg); }
+.chip-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; align-items: center; }
 .chip {
   display: inline-flex;
   align-items: center;

frontend/src/pages/Summary.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Plus, RefreshCw, Camera, BedDouble, Layers, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { Plus, RefreshCw, Camera, BedDouble, Layers, ChevronDown, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
 import type { Task, Category, Location, AppConfig, TaskStatus, Priority } from '../types'
 import { STATUS_LABELS, can } from '../types'
 import { fetchTasks, fetchLocations, fetchConfig, fetchOccupancy } from '../api'
@@ -27,6 +27,9 @@ export default function Summary() {
   const [roomsView, setRoomsView] = useState(false)
   const [groupByLocation, setGroupByLocation] = useState(false)
 
+  const [statusOpen, setStatusOpen] = useState(false)
+  const [filtersOpen, setFiltersOpen] = useState(false)
+
   type SortMode = 'default' | 'priority_desc' | 'priority_asc' | 'age_asc' | 'age_desc'
   const [sortMode, setSortMode] = useState<SortMode>('default')
 
@@ -146,7 +149,17 @@ export default function Summary() {
 
       {error && <div className="error-banner">{error}</div>}
 
-      <div className="chip-bar" style={{ marginBottom: 12 }}>
+      <div className="filter-row">
+        <div className="filter-section">
+          <div className="filter-section-header" onClick={() => setStatusOpen(v => !v)}>
+            <span className="filter-section-label">Status</span>
+            <span className={`filter-section-summary${statusFilter === null ? ' muted' : ''}`}>
+              {statusFilter === null ? 'All open' : `${STATUS_LABELS[statusFilter]}${counts[statusFilter] ? ` (${counts[statusFilter]})` : ''}`}
+            </span>
+            <ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${statusOpen ? ' open' : ''}`} />
+          </div>
+          {statusOpen && (
+            <div className="chip-bar">
               <button className={`chip ${statusFilter === null ? 'active' : ''}`} onClick={() => setStatusFilter(null)}>
                 All open
               </button>
@@ -155,7 +168,25 @@ export default function Summary() {
                   {STATUS_LABELS[s]}{counts[s] ? ` (${counts[s]})` : ''}
                 </button>
               ))}
-        <span className="chip-divider" />
+            </div>
+          )}
+        </div>
+
+        <div className="filter-section">
+          <div className="filter-section-header" onClick={() => setFiltersOpen(v => !v)}>
+            <span className="filter-section-label">Filters</span>
+            <span className={`filter-section-summary${!categoryFilter && !mineOnly && !roomsView && !groupByLocation ? ' muted' : ''}`}>
+              {[
+                !roomsView && categoryFilter ? categories.find(c => c.id === categoryFilter)?.name : null,
+                roomsView ? 'Rooms view' : null,
+                mineOnly ? 'Mine only' : null,
+                groupByLocation ? 'Grouped' : null,
+              ].filter(Boolean).join(' · ') || 'All categories'}
+            </span>
+            <ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${filtersOpen ? ' open' : ''}`} />
+          </div>
+          {filtersOpen && (
+            <div className="chip-bar">
               {!roomsView && categories.map(c => (
                 <button key={c.id} className={`chip ${categoryFilter === c.id ? 'active' : ''}`} onClick={() => setCategoryFilter(categoryFilter === c.id ? null : c.id)}>
                   {c.name}{categoryCounts[c.id] ? ` (${categoryCounts[c.id]})` : ''}
@@ -173,14 +204,17 @@ export default function Summary() {
                   <BedDouble size={13} strokeWidth={1.75} />
                   {roomsView && roomsCounts
                     ? `Rooms (${roomsCounts.free} free${roomsCounts.arriving ? ` • ${roomsCounts.arriving} arriving` : ''}${roomsCounts.occupied ? ` • ${roomsCounts.occupied} occupied` : ''})`
-              : 'Rooms'}
+                    : 'Rooms Accessible View'}
                 </button>
               )}
               <button className={`chip ${groupByLocation ? 'active' : ''}`} onClick={() => setGroupByLocation(v => !v)}>
-          <Layers size={13} strokeWidth={1.75} /> Group
+                <Layers size={13} strokeWidth={1.75} /> Group by location
               </button>
-        <span className="chip-divider" />
-        <button className={`chip ${sortMode !== 'default' ? 'active' : ''}`} onClick={cycleSortMode}>
+            </div>
+          )}
+        </div>
+
+        <button className={`chip sort-chip ${sortMode !== 'default' ? 'active' : ''}`} onClick={cycleSortMode}>
           {sortMode === 'default' && <ArrowUpDown size={13} strokeWidth={1.75} />}
           {(sortMode === 'priority_desc' || sortMode === 'age_asc') && <ArrowDown size={13} strokeWidth={1.75} />}
           {(sortMode === 'priority_asc' || sortMode === 'age_desc') && <ArrowUp size={13} strokeWidth={1.75} />}