kasy-cli 1.38.0 → 1.39.0

package/templates/firebase/lib/features/settings/ui/components/admin/send_push_notification_page.dart

@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_drop_down.dart';
 import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/components/kasy_text_area.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
+import 'package:kasy_kit/core/config/features.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/toast/toast_service.dart';
 import 'package:kasy_kit/core/widgets/kasy_scroll_behavior.dart';
@@ -12,6 +14,18 @@ import 'package:kasy_kit/features/settings/ui/components/admin/send_push_notifie
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
+/// Same canonical pattern the auth `Email` value object validates against — an
+/// address must be well-formed before it can join the recipient list.
+final RegExp _emailPattern = RegExp(
+  r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$',
+);
+
+bool _isValidEmail(String value) => _emailPattern.hasMatch(value.trim());
+
+/// Default push destination: the in-app notifications list. Mirrors the
+/// fallback in `Notification.onTap` (no route sent → `/notifications`).
+const String _defaultRoute = '/notifications';
+
 class SendPushNotificationPage extends ConsumerStatefulWidget {
   const SendPushNotificationPage({super.key});
 
@@ -25,7 +39,6 @@ class _SendPushNotificationPageState
   final _titleCtrl = TextEditingController();
   final _bodyCtrl = TextEditingController();
   final _imageCtrl = TextEditingController();
-  final _routeCtrl = TextEditingController();
   final _emailCtrl = TextEditingController();
 
   // Explicit FocusNodes for all fields keeps the keyboard open when switching.
@@ -33,12 +46,16 @@ class _SendPushNotificationPageState
   final _titleFocus = FocusNode();
   final _bodyFocus = FocusNode();
   final _imageFocus = FocusNode();
-  final _routeFocus = FocusNode();
 
   bool _sendToAll = false;
   final List<String> _emails = [];
   String _appName = '';
 
+  /// Page the app opens when the user taps the notification. Defaults to the
+  /// notifications list (the same fallback `Notification.onTap` uses when no
+  /// route is sent), and the admin can repoint it to any available page.
+  String _route = _defaultRoute;
+
   @override
   void initState() {
     super.initState();
@@ -52,21 +69,26 @@ class _SendPushNotificationPageState
     _titleCtrl.dispose();
     _bodyCtrl.dispose();
     _imageCtrl.dispose();
-    _routeCtrl.dispose();
     _emailCtrl.dispose();
     _emailFocus.dispose();
     _titleFocus.dispose();
     _bodyFocus.dispose();
     _imageFocus.dispose();
-    _routeFocus.dispose();
     super.dispose();
   }
 
-  void _addEmail() {
+  /// The "add" button stays disabled until the field holds a well-formed,
+  /// not-yet-listed e-mail — so it never adds blanks, malformed strings, or
+  /// duplicates (the Enter key shares this guard via [_addEmail]).
+  bool get _canAddEmail {
     final email = _emailCtrl.text.trim();
-    if (email.isEmpty || _emails.contains(email)) return;
+    return _isValidEmail(email) && !_emails.contains(email);
+  }
+
+  void _addEmail() {
+    if (!_canAddEmail) return;
     setState(() {
-      _emails.add(email);
+      _emails.add(_emailCtrl.text.trim());
       _emailCtrl.clear();
     });
     _emailFocus.requestFocus();
@@ -83,11 +105,11 @@ class _SendPushNotificationPageState
     _titleCtrl.clear();
     _bodyCtrl.clear();
     _imageCtrl.clear();
-    _routeCtrl.clear();
     _emailCtrl.clear();
     setState(() {
       _emails.clear();
       _sendToAll = false;
+      _route = _defaultRoute;
     });
   }
 
@@ -118,9 +140,7 @@ class _SendPushNotificationPageState
               : _imageCtrl.text.trim(),
           emails: List.from(_emails),
           sendToAll: _sendToAll,
-          route: _routeCtrl.text.trim().isEmpty
-              ? null
-              : _routeCtrl.text.trim(),
+          route: _route,
         );
   }
 
@@ -186,6 +206,9 @@ class _SendPushNotificationPageState
             focusNode: _emailFocus,
             onAdd: _addEmail,
             onRemove: _removeEmail,
+            // Rebuild as the admin types so the add button enables/disables live.
+            onChanged: () => setState(() {}),
+            canAdd: _canAddEmail,
             label: tr.send_push_email_label,
             hint: tr.send_push_email_hint,
           ),
@@ -202,6 +225,9 @@ class _SendPushNotificationPageState
           focusNode: _titleFocus,
           maxLength: 64,
           showRequiredIndicator: true,
+          // Secondary fill contrasts against the surface-colored section card —
+          // the primary (surface) fill would blend white-on-white.
+          variant: KasyTextFieldVariant.secondary,
           textInputAction: TextInputAction.next,
           onChanged: (_) => setState(() {}),
           onEditingComplete: () => _bodyFocus.requestFocus(),
@@ -214,6 +240,7 @@ class _SendPushNotificationPageState
           focusNode: _bodyFocus,
           maxLength: 250,
           showRequiredIndicator: true,
+          variant: KasyTextFieldVariant.secondary,
           minLines: 3,
           maxLines: 5,
           onChanged: (_) => setState(() {}),
@@ -224,20 +251,50 @@ class _SendPushNotificationPageState
           hint: tr.send_push_image_hint,
           controller: _imageCtrl,
           focusNode: _imageFocus,
+          variant: KasyTextFieldVariant.secondary,
           onChanged: (_) => setState(() {}),
-          textInputAction: TextInputAction.next,
-          onEditingComplete: () => _routeFocus.requestFocus(),
+          // Last text input on the form — close the keyboard on submit.
+          textInputAction: TextInputAction.done,
+          onEditingComplete: () => _imageFocus.unfocus(),
         ),
       ],
     );
 
-    final Widget advancedFields = KasyTextField(
+    // Pick the landing page from the routes this build actually ships (the
+    // optional ones are feature-flagged, exactly like the router), instead of
+    // typing a raw path. Leaving the default sends the user to /notifications.
+    final Widget advancedFields = KasyDropDown<String>(
       label: tr.send_push_route_label,
-      hint: tr.send_push_route_hint,
-      controller: _routeCtrl,
-      focusNode: _routeFocus,
-      textInputAction: TextInputAction.done,
-      onEditingComplete: () => _routeFocus.unfocus(),
+      description: tr.send_push_route_description,
+      value: _route,
+      variant: KasyTextFieldVariant.secondary,
+      onChanged: (route) => setState(() => _route = route),
+      items: <KasyDropDownItem<String>>[
+        KasyDropDownItem(
+          value: '/notifications',
+          label: tr.send_push_route_notifications,
+        ),
+        KasyDropDownItem(value: '/', label: tr.send_push_route_home),
+        KasyDropDownItem(
+          value: '/settings',
+          label: tr.send_push_route_settings,
+        ),
+        if (withRevenuecat)
+          KasyDropDownItem(
+            value: '/premium',
+            label: tr.send_push_route_premium,
+          ),
+        if (withLocalReminders)
+          KasyDropDownItem(
+            value: '/reminder',
+            label: tr.send_push_route_reminder,
+          ),
+        if (withFeedback)
+          KasyDropDownItem(
+            value: '/feedback',
+            label: tr.send_push_route_feedback,
+          ),
+      ],
     );
 
     final Widget formColumn = Column(
@@ -337,25 +394,84 @@ class _SendPushNotificationPageState
                   ),
                 ),
               )
-            : scroll(
-                padding: EdgeInsets.fromLTRB(
-                  gutter,
-                  KasySpacing.belowChromeContentGap,
-                  gutter,
-                  bottomInset,
-                ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    previewPanel,
-                    const SizedBox(height: KasySpacing.lg),
-                    formColumn,
-                  ],
-                ),
+            : Stack(
+                children: [
+                  // The form scrolls; the live preview stays PINNED at the top so
+                  // the admin watches the notification update while filling the
+                  // fields. An invisible copy of the preview at the head of the
+                  // scroll reserves exactly its height, so the first section
+                  // starts just below the banner and slides BEHIND it on scroll.
+                  Positioned.fill(
+                    child: scroll(
+                      padding: EdgeInsets.fromLTRB(
+                        gutter,
+                        KasySpacing.belowChromeContentGap,
+                        gutter,
+                        bottomInset,
+                      ),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
+                        children: [
+                          Visibility(
+                            visible: false,
+                            maintainSize: true,
+                            maintainAnimation: true,
+                            maintainState: true,
+                            child: previewPanel,
+                          ),
+                          const SizedBox(height: KasySpacing.lg),
+                          formColumn,
+                        ],
+                      ),
+                    ),
+                  ),
+                  // Pinned banner: an opaque page-colored band (so the scrolling
+                  // form disappears behind it) with a short fade at its bottom
+                  // edge. IgnorePointer lets drags over the preview still scroll
+                  // the form — the preview itself has no interaction.
+                  Positioned(
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    child: IgnorePointer(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Container(
+                            color: context.colors.background,
+                            padding: const EdgeInsets.fromLTRB(
+                              gutter,
+                              KasySpacing.belowChromeContentGap,
+                              gutter,
+                              0,
+                            ),
+                            child: previewPanel,
+                          ),
+                          Container(
+                            height: KasySpacing.md,
+                            decoration: BoxDecoration(
+                              gradient: LinearGradient(
+                                begin: Alignment.topCenter,
+                                end: Alignment.bottomCenter,
+                                colors: [
+                                  context.colors.background,
+                                  context.colors.background.withValues(alpha: 0),
+                                ],
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
               );
 
         return ScrollConfiguration(
-          behavior: const KasyKitScrollBehavior(),
+          // Hide the scrollbar: on the two-column layout it lands between the
+          // form and the live preview and reads as a stray mark next to the
+          // cards. The form is short enough not to need it.
+          behavior: const KasyKitScrollBehavior().copyWith(scrollbars: false),
           child: bodyContent,
         );
       },
@@ -416,6 +532,8 @@ class _EmailsSection extends StatelessWidget {
   final FocusNode focusNode;
   final VoidCallback onAdd;
   final void Function(String) onRemove;
+  final VoidCallback onChanged;
+  final bool canAdd;
   final String label;
   final String hint;
 
@@ -425,6 +543,8 @@ class _EmailsSection extends StatelessWidget {
     required this.focusNode,
     required this.onAdd,
     required this.onRemove,
+    required this.onChanged,
+    required this.canAdd,
     required this.label,
     required this.hint,
   });
@@ -444,6 +564,9 @@ class _EmailsSection extends StatelessWidget {
                 controller: controller,
                 focusNode: focusNode,
                 showRequiredIndicator: true,
+                variant: KasyTextFieldVariant.secondary,
+                contentType: KasyTextFieldContentType.email,
+                onChanged: (_) => onChanged(),
                 // "next" keeps keyboard open when pressing the action key.
                 textInputAction: TextInputAction.next,
                 onEditingComplete: onAdd,
@@ -453,10 +576,12 @@ class _EmailsSection extends StatelessWidget {
             Padding(
               padding: const EdgeInsets.only(bottom: 2),
               child: KasyButton.iconOnly(
-                icon: Icons.add,
-                onPressed: onAdd,
+                icon: Icons.add_rounded,
+                // Disabled (greyed, non-tappable) until the field holds a valid,
+                // non-duplicate e-mail.
+                onPressed: canAdd ? onAdd : null,
                 size: KasyButtonSize.small,
-                variant: KasyButtonVariant.soft,
+                iconGlyphSize: 20,
               ),
             ),
           ],
@@ -489,11 +614,16 @@ class _EmailChip extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    // An e-mail is plain data the admin listed, not an action or a status — so
+    // it reads as a neutral pill (clean, color used in moderation), not an
+    // accent-blue tag. surfaceSecondary contrasts against the section card's
+    // surface in both modes; the text uses the normal foreground tone.
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
-        color: context.colors.primary.withValues(alpha: 0.10),
+        color: context.colors.surfaceSecondary,
         borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: context.colors.border),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
@@ -501,7 +631,7 @@ class _EmailChip extends StatelessWidget {
           Text(
             email,
             style: context.textTheme.bodySmall?.copyWith(
-              color: context.colors.primary,
+              color: context.colors.onSurface,
               fontWeight: FontWeight.w500,
             ),
           ),
@@ -511,7 +641,7 @@ class _EmailChip extends StatelessWidget {
             child: Icon(
               Icons.close,
               size: 13,
-              color: context.colors.primary.withValues(alpha: 0.7),
+              color: context.colors.muted,
             ),
           ),
         ],

package/templates/firebase/lib/features/settings/ui/components/avatar_component.dart

@@ -67,7 +67,7 @@ class _EditableUserAvatarState extends ConsumerState<EditableUserAvatar> {
     return KasyFocusRing(
       enabled: onTapAvatar != null,
       onActivate: onTapAvatar,
-      borderRadius: BorderRadius.circular(999),
+      borderRadius: BorderRadius.circular(KasyRadius.full),
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
         onTap: onTapAvatar,

package/templates/firebase/lib/features/settings/ui/components/delete_user_component.dart

@@ -4,6 +4,7 @@ import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
+import 'package:kasy_kit/router.dart';
 
 class DeleteUserButton extends ConsumerWidget {
   const DeleteUserButton({super.key});
@@ -40,7 +41,14 @@ class DeleteUserButton extends ConsumerWidget {
             }
           }
         },
-        );
+        ).whenComplete(() {
+          // Same pageless-dialog issue as logout: on success deleteAccount flips
+          // the state to anonymous while this confirm dialog still sits on the
+          // root navigator, so the redirect to /signin can't land. Re-run it
+          // once the dialog has popped. Harmless when the user cancels or the
+          // deletion failed (still authenticated → redirect keeps them here).
+          if (context.mounted) ref.read(goRouterProvider).refresh();
+        });
       },
     );
   }

package/templates/firebase/lib/features/settings/ui/components/language_switcher.dart

@@ -6,7 +6,6 @@ import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_mywidget_service.dart';
 import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/app_locale_display.dart';
@@ -20,41 +19,41 @@ class LanguageSwitcher extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final AppLocale current = TranslationProvider.of(context).locale;
-    return KasyFocusRing(
-      onActivate: () => _showLanguagePicker(context, ref, current),
-      borderRadius: KasyRadius.smBorderRadius,
-      child: InkWell(
-        canRequestFocus: false,
-        onTap: () => _showLanguagePicker(context, ref, current),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-          child: Row(
-            children: <Widget>[
-              Icon(
-                KasyIcons.language,
-                size: KasyIconSize.rowLeading,
+    return KasyHover(
+      onTap: () => _showLanguagePicker(context, ref, current),
+      focusable: true,
+      // Rectangular highlight (KasyHover default): this row lives inside a card,
+      // whose rounded corners clip the ends — a rounded fill here would float.
+      semanticLabel: context.t.settings.language_title,
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
+      child: Row(
+        children: <Widget>[
+          Icon(
+            KasyIcons.language,
+            size: KasyIconSize.rowLeading,
+            color: context.colors.onSurface,
+          ),
+          const SizedBox(width: KasySpacing.sm),
+          Expanded(
+            child: Text(
+              context.t.settings.language_title,
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.onSurface,
               ),
-              const SizedBox(width: KasySpacing.sm),
-              Expanded(
-                child: Text(
-                  context.t.settings.language_title,
-                  style: context.textTheme.titleSmall?.copyWith(
-                    color: context.colors.onSurface,
-                  ),
-                ),
-              ),
-              Text(
-                current.nativeName,
-                style: context.textTheme.bodyMedium?.copyWith(
-                  color: context.colors.muted,
-                ),
-              ),
-              const SizedBox(width: KasySpacing.xs),
-              const SettingsListChevron(),
-            ],
+            ),
           ),
-        ),
+          Text(
+            current.nativeName,
+            style: context.kasyTextTheme.listRowValue.copyWith(
+              color: context.colors.muted,
+            ),
+          ),
+          const SizedBox(width: KasySpacing.xs),
+          const SettingsListChevron(),
+        ],
       ),
     );
   }
@@ -69,21 +68,22 @@ class LanguageSwitcher extends ConsumerWidget {
       context: context,
       builder: (sheetContext) => KasySheetSurface(
         child: Padding(
-          padding: const EdgeInsets.fromLTRB(
-            KasySpacing.md,
-            KasySpacing.sm,
-            KasySpacing.md,
-            KasySpacing.sm,
-          ),
+          // No horizontal padding: option rows go full-bleed so the highlight
+          // spans the whole sheet (no inset pill). Title and rows carry their
+          // own horizontal inset instead.
+          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              Align(
-                alignment: Alignment.centerLeft,
-                child: Text(
-                  sheetTitle,
-                  style: sheetContext.textTheme.titleMedium?.copyWith(
-                    color: sheetContext.colors.onSurface,
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+                child: Align(
+                  alignment: Alignment.centerLeft,
+                  child: Text(
+                    sheetTitle,
+                    style: sheetContext.textTheme.titleMedium?.copyWith(
+                      color: sheetContext.colors.onSurface,
+                    ),
                   ),
                 ),
               ),
@@ -147,9 +147,10 @@ class _LocaleOptionTile extends StatelessWidget {
     return KasyHover(
       onTap: onTap,
       focusable: true,
-      borderRadius: BorderRadius.circular(KasyRadius.sm),
+      // Full-bleed rectangular highlight (default radius): the sheet rounds its
+      // own corners, so options span edge-to-edge like a native menu/list.
       padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.xs,
+        horizontal: KasySpacing.md,
         vertical: KasySpacing.smd,
       ),
       child: Row(

package/templates/firebase/lib/features/settings/ui/widgets/settings_bottom_sheet_option_tile.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 
 /// Row used in settings modal bottom sheets (avatar source, language, etc.).
 class SettingsBottomSheetOptionTile extends StatelessWidget {
@@ -26,26 +27,28 @@ class SettingsBottomSheetOptionTile extends StatelessWidget {
     final TextStyle? labelStyle =
         context.textTheme.titleMedium?.copyWith(color: fg);
     final Text labelWidget = Text(label, style: labelStyle);
-    return InkWell(
+    return KasyHover(
       onTap: onTap,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.md,
-          vertical: KasySpacing.smd,
-        ),
-        child: Row(
-          children: <Widget>[
-            if (leading != null) ...<Widget>[
-              leading!,
-              const SizedBox(width: KasySpacing.sm),
-            ] else if (icon != null) ...<Widget>[
-              Icon(icon, size: KasyIconSize.lg, color: fg),
-              const SizedBox(width: KasySpacing.sm),
-            ],
-            Expanded(child: labelWidget),
-            if (trailing != null) trailing!,
+      focusable: true,
+      semanticLabel: label,
+      // Full-bleed rectangular highlight (default radius): these rows live in a
+      // bottom sheet whose rounded corners clip the ends, like a native menu.
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
+      child: Row(
+        children: <Widget>[
+          if (leading != null) ...<Widget>[
+            leading!,
+            const SizedBox(width: KasySpacing.sm),
+          ] else if (icon != null) ...<Widget>[
+            Icon(icon, size: KasyIconSize.lg, color: fg),
+            const SizedBox(width: KasySpacing.sm),
           ],
-        ),
+          Expanded(child: labelWidget),
+          if (trailing != null) trailing!,
+        ],
       ),
     );
   }

package/templates/firebase/lib/features/settings/ui/widgets/settings_tile.dart

@@ -26,7 +26,7 @@ class SettingsIconBadge extends StatelessWidget {
       height: size,
       decoration: BoxDecoration(
         color: color.withValues(alpha: 0.12),
-        borderRadius: BorderRadius.circular(8),
+        borderRadius: BorderRadius.circular(KasyRadius.sm),
       ),
       child: Icon(
         icon,
@@ -65,7 +65,17 @@ class SettingsDivider extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Divider(color: context.colors.onBackground.withValues(alpha: .06));
+    // Inset to align with the rows' content (which now carry the horizontal
+    // padding the card used to have), so the hairline doesn't touch the edges.
+    return Divider(
+      // Hairline only — no extra height — so rows sit close together (iOS-style
+      // contiguous list) instead of floating apart with a 16px gap.
+      height: 1,
+      thickness: 1,
+      color: context.colors.onBackground.withValues(alpha: .06),
+      indent: KasySpacing.md,
+      endIndent: KasySpacing.md,
+    );
   }
 }
 
@@ -91,7 +101,10 @@ class SettingsSwitchTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: Row(
         children: <Widget>[
           if (iconBackgroundColor != null)
@@ -110,7 +123,7 @@ class SettingsSwitchTile extends StatelessWidget {
               children: <Widget>[
                 Text(
                   title,
-                  style: context.textTheme.titleSmall?.copyWith(
+                  style: context.kasyTextTheme.listRowTitle.copyWith(
                     color: context.colors.onSurface,
                   ),
                 ),
@@ -165,12 +178,14 @@ class SettingsTile extends StatelessWidget {
   Widget build(BuildContext context) {
     return KasyHover(
       onTap: onTap,
-      hoverEnabled: false,
-      pressEnabled: false,
       focusable: true,
-      borderRadius: KasyRadius.smBorderRadius,
+      // Rectangular highlight (default): the card clips the rounded ends, so
+      // middle rows stay square instead of showing a floating rounded pill.
       semanticLabel: title,
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: Row(
         children: [
           if (iconBackgroundColor != null)
@@ -185,7 +200,7 @@ class SettingsTile extends StatelessWidget {
           Expanded(
             child: Text(
               title,
-              style: context.textTheme.titleSmall?.copyWith(
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.onSurface,
               ),
             ),
@@ -193,7 +208,7 @@ class SettingsTile extends StatelessWidget {
           if (trailingLabel != null) ...[
             Text(
               trailingLabel!,
-              style: context.textTheme.bodyMedium?.copyWith(
+              style: context.kasyTextTheme.listRowValue.copyWith(
                 color: context.colors.muted,
               ),
             ),