From b5d37c427098a38f5b23b9dba3efb27df69b75b2 Mon Sep 17 00:00:00 2001
From: i1Zeus <husseinnajah123@gmail.com>
Date: Sun, 3 May 2026 20:03:01 +0300
Subject: [PATCH] feat: implement video editor SettingsPanel and add Arabic and
 English localization files

---
 src/components/video-editor/SettingsPanel.tsx | 52 +++++++++++++------
 src/i18n/locales/ar/editor.json               |  2 +-
 src/i18n/locales/ar/settings.json             | 16 +++++-
 src/i18n/locales/en/settings.json             | 16 +++++-
 4 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 5cac573..343c4cf 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -1005,7 +1005,9 @@ export function SettingsPanel({
 							{cursorHighlight && onCursorHighlightChange && (
 								<div className="p-2 rounded-lg bg-white/5 border border-white/5 mt-2 space-y-2">
 									<div className="flex items-center justify-between">
-										<div className="text-[10px] font-medium text-slate-300">Cursor highlight</div>
+										<div className="text-[10px] font-medium text-slate-300">
+											{t("effects.cursorHighlight.title")}
+										</div>
 										<button
 											type="button"
 											onClick={() =>
@@ -1020,7 +1022,7 @@ export function SettingsPanel({
 													: "bg-white/5 border-white/10 text-slate-400"
 											}`}
 										>
-											{cursorHighlight.enabled ? "On" : "Off"}
+											{cursorHighlight.enabled ? t("effects.on") : t("effects.off")}
 										</button>
 									</div>
 									<div
@@ -1037,13 +1039,15 @@ export function SettingsPanel({
 														: "bg-white/5 border-white/10 text-slate-300 hover:border-white/20"
 												}`}
 											>
-												{style}
+												{t(`effects.cursorHighlight.${style}`)}
 											</button>
 										))}
 									</div>
 									<div className={cursorHighlight.enabled ? "" : "opacity-40 pointer-events-none"}>
 										<div className="flex items-center justify-between mb-1">
-											<div className="text-[10px] text-slate-400">Size</div>
+											<div className="text-[10px] text-slate-400">
+												{t("effects.cursorHighlight.size")}
+											</div>
 											<span className="text-[10px] text-slate-500 font-mono">
 												{cursorHighlight.sizePx}px
 											</span>
@@ -1051,7 +1055,10 @@ export function SettingsPanel({
 										<Slider
 											value={[cursorHighlight.sizePx]}
 											onValueChange={(values) =>
-												onCursorHighlightChange({ ...cursorHighlight, sizePx: values[0] })
+												onCursorHighlightChange({
+													...cursorHighlight,
+													sizePx: values[0],
+												})
 											}
 											min={10}
 											max={36}
@@ -1063,7 +1070,9 @@ export function SettingsPanel({
 										<div
 											className={`flex items-center justify-between ${cursorHighlight.enabled ? "" : "opacity-40 pointer-events-none"}`}
 										>
-											<div className="text-[10px] text-slate-400">Only on clicks</div>
+											<div className="text-[10px] text-slate-400">
+												{t("effects.cursorHighlight.onlyOnClicks")}
+											</div>
 											<button
 												type="button"
 												onClick={async () => {
@@ -1072,10 +1081,14 @@ export function SettingsPanel({
 														try {
 															const result = await window.electronAPI.requestAccessibilityAccess();
 															if (!result.granted) {
-																toast.message("Accessibility permission needed", {
-																	description:
-																		"Open System Settings → Privacy & Security → Accessibility, enable Openscreen, then restart the app.",
-																});
+																toast.message(
+																	t("effects.cursorHighlight.accessibilityPermissionTitle"),
+																	{
+																		description: t(
+																			"effects.cursorHighlight.accessibilityPermissionDescription",
+																		),
+																	},
+																);
 															}
 														} catch (err) {
 															console.warn("Accessibility request failed:", err);
@@ -1092,12 +1105,14 @@ export function SettingsPanel({
 														: "bg-white/5 border-white/10 text-slate-400"
 												}`}
 											>
-												{cursorHighlight.onlyOnClicks ? "On" : "Off"}
+												{cursorHighlight.onlyOnClicks ? t("effects.on") : t("effects.off")}
 											</button>
 										</div>
 									)}
 									<div className={cursorHighlight.enabled ? "" : "opacity-40 pointer-events-none"}>
-										<div className="text-[10px] text-slate-400 mb-1">Color</div>
+										<div className="text-[10px] text-slate-400 mb-1">
+											{t("effects.cursorHighlight.color")}
+										</div>
 										<Popover>
 											<PopoverTrigger asChild>
 												<Button
@@ -1126,7 +1141,10 @@ export function SettingsPanel({
 														colorPalette: t("background.colorPalette"),
 													}}
 													onUpdateColor={(color) =>
-														onCursorHighlightChange({ ...cursorHighlight, color })
+														onCursorHighlightChange({
+															...cursorHighlight,
+															color,
+														})
 													}
 												/>
 											</PopoverContent>
@@ -1134,7 +1152,9 @@ export function SettingsPanel({
 									</div>
 									<div className={cursorHighlight.enabled ? "" : "opacity-40 pointer-events-none"}>
 										<div className="flex items-center justify-between mb-1">
-											<div className="text-[10px] text-slate-400">Offset X (window recordings)</div>
+											<div className="text-[10px] text-slate-400">
+												{t("effects.cursorHighlight.offsetX")}
+											</div>
 											<span className="text-[10px] text-slate-500 font-mono">
 												{(cursorHighlight.offsetXNorm * 100).toFixed(1)}%
 											</span>
@@ -1155,7 +1175,9 @@ export function SettingsPanel({
 									</div>
 									<div className={cursorHighlight.enabled ? "" : "opacity-40 pointer-events-none"}>
 										<div className="flex items-center justify-between mb-1">
-											<div className="text-[10px] text-slate-400">Offset Y</div>
+											<div className="text-[10px] text-slate-400">
+												{t("effects.cursorHighlight.offsetY")}
+											</div>
 											<span className="text-[10px] text-slate-500 font-mono">
 												{(cursorHighlight.offsetYNorm * 100).toFixed(1)}%
 											</span>
diff --git a/src/i18n/locales/ar/editor.json b/src/i18n/locales/ar/editor.json
index 0d293d7..a246f01 100644
--- a/src/i18n/locales/ar/editor.json
+++ b/src/i18n/locales/ar/editor.json
@@ -17,7 +17,7 @@
 		"exportFailedWithError": "فشل التصدير: {{error}}",
 		"exportBackgroundLoadFailed": "فشل التصدير: تعذر تحميل صورة الخلفية ({{url}})",
 		"failedToSaveExport": "فشل حفظ التصدير",
-		"failedToSaveExportedVideo": "فشل حفظ الفيديو المصدر",
+		"failedToSaveExportedVideo": "فشل حفظ الفيديو المُصدَّر",
 		"failedToRevealInFolder": "خطأ في الكشف في المجلد: {{error}}"
 	},
 	"export": {
diff --git a/src/i18n/locales/ar/settings.json b/src/i18n/locales/ar/settings.json
index e0510c9..e21976d 100644
--- a/src/i18n/locales/ar/settings.json
+++ b/src/i18n/locales/ar/settings.json
@@ -35,9 +35,23 @@
 		"blurBg": "تمويه الخلفية",
 		"motionBlur": "ضبابية الحركة",
 		"off": "إيقاف",
+		"on": "تشغيل",
 		"shadow": "ظل",
 		"roundness": "الاستدارة",
-		"padding": "المسافة البادئة"
+		"padding": "المسافة البادئة",
+		"cursorHighlight": {
+			"title": "تمييز المؤشر",
+			"style": "النمط",
+			"dot": "نقطة",
+			"ring": "حلقة",
+			"size": "الحجم",
+			"onlyOnClicks": "عند النقر فقط",
+			"color": "اللون",
+			"offsetX": "إزاحة X (لتسجيلات النوافذ)",
+			"offsetY": "إزاحة Y",
+			"accessibilityPermissionTitle": "مطلوب إذن الوصول",
+			"accessibilityPermissionDescription": "افتح إعدادات النظام ← الخصوصية والأمان ← إمكانية الوصول، وقم بتفعيل Openscreen، ثم أعد تشغيل التطبيق."
+		}
 	},
 	"background": {
 		"title": "الخلفية",
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index 9b85c2b..aaa5be4 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -35,9 +35,23 @@
 		"blurBg": "Blur BG",
 		"motionBlur": "Motion Blur",
 		"off": "off",
+		"on": "on",
 		"shadow": "Shadow",
 		"roundness": "Roundness",
-		"padding": "Padding"
+		"padding": "Padding",
+		"cursorHighlight": {
+			"title": "Cursor highlight",
+			"style": "Style",
+			"dot": "Dot",
+			"ring": "Ring",
+			"size": "Size",
+			"onlyOnClicks": "Only on clicks",
+			"color": "Color",
+			"offsetX": "Offset X (window recordings)",
+			"offsetY": "Offset Y",
+			"accessibilityPermissionTitle": "Accessibility permission needed",
+			"accessibilityPermissionDescription": "Open System Settings → Privacy & Security → Accessibility, enable Openscreen, then restart the app."
+		}
 	},
 	"background": {
 		"title": "Background",