ui: own colour picker, card and slider; the last shadcn controls of settings (#1734)

lib/features/extensions/extension_stats_view.dart

@@ -314,7 +314,7 @@ class _ExtensionStatsViewState extends material.State<ExtensionStatsView>
 
   material.Widget _buildChip(
       QueryaUiColors cs, ({String label, String value, material.IconData icon}) chip) {
-    return Card(
+    return QueryaCard(
       padding: const material.EdgeInsets.symmetric(horizontal: 16, vertical: 12),
       child: material.Row(
         children: [
@@ -361,7 +361,7 @@ class _ExtensionStatsViewState extends material.State<ExtensionStatsView>
     final sorted = sizes.entries.toList()
       ..sort((a, b) => b.value.compareTo(a.value));
 
-    return Card(
+    return QueryaCard(
       padding: const material.EdgeInsets.all(20),
       child: material.Column(
         crossAxisAlignment: material.CrossAxisAlignment.start,
@@ -459,7 +459,7 @@ class _ExtensionStatsViewState extends material.State<ExtensionStatsView>
     final cs = context.colors;
     final extra = stats.extraMetrics.entries.toList();
 
-    return Card(
+    return QueryaCard(
       padding: const material.EdgeInsets.all(20),
       child: material.Column(
         crossAxisAlignment: material.CrossAxisAlignment.start,

lib/features/mongodb/mongo_aggregation_workspace.dart

@@ -569,7 +569,7 @@ class _StageCardState extends material.State<_StageCard> {
     final stage = widget.stage;
     final syntaxError = validateStage(stage);
 
-    return Card(
+    return QueryaCard(
       child: material.Padding(
         padding: const material.EdgeInsets.all(12),
         child: material.Column(

lib/features/mongodb/mongo_indexes_view.dart

@@ -339,7 +339,7 @@ class _IndexCard extends material.StatelessWidget {
   material.Widget build(material.BuildContext context) {
     final cs = context.colors;
 
-    return Card(
+    return QueryaCard(
       child: material.Padding(
         padding: const material.EdgeInsets.all(14),
         child: material.Row(

lib/features/settings/preferences_controls.dart

@@ -298,34 +298,36 @@ class _InterfaceScaleSliderState extends material.State<InterfaceScaleSlider> {
     return material.Row(
       children: [
         material.Expanded(
-          child: Slider(
-            value: SliderValue.single(
-              _sliderPosition(displayScale, fine: fine),
+          child: material.SliderTheme(
+            data: material.SliderTheme.of(context).copyWith(
+              activeTrackColor: cs.primary,
+              inactiveTrackColor: cs.muted,
+              thumbColor: cs.primary,
+              overlayColor: cs.primary.withValues(alpha: 0.12),
+              activeTickMarkColor: cs.primaryForeground.withValues(alpha: 0.5),
+              inactiveTickMarkColor: cs.mutedForeground.withValues(alpha: 0.5),
+              trackHeight: 4,
+            ),
+            child: material.Slider(
+              value: _sliderPosition(displayScale, fine: fine),
+              min: fine ? kMinUiScale : 0,
+              max: fine ? kMaxUiScale : (kUiScalePresets.length - 1).toDouble(),
+              divisions: fine ? _fineDivisions : kUiScalePresets.length - 1,
+              onChanged: (value) {
+                final next = _scaleFromSlider(value, fine: _shiftHeld);
+                setState(() => _dragScale = next);
+              },
+              onChangeEnd: (value) {
+                final next = _scaleFromSlider(value, fine: _shiftHeld);
+                setState(() => _dragScale = null);
+                unawaited(
+                  UiScaleController.instance.commitScale(
+                    next,
+                    fine: _shiftHeld,
+                  ),
+                );
+              },
             ),
-            min: fine ? kMinUiScale : 0,
-            max: fine ? kMaxUiScale : (kUiScalePresets.length - 1).toDouble(),
-            divisions: fine ? _fineDivisions : kUiScalePresets.length - 1,
-            hintValue: const SliderValue.single(kDefaultUiScale),
-            onChanged: (value) {
-              final next = _scaleFromSlider(
-                value.value,
-                fine: _shiftHeld,
-              );
-              setState(() => _dragScale = next);
-            },
-            onChangeEnd: (value) {
-              final next = _scaleFromSlider(
-                value.value,
-                fine: _shiftHeld,
-              );
-              setState(() => _dragScale = null);
-              unawaited(
-                UiScaleController.instance.commitScale(
-                  next,
-                  fine: _shiftHeld,
-                ),
-              );
-            },
           ),
         ),
         const material.SizedBox(width: 8),

lib/features/settings/theme_color_picker_dialog.dart

@@ -7,7 +7,7 @@ Future<Color?> showThemeColorPickerDialog({
   required material.BuildContext context,
   required Color initial,
 }) async {
-  var picked = ColorDerivative.fromColor(initial);
+  var picked = initial;
 
   return showAppDialog<Color>(
     context: context,
@@ -16,8 +16,8 @@ Future<Color?> showThemeColorPickerDialog({
         title: const material.Text('Pick color'),
         content: material.SizedBox(
           width: 320,
-          height: 360,
-          child: ColorPicker(
+          height: 300,
+          child: QueryaColorPicker(
             value: picked,
             onChanged: (value) => picked = value,
           ),
@@ -31,7 +31,7 @@ Future<Color?> showThemeColorPickerDialog({
           QueryaButton.primary(
             label: 'Apply',
             onPressed: () =>
-                material.Navigator.pop(dialogContext, picked.toColor()),
+                material.Navigator.pop(dialogContext, picked),
             size: QueryaControlSize.lg,
           ),
         ],

lib/shared/widgets/querya_card.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart' as material;
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
+
+/// A raised surface: the card colour, a hairline border, rounded corners
+/// (#1734, epic #1465). Replaces shadcn's `Card`.
+class QueryaCard extends material.StatelessWidget {
+  const QueryaCard({
+    super.key,
+    required this.child,
+    this.padding,
+    this.radius = 10,
+  });
+
+  final material.Widget child;
+
+  /// Inside the border; none by default (the child pads itself).
+  final material.EdgeInsetsGeometry? padding;
+  final double radius;
+
+  @override
+  material.Widget build(material.BuildContext context) {
+    final cs = context.colors;
+    return material.Container(
+      padding: padding,
+      decoration: material.BoxDecoration(
+        color: cs.card,
+        borderRadius: material.BorderRadius.circular(radius),
+        border: material.Border.all(color: cs.border.withValues(alpha: 0.7)),
+      ),
+      child: child,
+    );
+  }
+}