feat(settings): restructure settings layout and separate route modules

2026-07-20 10:25:40 +03:00
parent cc22c8ee1d
commit b424385667
34 changed files with 2867 additions and 1691 deletions
@@ -0,0 +1,168 @@
+"use client";
+
+import { useMemo, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Building2, Save, TextCursorInput } from "lucide-react";
+import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
+import { toast } from "poyraz-ui/molecules";
+import { useTranslations } from "@/components/i18n/i18n-provider";
+import {
+  LocalizedFields,
+  type LocalizedFieldLocale,
+  type LocalizedFieldValues,
+} from "@/components/i18n/localized-fields";
+import { contentTranslationRegistry } from "@/lib/i18n/content";
+import { saveGeneralSettingsAction } from "./actions";
+
+type GeneralSettingsFormProps = {
+  defaultLocale: string;
+  locales: LocalizedFieldLocale[];
+  initial: {
+    metaTitle: string;
+    shortName: string;
+    workspaceName: string;
+    translations: LocalizedFieldValues;
+  };
+};
+
+export function GeneralSettingsForm({
+  defaultLocale,
+  locales,
+  initial,
+}: GeneralSettingsFormProps) {
+  const t = useTranslations();
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const [workspaceName, setWorkspaceName] = useState(initial.workspaceName);
+  const [metaTitle, setMetaTitle] = useState(initial.metaTitle);
+  const [shortName, setShortName] = useState(initial.shortName);
+  const localizedFields = useMemo(
+    () => contentTranslationRegistry.branding.map((field) => ({
+      ...field,
+      label: field.name === "portalWelcome"
+        ? t("settings.general.fields.portalWelcome")
+        : t("settings.general.fields.portalFooter"),
+      placeholder: field.name === "portalWelcome"
+        ? t("settings.general.placeholders.portalWelcome")
+        : t("settings.general.placeholders.portalFooter"),
+    })),
+    [t],
+  );
+
+  function submit(formData: FormData) {
+    startTransition(async () => {
+      const result = await saveGeneralSettingsAction(formData);
+      if (result.errorKey) {
+        toast.error(t(result.errorKey));
+        return;
+      }
+      toast.success(t("settings.general.messages.saved"));
+      router.refresh();
+    });
+  }
+
+  return (
+    <Card>
+      <CardContent className="space-y-8 p-6 sm:p-8">
+        <div className="space-y-1.5">
+          <h2 className="text-xl font-semibold text-foreground">
+            {t("settings.general.title")}
+          </h2>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            {t("settings.general.description")}
+          </p>
+        </div>
+
+        <form action={submit} className="space-y-8">
+          <section className="space-y-5">
+            <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+              <Building2 className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+              {t("settings.general.sections.identity")}
+            </div>
+            <div className="grid gap-5 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="workspaceName">{t("settings.general.fields.workspaceName")}</Label>
+                <Input
+                  id="workspaceName"
+                  name="workspaceName"
+                  value={workspaceName}
+                  onChange={(event) => setWorkspaceName(event.target.value)}
+                  minLength={1}
+                  maxLength={120}
+                  required
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.general.help.workspaceName")}
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="metaTitle">{t("settings.general.fields.metaTitle")}</Label>
+                <Input
+                  id="metaTitle"
+                  name="metaTitle"
+                  value={metaTitle}
+                  onChange={(event) => setMetaTitle(event.target.value)}
+                  minLength={1}
+                  maxLength={80}
+                  required
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.general.help.metaTitle")}
+                </p>
+              </div>
+            </div>
+            <div className="max-w-md space-y-2">
+              <Label htmlFor="shortName">{t("settings.general.fields.shortName")}</Label>
+              <Input
+                id="shortName"
+                name="shortName"
+                value={shortName}
+                onChange={(event) => setShortName(event.target.value)}
+                minLength={1}
+                maxLength={24}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                {t("settings.general.help.shortName")}
+              </p>
+            </div>
+          </section>
+
+          <section className="space-y-4 border-t border-border pt-7">
+            <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+              <TextCursorInput className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+              {t("settings.general.sections.portalContent")}
+            </div>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              {t("settings.general.help.portalContent")}
+            </p>
+            <LocalizedFields
+              idPrefix="branding-content"
+              defaultLocale={defaultLocale}
+              locales={locales}
+              fields={localizedFields}
+              values={initial.translations}
+              labels={{
+                defaultBadge: t("settings.localized.defaultBadge"),
+                missingRequired: t("settings.localized.missingRequired"),
+              }}
+            />
+          </section>
+
+          <div className="flex justify-end border-t border-border pt-6">
+            <Button
+              type="submit"
+              variant="default"
+              effect="shine"
+              loading={pending}
+              className="gap-2"
+            >
+              <Save className="h-4 w-4" aria-hidden="true" />
+              {t("settings.general.actions.save")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}