Add pagination to the devices list screen

Mirror the notifications list paging pattern (offset/limit, fetch one
extra row to detect the next page, First/Prev/Next controls) across the
devices DB query, REST endpoint, API client and UI. Also add a First
page button to the notifications pagination row.

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

frontend/lib/devices/device_list.dart

@@ -10,6 +10,8 @@ import '../utils/oott_api.dart';
 import '../widgets/status_badge.dart';
 import 'device_actions.dart';
 
+const _pageSize = 5;
+
 enum _DeviceFilter {
   newDevices('Not registered'),
   registered('Registered'),
@@ -36,11 +38,14 @@ class _DeviceListState extends State<DeviceList> {
   DeviceType? _typeFilter;
   Timer? _ownerDebounce;
 
+  int _currentPage = 0;
+  bool _hasNextPage = false;
+
   @override
   void initState() {
     super.initState();
     _ownerController.addListener(_onOwnerChanged);
-    _loadDevices();
+    _fetchPage(0);
   }
 
   @override
@@ -52,10 +57,13 @@ class _DeviceListState extends State<DeviceList> {
 
   void _onOwnerChanged() {
     _ownerDebounce?.cancel();
-    _ownerDebounce = Timer(const Duration(milliseconds: 500), _loadDevices);
+    _ownerDebounce = Timer(
+      const Duration(milliseconds: 500),
+      () => _fetchPage(0),
+    );
   }
 
-  Future<void> _loadDevices() async {
+  Future<void> _fetchPage(int page) async {
     setState(() {
       _isLoading = _devices.isEmpty;
       _error = null;
@@ -65,14 +73,18 @@ class _DeviceListState extends State<DeviceList> {
       if (_filter == _DeviceFilter.newDevices) isRegistered = false;
       if (_filter == _DeviceFilter.registered) isRegistered = true;
 
-      final devices = await BackendAPI.instance.listDevices(
+      final results = await BackendAPI.instance.listDevices(
         isRegistered: isRegistered,
         owner: _ownerController.text.isEmpty ? null : _ownerController.text,
         deviceType: _typeFilter,
+        offset: page * _pageSize,
+        limit: _pageSize + 1,
       );
       if (!mounted) return;
       setState(() {
-        _devices = devices;
+        _currentPage = page;
+        _hasNextPage = results.length > _pageSize;
+        _devices = _hasNextPage ? results.take(_pageSize).toList() : results;
         _isLoading = false;
       });
     } catch (e) {
@@ -103,14 +115,14 @@ class _DeviceListState extends State<DeviceList> {
         hasActiveFilters: _hasActiveDetailFilters,
         onTypeChanged: (value) {
           setState(() => _typeFilter = value);
-          _loadDevices();
+          _fetchPage(0);
         },
         onClear: () {
           setState(() {
             _ownerController.clear();
             _typeFilter = null;
           });
-          _loadDevices();
+          _fetchPage(0);
         },
       ),
     );
@@ -149,7 +161,7 @@ class _DeviceListState extends State<DeviceList> {
                     selected: _filter == f,
                     onSelected: (_) {
                       setState(() => _filter = f);
-                      _loadDevices();
+                      _fetchPage(0);
                     },
                   ),
                 )
@@ -175,21 +187,69 @@ class _DeviceListState extends State<DeviceList> {
         else
           Expanded(
             child: RefreshIndicator(
-              onRefresh: _loadDevices,
-              child: ListView.builder(
+              onRefresh: () => _fetchPage(_currentPage),
+              child: CustomScrollView(
                 physics: const AlwaysScrollableScrollPhysics(),
-                itemCount: _devices.length,
-                itemBuilder: (context, index) => _DeviceCard(
-                  device: _devices[index],
-                  formatter: formatter,
-                  onRefresh: _loadDevices,
-                ),
+                slivers: [
+                  SliverList.builder(
+                    itemCount: _devices.length,
+                    itemBuilder: (context, index) => _DeviceCard(
+                      device: _devices[index],
+                      formatter: formatter,
+                      onRefresh: () => _fetchPage(_currentPage),
+                    ),
+                  ),
+                  if (_currentPage > 0 || _hasNextPage)
+                    _buildPaginationControls(context),
+                ],
               ),
             ),
           ),
       ],
     );
   }
+
+  Widget _buildPaginationControls(BuildContext context) {
+    return SliverToBoxAdapter(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            IconButton.outlined(
+              onPressed: _currentPage > 0 && !_isLoading
+                  ? () => _fetchPage(0)
+                  : null,
+              icon: const Icon(Icons.first_page),
+              tooltip: 'First page',
+            ),
+            const SizedBox(width: 8),
+            IconButton.outlined(
+              onPressed: _currentPage > 0 && !_isLoading
+                  ? () => _fetchPage(_currentPage - 1)
+                  : null,
+              icon: const Icon(Icons.chevron_left),
+              tooltip: 'Previous page',
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
+              child: Text(
+                'Page ${_currentPage + 1}',
+                style: Theme.of(context).textTheme.bodyMedium,
+              ),
+            ),
+            IconButton.outlined(
+              onPressed: _hasNextPage && !_isLoading
+                  ? () => _fetchPage(_currentPage + 1)
+                  : null,
+              icon: const Icon(Icons.chevron_right),
+              tooltip: 'Next page',
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }
 
 class _DeviceFilterSheet extends StatelessWidget {