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

app/(dashboard)/settings/language/actions.ts

@@ -0,0 +1,18 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { updateLanguagePreference } from "@/server/settings/preferences";
+import { requireFreelancerBackend } from "@/server/web/freelancer";
+
+export async function saveLanguagePreferenceAction(language: string) {
+  try {
+    const { actor } = await requireFreelancerBackend();
+    const preferences = updateLanguagePreference(actor, { language });
+    revalidatePath("/", "layout");
+    revalidatePath("/settings/language");
+    return { success: true, language: preferences.language };
+  } catch (error) {
+    console.error("Language preference update failed", error);
+    return { errorKey: "settings.languagePreference.errors.saveFailed" };
+  }
+}

app/(dashboard)/settings/language/language-preference-form.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { AlertTriangle, Check, Globe2, Save } from "lucide-react";
+import { Badge, Button, Card, CardContent, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
+import { Alert, AlertDescription, AlertTitle, toast } from "poyraz-ui/molecules";
+import { useTranslations } from "@/components/i18n/i18n-provider";
+import { saveLanguagePreferenceAction } from "./actions";
+
+type LocaleOption = {
+  code: string;
+  name: string;
+  nativeName: string;
+};
+
+export function LanguagePreferenceForm({
+  activeLocales,
+  defaultLocale,
+  initialLanguage,
+  preferenceNeedsSelection,
+}: {
+  activeLocales: LocaleOption[];
+  defaultLocale: string;
+  initialLanguage: string;
+  preferenceNeedsSelection: boolean;
+}) {
+  const t = useTranslations();
+  const router = useRouter();
+  const [language, setLanguage] = useState(initialLanguage);
+  const [pending, startTransition] = useTransition();
+  const defaultLanguage = activeLocales.find((locale) => locale.code === defaultLocale);
+
+  function submit() {
+    startTransition(async () => {
+      const result = await saveLanguagePreferenceAction(language);
+      if (result.errorKey) {
+        toast.error(t(result.errorKey));
+        return;
+      }
+      toast.success(t("settings.languagePreference.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.languagePreference.title")}
+          </h2>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            {t("settings.languagePreference.description")}
+          </p>
+        </div>
+
+        <Alert>
+          <Globe2 className="h-4 w-4" aria-hidden="true" />
+          <AlertTitle>{t("settings.languagePreference.default.title")}</AlertTitle>
+          <AlertDescription>
+            {defaultLanguage
+              ? t("settings.languagePreference.default.value", {
+                language: defaultLanguage.nativeName,
+                code: defaultLanguage.code,
+              })
+              : defaultLocale}
+          </AlertDescription>
+        </Alert>
+
+        {preferenceNeedsSelection && (
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" aria-hidden="true" />
+            <AlertTitle>{t("settings.languagePreference.fallback.title")}</AlertTitle>
+            <AlertDescription>
+              {t("settings.languagePreference.fallback.description")}
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <RadioGroup
+          value={language}
+          onValueChange={setLanguage}
+          className="grid gap-3 sm:grid-cols-2"
+          aria-label={t("settings.languagePreference.listAriaLabel")}
+        >
+          {activeLocales.map((locale) => (
+            <Label
+              key={locale.code}
+              htmlFor={`language-${locale.code}`}
+              className="flex cursor-pointer items-center gap-4 rounded-xl border border-border bg-card p-4 transition-colors hover:bg-accent/50"
+            >
+              <RadioGroupItem id={`language-${locale.code}`} value={locale.code} />
+              <span className="min-w-0 flex-1">
+                <span className="block font-medium text-foreground">
+                  {locale.nativeName}
+                </span>
+                <span className="block text-sm text-muted-foreground">
+                  {locale.name} · {locale.code}
+                </span>
+              </span>
+              {language === locale.code && (
+                <Check className="h-4 w-4 text-primary" aria-hidden="true" />
+              )}
+              {defaultLocale === locale.code && (
+                <Badge variant="secondary">
+                  {t("settings.languagePreference.default.badge")}
+                </Badge>
+              )}
+            </Label>
+          ))}
+        </RadioGroup>
+
+        <div className="flex justify-end border-t border-border pt-6">
+          <Button
+            type="button"
+            variant="default"
+            effect="shine"
+            loading={pending}
+            disabled={!language}
+            onClick={submit}
+            className="gap-2"
+          >
+            <Save className="h-4 w-4" aria-hidden="true" />
+            {t("settings.languagePreference.actions.save")}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/(dashboard)/settings/language/page.tsx

@@ -0,0 +1,30 @@
+import { getSqliteConnection } from "@/server/db/client";
+import { I18nService } from "@/server/i18n/service";
+import { resolveFreelancerLocale } from "@/server/i18n/resolver";
+import { getUserPreferences } from "@/server/settings/preferences";
+import { requireFreelancerBackend } from "@/server/web/freelancer";
+import { LanguagePreferenceForm } from "./language-preference-form";
+
+export default async function LanguagePreferenceSettingsPage() {
+  const { actor, context } = await requireFreelancerBackend();
+  const i18n = new I18nService(getSqliteConnection().db);
+  const activeLocales = i18n
+    .listLocales(actor)
+    .filter((locale) => locale.status === "active")
+    .map(({ code, name, nativeName }) => ({ code, name, nativeName }));
+  const defaultLocale = i18n.getSettings(actor).defaultLocale;
+  const preferredLanguage = getUserPreferences(actor).language;
+  const resolved = await resolveFreelancerLocale(context);
+  const preferenceIsActive = activeLocales.some(
+    (locale) => locale.code === preferredLanguage,
+  );
+
+  return (
+    <LanguagePreferenceForm
+      activeLocales={activeLocales}
+      defaultLocale={defaultLocale}
+      initialLanguage={preferenceIsActive ? preferredLanguage : resolved.locale}
+      preferenceNeedsSelection={!preferenceIsActive}
+    />
+  );
+}