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/widgets/empty_state.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+
+import '../theme/dimens.dart';
+
+/// A centered placeholder for "nothing here yet" situations: an icon, a short
+/// message and an optional call-to-action button. Keeps empty screens
+/// consistent and gives the user a next step instead of a bare line of text.
+class EmptyState extends StatelessWidget {
+  const EmptyState({
+    required this.icon,
+    required this.message,
+    this.actionLabel,
+    this.onAction,
+    super.key,
+  });
+
+  final IconData icon;
+  final String message;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final hasAction = actionLabel != null && onAction != null;
+
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(Insets.xxl),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(icon, size: 48, color: theme.colorScheme.onSurfaceVariant),
+            const SizedBox(height: Insets.md),
+            Text(
+              message,
+              textAlign: TextAlign.center,
+              style: theme.textTheme.bodyLarge?.copyWith(
+                color: theme.colorScheme.onSurfaceVariant,
+              ),
+            ),
+            if (hasAction) ...[
+              const SizedBox(height: Insets.lg),
+              OutlinedButton(onPressed: onAction, child: Text(actionLabel!)),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/lib/widgets/scanners_status_card.dart

@@ -179,8 +179,8 @@ class _ScannersStatusCardState extends State<ScannersStatusCard>
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text(
-                    'Status',
-                    style: Theme.of(context).textTheme.titleMedium,
+                    'Scanners',
+                    style: Theme.of(context).textTheme.titleLarge,
                   ),
                   const SizedBox(height: 12),
                   _scannerRow(

frontend/lib/widgets/skeleton.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+import '../theme/dimens.dart';
+
+/// A single gently pulsing placeholder block, used to build skeleton loaders.
+class Skeleton extends StatefulWidget {
+  const Skeleton({
+    this.width,
+    this.height = Insets.md,
+    this.borderRadius,
+    super.key,
+  });
+
+  final double? width;
+  final double height;
+  final BorderRadius? borderRadius;
+
+  @override
+  State<Skeleton> createState() => _SkeletonState();
+}
+
+class _SkeletonState extends State<Skeleton>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller = AnimationController(
+    vsync: this,
+    duration: const Duration(milliseconds: 900),
+  )..repeat(reverse: true);
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final base = Theme.of(context).colorScheme.surfaceContainerHighest;
+    return FadeTransition(
+      opacity: Tween<double>(begin: 0.4, end: 1.0).animate(_controller),
+      child: Container(
+        width: widget.width,
+        height: widget.height,
+        decoration: BoxDecoration(
+          color: base,
+          borderRadius: widget.borderRadius ?? BorderRadius.circular(Insets.xs),
+        ),
+      ),
+    );
+  }
+}
+
+/// A skeleton placeholder approximating a list of rows (avatar + two text
+/// lines), shown while list data is loading to avoid a bare spinner and layout
+/// shift.
+class ListSkeleton extends StatelessWidget {
+  const ListSkeleton({this.rows = 6, super.key});
+
+  final int rows;
+
+  @override
+  Widget build(BuildContext context) {
+    return IgnorePointer(
+      child: Column(
+        children: List.generate(
+          rows,
+          (_) => Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: Insets.sm,
+              vertical: Insets.md,
+            ),
+            child: Row(
+              children: const [
+                Skeleton(
+                  width: 36,
+                  height: 36,
+                  borderRadius: BorderRadius.all(Radius.circular(18)),
+                ),
+                SizedBox(width: Insets.md),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Skeleton(width: 160),
+                      SizedBox(height: Insets.sm),
+                      Skeleton(width: 100),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}