From f728c4de2523cfe1fd67c74c8e2ad48a79c0c4cc Mon Sep 17 00:00:00 2001
From: ShyMike <122023566+ImShyMike@users.noreply.github.com>
Date: Sun, 16 Nov 2025 01:59:18 +0000
Subject: [PATCH] reorganize settings page layout (#629)

---
 app/views/users/edit.html.erb | 44 +++++++++++++++++------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 1855a34..c457ad5 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -168,6 +168,28 @@
       <% end %>
     </div>
 
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
+      <div class="flex items-center gap-3 mb-4">
+        <div class="p-2 bg-red-600/10 rounded">
+          <span class="text-2xl">🔑</span>
+        </div>
+        <h2 class="text-xl font-semibold text-white" id="user_api_key">API Key</h2>
+      </div>
+
+      <div class="space-y-4">
+        <p class="text-gray-300 text-sm">
+          Your API key is used to authenticate requests from your code editor. If your key has been compromised, you can rotate it to generate a new one. Rotating your API key will immediately invalidate your old key. You'll need to update the key in all of your code editors and IDEs.
+        </p>
+
+        <button type="button"
+                data-controller="api-key-rotation"
+                data-action="click->api-key-rotation#rotateKey"
+                class="w-full px-4 py-2 bg-primary hover:bg-red text-white font-medium rounded transition-colors duration-200 cursor-pointer">
+          Rotate API Key
+        </button>
+      </div>
+    </div>
+
     <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
@@ -361,28 +383,6 @@
       </div>
     </div>
 
-    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
-      <div class="flex items-center gap-3 mb-4">
-        <div class="p-2 bg-red-600/10 rounded">
-          <span class="text-2xl">🔑</span>
-        </div>
-        <h2 class="text-xl font-semibold text-white" id="user_api_key">API Key</h2>
-      </div>
-
-      <div class="space-y-4">
-        <p class="text-gray-300 text-sm">
-          Your API key is used to authenticate requests from your code editor. If your key has been compromised, you can rotate it to generate a new one. Rotating your API key will immediately invalidate your old key. You'll need to update the key in all of your code editors and IDEs.
-        </p>
-
-        <button type="button"
-                data-controller="api-key-rotation"
-                data-action="click->api-key-rotation#rotateKey"
-                class="w-full px-4 py-2 bg-primary hover:bg-red text-white font-medium rounded transition-colors duration-200 cursor-pointer">
-          Rotate API Key
-        </button>
-      </div>
-    </div>
-
     <%# This is copied from the github thingie blog, Im not good at UI so I copied :) %>
 
     <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">