Collapse status and filter chip bars on mobile

Both chip bars now start collapsed with a summary header showing
the active selection (e.g. "In Progress" / "Rooms view · Mine only").
Tap the header to expand and change filters.

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

frontend/src/index.css

@@ -261,7 +261,28 @@ 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; margin-bottom: 14px; align-items: center; }
+.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 } from 'lucide-react'
+import { Plus, RefreshCw, Camera, BedDouble, Layers, ChevronDown } from 'lucide-react'
 import type { Task, Category, Location, AppConfig, TaskStatus } 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)
+
   const [showNew, setShowNew] = useState(false)
   const [openTask, setOpenTask] = useState<number | null>(null)
 
@@ -118,6 +121,15 @@ export default function Summary() {
 
       {error && <div className="error-banner">{error}</div>}
 
+      <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
@@ -128,9 +140,24 @@ export default function Summary() {
               </button>
             ))}
           </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">
-        {/* Category chips hidden while in rooms-view (rooms filter is the active "category") */}
             {!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]})` : ''}
@@ -155,6 +182,8 @@ export default function Summary() {
               <Layers size={13} strokeWidth={1.75} /> Group by location
             </button>
           </div>
+        )}
+      </div>
 
       {tasks.length === 0 && !loading && (
         <div className="empty-state">No open tasks match these filters.</div>