Rebuild UI on the Noo design system

Replaces the Material 3 screens with the Noo design system: warm
neutrals, one violet accent, pill controls, Schibsted Grotesk/
Instrument Sans, Lucide icons, no gradients/shadows.

- New lib/widgets/noo/ component kit (core, lists, files, media, nav,
  overlays) plus lib/theme/design_tokens.dart for the color/type/space/
  radius/motion tokens.
- Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and
  toolbar), every tab (Files/Offline, Photos, Favorites, Recent,
  Activity, Trash, Shares), Settings, the lock and login screens, the
  media viewer, search, the details/share sheets, and the share-upload
  and move/copy destination pickers.
- Added a design canvas (linked from DESIGN_SYSTEM.md) covering the
  screens the spec didn't already describe, with matching Android and
  iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4.
- Removed now-dead legacy widgets (media_grid_tile, swipeable_item,
  sync_status_badge, selectable_thumbnail) and updated
  architecture.md/styling.md/standards.md to describe the new
  structure and component/testing conventions.
- Added widget tests for the noo/ component kit.

This is a UI-only rework: no provider/model/service behavior changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

lib/widgets/settings/settings_accounts.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:provider/provider.dart';
+import '../../models/saved_account.dart';
+import '../../providers/session_controller.dart';
+import '../../theme/design_tokens.dart';
+import '../../views/login_view.dart';
+import '../noo/core/noo_avatar.dart';
+import '../noo/lists/noo_settings_row.dart';
+import '../shell/shell_common.dart';
+import 'settings_dialogs.dart';
+import 'settings_section.dart';
+
+/// Settings section 2: every saved account (switch/remove), then "Add
+/// account" (DESIGN_SYSTEM.md 4).
+class SettingsAccountsSection extends StatelessWidget {
+  const SettingsAccountsSection({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final session = context.watch<SessionController>();
+
+    return SettingsSection(
+      title: 'Accounts',
+      children: [
+        for (final account in session.accounts)
+          _SavedAccountRow(
+            account: account,
+            isActive: account.id == session.activeAccountId,
+            onTap: account.id == session.activeAccountId
+                ? null
+                : () => session.switchAccount(account.id),
+            onRemove: () => confirmRemoveAccount(
+              context,
+              session,
+              accountId: account.id,
+              username: account.username,
+              host: serverHost(account.serverUrl),
+              isActive: account.id == session.activeAccountId,
+            ),
+          ),
+        NooSettingsRow(
+          icon: LucideIcons.userPlus,
+          accent: true,
+          label: const Text('Add account'),
+          onTap: () => Navigator.push(
+            context,
+            MaterialPageRoute(builder: (_) => const LoginView(isAddingAccount: true)),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// A saved-account row: avatar, name over host, a check on the active one,
+/// and a remove button - [NooSettingsRow] can't show an avatar leading
+/// widget (only an [IconData]), so this is its own row built to the same
+/// proportions (mirrors `shell_common.dart`'s private `_AccountSwitchRow`,
+/// which the account switcher sheet/dialog uses for the same data).
+class _SavedAccountRow extends StatelessWidget {
+  final SavedAccount account;
+  final bool isActive;
+  final VoidCallback? onTap;
+  final VoidCallback onRemove;
+
+  const _SavedAccountRow({
+    required this.account,
+    required this.isActive,
+    required this.onTap,
+    required this.onRemove,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = context.nooColors;
+    return Material(
+      color: colors.surface,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: NooSpace.md, vertical: 10),
+          child: Row(
+            spacing: 12,
+            children: [
+              NooAvatar(initials: accountInitial(account.username), current: isActive, size: 36),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  spacing: 2,
+                  children: [
+                    Text(
+                      account.username,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: NooText.bodyL.copyWith(
+                        height: 1.1,
+                        fontWeight: FontWeight.w500,
+                        color: colors.fg1,
+                      ),
+                    ),
+                    Text(
+                      serverHost(account.serverUrl),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: NooText.meta.copyWith(color: colors.fg3),
+                    ),
+                  ],
+                ),
+              ),
+              if (isActive) Icon(LucideIcons.checkCircle, size: 20, color: colors.accentText),
+              GestureDetector(
+                onTap: onRemove,
+                child: Container(
+                  width: 36,
+                  height: 36,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
+                  child: Icon(LucideIcons.trash2, size: 16, color: colors.danger),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}