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.
2025-03-18 11:43:11 +08:00 · 2025-03-18 11:43:11 +08:00 · 0fa2562129
commit 0fa2562129
parent db651f5f1d
17 changed files with 91 additions and 72 deletions
--- 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": {
--- 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": {
--- 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>
    </>
  );
--- 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>
    </>
--- 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>
    </>
  );
--- a/src/app/[locale]/(dashborad)/settings/notifications/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>
    </>
--- 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>
--- 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
--- 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')}
--- 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')}
--- 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}
--- 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')}
--- 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')}
--- 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>
              )}
            />
--- 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,
        }
      ],
--- 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>
--- 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',