Redesign devices list as a sortable, responsive headered list

GET /api/devices accepts sort_by/sort_order (whitelisted columns; default
last_seen DESC, stable secondary sort on mac_address), device registration
captures an optional hostname, and the Flutter list switches between a
wide headered layout and a compact ListTile under 600px. Per-row overflow
menu retains View details / Register / Forget actions.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/lib/devices/device_list.dart

@@ -1,27 +1,18 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 
 import '../model/device.dart';
 import '../model/device_type.dart';
 import '../navigation.dart';
 import '../utils/friendly_date_formatter.dart';
 import '../utils/oott_api.dart';
-import '../widgets/status_badge.dart';
-import 'device_actions.dart';
+import 'device_list_filter.dart';
+import 'device_list_rows.dart';
+import 'device_list_sort.dart';
 
-const _pageSize = 5;
-
-enum _DeviceFilter {
-  newDevices('Not registered'),
-  registered('Registered'),
-  all('All');
-
-  const _DeviceFilter(this.label);
-
-  final String label;
-}
+const _pageSize = 10;
+const _wideLayoutBreakpoint = 600.0;
 
 class DeviceList extends StatefulWidget {
   const DeviceList({super.key});
@@ -31,7 +22,7 @@ class DeviceList extends StatefulWidget {
 }
 
 class _DeviceListState extends State<DeviceList> with RouteAware {
-  _DeviceFilter _filter = _DeviceFilter.newDevices;
+  DeviceFilter _filter = DeviceFilter.newDevices;
   List<Device> _devices = [];
   bool _isLoading = true;
   String? _error;
@@ -39,6 +30,9 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
   DeviceType? _typeFilter;
   Timer? _ownerDebounce;
 
+  DeviceSortColumn _sortColumn = DeviceSortColumn.lastSeen;
+  bool _sortAscending = false;
+
   int _currentPage = 0;
   bool _hasNextPage = false;
 
@@ -86,13 +80,15 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
     });
     try {
       bool? isRegistered;
-      if (_filter == _DeviceFilter.newDevices) isRegistered = false;
-      if (_filter == _DeviceFilter.registered) isRegistered = true;
+      if (_filter == DeviceFilter.newDevices) isRegistered = false;
+      if (_filter == DeviceFilter.registered) isRegistered = true;
 
       final results = await BackendAPI.instance.listDevices(
         isRegistered: isRegistered,
         owner: _ownerController.text.isEmpty ? null : _ownerController.text,
         deviceType: _typeFilter,
+        sortBy: _sortColumn.apiName,
+        sortAscending: _sortAscending,
         offset: page * _pageSize,
         limit: _pageSize + 1,
       );
@@ -112,20 +108,41 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
     }
   }
 
+  void _onSortHeaderTapped(DeviceSortColumn column) {
+    setState(() {
+      if (_sortColumn == column) {
+        _sortAscending = !_sortAscending;
+      } else {
+        _sortColumn = column;
+        _sortAscending = true;
+      }
+    });
+    _fetchPage(0);
+  }
+
+  void _onSortSheetChanged(DeviceSortColumn column, bool ascending) {
+    if (_sortColumn == column && _sortAscending == ascending) return;
+    setState(() {
+      _sortColumn = column;
+      _sortAscending = ascending;
+    });
+    _fetchPage(0);
+  }
+
   String _emptyMessage() => switch (_filter) {
-    _DeviceFilter.newDevices => 'No unregistered devices',
-    _DeviceFilter.registered => 'No registered devices',
-    _DeviceFilter.all => 'No devices found',
+    DeviceFilter.newDevices => 'No unregistered devices',
+    DeviceFilter.registered => 'No registered devices',
+    DeviceFilter.all => 'No devices found',
   };
 
   bool get _hasActiveDetailFilters =>
       _ownerController.text.isNotEmpty || _typeFilter != null;
 
-  void _showFilterSheet(BuildContext context) {
+  void _showFilterSheet() {
     showModalBottomSheet(
       context: context,
       isScrollControlled: true,
-      builder: (_) => _DeviceFilterSheet(
+      builder: (_) => DeviceFilterSheet(
         ownerController: _ownerController,
         typeFilter: _typeFilter,
         hasActiveFilters: _hasActiveDetailFilters,
@@ -144,88 +161,137 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
     );
   }
 
-  @override
-  Widget build(BuildContext context) {
-    final formatter = FriendlyDateFormatter();
-    final textTheme = Theme.of(context).textTheme;
-
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Row(
-          children: [
-            Expanded(child: Text('Devices', style: textTheme.headlineSmall)),
-            Badge(
-              isLabelVisible: _hasActiveDetailFilters,
-              child: IconButton(
-                icon: const Icon(Icons.filter_list),
-                tooltip: 'Filter',
-                onPressed: () => _showFilterSheet(context),
-              ),
-            ),
-          ],
-        ),
-        SingleChildScrollView(
-          scrollDirection: Axis.horizontal,
-          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
-          child: Wrap(
-            spacing: 8.0,
-            children: _DeviceFilter.values
-                .map(
-                  (f) => ChoiceChip(
-                    label: Text(f.label),
-                    selected: _filter == f,
-                    onSelected: (_) {
-                      setState(() => _filter = f);
-                      _fetchPage(0);
-                    },
-                  ),
-                )
-                .toList(),
-          ),
-        ),
-        if (_isLoading)
-          const Expanded(child: Center(child: CircularProgressIndicator()))
-        else if (_error != null)
-          Expanded(child: Center(child: Text('Error: $_error')))
-        else if (_devices.isEmpty)
-          Padding(
-            padding: const EdgeInsets.only(top: 16, bottom: 12),
-            child: Center(
-              child: Text(
-                _emptyMessage(),
-                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                  color: Theme.of(context).colorScheme.onSurfaceVariant,
-                ),
-              ),
-            ),
-          )
-        else
-          Expanded(
-            child: RefreshIndicator(
-              onRefresh: () => _fetchPage(_currentPage),
-              child: CustomScrollView(
-                physics: const AlwaysScrollableScrollPhysics(),
-                slivers: [
-                  SliverList.builder(
-                    itemCount: _devices.length,
-                    itemBuilder: (context, index) => _DeviceCard(
-                      device: _devices[index],
-                      formatter: formatter,
-                      onRefresh: () => _fetchPage(_currentPage),
-                    ),
-                  ),
-                  if (_currentPage > 0 || _hasNextPage)
-                    _buildPaginationControls(context),
-                ],
-              ),
-            ),
-          ),
-      ],
+  void _showSortSheet() {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      builder: (_) => DeviceSortSheet(
+        currentColumn: _sortColumn,
+        ascending: _sortAscending,
+        onChanged: _onSortSheetChanged,
+      ),
     );
   }
 
-  Widget _buildPaginationControls(BuildContext context) {
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isWide = constraints.maxWidth >= _wideLayoutBreakpoint;
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text('Devices', style: textTheme.headlineSmall),
+                ),
+                if (!isWide)
+                  IconButton(
+                    icon: const Icon(Icons.sort),
+                    tooltip: 'Sort',
+                    onPressed: _showSortSheet,
+                  ),
+                Badge(
+                  isLabelVisible: _hasActiveDetailFilters,
+                  child: IconButton(
+                    icon: const Icon(Icons.filter_list),
+                    tooltip: 'Filter',
+                    onPressed: _showFilterSheet,
+                  ),
+                ),
+              ],
+            ),
+            SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+              child: Wrap(
+                spacing: 8.0,
+                children: DeviceFilter.values
+                    .map(
+                      (f) => ChoiceChip(
+                        label: Text(f.label),
+                        selected: _filter == f,
+                        onSelected: (_) {
+                          setState(() => _filter = f);
+                          _fetchPage(0);
+                        },
+                      ),
+                    )
+                    .toList(),
+              ),
+            ),
+            Expanded(child: _buildBody(context, isWide)),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildBody(BuildContext context, bool isWide) {
+    if (_isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+    if (_error != null) {
+      return Center(child: Text('Error: $_error'));
+    }
+    if (_devices.isEmpty) {
+      final theme = Theme.of(context);
+      return Padding(
+        padding: const EdgeInsets.only(top: 16, bottom: 12),
+        child: Center(
+          child: Text(
+            _emptyMessage(),
+            style: theme.textTheme.bodyMedium?.copyWith(
+              color: theme.colorScheme.onSurfaceVariant,
+            ),
+          ),
+        ),
+      );
+    }
+
+    final formatter = FriendlyDateFormatter();
+    return RefreshIndicator(
+      onRefresh: () => _fetchPage(_currentPage),
+      child: CustomScrollView(
+        physics: const AlwaysScrollableScrollPhysics(),
+        slivers: [
+          if (isWide)
+            SliverPersistentHeader(
+              pinned: true,
+              delegate: DeviceListHeaderDelegate(
+                sortColumn: _sortColumn,
+                ascending: _sortAscending,
+                onTap: _onSortHeaderTapped,
+              ),
+            ),
+          SliverList.separated(
+            itemCount: _devices.length,
+            itemBuilder: (context, index) {
+              final device = _devices[index];
+              return isWide
+                  ? DeviceRowWide(
+                      device: device,
+                      formatter: formatter,
+                      onRefresh: () => _fetchPage(_currentPage),
+                    )
+                  : DeviceRowCompact(
+                      device: device,
+                      formatter: formatter,
+                      onRefresh: () => _fetchPage(_currentPage),
+                    );
+            },
+            separatorBuilder: (_, _) => const Divider(height: 1),
+          ),
+          if (_currentPage > 0 || _hasNextPage) _buildPaginationControls(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildPaginationControls() {
     return SliverToBoxAdapter(
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 8),
@@ -267,170 +333,3 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
     );
   }
 }
-
-class _DeviceFilterSheet extends StatelessWidget {
-  final TextEditingController ownerController;
-  final DeviceType? typeFilter;
-  final bool hasActiveFilters;
-  final ValueChanged<DeviceType?> onTypeChanged;
-  final VoidCallback onClear;
-
-  const _DeviceFilterSheet({
-    required this.ownerController,
-    required this.typeFilter,
-    required this.hasActiveFilters,
-    required this.onTypeChanged,
-    required this.onClear,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: EdgeInsets.only(
-        left: 16,
-        right: 16,
-        top: 24,
-        bottom: MediaQuery.of(context).viewInsets.bottom + 24,
-      ),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        children: [
-          Text('Filters', style: Theme.of(context).textTheme.titleMedium),
-          const SizedBox(height: 16),
-          TextField(
-            controller: ownerController,
-            decoration: const InputDecoration(
-              labelText: 'Owner',
-              prefixIcon: Icon(Icons.person_outline),
-              border: OutlineInputBorder(),
-            ),
-          ),
-          const SizedBox(height: 16),
-          DropdownButtonFormField<DeviceType?>(
-            initialValue: typeFilter,
-            decoration: const InputDecoration(
-              labelText: 'Type',
-              border: OutlineInputBorder(),
-            ),
-            items: [
-              const DropdownMenuItem(value: null, child: Text('All types')),
-              ...DeviceType.values.map(
-                (t) => DropdownMenuItem(
-                  value: t,
-                  child: Row(
-                    children: [
-                      Icon(t.icon, size: 16),
-                      const SizedBox(width: 4),
-                      Text(t.label),
-                    ],
-                  ),
-                ),
-              ),
-            ],
-            onChanged: onTypeChanged,
-          ),
-          const SizedBox(height: 16),
-          if (hasActiveFilters)
-            OutlinedButton(
-              onPressed: () {
-                onClear();
-                Navigator.of(context).pop();
-              },
-              child: const Text('Clear filters'),
-            ),
-        ],
-      ),
-    );
-  }
-}
-
-class _DeviceCard extends StatelessWidget {
-  final Device device;
-  final FriendlyDateFormatter formatter;
-  final VoidCallback onRefresh;
-
-  const _DeviceCard({
-    required this.device,
-    required this.formatter,
-    required this.onRefresh,
-  });
-
-  String get _registeredName {
-    final type = device.deviceType == DeviceType.unknown
-        ? 'Device'
-        : device.deviceType.label;
-    return "${device.owner}'s $type";
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    return Card(
-      color: device.isRegistered ? null : theme.colorScheme.secondaryContainer,
-      child: ListTile(
-        onTap: () => context.push('/devices/${device.macAddress}'),
-        leading: Tooltip(
-          message: device.deviceType == DeviceType.unknown
-              ? 'Device type unknown'
-              : device.deviceType.label,
-          child: Icon(device.deviceType.icon),
-        ),
-        title: Row(
-          children: [
-            Flexible(
-              child: Text(
-                device.isRegistered ? _registeredName : device.ipv4Address,
-                overflow: TextOverflow.ellipsis,
-              ),
-            ),
-            const SizedBox(width: 8),
-            if (device.isRegistered)
-              const StatusBadge(label: 'Registered', color: BadgeColor.success)
-            else
-              const StatusBadge(
-                label: 'Not registered',
-                color: BadgeColor.secondary,
-              ),
-          ],
-        ),
-        subtitle: Text(
-          '${device.isRegistered ? '${device.ipv4Address}\n' : ''}'
-          '${device.vendor} · ${device.macAddress}\n'
-          'Last seen: ${formatter.format(device.lastSeen)}',
-        ),
-        isThreeLine: true,
-        trailing: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            PopupMenuButton<String>(
-              icon: const Icon(Icons.more_vert),
-              onSelected: (value) async {
-                if (value == 'details') {
-                  context.push('/devices/${device.macAddress}');
-                } else if (value == 'forget') {
-                  await confirmForgetDevice(context, device, onRefresh);
-                } else if (value == 'register') {
-                  await showRegisterDeviceDialog(context, device, onRefresh);
-                }
-              },
-              itemBuilder: (context) => [
-                const PopupMenuItem(
-                  value: 'details',
-                  child: Text('View details'),
-                ),
-                if (device.isRegistered)
-                  const PopupMenuItem(value: 'forget', child: Text('Forget')),
-                if (!device.isRegistered)
-                  const PopupMenuItem(
-                    value: 'register',
-                    child: Text('Register'),
-                  ),
-              ],
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-}