feat: Desktop-Client komplett - Auto-Sync, Watcher, Locking, Tray

Alles eingebunden was vorher nur als unused code existierte:

Auto-Sync:
- Nach erstem Sync laeuft alle 30s ein Delta-Sync im Hintergrund
- Status-Badge zeigt live: Synchronisiert / Synchronisiere... / Fehler
- Sync-Protokoll mit Timestamps

File-Watcher:
- Ueberwacht den Sync-Ordner auf lokale Aenderungen (Erstellt/Geaendert/Geloescht)
- Aenderungen werden im UI unter "Lokale Aenderungen" angezeigt
- Filtert temp/hidden files automatisch

File-Locking:
- lock_file_cmd / unlock_file_cmd Tauri-Kommandos
- Heartbeat-Thread sendet alle 60s Heartbeat fuer gesperrte Dateien
- locked_files Liste im State

System-Tray:
- Tray-Icon mit "Mini-Cloud Sync" Tooltip
- Rechtsklick-Menue: Oeffnen / Beenden
- "Oeffnen" zeigt das Hauptfenster

UI:
- Status-Badge mit Farbe (gruen=synced, orange=syncing, rot=error)
- Spinning-Icon waehrend Sync
- "Auto-Sync aktiv" Hinweis nach erstem Sync
- Sync-Ordner wird nach Start gesperrt (nicht mehr aenderbar)
- Lokale Aenderungen und Sync-Log mit Timestamps

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/desktop/src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 
 const screen = ref("login"); // login | main
 const serverUrl = ref("https://");
@@ -12,9 +13,16 @@ const loginLoading = ref(false);
 const syncDir = ref("");
 const syncLog = ref([]);
 const syncing = ref(false);
+const syncStatus = ref("Nicht verbunden");
 const userInfo = ref(null);
 const fileTree = ref([]);
-const statusMsg = ref("Nicht verbunden");
+const fileChanges = ref([]);
+const autoSyncActive = ref(false);
+
+let unlistenStatus = null;
+let unlistenLog = null;
+let unlistenError = null;
+let unlistenFileChange = null;
 
 async function handleLogin() {
   loginError.value = "";
@@ -27,10 +35,12 @@ async function handleLogin() {
     });
     userInfo.value = result;
     screen.value = "main";
-    statusMsg.value = `Verbunden als ${result.username}`;
+    syncStatus.value = `Verbunden als ${result.username}`;
+
+    // Default sync dir
+    const home = navigator.platform.includes("Win") ? "C:\\Users\\" + result.username : "/home/" + result.username;
+    syncDir.value = `${home}/MiniCloud`;
 
-    // Set default sync dir
-    syncDir.value = `${await getDefaultSyncDir()}/MiniCloud`;
     await loadFileTree();
   } catch (err) {
     loginError.value = String(err);
@@ -39,36 +49,18 @@ async function handleLogin() {
   }
 }
 
-async function getDefaultSyncDir() {
-  // Use home directory
-  try {
-    const home = await invoke("get_status");
-    return home.sync_dir || (navigator.platform.includes("Win") ? "C:\\Users" : "/home");
-  } catch {
-    return "/home";
-  }
-}
-
-async function setSyncFolder() {
-  try {
-    await invoke("set_sync_dir", { path: syncDir.value });
-    statusMsg.value = `Sync-Ordner: ${syncDir.value}`;
-  } catch (err) {
-    statusMsg.value = `Fehler: ${err}`;
-  }
-}
-
 async function runSync() {
   syncing.value = true;
-  statusMsg.value = "Synchronisiere...";
+  syncStatus.value = "Erster Sync...";
   try {
     await invoke("set_sync_dir", { path: syncDir.value });
     const log = await invoke("start_sync");
-    syncLog.value = log;
-    statusMsg.value = `Sync fertig: ${log.length} Aktionen`;
+    syncLog.value = [...log, ...syncLog.value].slice(0, 100);
+    syncStatus.value = "Synchronisiert";
+    autoSyncActive.value = true;
     await loadFileTree();
   } catch (err) {
-    statusMsg.value = `Sync-Fehler: ${err}`;
+    syncStatus.value = `Fehler: ${err}`;
   } finally {
     syncing.value = false;
   }
@@ -90,6 +82,46 @@ function formatSize(bytes) {
   while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
   return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
 }
+
+function timestamp() {
+  return new Date().toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+onMounted(async () => {
+  // Listen for sync events from Rust backend
+  unlistenStatus = await listen("sync-status", (event) => {
+    if (event.payload === "syncing") {
+      syncStatus.value = "Synchronisiere...";
+      syncing.value = true;
+    } else if (event.payload === "synced") {
+      syncStatus.value = "Synchronisiert";
+      syncing.value = false;
+      loadFileTree();
+    }
+  });
+
+  unlistenLog = await listen("sync-log", (event) => {
+    const entries = event.payload.map(msg => `[${timestamp()}] ${msg}`);
+    syncLog.value = [...entries, ...syncLog.value].slice(0, 200);
+  });
+
+  unlistenError = await listen("sync-error", (event) => {
+    syncStatus.value = `Fehler: ${event.payload}`;
+    syncLog.value = [`[${timestamp()}] FEHLER: ${event.payload}`, ...syncLog.value].slice(0, 200);
+    syncing.value = false;
+  });
+
+  unlistenFileChange = await listen("file-change", (event) => {
+    fileChanges.value = [`[${timestamp()}] ${event.payload}`, ...fileChanges.value].slice(0, 50);
+  });
+});
+
+onUnmounted(() => {
+  unlistenStatus?.();
+  unlistenLog?.();
+  unlistenError?.();
+  unlistenFileChange?.();
+});
 </script>
 
 <template>
@@ -127,8 +159,11 @@ function formatSize(bytes) {
     <div class="toolbar">
       <div class="toolbar-left">
         <span class="logo-small">☁</span>
-        <strong>Mini-Cloud</strong>
-        <span class="status-badge">{{ statusMsg }}</span>
+        <strong>Mini-Cloud Sync</strong>
+        <span class="status-badge" :class="{ syncing: syncing, error: syncStatus.startsWith('Fehler') }">
+          <span v-if="syncing" class="spin">⟳</span>
+          {{ syncStatus }}
+        </span>
       </div>
       <div class="toolbar-right">
         <span class="user-info">{{ userInfo?.username }}</span>
@@ -140,29 +175,49 @@ function formatSize(bytes) {
       <div class="section">
         <h3>Sync-Ordner</h3>
         <div class="sync-row">
-          <input v-model="syncDir" class="sync-input" />
+          <input v-model="syncDir" class="sync-input" :disabled="autoSyncActive" />
           <button @click="runSync" :disabled="syncing" class="btn-primary">
-            {{ syncing ? "Synchronisiere..." : "Jetzt synchronisieren" }}
+            {{ autoSyncActive ? "⟳ Auto-Sync aktiv" : (syncing ? "Synchronisiere..." : "Sync starten") }}
           </button>
         </div>
+        <div v-if="autoSyncActive" class="auto-sync-info">
+          Auto-Sync alle 30 Sekunden aktiv. Datei-Watcher ueberwacht lokale Aenderungen.
+        </div>
       </div>
 
       <!-- File Tree -->
       <div class="section">
-        <h3>Server-Dateien</h3>
+        <div class="section-header">
+          <h3>Server-Dateien</h3>
+          <button v-if="autoSyncActive" @click="loadFileTree" class="btn-small">Aktualisieren</button>
+        </div>
         <div class="file-tree">
-          <div v-for="entry in fileTree" :key="entry.id" class="tree-item">
-            <span class="tree-icon">{{ entry.is_folder ? "📁" : "📄" }}</span>
-            <span class="tree-name">{{ entry.name }}</span>
-            <span v-if="entry.locked" class="tree-lock" :title="'Gesperrt von ' + entry.locked_by">
-              🔒 {{ entry.locked_by }}
-            </span>
-            <span v-if="!entry.is_folder" class="tree-size">{{ formatSize(entry.size) }}</span>
-          </div>
+          <template v-for="entry in fileTree" :key="entry.id">
+            <div class="tree-item">
+              <span class="tree-icon">{{ entry.is_folder ? "📁" : "📄" }}</span>
+              <span class="tree-name">{{ entry.name }}</span>
+              <span v-if="entry.locked" class="tree-lock">🔒 {{ entry.locked_by }}</span>
+              <span v-if="!entry.is_folder" class="tree-size">{{ formatSize(entry.size) }}</span>
+            </div>
+            <div v-if="entry.children" v-for="child in entry.children" :key="child.id" class="tree-item indent">
+              <span class="tree-icon">{{ child.is_folder ? "📁" : "📄" }}</span>
+              <span class="tree-name">{{ child.name }}</span>
+              <span v-if="child.locked" class="tree-lock">🔒 {{ child.locked_by }}</span>
+              <span v-if="!child.is_folder" class="tree-size">{{ formatSize(child.size) }}</span>
+            </div>
+          </template>
           <div v-if="!fileTree.length" class="empty">Keine Dateien</div>
         </div>
       </div>
 
+      <!-- File Changes (Watcher) -->
+      <div v-if="fileChanges.length" class="section">
+        <h3>Lokale Aenderungen</h3>
+        <div class="log-list">
+          <div v-for="(msg, i) in fileChanges" :key="i" class="log-item change">{{ msg }}</div>
+        </div>
+      </div>
+
       <!-- Sync Log -->
       <div v-if="syncLog.length" class="section">
         <h3>Sync-Protokoll</h3>
@@ -180,9 +235,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 14px; color: #1a1a1a; background: #f0f2f5;
 }
-.login-screen {
-  height: 100vh; display: flex; align-items: center; justify-content: center;
-}
+.login-screen { height: 100vh; display: flex; align-items: center; justify-content: center; }
 .login-card {
   background: white; border-radius: 12px; padding: 2rem; width: 360px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.1);
@@ -200,11 +253,17 @@ body {
 .field input:focus { border-color: #4a90d9; outline: none; background: white; }
 .error { color: #e53e3e; font-size: 0.85rem; margin-bottom: 0.75rem; }
 .btn-primary {
-  width: 100%; padding: 0.6rem; background: #4a90d9; color: white;
+  padding: 0.6rem 1rem; background: #4a90d9; color: white;
   border: none; border-radius: 6px; font-size: 0.9rem; cursor: pointer; font-weight: 500;
+  white-space: nowrap;
 }
 .btn-primary:hover { background: #3a7bc8; }
 .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
+.btn-small {
+  padding: 0.25rem 0.5rem; background: #e8e8e8; border: none; border-radius: 4px;
+  font-size: 0.8rem; cursor: pointer;
+}
+.btn-small:hover { background: #ddd; }
 
 .main-screen { height: 100vh; display: flex; flex-direction: column; }
 .toolbar {
@@ -213,32 +272,50 @@ body {
 }
 .toolbar-left { display: flex; align-items: center; gap: 0.5rem; }
 .logo-small { font-size: 1.2rem; }
-.status-badge { font-size: 0.8rem; color: #666; background: #f0f0f0; padding: 0.2rem 0.5rem; border-radius: 4px; }
+.status-badge {
+  font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 4px;
+  background: #e8f5e9; color: #2e7d32;
+}
+.status-badge.syncing { background: #fff3e0; color: #e65100; }
+.status-badge.error { background: #ffebee; color: #c62828; }
+.spin { display: inline-block; animation: spin 1s linear infinite; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 .user-info { font-size: 0.85rem; color: #666; }
 .content { flex: 1; overflow-y: auto; padding: 1rem; }
-.section { background: white; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
-.section h3 { margin-bottom: 0.75rem; font-size: 0.95rem; }
+.section { background: white; border-radius: 8px; padding: 1rem; margin-bottom: 0.75rem; }
+.section h3 { margin-bottom: 0.5rem; font-size: 0.95rem; }
+.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
+.section-header h3 { margin: 0; }
 .sync-row { display: flex; gap: 0.5rem; }
-.sync-input { flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem; }
-.file-tree { max-height: 300px; overflow-y: auto; }
+.sync-input {
+  flex: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.85rem;
+}
+.sync-input:disabled { background: #f5f5f5; color: #999; }
+.auto-sync-info { margin-top: 0.5rem; font-size: 0.8rem; color: #2e7d32; }
+.file-tree { max-height: 250px; overflow-y: auto; }
 .tree-item {
   display: flex; align-items: center; gap: 0.5rem;
-  padding: 0.375rem 0; border-bottom: 1px solid #f5f5f5; font-size: 0.85rem;
+  padding: 0.3rem 0; border-bottom: 1px solid #f5f5f5; font-size: 0.85rem;
 }
+.tree-item.indent { padding-left: 1.5rem; }
 .tree-icon { flex-shrink: 0; }
-.tree-name { flex: 1; }
-.tree-lock { font-size: 0.75rem; color: #e67e22; }
-.tree-size { font-size: 0.75rem; color: #999; }
+.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-lock { font-size: 0.75rem; color: #e67e22; flex-shrink: 0; }
+.tree-size { font-size: 0.75rem; color: #999; flex-shrink: 0; }
 .empty { text-align: center; color: #999; padding: 1rem; }
-.log-list { max-height: 200px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; }
-.log-item { padding: 0.25rem 0; border-bottom: 1px solid #f5f5f5; }
+.log-list { max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 0.78rem; }
+.log-item { padding: 0.2rem 0; border-bottom: 1px solid #f8f8f8; color: #555; }
+.log-item.change { color: #1565c0; }
 
 @media (prefers-color-scheme: dark) {
   body { color: #e0e0e0; background: #1a1a1a; }
   .login-card, .section { background: #2a2a2a; }
   .toolbar { background: #2a2a2a; border-color: #3a3a3a; }
   .field input, .sync-input { background: #333; border-color: #444; color: #e0e0e0; }
-  .status-badge { background: #3a3a3a; color: #aaa; }
+  .status-badge { background: #1b5e20; color: #a5d6a7; }
+  .status-badge.syncing { background: #e65100; color: #ffcc80; }
   .tree-item { border-color: #333; }
+  .log-item { border-color: #333; color: #aaa; }
+  .log-item.change { color: #64b5f6; }
 }
 </style>