Move sftp button to sftp section as a refresh button.

public/index.html

@@ -10,6 +10,7 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" rel="stylesheet" />
   <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
@@ -125,16 +126,20 @@
         </form>
       </div>
     </div>
-   
+
-    <div id="updateModsModal" class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-2 sm:p-4">
+    <div id="updateModsModal"
-      <div class="modal-content bg-gray-900 rounded-lg max-w-[95%] w-full sm:w-[90%] md:w-[85%] lg:w-[80%] mx-auto flex flex-col max-h-[95vh]">
+      class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-2 sm:p-4">
+      <div
+        class="modal-content bg-gray-900 rounded-lg max-w-[95%] w-full sm:w-[90%] md:w-[85%] lg:w-[80%] mx-auto flex flex-col max-h-[95vh]">
         <div class="flex justify-between items-center p-4 border-b">
           <h2 class="text-xl font-semibold text-white">Mod Update Output</h2>
           <button class="modal-close text-2xl font-bold text-white">×</button>
         </div>
-        <pre id="updateModsOutput" class="flex-1 p-4 text-white text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
+        <pre id="updateModsOutput"
+          class="flex-1 p-4 text-white text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
         <div class="p-4 border-t">
-          <button id="closeUpdateModsBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded w-full">Close</button>
+          <button id="closeUpdateModsBtn"
+            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded w-full">Close</button>
         </div>
       </div>
     </div>
@@ -180,13 +185,12 @@
               <button id="stopBtn" class="bg-red-600 hover:bg-red-700 rounded font-medium control-btn">Stop</button>
               <button id="restartBtn"
                 class="bg-yellow-600 hover:bg-yellow-700 rounded font-medium control-btn">Restart</button>
-                <!-- <button id="sftpBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">SFTP</button> -->
 
             </div>
             <button id="editPropertiesBtn"
               class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded control-btn w-full mt-2">Edit Server
               Properties</button>
-              <button id="updateModsBtn"
+            <button id="updateModsBtn"
               class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded control-btn w-full mt-2">Update Mods</button>
           </div>
         </div>
@@ -215,15 +219,19 @@
       </div>
 
       <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6" id="sftpBrowserSection" style="display: none;">
-        <h2 class="text-xl font-semibold mb-4">SFTP Browser</h2>
+        <!-- Container for header and button -->
-        <!-- Iframe height set explicitly to 650px to ensure visibility and prevent shrinking -->
+        <div class="flex justify-between items-baseline mb-4">
-        <iframe
+          <h2 class="text-xl font-semibold">SFTP Browser</h2>
-        id="sftpIframe"
+          <button id="sftpBtn" class="px-3 py-1 rounded text-sm flex items-center space-x-1"
-        class="w-full rounded"
+            style="background-color: #121724; color: #ffffff;">
-        style="height: 650px; min-height: 650px;"
+            <i class="fas fa-sync-alt" style="color: #121724;"></i>
-        sandbox="allow-same-origin allow-scripts allow-downloads allow-popups"
+            <span>Refresh SFTP</span>
-        allow="clipboard-read; clipboard-write"
+          </button>
-      ></iframe>
+        </div>
+        <!-- Iframe remains unchanged -->
+        <iframe id="sftpIframe" class="w-full rounded" style="height: 650px; min-height: 650px;"
+          sandbox="allow-same-origin allow-scripts allow-downloads allow-popups"
+          allow="clipboard-read; clipboard-write"></iframe>
       </div>
 
       <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
@@ -286,7 +294,8 @@
         <p class="text-gray-400 text-sm">
           © 2025 My-MC.Link. All rights reserved.<br>
           <a href="https://raven-scott.fyi" target="_blank" class="text-blue-400 hover:text-blue-500">Made with ❤️ by
-            SNXRaven</a> | <a href="https://git.ssh.surf/hypermc/panel" target="_blank" class="text-blue-400 hover:text-blue-500">Source Code</a> 
+            SNXRaven</a> | <a href="https://git.ssh.surf/hypermc/panel" target="_blank"
+            class="text-blue-400 hover:text-blue-500">Source Code</a>
         </p>
       </div>
     </footer>

public/js/app.js

@@ -494,7 +494,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const editPropertiesBtn = elements.editPropertiesBtn;
     const updateModsBtn = elements.updateModsBtn;
     const backupBtn = elements.backupBtn;
-    // const sftpBtn = elements.sftpBtn; // Commented out as it appears to be disabled in the provided code
+    const sftpBtn = elements.sftpBtn; // Commented out as it appears to be disabled in the provided code
     const startBtn = document.getElementById('startBtn');
     const stopBtn = elements.stopBtn;
     const restartBtn = elements.restartBtn;
@@ -525,9 +525,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (backupBtn) {
             backupBtn.classList.add('hidden');
         }
-        // if (sftpBtn) {
+        if (sftpBtn) {
-        //     sftpBtn.classList.add('hidden');
+            sftpBtn.classList.add('hidden');
-        // }
+        }
         if (stopBtn) {
             stopBtn.disabled = true;
             stopBtn.classList.add('disabled-btn');
@@ -556,9 +556,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (backupBtn) {
             backupBtn.classList.remove('hidden');
         }
-        // if (sftpBtn) {
+        if (sftpBtn) {
-        //     sftpBtn.classList.remove('hidden');
+            sftpBtn.classList.remove('hidden');
-        // }
+        }
         if (stopBtn) {
             stopBtn.disabled = false;
             stopBtn.classList.remove('disabled-btn');
@@ -1669,7 +1669,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  // elements.sftpBtn.addEventListener('click', connectSftp);
+  elements.sftpBtn.addEventListener('click', connectSftp);
 
   document.getElementById('refresh').addEventListener('click', async () => {
     if (ws && ws.readyState === WebSocket.OPEN) {