feat(settings): restructure settings layout and separate route modules
This commit is contained in:
poyrazavsever
@@ -1,488 +0,0 @@
|
|||||||
"use server";
|
|
||||||
|
|
||||||
import { eq } from "drizzle-orm";
|
|
||||||
import { cookies, headers } from "next/headers";
|
|
||||||
import { revalidatePath } from "next/cache";
|
|
||||||
import { auth } from "@/server/auth/auth";
|
|
||||||
import {
|
|
||||||
COLOR_MODE_COOKIE,
|
|
||||||
COLOR_MODE_COOKIE_MAX_AGE,
|
|
||||||
} from "@/lib/color-mode";
|
|
||||||
import { getServerConfig } from "@/server/config";
|
|
||||||
import { getBrandingService } from "@/server/branding/runtime";
|
|
||||||
import { getSqliteConnection } from "@/server/db/client";
|
|
||||||
import { appProfiles } from "@/server/db/schema";
|
|
||||||
import { runtimeEvents } from "@/server/db/schema/runtime";
|
|
||||||
import { domainActorFromSession } from "@/server/auth/domain-actor";
|
|
||||||
import { getFileService } from "@/server/files/runtime";
|
|
||||||
import { getPublicAiSettings, updateAiSettings } from "@/server/settings/ai";
|
|
||||||
import {
|
|
||||||
getUserPreferences,
|
|
||||||
updateLanguagePreference,
|
|
||||||
updateColorModePreference,
|
|
||||||
} from "@/server/settings/preferences";
|
|
||||||
import { buildLocaleCookie } from "@/server/i18n/locale";
|
|
||||||
import {
|
|
||||||
ContentTranslationService,
|
|
||||||
parseContentTranslationsFromFormData,
|
|
||||||
} from "@/server/i18n/content";
|
|
||||||
import { getReferenceTranslationKeys, I18nService } from "@/server/i18n/service";
|
|
||||||
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
|
||||||
import { cleanText } from "@/server/web/form-data";
|
|
||||||
|
|
||||||
export async function loadSettings() {
|
|
||||||
const { context, actor } = await requireFreelancerBackend();
|
|
||||||
const [firstName = "", ...lastNameParts] = context.profile.displayName.trim().split(/\s+/);
|
|
||||||
const ai = getPublicAiSettings(actor);
|
|
||||||
const preferences = getUserPreferences(actor);
|
|
||||||
const branding = getBrandingService().getPublic();
|
|
||||||
const i18nService = new I18nService(getSqliteConnection().db);
|
|
||||||
const locales = i18nService.listLocales(actor);
|
|
||||||
const i18nSettings = i18nService.getSettings(actor);
|
|
||||||
const translations = i18nService.listUiTranslations(actor);
|
|
||||||
const completion = i18nService.getCompletion(actor);
|
|
||||||
const contentI18n = new ContentTranslationService(getSqliteConnection().db);
|
|
||||||
const brandingTranslations = contentI18n.listEntityTranslations("branding", "default");
|
|
||||||
|
|
||||||
return {
|
|
||||||
firstName,
|
|
||||||
lastName: lastNameParts.join(" "),
|
|
||||||
avatarUrl: context.user.image ?? "",
|
|
||||||
aiProvider: ai.provider,
|
|
||||||
hasApiKey: ai.hasApiKey,
|
|
||||||
colorMode: preferences.colorMode,
|
|
||||||
workspaceName: branding.organizationName ?? branding.applicationName,
|
|
||||||
metaTitle: branding.applicationName,
|
|
||||||
shortName: branding.shortName,
|
|
||||||
primaryColor: branding.primaryColor,
|
|
||||||
lightLogoUrl: branding.lightLogoUrl ?? "",
|
|
||||||
darkLogoUrl: branding.darkLogoUrl ?? "",
|
|
||||||
faviconUrl: branding.iconUrl ?? "",
|
|
||||||
hasCustomLightLogo: Boolean(branding.lightLogoFileId),
|
|
||||||
hasCustomDarkLogo: Boolean(branding.darkLogoFileId),
|
|
||||||
hasCustomFavicon: Boolean(branding.iconFileId),
|
|
||||||
language: preferences.language,
|
|
||||||
i18n: {
|
|
||||||
locales,
|
|
||||||
defaultLocale: i18nSettings.defaultLocale,
|
|
||||||
catalogVersion: i18nSettings.catalogVersion,
|
|
||||||
translations,
|
|
||||||
completion,
|
|
||||||
referenceKeys: getReferenceTranslationKeys("all"),
|
|
||||||
},
|
|
||||||
contentTranslations: {
|
|
||||||
branding: brandingTranslations,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateProfile(formData: FormData) {
|
|
||||||
try {
|
|
||||||
const { context } = await requireFreelancerBackend();
|
|
||||||
const firstName = cleanText(formData.get("firstName"));
|
|
||||||
const lastName = cleanText(formData.get("lastName"));
|
|
||||||
if (!firstName || !lastName || firstName.length > 80 || lastName.length > 120) {
|
|
||||||
return { error: "Ad ve soyad zorunludur." };
|
|
||||||
}
|
|
||||||
|
|
||||||
const displayName = `${firstName} ${lastName}`;
|
|
||||||
await auth.api.updateUser({
|
|
||||||
headers: await headers(),
|
|
||||||
body: { name: displayName },
|
|
||||||
});
|
|
||||||
getSqliteConnection().db
|
|
||||||
.update(appProfiles)
|
|
||||||
.set({ displayName, updatedAt: new Date() })
|
|
||||||
.where(eq(appProfiles.authUserId, context.user.id))
|
|
||||||
.run();
|
|
||||||
|
|
||||||
const avatar = formData.get("avatar");
|
|
||||||
if (avatar instanceof File && avatar.size > 0) {
|
|
||||||
getFileService().upload(domainActorFromSession(context), {
|
|
||||||
kind: "avatar",
|
|
||||||
originalName: avatar.name,
|
|
||||||
claimedMimeType: avatar.type,
|
|
||||||
bytes: new Uint8Array(await avatar.arrayBuffer()),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
revalidatePath("/settings");
|
|
||||||
revalidatePath("/", "layout");
|
|
||||||
return { success: true };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Profil güncellenemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updatePassword(formData: FormData) {
|
|
||||||
const currentPassword = cleanText(formData.get("currentPassword"));
|
|
||||||
const newPassword = cleanText(formData.get("password"));
|
|
||||||
|
|
||||||
if (!currentPassword || !newPassword || newPassword.length < 8) {
|
|
||||||
return { error: "Mevcut şifre zorunludur; yeni şifre en az 8 karakter olmalıdır." };
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
await requireFreelancerBackend();
|
|
||||||
await auth.api.changePassword({
|
|
||||||
headers: await headers(),
|
|
||||||
body: {
|
|
||||||
currentPassword,
|
|
||||||
newPassword,
|
|
||||||
revokeOtherSessions: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return { success: true };
|
|
||||||
} catch {
|
|
||||||
return { error: "Mevcut şifre doğrulanamadı veya şifre güncellenemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function saveAiSettings(provider: string, apiKey: string) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const settings = updateAiSettings(actor, { provider, apiKey });
|
|
||||||
revalidatePath("/settings");
|
|
||||||
return { success: true, hasApiKey: settings.hasApiKey };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Ayarlar kaydedilemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function saveColorMode(colorMode: string) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const preferences = updateColorModePreference(actor, { colorMode });
|
|
||||||
const config = getServerConfig();
|
|
||||||
|
|
||||||
(await cookies()).set(COLOR_MODE_COOKIE, preferences.colorMode, {
|
|
||||||
httpOnly: false,
|
|
||||||
maxAge: COLOR_MODE_COOKIE_MAX_AGE,
|
|
||||||
path: "/",
|
|
||||||
sameSite: "lax",
|
|
||||||
secure: config.secureCookies,
|
|
||||||
});
|
|
||||||
|
|
||||||
revalidatePath("/", "layout");
|
|
||||||
return { success: true, colorMode: preferences.colorMode };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Tema tercihi kaydedilemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function saveLanguagePreference(language: string) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const preferences = updateLanguagePreference(actor, { language });
|
|
||||||
|
|
||||||
(await cookies()).set(buildLocaleCookie(preferences.language));
|
|
||||||
recordI18nEvent(actor.authUserId, `user_language_updated:${preferences.language}`);
|
|
||||||
revalidatePath("/", "layout");
|
|
||||||
revalidatePath("/settings");
|
|
||||||
return { success: true, language: preferences.language };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Dil tercihi kaydedilemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function createLocaleAction(input: {
|
|
||||||
code: string;
|
|
||||||
name: string;
|
|
||||||
nativeName: string;
|
|
||||||
fallbackLocale: string;
|
|
||||||
textDirection: "ltr" | "rtl";
|
|
||||||
}) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
const locale = service.createLocale(actor, input);
|
|
||||||
recordI18nEvent(actor.authUserId, `locale_created:${locale.code}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true, locale };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Dil eklenemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function updateLocaleStatusAction(code: string, status: "draft" | "active" | "archived" | "test") {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
const locale = service.updateLocale(actor, code, { status });
|
|
||||||
recordI18nEvent(actor.authUserId, `locale_status_updated:${locale.code}:${locale.status}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true, locale };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Dil durumu güncellenemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function setDefaultLocaleAction(code: string) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
const settings = service.setDefaultLocale(actor, code);
|
|
||||||
recordI18nEvent(actor.authUserId, `default_locale_updated:${settings.defaultLocale}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true, settings };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Varsayılan dil güncellenemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function saveUiTranslationAction(input: {
|
|
||||||
locale: string;
|
|
||||||
namespace: string;
|
|
||||||
key: string;
|
|
||||||
value: string;
|
|
||||||
}) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
service.upsertUiTranslation(actor, input);
|
|
||||||
recordI18nEvent(actor.authUserId, `ui_translation_saved:${input.locale}:${input.namespace}.${input.key}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Çeviri kaydedilemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function resetUiTranslationAction(input: {
|
|
||||||
locale: string;
|
|
||||||
namespace: string;
|
|
||||||
key: string;
|
|
||||||
}) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
service.resetUiTranslation(actor, input);
|
|
||||||
recordI18nEvent(actor.authUserId, `ui_translation_reset:${input.locale}:${input.namespace}.${input.key}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Çeviri sıfırlanamadı." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function exportI18nAction() {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
recordI18nEvent(actor.authUserId, "i18n_exported");
|
|
||||||
return { success: true, package: service.exportPackage(actor) };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Çeviri paketi dışa aktarılamadı." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function previewI18nImportAction(rawJson: string) {
|
|
||||||
try {
|
|
||||||
await requireFreelancerBackend();
|
|
||||||
const parsed = JSON.parse(rawJson);
|
|
||||||
const localeCount = Array.isArray(parsed.locales) ? parsed.locales.length : 0;
|
|
||||||
const translationCount = Array.isArray(parsed.translations) ? parsed.translations.length : 0;
|
|
||||||
if (parsed.format !== "neta-i18n" || parsed.version !== 1) {
|
|
||||||
return { error: "Import paketi desteklenmiyor." };
|
|
||||||
}
|
|
||||||
return { success: true, preview: { localeCount, translationCount, defaultLocale: parsed.defaultLocale ?? "tr" } };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Import paketi okunamadı." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function commitI18nImportAction(rawJson: string) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const service = new I18nService(getSqliteConnection().db);
|
|
||||||
const result = service.importPackage(actor, JSON.parse(rawJson));
|
|
||||||
recordI18nEvent(actor.authUserId, `i18n_imported:${result.translations.length}`);
|
|
||||||
revalidateI18nPaths();
|
|
||||||
return { success: true, package: result };
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Çeviri paketi içe aktarılamadı." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function saveGeneralSettings(formData: FormData) {
|
|
||||||
const uploadedFileIds: string[] = [];
|
|
||||||
let brandingCommitted = false;
|
|
||||||
let actorForCleanup: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"] | null = null;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
actorForCleanup = actor;
|
|
||||||
|
|
||||||
const workspaceName = cleanText(formData.get("workspaceName"));
|
|
||||||
const metaTitle = cleanText(formData.get("metaTitle"));
|
|
||||||
const shortName = cleanText(formData.get("shortName"));
|
|
||||||
const primaryColor = cleanText(formData.get("primaryColor"))?.toUpperCase() ?? "";
|
|
||||||
if (!workspaceName || workspaceName.length > 120) {
|
|
||||||
return { error: "Workspace adı 1-120 karakter arasında olmalıdır." };
|
|
||||||
}
|
|
||||||
if (!metaTitle || metaTitle.length > 80) {
|
|
||||||
return { error: "Tarayıcı başlığı 1-80 karakter arasında olmalıdır." };
|
|
||||||
}
|
|
||||||
if (!shortName || shortName.length > 24) {
|
|
||||||
return { error: "Kısa uygulama adı 1-24 karakter arasında olmalıdır." };
|
|
||||||
}
|
|
||||||
if (!/^#[0-9A-F]{6}$/.test(primaryColor)) {
|
|
||||||
return { error: "Ana renk #RRGGBB formatında olmalıdır." };
|
|
||||||
}
|
|
||||||
|
|
||||||
const brandingService = getBrandingService();
|
|
||||||
const contentI18n = new ContentTranslationService(getSqliteConnection().db);
|
|
||||||
const localization = contentI18n.getLocalizationContext(actor);
|
|
||||||
const brandingTranslations = parseContentTranslationsFromFormData(formData, "branding", localization);
|
|
||||||
const current = brandingService.getPublic();
|
|
||||||
const lightLogoFileId = await uploadBrandingFile(formData, "lightLogo", "branding_logo", actor);
|
|
||||||
if (lightLogoFileId) uploadedFileIds.push(lightLogoFileId);
|
|
||||||
const darkLogoFileId = await uploadBrandingFile(formData, "darkLogo", "branding_logo", actor);
|
|
||||||
if (darkLogoFileId) uploadedFileIds.push(darkLogoFileId);
|
|
||||||
const iconFileId = await uploadBrandingFile(formData, "favicon", "branding_icon", actor);
|
|
||||||
if (iconFileId) uploadedFileIds.push(iconFileId);
|
|
||||||
|
|
||||||
const updated = brandingService.update(actor, {
|
|
||||||
applicationName: metaTitle,
|
|
||||||
shortName,
|
|
||||||
organizationName: workspaceName,
|
|
||||||
primaryColor,
|
|
||||||
...(lightLogoFileId ? { lightLogoFileId } : {}),
|
|
||||||
...(darkLogoFileId ? { darkLogoFileId } : {}),
|
|
||||||
...(iconFileId ? { iconFileId } : {}),
|
|
||||||
});
|
|
||||||
brandingCommitted = true;
|
|
||||||
contentI18n.upsertEntityTranslations("branding", "default", brandingTranslations);
|
|
||||||
|
|
||||||
deleteSupersededBrandingFiles(actor, current, updated);
|
|
||||||
|
|
||||||
revalidateBrandingPaths();
|
|
||||||
return {
|
|
||||||
success: true,
|
|
||||||
workspaceName: updated.organizationName ?? updated.applicationName,
|
|
||||||
metaTitle: updated.applicationName,
|
|
||||||
shortName: updated.shortName,
|
|
||||||
primaryColor: updated.primaryColor,
|
|
||||||
lightLogoUrl: updated.lightLogoUrl ?? "",
|
|
||||||
darkLogoUrl: updated.darkLogoUrl ?? "",
|
|
||||||
faviconUrl: updated.iconUrl ?? "",
|
|
||||||
hasCustomLightLogo: Boolean(updated.lightLogoFileId),
|
|
||||||
hasCustomDarkLogo: Boolean(updated.darkLogoFileId),
|
|
||||||
hasCustomFavicon: Boolean(updated.iconFileId),
|
|
||||||
};
|
|
||||||
} catch (error) {
|
|
||||||
if (actorForCleanup && !brandingCommitted) {
|
|
||||||
deleteBrandingFilesBestEffort(actorForCleanup, uploadedFileIds);
|
|
||||||
}
|
|
||||||
return { error: error instanceof Error ? error.message : "Genel ayarlar kaydedilemedi." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
type BrandingAsset = "lightLogo" | "darkLogo" | "favicon";
|
|
||||||
|
|
||||||
export async function removeBrandingAsset(asset: BrandingAsset) {
|
|
||||||
try {
|
|
||||||
const { actor } = await requireFreelancerBackend();
|
|
||||||
const brandingService = getBrandingService();
|
|
||||||
const current = brandingService.getPublic();
|
|
||||||
const fieldByAsset = {
|
|
||||||
lightLogo: "lightLogoFileId",
|
|
||||||
darkLogo: "darkLogoFileId",
|
|
||||||
favicon: "iconFileId",
|
|
||||||
} as const;
|
|
||||||
if (!(asset in fieldByAsset)) {
|
|
||||||
return { error: "Geçersiz marka görseli." };
|
|
||||||
}
|
|
||||||
const updated = brandingService.update(actor, { [fieldByAsset[asset]]: null });
|
|
||||||
|
|
||||||
deleteSupersededBrandingFiles(actor, current, updated);
|
|
||||||
revalidateBrandingPaths();
|
|
||||||
return {
|
|
||||||
success: true,
|
|
||||||
lightLogoUrl: updated.lightLogoUrl ?? "",
|
|
||||||
darkLogoUrl: updated.darkLogoUrl ?? "",
|
|
||||||
faviconUrl: updated.iconUrl ?? "",
|
|
||||||
hasCustomLightLogo: Boolean(updated.lightLogoFileId),
|
|
||||||
hasCustomDarkLogo: Boolean(updated.darkLogoFileId),
|
|
||||||
hasCustomFavicon: Boolean(updated.iconFileId),
|
|
||||||
};
|
|
||||||
} catch (error) {
|
|
||||||
return { error: error instanceof Error ? error.message : "Marka görseli kaldırılamadı." };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function uploadBrandingFile(
|
|
||||||
formData: FormData,
|
|
||||||
field: "lightLogo" | "darkLogo" | "favicon",
|
|
||||||
kind: "branding_logo" | "branding_icon",
|
|
||||||
actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"],
|
|
||||||
): Promise<string | null> {
|
|
||||||
const file = formData.get(field);
|
|
||||||
if (!(file instanceof File) || file.size === 0) return null;
|
|
||||||
|
|
||||||
return getFileService().upload(actor, {
|
|
||||||
kind,
|
|
||||||
originalName: file.name,
|
|
||||||
claimedMimeType: file.type,
|
|
||||||
bytes: new Uint8Array(await file.arrayBuffer()),
|
|
||||||
}).id;
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteSupersededBrandingFiles(
|
|
||||||
actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"],
|
|
||||||
previous: ReturnType<ReturnType<typeof getBrandingService>["getPublic"]>,
|
|
||||||
next: ReturnType<ReturnType<typeof getBrandingService>["getPublic"]>,
|
|
||||||
): void {
|
|
||||||
const activeFileIds = new Set([
|
|
||||||
next.lightLogoFileId,
|
|
||||||
next.darkLogoFileId,
|
|
||||||
next.iconFileId,
|
|
||||||
].filter((id): id is string => Boolean(id)));
|
|
||||||
|
|
||||||
deleteBrandingFilesBestEffort(
|
|
||||||
actor,
|
|
||||||
[
|
|
||||||
previous.lightLogoFileId,
|
|
||||||
previous.darkLogoFileId,
|
|
||||||
previous.iconFileId,
|
|
||||||
],
|
|
||||||
activeFileIds,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteBrandingFilesBestEffort(
|
|
||||||
actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"],
|
|
||||||
fileIds: Array<string | null>,
|
|
||||||
exceptIds: ReadonlySet<string> = new Set(),
|
|
||||||
): void {
|
|
||||||
const uniqueFileIds = new Set(fileIds.filter((id): id is string => Boolean(id && !exceptIds.has(id))));
|
|
||||||
for (const fileId of uniqueFileIds) {
|
|
||||||
try {
|
|
||||||
getFileService().delete(actor, fileId);
|
|
||||||
} catch {
|
|
||||||
// The branding update is authoritative; orphan cleanup can safely be retried later.
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function revalidateBrandingPaths(): void {
|
|
||||||
revalidatePath("/", "layout");
|
|
||||||
revalidatePath("/settings");
|
|
||||||
revalidatePath("/portal", "layout");
|
|
||||||
revalidatePath("/manifest.webmanifest");
|
|
||||||
}
|
|
||||||
|
|
||||||
function revalidateI18nPaths(): void {
|
|
||||||
revalidatePath("/", "layout");
|
|
||||||
revalidatePath("/settings");
|
|
||||||
revalidatePath("/portal", "layout");
|
|
||||||
revalidatePath("/api/v1/meta");
|
|
||||||
}
|
|
||||||
|
|
||||||
function recordI18nEvent(authUserId: string, message: string): void {
|
|
||||||
getSqliteConnection().db.insert(runtimeEvents).values({
|
|
||||||
type: "i18n.settings",
|
|
||||||
message: `${authUserId}:${message}`,
|
|
||||||
createdAt: new Date(),
|
|
||||||
}).run();
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { getPublicAiSettings, updateAiSettings } from "@/server/settings/ai";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
export async function saveAiSettingsAction(formData: FormData) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const provider = cleanText(formData.get("provider")) ?? "";
|
||||||
|
const model = cleanText(formData.get("model")) ?? "";
|
||||||
|
const apiKey = cleanText(formData.get("apiKey")) ?? "";
|
||||||
|
const current = getPublicAiSettings(actor);
|
||||||
|
|
||||||
|
if (!["gemini", "openai", "groq", "ollama"].includes(provider)) {
|
||||||
|
return { errorKey: "settings.ai.errors.provider" };
|
||||||
|
}
|
||||||
|
if (model.length > 200) {
|
||||||
|
return { errorKey: "settings.ai.errors.model" };
|
||||||
|
}
|
||||||
|
if (apiKey.length > 4_096) {
|
||||||
|
return { errorKey: "settings.ai.errors.apiKey" };
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
provider !== "ollama"
|
||||||
|
&& !apiKey
|
||||||
|
&& (!current.hasApiKey || current.provider !== provider)
|
||||||
|
) {
|
||||||
|
return { errorKey: "settings.ai.errors.apiKeyRequired" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings = updateAiSettings(actor, {
|
||||||
|
provider,
|
||||||
|
model,
|
||||||
|
apiKey,
|
||||||
|
});
|
||||||
|
revalidatePath("/settings/ai");
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
hasApiKey: settings.hasApiKey,
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error("AI settings update failed", error);
|
||||||
|
return { errorKey: "settings.ai.errors.saveFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,170 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { Bot, Check, KeyRound, Save } from "lucide-react";
|
||||||
|
import { Badge, Button, Card, CardContent, Input, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
|
||||||
|
import { Alert, AlertDescription, AlertTitle, toast } from "poyraz-ui/molecules";
|
||||||
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
||||||
|
import type { AiProvider } from "@/server/db/schema/settings";
|
||||||
|
import { saveAiSettingsAction } from "./actions";
|
||||||
|
|
||||||
|
const providers: AiProvider[] = ["gemini", "openai", "groq", "ollama"];
|
||||||
|
|
||||||
|
export function AiSettingsForm({
|
||||||
|
initial,
|
||||||
|
}: {
|
||||||
|
initial: {
|
||||||
|
provider: AiProvider;
|
||||||
|
model: string | null;
|
||||||
|
hasApiKey: boolean;
|
||||||
|
};
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
const [provider, setProvider] = useState<AiProvider>(initial.provider);
|
||||||
|
const [savedProvider, setSavedProvider] = useState<AiProvider>(initial.provider);
|
||||||
|
const [model, setModel] = useState(initial.model ?? "");
|
||||||
|
const [hasApiKey, setHasApiKey] = useState(initial.hasApiKey);
|
||||||
|
const providerHasApiKey = hasApiKey && provider === savedProvider;
|
||||||
|
|
||||||
|
function submit(formData: FormData) {
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await saveAiSettingsAction(formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setHasApiKey(Boolean(result.hasApiKey));
|
||||||
|
setSavedProvider(provider);
|
||||||
|
toast.success(t("settings.ai.messages.saved"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.ai.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.ai.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={submit} className="space-y-8">
|
||||||
|
<section className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium text-foreground">
|
||||||
|
{t("settings.ai.provider.title")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.ai.provider.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<RadioGroup
|
||||||
|
name="provider"
|
||||||
|
value={provider}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setProvider(value as AiProvider);
|
||||||
|
setModel("");
|
||||||
|
}}
|
||||||
|
className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4"
|
||||||
|
aria-label={t("settings.ai.provider.ariaLabel")}
|
||||||
|
>
|
||||||
|
{providers.map((option) => (
|
||||||
|
<Label
|
||||||
|
key={option}
|
||||||
|
htmlFor={`provider-${option}`}
|
||||||
|
className="flex cursor-pointer items-start gap-3 rounded-xl border border-border bg-card p-4 transition-colors hover:bg-accent/50"
|
||||||
|
>
|
||||||
|
<RadioGroupItem
|
||||||
|
id={`provider-${option}`}
|
||||||
|
value={option}
|
||||||
|
className="mt-0.5"
|
||||||
|
/>
|
||||||
|
<span className="space-y-1">
|
||||||
|
<span className="block font-medium text-foreground">
|
||||||
|
{t(`settings.ai.providers.${option}.name`)}
|
||||||
|
</span>
|
||||||
|
<span className="block text-xs font-normal text-muted-foreground">
|
||||||
|
{t(`settings.ai.providers.${option}.description`)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid gap-6 border-t border-border pt-8 lg:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="model">{t("settings.ai.fields.model")}</Label>
|
||||||
|
<Input
|
||||||
|
id="model"
|
||||||
|
name="model"
|
||||||
|
value={model}
|
||||||
|
onChange={(event) => setModel(event.target.value)}
|
||||||
|
maxLength={200}
|
||||||
|
placeholder={t(`settings.ai.providers.${provider}.defaultModel`)}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.ai.help.model")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{provider === "ollama" ? (
|
||||||
|
<Alert>
|
||||||
|
<Bot className="h-4 w-4" aria-hidden="true" />
|
||||||
|
<AlertTitle>{t("settings.ai.ollama.title")}</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("settings.ai.ollama.description")}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<Label htmlFor="apiKey">{t("settings.ai.fields.apiKey")}</Label>
|
||||||
|
{providerHasApiKey && (
|
||||||
|
<Badge variant="secondary" className="gap-1">
|
||||||
|
<Check className="h-3 w-3" aria-hidden="true" />
|
||||||
|
{t("settings.ai.apiKey.configured")}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
id="apiKey"
|
||||||
|
name="apiKey"
|
||||||
|
type="password"
|
||||||
|
autoComplete="new-password"
|
||||||
|
maxLength={4_096}
|
||||||
|
placeholder={providerHasApiKey
|
||||||
|
? t("settings.ai.apiKey.masked")
|
||||||
|
: t("settings.ai.apiKey.placeholder")}
|
||||||
|
/>
|
||||||
|
<p className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||||
|
<KeyRound className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
|
{providerHasApiKey
|
||||||
|
? t("settings.ai.help.apiKeyExisting")
|
||||||
|
: t("settings.ai.help.apiKeyNew")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</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.ai.actions.save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { getPublicAiSettings } from "@/server/settings/ai";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { AiSettingsForm } from "./ai-settings-form";
|
||||||
|
|
||||||
|
export default async function AiSettingsPage() {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const settings = getPublicAiSettings(actor);
|
||||||
|
return <AiSettingsForm initial={settings} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { cookies } from "next/headers";
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import {
|
||||||
|
COLOR_MODE_COOKIE,
|
||||||
|
COLOR_MODE_COOKIE_MAX_AGE,
|
||||||
|
} from "@/lib/color-mode";
|
||||||
|
import { getBrandingService } from "@/server/branding/runtime";
|
||||||
|
import { getServerConfig } from "@/server/config";
|
||||||
|
import { getFileService } from "@/server/files/runtime";
|
||||||
|
import { updateColorModePreference } from "@/server/settings/preferences";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
type BrandingAsset = "darkLogo" | "favicon" | "lightLogo";
|
||||||
|
type Branding = ReturnType<ReturnType<typeof getBrandingService>["getPublic"]>;
|
||||||
|
type Actor = Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"];
|
||||||
|
|
||||||
|
export async function saveAppearanceSettingsAction(formData: FormData) {
|
||||||
|
const uploadedFileIds: string[] = [];
|
||||||
|
let actorForCleanup: Actor | null = null;
|
||||||
|
let brandingCommitted = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
actorForCleanup = actor;
|
||||||
|
const primaryColor = cleanText(formData.get("primaryColor"))?.toUpperCase() ?? "";
|
||||||
|
if (!/^#[0-9A-F]{6}$/.test(primaryColor)) {
|
||||||
|
return { errorKey: "settings.appearance.errors.primaryColor" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const brandingService = getBrandingService();
|
||||||
|
const current = brandingService.getPublic();
|
||||||
|
const lightLogoFileId = await uploadBrandingFile(formData, "lightLogo", "branding_logo", actor);
|
||||||
|
if (lightLogoFileId) uploadedFileIds.push(lightLogoFileId);
|
||||||
|
const darkLogoFileId = await uploadBrandingFile(formData, "darkLogo", "branding_logo", actor);
|
||||||
|
if (darkLogoFileId) uploadedFileIds.push(darkLogoFileId);
|
||||||
|
const iconFileId = await uploadBrandingFile(formData, "favicon", "branding_icon", actor);
|
||||||
|
if (iconFileId) uploadedFileIds.push(iconFileId);
|
||||||
|
|
||||||
|
const updated = brandingService.update(actor, {
|
||||||
|
primaryColor,
|
||||||
|
...(lightLogoFileId ? { lightLogoFileId } : {}),
|
||||||
|
...(darkLogoFileId ? { darkLogoFileId } : {}),
|
||||||
|
...(iconFileId ? { iconFileId } : {}),
|
||||||
|
});
|
||||||
|
brandingCommitted = true;
|
||||||
|
deleteSupersededBrandingFiles(actor, current, updated);
|
||||||
|
revalidateAppearance();
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
if (actorForCleanup && !brandingCommitted) {
|
||||||
|
deleteBrandingFilesBestEffort(actorForCleanup, uploadedFileIds);
|
||||||
|
}
|
||||||
|
console.error("Appearance settings update failed", error);
|
||||||
|
return { errorKey: "settings.appearance.errors.saveFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveColorModeAction(colorMode: string) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const preferences = updateColorModePreference(actor, { colorMode });
|
||||||
|
const config = getServerConfig();
|
||||||
|
(await cookies()).set(COLOR_MODE_COOKIE, preferences.colorMode, {
|
||||||
|
httpOnly: false,
|
||||||
|
maxAge: COLOR_MODE_COOKIE_MAX_AGE,
|
||||||
|
path: "/",
|
||||||
|
sameSite: "lax",
|
||||||
|
secure: config.secureCookies,
|
||||||
|
});
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
return { success: true, colorMode: preferences.colorMode };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Color mode update failed", error);
|
||||||
|
return { errorKey: "settings.appearance.errors.colorMode" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function removeAppearanceAssetAction(asset: BrandingAsset) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const fieldByAsset = {
|
||||||
|
lightLogo: "lightLogoFileId",
|
||||||
|
darkLogo: "darkLogoFileId",
|
||||||
|
favicon: "iconFileId",
|
||||||
|
} as const;
|
||||||
|
if (!(asset in fieldByAsset)) {
|
||||||
|
return { errorKey: "settings.appearance.errors.invalidAsset" };
|
||||||
|
}
|
||||||
|
const brandingService = getBrandingService();
|
||||||
|
const current = brandingService.getPublic();
|
||||||
|
const updated = brandingService.update(actor, { [fieldByAsset[asset]]: null });
|
||||||
|
deleteSupersededBrandingFiles(actor, current, updated);
|
||||||
|
revalidateAppearance();
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Branding asset removal failed", error);
|
||||||
|
return { errorKey: "settings.appearance.errors.removeFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uploadBrandingFile(
|
||||||
|
formData: FormData,
|
||||||
|
field: BrandingAsset,
|
||||||
|
kind: "branding_icon" | "branding_logo",
|
||||||
|
actor: Actor,
|
||||||
|
) {
|
||||||
|
const file = formData.get(field);
|
||||||
|
if (!(file instanceof File) || file.size === 0) return null;
|
||||||
|
return getFileService().upload(actor, {
|
||||||
|
kind,
|
||||||
|
originalName: file.name,
|
||||||
|
claimedMimeType: file.type,
|
||||||
|
bytes: new Uint8Array(await file.arrayBuffer()),
|
||||||
|
}).id;
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteSupersededBrandingFiles(actor: Actor, previous: Branding, next: Branding) {
|
||||||
|
const activeFileIds = new Set(
|
||||||
|
[next.lightLogoFileId, next.darkLogoFileId, next.iconFileId]
|
||||||
|
.filter((id): id is string => Boolean(id)),
|
||||||
|
);
|
||||||
|
deleteBrandingFilesBestEffort(
|
||||||
|
actor,
|
||||||
|
[previous.lightLogoFileId, previous.darkLogoFileId, previous.iconFileId],
|
||||||
|
activeFileIds,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteBrandingFilesBestEffort(
|
||||||
|
actor: Actor,
|
||||||
|
fileIds: Array<string | null>,
|
||||||
|
exceptIds: ReadonlySet<string> = new Set(),
|
||||||
|
) {
|
||||||
|
const ids = new Set(fileIds.filter((id): id is string => Boolean(id && !exceptIds.has(id))));
|
||||||
|
for (const fileId of ids) {
|
||||||
|
try {
|
||||||
|
getFileService().delete(actor, fileId);
|
||||||
|
} catch {
|
||||||
|
// The DB update is authoritative. Orphan cleanup can be retried.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function revalidateAppearance() {
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
revalidatePath("/settings/appearance");
|
||||||
|
revalidatePath("/portal", "layout");
|
||||||
|
revalidatePath("/manifest.webmanifest");
|
||||||
|
}
|
||||||
@@ -0,0 +1,375 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useEffect, useRef, useState, useTransition } from "react";
|
||||||
|
import {
|
||||||
|
ImageIcon,
|
||||||
|
Monitor,
|
||||||
|
Moon,
|
||||||
|
Palette,
|
||||||
|
Sun,
|
||||||
|
Trash2,
|
||||||
|
Upload,
|
||||||
|
} from "lucide-react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Input,
|
||||||
|
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 {
|
||||||
|
removeAppearanceAssetAction,
|
||||||
|
saveAppearanceSettingsAction,
|
||||||
|
saveColorModeAction,
|
||||||
|
} from "./actions";
|
||||||
|
|
||||||
|
type BrandingAsset = "darkLogo" | "favicon" | "lightLogo";
|
||||||
|
type AssetState = Record<BrandingAsset, string>;
|
||||||
|
|
||||||
|
type AppearanceSettingsFormProps = {
|
||||||
|
initial: {
|
||||||
|
colorMode: ColorMode;
|
||||||
|
primaryColor: string;
|
||||||
|
urls: AssetState;
|
||||||
|
custom: Record<BrandingAsset, boolean>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const themeOptions = [
|
||||||
|
{ value: "light", icon: Sun },
|
||||||
|
{ value: "dark", icon: Moon },
|
||||||
|
{ value: "system", icon: Monitor },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export function AppearanceSettingsForm({ initial }: AppearanceSettingsFormProps) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const [colorMode, setColorMode] = useState(initial.colorMode);
|
||||||
|
const [savingTheme, startThemeTransition] = useTransition();
|
||||||
|
const [savingBrand, startBrandTransition] = useTransition();
|
||||||
|
const [primaryColor, setPrimaryColor] = useState(initial.primaryColor);
|
||||||
|
const [pendingUrls, setPendingUrls] = useState<AssetState>({
|
||||||
|
lightLogo: "",
|
||||||
|
darkLogo: "",
|
||||||
|
favicon: "",
|
||||||
|
});
|
||||||
|
const objectUrls = useRef<Partial<AssetState>>({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const urls = objectUrls.current;
|
||||||
|
return () => Object.values(urls).forEach((url) => url && URL.revokeObjectURL(url));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function changeColorMode(value: string) {
|
||||||
|
if (!isColorMode(value) || value === colorMode || savingTheme) return;
|
||||||
|
const previous = colorMode;
|
||||||
|
setColorMode(value);
|
||||||
|
applyColorMode(value);
|
||||||
|
startThemeTransition(async () => {
|
||||||
|
const result = await saveColorModeAction(value);
|
||||||
|
if (result.errorKey) {
|
||||||
|
setColorMode(previous);
|
||||||
|
applyColorMode(previous);
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.appearance.messages.themeSaved"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectAsset(asset: BrandingAsset, file?: File) {
|
||||||
|
const previous = objectUrls.current[asset];
|
||||||
|
if (previous) URL.revokeObjectURL(previous);
|
||||||
|
const url = file ? URL.createObjectURL(file) : "";
|
||||||
|
objectUrls.current[asset] = url || undefined;
|
||||||
|
setPendingUrls((current) => ({ ...current, [asset]: url }));
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveBranding(formData: FormData) {
|
||||||
|
startBrandTransition(async () => {
|
||||||
|
const result = await saveAppearanceSettingsAction(formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.appearance.messages.brandSaved"));
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAsset(asset: BrandingAsset) {
|
||||||
|
startBrandTransition(async () => {
|
||||||
|
const result = await removeAppearanceAssetAction(asset);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.appearance.messages.assetRemoved"));
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<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.appearance.theme.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.appearance.theme.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<RadioGroup
|
||||||
|
value={colorMode}
|
||||||
|
onValueChange={changeColorMode}
|
||||||
|
disabled={savingTheme}
|
||||||
|
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={`color-mode-${option.value}`}
|
||||||
|
className={`flex min-h-36 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 ${
|
||||||
|
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={`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>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<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.appearance.brand.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.appearance.brand.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={saveBranding} className="space-y-8">
|
||||||
|
<section className="space-y-4">
|
||||||
|
<div className="flex items-center gap-2 text-sm font-semibold text-foreground">
|
||||||
|
<Palette className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
|
||||||
|
{t("settings.appearance.color.title")}
|
||||||
|
</div>
|
||||||
|
<div className="flex max-w-sm items-center gap-3">
|
||||||
|
<Input
|
||||||
|
type="color"
|
||||||
|
value={primaryColor}
|
||||||
|
onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
|
||||||
|
aria-label={t("settings.appearance.color.picker")}
|
||||||
|
className="h-11 w-16 shrink-0 cursor-pointer p-1"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
id="primaryColor"
|
||||||
|
name="primaryColor"
|
||||||
|
value={primaryColor}
|
||||||
|
onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
|
||||||
|
pattern="^#[0-9A-Fa-f]{6}$"
|
||||||
|
maxLength={7}
|
||||||
|
required
|
||||||
|
className="font-mono uppercase"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.appearance.color.help")}
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid gap-5 border-t border-border pt-7 lg:grid-cols-2">
|
||||||
|
<AssetField
|
||||||
|
asset="lightLogo"
|
||||||
|
title={t("settings.appearance.assets.lightLogo")}
|
||||||
|
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||||
|
currentUrl={initial.urls.lightLogo}
|
||||||
|
pendingUrl={pendingUrls.lightLogo}
|
||||||
|
custom={initial.custom.lightLogo}
|
||||||
|
tone="light"
|
||||||
|
disabled={savingBrand}
|
||||||
|
onSelect={selectAsset}
|
||||||
|
onRemove={removeAsset}
|
||||||
|
removeLabel={t("settings.appearance.actions.remove")}
|
||||||
|
previewAlt={t("settings.appearance.assets.previewAlt", {
|
||||||
|
asset: t("settings.appearance.assets.lightLogo"),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<AssetField
|
||||||
|
asset="darkLogo"
|
||||||
|
title={t("settings.appearance.assets.darkLogo")}
|
||||||
|
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||||
|
currentUrl={initial.urls.darkLogo}
|
||||||
|
pendingUrl={pendingUrls.darkLogo}
|
||||||
|
custom={initial.custom.darkLogo}
|
||||||
|
tone="dark"
|
||||||
|
disabled={savingBrand}
|
||||||
|
onSelect={selectAsset}
|
||||||
|
onRemove={removeAsset}
|
||||||
|
removeLabel={t("settings.appearance.actions.remove")}
|
||||||
|
previewAlt={t("settings.appearance.assets.previewAlt", {
|
||||||
|
asset: t("settings.appearance.assets.darkLogo"),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="border-t border-border pt-7">
|
||||||
|
<AssetField
|
||||||
|
asset="favicon"
|
||||||
|
title={t("settings.appearance.assets.favicon")}
|
||||||
|
description={t("settings.appearance.assets.faviconHelp")}
|
||||||
|
accept="image/png"
|
||||||
|
currentUrl={initial.urls.favicon}
|
||||||
|
pendingUrl={pendingUrls.favicon}
|
||||||
|
custom={initial.custom.favicon}
|
||||||
|
tone="neutral"
|
||||||
|
disabled={savingBrand}
|
||||||
|
onSelect={selectAsset}
|
||||||
|
onRemove={removeAsset}
|
||||||
|
removeLabel={t("settings.appearance.actions.remove")}
|
||||||
|
previewAlt={t("settings.appearance.assets.previewAlt", {
|
||||||
|
asset: t("settings.appearance.assets.favicon"),
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="flex justify-end border-t border-border pt-6">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="default"
|
||||||
|
effect="shine"
|
||||||
|
loading={savingBrand}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<Upload className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{t("settings.appearance.actions.save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AssetField({
|
||||||
|
asset,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
accept,
|
||||||
|
currentUrl,
|
||||||
|
pendingUrl,
|
||||||
|
custom,
|
||||||
|
tone,
|
||||||
|
disabled,
|
||||||
|
onSelect,
|
||||||
|
onRemove,
|
||||||
|
removeLabel,
|
||||||
|
previewAlt,
|
||||||
|
}: {
|
||||||
|
asset: BrandingAsset;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
accept: string;
|
||||||
|
currentUrl: string;
|
||||||
|
pendingUrl: string;
|
||||||
|
custom: boolean;
|
||||||
|
tone: "dark" | "light" | "neutral";
|
||||||
|
disabled: boolean;
|
||||||
|
onSelect: (asset: BrandingAsset, file?: File) => void;
|
||||||
|
onRemove: (asset: BrandingAsset) => void;
|
||||||
|
removeLabel: string;
|
||||||
|
previewAlt: string;
|
||||||
|
}) {
|
||||||
|
const previewUrl = pendingUrl || (custom ? currentUrl : "");
|
||||||
|
const toneClass = tone === "dark"
|
||||||
|
? "bg-neutral-950"
|
||||||
|
: tone === "light"
|
||||||
|
? "bg-white"
|
||||||
|
: "bg-muted/40";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-4 rounded-md border border-border p-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor={asset}>{title}</Label>
|
||||||
|
{description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
id={asset}
|
||||||
|
name={asset}
|
||||||
|
type="file"
|
||||||
|
accept={accept}
|
||||||
|
onChange={(event) => onSelect(asset, event.target.files?.[0])}
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
{custom ? (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
effect="shine"
|
||||||
|
size="sm"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => onRemove(asset)}
|
||||||
|
className="gap-2 text-destructive hover:text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{removeLabel}
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className={`flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border p-4 ${toneClass}`}>
|
||||||
|
{previewUrl ? (
|
||||||
|
<Image
|
||||||
|
src={previewUrl}
|
||||||
|
alt={previewAlt}
|
||||||
|
width={220}
|
||||||
|
height={80}
|
||||||
|
unoptimized
|
||||||
|
className="max-h-20 w-auto max-w-full object-contain"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ImageIcon
|
||||||
|
className={`h-7 w-7 ${tone === "dark" ? "text-neutral-400" : "text-muted-foreground"}`}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { getBrandingService } from "@/server/branding/runtime";
|
||||||
|
import { getUserPreferences } from "@/server/settings/preferences";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { AppearanceSettingsForm } from "./appearance-settings-form";
|
||||||
|
|
||||||
|
export default async function AppearanceSettingsPage() {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const branding = getBrandingService().getPublic();
|
||||||
|
const preferences = getUserPreferences(actor);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AppearanceSettingsForm
|
||||||
|
initial={{
|
||||||
|
colorMode: preferences.colorMode,
|
||||||
|
primaryColor: branding.primaryColor,
|
||||||
|
urls: {
|
||||||
|
lightLogo: branding.lightLogoUrl ?? "",
|
||||||
|
darkLogo: branding.darkLogoUrl ?? "",
|
||||||
|
favicon: branding.iconUrl ?? "",
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
lightLogo: Boolean(branding.lightLogoFileId),
|
||||||
|
darkLogo: Boolean(branding.darkLogoFileId),
|
||||||
|
favicon: Boolean(branding.iconFileId),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useI18n } from "@/components/i18n/i18n-provider";
|
||||||
|
import { Button, Card, CardContent } from "poyraz-ui/atoms";
|
||||||
|
|
||||||
|
export default function SettingsError({
|
||||||
|
reset,
|
||||||
|
}: {
|
||||||
|
error: Error & { digest?: string };
|
||||||
|
reset: () => void;
|
||||||
|
}) {
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-4 p-6 sm:p-8">
|
||||||
|
<h2 className="text-lg font-semibold text-foreground">
|
||||||
|
{t("settings.shell.errorTitle")}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.shell.errorDescription")}
|
||||||
|
</p>
|
||||||
|
<Button effect="shine" variant="default" onClick={reset}>
|
||||||
|
{t("settings.shell.retry")}
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { getBrandingService } from "@/server/branding/runtime";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import {
|
||||||
|
ContentTranslationService,
|
||||||
|
parseContentTranslationsFromFormData,
|
||||||
|
} from "@/server/i18n/content";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
export async function saveGeneralSettingsAction(formData: FormData) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const workspaceName = cleanText(formData.get("workspaceName"));
|
||||||
|
const metaTitle = cleanText(formData.get("metaTitle"));
|
||||||
|
const shortName = cleanText(formData.get("shortName"));
|
||||||
|
|
||||||
|
if (!workspaceName || workspaceName.length > 120) {
|
||||||
|
return { errorKey: "settings.general.errors.workspaceName" };
|
||||||
|
}
|
||||||
|
if (!metaTitle || metaTitle.length > 80) {
|
||||||
|
return { errorKey: "settings.general.errors.metaTitle" };
|
||||||
|
}
|
||||||
|
if (!shortName || shortName.length > 24) {
|
||||||
|
return { errorKey: "settings.general.errors.shortName" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const contentI18n = new ContentTranslationService(getSqliteConnection().db);
|
||||||
|
const localization = contentI18n.getLocalizationContext(actor);
|
||||||
|
const activeLocalization = {
|
||||||
|
...localization,
|
||||||
|
locales: localization.locales.filter((locale) => locale.status === "active"),
|
||||||
|
};
|
||||||
|
const translations = parseContentTranslationsFromFormData(
|
||||||
|
formData,
|
||||||
|
"branding",
|
||||||
|
activeLocalization,
|
||||||
|
);
|
||||||
|
|
||||||
|
const defaultContent = translations[activeLocalization.defaultLocale] ?? {};
|
||||||
|
const branding = getBrandingService().update(actor, {
|
||||||
|
applicationName: metaTitle,
|
||||||
|
shortName,
|
||||||
|
organizationName: workspaceName,
|
||||||
|
portalWelcomeText: defaultContent.portalWelcome ?? null,
|
||||||
|
portalFooterText: defaultContent.portalFooter ?? null,
|
||||||
|
});
|
||||||
|
contentI18n.upsertEntityTranslations("branding", "default", translations);
|
||||||
|
|
||||||
|
revalidateGeneralSettings();
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
workspaceName: branding.organizationName ?? branding.applicationName,
|
||||||
|
metaTitle: branding.applicationName,
|
||||||
|
shortName: branding.shortName,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error("General settings update failed", error);
|
||||||
|
return { errorKey: "settings.general.errors.saveFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function revalidateGeneralSettings() {
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
revalidatePath("/settings/general");
|
||||||
|
revalidatePath("/portal", "layout");
|
||||||
|
revalidatePath("/manifest.webmanifest");
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { getBrandingService } from "@/server/branding/runtime";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { ContentTranslationService } from "@/server/i18n/content";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { GeneralSettingsForm } from "./general-settings-form";
|
||||||
|
|
||||||
|
export default async function GeneralSettingsPage() {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const branding = getBrandingService().getPublic();
|
||||||
|
const contentI18n = new ContentTranslationService(getSqliteConnection().db);
|
||||||
|
const localization = contentI18n.getLocalizationContext(actor);
|
||||||
|
const translations = contentI18n.listEntityTranslations("branding", "default");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GeneralSettingsForm
|
||||||
|
defaultLocale={localization.defaultLocale}
|
||||||
|
locales={localization.locales.filter((locale) => locale.status === "active")}
|
||||||
|
initial={{
|
||||||
|
workspaceName: branding.organizationName ?? branding.applicationName,
|
||||||
|
metaTitle: branding.applicationName,
|
||||||
|
shortName: branding.shortName,
|
||||||
|
translations: toLocalizedValues(translations),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toLocalizedValues(
|
||||||
|
rows: Array<{ locale: string; field: string; value: string }>,
|
||||||
|
) {
|
||||||
|
return rows.reduce<Record<string, Record<string, string>>>((result, row) => {
|
||||||
|
result[row.locale] = result[row.locale] ?? {};
|
||||||
|
result[row.locale][row.field] = row.value;
|
||||||
|
return result;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
@@ -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" };
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,120 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { DomainError } from "@/server/domain/errors";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
export async function updateLanguageMetadataAction(
|
||||||
|
localeCode: string,
|
||||||
|
formData: FormData,
|
||||||
|
) {
|
||||||
|
const name = cleanText(formData.get("name")) ?? "";
|
||||||
|
const nativeName = cleanText(formData.get("nativeName")) ?? "";
|
||||||
|
const fallbackLocale = cleanText(formData.get("fallbackLocale")) ?? "";
|
||||||
|
const textDirection = cleanText(formData.get("textDirection")) ?? "";
|
||||||
|
|
||||||
|
if (!name || name.length > 80) {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.name" };
|
||||||
|
}
|
||||||
|
if (!nativeName || nativeName.length > 80) {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.nativeName" };
|
||||||
|
}
|
||||||
|
if (textDirection !== "ltr" && textDirection !== "rtl") {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.direction" };
|
||||||
|
}
|
||||||
|
if (fallbackLocale === localeCode) {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.selfFallback" };
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const current = service
|
||||||
|
.listLocales(actor)
|
||||||
|
.find((locale) => locale.code === localeCode);
|
||||||
|
if (!current) return { errorKey: "settings.languageDetail.errors.notFound" };
|
||||||
|
if (current.builtIn) {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.builtInMetadata" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const locale = service.updateLocale(actor, localeCode, {
|
||||||
|
name,
|
||||||
|
nativeName,
|
||||||
|
fallbackLocale,
|
||||||
|
textDirection,
|
||||||
|
});
|
||||||
|
revalidateLanguage(locale.code);
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Language metadata update failed", error);
|
||||||
|
if (error instanceof DomainError) {
|
||||||
|
if (error.details?.reason === "fallback_loop") {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.fallbackLoop" };
|
||||||
|
}
|
||||||
|
if (error.details?.reason === "self_fallback") {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.selfFallback" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { errorKey: "settings.languageDetail.errors.metadataFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function activateLanguageAction(localeCode: string) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const readiness = service.getLocaleReadiness(actor, localeCode);
|
||||||
|
if (!readiness.canActivate) {
|
||||||
|
return {
|
||||||
|
errorKey: "settings.languageDetail.errors.notReady",
|
||||||
|
missingCriticalCount: readiness.missingCriticalKeys.length,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
service.updateLocale(actor, localeCode, { status: "active" });
|
||||||
|
revalidateLanguage(localeCode);
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Language activation failed", error);
|
||||||
|
return { errorKey: "settings.languageDetail.errors.activateFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setDetailDefaultLocaleAction(localeCode: string) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
service.setDefaultLocale(actor, localeCode);
|
||||||
|
revalidateLanguage(localeCode);
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Detail default locale update failed", error);
|
||||||
|
return { errorKey: "settings.languageDetail.errors.defaultFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function archiveLanguageAction(localeCode: string) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const readiness = service.getLocaleReadiness(actor, localeCode);
|
||||||
|
if (!readiness.canArchive) {
|
||||||
|
return { errorKey: "settings.languageDetail.errors.archiveBlocked" };
|
||||||
|
}
|
||||||
|
service.archiveLocale(actor, localeCode);
|
||||||
|
revalidateLanguage(localeCode);
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Language archive failed", error);
|
||||||
|
return { errorKey: "settings.languageDetail.errors.archiveFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function revalidateLanguage(localeCode: string) {
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
revalidatePath("/settings/language");
|
||||||
|
revalidatePath("/settings/languages");
|
||||||
|
revalidatePath(`/settings/languages/${localeCode}`);
|
||||||
|
}
|
||||||
@@ -0,0 +1,394 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { AlertTriangle, ArrowLeft, CheckCircle2, Languages, Save, ShieldCheck } from "lucide-react";
|
||||||
|
import { Badge, Button, Card, CardContent, Input, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
|
||||||
|
import { Alert, AlertDescription, AlertTitle, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from "poyraz-ui/molecules";
|
||||||
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
||||||
|
import { DestructiveConfirmation } from "@/components/system/destructive-confirmation";
|
||||||
|
import type { LocaleStatus, TextDirection } from "@/server/db/schema";
|
||||||
|
import type { LocaleReadiness, LocaleUsage, NamespaceCompletion } from "@/server/i18n/service";
|
||||||
|
import {
|
||||||
|
activateLanguageAction,
|
||||||
|
archiveLanguageAction,
|
||||||
|
setDetailDefaultLocaleAction,
|
||||||
|
updateLanguageMetadataAction,
|
||||||
|
} from "./actions";
|
||||||
|
|
||||||
|
type LocaleDetail = {
|
||||||
|
builtIn: boolean;
|
||||||
|
code: string;
|
||||||
|
fallbackLocale: string | null;
|
||||||
|
name: string;
|
||||||
|
nativeName: string;
|
||||||
|
status: LocaleStatus;
|
||||||
|
textDirection: TextDirection;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LifecycleAction = "activate" | "archive" | "default";
|
||||||
|
|
||||||
|
export function LanguageDetail({
|
||||||
|
completion,
|
||||||
|
defaultLocale,
|
||||||
|
fallbackOptions,
|
||||||
|
locale,
|
||||||
|
namespaceCompletion,
|
||||||
|
readiness,
|
||||||
|
usage,
|
||||||
|
}: {
|
||||||
|
completion: number;
|
||||||
|
defaultLocale: string;
|
||||||
|
fallbackOptions: Array<{ code: string; nativeName: string }>;
|
||||||
|
locale: LocaleDetail;
|
||||||
|
namespaceCompletion: NamespaceCompletion[];
|
||||||
|
readiness: LocaleReadiness;
|
||||||
|
usage: LocaleUsage;
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const router = useRouter();
|
||||||
|
const [fallbackLocale, setFallbackLocale] = useState(locale.fallbackLocale ?? "");
|
||||||
|
const [dialog, setDialog] = useState<LifecycleAction | null>(null);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
const isDefault = defaultLocale === locale.code;
|
||||||
|
const criticalComplete = readiness.missingCriticalKeys.length === 0;
|
||||||
|
|
||||||
|
function updateMetadata(formData: FormData) {
|
||||||
|
formData.set("fallbackLocale", fallbackLocale);
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await updateLanguageMetadataAction(locale.code, formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.languageDetail.messages.metadataSaved"));
|
||||||
|
router.refresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmLifecycle() {
|
||||||
|
if (!dialog) return;
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = dialog === "activate"
|
||||||
|
? await activateLanguageAction(locale.code)
|
||||||
|
: dialog === "default"
|
||||||
|
? await setDetailDefaultLocaleAction(locale.code)
|
||||||
|
: await archiveLanguageAction(locale.code);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey, {
|
||||||
|
count: "missingCriticalCount" in result
|
||||||
|
? Number(
|
||||||
|
result.missingCriticalCount
|
||||||
|
?? readiness.missingCriticalKeys.length,
|
||||||
|
)
|
||||||
|
: readiness.archiveReferences,
|
||||||
|
}));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t(`settings.languageDetail.messages.${dialog}`));
|
||||||
|
setDialog(null);
|
||||||
|
router.refresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogName = dialog ?? "activate";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-7 p-6 sm:p-8">
|
||||||
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Button asChild size="icon-sm" variant="secondary" effect="shine">
|
||||||
|
<Link href="/settings/languages" aria-label={t("settings.languageDetail.actions.back")}>
|
||||||
|
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<h2 className="text-xl font-semibold text-foreground">{locale.nativeName}</h2>
|
||||||
|
<Badge variant="secondary">{locale.code}</Badge>
|
||||||
|
<Badge variant="outline">
|
||||||
|
{t(`settings.languages.status.${locale.status}`)}
|
||||||
|
</Badge>
|
||||||
|
{locale.builtIn && (
|
||||||
|
<Badge variant="secondary">{t("settings.languages.badges.builtIn")}</Badge>
|
||||||
|
)}
|
||||||
|
{isDefault && (
|
||||||
|
<Badge variant="default">{t("settings.languages.badges.default")}</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground">{locale.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button asChild variant="secondary" effect="shine" className="gap-2">
|
||||||
|
<Link href="#translation-completion">
|
||||||
|
<Languages className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{t("settings.languageDetail.actions.translations")}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{locale.builtIn ? (
|
||||||
|
<Alert>
|
||||||
|
<ShieldCheck className="h-4 w-4" aria-hidden="true" />
|
||||||
|
<AlertTitle>{t("settings.languageDetail.builtIn.title")}</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("settings.languageDetail.builtIn.description")}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : (
|
||||||
|
<form action={updateMetadata} className="max-w-3xl space-y-6 border-t border-border pt-7">
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="detail-name">{t("settings.languageDetail.fields.name")}</Label>
|
||||||
|
<Input id="detail-name" name="name" defaultValue={locale.name} maxLength={80} required />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="detail-native-name">
|
||||||
|
{t("settings.languageDetail.fields.nativeName")}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="detail-native-name"
|
||||||
|
name="nativeName"
|
||||||
|
defaultValue={locale.nativeName}
|
||||||
|
maxLength={80}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>{t("settings.languageDetail.fields.fallback")}</Label>
|
||||||
|
<Select value={fallbackLocale} onValueChange={setFallbackLocale}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{fallbackOptions.map((option) => (
|
||||||
|
<SelectItem key={option.code} value={option.code}>
|
||||||
|
{option.nativeName} ({option.code})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<fieldset className="space-y-2">
|
||||||
|
<legend className="text-sm font-medium text-foreground">
|
||||||
|
{t("settings.languageDetail.fields.direction")}
|
||||||
|
</legend>
|
||||||
|
<RadioGroup
|
||||||
|
name="textDirection"
|
||||||
|
defaultValue={locale.textDirection}
|
||||||
|
className="grid grid-cols-2 gap-2"
|
||||||
|
>
|
||||||
|
{(["ltr", "rtl"] as const).map((direction) => (
|
||||||
|
<Label
|
||||||
|
key={direction}
|
||||||
|
htmlFor={`detail-direction-${direction}`}
|
||||||
|
className="flex cursor-pointer items-center gap-2 rounded-lg border border-border p-3"
|
||||||
|
>
|
||||||
|
<RadioGroupItem
|
||||||
|
id={`detail-direction-${direction}`}
|
||||||
|
value={direction}
|
||||||
|
/>
|
||||||
|
{t(`settings.languageNew.direction.${direction}`)}
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="default"
|
||||||
|
effect="shine"
|
||||||
|
loading={pending}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<Save className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{t("settings.languageDetail.actions.save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid gap-6 xl:grid-cols-2">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-5 p-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground">
|
||||||
|
{t("settings.languageDetail.readiness.title")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.languageDetail.readiness.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ReadinessRow
|
||||||
|
complete={criticalComplete}
|
||||||
|
label={t("settings.languageDetail.readiness.critical", {
|
||||||
|
count: readiness.missingCriticalKeys.length,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
<ReadinessRow
|
||||||
|
complete={locale.status === "active"}
|
||||||
|
label={t("settings.languageDetail.readiness.active")}
|
||||||
|
/>
|
||||||
|
<ReadinessRow
|
||||||
|
complete={readiness.archiveReferences === 0}
|
||||||
|
label={t("settings.languageDetail.readiness.references", {
|
||||||
|
count: readiness.archiveReferences,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
{!criticalComplete && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertTriangle className="h-4 w-4" aria-hidden="true" />
|
||||||
|
<AlertTitle>{t("settings.languageDetail.readiness.blockedTitle")}</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("settings.languageDetail.readiness.blockedDescription", {
|
||||||
|
count: readiness.missingCriticalKeys.length,
|
||||||
|
})}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<div className="flex flex-wrap gap-2 border-t border-border pt-5">
|
||||||
|
{locale.status !== "active" && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="default"
|
||||||
|
effect="shine"
|
||||||
|
disabled={!readiness.canActivate}
|
||||||
|
onClick={() => setDialog("activate")}
|
||||||
|
>
|
||||||
|
{t("settings.languageDetail.actions.activate")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{!isDefault && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
effect="shine"
|
||||||
|
disabled={!readiness.canSetDefault}
|
||||||
|
onClick={() => setDialog("default")}
|
||||||
|
>
|
||||||
|
{t("settings.languageDetail.actions.makeDefault")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{!locale.builtIn && locale.status !== "archived" && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
effect="shine"
|
||||||
|
disabled={!readiness.canArchive}
|
||||||
|
onClick={() => setDialog("archive")}
|
||||||
|
>
|
||||||
|
{t("settings.languageDetail.actions.archive")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-5 p-6">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground">
|
||||||
|
{t("settings.languageDetail.usage.title")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.languageDetail.usage.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
{Object.entries(usage).map(([key, count]) => (
|
||||||
|
<div key={key} className="rounded-lg border border-border p-3">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t(`settings.languageDetail.usage.${key}`)}
|
||||||
|
</p>
|
||||||
|
<p className="mt-1 text-lg font-semibold text-foreground">{count}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card id="translation-completion" className="scroll-mt-8">
|
||||||
|
<CardContent className="space-y-5 p-6">
|
||||||
|
<div className="flex items-end justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-foreground">
|
||||||
|
{t("settings.languageDetail.completion.title")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.languageDetail.completion.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="text-2xl font-semibold text-foreground">{completion}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{namespaceCompletion.map((item) => (
|
||||||
|
<div key={item.namespace} className="rounded-lg border border-border p-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<span className="text-sm font-medium text-foreground">
|
||||||
|
{t(`settings.languageDetail.namespaces.${item.namespace}`)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground">{item.percent}%</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${item.percent}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="mt-2 text-xs text-muted-foreground">
|
||||||
|
{t("settings.languageDetail.completion.value", {
|
||||||
|
translated: item.translated,
|
||||||
|
total: item.total,
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<DestructiveConfirmation
|
||||||
|
open={Boolean(dialog)}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) setDialog(null);
|
||||||
|
}}
|
||||||
|
loading={pending}
|
||||||
|
title={t(`settings.languageDetail.dialog.${dialogName}.title`)}
|
||||||
|
description={t(`settings.languageDetail.dialog.${dialogName}.description`, {
|
||||||
|
language: locale.nativeName,
|
||||||
|
})}
|
||||||
|
cancelLabel={t("settings.languageDetail.dialog.cancel")}
|
||||||
|
confirmLabel={t(`settings.languageDetail.dialog.${dialogName}.confirm`)}
|
||||||
|
onConfirm={confirmLifecycle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ReadinessRow({
|
||||||
|
complete,
|
||||||
|
label,
|
||||||
|
}: {
|
||||||
|
complete: boolean;
|
||||||
|
label: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-3 text-sm">
|
||||||
|
{complete ? (
|
||||||
|
<CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
<span className="text-foreground">{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { LanguageDetail } from "./language-detail";
|
||||||
|
|
||||||
|
export default async function LanguageDetailPage({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ locale: string }>;
|
||||||
|
}) {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const { locale: localeCode } = await params;
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const locales = service.listLocales(actor);
|
||||||
|
const locale = locales.find((item) => item.code === localeCode);
|
||||||
|
if (!locale) notFound();
|
||||||
|
|
||||||
|
const completion = service
|
||||||
|
.getCompletion(actor)
|
||||||
|
.find((item) => item.locale === locale.code)?.percent ?? 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LanguageDetail
|
||||||
|
locale={locale}
|
||||||
|
defaultLocale={service.getSettings(actor).defaultLocale}
|
||||||
|
completion={completion}
|
||||||
|
namespaceCompletion={service.getNamespaceCompletion(actor, locale.code)}
|
||||||
|
readiness={service.getLocaleReadiness(actor, locale.code)}
|
||||||
|
usage={service.getLocaleUsage(actor, locale.code)}
|
||||||
|
fallbackOptions={locales
|
||||||
|
.filter(
|
||||||
|
(item) => item.code !== locale.code && item.status !== "archived",
|
||||||
|
)
|
||||||
|
.map(({ code, nativeName }) => ({ code, nativeName }))}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
|
||||||
|
export async function setInstanceDefaultLocaleAction(code: string) {
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const settings = service.setDefaultLocale(actor, code);
|
||||||
|
revalidateLanguageManagement();
|
||||||
|
return { success: true, defaultLocale: settings.defaultLocale };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Default locale update failed", error);
|
||||||
|
return { errorKey: "settings.languages.errors.defaultFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function revalidateLanguageManagement() {
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
revalidatePath("/settings/languages");
|
||||||
|
revalidatePath("/settings/language");
|
||||||
|
}
|
||||||
@@ -0,0 +1,209 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useMemo, useState, useTransition } from "react";
|
||||||
|
import { Check, Languages, Plus, Settings2 } from "lucide-react";
|
||||||
|
import { Badge, Button, Card, CardContent } from "poyraz-ui/atoms";
|
||||||
|
import { toast } from "poyraz-ui/molecules";
|
||||||
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
||||||
|
import { DestructiveConfirmation } from "@/components/system/destructive-confirmation";
|
||||||
|
import type { LocaleStatus } from "@/server/db/schema";
|
||||||
|
import { setInstanceDefaultLocaleAction } from "./actions";
|
||||||
|
|
||||||
|
type LanguageListItem = {
|
||||||
|
builtIn: boolean;
|
||||||
|
code: string;
|
||||||
|
completion: number;
|
||||||
|
fallbackName: string | null;
|
||||||
|
name: string;
|
||||||
|
nativeName: string;
|
||||||
|
status: LocaleStatus;
|
||||||
|
usage: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filters = ["all", "draft", "active", "archived"] as const;
|
||||||
|
type Filter = (typeof filters)[number];
|
||||||
|
|
||||||
|
export function LanguagesList({
|
||||||
|
initialDefaultLocale,
|
||||||
|
languages,
|
||||||
|
}: {
|
||||||
|
initialDefaultLocale: string;
|
||||||
|
languages: LanguageListItem[];
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const router = useRouter();
|
||||||
|
const [filter, setFilter] = useState<Filter>("all");
|
||||||
|
const [defaultLocale, setDefaultLocale] = useState(initialDefaultLocale);
|
||||||
|
const [pendingLocale, setPendingLocale] = useState<LanguageListItem | null>(null);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
const filtered = useMemo(
|
||||||
|
() => filter === "all"
|
||||||
|
? languages
|
||||||
|
: languages.filter((language) => language.status === filter),
|
||||||
|
[filter, languages],
|
||||||
|
);
|
||||||
|
|
||||||
|
function confirmDefault() {
|
||||||
|
if (!pendingLocale) return;
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await setInstanceDefaultLocaleAction(pendingLocale.code);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setDefaultLocale(result.defaultLocale ?? pendingLocale.code);
|
||||||
|
setPendingLocale(null);
|
||||||
|
toast.success(t("settings.languages.messages.defaultSaved"));
|
||||||
|
router.refresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-7 p-6 sm:p-8">
|
||||||
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<h2 className="text-xl font-semibold text-foreground">
|
||||||
|
{t("settings.languages.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.languages.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button asChild variant="default" effect="shine" className="gap-2">
|
||||||
|
<Link href="/settings/languages/new">
|
||||||
|
<Plus className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{t("settings.languages.actions.add")}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="flex gap-2 overflow-x-auto border-y border-border py-4"
|
||||||
|
aria-label={t("settings.languages.filters.ariaLabel")}
|
||||||
|
>
|
||||||
|
{filters.map((item) => (
|
||||||
|
<Button
|
||||||
|
key={item}
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
effect="shine"
|
||||||
|
variant={filter === item ? "default" : "secondary"}
|
||||||
|
onClick={() => setFilter(item)}
|
||||||
|
>
|
||||||
|
{t(`settings.languages.filters.${item}`)}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{filtered.length === 0 ? (
|
||||||
|
<div className="flex min-h-52 flex-col items-center justify-center rounded-xl border border-dashed border-border text-center">
|
||||||
|
<Languages className="mb-3 h-8 w-8 text-muted-foreground" aria-hidden="true" />
|
||||||
|
<h3 className="font-medium text-foreground">
|
||||||
|
{t("settings.languages.empty.title")}
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1 text-sm text-muted-foreground">
|
||||||
|
{t("settings.languages.empty.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="hidden grid-cols-[minmax(170px,1.4fr)_100px_minmax(120px,1fr)_110px_90px_minmax(200px,auto)] gap-4 px-4 text-xs font-medium text-muted-foreground lg:grid">
|
||||||
|
<span>{t("settings.languages.columns.language")}</span>
|
||||||
|
<span>{t("settings.languages.columns.status")}</span>
|
||||||
|
<span>{t("settings.languages.columns.fallback")}</span>
|
||||||
|
<span>{t("settings.languages.columns.completion")}</span>
|
||||||
|
<span>{t("settings.languages.columns.usage")}</span>
|
||||||
|
<span className="text-right">{t("settings.languages.columns.actions")}</span>
|
||||||
|
</div>
|
||||||
|
{filtered.map((language) => {
|
||||||
|
const isDefault = language.code === defaultLocale;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={language.code}
|
||||||
|
className="grid gap-4 rounded-xl border border-border bg-card p-4 lg:grid-cols-[minmax(170px,1.4fr)_100px_minmax(120px,1fr)_110px_90px_minmax(200px,auto)] lg:items-center"
|
||||||
|
>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<span className="font-medium text-foreground">
|
||||||
|
{language.nativeName}
|
||||||
|
</span>
|
||||||
|
<Badge variant="secondary">{language.code}</Badge>
|
||||||
|
{language.builtIn && (
|
||||||
|
<Badge variant="outline">{t("settings.languages.badges.builtIn")}</Badge>
|
||||||
|
)}
|
||||||
|
{isDefault && (
|
||||||
|
<Badge variant="default">{t("settings.languages.badges.default")}</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">{language.name}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Badge variant={language.status === "archived" ? "outline" : "secondary"}>
|
||||||
|
{t(`settings.languages.status.${language.status}`)}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-foreground">
|
||||||
|
{language.fallbackName ?? t("settings.languages.values.none")}
|
||||||
|
</span>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-sm font-medium text-foreground">
|
||||||
|
{language.completion}%
|
||||||
|
</span>
|
||||||
|
<div className="h-1.5 overflow-hidden rounded-full bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${language.completion}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-foreground">
|
||||||
|
{t("settings.languages.values.usage", { count: language.usage })}
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap justify-start gap-2 lg:justify-end">
|
||||||
|
{language.status === "active" && !isDefault && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
effect="shine"
|
||||||
|
className="gap-1.5"
|
||||||
|
onClick={() => setPendingLocale(language)}
|
||||||
|
>
|
||||||
|
<Check className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
|
{t("settings.languages.actions.makeDefault")}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button asChild size="sm" variant="secondary" effect="shine" className="gap-1.5">
|
||||||
|
<Link href={`/settings/languages/${encodeURIComponent(language.code)}`}>
|
||||||
|
<Settings2 className="h-3.5 w-3.5" aria-hidden="true" />
|
||||||
|
{t("settings.languages.actions.manage")}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DestructiveConfirmation
|
||||||
|
open={Boolean(pendingLocale)}
|
||||||
|
onOpenChange={(open) => {
|
||||||
|
if (!open) setPendingLocale(null);
|
||||||
|
}}
|
||||||
|
loading={pending}
|
||||||
|
title={t("settings.languages.defaultDialog.title")}
|
||||||
|
description={t("settings.languages.defaultDialog.description", {
|
||||||
|
language: pendingLocale?.nativeName ?? "",
|
||||||
|
})}
|
||||||
|
cancelLabel={t("settings.languages.defaultDialog.cancel")}
|
||||||
|
confirmLabel={t("settings.languages.defaultDialog.confirm")}
|
||||||
|
onConfirm={confirmDefault}
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { DomainError } from "@/server/domain/errors";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
const SUPPORTED_BCP47_PATTERN = /^[a-z]{2}(?:-[A-Z]{2}[0-9]?)?$/;
|
||||||
|
|
||||||
|
export async function createLanguageAction(formData: FormData) {
|
||||||
|
const rawCode = cleanText(formData.get("code")) ?? "";
|
||||||
|
const name = cleanText(formData.get("name")) ?? "";
|
||||||
|
const nativeName = cleanText(formData.get("nativeName")) ?? "";
|
||||||
|
const fallbackLocale = cleanText(formData.get("fallbackLocale")) ?? "";
|
||||||
|
const textDirection = cleanText(formData.get("textDirection")) ?? "";
|
||||||
|
const code = canonicalizeSupportedLocale(rawCode);
|
||||||
|
|
||||||
|
if (!code) return { errorKey: "settings.languageNew.errors.code" };
|
||||||
|
if (!name || name.length > 80) {
|
||||||
|
return { errorKey: "settings.languageNew.errors.name" };
|
||||||
|
}
|
||||||
|
if (!nativeName || nativeName.length > 80) {
|
||||||
|
return { errorKey: "settings.languageNew.errors.nativeName" };
|
||||||
|
}
|
||||||
|
if (textDirection !== "ltr" && textDirection !== "rtl") {
|
||||||
|
return { errorKey: "settings.languageNew.errors.direction" };
|
||||||
|
}
|
||||||
|
if (fallbackLocale === code) {
|
||||||
|
return { errorKey: "settings.languageNew.errors.selfFallback" };
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const locales = service.listLocales(actor);
|
||||||
|
if (locales.some((locale) => locale.code === code)) {
|
||||||
|
return { errorKey: "settings.languageNew.errors.duplicate" };
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
!fallbackLocale
|
||||||
|
|| !locales.some(
|
||||||
|
(locale) => locale.code === fallbackLocale && locale.status !== "archived",
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return { errorKey: "settings.languageNew.errors.fallback" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const locale = service.createLocale(actor, {
|
||||||
|
code,
|
||||||
|
name,
|
||||||
|
nativeName,
|
||||||
|
fallbackLocale,
|
||||||
|
textDirection,
|
||||||
|
});
|
||||||
|
revalidatePath("/settings/languages");
|
||||||
|
return { success: true, locale: locale.code };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Language creation failed", error);
|
||||||
|
if (error instanceof DomainError) {
|
||||||
|
if (error.details?.reason === "fallback_loop") {
|
||||||
|
return { errorKey: "settings.languageNew.errors.fallbackLoop" };
|
||||||
|
}
|
||||||
|
if (error.details?.reason === "self_fallback") {
|
||||||
|
return { errorKey: "settings.languageNew.errors.selfFallback" };
|
||||||
|
}
|
||||||
|
if (error.code === "CONFLICT") {
|
||||||
|
return { errorKey: "settings.languageNew.errors.duplicate" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { errorKey: "settings.languageNew.errors.createFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function canonicalizeSupportedLocale(value: string): string | null {
|
||||||
|
try {
|
||||||
|
const [canonical] = Intl.getCanonicalLocales(value.replaceAll("_", "-"));
|
||||||
|
return canonical && SUPPORTED_BCP47_PATTERN.test(canonical) ? canonical : null;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { ArrowLeft, Languages, Save } from "lucide-react";
|
||||||
|
import { Button, Card, CardContent, Input, Label, RadioGroup, RadioGroupItem } from "poyraz-ui/atoms";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, toast } from "poyraz-ui/molecules";
|
||||||
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
||||||
|
import { createLanguageAction } from "./actions";
|
||||||
|
|
||||||
|
type FallbackOption = {
|
||||||
|
code: string;
|
||||||
|
nativeName: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function NewLanguageForm({
|
||||||
|
defaultFallback,
|
||||||
|
fallbackOptions,
|
||||||
|
}: {
|
||||||
|
defaultFallback: string;
|
||||||
|
fallbackOptions: FallbackOption[];
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const router = useRouter();
|
||||||
|
const [fallbackLocale, setFallbackLocale] = useState(defaultFallback);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
function submit(formData: FormData) {
|
||||||
|
formData.set("fallbackLocale", fallbackLocale);
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await createLanguageAction(formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.languageNew.messages.created"));
|
||||||
|
router.push(`/settings/languages/${encodeURIComponent(result.locale ?? "")}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-8 p-6 sm:p-8">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<Button asChild size="icon-sm" variant="secondary" effect="shine">
|
||||||
|
<Link href="/settings/languages" aria-label={t("settings.languageNew.actions.back")}>
|
||||||
|
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<h2 className="text-xl font-semibold text-foreground">
|
||||||
|
{t("settings.languageNew.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.languageNew.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-xl border border-border bg-muted/30 p-4 text-sm text-muted-foreground">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Languages className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
|
||||||
|
<p>{t("settings.languageNew.draftNotice")}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={submit} className="max-w-2xl space-y-7">
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="locale-code">{t("settings.languageNew.fields.code")}</Label>
|
||||||
|
<Input
|
||||||
|
id="locale-code"
|
||||||
|
name="code"
|
||||||
|
placeholder={t("settings.languageNew.placeholders.code")}
|
||||||
|
maxLength={12}
|
||||||
|
autoCapitalize="none"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.languageNew.help.code")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="language-name">{t("settings.languageNew.fields.name")}</Label>
|
||||||
|
<Input
|
||||||
|
id="language-name"
|
||||||
|
name="name"
|
||||||
|
placeholder={t("settings.languageNew.placeholders.name")}
|
||||||
|
maxLength={80}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="native-name">{t("settings.languageNew.fields.nativeName")}</Label>
|
||||||
|
<Input
|
||||||
|
id="native-name"
|
||||||
|
name="nativeName"
|
||||||
|
placeholder={t("settings.languageNew.placeholders.nativeName")}
|
||||||
|
maxLength={80}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.languageNew.help.nativeName")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>{t("settings.languageNew.fields.fallback")}</Label>
|
||||||
|
<Select value={fallbackLocale} onValueChange={setFallbackLocale}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder={t("settings.languageNew.placeholders.fallback")} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{fallbackOptions.map((locale) => (
|
||||||
|
<SelectItem key={locale.code} value={locale.code}>
|
||||||
|
{locale.nativeName} ({locale.code})
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.languageNew.help.fallback")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset className="space-y-2">
|
||||||
|
<legend className="text-sm font-medium text-foreground">
|
||||||
|
{t("settings.languageNew.fields.direction")}
|
||||||
|
</legend>
|
||||||
|
<RadioGroup
|
||||||
|
name="textDirection"
|
||||||
|
defaultValue="ltr"
|
||||||
|
className="grid grid-cols-2 gap-2"
|
||||||
|
>
|
||||||
|
{(["ltr", "rtl"] as const).map((direction) => (
|
||||||
|
<Label
|
||||||
|
key={direction}
|
||||||
|
htmlFor={`direction-${direction}`}
|
||||||
|
className="flex cursor-pointer items-center gap-2 rounded-lg border border-border p-3"
|
||||||
|
>
|
||||||
|
<RadioGroupItem id={`direction-${direction}`} value={direction} />
|
||||||
|
{t(`settings.languageNew.direction.${direction}`)}
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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.languageNew.actions.create")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { NewLanguageForm } from "./new-language-form";
|
||||||
|
|
||||||
|
export default async function NewLanguagePage() {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const locales = service
|
||||||
|
.listLocales(actor)
|
||||||
|
.filter((locale) => locale.status !== "archived");
|
||||||
|
const defaultLocale = service.getSettings(actor).defaultLocale;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<NewLanguageForm
|
||||||
|
defaultFallback={locales.some((locale) => locale.code === defaultLocale)
|
||||||
|
? defaultLocale
|
||||||
|
: locales[0]?.code ?? "tr"}
|
||||||
|
fallbackOptions={locales.map(({ code, nativeName }) => ({ code, nativeName }))}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { I18nService } from "@/server/i18n/service";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { LanguagesList } from "./languages-list";
|
||||||
|
|
||||||
|
export default async function LanguagesSettingsPage() {
|
||||||
|
const { actor } = await requireFreelancerBackend();
|
||||||
|
const service = new I18nService(getSqliteConnection().db);
|
||||||
|
const locales = service.listLocales(actor);
|
||||||
|
const settings = service.getSettings(actor);
|
||||||
|
const completion = new Map(
|
||||||
|
service.getCompletion(actor).map((item) => [item.locale, item.percent]),
|
||||||
|
);
|
||||||
|
const localeNames = new Map(locales.map((locale) => [locale.code, locale.nativeName]));
|
||||||
|
const languages = locales.map((locale) => {
|
||||||
|
const usage = service.getLocaleUsage(actor, locale.code);
|
||||||
|
return {
|
||||||
|
builtIn: locale.builtIn,
|
||||||
|
code: locale.code,
|
||||||
|
completion: completion.get(locale.code) ?? 0,
|
||||||
|
fallbackName: locale.fallbackLocale
|
||||||
|
? localeNames.get(locale.fallbackLocale) ?? locale.fallbackLocale
|
||||||
|
: null,
|
||||||
|
name: locale.name,
|
||||||
|
nativeName: locale.nativeName,
|
||||||
|
status: locale.status,
|
||||||
|
usage: usage.userPreferences + usage.clients + usage.portalInvitations,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LanguagesList
|
||||||
|
initialDefaultLocale={settings.defaultLocale}
|
||||||
|
languages={languages}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import { PageHeader } from "@/components/system/page-header";
|
||||||
|
import { requireFreelancer } from "@/server/auth/session";
|
||||||
|
import { resolveFreelancerLocale } from "@/server/i18n/resolver";
|
||||||
|
import { createTranslator } from "@/server/i18n/translator";
|
||||||
|
import { SettingsNavigation } from "./settings-navigation";
|
||||||
|
|
||||||
|
export default async function SettingsLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{ children: React.ReactNode }>) {
|
||||||
|
const context = await requireFreelancer();
|
||||||
|
const locale = await resolveFreelancerLocale(context);
|
||||||
|
const t = createTranslator(locale.locale, ["settings"]).t;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto flex max-w-7xl flex-col gap-6">
|
||||||
|
<PageHeader title={t("settings.title")} />
|
||||||
|
<div className="flex min-w-0 flex-col gap-8 md:flex-row md:items-start">
|
||||||
|
<SettingsNavigation
|
||||||
|
labels={{
|
||||||
|
general: t("settings.navigation.general"),
|
||||||
|
appearance: t("settings.navigation.appearance"),
|
||||||
|
profile: t("settings.navigation.profile"),
|
||||||
|
security: t("settings.navigation.security"),
|
||||||
|
ai: t("settings.navigation.ai"),
|
||||||
|
language: t("settings.navigation.language"),
|
||||||
|
languages: t("settings.navigation.languages"),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<section className="min-w-0 flex-1">{children}</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { Card, CardContent } from "poyraz-ui/atoms";
|
||||||
|
|
||||||
|
export default function SettingsLoading() {
|
||||||
|
return (
|
||||||
|
<Card aria-busy="true">
|
||||||
|
<CardContent className="space-y-4 p-6 sm:p-8">
|
||||||
|
<div className="h-7 w-48 animate-pulse rounded-md bg-muted" />
|
||||||
|
<div className="h-11 w-full animate-pulse rounded-md bg-muted" />
|
||||||
|
<div className="h-32 w-full animate-pulse rounded-md bg-muted" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useI18n } from "@/components/i18n/i18n-provider";
|
||||||
|
import { Button, Card, CardContent } from "poyraz-ui/atoms";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export default function SettingsNotFound() {
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="space-y-4 p-6 sm:p-8">
|
||||||
|
<h2 className="text-lg font-semibold text-foreground">
|
||||||
|
{t("settings.shell.notFoundTitle")}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{t("settings.shell.notFoundDescription")}
|
||||||
|
</p>
|
||||||
|
<Button asChild effect="shine" variant="default">
|
||||||
|
<Link href="/settings/general">{t("settings.shell.backToGeneral")}</Link>
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,55 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { eq } from "drizzle-orm";
|
||||||
|
import { headers } from "next/headers";
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { auth } from "@/server/auth/auth";
|
||||||
|
import { domainActorFromSession } from "@/server/auth/domain-actor";
|
||||||
|
import { getSqliteConnection } from "@/server/db/client";
|
||||||
|
import { appProfiles } from "@/server/db/schema";
|
||||||
|
import { getFileService } from "@/server/files/runtime";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
export async function updateProfileAction(formData: FormData) {
|
||||||
|
try {
|
||||||
|
const { context } = await requireFreelancerBackend();
|
||||||
|
const firstName = cleanText(formData.get("firstName"));
|
||||||
|
const lastName = cleanText(formData.get("lastName"));
|
||||||
|
if (!firstName || firstName.length > 80) {
|
||||||
|
return { errorKey: "settings.profile.errors.firstName" };
|
||||||
|
}
|
||||||
|
if (!lastName || lastName.length > 120) {
|
||||||
|
return { errorKey: "settings.profile.errors.lastName" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const displayName = `${firstName} ${lastName}`;
|
||||||
|
await auth.api.updateUser({
|
||||||
|
headers: await headers(),
|
||||||
|
body: { name: displayName },
|
||||||
|
});
|
||||||
|
getSqliteConnection().db
|
||||||
|
.update(appProfiles)
|
||||||
|
.set({ displayName, updatedAt: new Date() })
|
||||||
|
.where(eq(appProfiles.authUserId, context.user.id))
|
||||||
|
.run();
|
||||||
|
|
||||||
|
const avatar = formData.get("avatar");
|
||||||
|
const avatarChanged = avatar instanceof File && avatar.size > 0;
|
||||||
|
if (avatarChanged) {
|
||||||
|
getFileService().upload(domainActorFromSession(context), {
|
||||||
|
kind: "avatar",
|
||||||
|
originalName: avatar.name,
|
||||||
|
claimedMimeType: avatar.type,
|
||||||
|
bytes: new Uint8Array(await avatar.arrayBuffer()),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
revalidatePath("/", "layout");
|
||||||
|
revalidatePath("/settings/profile");
|
||||||
|
return { success: true, avatarChanged };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Profile update failed", error);
|
||||||
|
return { errorKey: "settings.profile.errors.updateFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { ProfileSettingsForm } from "./profile-settings-form";
|
||||||
|
|
||||||
|
export default async function ProfileSettingsPage() {
|
||||||
|
const { context } = await requireFreelancerBackend();
|
||||||
|
const [firstName = "", ...lastNameParts] = context.profile.displayName.trim().split(/\s+/);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ProfileSettingsForm
|
||||||
|
initial={{
|
||||||
|
firstName,
|
||||||
|
lastName: lastNameParts.join(" "),
|
||||||
|
email: context.user.email,
|
||||||
|
avatarUrl: context.user.image ?? "",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,132 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useState, useTransition } from "react";
|
||||||
|
import { Save, User } 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 { updateProfileAction } from "./actions";
|
||||||
|
|
||||||
|
export function ProfileSettingsForm({
|
||||||
|
initial,
|
||||||
|
}: {
|
||||||
|
initial: {
|
||||||
|
avatarUrl: string;
|
||||||
|
email: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
};
|
||||||
|
}) {
|
||||||
|
const t = useTranslations();
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
const [firstName, setFirstName] = useState(initial.firstName);
|
||||||
|
const [lastName, setLastName] = useState(initial.lastName);
|
||||||
|
|
||||||
|
function submit(formData: FormData) {
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await updateProfileAction(formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(t("settings.profile.messages.saved"));
|
||||||
|
if (result.avatarChanged) {
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.profile.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.profile.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action={submit} className="max-w-2xl space-y-7">
|
||||||
|
<section className="flex flex-col gap-5 sm:flex-row sm:items-center">
|
||||||
|
{initial.avatarUrl ? (
|
||||||
|
<Image
|
||||||
|
src={initial.avatarUrl}
|
||||||
|
alt={t("settings.profile.avatarAlt")}
|
||||||
|
width={80}
|
||||||
|
height={80}
|
||||||
|
unoptimized
|
||||||
|
className="h-20 w-20 rounded-full border border-border object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-full border border-border bg-muted/50">
|
||||||
|
<User className="h-9 w-9 text-muted-foreground" aria-hidden="true" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<Label htmlFor="avatar">{t("settings.profile.fields.avatar")}</Label>
|
||||||
|
<Input
|
||||||
|
id="avatar"
|
||||||
|
name="avatar"
|
||||||
|
type="file"
|
||||||
|
accept="image/png,image/jpeg,image/webp,image/gif"
|
||||||
|
className="cursor-pointer"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.profile.help.avatar")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="firstName">{t("settings.profile.fields.firstName")}</Label>
|
||||||
|
<Input
|
||||||
|
id="firstName"
|
||||||
|
name="firstName"
|
||||||
|
value={firstName}
|
||||||
|
onChange={(event) => setFirstName(event.target.value)}
|
||||||
|
maxLength={80}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="lastName">{t("settings.profile.fields.lastName")}</Label>
|
||||||
|
<Input
|
||||||
|
id="lastName"
|
||||||
|
name="lastName"
|
||||||
|
value={lastName}
|
||||||
|
onChange={(event) => setLastName(event.target.value)}
|
||||||
|
maxLength={120}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="profile-email">{t("settings.profile.fields.email")}</Label>
|
||||||
|
<Input id="profile-email" value={initial.email} disabled readOnly />
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("settings.profile.help.email")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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.profile.actions.save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { headers } from "next/headers";
|
||||||
|
import { revalidatePath } from "next/cache";
|
||||||
|
import { auth } from "@/server/auth/auth";
|
||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { cleanText } from "@/server/web/form-data";
|
||||||
|
|
||||||
|
export async function changePasswordAction(formData: FormData) {
|
||||||
|
const currentPassword = cleanText(formData.get("currentPassword")) ?? "";
|
||||||
|
const newPassword = cleanText(formData.get("newPassword")) ?? "";
|
||||||
|
const confirmPassword = cleanText(formData.get("confirmPassword")) ?? "";
|
||||||
|
|
||||||
|
if (!currentPassword) {
|
||||||
|
return { errorKey: "settings.security.errors.currentRequired" };
|
||||||
|
}
|
||||||
|
if (newPassword.length < 8 || newPassword.length > 128) {
|
||||||
|
return { errorKey: "settings.security.errors.newLength" };
|
||||||
|
}
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
return { errorKey: "settings.security.errors.confirmMismatch" };
|
||||||
|
}
|
||||||
|
if (newPassword === currentPassword) {
|
||||||
|
return { errorKey: "settings.security.errors.samePassword" };
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await requireFreelancerBackend();
|
||||||
|
await auth.api.changePassword({
|
||||||
|
headers: await headers(),
|
||||||
|
body: {
|
||||||
|
currentPassword,
|
||||||
|
newPassword,
|
||||||
|
revokeOtherSessions: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
revalidatePath("/settings/security");
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Password change failed", error);
|
||||||
|
return { errorKey: "settings.security.errors.changeFailed" };
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { requireFreelancerBackend } from "@/server/web/freelancer";
|
||||||
|
import { SecuritySettingsForm } from "./security-settings-form";
|
||||||
|
|
||||||
|
export default async function SecuritySettingsPage() {
|
||||||
|
await requireFreelancerBackend();
|
||||||
|
return <SecuritySettingsForm />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef, useTransition } from "react";
|
||||||
|
import { KeyRound, Save, ShieldCheck } from "lucide-react";
|
||||||
|
import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
|
||||||
|
import { Alert, AlertDescription, AlertTitle, toast } from "poyraz-ui/molecules";
|
||||||
|
import { useTranslations } from "@/components/i18n/i18n-provider";
|
||||||
|
import { changePasswordAction } from "./actions";
|
||||||
|
|
||||||
|
export function SecuritySettingsForm() {
|
||||||
|
const t = useTranslations();
|
||||||
|
const formRef = useRef<HTMLFormElement>(null);
|
||||||
|
const [pending, startTransition] = useTransition();
|
||||||
|
|
||||||
|
function submit(formData: FormData) {
|
||||||
|
startTransition(async () => {
|
||||||
|
const result = await changePasswordAction(formData);
|
||||||
|
if (result.errorKey) {
|
||||||
|
toast.error(t(result.errorKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
formRef.current?.reset();
|
||||||
|
toast.success(t("settings.security.messages.saved"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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.security.title")}
|
||||||
|
</h2>
|
||||||
|
<p className="max-w-2xl text-sm text-muted-foreground">
|
||||||
|
{t("settings.security.description")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Alert>
|
||||||
|
<ShieldCheck className="h-4 w-4" aria-hidden="true" />
|
||||||
|
<AlertTitle>{t("settings.security.sessions.title")}</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
{t("settings.security.sessions.description")}
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<form ref={formRef} action={submit} className="max-w-2xl space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="currentPassword">
|
||||||
|
{t("settings.security.fields.currentPassword")}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="currentPassword"
|
||||||
|
name="currentPassword"
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-5 sm:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="newPassword">
|
||||||
|
{t("settings.security.fields.newPassword")}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="newPassword"
|
||||||
|
name="newPassword"
|
||||||
|
type="password"
|
||||||
|
minLength={8}
|
||||||
|
maxLength={128}
|
||||||
|
autoComplete="new-password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="confirmPassword">
|
||||||
|
{t("settings.security.fields.confirmPassword")}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="confirmPassword"
|
||||||
|
name="confirmPassword"
|
||||||
|
type="password"
|
||||||
|
minLength={8}
|
||||||
|
maxLength={128}
|
||||||
|
autoComplete="new-password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<KeyRound className="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||||
|
{t("settings.security.help.password")}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<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.security.actions.save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Brain,
|
||||||
|
Languages,
|
||||||
|
Palette,
|
||||||
|
Settings2,
|
||||||
|
Shield,
|
||||||
|
User,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { Button } from "poyraz-ui/atoms";
|
||||||
|
|
||||||
|
export type SettingsNavigationLabels = {
|
||||||
|
ai: string;
|
||||||
|
appearance: string;
|
||||||
|
general: string;
|
||||||
|
language: string;
|
||||||
|
languages: string;
|
||||||
|
profile: string;
|
||||||
|
security: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{ key: "general", href: "/settings/general", icon: Settings2 },
|
||||||
|
{ key: "appearance", href: "/settings/appearance", icon: Palette },
|
||||||
|
{ key: "profile", href: "/settings/profile", icon: User },
|
||||||
|
{ key: "security", href: "/settings/security", icon: Shield },
|
||||||
|
{ key: "ai", href: "/settings/ai", icon: Brain },
|
||||||
|
{ key: "language", href: "/settings/language", icon: Languages },
|
||||||
|
{ key: "languages", href: "/settings/languages", icon: Languages },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export function SettingsNavigation({ labels }: { labels: SettingsNavigationLabels }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav
|
||||||
|
aria-label={labels.general}
|
||||||
|
className="tiny-scrollbar flex w-full shrink-0 gap-2 overflow-x-auto pb-2 md:sticky md:top-8 md:max-h-[calc(100vh-4rem)] md:w-60 md:self-start md:flex-col md:overflow-y-auto md:pb-0"
|
||||||
|
>
|
||||||
|
{items.map((item) => {
|
||||||
|
const Icon = item.icon;
|
||||||
|
const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
key={item.href}
|
||||||
|
asChild
|
||||||
|
effect="shine"
|
||||||
|
variant={active ? "default" : "secondary"}
|
||||||
|
className="h-auto shrink-0 justify-start gap-3 px-4 py-3 text-left"
|
||||||
|
>
|
||||||
|
<Link href={item.href} aria-current={active ? "page" : undefined}>
|
||||||
|
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||||
|
{labels[item.key]}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user