kasy-cli 1.21.8 → 1.22.0

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

@@ -9,9 +9,10 @@ import 'package:kasy_kit/core/haptics/haptic_feedback_notifier.dart';
 import 'package:kasy_kit/core/security/biometric_preference_notifier.dart';
 import 'package:kasy_kit/core/security/biometric_service.dart';
 import 'package:kasy_kit/core/security/biometric_ui_bundle.dart';
+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/features/settings/ui/components/admin/admin_bottom_sheet.dart';
+import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
 import 'package:kasy_kit/features/settings/ui/components/delete_user_component.dart';
 import 'package:kasy_kit/features/settings/ui/components/language_switcher.dart';
@@ -44,101 +45,160 @@ class SettingsPage extends ConsumerWidget {
           icon: KasyIcons.logout,
           iconSize: 20,
           foregroundColor: ctx.colors.error,
-          onPressed: () => showKasyConfirmDialog(
-            ctx,
-            title: tr.disconnect_confirm_title,
-            message: tr.disconnect_confirm_message,
-            cancelLabel: tr.disconnect_cancel,
-            confirmLabel: tr.disconnect,
-            onConfirm: () =>
-                ref.read(userStateNotifierProvider.notifier).onLogout(),
-          ),
+          onPressed: () => confirmLogout(ctx, ref),
         ),
       ),
       slivers: [
-        SliverList.list(
-          children: [
-            ProfileTile(
-              title: displayName,
-              subtitle: displayEmail,
-              isAuthenticated: isAuthenticated,
-              onTap: isAuthenticated ? null : () => context.push('/signup'),
-            ),
-            const SizedBox(height: KasySpacing.xl),
-            _SectionLabel(tr.section_preferences_label),
-            const SizedBox(height: KasySpacing.xs),
-            SettingsContainer(
-              child: Wrap(
-                children: [
-                  const ThemeSwitcher(),
-                  const SettingsDivider(),
-                  const HapticFeedbackSwitcher(),
-                  const SettingsDivider(),
-                  const LanguageSwitcher(),
-                  if (withLocalNotifications) ...[
-                    const SettingsDivider(),
-                    SettingsTile(
-                      icon: KasyIcons.notification,
-                      title: tr.reminders,
-                      onTap: () => context.push('/reminder'),
-                    ),
-                  ],
-                  if (withFeedback) ...[
-                    const SettingsDivider(),
-                    SettingsTile(
-                      icon: KasyIcons.message,
-                      title: tr.feedback,
-                      onTap: () => context.push('/feedback'),
+        SliverToBoxAdapter(
+          child: Builder(
+            builder: (context) {
+              // Breakpoint by viewport width — the industry standard and the
+              // project's own `large` cutoff (1024px ≈ Tailwind lg). Two-pane
+              // spans the whole desktop range and only collapses to a single
+              // column when entering tablet territory (the layout phones and
+              // tablets already use), instead of switching while still wide.
+              final bool wide = MediaQuery.sizeOf(context).width >= 1024;
+
+              if (!wide) {
+                return Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    ProfileTile(
+                      title: displayName,
+                      subtitle: displayEmail,
+                      isAuthenticated: isAuthenticated,
+                      onTap: isAuthenticated
+                          ? null
+                          : () => context.push('/signup'),
                     ),
-                  ],
-                  if (withRevenuecat) ...[
-                    const SettingsDivider(),
-                    SettingsTile(
-                      icon: KasyIcons.payment,
-                      title: tr.premium,
-                      onTap: () => context.push('/premium'),
+                    const SizedBox(height: KasySpacing.xl),
+                    ..._sections(
+                      context,
+                      ref,
+                      isAuthenticated: isAuthenticated,
+                      isAdmin: user.isAdmin,
                     ),
+                    const SizedBox(height: KasySpacing.xl),
                   ],
-                ],
+                );
+              }
+
+              // Desktop: a SaaS-style master/detail (Vercel/Stripe/Claude) —
+              // a section nav on the left, the selected section on the right.
+              return _SettingsDesktopView(
+                name: displayName,
+                email: displayEmail,
+                isAuthenticated: isAuthenticated,
+                isAdmin: user.isAdmin,
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// The settings sections (everything except the profile header), shared
+  /// between the single-column (mobile/tablet) and two-pane (desktop) layouts.
+  List<Widget> _sections(
+    BuildContext context,
+    WidgetRef ref, {
+    required bool isAuthenticated,
+    required bool isAdmin,
+  }) {
+    final tr = context.t.settings;
+    return [
+      _SectionLabel(tr.section_preferences_label),
+      const SizedBox(height: KasySpacing.xs),
+      SettingsContainer(
+        child: Wrap(
+          children: [
+            const ThemeSwitcher(),
+            const SettingsDivider(),
+            const HapticFeedbackSwitcher(),
+            const SettingsDivider(),
+            const LanguageSwitcher(),
+            if (withLocalReminders) ...[
+              const SettingsDivider(),
+              SettingsTile(
+                icon: KasyIcons.notification,
+                title: tr.reminders,
+                onTap: () => context.push('/reminder'),
               ),
-            ),
-            if (isAuthenticated && !kIsWeb) ...[
-              const SizedBox(height: KasySpacing.xl),
-              _SectionLabel(tr.section_security_label),
-              const SizedBox(height: KasySpacing.xs),
-              const SettingsContainer(
-                child: BiometricSwitcher(),
+            ],
+            if (withFeedback) ...[
+              const SettingsDivider(),
+              SettingsTile(
+                icon: KasyIcons.message,
+                title: tr.feedback,
+                onTap: () => context.push('/feedback'),
               ),
             ],
-            const SizedBox(height: KasySpacing.xl),
-            _SectionLabel(tr.section_support_label),
-            const SizedBox(height: KasySpacing.xs),
-            SettingsContainer(
-              child: Wrap(
-                children: [
-                  SettingsTile(
-                    icon: KasyIcons.privacy,
-                    title: tr.privacy,
-                    onTap: () => launchUrl(Uri.parse('https://kasy.dev/privacy/')),
-                  ),
-                  const SettingsDivider(),
-                  SettingsTile(
-                    icon: KasyIcons.help,
-                    title: tr.support,
-                    onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
-                  ),
-                ],
+            if (withRevenuecat) ...[
+              const SettingsDivider(),
+              SettingsTile(
+                icon: KasyIcons.payment,
+                title: tr.premium,
+                onTap: () => context.push('/premium'),
               ),
+            ],
+          ],
+        ),
+      ),
+      if (isAuthenticated && !kIsWeb) ...[
+        const SizedBox(height: KasySpacing.xl),
+        _SectionLabel(tr.section_security_label),
+        const SizedBox(height: KasySpacing.xs),
+        const SettingsContainer(
+          child: BiometricSwitcher(),
+        ),
+      ],
+      const SizedBox(height: KasySpacing.xl),
+      _SectionLabel(tr.section_support_label),
+      const SizedBox(height: KasySpacing.xs),
+      SettingsContainer(
+        child: Wrap(
+          children: [
+            SettingsTile(
+              icon: KasyIcons.privacy,
+              title: tr.privacy,
+              onTap: () => launchUrl(Uri.parse('https://kasy.dev/privacy/')),
+            ),
+            const SettingsDivider(),
+            SettingsTile(
+              icon: KasyIcons.help,
+              title: tr.support,
+              onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
             ),
-            const SizedBox(height: KasySpacing.xxl),
-            const DeleteUserButton(),
-            const SizedBox(height: KasySpacing.xl),
-            const _VersionLabel(),
-            const SizedBox(height: KasySpacing.xl),
           ],
         ),
+      ),
+      // Admin entry — only for administrators or in development mode.
+      if (isAdmin || kDebugMode) ...[
+        const SizedBox(height: KasySpacing.xl),
+        SettingsContainer(
+          child: SettingsTile(
+            icon: Icons.admin_panel_settings_outlined,
+            title: t.admin_console.settings_entry.title,
+            onTap: () => context.push('/admin'),
+          ),
+        ),
+        const SizedBox(height: KasySpacing.sm),
+        Padding(
+          padding: const EdgeInsets.only(left: KasySpacing.xs),
+          child: Text(
+            t.admin_console.settings_entry.caption,
+            style: context.textTheme.bodySmall?.copyWith(
+              color: context.colors.muted,
+            ),
+          ),
+        ),
       ],
-    );
+      const SizedBox(height: KasySpacing.xxl),
+      const DeleteUserButton(),
+      const SizedBox(height: KasySpacing.xl),
+      const _VersionLabel(),
+    ];
   }
 }
 
@@ -276,6 +336,460 @@ class ProfileTile extends StatelessWidget {
   }
 }
 
+// ─── Desktop (≥1024px): SaaS-style master/detail ──────────────────────────
+//
+// A left nav lists the settings sections; the right pane shows the selected
+// one. Mirrors the layout of Vercel / Stripe / Claude settings. The phone and
+// tablet layout (single column) is untouched.
+
+enum _DesktopSection { account, preferences, security, support, admin }
+
+/// Title-cases an all-caps section label (e.g. "PREFERENCES" → "Preferences")
+/// in a way that's safe across locales (single-word labels only).
+String _titleCase(String s) =>
+    s.isEmpty ? s : s[0].toUpperCase() + s.substring(1).toLowerCase();
+
+(IconData, String) _sectionMeta(BuildContext context, _DesktopSection section) {
+  final tr = context.t.settings;
+  return switch (section) {
+    _DesktopSection.account => (KasyIcons.person, tr.my_account),
+    _DesktopSection.preferences => (
+      KasyIcons.settings,
+      _titleCase(tr.section_preferences_label),
+    ),
+    _DesktopSection.security => (
+      KasyIcons.security,
+      _titleCase(tr.section_security_label),
+    ),
+    _DesktopSection.support => (
+      KasyIcons.help,
+      _titleCase(tr.section_support_label),
+    ),
+    _DesktopSection.admin => (
+      Icons.admin_panel_settings_outlined,
+      t.admin_console.settings_entry.title,
+    ),
+  };
+}
+
+class _SettingsDesktopView extends ConsumerStatefulWidget {
+  final String name;
+  final String email;
+  final bool isAuthenticated;
+  final bool isAdmin;
+
+  const _SettingsDesktopView({
+    required this.name,
+    required this.email,
+    required this.isAuthenticated,
+    required this.isAdmin,
+  });
+
+  @override
+  ConsumerState<_SettingsDesktopView> createState() =>
+      _SettingsDesktopViewState();
+}
+
+class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
+  _DesktopSection _selected = _DesktopSection.account;
+
+  List<_DesktopSection> get _sections => <_DesktopSection>[
+        _DesktopSection.account,
+        _DesktopSection.preferences,
+        if (widget.isAuthenticated && !kIsWeb) _DesktopSection.security,
+        _DesktopSection.support,
+        if (widget.isAdmin || kDebugMode) _DesktopSection.admin,
+      ];
+
+  @override
+  Widget build(BuildContext context) {
+    final List<_DesktopSection> sections = _sections;
+    if (!sections.contains(_selected)) _selected = sections.first;
+
+    return Center(
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 1080),
+        child: Padding(
+          padding: const EdgeInsets.only(
+            top: KasySpacing.lg,
+            bottom: KasySpacing.xxl,
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                width: 248,
+                child: _DesktopNav(
+                  sections: sections,
+                  selected: _selected,
+                  name: widget.name,
+                  email: widget.email,
+                  onSelect: (s) => setState(() => _selected = s),
+                ),
+              ),
+              const SizedBox(width: KasySpacing.xxl),
+              Expanded(
+                child: Align(
+                  alignment: Alignment.topLeft,
+                  child: ConstrainedBox(
+                    constraints: const BoxConstraints(maxWidth: 720),
+                    child: _DesktopDetail(
+                      section: _selected,
+                      name: widget.name,
+                      email: widget.email,
+                      isAuthenticated: widget.isAuthenticated,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _DesktopNav extends StatelessWidget {
+  final List<_DesktopSection> sections;
+  final _DesktopSection selected;
+  final String name;
+  final String email;
+  final ValueChanged<_DesktopSection> onSelect;
+
+  const _DesktopNav({
+    required this.sections,
+    required this.selected,
+    required this.name,
+    required this.email,
+    required this.onSelect,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Padding(
+          padding: const EdgeInsets.fromLTRB(
+            KasySpacing.sm,
+            KasySpacing.sm,
+            KasySpacing.sm,
+            KasySpacing.md,
+          ),
+          child: Row(
+            children: [
+              const EditableUserAvatar(diameter: 40),
+              const SizedBox(width: KasySpacing.sm),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      name,
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                      style: context.textTheme.titleSmall?.copyWith(
+                        color: context.colors.onSurface,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    if (email.isNotEmpty)
+                      Text(
+                        email,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodySmall?.copyWith(
+                          color: context.colors.muted,
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+        for (final _DesktopSection s in sections)
+          Padding(
+            padding: const EdgeInsets.only(bottom: KasySpacing.xs),
+            child: _NavTile(
+              section: s,
+              selected: s == selected,
+              onTap: () => onSelect(s),
+            ),
+          ),
+      ],
+    );
+  }
+}
+
+class _NavTile extends StatelessWidget {
+  final _DesktopSection section;
+  final bool selected;
+  final VoidCallback onTap;
+
+  const _NavTile({
+    required this.section,
+    required this.selected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final KasyColors c = context.colors;
+    final (IconData icon, String label) = _sectionMeta(context, section);
+    final Color fg = selected ? c.onSurface : c.muted;
+
+    // Same interaction model as KasySidebar: KasyHover (MouseRegion + animated
+    // fill, no Material ripple) over a static selected background.
+    return KasyHover(
+      borderRadius: KasyRadius.smBorderRadius,
+      hoverColor: c.surfaceNeutralSoft,
+      pressColor: c.onSurface,
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(
+          horizontal: KasySpacing.smd,
+          vertical: KasySpacing.smd,
+        ),
+        decoration: BoxDecoration(
+          color: selected ? c.surfaceNeutralSoft : Colors.transparent,
+          borderRadius: KasyRadius.smBorderRadius,
+        ),
+        child: Row(
+          children: [
+            Icon(icon, size: 20, color: fg),
+            const SizedBox(width: KasySpacing.sm),
+            Text(
+              label,
+              style: context.textTheme.titleSmall?.copyWith(
+                color: fg,
+                fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _DesktopDetail extends ConsumerWidget {
+  final _DesktopSection section;
+  final String name;
+  final String email;
+  final bool isAuthenticated;
+
+  const _DesktopDetail({
+    required this.section,
+    required this.name,
+    required this.email,
+    required this.isAuthenticated,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final (_, String title) = _sectionMeta(context, section);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Padding(
+          padding: const EdgeInsets.only(
+            left: KasySpacing.xs,
+            bottom: KasySpacing.lg,
+          ),
+          child: Text(
+            title,
+            style: context.textTheme.headlineSmall?.copyWith(
+              color: context.colors.onSurface,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+        ),
+        ..._content(context, ref),
+      ],
+    );
+  }
+
+  List<Widget> _content(BuildContext context, WidgetRef ref) {
+    final tr = context.t.settings;
+    switch (section) {
+      case _DesktopSection.account:
+        return _accountContent(context, ref);
+      case _DesktopSection.preferences:
+        return [
+          SettingsContainer(
+            child: Wrap(
+              children: [
+                const ThemeSwitcher(),
+                const SettingsDivider(),
+                const HapticFeedbackSwitcher(),
+                const SettingsDivider(),
+                const LanguageSwitcher(),
+                if (withLocalReminders) ...[
+                  const SettingsDivider(),
+                  SettingsTile(
+                    icon: KasyIcons.notification,
+                    title: tr.reminders,
+                    onTap: () => context.push('/reminder'),
+                  ),
+                ],
+                if (withFeedback) ...[
+                  const SettingsDivider(),
+                  SettingsTile(
+                    icon: KasyIcons.message,
+                    title: tr.feedback,
+                    onTap: () => context.push('/feedback'),
+                  ),
+                ],
+                if (withRevenuecat) ...[
+                  const SettingsDivider(),
+                  SettingsTile(
+                    icon: KasyIcons.payment,
+                    title: tr.premium,
+                    onTap: () => context.push('/premium'),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ];
+      case _DesktopSection.security:
+        return const [
+          SettingsContainer(child: BiometricSwitcher()),
+        ];
+      case _DesktopSection.support:
+        return [
+          SettingsContainer(
+            child: Wrap(
+              children: [
+                SettingsTile(
+                  icon: KasyIcons.privacy,
+                  title: tr.privacy,
+                  onTap: () =>
+                      launchUrl(Uri.parse('https://kasy.dev/privacy/')),
+                ),
+                const SettingsDivider(),
+                SettingsTile(
+                  icon: KasyIcons.help,
+                  title: tr.support,
+                  onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
+                ),
+              ],
+            ),
+          ),
+        ];
+      case _DesktopSection.admin:
+        return [
+          SettingsContainer(
+            child: SettingsTile(
+              icon: Icons.admin_panel_settings_outlined,
+              title: t.admin_console.settings_entry.title,
+              onTap: () => context.push('/admin'),
+            ),
+          ),
+          const SizedBox(height: KasySpacing.sm),
+          Padding(
+            padding: const EdgeInsets.only(left: KasySpacing.xs),
+            child: Text(
+              t.admin_console.settings_entry.caption,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: context.colors.muted,
+              ),
+            ),
+          ),
+        ];
+    }
+  }
+
+  List<Widget> _accountContent(BuildContext context, WidgetRef ref) {
+    final tr = context.t.settings;
+    return [
+      SettingsContainer(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+          child: Row(
+            children: [
+              const EditableUserAvatar(diameter: 56),
+              const SizedBox(width: KasySpacing.md),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      name,
+                      style: context.textTheme.titleMedium?.copyWith(
+                        color: context.colors.onSurface,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    if (email.isNotEmpty)
+                      Text(
+                        email,
+                        style: context.textTheme.bodySmall?.copyWith(
+                          color: context.colors.muted,
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+              if (!isAuthenticated)
+                KasyButton(
+                  label: tr.register,
+                  onPressed: () => context.push('/signup'),
+                ),
+            ],
+          ),
+        ),
+      ),
+      if (isAuthenticated) ...[
+        const SizedBox(height: KasySpacing.xl),
+        SettingsContainer(
+          child: _LogoutRow(onTap: () => confirmLogout(context, ref)),
+        ),
+      ],
+      const SizedBox(height: KasySpacing.xl),
+      const DeleteUserButton(),
+      const SizedBox(height: KasySpacing.xl),
+      const _VersionLabel(),
+    ];
+  }
+}
+
+/// A danger-tinted "Sign out" row used in the desktop Account section.
+class _LogoutRow extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _LogoutRow({required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return KasyHover(
+      borderRadius: KasyRadius.smBorderRadius,
+      pressColor: context.colors.error,
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        child: Row(
+          children: [
+            Icon(KasyIcons.logout, size: 21, color: context.colors.error),
+            const SizedBox(width: KasySpacing.sm),
+            Text(
+              context.t.settings.logout,
+              style: context.textTheme.titleMedium?.copyWith(
+                color: context.colors.error,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class _VersionLabel extends StatefulWidget {
   const _VersionLabel();
 
@@ -296,14 +810,11 @@ class _VersionLabelState extends State<_VersionLabel> {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onDoubleTap: () => showAdminBottomSheet(context),
-      child: Center(
-        child: Text(
-          _version,
-          style: context.textTheme.bodySmall?.copyWith(
-            color: context.colors.onSurface.withValues(alpha: 0.3),
-          ),
+    return Center(
+      child: Text(
+        _version,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: context.colors.onSurface.withValues(alpha: 0.3),
         ),
       ),
     );