External/oott
1
0
Fork 0
mirror of https://github.com/rzuasti/oott.git synced 2026-07-08 19:21:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Collapse list filters to a dropdown on phones

Browse Source 
On narrow layouts the devices list's filter chips (Not registered /
Registered / All) competed for horizontal space with the Sort and Filter
icon buttons and overlapped. Introduce a reusable FilterSelector that
keeps the chips on wide layouts but collapses to a compact dropdown
button on phones, and use it for both the devices and notifications
lists for consistency.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
2026-06-04 18:22:01 -04:00
co-authored by Claude Opus 4.8
parent 0a899b7890
commit f64b4d3559
5 changed files with 195 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/devices/device_list.dart
+9 -21
View File
@@ -11,6 +11,7 @@ import '../theme/dimens.dart';
import '../utils/friendly_date_formatter.dart';
import '../utils/oott_api.dart';
import '../widgets/empty_state.dart';
import '../widgets/filter_selector.dart';
import '../widgets/pagination_bar.dart';
import '../widgets/skeleton.dart';
import 'device_list_filter.dart';
@@ -240,27 +241,14 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
Row(
children: [
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(
horizontal: Insets.sm,
vertical: Insets.xs,
),
child: Wrap(
spacing: Insets.sm,
children: DeviceFilter.values
.map(
(f) => ChoiceChip(
label: Text(f.label),
selected: _filter == f,
onSelected: (_) {
setState(() => _filter = f);
_fetchPage(0);
},
),
)
.toList(),
),
child: FilterSelector<DeviceFilter>(
values: DeviceFilter.values,
selected: _filter,
labelOf: (f) => f.label,
onSelected: (f) {
setState(() => _filter = f);
_fetchPage(0);
},
),
),
if (!isWide)