feat(portal): add client settings routes and translations

2026-07-21 12:49:55 +03:00
parent fcc6f2078a
commit 48f9d7bc87
15 changed files with 1720 additions and 68 deletions
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { Button, Card, CardContent, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
+import { toast } from "poyraz-ui/molecules";
+import { useTranslations } from "@/components/i18n/i18n-provider";
+import { applyColorMode } from "@/components/theme/color-mode-sync";
+import { isColorMode, type ColorMode } from "@/lib/color-mode";
+import { savePortalColorModeAction } from "./actions";
+
+const themeOptions = [
+  { value: "light", icon: Sun },
+  { value: "dark", icon: Moon },
+  { value: "system", icon: Monitor },
+] as const;
+
+export function PortalAppearanceForm({
+  initialColorMode,
+}: {
+  initialColorMode: ColorMode;
+}) {
+  const t = useTranslations();
+  const [colorMode, setColorMode] = useState(initialColorMode);
+  const [pending, startTransition] = useTransition();
+
+  function changeColorMode(value: string) {
+    if (!isColorMode(value) || value === colorMode || pending) return;
+    const previous = colorMode;
+    setColorMode(value);
+    applyColorMode(value);
+    startTransition(async () => {
+      const result = await savePortalColorModeAction(value);
+      if (result.errorKey) {
+        setColorMode(previous);
+        applyColorMode(previous);
+        toast.error(t(result.errorKey));
+        return;
+      }
+      toast.success(t("settings.appearance.messages.themeSaved"));
+    });
+  }
+
+  return (
+    <Card>
+      <CardContent className="space-y-6 p-6 sm:p-8">
+        <div className="space-y-1.5">
+          <h2 className="text-xl font-semibold text-foreground">
+            {t("settings.portal.appearance.title")}
+          </h2>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            {t("settings.portal.appearance.description")}
+          </p>
+        </div>
+
+        <RadioGroup
+          value={colorMode}
+          onValueChange={changeColorMode}
+          disabled={pending}
+          aria-label={t("settings.appearance.theme.ariaLabel")}
+          className="grid gap-3 sm:grid-cols-3"
+        >
+          {themeOptions.map((option) => {
+            const Icon = option.icon;
+
+            const selected = colorMode === option.value;
+
+            return (
+              <Label
+                key={option.value}
+                htmlFor={`portal-color-mode-${option.value}`}
+                className={`flex min-h-36 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 transition-colors ${
+                  selected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary"
+                    : "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <span className="flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground">
+                    <Icon className="h-5 w-5" aria-hidden="true" />
+                  </span>
+                  <RadioGroupItem
+                    id={`portal-color-mode-${option.value}`}
+                    value={option.value}
+                    aria-label={t(`settings.appearance.theme.${option.value}.label`)}
+                  />
+                </div>
+                <span className="space-y-1">
+                  <span className="block text-sm font-semibold text-foreground">
+                    {t(`settings.appearance.theme.${option.value}.label`)}
+                  </span>
+                  <span className="block text-xs font-normal text-muted-foreground">
+                    {t(`settings.appearance.theme.${option.value}.description`)}
+                  </span>
+                </span>
+              </Label>
+            );
+          })}
+        </RadioGroup>
+
+        <div className="rounded-md border border-dashed border-border bg-muted/20 p-4 text-sm text-muted-foreground">
+          {t("settings.portal.appearance.brandingNotice")}
+        </div>
+
+        <div className="flex justify-end border-t border-border pt-6">
+          <Button type="button" variant="secondary" effect="shine" loading={pending} disabled>
+            {t("settings.portal.appearance.autoSave")}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}