feat(trees): same Databases folder chrome (PG/MySQL/Mongo/Redis)

lib/features/connections/connection_databases_folder.dart

@@ -0,0 +1,189 @@
+import 'package:flutter/material.dart' as material;
+import 'package:flutter/services.dart'
+    show Clipboard, ClipboardData, LogicalKeyboardKey;
+import 'package:querya_desktop/core/storage/local_db.dart';
+import 'package:querya_desktop/core/ui/querya_icon_sizes.dart';
+import 'package:querya_desktop/core/ui/querya_icons.dart';
+import 'package:querya_desktop/core/ui/querya_tree_tokens.dart';
+import 'package:querya_desktop/shared/widgets/widgets.dart';
+
+/// Collapsible **Databases (N)** folder chrome for network drivers
+/// (PostgreSQL / MySQL / MongoDB / Redis).
+///
+/// Defaults to expanded; uses [QueryaMotion.treeExpand] for the chevron and
+/// [QueryaAnimatedExpand] for the child list.
+class ConnectionDatabasesFolder extends material.StatefulWidget {
+  const ConnectionDatabasesFolder({
+    super.key,
+    required this.connection,
+    required this.databaseCount,
+    required this.child,
+    this.onRefresh,
+    this.onOpenSql,
+    this.initiallyExpanded = true,
+  });
+
+  final ConnectionRow connection;
+  final int databaseCount;
+  final material.Widget child;
+  final material.VoidCallback? onRefresh;
+
+  /// Optional "Open in SQL" context action (PG / MySQL).
+  final material.VoidCallback? onOpenSql;
+
+  final bool initiallyExpanded;
+
+  @override
+  material.State<ConnectionDatabasesFolder> createState() =>
+      _ConnectionDatabasesFolderState();
+}
+
+class _ConnectionDatabasesFolderState
+    extends material.State<ConnectionDatabasesFolder> {
+  late bool _expanded = widget.initiallyExpanded;
+
+  @override
+  void didUpdateWidget(covariant ConnectionDatabasesFolder oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initiallyExpanded != widget.initiallyExpanded &&
+        oldWidget.databaseCount == 0 &&
+        widget.databaseCount > 0) {
+      _expanded = widget.initiallyExpanded;
+    }
+  }
+
+  void _toggle() => setState(() => _expanded = !_expanded);
+
+  @override
+  material.Widget build(material.BuildContext context) {
+    final theme = Theme.of(context);
+    final primary = theme.colorScheme.primary;
+    final muted = theme.colorScheme.mutedForeground;
+    final label = 'Databases (${widget.databaseCount})';
+
+    final row = material.CallbackShortcuts(
+      bindings: {
+        if (!_expanded)
+          const material.SingleActivator(LogicalKeyboardKey.arrowRight): _toggle,
+        if (_expanded)
+          const material.SingleActivator(LogicalKeyboardKey.arrowLeft): _toggle,
+      },
+      child: material.AnimatedContainer(
+        duration: context.motionDuration(QueryaMotion.fast),
+        curve: context.motionCurve(QueryaMotion.standardCurve),
+        decoration: material.BoxDecoration(
+          color: material.Colors.transparent,
+          borderRadius: material.BorderRadius.circular(4),
+        ),
+        child: material.Material(
+          color: material.Colors.transparent,
+          child: material.InkWell(
+            onTap: _toggle,
+            borderRadius: material.BorderRadius.circular(4),
+            hoverColor: primary.withValues(alpha: 0.07),
+            focusColor: primary.withValues(alpha: 0.14),
+            splashColor: primary.withValues(alpha: 0.10),
+            highlightColor: primary.withValues(alpha: 0.05),
+            child: material.Padding(
+              padding: const material.EdgeInsets.symmetric(
+                horizontal: 4,
+                vertical: 4,
+              ),
+              child: material.Row(
+                children: [
+                  material.AnimatedRotation(
+                    turns: _expanded ? 0.25 : 0,
+                    duration: context.motionDuration(QueryaMotion.treeExpand),
+                    curve: context.motionCurve(QueryaMotion.treeExpandCurve),
+                    child: material.Icon(
+                      QueryaIcons.expandClosed,
+                      size: QueryaIconSizes.treeExpand,
+                      color: muted,
+                    ),
+                  ),
+                  const Gap(4),
+                  material.Icon(
+                    QueryaIcons.databasesFolder,
+                    size: QueryaIconSizes.treeConnection,
+                    color: primary.withValues(alpha: 0.7),
+                  ),
+                  const Gap(6),
+                  material.Expanded(
+                    child: material.Text(
+                      label,
+                      overflow: material.TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: material.TextStyle(
+                        fontSize: 12,
+                        color: theme.colorScheme.foreground,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final menu = ContextMenu(
+      items: [
+        if (widget.onRefresh != null)
+          MenuButton(
+            leading: material.Icon(
+              material.Icons.refresh_rounded,
+              size: 18,
+              color: muted,
+            ),
+            onPressed: (_) => widget.onRefresh!(),
+            child: const Text('Refresh'),
+          ),
+        MenuButton(
+          leading: material.Icon(
+            material.Icons.copy_rounded,
+            size: 18,
+            color: muted,
+          ),
+          onPressed: (_) {
+            Clipboard.setData(ClipboardData(text: label));
+          },
+          child: const Text('Copy name'),
+        ),
+        if (widget.onOpenSql != null)
+          MenuButton(
+            leading: material.Icon(
+              material.Icons.terminal_rounded,
+              size: 18,
+              color: muted,
+            ),
+            onPressed: (_) => widget.onOpenSql!(),
+            child: const Text('Open in SQL'),
+          ),
+      ],
+      child: row,
+    );
+
+    return material.Padding(
+      padding: const material.EdgeInsets.only(
+        left: QueryaTreeTokens.underConnection,
+      ),
+      child: material.Column(
+        crossAxisAlignment: material.CrossAxisAlignment.start,
+        mainAxisSize: material.MainAxisSize.min,
+        children: [
+          material.Semantics(
+            button: true,
+            expanded: _expanded,
+            label: label,
+            child: menu,
+          ),
+          QueryaAnimatedExpand(
+            expanded: _expanded,
+            child: widget.child,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/connections/connections_panel.dart

@@ -80,6 +80,7 @@ import 'package:querya_desktop/core/ui/querya_icons.dart';
 import 'package:querya_desktop/core/ui/querya_tooltip.dart';
 import 'package:querya_desktop/core/ui/querya_tree_tokens.dart';
 import 'package:querya_desktop/features/connections/connection_creation_flow.dart';
+import 'package:querya_desktop/features/connections/connection_databases_folder.dart';
 import 'package:querya_desktop/features/connections/driver_icon.dart';
 import 'package:querya_desktop/shared/widgets/widgets.dart';
 import 'package:querya_desktop/core/database/redis_service.dart';

lib/features/connections/connections_panel_mongo.dart

@@ -327,42 +327,23 @@ class _MongoDatabasesNode extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    return material.Padding(
-      padding: const material.EdgeInsets.only(left: QueryaTreeTokens.underConnection),
-      child: material.Column(
-        crossAxisAlignment: material.CrossAxisAlignment.start,
-        mainAxisSize: material.MainAxisSize.min,
-        children: [
-          _PgTreeRow(
-            label: 'Databases (${databases.length})',
-            icon: QueryaIcons.databasesFolder,
-            iconSize: QueryaIconSizes.treeConnection,
-            iconColor: theme.colorScheme.primary.withValues(alpha: 0.7),
-            textStyle: material.TextStyle(
-              fontSize: 12,
-              color: theme.colorScheme.foreground,
-            ),
-            verticalPadding: 4,
-            onTap: null,
+    return ConnectionDatabasesFolder(
+      connection: connection,
+      databaseCount: databases.length,
+      onRefresh: onRefreshDatabases,
+      child: lazyConnectionTreeList(
+        context: context,
+        itemCount: databases.length,
+        itemBuilder: (context, index) {
+          final db = databases[index];
+          return _MongoDatabaseNode(
             connection: connection,
-            onContextRefresh: onRefreshDatabases,
-          ),
-          lazyConnectionTreeList(
-            context: context,
-            itemCount: databases.length,
-            itemBuilder: (context, index) {
-              final db = databases[index];
-              return _MongoDatabaseNode(
-                connection: connection,
-                name: db,
-                onTap: () => onDatabaseTap?.call(db),
-                onDelete: () => onDeleteDatabase(db),
-                onRefreshDatabases: onRefreshDatabases,
-              );
-            },
-          ),
-        ],
+            name: db,
+            onTap: () => onDatabaseTap?.call(db),
+            onDelete: () => onDeleteDatabase(db),
+            onRefreshDatabases: onRefreshDatabases,
+          );
+        },
       ),
     );
   }

lib/features/connections/connections_panel_mysql.dart

@@ -295,46 +295,26 @@ class _MysqlDatabasesNode extends material.StatelessWidget {
 
   @override
   material.Widget build(material.BuildContext context) {
-    final theme = Theme.of(context);
-    return material.Padding(
-      padding: const material.EdgeInsets.only(left: QueryaTreeTokens.underConnection),
-      child: material.Column(
-        crossAxisAlignment: material.CrossAxisAlignment.start,
-        mainAxisSize: material.MainAxisSize.min,
-        children: [
-          _PgTreeRow(
-            label: 'Databases (${databases.length})',
-            icon: QueryaIcons.databasesFolder,
-            iconSize: QueryaIconSizes.treeConnection,
-            iconColor: theme.colorScheme.primary.withValues(alpha: 0.7),
-            textStyle: material.TextStyle(
-              fontSize: 12,
-              color: theme.colorScheme.foreground,
-            ),
-            verticalPadding: 4,
-            onTap: null,
+    return ConnectionDatabasesFolder(
+      connection: connection,
+      databaseCount: databases.length,
+      onRefresh: onRefreshDatabases,
+      onOpenSql: onMysqlOpenSqlWorkspace == null
+          ? null
+          : () => onMysqlOpenSqlWorkspace!(connection),
+      child: lazyConnectionTreeList(
+        context: context,
+        itemCount: databases.length,
+        itemBuilder: (context, index) {
+          final db = databases[index];
+          return _MysqlDatabaseNode(
+            key: material.ValueKey('mysql-db-${connection.id ?? 0}-$db'),
             connection: connection,
-            onContextRefresh: onRefreshDatabases,
-            onOpenSqlWorkspace: onMysqlOpenSqlWorkspace == null
-                ? null
-                : (c, {database, schema, name, kind}) =>
-                    onMysqlOpenSqlWorkspace!(c),
-          ),
-          lazyConnectionTreeList(
-            context: context,
-            itemCount: databases.length,
-            itemBuilder: (context, index) {
-              final db = databases[index];
-              return _MysqlDatabaseNode(
-                key: material.ValueKey('mysql-db-${connection.id ?? 0}-$db'),
-                connection: connection,
-                databaseName: db,
-                onMysqlObjectSelected: onMysqlObjectSelected,
-                onMysqlOpenSqlWorkspace: onMysqlOpenSqlWorkspace,
-              );
-            },
-          ),
-        ],
+            databaseName: db,
+            onMysqlObjectSelected: onMysqlObjectSelected,
+            onMysqlOpenSqlWorkspace: onMysqlOpenSqlWorkspace,
+          );
+        },
       ),
     );
   }