From ffbd80881ab5ff6c26355988070d39c219342df3 Mon Sep 17 00:00:00 2001
From: Timo <6156589+Shik3i@users.noreply.github.com>
Date: Wed, 22 Apr 2026 09:24:12 +0200
Subject: [PATCH] UI: Refactored Sync tab into a Remote Control interface

---
 extension/popup.html | 14 ++++++++------
 extension/popup.js   | 20 +++++++++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/extension/popup.html b/extension/popup.html
index dd9865b..3e4d0ce 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -253,10 +253,6 @@
                 </div>
             </div>
 
-            <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); margin-bottom: 12px;">
-                ⚡ Force Sync Everyone
-            </button>
-
             <button id="leaveBtn" class="secondary" style="color: var(--error); border-color: var(--error);">Leave Room</button>
         </div>
     </div>
@@ -270,11 +266,17 @@
             </select>
         </div>
         
-        <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7);">
+        <label>Remote Control</label>
+        <div style="display: flex; gap: 8px; margin-bottom: 20px;">
+            <button id="playBtn" class="primary" style="flex: 1; background: var(--success);">▶ Play</button>
+            <button id="pauseBtn" class="primary" style="flex: 1; background: var(--error);">⏸ Pause</button>
+        </div>
+
+        <button id="forceSyncBtn" class="primary" style="background: linear-gradient(135deg, #6366f1, #a855f7); margin-bottom: 20px;">
             ⚡ Force Sync Everyone
         </button>
 
-        <div style="margin-top: 20px;">
+        <div style="margin-bottom: 20px;">
             <label>Peers in Room</label>
             <div id="peerList" class="info-card">
                 <div style="text-align:center; color: var(--text-muted); font-size: 12px;">No peers connected</div>
diff --git a/extension/popup.js b/extension/popup.js
index 672f51d..332421f 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -38,7 +38,9 @@ const elements = {
     roomError: document.getElementById('roomError'),
     retryBtn: document.getElementById('retryBtn'),
     sectionJoin: document.getElementById('section-join'),
-    sectionActive: document.getElementById('section-active')
+    sectionActive: document.getElementById('section-active'),
+    playBtn: document.getElementById('playBtn'),
+    pauseBtn: document.getElementById('pauseBtn')
 };
 
 let localPeerId = null;
@@ -414,6 +416,22 @@ elements.forceSyncBtn.addEventListener('click', async () => {
     });
 });
 
+elements.playBtn.addEventListener('click', () => {
+    chrome.runtime.sendMessage({
+        type: 'CONTENT_EVENT',
+        action: EVENTS.PLAY,
+        payload: {}
+    });
+});
+
+elements.pauseBtn.addEventListener('click', () => {
+    chrome.runtime.sendMessage({
+        type: 'CONTENT_EVENT',
+        action: EVENTS.PAUSE,
+        payload: {}
+    });
+});
+
 elements.clearLogs.addEventListener('click', () => {
     chrome.runtime.sendMessage({ type: 'CLEAR_LOGS' }, () => {
         elements.logList.innerHTML = '';