Fix provider icon display with proper Alpine.js directives

- Replace broken template literals with Alpine.js :class and x-text directives
- Add getNoteSyncIcon() helper method to get icon symbol based on status
- Properly bind classes for color and background based on sync status
- Status icons: ✓ (ok, green), ⟳ (syncing, blue), ⚠ (partial, yellow), ✗ (error, red), ○ (idle, gray)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: djinni-hppro

src/index.html

@@ -186,13 +186,10 @@ <h3 class="text-lg font-semibold" x-text="noteEditorNoteId ? ('Editing: #' + not
 									<span class="text-xs font-bold" x-show="note.priority" x-text="'P:' + note.priority"></span>
 								</div>
 								<div class="flex items-center gap-2">
-									<span class="text-xs ${getNoteSyncIconClass(getNoteSyncStatus(note).status).color} ${getNoteSyncIconClass(getNoteSyncStatus(note).status).bg} rounded-full p-1.5 shadow-sm">
-										${getNoteSyncStatus(note).status === 'ok' ? '✓' : getNoteSyncStatus(note).status === 'syncing' ? '⟳' : getNoteSyncStatus(note).status === 'partial' ? '⚠' : getNoteSyncStatus(note).status === 'error' ? '✗' : '○'}
+									<span class="text-xs rounded-full p-1.5 shadow-sm" :class="getNoteSyncIconClass(getNoteSyncStatus(note).status).color + ' ' + getNoteSyncIconClass(getNoteSyncStatus(note).status).bg">
+										<span x-text="getNoteSyncIcon(getNoteSyncStatus(note).status)"></span>
 									</span>
 									<h4 class="text-base font-bold truncate mb-2" :style="{ 'color': getNoteColor(note) }" x-text="note.title"></h4>
-									<span class="text-xs ${getNoteSyncStatus(note).status === 'ok' ? 'text-green-600' : getNoteSyncStatus(note).status === 'syncing' ? 'text-blue-600' : getNoteSyncStatus(note).status === 'partial' ? 'text-yellow-600' : getNoteSyncStatus(note).status === 'error' ? 'text-red-600' : 'text-gray-600'} ml-2">
-										${getNoteSyncStatus(note).status}
-									</span>
 								</div>
 								<p class="text-sm line-clamp-5 break-all" x-text="getNotePreview(note.content)"></p>
 						</div>

src/index.js

@@ -408,6 +408,17 @@ document.addEventListener('alpine:init', () => { Alpine.data('mainApp', () => ({
 				return { icon: 'clock', color: 'text-gray-400', bg: 'bg-gray-100' };
 		}
 	},
+
+	getNoteSyncIcon(status) {
+		switch(status) {
+			case 'ok': return '✓';
+			case 'syncing': return '⟳';
+			case 'partial': return '⚠';
+			case 'error': return '✗';
+			case 'idle': return '○';
+			default: return '○';
+		}
+	},
 
 getNoteSummary(note) {
 		const status = this.getNoteSyncStatus(note);