Sync all playlists and track deletions

app/templates/home.html

@@ -8,6 +8,60 @@
     </div>
 </div>
 
+{% if message %}
+<div class="alert alert-{{ message_type or 'info' }}" role="alert">
+    {{ message }}
+</div>
+{% endif %}
+
+<div class="card mb-4">
+    <div class="card-body">
+        <div class="d-flex flex-column flex-xl-row align-items-xl-center gap-3 mb-3">
+            <div>
+                <h5 class="card-title mb-0">选择同步策略</h5>
+                <small class="text-body-secondary">根据需要选择单向覆盖或双向合并策略</small>
+            </div>
+            <form class="ms-xl-auto w-100 w-xl-auto" method="post" action="/sync">
+                <div class="row gy-2 gx-2 align-items-end">
+                    <div class="col-12 col-lg-8">
+                        <label class="form-label mb-1">同步模式</label>
+                        <select class="form-select" name="mode">
+                            {% for option in sync_modes %}
+                            <option value="{{ option.value }}" {% if selected_mode == option.value %}selected{% endif %}>
+                                {{ option.label }}
+                            </option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="col-auto">
+                        <label class="form-label d-none d-lg-block">&nbsp;</label>
+                        <div>
+                            <button class="btn btn-primary" type="submit">
+                                <i class="bi bi-play-fill"></i>
+                                <span class="ms-1">开始同步</span>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="local_path" value="{{ local_path }}">
+                </div>
+            </form>
+        </div>
+        <ul class="mb-0 text-body-secondary small ps-3">
+            <li><strong>完全本地优先</strong>：本地列表直接覆盖云端，顺序以本地为准（无 diff）。</li>
+            <li><strong>完全云端优先</strong>：云端列表直接覆盖本地，顺序以云端为准（无 diff）。</li>
+            <li><strong>双向合并（本地优先）</strong>：三方合并，冲突时选本地。</li>
+            <li><strong>双向合并（云端优先）</strong>：三方合并，冲突时选云端。</li>
+        </ul>
+        {% if sync_result %}
+        <div class="alert alert-info mt-3 mb-0" role="alert">
+            <div class="fw-semibold">{{ sync_result.mode_label }}</div>
+            <div class="small mb-1">播放列表：{{ sync_result.playlist_count }}，删除：{{ sync_result.delete_count }}，合并曲目：{{ sync_result.merged_count }}，冲突数：{{ sync_result.conflict_count }}</div>
+            <div class="small text-body-secondary">已写入：{{ sync_result.output_dir }}</div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+
 <div class="row g-4">
     <div class="col-12 col-xl-6">
         <div class="card h-100">