feat: redesign settings menu with tabbed interface for better organization

- Replace single-page settings form with clean tabbed navigation
- Organize settings into logical sections: Proxmox VE, Backup Server, Alerts, System
- Improve visual hierarchy and reduce cognitive load
- Restore comfortable spacing while maintaining app's condensed philosophy
- Preserve all existing functionality with enhanced user experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/public/index.html

@@ -871,18 +871,37 @@
   <!-- Settings Modal -->
   <div id="settings-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50">
     <div class="modal-content bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-6xl max-h-[90vh] flex flex-col m-4">
-      <div class="modal-header flex justify-between items-center border-b border-gray-300 dark:border-gray-700 p-6">
-        <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Configuration Settings</h2>
+      <div class="modal-header flex justify-between items-center border-b border-gray-300 dark:border-gray-700 px-6 py-4">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Configuration Settings</h2>
         <button id="settings-modal-close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       </div>
+      
+      <!-- Tab Navigation -->
+      <div class="border-b border-gray-200 dark:border-gray-700">
+        <nav class="flex space-x-8 px-6" id="settings-tabs">
+          <button class="settings-tab active py-3 px-1 border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 font-medium text-sm" data-tab="proxmox">
+            Proxmox VE
+          </button>
+          <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="pbs">
+            Backup Server
+          </button>
+          <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="alerts">
+            Alerts
+          </button>
+          <button class="settings-tab py-3 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 font-medium text-sm" data-tab="system">
+            System
+          </button>
+        </nav>
+      </div>
+      
       <div id="settings-modal-body" class="overflow-y-auto flex-grow p-6 scrollbar">
         <p class="text-gray-500 dark:text-gray-400">Loading configuration...</p>
       </div>
-      <div class="modal-footer border-t border-gray-300 dark:border-gray-700 p-6">
+      <div class="modal-footer border-t border-gray-300 dark:border-gray-700 px-6 py-4">
         <div class="flex gap-3 justify-end">
           <button type="button" id="settings-cancel-button" class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium rounded-md transition-colors">
             Cancel