fix: enhance password update experience and UI consistency

- Updated Chinese translation for password hint to improve clarity.
- Added rounded styling to the logo in the dashboard sidebar for better aesthetics.
- Replaced loading state with a skeleton card in the password update component to enhance user experience during data fetching.
- Adjusted skeleton card dimensions for improved visual consistency.

messages/zh.json

@@ -409,7 +409,7 @@
               "currentRequired": "当前密码是必填项",
               "newPassword": "新密码",
               "newMinLength": "密码必须至少包含 8 个字符",
-              "hint": "请使用至少 8 个字符",
+              "hint": "请至少使用 8 个字符作为密码",
               "showPassword": "显示密码",
               "hidePassword": "隐藏密码",
               "success": "密码更新成功",

src/components/dashboard/dashboard-sidebar.tsx

@@ -36,7 +36,7 @@ export function DashboardSidebar({ ...props }: React.ComponentProps<typeof Sideb
               className="data-[slot=sidebar-menu-button]:!p-1.5"
             >
               <LocaleLink href="/">
-                <Logo className="size-5" />
+                <Logo className="size-5 rounded-full" />
                 <span className="truncate font-semibold text-base">
                   {t('Site.name')}
                 </span>

src/components/settings/security/conditional-update-password-card.tsx

@@ -56,7 +56,7 @@ export function ConditionalUpdatePasswordCard({ className }: ConditionalUpdatePa
 
   // Don't render anything while loading
   if (isLoading) {
-    return null;
+    return <PasswordSkeletonCard className={className} />;
   }
 
   // If user has credential provider, show UpdatePasswordCard
@@ -77,9 +77,9 @@ export function ConditionalUpdatePasswordCard({ className }: ConditionalUpdatePa
 function PasswordSkeletonCard({ className }: { className?: string }) {
   const t = useTranslations('Dashboard.sidebar.settings.items.security');
   return (
-    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col", className)}>
+    <Card className={cn("w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-6 flex flex-col", className)}>
       <CardHeader>
-        <CardTitle>
+        <CardTitle className="text-lg font-semibold">
           {t('password.title')}
         </CardTitle>
         <CardDescription>
@@ -87,11 +87,11 @@ function PasswordSkeletonCard({ className }: { className?: string }) {
         </CardDescription>
       </CardHeader>
       <CardContent className="flex flex-col gap-4 flex-1">
-        <Skeleton className="h-4 w-3/4" />
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-2/3" />
-        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-5 w-1/2" />
+        <Skeleton className="h-6 w-full" />
+        <Skeleton className="h-5 w-1/2" />
+        <Skeleton className="h-6 w-full" />
+        <Skeleton className="h-5 w-3/4" />
       </CardContent>
     </Card>
   );

src/components/settings/security/update-password-card.tsx

@@ -216,26 +216,3 @@ export function UpdatePasswordCard({ className }: UpdatePasswordCardProps) {
     </Card>
   );
 }
-
-export function PasswordSkeletonCard({ className }: { className?: string }) {
-  const t = useTranslations('Dashboard.sidebar.settings.items.security');
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle>
-          {t('password.title')}
-        </CardTitle>
-        <CardDescription>
-          {t('password.description')}
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Skeleton className="h-4 w-3/4" />
-        <Skeleton className="h-4 w-1/2" />
-        <Skeleton className="h-4 w-full" />
-        <Skeleton className="h-4 w-2/3" />
-        <Skeleton className="h-4 w-1/3" />
-      </CardContent>
-    </Card>
-  );
-}