From b6e961dc84c8edb128ec26b386f1114274d05212 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Thu, 28 Aug 2025 11:42:27 +0200
Subject: [PATCH] feat: Fix header button functionality and improve UI
 conciseness - Add working minimize/close/settings buttons in header -
 Implement window control IPC handlers - Simplify status display (Status,
 Files, Mode instead of verbose text) - Remove unused lastSync element
 references - Add window control channels to preload script

---
 packages/desktop-sync/renderer/index.html  | 12 ++--
 packages/desktop-sync/renderer/renderer.js | 69 +++++++++++++---------
 packages/desktop-sync/src/main.ts          | 13 ++++
 packages/desktop-sync/src/preload.ts       |  3 +-
 4 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/packages/desktop-sync/renderer/index.html b/packages/desktop-sync/renderer/index.html
index 09cf6ab..bd3eb66 100644
--- a/packages/desktop-sync/renderer/index.html
+++ b/packages/desktop-sync/renderer/index.html
@@ -32,20 +32,16 @@
       <!-- Status Panel -->
       <div class="status-panel">
         <div class="status-item">
-          <span class="status-label">Sync Status:</span>
+          <span class="status-label">Status</span>
           <span id="syncStatus" class="status-value">Initializing...</span>
         </div>
         <div class="status-item">
-          <span class="status-label">Last Sync:</span>
-          <span id="lastSync" class="status-value">Never</span>
-        </div>
-        <div class="status-item">
-          <span class="status-label">Local Files:</span>
+          <span class="status-label">Files</span>
           <span id="filesSynced" class="status-value">0</span>
         </div>
         <div class="status-item">
-          <span class="status-label">Sync Mode:</span>
-          <span id="syncMode" class="status-value">Auto-sync</span>
+          <span class="status-label">Mode</span>
+          <span id="syncMode" class="status-value">Auto</span>
         </div>
         <div id="syncDetails" class="sync-details"></div>
       </div>
diff --git a/packages/desktop-sync/renderer/renderer.js b/packages/desktop-sync/renderer/renderer.js
index 36c11e2..93b456b 100644
--- a/packages/desktop-sync/renderer/renderer.js
+++ b/packages/desktop-sync/renderer/renderer.js
@@ -16,7 +16,6 @@ class RekordboxSyncRenderer {
     // Status elements
     this.syncStatusElement = document.getElementById('syncStatus');
     this.filesSyncedElement = document.getElementById('filesSynced');
-    this.lastSyncElement = document.getElementById('lastSync');
     this.syncDetailsElement = document.getElementById('syncDetails');
     this.syncModeElement = document.getElementById('syncMode');
     
@@ -214,36 +213,28 @@ class RekordboxSyncRenderer {
   updateSyncStatus(status) {
     if (!status) return;
 
-    // Update main status with more detailed information
+    // Update main status with concise information
     if (this.syncStatusElement) {
       if (status.isRunning) {
         let statusText = 'Running';
         
-        // Add current phase information
+        // Add current phase information (shortened)
         if (status.currentPhase) {
-          statusText += ` - ${status.currentPhase}`;
-        }
-        
-        // Add file counts (cleaner display)
-        if (status.stats && status.stats.totalFilesSynced > 0) {
-          statusText += ` - ${status.stats.totalFilesSynced} local files`;
+          const phase = status.currentPhase === 'watching' ? 'Watching' : 
+                       status.currentPhase === 'downloading' ? 'Downloading' :
+                       status.currentPhase === 'uploading' ? 'Uploading' :
+                       status.currentPhase === 'completed' ? 'Complete' :
+                       status.currentPhase;
+          statusText = phase;
         }
         
         this.syncStatusElement.textContent = statusText;
         this.syncStatusElement.className = 'status-value running';
       } else {
-        if (status.completedCount > 0 && status.pendingCount === 0 && status.inProgressCount === 0) {
-          this.syncStatusElement.textContent = 'Completed';
-          this.syncStatusElement.className = 'status-value completed';
-        } else {
-          this.syncStatusElement.textContent = 'Stopped';
-          this.syncStatusElement.className = 'status-value stopped';
-          
-
-        }
-        if (this.startBtn) this.startBtn.disabled = false;
-        if (this.stopBtn) this.stopBtn.disabled = true;
+        this.syncStatusElement.textContent = 'Stopped';
+        this.syncStatusElement.className = 'status-value stopped';
       }
+    }
 
       // Also update the force sync button state
       const forceSyncBtn = document.getElementById('forceSyncBtn');
@@ -276,15 +267,7 @@ class RekordboxSyncRenderer {
       console.warn('⚠️  filesSyncedElement not found!');
     }
 
-    // Update last sync time
-    if (this.lastSyncElement) {
-      if (status.lastSync) {
-        const date = new Date(status.lastSync);
-        this.lastSyncElement.textContent = date.toLocaleString();
-      } else {
-        this.lastSyncElement.textContent = 'Never';
-      }
-    }
+
 
     // Update detailed status
     this.updateDetailedStatus(status);
@@ -502,6 +485,34 @@ class RekordboxSyncRenderer {
   showNotification(type, title, message) {
     // You could implement desktop notifications here
   }
+
+  /**
+   * Open settings modal
+   */
+  openSettings() {
+    const modal = document.getElementById('settingsModal');
+    if (modal) {
+      modal.classList.add('show');
+    }
+  }
+
+  /**
+   * Minimize window
+   */
+  minimizeWindow() {
+    if (window.electronAPI && window.electronAPI.invoke) {
+      window.electronAPI.invoke('window:minimize');
+    }
+  }
+
+  /**
+   * Close window
+   */
+  closeWindow() {
+    if (window.electronAPI && window.electronAPI.invoke) {
+      window.electronAPI.invoke('window:close');
+    }
+  }
 }
 
 // Initialize the renderer when DOM is loaded
diff --git a/packages/desktop-sync/src/main.ts b/packages/desktop-sync/src/main.ts
index 0f42bc4..3893eb5 100644
--- a/packages/desktop-sync/src/main.ts
+++ b/packages/desktop-sync/src/main.ts
@@ -272,6 +272,19 @@ class RekordboxSyncApp {
       }
     });
 
+    // Window controls
+    ipcMain.handle('window:minimize', () => {
+      if (this.mainWindow) {
+        this.mainWindow.minimize();
+      }
+    });
+
+    ipcMain.handle('window:close', () => {
+      if (this.mainWindow) {
+        this.mainWindow.close();
+      }
+    });
+
     // File operations
     ipcMain.handle('dialog:select-folder', async () => {
       // This would need to be implemented with electron dialog
diff --git a/packages/desktop-sync/src/preload.ts b/packages/desktop-sync/src/preload.ts
index 48182e8..2cea980 100644
--- a/packages/desktop-sync/src/preload.ts
+++ b/packages/desktop-sync/src/preload.ts
@@ -11,7 +11,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
       'sync:force-full',
       'sync:trigger-immediate',
       'sync:get-status',
-    
+      'window:minimize',
+      'window:close',
       'config:get',
       'config:update-s3',
       'config:update-sync',