Collapse list filters to a dropdown on phones

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>

frontend/lib/home/notifications_list.dart

@@ -10,6 +10,7 @@ import '../utils/friendly_date_formatter.dart';
 import '../utils/oott_api.dart';
 import '../utils/ui_snackbars.dart';
 import '../widgets/empty_state.dart';
+import '../widgets/filter_selector.dart';
 import '../widgets/pagination_bar.dart';
 import '../widgets/skeleton.dart';
 import 'notification_card.dart';
@@ -266,27 +267,14 @@ class _NotificationsListState extends State<NotificationsList>
               ),
           ],
         ),
-        SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          padding: const EdgeInsets.symmetric(
-            horizontal: Insets.sm,
-            vertical: Insets.xs,
-          ),
-          child: Wrap(
-            spacing: Insets.sm,
-            children: _NotificationFilter.values
-                .map(
-                  (f) => ChoiceChip(
-                    label: Text(f.label),
-                    selected: _filter == f,
-                    onSelected: (_) {
-                      setState(() => _filter = f);
-                      _fetchPage(0);
-                    },
-                  ),
-                )
-                .toList(),
-          ),
+        FilterSelector<_NotificationFilter>(
+          values: _NotificationFilter.values,
+          selected: _filter,
+          labelOf: (f) => f.label,
+          onSelected: (f) {
+            setState(() => _filter = f);
+            _fetchPage(0);
+          },
         ),
       ],
     );