Polish frontend: design tokens, theming, AppBar titles, empty/loading states

Frontend usability and aesthetics pass across web and mobile:

- Add shared layout tokens (theme/dimens.dart: Insets + Breakpoints) and
  replace magic-number spacing and per-file breakpoint consts.
- Route both themes through buildAppTheme (theme/theme_builder.dart): explicit
  useMaterial3 and a shared branded textTheme (Barlow Condensed for
  display/headline/title styles); logo now reads its style from the theme.
- Move screen titles into the shared AppBar (route-derived) and drop the
  redundant in-body headers; upgrade Settings buttons to M3 FilledButton.
- Add reusable EmptyState and skeleton loaders; Devices empty state links to
  scanner status, notifications get filter-aware messages.
- Add a first-run welcome intro and Save-disabled helper text in Settings.
- Make device Filter/Sort adaptive: bottom sheet on phones, dialog on wide.
- Collapse the device-list filter chips and Sort/Filter buttons into one row;
  rename the home Scanners card title and align its style.

Tests: add EmptyState/skeleton widget tests and Settings first-run cases;
update tests for the FilledButton swap and relocated titles. 89 passing,
dart analyze clean.

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

frontend/lib/navigation.dart

@@ -2,18 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:frontend/about/about.dart';
 import 'package:frontend/settings/settings.dart';
 import 'package:go_router/go_router.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'devices/device_detail.dart';
 import 'devices/device_list.dart';
 import 'home/home_screen.dart';
 import 'status/status_screen.dart';
+import 'theme/dimens.dart';
 import 'utils/pref_utils.dart';
 import 'widgets/offline_banner.dart';
 
-// M3 window size class breakpoints
-const _mediumBreakpoint = 600.0;
-const _expandedBreakpoint = 840.0;
-
 typedef _NavDest = ({IconData icon, IconData activeIcon, String label});
 
 const List<_NavDest> _destinations = [
@@ -107,18 +103,15 @@ class MainShell extends StatelessWidget {
         final selectedIndex = _calculateSelectedIndex(context);
         final width = constraints.maxWidth;
 
-        if (width < _mediumBreakpoint) {
+        if (width < Breakpoints.medium) {
           return Scaffold(
-            appBar: _buildAppBar(context),
+            appBar: _buildAppBar(context, selectedIndex),
             body: Column(
               children: [
                 const OfflineBanner(),
                 Expanded(
                   child: Padding(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 16,
-                      vertical: 12,
-                    ),
+                    padding: const EdgeInsets.all(Insets.lg),
                     child: child,
                   ),
                 ),
@@ -142,7 +135,7 @@ class MainShell extends StatelessWidget {
         }
 
         return Scaffold(
-          appBar: _buildAppBar(context),
+          appBar: _buildAppBar(context, selectedIndex),
           body: Row(
             children: [
               SafeArea(
@@ -150,7 +143,7 @@ class MainShell extends StatelessWidget {
                   backgroundColor: Theme.of(
                     context,
                   ).colorScheme.surfaceContainerLow,
-                  extended: width >= _expandedBreakpoint,
+                  extended: width >= Breakpoints.expanded,
                   destinations: _destinations
                       .map(
                         (d) => NavigationRailDestination(
@@ -173,7 +166,7 @@ class MainShell extends StatelessWidget {
                       const OfflineBanner(),
                       Expanded(
                         child: Padding(
-                          padding: const EdgeInsets.all(20),
+                          padding: const EdgeInsets.all(Insets.lg),
                           child: child,
                         ),
                       ),
@@ -188,24 +181,37 @@ class MainShell extends StatelessWidget {
     );
   }
 
-  AppBar _buildAppBar(BuildContext context) {
+  AppBar _buildAppBar(BuildContext context, int selectedIndex) {
+    final theme = Theme.of(context);
     return AppBar(
-      title: Container(
-        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.primary,
-          borderRadius: BorderRadius.circular(10),
-        ),
-        child: Text(
-          'OOTT',
-          style: GoogleFonts.barlowCondensed(
-            color: Theme.of(context).colorScheme.onPrimary,
-            fontWeight: FontWeight.bold,
-            fontSize: 26,
+      titleSpacing: Insets.lg,
+      title: Row(
+        children: [
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 2),
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: Text(
+              'OOTT',
+              style: theme.textTheme.headlineSmall?.copyWith(
+                color: theme.colorScheme.onPrimary,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
           ),
-        ),
+          const SizedBox(width: Insets.md),
+          Flexible(
+            child: Text(
+              _destinations[selectedIndex].label,
+              overflow: TextOverflow.ellipsis,
+              style: theme.textTheme.titleLarge,
+            ),
+          ),
+        ],
       ),
-      backgroundColor: Theme.of(context).colorScheme.surfaceContainerLowest,
+      backgroundColor: theme.colorScheme.surfaceContainerLowest,
     );
   }
 }