Add UI sync status indicator with pending badge

- Create htmx-powered partial template for sync status display
- Show Online/Offline indicator with color coding (green/red)
- Display pending changes count badge when there are unsynced items
- Add Sync button to push pending changes (appears only when needed)
- Auto-refresh every 30 seconds via htmx polling
- Replace JavaScript-based sync indicator with server-rendered partial
- Integrate SyncStatusPartial handler with template rendering

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

web/templates/partials/sync_status.html

@@ -0,0 +1,37 @@
+{{define "sync_status"}}
+<div class="flex items-center gap-2">
+    {{if .IsOffline}}
+    <span class="flex items-center gap-1 text-red-600" title="Offline">
+        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
+        <span class="text-xs">Offline</span>
+    </span>
+    {{else}}
+    <span class="flex items-center gap-1 text-green-600" title="Online">
+        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+        <span class="text-xs">Online</span>
+    </span>
+    {{end}}
+
+    {{if gt .PendingCount 0}}
+    <span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded-full text-xs font-medium">
+        {{.PendingCount}} pending
+    </span>
+    <button hx-post="/api/sync/push"
+            hx-swap="none"
+            hx-on::after-request="
+                if(event.detail.successful) {
+                    const resp = JSON.parse(event.detail.xhr.response);
+                    if(resp.success) {
+                        showToast('Синхронизировано: ' + resp.synced + ' изменений', 'success');
+                    } else {
+                        showToast('Ошибка: ' + (resp.error || 'неизвестная ошибка'), 'error');
+                    }
+                    htmx.trigger('#sync-status', 'refresh');
+                }
+            "
+            class="text-blue-600 hover:text-blue-800 text-xs underline cursor-pointer">
+        Sync
+    </button>
+    {{end}}
+</div>
+{{end}}