kasy-cli 1.38.0 → 1.39.0

package/templates/firebase/lib/features/onboarding/ui/widgets/selectable_row_tile.dart

@@ -73,22 +73,10 @@ class _OnboardingSelectableRowGroupState
         return Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            KasyFocusRing(
-              onActivate: selectRow,
+            _SelectableTileInk(
+              onTap: selectRow,
               borderRadius: KasyRadius.lgBorderRadius,
-              child: Material(
-                color: Colors.transparent,
-                borderRadius: KasyRadius.lgBorderRadius,
-                child: InkWell(
-                  canRequestFocus: false,
-                  borderRadius: KasyRadius.lgBorderRadius,
-                  onTap: selectRow,
-                  child: switch (hasOnSelectInfo && _selectedIndex == index) {
-                    false => widget.options[index],
-                    true => widget.options[index],
-                  },
-                ),
-              ),
+              child: widget.options[index],
             ),
             if (hasOnSelectInfo && _selectedIndex == index)
               Padding(
@@ -150,23 +138,16 @@ class _OnboardingMultiSelectableRowGroupState
           setState(() {});
         }
 
-        return KasyFocusRing(
-          onActivate: toggleSelection,
-          borderRadius: KasyRadius.mdBorderRadius,
-          child: Material(
-            color: Colors.transparent,
-            borderRadius: KasyRadius.mdBorderRadius,
-            child: InkWell(
-              canRequestFocus: false,
-              splashColor: context.colors.primary.withValues(alpha: .1),
-              onTap: toggleSelection,
-              child: SelectableRowTile(
-                title: option.title,
-                subtitle: option.subtitle,
-                selected: _selectedIndex.contains(index),
-                emoj: option.emoj,
-              ),
-            ),
+        return _SelectableTileInk(
+          onTap: toggleSelection,
+          // Match the tile's own lgBorderRadius so the hover veil and focus ring
+          // hug its shape (the old InkWell clipped at md, a mismatch).
+          borderRadius: KasyRadius.lgBorderRadius,
+          child: SelectableRowTile(
+            title: option.title,
+            subtitle: option.subtitle,
+            selected: _selectedIndex.contains(index),
+            emoj: option.emoj,
           ),
         );
       }).toList(),
@@ -338,6 +319,83 @@ class _SelectableRowTileState extends State<SelectableRowTile>
   }
 }
 
+/// Adds a web hover highlight, a keyboard focus ring and a click cursor on top
+/// of an opaque selectable tile — no Material ripple.
+///
+/// Because the tile paints its own background, the hover veil is layered ABOVE
+/// the child (clipped to [borderRadius]), the same approach the tappable
+/// [KasyCard] uses; a [KasyHover]-style overlay would sit behind the opaque
+/// surface and never show. The child keeps its own semantics (the option title),
+/// so screen readers still announce the option, not a generic label.
+class _SelectableTileInk extends StatefulWidget {
+  const _SelectableTileInk({
+    required this.onTap,
+    required this.borderRadius,
+    required this.child,
+  });
+
+  final VoidCallback onTap;
+  final BorderRadius borderRadius;
+  final Widget child;
+
+  @override
+  State<_SelectableTileInk> createState() => _SelectableTileInkState();
+}
+
+class _SelectableTileInkState extends State<_SelectableTileInk> {
+  bool _hovered = false;
+  bool _pressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final bool dark = context.isDark;
+    // Subtle tint that fades in on hover (web/desktop) and deepens briefly on
+    // press; invisible at rest. On touch _hovered never becomes true.
+    final double alpha = _pressed
+        ? (dark ? 0.10 : 0.06)
+        : (_hovered ? (dark ? 0.06 : 0.04) : 0.0);
+
+    final Widget veiled = Stack(
+      children: <Widget>[
+        widget.child,
+        Positioned.fill(
+          child: IgnorePointer(
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 120),
+              curve: Curves.easeOut,
+              decoration: BoxDecoration(
+                color: context.colors.onSurface.withValues(alpha: alpha),
+                borderRadius: widget.borderRadius,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+
+    return KasyFocusRing(
+      onActivate: widget.onTap,
+      borderRadius: widget.borderRadius,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        onEnter: (_) => setState(() => _hovered = true),
+        onExit: (_) => setState(() {
+          _hovered = false;
+          _pressed = false;
+        }),
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: widget.onTap,
+          onTapDown: (_) => setState(() => _pressed = true),
+          onTapUp: (_) => setState(() => _pressed = false),
+          onTapCancel: () => setState(() => _pressed = false),
+          child: veiled,
+        ),
+      ),
+    );
+  }
+}
+
 class RoundRadioBox extends StatelessWidget {
   final Color bgColor;
   final Color borderColor;

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -15,7 +15,6 @@ import 'package:kasy_kit/core/states/logout_action.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
-import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/authentication/repositories/authentication_repository.dart';
 import 'package:kasy_kit/features/authentication/repositories/exceptions/authentication_exceptions.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
@@ -153,6 +152,7 @@ class SettingsPage extends ConsumerWidget {
                       context,
                       ref,
                       isAuthenticated: isAuthenticated,
+                      hasAccount: userId != null,
                       isAdmin: user.isAdmin,
                       isPhone: isPhone,
                     ),
@@ -182,6 +182,7 @@ class SettingsPage extends ConsumerWidget {
     BuildContext context,
     WidgetRef ref, {
     required bool isAuthenticated,
+    required bool hasAccount,
     required bool isAdmin,
     required bool isPhone,
   }) {
@@ -215,7 +216,7 @@ class SettingsPage extends ConsumerWidget {
           padding: const EdgeInsets.only(left: KasySpacing.xs),
           child: Text(
             t.admin_console.settings_entry.caption,
-            style: context.textTheme.bodySmall?.copyWith(
+            style: context.textTheme.bodyMedium?.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -226,8 +227,13 @@ class SettingsPage extends ConsumerWidget {
         _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
         const SizedBox(height: KasySpacing.xl),
       ],
-      const DeleteUserButton(),
-      const SizedBox(height: KasySpacing.xl),
+      // Only offer account deletion when there's a real backend account behind
+      // it. A guest with no identity has nothing to delete, so the button would
+      // just dead-end in an error and trap them on this screen.
+      if (hasAccount) ...[
+        const DeleteUserButton(),
+        const SizedBox(height: KasySpacing.xl),
+      ],
       const _VersionLabel(),
     ];
   }
@@ -435,10 +441,9 @@ class SettingsContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     return KasyCard(
       borderRadius: BorderRadius.circular(KasyRadius.lg),
-      padding: const EdgeInsets.symmetric(
-        horizontal: KasySpacing.md,
-        vertical: KasySpacing.xs,
-      ),
+      // No card padding: each row carries its own inset so the press/hover
+      // highlight spans the full card width (clipped to the rounded corners),
+      // instead of a pill floating inside a white margin.
       child: child,
     );
   }
@@ -460,7 +465,7 @@ class _FieldRow extends StatelessWidget {
       children: [
         Text(
           label,
-          style: context.textTheme.titleSmall?.copyWith(
+          style: context.kasyTextTheme.listRowTitle.copyWith(
             color: context.colors.onSurface,
           ),
         ),
@@ -471,7 +476,7 @@ class _FieldRow extends StatelessWidget {
             textAlign: TextAlign.right,
             maxLines: 1,
             overflow: TextOverflow.ellipsis,
-            style: context.textTheme.bodyMedium?.copyWith(
+            style: context.kasyTextTheme.listRowValue.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -484,18 +489,22 @@ class _FieldRow extends StatelessWidget {
     );
     if (onTap == null) {
       return Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: KasySpacing.smd,
+        ),
         child: row,
       );
     }
     return KasyHover(
       onTap: onTap!,
-      hoverEnabled: false,
-      pressEnabled: false,
       focusable: true,
-      borderRadius: KasyRadius.smBorderRadius,
+      // Rectangular highlight (default): the card clips the rounded ends.
       semanticLabel: label,
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: row,
     );
   }
@@ -512,7 +521,7 @@ class _AccountAvatarHeader extends StatelessWidget {
     return const Center(
       child: Padding(
         padding: EdgeInsets.only(top: KasySpacing.sm),
-        child: EditableUserAvatar(diameter: 64),
+        child: EditableUserAvatar(diameter: 80),
       ),
     );
   }
@@ -606,9 +615,10 @@ class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
       isPhone: widget.isPhone,
     );
 
-    const double navWidth = 248;
-    const double gap = KasySpacing.xxl;
-    const double groupWidth = navWidth + gap + kKasyContentMaxWidth;
+    const double navWidth = 220;
+    const double gap = KasySpacing.xl;
+    const double detailWidth = 560;
+    const double groupWidth = navWidth + gap + detailWidth;
 
     return Center(
       child: Padding(
@@ -641,7 +651,7 @@ class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
                 ),
                 const SizedBox(width: gap),
                 if (fits)
-                  SizedBox(width: kKasyContentMaxWidth, child: pane)
+                  SizedBox(width: detailWidth, child: pane)
                 else
                   Expanded(child: pane),
               ],
@@ -682,7 +692,7 @@ class _DesktopNav extends StatelessWidget {
           ),
           child: Row(
             children: [
-              const EditableUserAvatar(diameter: 40),
+              const EditableUserAvatar(diameter: 64),
               const SizedBox(width: KasySpacing.sm),
               Expanded(
                 child: Column(
@@ -702,7 +712,7 @@ class _DesktopNav extends StatelessWidget {
                         email,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.bodySmall?.copyWith(
+                        style: context.textTheme.bodyMedium?.copyWith(
                           color: context.colors.muted,
                         ),
                       ),
@@ -755,7 +765,7 @@ class _NavTile extends StatelessWidget {
       child: Container(
         padding: const EdgeInsets.symmetric(
           horizontal: KasySpacing.smd,
-          vertical: KasySpacing.smd,
+          vertical: KasySpacing.sm,
         ),
         decoration: BoxDecoration(
           color: selected ? c.surfaceNeutralSoft : Colors.transparent,
@@ -877,8 +887,11 @@ class _DesktopDetail extends ConsumerWidget {
         const SizedBox(height: KasySpacing.xl),
         _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
       ],
-      const SizedBox(height: KasySpacing.xl),
-      const DeleteUserButton(),
+      // Only when there's a real backend account to delete (see mobile layout).
+      if (userId != null) ...[
+        const SizedBox(height: KasySpacing.xl),
+        const DeleteUserButton(),
+      ],
       const SizedBox(height: KasySpacing.xl),
       const _VersionLabel(),
     ];
@@ -894,13 +907,18 @@ class _LogoutRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return KasyHover(
-      borderRadius: KasyRadius.smBorderRadius,
+      // Match the card radius so the full-bleed press fill hugs the rounded
+      // corners exactly (this row is the sole child of its card).
+      borderRadius: KasyRadius.lgBorderRadius,
       pressColor: context.colors.error,
       focusable: true,
       focusGapColor: context.colors.surface,
       onTap: onTap,
       child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.md,
+          vertical: KasySpacing.smd,
+        ),
         child: Row(
           children: [
             Icon(
@@ -911,7 +929,7 @@ class _LogoutRow extends StatelessWidget {
             const SizedBox(width: KasySpacing.sm),
             Text(
               context.t.settings.logout,
-              style: context.textTheme.titleSmall?.copyWith(
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.error,
               ),
             ),
@@ -980,12 +998,12 @@ class BiometricSwitcher extends ConsumerWidget {
         ),
         Padding(
           padding: const EdgeInsets.only(
-            left: KasyIconSize.rowLeading + KasySpacing.sm,
+            left: KasySpacing.md + KasyIconSize.rowLeading + KasySpacing.sm,
             bottom: KasySpacing.xs,
           ),
           child: Text(
             subtitle,
-            style: context.textTheme.bodySmall?.copyWith(
+            style: context.textTheme.bodyMedium?.copyWith(
               color: context.colors.muted,
             ),
           ),
@@ -1114,7 +1132,10 @@ class ThemeSwitcher extends StatelessWidget {
       ),
     ];
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.md,
+        vertical: KasySpacing.smd,
+      ),
       child: Row(
         children: [
           Icon(
@@ -1126,7 +1147,7 @@ class ThemeSwitcher extends StatelessWidget {
           Expanded(
             child: Text(
               tr.theme_title,
-              style: context.textTheme.titleSmall?.copyWith(
+              style: context.kasyTextTheme.listRowTitle.copyWith(
                 color: context.colors.onSurface,
               ),
             ),