kasy-cli 1.38.0 → 1.39.0

package/templates/firebase/lib/features/home/home_components_page.dart

@@ -6,6 +6,7 @@ import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
 import 'package:kasy_kit/features/home/home_components_preview_registry.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
 
 /// UI-kit catalog, reachable from the home dashboard.
 ///
@@ -38,140 +39,267 @@ class HomeComponentsPage extends StatelessWidget {
 /// The UI-kit catalog list on its own (no app bar / scaffold), so it can be the
 /// body of [HomeComponentsPage] AND a section inside the admin console (which
 /// supplies its own chrome). Fills the space it is given.
-class HomeComponentsCatalog extends StatelessWidget {
+class HomeComponentsCatalog extends StatefulWidget {
   const HomeComponentsCatalog({super.key});
 
+  @override
+  State<HomeComponentsCatalog> createState() => _HomeComponentsCatalogState();
+}
+
+class _HomeComponentsCatalogState extends State<HomeComponentsCatalog> {
+  final TextEditingController _searchCtrl = TextEditingController();
+  String _query = '';
+
+  @override
+  void dispose() {
+    _searchCtrl.dispose();
+    super.dispose();
+  }
+
+  /// Reset the filter when leaving for a component, so coming back shows the
+  /// full catalog instead of the stale search term.
+  void _clearSearch() {
+    if (!mounted) return;
+    if (_query.isEmpty && _searchCtrl.text.isEmpty) return;
+    _searchCtrl.clear();
+    setState(() => _query = '');
+  }
+
   @override
   Widget build(BuildContext context) {
+    final String q = _query.trim().toLowerCase();
+    final List<_CatalogRow> rows = q.isEmpty
+        ? _kCatalog
+        : _kCatalog
+            .where((r) => r.name.toLowerCase().contains(q))
+            .toList(growable: false);
+
     return Padding(
-              padding: EdgeInsets.fromLTRB(
-                KasySpacing.pageHorizontalGutter,
-                KasySpacing.belowChromeContentGap,
-                KasySpacing.pageHorizontalGutter,
-                MediaQuery.paddingOf(context).bottom +
-                    KasySpacing.belowChromeContentGap,
-              ),
-              child: _componentsCatalogInset(
-                context,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: KasySpacing.xs,
-                  ),
-                  child: ScrollConfiguration(
-                    behavior: const KasyKitScrollBehavior(),
-                    child: ListView.separated(
-                      padding: EdgeInsets.zero,
-                      itemCount: _kCatalog.length + 1,
-                      separatorBuilder: (context, index) => Divider(
-                        height: 1,
-                        thickness: 1,
-                        indent: KasySpacing.md,
-                        endIndent: KasySpacing.md,
-                        color: context.colors.outline.withValues(alpha: 0.33),
+      padding: EdgeInsets.fromLTRB(
+        KasySpacing.pageHorizontalGutter,
+        KasySpacing.belowChromeContentGap,
+        KasySpacing.pageHorizontalGutter,
+        MediaQuery.paddingOf(context).bottom + KasySpacing.belowChromeContentGap,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _ComponentsSearchField(
+            controller: _searchCtrl,
+            onChanged: (v) => setState(() => _query = v),
+          ),
+          const SizedBox(height: KasySpacing.smd),
+          Expanded(
+            child: _componentsCatalogInset(
+              context,
+              child: rows.isEmpty
+                  ? const _ComponentsEmptyResults()
+                  : Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: KasySpacing.xs,
                       ),
-                      itemBuilder: (context, index) {
-                        if (index >= _kCatalog.length) {
-                          return const SizedBox(height: KasySpacing.sm);
-                        }
-                        final _CatalogRow row = _kCatalog[index];
-                        return KasyHover(
-                          hapticEnabled: false,
-                          onTap: () {
-                            KasyHaptics.selection(context);
-                            if (row.name == 'Design System') {
-                              context.push('/design-system');
-                              return;
-                            }
-                            // Skip rows without a preview yet (registry returns
-                            // null); otherwise open /components/:name, which the
-                            // router resolves back to this component's preview.
-                            if (getComponentPreviewDefinition(row.name) == null) {
-                              return;
-                            }
-                            context.push(
-                              '/components/${Uri.encodeComponent(row.name)}',
-                            );
-                          },
-                          child: Padding(
-                            padding: const EdgeInsets.symmetric(
-                              horizontal: KasySpacing.smd,
-                              vertical: 16,
-                            ),
-                            child: Row(
-                                children: [
-                                  Expanded(
-                                    child: Row(
-                                      children: [
-                                        Flexible(
-                                          child: Text(
-                                            row.name,
-                                            // Lighter weight (w500) to match the
-                                            // app's row/list scale instead of the
-                                            // heavier heading weight.
-                                            style: context.kasyTextTheme.rowTitle
-                                                .copyWith(
-                                              color:
-                                                  context.colors.onSurface,
-                                            ),
-                                          ),
-                                        ),
-                                        if (_kReadyComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.sm),
-                                          Text(
-                                            'Pronto',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.success,
-                                                  fontWeight: FontWeight.w600,
-                                                ),
-                                          ),
-                                        ],
-                                        if (_kWebReadyComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.xs),
-                                          Text(
-                                            'Web',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.primary,
-                                                  fontWeight: FontWeight.w600,
-                                                ),
-                                          ),
-                                        ],
-                                        if (_kUrgentComponents.contains(
-                                          row.name,
-                                        )) ...[
-                                          const SizedBox(width: KasySpacing.sm),
-                                          Text(
-                                            'Prioridade: Urgente',
-                                            style: context.textTheme.bodySmall
-                                                ?.copyWith(
-                                                  color: context.colors.warning,
-                                                  fontWeight: FontWeight.w700,
-                                                ),
-                                          ),
-                                        ],
-                                      ],
-                                    ),
-                                  ),
-                                  Icon(
-                                    KasyIcons.chevronRight,
-                                    color: context.colors.muted,
-                                    size: 22,
-                                  ),
-                                ],
+                      child: ScrollConfiguration(
+                        behavior: const KasyKitScrollBehavior(),
+                        child: ListView.separated(
+                          padding: EdgeInsets.zero,
+                          itemCount: rows.length + 1,
+                          separatorBuilder: (context, index) => Divider(
+                            height: 1,
+                            thickness: 1,
+                            indent: KasySpacing.md,
+                            endIndent: KasySpacing.md,
+                            color: context.colors.outline.withValues(
+                              alpha: 0.33,
                             ),
                           ),
-                        );
+                          itemBuilder: (context, index) {
+                            if (index >= rows.length) {
+                              return const SizedBox(height: KasySpacing.sm);
+                            }
+                            return _catalogRow(context, rows[index]);
+                          },
+                        ),
+                      ),
+                    ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 
-                      },
+  Widget _catalogRow(BuildContext context, _CatalogRow row) {
+    return KasyHover(
+      hapticEnabled: false,
+      onTap: () {
+        KasyHaptics.selection(context);
+        if (row.name == 'Design System') {
+          context.push('/design-system').whenComplete(_clearSearch);
+          return;
+        }
+        // Skip rows without a preview yet (registry returns null); otherwise
+        // open /components/:name, which the router resolves back to this
+        // component's preview.
+        if (getComponentPreviewDefinition(row.name) == null) {
+          return;
+        }
+        context
+            .push('/components/${Uri.encodeComponent(row.name)}')
+            .whenComplete(_clearSearch);
+      },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.smd,
+          vertical: 16,
+        ),
+        child: Row(
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  Flexible(
+                    child: Text(
+                      row.name,
+                      // Lighter weight (w500) to match the app's row/list scale
+                      // instead of the heavier heading weight.
+                      style: context.kasyTextTheme.rowTitle.copyWith(
+                        color: context.colors.onSurface,
+                      ),
                     ),
                   ),
-                ),
+                  if (_kReadyComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.sm),
+                    Text(
+                      'Pronto',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.success,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                  if (_kWebReadyComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.xs),
+                    Text(
+                      'Web',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                  ],
+                  if (_kUrgentComponents.contains(row.name)) ...[
+                    const SizedBox(width: KasySpacing.sm),
+                    Text(
+                      'Prioridade: Urgente',
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: context.colors.warning,
+                        fontWeight: FontWeight.w700,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+            Icon(
+              KasyIcons.chevronRight,
+              color: context.colors.muted,
+              size: 22,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Compact search field above the catalog — filters the list by component name.
+class _ComponentsSearchField extends StatelessWidget {
+  final TextEditingController controller;
+  final ValueChanged<String> onChanged;
+  const _ComponentsSearchField({
+    required this.controller,
+    required this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 40,
+      child: TextField(
+        controller: controller,
+        onChanged: onChanged,
+        style: context.textTheme.bodyMedium,
+        decoration: InputDecoration(
+          hintText: t.home.dashboard.search_hint,
+          hintStyle: context.textTheme.bodyMedium?.copyWith(
+            color: context.colors.muted,
+          ),
+          prefixIcon: Icon(
+            Icons.search_rounded,
+            size: 18,
+            color: context.colors.muted,
+          ),
+          prefixIconConstraints: const BoxConstraints(
+            minWidth: 40,
+            minHeight: 40,
+          ),
+          isDense: true,
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 12,
+            vertical: 10,
+          ),
+          filled: true,
+          fillColor: context.colors.surface,
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(color: context.colors.primary, width: 1.4),
+          ),
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(KasyRadius.sm),
+            borderSide: BorderSide(
+              color: context.colors.outline.withValues(alpha: 0.5),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Shown inside the catalog surface when a search matches nothing.
+class _ComponentsEmptyResults extends StatelessWidget {
+  const _ComponentsEmptyResults();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(KasySpacing.lg),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(
+              Icons.search_off_rounded,
+              size: 30,
+              color: context.colors.muted,
+            ),
+            const SizedBox(height: KasySpacing.sm),
+            Text(
+              t.home.dashboard.search_empty,
+              textAlign: TextAlign.center,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
               ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }
@@ -195,6 +323,7 @@ const Set<String> _kReadyComponents = <String>{
   'DatePicker',
   'Design System',
   'Dialog',
+  'DropDown',
   'Hover',
   'Tabs',
   'TextArea',
@@ -205,7 +334,6 @@ const Set<String> _kReadyComponents = <String>{
   'SwipeAction',
   'TextFieldOTP',
   'Toast',
-  'Web Header',
 };
 
 /// Components that have been adapted for web (cursor, hover, shadow, border).
@@ -222,6 +350,7 @@ const Set<String> _kWebReadyComponents = <String>{
   'DatePicker',
   'Design System',
   'Dialog',
+  'DropDown',
   'Hover',
   'Sidebar',
   'Skeleton',
@@ -231,7 +360,6 @@ const Set<String> _kWebReadyComponents = <String>{
   'TextField',
   'TextFieldOTP',
   'Toast',
-  'Web Header',
 };
 
 const Set<String> _kUrgentComponents = <String>{
@@ -254,6 +382,7 @@ const List<_CatalogRow> _kCatalog = [
   _CatalogRow('Checkbox'),
   _CatalogRow('DatePicker'),
   _CatalogRow('Dialog'),
+  _CatalogRow('DropDown'),
   _CatalogRow('Hover'),
   _CatalogRow('Sidebar'),
   _CatalogRow('Skeleton'),
@@ -263,7 +392,6 @@ const List<_CatalogRow> _kCatalog = [
   _CatalogRow('TextField'),
   _CatalogRow('TextFieldOTP'),
   _CatalogRow('Toast'),
-  _CatalogRow('Web Header'),
   // Prioridade: Urgente (_kUrgentComponents), A–Z
   _CatalogRow('Radio Group'),
   _CatalogRow('Switch'),