Add Supa account and search changes

apps/weblibre/lib/features/settings/presentation/widgets/default_search_selector.dart

@@ -24,7 +24,6 @@ import 'package:weblibre/features/bangs/data/models/bang_key.dart';
 import 'package:weblibre/features/bangs/domain/providers/bangs.dart';
 import 'package:weblibre/features/settings/presentation/controllers/save_settings.dart';
 import 'package:weblibre/features/user/data/models/general_settings.dart';
-import 'package:weblibre/presentation/widgets/selectable_chips.dart';
 import 'package:weblibre/presentation/widgets/url_icon.dart';
 
 class DefaultSearchSelector extends HookConsumerWidget {
@@ -35,7 +34,6 @@ class DefaultSearchSelector extends HookConsumerWidget {
     final activeBang = ref.watch(
       defaultSearchBangDataProvider.select((value) => value.value),
     );
-    final availableBangs = ref.watch(frequentBangListProvider);
 
     Future<void> updateSearchProvider(BangKey key) async {
       await ref
@@ -46,47 +44,37 @@ class DefaultSearchSelector extends HookConsumerWidget {
           );
     }
 
-    return availableBangs.when(
-      skipLoadingOnReload: true,
-      data: (availableBangs) {
-        return SizedBox(
-          height: 48,
-          child: Row(
-            children: [
-              Expanded(
-                child: SelectableChips(
-                  itemId: (bang) => bang.trigger,
-                  itemAvatar: (bang) =>
-                      UrlIcon([bang.getDefaultUrl()], iconSize: 20),
-                  itemLabel: (bang) => Text(bang.websiteName),
-                  itemTooltip: (bang) => bang.trigger,
-                  availableItems: availableBangs,
-                  selectedItem: activeBang,
-                  onSelected: (bang) async {
-                    await updateSearchProvider(bang.toKey());
-                  },
-                ),
-              ),
-              IconButton(
-                onPressed: () async {
-                  final trigger = await const BangSearchRoute().push<BangKey?>(
-                    context,
-                  );
+    Future<void> pickProvider() async {
+      final trigger = await const BangSearchRoute().push<BangKey?>(context);
+      if (trigger != null) {
+        await updateSearchProvider(trigger);
+      }
+    }
 
-                  if (trigger != null) {
-                    await updateSearchProvider(trigger);
-                  }
-                },
-                icon: const Icon(Icons.chevron_right),
-              ),
-            ],
+    return SizedBox(
+      height: 48,
+      child: Row(
+        children: [
+          Expanded(
+            child: activeBang == null
+                ? OutlinedButton.icon(
+                    onPressed: pickProvider,
+                    icon: const Icon(Icons.search),
+                    label: const Text('Choose a search provider'),
+                  )
+                : ActionChip(
+                    avatar: UrlIcon([activeBang.getDefaultUrl()], iconSize: 20),
+                    label: Text(activeBang.websiteName),
+                    tooltip: activeBang.trigger,
+                    onPressed: pickProvider,
+                  ),
           ),
-        );
-      },
-      error: (error, stackTrace) => Center(
-        child: Icon(Icons.error, color: Theme.of(context).colorScheme.error),
+          IconButton(
+            onPressed: pickProvider,
+            icon: const Icon(Icons.chevron_right),
+          ),
+        ],
       ),
-      loading: () => const SizedBox(height: 48, width: double.infinity),
     );
   }
 }

apps/weblibre/lib/features/settings/presentation/widgets/settings_content_card.dart

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2024-2026 Fabian Freund.
+ *
+ * This file is part of WebLibre
+ * (see https://weblibre.eu).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import 'package:flutter/material.dart';
+
+/// Wraps [child] in the standard surface-container Card used by settings
+/// content widgets — unless [embedded] is true, in which case the child is
+/// returned as-is so the host container (typically a
+/// [SettingsEntryDefinition] already inside a `Card.filled`) doesn't end
+/// up with nested cards.
+///
+/// Use this anywhere a widget is rendered both stand-alone (e.g. inside a
+/// dedicated screen) and embedded as the `child` of a
+/// [SettingsEntryDefinition].
+class SettingsContentCard extends StatelessWidget {
+  const SettingsContentCard({
+    super.key,
+    required this.child,
+    this.embedded = false,
+  });
+
+  final Widget child;
+  final bool embedded;
+
+  @override
+  Widget build(BuildContext context) {
+    if (embedded) return child;
+
+    return Card(
+      color: Theme.of(context).colorScheme.surfaceContainerHigh,
+      clipBehavior: Clip.antiAlias,
+      child: child,
+    );
+  }
+}

apps/weblibre/lib/features/settings/presentation/widgets/settings_detail.dart

@@ -0,0 +1,362 @@
+/*
+ * Copyright (c) 2024-2026 Fabian Freund.
+ *
+ * This file is part of WebLibre
+ * (see https://weblibre.eu).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import 'package:fading_scroll/fading_scroll.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class SettingsEntryDefinition {
+  final String title;
+  final String? subtitle;
+  final List<String> keywords;
+  final Widget child;
+
+  const SettingsEntryDefinition({
+    required this.title,
+    required this.child,
+    this.subtitle,
+    this.keywords = const [],
+  });
+}
+
+class SettingsSectionDefinition {
+  final String title;
+  final List<String> keywords;
+  final List<SettingsEntryDefinition> entries;
+
+  const SettingsSectionDefinition({
+    required this.title,
+    required this.entries,
+    this.keywords = const [],
+  });
+}
+
+/// Result of [useSettingsSearch]: the bound [TextEditingController] used by
+/// [SettingsSearchField], plus the trimmed/lowercased query suitable for
+/// substring matching with [matchesSettingsSearch].
+class SettingsSearchState {
+  final TextEditingController controller;
+  final String normalizedQuery;
+
+  const SettingsSearchState({
+    required this.controller,
+    required this.normalizedQuery,
+  });
+
+  String get rawQuery => controller.text;
+}
+
+/// Standard search-field plumbing for a settings screen: returns a controller
+/// that should be passed to [SettingsCustomScrollScaffold.searchController] /
+/// [SettingsSearchField], plus the normalized query string callers use to
+/// filter their own data. Rebuilds the surrounding widget on every keystroke.
+SettingsSearchState useSettingsSearch() {
+  final controller = useTextEditingController();
+  useListenable(controller);
+  return SettingsSearchState(
+    controller: controller,
+    normalizedQuery: controller.text.trim().toLowerCase(),
+  );
+}
+
+class SettingsDetailScaffold extends HookWidget {
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final List<SettingsSectionDefinition> sections;
+  final List<Widget> actions;
+  final String searchHintText;
+
+  const SettingsDetailScaffold({
+    super.key,
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.sections,
+    this.actions = const [],
+    this.searchHintText = 'Search settings',
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final search = useSettingsSearch();
+
+    final filteredSections = filterSettingsSections(
+      sections: sections,
+      query: search.rawQuery,
+    );
+
+    return Scaffold(
+      body: SafeArea(
+        child: FadingScroll(
+          fadingSize: 25,
+          builder: (context, controller) {
+            return CustomScrollView(
+              controller: controller,
+              slivers: [
+                SliverAppBar.large(
+                  centerTitle: false,
+                  title: Text(title),
+                  actions: actions,
+                ),
+                SliverPadding(
+                  padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
+                  sliver: SliverToBoxAdapter(
+                    child: SettingsSearchField(
+                      controller: search.controller,
+                      hintText: searchHintText,
+                    ),
+                  ),
+                ),
+                SliverPadding(
+                  padding: const EdgeInsets.fromLTRB(16, 24, 16, 20),
+                  sliver: SliverToBoxAdapter(
+                    child: SettingsSectionList(
+                      sections: filteredSections,
+                      query: search.rawQuery,
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class SettingsCustomScrollScaffold extends StatelessWidget {
+  final String title;
+  final List<Widget> actions;
+  final TextEditingController? searchController;
+  final String searchHintText;
+  final List<Widget> slivers;
+
+  const SettingsCustomScrollScaffold({
+    super.key,
+    required this.title,
+    required this.slivers,
+    this.actions = const [],
+    this.searchController,
+    this.searchHintText = 'Search settings',
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: FadingScroll(
+          fadingSize: 25,
+          builder: (context, controller) {
+            return CustomScrollView(
+              controller: controller,
+              slivers: [
+                SliverAppBar.large(
+                  centerTitle: false,
+                  title: Text(title),
+                  actions: actions,
+                ),
+                if (searchController != null)
+                  SliverPadding(
+                    padding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
+                    sliver: SliverToBoxAdapter(
+                      child: SettingsSearchField(
+                        controller: searchController!,
+                        hintText: searchHintText,
+                      ),
+                    ),
+                  ),
+                ...slivers,
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
+
+class SettingsSearchField extends StatelessWidget {
+  final TextEditingController controller;
+  final String hintText;
+
+  const SettingsSearchField({
+    super.key,
+    required this.controller,
+    this.hintText = 'Search settings',
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return TextField(
+      controller: controller,
+      decoration: InputDecoration(
+        hintText: hintText,
+        prefixIcon: const Icon(Icons.search),
+        suffixIcon: controller.text.isEmpty
+            ? null
+            : IconButton(
+                onPressed: controller.clear,
+                icon: const Icon(Icons.close),
+              ),
+        filled: true,
+        fillColor: colorScheme.surfaceContainerHighest.withValues(alpha: 0.6),
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(16),
+          borderSide: BorderSide.none,
+        ),
+      ),
+    );
+  }
+}
+
+class SettingsSectionList extends StatelessWidget {
+  final List<SettingsSectionDefinition> sections;
+  final String query;
+
+  const SettingsSectionList({
+    super.key,
+    required this.sections,
+    required this.query,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (sections.isEmpty) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 8.0),
+        child: Center(
+          child: Text(
+            query.trim().isEmpty
+                ? 'No settings available.'
+                : 'No settings match "$query".',
+            style: Theme.of(context).textTheme.bodyLarge,
+            textAlign: TextAlign.center,
+          ),
+        ),
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: buildSettingsSectionWidgets(context, sections),
+    );
+  }
+}
+
+List<Widget> buildSettingsSectionWidgets(
+  BuildContext context,
+  List<SettingsSectionDefinition> sections,
+) {
+  final theme = Theme.of(context);
+  final colorScheme = theme.colorScheme;
+
+  return [
+    for (
+      var sectionIndex = 0;
+      sectionIndex < sections.length;
+      sectionIndex++
+    ) ...[
+      if (sectionIndex > 0) const SizedBox(height: 24),
+      Text(
+        sections[sectionIndex].title,
+        style: theme.textTheme.titleSmall?.copyWith(
+          color: colorScheme.primary,
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+      const SizedBox(height: 12),
+      Card.filled(
+        margin: EdgeInsets.zero,
+        color: colorScheme.surfaceContainer,
+        clipBehavior: Clip.antiAlias,
+        child: Column(
+          children: [
+            for (
+              var entryIndex = 0;
+              entryIndex < sections[sectionIndex].entries.length;
+              entryIndex++
+            ) ...[
+              if (entryIndex > 0) const Divider(height: 1),
+              sections[sectionIndex].entries[entryIndex].child,
+            ],
+          ],
+        ),
+      ),
+    ],
+  ];
+}
+
+List<SettingsSectionDefinition> filterSettingsSections({
+  required List<SettingsSectionDefinition> sections,
+  required String query,
+}) {
+  final normalizedQuery = query.trim().toLowerCase();
+  if (normalizedQuery.isEmpty) return sections;
+
+  final filteredSections = <SettingsSectionDefinition>[];
+
+  for (final section in sections) {
+    if (matchesSettingsSearch(normalizedQuery, [
+      section.title,
+      ...section.keywords,
+    ])) {
+      filteredSections.add(section);
+      continue;
+    }
+
+    final filteredEntries = [
+      for (final entry in section.entries)
+        if (matchesSettingsSearch(normalizedQuery, [
+          section.title,
+          entry.title,
+          if (entry.subtitle != null) entry.subtitle!,
+          ...section.keywords,
+          ...entry.keywords,
+        ]))
+          entry,
+    ];
+
+    if (filteredEntries.isNotEmpty) {
+      filteredSections.add(
+        SettingsSectionDefinition(
+          title: section.title,
+          keywords: section.keywords,
+          entries: filteredEntries,
+        ),
+      );
+    }
+  }
+
+  return filteredSections;
+}
+
+/// Token-AND substring match used by every settings search. The query is
+/// expected to already be trimmed and lowercased (e.g. via
+/// [useSettingsSearch] or [filterSettingsSections]).
+bool matchesSettingsSearch(String normalizedQuery, List<String> values) {
+  final tokens = normalizedQuery
+      .split(RegExp(r'\s+'))
+      .where((token) => token.isNotEmpty);
+  final haystack = values.join(' ').toLowerCase();
+  return tokens.every(haystack.contains);
+}

apps/weblibre/lib/features/settings/presentation/widgets/toolbar_layout_content.dart

@@ -22,35 +22,118 @@ import 'package:flutter_material_design_icons/flutter_material_design_icons.dart
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:weblibre/core/routing/routes.dart';
 import 'package:weblibre/features/settings/presentation/controllers/save_settings.dart';
-import 'package:weblibre/features/settings/presentation/widgets/sections.dart';
+import 'package:weblibre/features/settings/presentation/widgets/settings_detail.dart';
 import 'package:weblibre/features/user/data/models/general_settings.dart';
 import 'package:weblibre/features/user/domain/repositories/general_settings.dart';
 
+const List<SettingsSectionDefinition> toolbarLayoutSettingsSections = [
+  SettingsSectionDefinition(
+    title: 'Tab Bar',
+    entries: [
+      SettingsEntryDefinition(
+        title: 'Tab Bar Position',
+        subtitle: 'Choose whether the tab bar stays at the top or bottom',
+        keywords: ['top', 'bottom'],
+        child: _TabBarPositionSection(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Tab Bar Style',
+        subtitle: 'Choose between title and compact layouts',
+        keywords: ['layout', 'compact'],
+        child: _TabBarLayoutModeSection(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Auto Hide Tab Bar',
+        subtitle: 'Hide the tab bar when scrolling',
+        keywords: ['scroll'],
+        child: _AutoHideTabBarTile(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Long Press URL to Copy',
+        subtitle: 'Copy the current URL from the tab bar',
+        keywords: ['copy url'],
+        child: _TabBarLongPressUrlCopyTile(),
+      ),
+    ],
+  ),
+  SettingsSectionDefinition(
+    title: 'Contextual Toolbar',
+    entries: [
+      SettingsEntryDefinition(
+        title: 'Show Contextual Toolbar',
+        subtitle: 'Show an additional toolbar for navigation and actions',
+        keywords: ['bottom toolbar'],
+        child: _ShowContextualTabBarTile(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Customize Toolbar Buttons',
+        subtitle: 'Choose which actions appear in the contextual toolbar',
+        keywords: ['buttons'],
+        child: _CustomizeToolbarButtonsTile(),
+      ),
+    ],
+  ),
+  SettingsSectionDefinition(
+    title: 'Quick Tab Switcher',
+    entries: [
+      SettingsEntryDefinition(
+        title: 'Show Quick Tab Switcher Bar',
+        subtitle: 'Show a bar for switching to recent tabs',
+        keywords: ['recent tabs'],
+        child: _ShowQuickTabSwitcherBarTile(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Quick Tab Switcher Mode',
+        subtitle: 'Choose how the switcher orders and groups tabs',
+        keywords: ['recently used', 'container tabs'],
+        child: _QuickTabSwitcherModeSection(),
+      ),
+      SettingsEntryDefinition(
+        title: 'History Fallback in Quick Tab Switcher',
+        subtitle: 'Use history suggestions when there are no matching tabs',
+        keywords: ['suggestions'],
+        child: _QuickTabSwitcherHistorySuggestionsTile(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Show Titles in Quick Tab Switcher',
+        subtitle: 'Display page titles in the switcher list',
+        keywords: ['page titles'],
+        child: _QuickTabSwitcherShowTitlesTile(),
+      ),
+    ],
+  ),
+  SettingsSectionDefinition(
+    title: 'Tab View',
+    entries: [
+      SettingsEntryDefinition(
+        title: 'Bottom Sheet Tab View',
+        subtitle: 'Open the tab switcher as a bottom sheet',
+        keywords: ['sheet'],
+        child: _BottomSheetTabViewTile(),
+      ),
+      SettingsEntryDefinition(
+        title: 'Show Favicons in List View',
+        subtitle: 'Display site icons in the tab list',
+        keywords: ['icons'],
+        child: _TabListShowFaviconsTile(),
+      ),
+    ],
+  ),
+];
+
 class ToolbarLayoutContent extends StatelessWidget {
-  const ToolbarLayoutContent({super.key});
+  final String query;
+
+  const ToolbarLayoutContent({super.key, this.query = ''});
 
   @override
   Widget build(BuildContext context) {
-    return const Column(
-      children: [
-        SettingSection(name: 'Tab Bar'),
-        _TabBarPositionSection(),
-        _TabBarLayoutModeSection(),
-        _AutoHideTabBarTile(),
-        _TabBarLongPressUrlCopyTile(),
-        SettingSection(name: 'Contextual Toolbar'),
-        _ShowContextualTabBarTile(),
-        _CustomizeToolbarButtonsTile(),
-        SettingSection(name: 'Quick Tab Switcher'),
-        _ShowQuickTabSwitcherBarTile(),
-        _QuickTabSwitcherModeSection(),
-        _QuickTabSwitcherHistorySuggestionsTile(),
-        _QuickTabSwitcherShowTitlesTile(),
-        SettingSection(name: 'Tab View'),
-        _BottomSheetTabViewTile(),
-        _TabListShowFaviconsTile(),
-      ],
+    final filteredSections = filterSettingsSections(
+      sections: toolbarLayoutSettingsSections,
+      query: query,
     );
+
+    return SettingsSectionList(sections: filteredSections, query: query);
   }
 }
 

apps/weblibre/lib/features/settings/presentation/widgets/toolbar_preview.dart

@@ -30,6 +30,7 @@ import 'package:weblibre/features/geckoview/features/browser/presentation/widget
 import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/navigation_buttons.dart';
 import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/tabs_action_button.dart';
 import 'package:weblibre/features/geckoview/features/tabs/data/entities/tab_mode.dart';
+import 'package:weblibre/features/geckoview/features/tabs/utils/container_colors.dart';
 import 'package:weblibre/features/user/data/models/general_settings.dart';
 
 class TabBarPreviewHeaderDelegate extends SliverPersistentHeaderDelegate {
@@ -136,9 +137,7 @@ class TabBarPreviewCard extends HookWidget {
             settings.effectiveUiQuickTabSwitcherMode() ==
             QuickTabSwitcherMode.containerTabs,
         url: Uri.parse('https://example.com/news'),
-        color: settings.showContainerUi
-            ? colorScheme.primary.withValues(alpha: 0.18)
-            : null,
+        color: settings.showContainerUi ? colorScheme.primary : null,
         avatar: const Icon(MdiIcons.web, size: 20),
       ),
       QuickTabSwitcherItem(
@@ -177,6 +176,9 @@ class TabBarPreviewCard extends HookWidget {
           avatar: const Icon(MdiIcons.web, size: 20),
         ),
     ];
+    final previewContainerPalette = settings.showContainerUi
+        ? ContainerColors.palette(context, colorScheme.primary)
+        : null;
 
     final tabCountButton = TabsCountButtonView(
       isActive: false,
@@ -236,9 +238,8 @@ class TabBarPreviewCard extends HookWidget {
       showQuickTabSwitcherBar: settings.tabBarShowQuickTabSwitcherBar,
       displayAppBar: true,
       displayQuickTabSwitcher: true,
-      backgroundColor: settings.showContainerUi
-          ? colorScheme.primaryContainer.withValues(alpha: 0.55)
-          : colorScheme.surfaceContainer,
+      backgroundColor:
+          previewContainerPalette?.surfaceColor ?? colorScheme.surfaceContainer,
       title: settings.tabBarLayout == TabBarLayout.compact
           ? _CompactPreviewTitle(tabState: previewTabState)
           : _RegularPreviewTitle(tabState: previewTabState),
@@ -253,9 +254,8 @@ class TabBarPreviewCard extends HookWidget {
       showQuickTabSwitcherBar: false,
       displayAppBar: true,
       displayQuickTabSwitcher: false,
-      backgroundColor: settings.showContainerUi
-          ? colorScheme.primaryContainer.withValues(alpha: 0.55)
-          : colorScheme.surfaceContainer,
+      backgroundColor:
+          previewContainerPalette?.surfaceColor ?? colorScheme.surfaceContainer,
       title: settings.tabBarLayout == TabBarLayout.compact
           ? _CompactPreviewTitle(tabState: previewTabState)
           : _RegularPreviewTitle(tabState: previewTabState),