feat: Add option to use saved global custom theme under Connection Defaults (#1209)

https://github.com/Termix-SSH/Support/issues/1209

src/ui/locales/en.json

@@ -4472,7 +4472,9 @@
         "resizeReconnect": "Reconnect",
         "clearAll": "Clear All",
         "saved": "Connection defaults saved",
-        "saveFailed": "Failed to save connection defaults"
+        "saveFailed": "Failed to save connection defaults",
+        "savedThemeLabel": "Apply Saved Theme",
+        "savedThemePlaceholder": "Choose a saved theme"
       },
       "userProfile": {
         "donateTitle": "Keep Termix alive",

src/ui/sidebar/ConnectionDefaultsSettings.tsx

@@ -24,6 +24,11 @@ import {
   type TerminalDefaults,
   type TriState,
 } from "@/lib/connection-defaults";
+import {
+  getUserPreferences,
+  parseCustomThemes,
+  type SavedCustomTheme,
+} from "@/api/open-tabs-api";
 
 const inputClass =
   "h-8 w-full border border-border bg-background px-2 text-xs outline-none focus:ring-1 focus:ring-ring";
@@ -104,6 +109,7 @@ export function ConnectionDefaultsSettings() {
   const [terminal, setTerminal] = useState<TerminalDefaults>({});
   const [rdp, setRdp] = useState<RemoteDesktopDefaults>({});
   const [saving, setSaving] = useState(false);
+  const [savedThemes, setSavedThemes] = useState<SavedCustomTheme[]>([]);
 
   useEffect(() => {
     if (!defaults.ready) return;
@@ -111,6 +117,13 @@ export function ConnectionDefaultsSettings() {
     setRdp(defaults.rdp);
   }, [defaults.ready, defaults.terminal, defaults.rdp]);
 
+  useEffect(() => {
+    if (!open) return;
+    getUserPreferences()
+      .then((prefs) => setSavedThemes(parseCustomThemes(prefs.customThemes)))
+      .catch(() => {});
+  }, [open]);
+
   const configuredCount = useMemo(() => {
     const count = (source: Record<string, unknown>) =>
       Object.values(source).filter((value) => value !== undefined).length;
@@ -126,6 +139,17 @@ export function ConnectionDefaultsSettings() {
     value: RemoteDesktopDefaults[K],
   ) => setRdp((current) => ({ ...current, [key]: value }));
 
+  const applySavedTheme = (id: string) => {
+    if (!id) return;
+    const theme = savedThemes.find((entry) => entry.id === id);
+    if (!theme) return;
+    setTerminal((current) => ({
+      ...current,
+      theme: "custom",
+      customThemeColors: { ...theme.colors },
+    }));
+  };
+
   async function save() {
     setSaving(true);
     try {
@@ -243,6 +267,31 @@ export function ConnectionDefaultsSettings() {
                   </select>
                 </Field>
 
+                {savedThemes.length > 0 && (
+                  <Field
+                    label={t(
+                      "newUi.sidebar.connectionDefaults.savedThemeLabel",
+                    )}
+                  >
+                    <select
+                      className={inputClass}
+                      value=""
+                      onChange={(e) => applySavedTheme(e.target.value)}
+                    >
+                      <option value="">
+                        {t(
+                          "newUi.sidebar.connectionDefaults.savedThemePlaceholder",
+                        )}
+                      </option>
+                      {savedThemes.map((theme) => (
+                        <option key={theme.id} value={theme.id}>
+                          {theme.name}
+                        </option>
+                      ))}
+                    </select>
+                  </Field>
+                )}
+
                 <Field label={t("hosts.fontSizeLabel")}>
                   <input
                     className={inputClass}