From d14c8beb60c1de6e8d01caf5c4beade824480d5e Mon Sep 17 00:00:00 2001
From: rzuasti <rzuasti@pm.me>
Date: Thu, 28 May 2026 20:03:11 -0400
Subject: [PATCH] Fix empty-state layout: compact message instead of
 viewport-filling indicator

Replace Center-in-Expanded / SliverFillRemaining empty states in the
notifications and devices lists with compact, centered inline text so
status widgets below remain visible without scrolling. Also align
notification filter chips to match the devices list spacing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/lib/devices/device_list.dart | 49 ++++++++++++++++-----------
 frontend/lib/home/home_screen.dart    | 21 ++++++++++--
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/frontend/lib/devices/device_list.dart b/frontend/lib/devices/device_list.dart
index 46277ad..465d97d 100644
--- a/frontend/lib/devices/device_list.dart
+++ b/frontend/lib/devices/device_list.dart
@@ -156,26 +156,37 @@ class _DeviceListState extends State<DeviceList> {
                 .toList(),
           ),
         ),
-        Expanded(
-          child: _isLoading
-              ? const Center(child: CircularProgressIndicator())
-              : _error != null
-              ? Center(child: Text('Error: $_error'))
-              : _devices.isEmpty
-              ? Center(child: Text(_emptyMessage()))
-              : RefreshIndicator(
-                  onRefresh: _loadDevices,
-                  child: ListView.builder(
-                    physics: const AlwaysScrollableScrollPhysics(),
-                    itemCount: _devices.length,
-                    itemBuilder: (context, index) => _DeviceCard(
-                      device: _devices[index],
-                      formatter: formatter,
-                      onRefresh: _loadDevices,
-                    ),
-                  ),
+        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: _loadDevices,
+              child: ListView.builder(
+                physics: const AlwaysScrollableScrollPhysics(),
+                itemCount: _devices.length,
+                itemBuilder: (context, index) => _DeviceCard(
+                  device: _devices[index],
+                  formatter: formatter,
+                  onRefresh: _loadDevices,
+                ),
+              ),
+            ),
+          ),
       ],
     );
   }
diff --git a/frontend/lib/home/home_screen.dart b/frontend/lib/home/home_screen.dart
index cd643d2..5481b1f 100644
--- a/frontend/lib/home/home_screen.dart
+++ b/frontend/lib/home/home_screen.dart
@@ -167,10 +167,27 @@ class _HomeScreenState extends State<HomeScreen> {
     PagingState<int, oott_model.Notification> state,
     void Function() fetchNextPage,
   ) {
+    final isEmpty =
+        !state.isLoading && state.items != null && state.items!.isEmpty;
     return CustomScrollView(
       slivers: [
         SliverToBoxAdapter(child: _buildNotificationsHeader(context, state)),
-        _buildNotificationSliver(state, fetchNextPage),
+        if (isEmpty)
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 16, bottom: 12),
+              child: Center(
+                child: Text(
+                  'No items found',
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                ),
+              ),
+            ),
+          )
+        else
+          _buildNotificationSliver(state, fetchNextPage),
         const SliverToBoxAdapter(
           child: Padding(
             padding: EdgeInsets.only(top: 24),
@@ -212,6 +229,7 @@ class _HomeScreenState extends State<HomeScreen> {
         ),
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
+          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
           child: Wrap(
             spacing: 8.0,
             children: _NotificationFilter.values
@@ -228,7 +246,6 @@ class _HomeScreenState extends State<HomeScreen> {
                 .toList(),
           ),
         ),
-        const SizedBox(height: 8),
       ],
     );
   }