CUJ index [land silently]

sites/docs/lib/_sass/_site.scss

@@ -50,6 +50,7 @@
 @use 'package:site_shared/_sass/components/tooltip';
 
 // Styles for specific pages, alphabetically ordered.
+@use 'pages/cuj-index';
 @use 'pages/glossary';
 @use 'pages/learning-resources-index';
 @use 'pages/not-found';

sites/docs/lib/_sass/components/_filterable-index.scss

@@ -3,8 +3,9 @@
 // classes. Each page styles its own results list separately, keyed off the
 // id of that list.
 
+$mobile-breakpoint: 839px;
+
 .filterable-index {
-  $mobile-breakpoint: 839px;
   $sidebar-width: 220px;
 
   display: flex;

sites/docs/lib/_sass/pages/_cuj-index.scss

@@ -0,0 +1,136 @@
+@use '../components/filterable-index';
+
+$font-size-sm: 0.875rem;
+$font-size-xl: 1.5rem;
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$transition-normal: 0.2s ease;
+
+// The critical user journey index reuses the two column layout, search field,
+// and filter sidebar of the learning resources index, which are styled in
+// `_filterable-index.scss`.
+//
+// The journeys themselves render as full-width expandable cards, following
+// the glossary in `_glossary.scss`. Expanding and collapsing is wired up
+// by the `_setUpExpandableCards` global script.
+
+// The feedback button is the sidebar footer, so it sits below the filter card
+// and slides in with it when the sidebar becomes a drawer.
+.cuj-feedback {
+  margin-block-start: $spacing-md;
+
+  .outlined-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  @media (max-width: filterable-index.$mobile-breakpoint) {
+    margin-block-start: 0;
+    padding: 0.75rem;
+    border-block-start: 1px solid var(--site-inset-borderColor);
+  }
+}
+
+#all-cujs-list {
+  margin-block-start: $spacing-md;
+
+  .cuj-card {
+    padding: 0.75rem $spacing-md;
+    gap: $spacing-xs;
+
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: $spacing-sm;
+    }
+
+    .cuj-card-heading {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.4rem;
+      // Allow long goals to wrap instead of widening the flex item.
+      min-width: 0;
+    }
+
+    .card-title {
+      display: block;
+      margin: 0;
+      font-family: var(--site-ui-fontFamily);
+      font-size: 1.1rem;
+      font-weight: 500;
+      line-height: 1.35;
+      text-wrap: pretty;
+    }
+
+    .card-header-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: $spacing-xs;
+      flex-shrink: 0;
+
+      .icon-button {
+        border-radius: $spacing-lg;
+
+        > span {
+          font-size: $font-size-xl;
+        }
+      }
+    }
+
+    .cuj-task-count {
+      margin: 0;
+      font-size: $font-size-sm;
+      color: var(--site-base-fgColor-lighter);
+    }
+
+    // The shared card styles lay `.card-content` out as a centered row.
+    // Journeys need a plain block so the task list stacks below the divider.
+    .card-content {
+      display: block;
+      border-block-start: 0.05rem solid var(--site-inset-borderColor);
+      margin-block-start: $spacing-sm;
+      padding-block-start: $spacing-sm;
+    }
+
+    &.collapsed {
+      .card-content {
+        display: none;
+      }
+
+      .expand-button {
+        transform: rotate(180deg);
+      }
+    }
+
+    .expand-button {
+      transition: transform $transition-normal;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    .cuj-task-list {
+      margin: 0;
+      padding-inline-start: 1.15rem;
+
+      li {
+        padding-inline-start: 0;
+        margin-block-end: $spacing-sm;
+        font-size: $font-size-sm;
+        line-height: 1.45;
+        color: var(--site-base-fgColor-lighter);
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+    }
+  }
+}

sites/docs/lib/main.client.options.dart

@@ -12,6 +12,10 @@ import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.d
     deferred as _os_selector;
 import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
     deferred as _pagenav;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj/cuj_filters.dart'
+    deferred as _cuj_filters;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj/cuj_filters_sidebar.dart'
+    deferred as _cuj_filters_sidebar;
 import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     deferred as _archive_table;
 import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
@@ -96,6 +100,14 @@ ClientOptions get defaultClientOptions => ClientOptions(
       ),
       loader: _archive_table.loadLibrary,
     ),
+    'cuj_filters': ClientLoader(
+      (p) => _cuj_filters.CujFilters(),
+      loader: _cuj_filters.loadLibrary,
+    ),
+    'cuj_filters_sidebar': ClientLoader(
+      (p) => _cuj_filters_sidebar.CujFiltersSidebar(),
+      loader: _cuj_filters_sidebar.loadLibrary,
+    ),
     'glossary_search_section': ClientLoader(
       (p) => _glossary_search_section.GlossarySearchSection(),
       loader: _glossary_search_section.loadLibrary,

sites/docs/lib/main.server.dart

@@ -27,6 +27,7 @@ import 'src/components/common/code_preview.dart';
 import 'src/components/common/dash_image.dart';
 import 'src/components/pages/architecture_recommendations.dart';
 import 'src/components/pages/archive_table.dart';
+import 'src/components/pages/cuj/cuj_index.dart';
 import 'src/components/pages/devtools_release_notes_index.dart';
 import 'src/components/pages/expansion_list.dart';
 import 'src/components/pages/learning_resource_index.dart';
@@ -116,6 +117,7 @@ List<CustomComponent> get _embeddableComponents => [
   defineComponent('OSSelector', const OsSelector()),
   defineComponentWithChild('Card', Card.fromAttributes),
   defineComponent('LearningResourceIndex', const LearningResourceIndex()),
+  defineComponent('CujIndex', const CujIndex()),
   defineComponentWithAttrs('ArchiveTable', ArchiveTable.fromAttributes),
   defineComponentWithAttrs(
     'DownloadLatestButton',

sites/docs/lib/main.server.options.dart

@@ -11,6 +11,10 @@ import 'package:docs_flutter_dev_site/src/components/common/client/os_selector.d
     as _os_selector;
 import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
     as _pagenav;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj/cuj_filters.dart'
+    as _cuj_filters;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj/cuj_filters_sidebar.dart'
+    as _cuj_filters_sidebar;
 import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     as _archive_table;
 import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
@@ -80,6 +84,13 @@ ServerOptions get defaultServerOptions => ServerOptions(
       'archive_table',
       params: __archive_tableArchiveTable,
     ),
+    _cuj_filters.CujFilters: ClientTarget<_cuj_filters.CujFilters>(
+      'cuj_filters',
+    ),
+    _cuj_filters_sidebar.CujFiltersSidebar:
+        ClientTarget<_cuj_filters_sidebar.CujFiltersSidebar>(
+          'cuj_filters_sidebar',
+        ),
     _glossary_search_section.GlossarySearchSection:
         ClientTarget<_glossary_search_section.GlossarySearchSection>(
           'glossary_search_section',

sites/docs/lib/src/components/pages/cuj/cuj_filters.dart

@@ -0,0 +1,138 @@
+// Copyright 2026 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/button.dart';
+import 'package:universal_web/web.dart' as web;
+
+import '../../../models/cuj_model.dart';
+import '../filterable_index.dart';
+import 'cuj_filters_sidebar.dart';
+
+/// The id of the search field, so its result count can label it.
+const _searchId = 'cuj-search';
+
+/// The search controls and result summary for the critical user journey index.
+@client
+class CujFilters extends StatefulComponent {
+  const CujFilters({super.key});
+
+  /// The ID of the checkbox that toggles the filter drawer on narrow screens.
+  static const String drawerToggleId = 'cuj-filter-toggle';
+
+  @override
+  State<CujFilters> createState() => _CujFiltersState();
+}
+
+class _CujFiltersState extends State<CujFilters> {
+  /// The filters selected in the critical user journey sidebar.
+  static CujFiltersNotifier get _filters => CujFiltersSidebar.filters;
+
+  /// The journeys reconstructed from the rendered journey cards.
+  final List<Cuj> _cujs = [];
+
+  /// The current search query.
+  String _searchQuery = '';
+
+  /// The number of journeys matching the active search and filters.
+  int _filteredCujCount = 0;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (kIsWeb) {
+      _filters.addListener(_setFilters);
+
+      final cujList = web.document.getElementById('all-cujs-list');
+      if (cujList == null) {
+        return;
+      }
+
+      _recreateCujs(cujList.querySelectorAll('.cuj-card'));
+    }
+  }
+
+  /// Populates [_cujs] from [cujCards].
+  void _recreateCujs(web.NodeList cujCards) {
+    for (var i = 0; i < cujCards.length; i++) {
+      final element = cujCards.item(i) as web.Element;
+      _cujs.add(Cuj.fromElement(element));
+    }
+    _filteredCujCount = _cujs.length;
+  }
+
+  /// Updates the filter state and re-evaluates which journeys to show.
+  ///
+  /// Use like the `setState` method by passing a callback that updates
+  /// the relevant state variables.
+  void _setFilters([void Function()? callback]) {
+    setState(callback ?? () {});
+
+    final cujsToShow = _filters.filterCujs(_cujs, _searchQuery);
+    _filteredCujCount = cujsToShow.length;
+    for (final cuj in _cujs) {
+      final element =
+          web.document.getElementById(cuj.elementId) as web.HTMLElement?;
+      if (element == null) {
+        continue;
+      }
+
+      if (cujsToShow.contains(cuj)) {
+        element.classList.remove('hidden');
+      } else {
+        element.classList.add('hidden');
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    if (kIsWeb) {
+      _filters.removeListener(_setFilters);
+    }
+    super.dispose();
+  }
+
+  @override
+  Component build(BuildContext context) {
+    return FilterSearchGroup(
+      drawerToggleId: CujFilters.drawerToggleId,
+      searchId: _searchId,
+      placeholder: 'Try "testing" or "architecture"...',
+      label: 'Search critical user journeys by goal, persona, and task',
+      value: _searchQuery,
+      onInput: (value) {
+        _setFilters(() {
+          _searchQuery = value;
+        });
+      },
+      children: [
+        div(classes: 'label-row', [
+          label(
+            attributes: {'for': _searchId, 'aria-live': 'polite'},
+            [
+              const .text('Showing '),
+              span([.text('$_filteredCujCount')]),
+              const .text(' / '),
+              span([.text('${_cujs.length}')]),
+            ],
+          ),
+          Button(
+            icon: 'close_small',
+            content: 'Clear filters',
+            size: ButtonSize.compact,
+            disabled: _searchQuery.isEmpty && !_filters.hasSelectedPersonas,
+            onClick: () {
+              // No setState needed, since resetting filters will trigger it.
+              _searchQuery = '';
+              _filters.reset();
+            },
+          ),
+        ]),
+      ],
+    );
+  }
+}