feat(web): settings form states — password reveal, inline validation, loading

- Add a PasswordField with show/hide toggle, hint text and inline error;
  the new-password hint and live "passwords do not match" message now
  render under the fields (submit disabled on mismatch) instead of only
  firing a toast on submit.
- Show skeletons while the connections and referral-stats queries load,
  instead of flashing "Not linked"/0.
- De-nest the referral stat cards (cards-inside-cards) into plain muted
  panels and use tabular-nums for the figures.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/settings/settings-content.tsx

@@ -20,11 +20,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@sase/ui";
+import { Skeleton } from "@sase/ui";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertTriangle,
   CalendarDays,
   Copy,
+  Eye,
+  EyeOff,
   Gift,
   Link2,
   Share2,
@@ -35,6 +38,66 @@ import {
 import { useEffect, useState } from "react";
 import { ChangelogTab } from "./changelog-tab";
 
+function PasswordField({
+  id,
+  label,
+  value,
+  onChange,
+  required,
+  minLength,
+  hint,
+  error,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  minLength?: number;
+  hint?: string;
+  error?: string;
+}) {
+  const { t } = useTranslation();
+  const [show, setShow] = useState(false);
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      <div className="relative">
+        <Input
+          id={id}
+          type={show ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          required={required}
+          minLength={minLength}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={hint || error ? `${id}-hint` : undefined}
+          className="pr-10"
+        />
+        <button
+          type="button"
+          onClick={() => setShow((s) => !s)}
+          aria-label={
+            show ? t("settings.security.hidePassword") : t("settings.security.showPassword")
+          }
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+        </button>
+      </div>
+      {error ? (
+        <p id={`${id}-hint`} className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={`${id}-hint`} className="text-xs text-muted-foreground">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
 export function SettingsContent({
   tab,
   onTabChange,
@@ -61,19 +124,21 @@ export function SettingsContent({
   const [deleting, setDeleting] = useState(false);
 
   // Referral stats
-  const { data: referralStats } = useQuery({
+  const { data: referralStats, isLoading: referralLoading } = useQuery({
     queryKey: ["referral-stats"],
     queryFn: () => api.get<{ totalReferrals: number; rewardDays: number }>("/referrals/stats"),
     retry: false,
   });
 
   // Google connection status
-  const { data: connections } = useQuery({
+  const { data: connections, isLoading: connectionsLoading } = useQuery({
     queryKey: ["connections"],
     queryFn: () => api.get<{ google: boolean }>("/users/me/connections"),
     retry: false,
   });
 
+  const passwordMismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;
+
   useEffect(() => {
     if (user?.name) setName(user.name);
   }, [user?.name]);
@@ -240,39 +305,32 @@ export function SettingsContent({
             </CardHeader>
             <CardContent>
               <form onSubmit={handleChangePassword} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="currentPassword">{t("settings.security.currentPassword")}</Label>
-                  <Input
-                    id="currentPassword"
-                    type="password"
-                    value={currentPassword}
-                    onChange={(e) => setCurrentPassword(e.target.value)}
-                    required
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="newPassword">{t("settings.security.newPassword")}</Label>
-                  <Input
-                    id="newPassword"
-                    type="password"
-                    value={newPassword}
-                    onChange={(e) => setNewPassword(e.target.value)}
-                    required
-                    minLength={8}
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="confirmPassword">{t("settings.security.confirmPassword")}</Label>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    required
-                    minLength={8}
-                  />
-                </div>
-                <Button type="submit" disabled={changingPassword}>
+                <PasswordField
+                  id="currentPassword"
+                  label={t("settings.security.currentPassword")}
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  required
+                />
+                <PasswordField
+                  id="newPassword"
+                  label={t("settings.security.newPassword")}
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  required
+                  minLength={8}
+                  hint={t("settings.security.passwordHint")}
+                />
+                <PasswordField
+                  id="confirmPassword"
+                  label={t("settings.security.confirmPassword")}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  minLength={8}
+                  error={passwordMismatch ? t("auth.passwordsDoNotMatch") : undefined}
+                />
+                <Button type="submit" disabled={changingPassword || passwordMismatch}>
                   {changingPassword
                     ? t("settings.security.changing")
                     : t("settings.security.changePassword")}
@@ -314,15 +372,21 @@ export function SettingsContent({
                   </div>
                   <div>
                     <p className="font-medium">{t("settings.connections.google")}</p>
-                    <Badge variant={connections?.google ? "default" : "secondary"}>
-                      {connections?.google
-                        ? t("settings.connections.linked")
-                        : t("settings.connections.notLinked")}
-                    </Badge>
+                    {connectionsLoading ? (
+                      <Skeleton className="mt-1 h-5 w-20" />
+                    ) : (
+                      <Badge variant={connections?.google ? "default" : "secondary"}>
+                        {connections?.google
+                          ? t("settings.connections.linked")
+                          : t("settings.connections.notLinked")}
+                      </Badge>
+                    )}
                   </div>
                 </div>
                 <div>
-                  {connections?.google ? (
+                  {connectionsLoading ? (
+                    <Skeleton className="h-8 w-24" />
+                  ) : connections?.google ? (
                     <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
                       {t("settings.connections.unlink")}
                     </Button>
@@ -379,22 +443,30 @@ export function SettingsContent({
                   <div>
                     <h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
                     <div className="grid grid-cols-2 gap-4">
-                      <Card>
-                        <CardContent className="py-4 text-center">
-                          <p className="text-3xl font-bold">{referralStats?.totalReferrals ?? 0}</p>
-                          <p className="text-sm text-muted-foreground">
-                            {t("settings.referral.totalReferrals")}
+                      <div className="rounded-lg bg-muted/50 py-4 text-center">
+                        {referralLoading ? (
+                          <Skeleton className="mx-auto h-9 w-12" />
+                        ) : (
+                          <p className="text-3xl font-bold tabular-nums">
+                            {referralStats?.totalReferrals ?? 0}
                           </p>
-                        </CardContent>
-                      </Card>
-                      <Card>
-                        <CardContent className="py-4 text-center">
-                          <p className="text-3xl font-bold">{referralStats?.rewardDays ?? 0}</p>
-                          <p className="text-sm text-muted-foreground">
-                            {t("settings.referral.rewardDays")}
+                        )}
+                        <p className="text-sm text-muted-foreground">
+                          {t("settings.referral.totalReferrals")}
+                        </p>
+                      </div>
+                      <div className="rounded-lg bg-muted/50 py-4 text-center">
+                        {referralLoading ? (
+                          <Skeleton className="mx-auto h-9 w-12" />
+                        ) : (
+                          <p className="text-3xl font-bold tabular-nums">
+                            {referralStats?.rewardDays ?? 0}
                           </p>
-                        </CardContent>
-                      </Card>
+                        )}
+                        <p className="text-sm text-muted-foreground">
+                          {t("settings.referral.rewardDays")}
+                        </p>
+                      </div>
                     </div>
                   </div>
                 </>

apps/web/src/messages/en.json

@@ -412,7 +412,10 @@
       "newPassword": "New Password",
       "confirmPassword": "New Password (Confirm)",
       "changePassword": "Change Password",
-      "changing": "Changing..."
+      "changing": "Changing...",
+      "passwordHint": "At least 8 characters.",
+      "showPassword": "Show password",
+      "hidePassword": "Hide password"
     },
     "connections": {
       "title": "Connected Accounts",

apps/web/src/messages/tr.json

@@ -412,7 +412,10 @@
       "newPassword": "Yeni Şifre",
       "confirmPassword": "Yeni Şifre (Tekrar)",
       "changePassword": "Şifre Değiştir",
-      "changing": "Değiştiriliyor..."
+      "changing": "Değiştiriliyor...",
+      "passwordHint": "En az 8 karakter.",
+      "showPassword": "Şifreyi göster",
+      "hidePassword": "Şifreyi gizle"
     },
     "connections": {
       "title": "Bağlı Hesaplar",