From 0fa25621295cc2e5adf130ab147d1904dfa1aecf Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Tue, 18 Mar 2025 11:43:11 +0800
Subject: [PATCH]  refactor: enhance localization and component structure in
 settings

- Updated English and Chinese localization files to improve newsletter subscription labels and team references.
- Renamed route for notifications from `SettingsNotification` to `SettingsNotifications` for consistency.
- Refactored `DashboardPage`, `SettingsBillingPage`, and `SettingsAccountPage` to streamline layout and improve responsiveness.
- Introduced `SettingsNotificationPage` to handle notification settings with a dedicated component.
- Enhanced various settings components to accept `className` props for better styling flexibility.
---
 messages/en.json                              |  5 ++-
 messages/zh.json                              |  5 ++-
 .../[locale]/(dashborad)/dashboard/page.tsx   |  9 ++----
 .../(dashborad)/settings/account/page.tsx     | 22 ++++++-------
 .../(dashborad)/settings/billing/page.tsx     |  9 ++----
 .../{notification => notifications}/page.tsx  |  8 ++---
 src/components/dashboard/sidebar-main.tsx     |  4 ++-
 .../conditional-update-password-card.tsx      | 11 +++++--
 .../settings/account/delete-account-card.tsx  |  9 ++++--
 .../settings/account/reset-password-card.tsx  |  9 ++++--
 .../settings/account/update-avatar-card.tsx   | 13 +++++---
 .../settings/account/update-name-card.tsx     |  9 ++++--
 .../settings/account/update-password-card.tsx |  9 ++++--
 .../notification/newsletter-form-card.tsx     | 31 ++++++++++---------
 src/config.tsx                                |  2 +-
 src/mail/components/email-layout.tsx          |  6 ++--
 src/routes.ts                                 |  2 +-
 17 files changed, 91 insertions(+), 72 deletions(-)
 rename src/app/[locale]/(dashborad)/settings/{notification => notifications}/page.tsx (77%)

diff --git a/messages/en.json b/messages/en.json
index 12902d9..9ea47d6 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -378,8 +378,7 @@
             "newsletter": {
               "title": "Newsletter Subscription",
               "description": "Manage your newsletter subscription preferences",
-              "checkboxLabel": "Subscribe to newsletter",
-              "checkboxDescription": "Receive updates, news, and special offers via email",
+              "label": "Subscribe to newsletter",
               "hint": "You can change your subscription preferences at any time",
               "emailRequired": "Email is required to subscribe to the newsletter",
               "subscribeSuccess": "Successfully subscribed to the newsletter",
@@ -395,7 +394,7 @@
   },
   "Mail": {
     "common": {
-      "team": "MkSaaS Team",
+      "team": "{name} Team",
       "copyright": "©️ {year} All Rights Reserved."
     },
     "verifyEmail": {
diff --git a/messages/zh.json b/messages/zh.json
index 8caf74f..3a7e910 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -373,8 +373,7 @@
             "newsletter": {
               "title": "订阅",
               "description": "管理您的邮件列表订阅偏好",
-              "checkboxLabel": "订阅邮件列表",
-              "checkboxDescription": "通过邮件接收更新、新闻和特别优惠",
+              "label": "订阅邮件列表",
               "hint": "您可以随时更改订阅偏好",
               "emailRequired": "订阅邮件列表需要邮箱",
               "subscribeSuccess": "成功订阅邮件列表",
@@ -390,7 +389,7 @@
   },
   "Mail": {
     "common": {
-      "team": "MkSaaS 团队",
+      "team": "{name} 团队",
       "copyright": "©️ {year} 版权所有。"
     },
     "verifyEmail": {
diff --git a/src/app/[locale]/(dashborad)/dashboard/page.tsx b/src/app/[locale]/(dashborad)/dashboard/page.tsx
index 58585e9..3fed3e4 100644
--- a/src/app/[locale]/(dashborad)/dashboard/page.tsx
+++ b/src/app/[locale]/(dashborad)/dashboard/page.tsx
@@ -14,13 +14,8 @@ export default function DashboardPage() {
   return (
     <>
       <DashboardHeader breadcrumbs={breadcrumbs} />
-      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-          <div className="aspect-video rounded-xl bg-muted/50" />
-          <div className="aspect-video rounded-xl bg-muted/50" />
-          <div className="aspect-video rounded-xl bg-muted/50" />
-        </div>
-        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+
+      <div className="px-4 py-8">
       </div>
     </>
   );
diff --git a/src/app/[locale]/(dashborad)/settings/account/page.tsx b/src/app/[locale]/(dashborad)/settings/account/page.tsx
index eb985ef..f8d7bb0 100644
--- a/src/app/[locale]/(dashborad)/settings/account/page.tsx
+++ b/src/app/[locale]/(dashborad)/settings/account/page.tsx
@@ -1,8 +1,8 @@
 import { DashboardHeader } from '@/components/dashboard/dashboard-header';
-import { UpdateAvatarCard } from '@/components/settings/account/update-avatar-card';
-import { UpdateNameCard } from '@/components/settings/account/update-name-card';
 import { ConditionalUpdatePasswordCard } from '@/components/settings/account/conditional-update-password-card';
 import { DeleteAccountCard } from '@/components/settings/account/delete-account-card';
+import { UpdateAvatarCard } from '@/components/settings/account/update-avatar-card';
+import { UpdateNameCard } from '@/components/settings/account/update-name-card';
 import { useTranslations } from 'next-intl';
 
 export default function SettingsAccountPage() {
@@ -19,20 +19,16 @@ export default function SettingsAccountPage() {
     },
   ];
 
-  
-
   return (
     <>
       <DashboardHeader breadcrumbs={breadcrumbs} />
-      
-      <div className="p-8">
-        <div className="grid grid-cols-1 md:grid-cols-1 gap-6 max-w-6xl">
-          <div className="space-y-6">
-            <UpdateAvatarCard />
-            <UpdateNameCard />
-            <ConditionalUpdatePasswordCard />
-            <DeleteAccountCard />
-          </div>
+
+      <div className="px-4 py-8">
+        <div className="flex flex-col items-center space-y-6 w-full">
+          <UpdateAvatarCard />
+          <UpdateNameCard />
+          <ConditionalUpdatePasswordCard />
+          <DeleteAccountCard />
         </div>
       </div>
     </>
diff --git a/src/app/[locale]/(dashborad)/settings/billing/page.tsx b/src/app/[locale]/(dashborad)/settings/billing/page.tsx
index 21651dc..8efc7f5 100644
--- a/src/app/[locale]/(dashborad)/settings/billing/page.tsx
+++ b/src/app/[locale]/(dashborad)/settings/billing/page.tsx
@@ -18,13 +18,8 @@ export default function SettingsBillingPage() {
   return (
     <>
       <DashboardHeader breadcrumbs={breadcrumbs} />
-      <div className="flex flex-1 flex-col gap-4 p-4">
-        <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-          <div className="aspect-video rounded-xl bg-muted/50" />
-          <div className="aspect-video rounded-xl bg-muted/50" />
-          <div className="aspect-video rounded-xl bg-muted/50" />
-        </div>
-        <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+      
+      <div className="px-4 py-8">
       </div>
     </>
   );
diff --git a/src/app/[locale]/(dashborad)/settings/notification/page.tsx b/src/app/[locale]/(dashborad)/settings/notifications/page.tsx
similarity index 77%
rename from src/app/[locale]/(dashborad)/settings/notification/page.tsx
rename to src/app/[locale]/(dashborad)/settings/notifications/page.tsx
index f702d37..6218bf2 100644
--- a/src/app/[locale]/(dashborad)/settings/notification/page.tsx
+++ b/src/app/[locale]/(dashborad)/settings/notifications/page.tsx
@@ -20,11 +20,9 @@ export default function SettingsNotificationPage() {
     <>
       <DashboardHeader breadcrumbs={breadcrumbs} />
 
-      <div className="p-8">
-        <div className="grid grid-cols-1 md:grid-cols-1 gap-6 max-w-6xl">
-          <div className="space-y-6">
-            <NewsletterFormCard />
-          </div>
+      <div className="px-4 py-8">
+        <div className="flex flex-col items-center space-y-6 w-full">
+          <NewsletterFormCard />
         </div>
       </div>
     </>
diff --git a/src/components/dashboard/sidebar-main.tsx b/src/components/dashboard/sidebar-main.tsx
index 089af13..1722a55 100644
--- a/src/components/dashboard/sidebar-main.tsx
+++ b/src/components/dashboard/sidebar-main.tsx
@@ -49,7 +49,9 @@ export function SidebarMain() {
             {item.items?.length ? (
               <Collapsible
                 asChild
-                defaultOpen={hasActiveChild(item.items)}
+                // NOTICE: show all collapsible items by default
+                defaultOpen={true}
+                // defaultOpen={hasActiveChild(item.items)}
                 className="group/collapsible"
               >
                 <SidebarMenuItem>
diff --git a/src/components/settings/account/conditional-update-password-card.tsx b/src/components/settings/account/conditional-update-password-card.tsx
index bbcecf4..bd0a48d 100644
--- a/src/components/settings/account/conditional-update-password-card.tsx
+++ b/src/components/settings/account/conditional-update-password-card.tsx
@@ -4,6 +4,11 @@ import { UpdatePasswordCard } from '@/components/settings/account/update-passwor
 import { ResetPasswordCard } from '@/components/settings/account/reset-password-card';
 import { authClient } from '@/lib/auth-client';
 import { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ConditionalUpdatePasswordCardProps {
+  className?: string;
+}
 
 /**
  * Conditionally renders either:
@@ -11,7 +16,7 @@ import { useEffect, useState } from 'react';
  * - ResetPasswordCard: if the user only has social login providers and has an email
  * - Nothing: if the user has no credential provider and no email
  */
-export function ConditionalUpdatePasswordCard() {
+export function ConditionalUpdatePasswordCard({ className }: ConditionalUpdatePasswordCardProps) {
   const { data: session } = authClient.useSession();
   const [hasCredentialProvider, setHasCredentialProvider] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -53,13 +58,13 @@ export function ConditionalUpdatePasswordCard() {
 
   // If user has credential provider, show UpdatePasswordCard
   if (hasCredentialProvider) {
-    return <UpdatePasswordCard />;
+    return <UpdatePasswordCard className={className} />;
   }
 
   // If user doesn't have credential provider but has an email, show ResetPasswordCard
   // The forgot password flow requires an email address
   if (session?.user?.email) {
-    return <ResetPasswordCard />;
+    return <ResetPasswordCard className={className} />;
   }
 
   // If user has no credential provider and no email, don't show anything
diff --git a/src/components/settings/account/delete-account-card.tsx b/src/components/settings/account/delete-account-card.tsx
index 3d67ba8..3f1f4bf 100644
--- a/src/components/settings/account/delete-account-card.tsx
+++ b/src/components/settings/account/delete-account-card.tsx
@@ -20,17 +20,22 @@ import {
 } from '@/components/ui/alert-dialog';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { toast } from 'sonner';
 
+interface DeleteAccountCardProps {
+  className?: string;
+}
+
 /**
  * Delete user account
  * 
  * This component allows users to permanently delete their account.
  * It includes a confirmation dialog to prevent accidental deletions.
  */
-export function DeleteAccountCard() {
+export function DeleteAccountCard({ className }: DeleteAccountCardProps) {
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
   const [isDeleting, setIsDeleting] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -76,7 +81,7 @@ export function DeleteAccountCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg border-destructive/50 overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl border-destructive/50 overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold text-destructive">
           {t('deleteAccount.title')}
diff --git a/src/components/settings/account/reset-password-card.tsx b/src/components/settings/account/reset-password-card.tsx
index ae696d3..9e21a7e 100644
--- a/src/components/settings/account/reset-password-card.tsx
+++ b/src/components/settings/account/reset-password-card.tsx
@@ -11,8 +11,13 @@ import {
 } from '@/components/ui/card';
 import { useLocaleRouter } from '@/i18n/navigation';
 import { authClient } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
 import { useTranslations } from 'next-intl';
 
+interface ResetPasswordCardProps {
+  className?: string;
+}
+
 /**
  * Reset Password Card
  * 
@@ -31,7 +36,7 @@ import { useTranslations } from 'next-intl';
  * 
  * This effectively adds a credential provider to their account, enabling email/password login.
  */
-export function ResetPasswordCard() {
+export function ResetPasswordCard({ className }: ResetPasswordCardProps) {
   const router = useLocaleRouter();
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
   const { data: session } = authClient.useSession();
@@ -46,7 +51,7 @@ export function ResetPasswordCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('setupPassword.title')}
diff --git a/src/components/settings/account/update-avatar-card.tsx b/src/components/settings/account/update-avatar-card.tsx
index e2960e9..a52d112 100644
--- a/src/components/settings/account/update-avatar-card.tsx
+++ b/src/components/settings/account/update-avatar-card.tsx
@@ -12,16 +12,21 @@ import {
   CardTitle
 } from '@/components/ui/card';
 import { authClient } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
 import { uploadFileFromBrowser } from '@/storage';
 import { User2Icon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
+interface UpdateAvatarCardProps {
+  className?: string;
+}
+
 /**
  * Update the user's avatar
  */
-export function UpdateAvatarCard() {
+export function UpdateAvatarCard({ className }: UpdateAvatarCardProps) {
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
   const [isUploading, setIsUploading] = useState(false);
   const [error, setError] = useState('');
@@ -123,7 +128,7 @@ export function UpdateAvatarCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('avatar.title')}
@@ -133,7 +138,7 @@ export function UpdateAvatarCard() {
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="flex flex-col items-center sm:flex-row gap-4">
+        <div className="flex flex-col items-center sm:flex-row gap-4 sm:gap-8">
           {/* avatar */}
           <Avatar className="h-16 w-16 border">
             <AvatarImage src={avatarUrl ?? ''} alt={user.name} />
@@ -144,7 +149,7 @@ export function UpdateAvatarCard() {
 
           {/* upload button */}
           <Button
-            variant="default"
+            variant="outline"
             size="sm"
             onClick={handleUploadClick}
             disabled={isUploading}
diff --git a/src/components/settings/account/update-name-card.tsx b/src/components/settings/account/update-name-card.tsx
index c3353cb..a4cf990 100644
--- a/src/components/settings/account/update-name-card.tsx
+++ b/src/components/settings/account/update-name-card.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { authClient } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
@@ -26,10 +27,14 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
+interface UpdateNameCardProps {
+  className?: string;
+}
+
 /**
  * update user name
  */
-export function UpdateNameCard() {
+export function UpdateNameCard({ className }: UpdateNameCardProps) {
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | undefined>('');
@@ -102,7 +107,7 @@ export function UpdateNameCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('name.title')}
diff --git a/src/components/settings/account/update-password-card.tsx b/src/components/settings/account/update-password-card.tsx
index b141369..ff7f613 100644
--- a/src/components/settings/account/update-password-card.tsx
+++ b/src/components/settings/account/update-password-card.tsx
@@ -28,6 +28,11 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
+import { cn } from '@/lib/utils';
+
+interface UpdatePasswordCardProps {
+  className?: string;
+}
 
 /**
  * Update user password
@@ -39,7 +44,7 @@ import { z } from 'zod';
  * @see ConditionalUpdatePasswordCard
  * @see https://www.better-auth.com/docs/authentication/email-password#update-password
  */
-export function UpdatePasswordCard() {
+export function UpdatePasswordCard({ className }: UpdatePasswordCardProps) {
   const router = useLocaleRouter();
   const t = useTranslations('Dashboard.sidebar.settings.items.account');
   const [isSaving, setIsSaving] = useState(false);
@@ -109,7 +114,7 @@ export function UpdatePasswordCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('password.title')}
diff --git a/src/components/settings/notification/newsletter-form-card.tsx b/src/components/settings/notification/newsletter-form-card.tsx
index bf6f693..6567a78 100644
--- a/src/components/settings/notification/newsletter-form-card.tsx
+++ b/src/components/settings/notification/newsletter-form-card.tsx
@@ -16,7 +16,7 @@ import {
   FormItem,
   FormLabel,
 } from '@/components/ui/form';
-import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
 import { authClient } from '@/lib/auth-client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
@@ -29,13 +29,18 @@ import {
   unsubscribeAction, 
   isSubscribedAction 
 } from '@/actions/newsletter';
+import { cn } from '@/lib/utils';
+
+interface NewsletterFormCardProps {
+  className?: string;
+}
 
 /**
  * Newsletter subscription form card
  * 
  * Allows users to toggle their newsletter subscription status
  */
-export function NewsletterFormCard() {
+export function NewsletterFormCard({ className }: NewsletterFormCardProps) {
   const t = useTranslations('Dashboard.sidebar.settings.items.notification');
   const [isUpdating, setIsUpdating] = useState(false);
   const [error, setError] = useState<string | undefined>('');
@@ -153,7 +158,7 @@ export function NewsletterFormCard() {
   };
 
   return (
-    <Card className="max-w-md md:max-w-lg overflow-hidden">
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden", className)}>
       <CardHeader>
         <CardTitle className="text-lg font-bold">
           {t('newsletter.title')}
@@ -169,25 +174,23 @@ export function NewsletterFormCard() {
               control={form.control}
               name="subscribed"
               render={({ field }) => (
-                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md p-4">
+                <FormItem className="flex flex-row items-center justify-between">
+                  <div className="space-y-0.5">
+                    <FormLabel className="text-base">
+                      {t('newsletter.label')}
+                    </FormLabel>
+                  </div>
                   <FormControl>
-                    <Checkbox
+                    <Switch
                       checked={field.value}
                       onCheckedChange={(checked) => {
                         field.onChange(checked);
-                        handleSubscriptionChange(checked === true);
+                        handleSubscriptionChange(checked);
                       }}
                       disabled={isUpdating}
+                      aria-readonly={isUpdating}
                     />
                   </FormControl>
-                  <div className="space-y-1 leading-none">
-                    <FormLabel>
-                      {t('newsletter.checkboxLabel')}
-                    </FormLabel>
-                    <p className="text-sm text-muted-foreground">
-                      {t('newsletter.checkboxDescription')}
-                    </p>
-                  </div>
                 </FormItem>
               )}
             />
diff --git a/src/config.tsx b/src/config.tsx
index 08319ec..a03fae5 100644
--- a/src/config.tsx
+++ b/src/config.tsx
@@ -413,7 +413,7 @@ export function getSidebarMainLinks(t: TranslationFunction): NestedMenuItem[] {
         {
           title: t('Dashboard.sidebar.settings.items.notification.title'),
           icon: <BellIcon className="site-4 shrink-0" />,
-          href: Routes.SettingsNotification,
+          href: Routes.SettingsNotifications,
           external: false,
         }
       ],
diff --git a/src/mail/components/email-layout.tsx b/src/mail/components/email-layout.tsx
index 2459db7..2b33603 100644
--- a/src/mail/components/email-layout.tsx
+++ b/src/mail/components/email-layout.tsx
@@ -1,3 +1,4 @@
+import { BaseEmailProps } from '@/mail/types';
 import {
   Container,
   Font,
@@ -8,7 +9,6 @@ import {
   Tailwind,
   Text
 } from '@react-email/components';
-import { BaseEmailProps } from '@/mail/types';
 import { createTranslator } from 'use-intl/core';
 
 interface EmailLayoutProps extends BaseEmailProps {
@@ -42,7 +42,9 @@ export default function EmailLayout({ locale, messages, children }: EmailLayoutP
             {children}
 
             <Hr className="my-8" />
-            <Text className="mt-4">{t('Mail.common.team')}</Text>
+            <Text className="mt-4">
+              {t('Mail.common.team', { name: t('Site.name') })}
+            </Text>
             <Text>
               {t('Mail.common.copyright', { year: new Date().getFullYear() })}
             </Text>
diff --git a/src/routes.ts b/src/routes.ts
index d5074f3..c95f661 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -30,7 +30,7 @@ export enum Routes {
   Dashboard = '/dashboard',
   SettingsAccount = '/settings/account',
   SettingsBilling = '/settings/billing',
-  SettingsNotification = '/settings/notification',
+  SettingsNotifications = '/settings/notifications',
 
   AIText = '/ai/text',
   AIImage = '/ai/image',