Refactor CSS and JavaScript for improved readability and consistency

- Updated CSS styles for buttons, form controls, badges, and notifications to use consistent indentation and formatting.
- Enhanced JavaScript code in sftp.js for better readability by breaking long lines and ensuring consistent formatting.

frontend/src/css/components.css

@@ -103,7 +103,7 @@
   background: rgba(239, 83, 80, 0.12);
 }
 .btn-danger:active {
-    background: rgba(239, 83, 80, 0.20);
+  background: rgba(239, 83, 80, 0.2);
 }
 
 .btn-danger-filled {
@@ -172,7 +172,6 @@
   margin-left: -1px;
 }
 
-
 /* =======================================================================
    FORM CONTROLS
    ======================================================================= */
@@ -191,7 +190,7 @@
 }
 
 .form-label-required::after {
-    content: ' *';
+  content: " *";
   color: var(--error);
 }
 
@@ -279,7 +278,7 @@
 .form-input.is-error:focus,
 .form-select.is-error:focus,
 .form-textarea.is-error:focus {
-    box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.20);
+  box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
 }
 
 /* Inline layout (label beside control) */
@@ -325,7 +324,7 @@
 }
 
 .form-checkbox input[type="checkbox"]:checked::after {
-    content: '';
+  content: "";
   position: absolute;
   top: 2px;
   left: 5px;
@@ -365,7 +364,7 @@
 }
 
 .form-toggle input[type="checkbox"]::after {
-    content: '';
+  content: "";
   position: absolute;
   top: 2px;
   left: 2px;
@@ -373,7 +372,9 @@
   height: 14px;
   border-radius: 50%;
   background: var(--text-secondary);
-    transition: transform var(--transition-normal), background var(--transition-normal);
+  transition:
+    transform var(--transition-normal),
+    background var(--transition-normal);
 }
 
 .form-toggle input[type="checkbox"]:checked {
@@ -385,7 +386,6 @@
   background: var(--text-inverse);
 }
 
-
 /* =======================================================================
    BADGES
    ======================================================================= */
@@ -429,23 +429,36 @@
   gap: var(--space-1);
 }
 .badge-status::before {
-    content: '';
+  content: "";
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--text-tertiary);
   flex-shrink: 0;
 }
-.badge-status.is-connected::before    { background: var(--success); }
+.badge-status.is-connected::before {
-.badge-status.is-connecting::before   { background: var(--warning); animation: pulse-dot 1.2s ease infinite; }
+  background: var(--success);
-.badge-status.is-error::before        { background: var(--error); }
+}
-.badge-status.is-disconnected::before { background: var(--text-tertiary); }
+.badge-status.is-connecting::before {
-
+  background: var(--warning);
-@keyframes pulse-dot {
+  animation: pulse-dot 1.2s ease infinite;
-    0%, 100% { opacity: 1; }
+}
-    50%      { opacity: 0.4; }
+.badge-status.is-error::before {
+  background: var(--error);
+}
+.badge-status.is-disconnected::before {
+  background: var(--text-tertiary);
 }
 
+@keyframes pulse-dot {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
 
 /* =======================================================================
    CARDS & SURFACES
@@ -478,7 +491,6 @@
   background: var(--bg-active);
 }
 
-
 /* =======================================================================
    DROPDOWN / CONTEXT MENU
    ======================================================================= */
@@ -530,7 +542,9 @@
   font-size: var(--text-sm);
   color: var(--text-secondary);
   cursor: pointer;
-    transition: background var(--transition-fast), color var(--transition-fast);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast);
   border: none;
   background: none;
   text-align: left;
@@ -545,7 +559,7 @@
   color: var(--error);
 }
 .dropdown-item.is-danger:hover {
-    background: rgba(239, 83, 80, 0.10);
+  background: rgba(239, 83, 80, 0.1);
 }
 
 .dropdown-item.is-disabled {
@@ -581,7 +595,6 @@
   letter-spacing: 0.05em;
 }
 
-
 /* =======================================================================
    NOTIFICATIONS (toast)
    ======================================================================= */
@@ -617,12 +630,24 @@
 }
 
 @keyframes notification-in {
-    from { opacity: 0; transform: translateX(20px); }
+  from {
-    to   { opacity: 1; transform: translateX(0); }
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 @keyframes notification-out {
-    from { opacity: 1; transform: translateX(0); }
+  from {
-    to   { opacity: 0; transform: translateX(20px); }
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
 }
 
 .notification-icon {
@@ -640,10 +665,18 @@
   background: var(--text-tertiary);
 }
 
-.notification-success .notification-icon { background: var(--success); }
+.notification-success .notification-icon {
-.notification-error .notification-icon   { background: var(--error); }
+  background: var(--success);
-.notification-warning .notification-icon { background: var(--warning); }
+}
-.notification-info .notification-icon    { background: var(--info); }
+.notification-error .notification-icon {
+  background: var(--error);
+}
+.notification-warning .notification-icon {
+  background: var(--warning);
+}
+.notification-info .notification-icon {
+  background: var(--info);
+}
 
 .notification-body {
   flex: 1;
@@ -673,7 +706,9 @@
   border-radius: var(--radius-sm);
   color: var(--text-tertiary);
   cursor: pointer;
-    transition: background var(--transition-fast), color var(--transition-fast);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast);
 }
 .notification-close:hover {
   background: var(--bg-hover);
@@ -681,11 +716,18 @@
 }
 
 /* Colour variants (left border accent) */
-.notification-success { border-left: 3px solid var(--success); }
+.notification-success {
-.notification-error   { border-left: 3px solid var(--error); }
+  border-left: 3px solid var(--success);
-.notification-warning { border-left: 3px solid var(--warning); }
+}
-.notification-info    { border-left: 3px solid var(--info); }
+.notification-error {
-
+  border-left: 3px solid var(--error);
+}
+.notification-warning {
+  border-left: 3px solid var(--warning);
+}
+.notification-info {
+  border-left: 3px solid var(--info);
+}
 
 /* =======================================================================
    DISCLOSURE / ACCORDION
@@ -705,7 +747,9 @@
   font-weight: var(--weight-medium);
   color: var(--text-secondary);
   cursor: pointer;
-    transition: background var(--transition-fast), color var(--transition-fast);
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast);
   user-select: none;
   text-align: left;
   background: none;
@@ -743,7 +787,6 @@
   padding: 0 var(--space-4) var(--space-4);
 }
 
-
 /* =======================================================================
    SEARCH INPUT
    ======================================================================= */
@@ -757,7 +800,9 @@
   background: var(--bg-input);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
-    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
 }
 
 .search-input::placeholder {
@@ -780,7 +825,7 @@
 }
 
 .search-wrapper::before {
-    content: '⌕';
+  content: "⌕";
   position: absolute;
   left: var(--space-3);
   top: 50%;
@@ -790,7 +835,6 @@
   pointer-events: none;
 }
 
-
 /* =======================================================================
    EMPTY STATE
    ======================================================================= */
@@ -832,7 +876,6 @@
   gap: var(--space-3);
 }
 
-
 /* =======================================================================
    TOOLTIP
    ======================================================================= */
@@ -858,7 +901,6 @@
   opacity: 1;
 }
 
-
 /* =======================================================================
    DIVIDER
    ======================================================================= */
@@ -876,7 +918,6 @@
   margin: 0 var(--space-2);
 }
 
-
 /* =======================================================================
    LOADING / SPINNER
    ======================================================================= */
@@ -897,7 +938,9 @@
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* =======================================================================

frontend/src/js/sftp.js

@@ -795,7 +795,8 @@
       if (!state) {
         // Panel not open — still track so we can show a notification on completion
         if (payload.done) {
-          var dir = payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
+          var dir =
+            payload.direction === "upload" ? "↑ Uploaded" : "↓ Downloaded";
           var name = payload.path.split("/").pop() || payload.path;
           this.app.notifications.success(dir + " " + name);
         }
@@ -873,8 +874,12 @@
 
         var progress = createElement("div", "sftp-transfer-progress");
         var bar = createElement("div", "sftp-transfer-bar");
-        var pct = transfer.total > 0
+        var pct =
-          ? Math.min(100, Math.round((transfer.transferred / transfer.total) * 100))
+          transfer.total > 0
+            ? Math.min(
+                100,
+                Math.round((transfer.transferred / transfer.total) * 100),
+              )
             : 0;
         bar.style.width = pct + "%";
         progress.appendChild(bar);
@@ -883,7 +888,8 @@
         var meta = createElement("span", "sftp-transfer-meta");
         var transferredStr = formatBytes(transfer.transferred);
         var totalStr = transfer.total > 0 ? formatBytes(transfer.total) : "?";
-        meta.textContent = transferredStr + " / " + totalStr + " (" + pct + "%)";
+        meta.textContent =
+          transferredStr + " / " + totalStr + " (" + pct + "%)";
         info.appendChild(meta);
 
         row.appendChild(info);