feat: sync button indicates in-progress synchronization

The sync button is disabled during the ongoing synchronization of bookmarks.
This prevents certain race conditions during the update of bookmarks,
which resulted in duplicates.
Additionally, this helps indicate to the user that the process is ongoing in case of a slow network.

package.json

@@ -2,7 +2,7 @@
 	"name": "bookmarksync",
 	"description": "Synchronize browser bookmarks from a GitHub repository",
 	"private": true,
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"license": "MIT",
 	"type": "module",
 	"scripts": {

src/entrypoints/popup/popup.css

@@ -83,6 +83,13 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+button:disabled {
+	background-color: #757575;
+	color: #ccc;
+	cursor: not-allowed;
+	border: 1px solid #606060;
+	opacity: 0.7;
+}
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/entrypoints/popup/popup.js

@@ -5,11 +5,19 @@ import {getSyncBookmarks} from '@/utils/bookmarksync.js';
 const syncBookmarks = getSyncBookmarks();
 
 document.querySelector('#bookmarksync-logo').src = logo;
-document.querySelector('#sync-now').addEventListener('click', () => {
+
+const syncButton = document.querySelector('#sync-now');
+syncButton.addEventListener('click', async () => {
+	console.log('Manual sync triggered');
+	const originalText = syncButton.textContent;
+	syncButton.textContent = 'Synchronizing...';
+	syncButton.disabled = true;
 	try {
-		console.log('Manual sync triggered');
-		syncBookmarks(true);
+		await syncBookmarks(true);
 	} catch (error) {
 		console.error('Error triggering manual bookmark sync:', error);
+	} finally {
+		syncButton.disabled = false;
+		syncButton.textContent = originalText;
 	}
 });