From 7c304545f8fcef0a2d1d589255d363bd35fe877d Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 7 Feb 2026 01:01:08 +0300
Subject: [PATCH] fix: move theme save/cancel buttons outside collapsible
 section

Save and Cancel buttons were hidden inside the collapsible "Custom Colors"
section, so manual color changes were lost on navigation. Moved them to
the top level so they are always visible when there are unsaved changes.
---
 src/components/admin/ThemeTab.tsx | 46 +++++++++++++++----------------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/admin/ThemeTab.tsx b/src/components/admin/ThemeTab.tsx
index da9f2f3..7938473 100644
--- a/src/components/admin/ThemeTab.tsx
+++ b/src/components/admin/ThemeTab.tsx
@@ -395,34 +395,32 @@ export function ThemeTab() {
                 />
               </div>
             </div>
-
-            {/* Save / Cancel / Reset buttons */}
-            <div className="flex flex-wrap items-center gap-3">
-              {hasUnsavedChanges && (
-                <>
-                  <button
-                    onClick={() => updateColorsMutation.mutate(draftColors)}
-                    disabled={updateColorsMutation.isPending}
-                    className="rounded-xl bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
-                  >
-                    {updateColorsMutation.isPending
-                      ? t('common.saving', t('common.save'))
-                      : t('common.save')}
-                  </button>
-                  <button
-                    onClick={handleCancel}
-                    disabled={updateColorsMutation.isPending}
-                    className="rounded-xl bg-dark-700 px-4 py-2 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-50"
-                  >
-                    {t('common.cancel')}
-                  </button>
-                </>
-              )}
-            </div>
           </div>
         )}
       </div>
 
+      {/* Save / Cancel — always visible when there are unsaved changes */}
+      {hasUnsavedChanges && (
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            onClick={() => updateColorsMutation.mutate(draftColors)}
+            disabled={updateColorsMutation.isPending}
+            className="rounded-xl bg-accent-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+          >
+            {updateColorsMutation.isPending
+              ? t('common.saving', t('common.save'))
+              : t('common.save')}
+          </button>
+          <button
+            onClick={handleCancel}
+            disabled={updateColorsMutation.isPending}
+            className="rounded-xl bg-dark-700 px-4 py-2 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-600 disabled:opacity-50"
+          >
+            {t('common.cancel')}
+          </button>
+        </div>
+      )}
+
       {/* Reset all colors */}
       <div className="flex justify-end">
         <button