v1.0.5: Offline mode with sync queue, fix symbol/text rotation on compass, polygon area display

src/app/app/page.tsx

@@ -19,9 +19,10 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { JournalView } from '@/components/journal/journal-view'
 import { jsPDF } from 'jspdf'
-import { Lock, Unlock, Eye, AlertTriangle } from 'lucide-react'
+import { Lock, Unlock, Eye, AlertTriangle, WifiOff } from 'lucide-react'
 import { getSocket } from '@/lib/socket'
 import { CustomDragLayer } from '@/components/map/custom-drag-layer'
+import { addToSyncQueue, flushSyncQueue, getSyncQueue, isOnline as checkOnline } from '@/lib/offline-sync'
 
 export interface Project {
   id: string
@@ -366,6 +367,54 @@ export default function AppPage() {
   // Ref to access the map for export
   const mapRef = useRef<any>(null)
 
+  // Offline detection
+  const [isOffline, setIsOffline] = useState(false)
+  const [syncQueueCount, setSyncQueueCount] = useState(0)
+
+  useEffect(() => {
+    setIsOffline(!checkOnline())
+    setSyncQueueCount(getSyncQueue().length)
+
+    const goOffline = () => {
+      setIsOffline(true)
+      toast({ title: 'Offline-Modus', description: 'Änderungen werden lokal gespeichert und beim Reconnect synchronisiert.' })
+    }
+    const goOnline = async () => {
+      setIsOffline(false)
+      const queue = getSyncQueue()
+      if (queue.length > 0) {
+        toast({ title: 'Verbindung wiederhergestellt', description: `${queue.length} Änderung(en) werden synchronisiert...` })
+        const result = await flushSyncQueue()
+        setSyncQueueCount(getSyncQueue().length)
+        if (result.success > 0) {
+          toast({ title: 'Synchronisiert', description: `${result.success} Änderung(en) erfolgreich gespeichert.` })
+        }
+        if (result.failed > 0) {
+          toast({ title: 'Sync-Fehler', description: `${result.failed} Änderung(en) konnten nicht gespeichert werden.`, variant: 'destructive' })
+        }
+      } else {
+        toast({ title: 'Wieder online' })
+      }
+    }
+
+    window.addEventListener('offline', goOffline)
+    window.addEventListener('online', goOnline)
+
+    // Listen for SW sync messages
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        if (event.data?.type === 'FLUSH_SYNC_QUEUE') {
+          flushSyncQueue().then(() => setSyncQueueCount(getSyncQueue().length))
+        }
+      })
+    }
+
+    return () => {
+      window.removeEventListener('offline', goOffline)
+      window.removeEventListener('online', goOnline)
+    }
+  }, [])
+
   // Undo/Redo history
   const undoStackRef = useRef<DrawFeature[][]>([])
   const redoStackRef = useRef<DrawFeature[][]>([])
@@ -643,11 +692,22 @@ export default function AppPage() {
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const saveFeaturesToApi = useCallback(async () => {
     if (!currentProject?.id) return
+    const url = `/api/projects/${currentProject.id}/features`
+    const body = { features: featuresRef.current }
+
+    // If offline, queue the save for later sync
+    if (!navigator.onLine) {
+      addToSyncQueue(url, 'PUT', body)
+      setSyncQueueCount(getSyncQueue().length)
+      console.log('[Auto-Save] Offline — in Sync-Queue gespeichert')
+      return
+    }
+
     try {
-      const res = await fetch(`/api/projects/${currentProject.id}/features`, {
+      const res = await fetch(url, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ features: featuresRef.current }),
+        body: JSON.stringify(body),
       })
       if (res.ok) {
         console.log('[Auto-Save] Features gespeichert')
@@ -659,7 +719,10 @@ export default function AppPage() {
         console.warn('[Auto-Save] Projekt nicht in DB')
       }
     } catch (e) {
-      console.warn('[Auto-Save] Fehler:', e)
+      // Network error — queue for later
+      addToSyncQueue(url, 'PUT', body)
+      setSyncQueueCount(getSyncQueue().length)
+      console.warn('[Auto-Save] Netzwerkfehler — in Sync-Queue:', e)
     }
   }, [currentProject])
 
@@ -1389,6 +1452,17 @@ export default function AppPage() {
           onLogout={logout}
         />
 
+        {/* Offline banner */}
+        {isOffline && (
+          <div className="flex items-center justify-center gap-3 px-4 py-2 bg-orange-50 dark:bg-orange-950/40 border-b border-orange-200 dark:border-orange-800 text-sm text-orange-800 dark:text-orange-300">
+            <WifiOff className="w-4 h-4 shrink-0" />
+            <span>
+              <strong>Offline-Modus</strong> — Änderungen werden lokal gespeichert und beim Reconnect synchronisiert.
+              {syncQueueCount > 0 && ` (${syncQueueCount} ausstehend)`}
+            </span>
+          </div>
+        )}
+
         {/* Email verification banner */}
         {user && user.emailVerified === false && (
           <div className="flex items-center justify-center gap-3 px-4 py-2 bg-amber-50 dark:bg-amber-950/40 border-b border-amber-200 dark:border-amber-800 text-sm text-amber-800 dark:text-amber-300">

src/lib/offline-sync.ts

@@ -0,0 +1,97 @@
+// Offline detection and sync queue for saving changes when reconnecting
+
+const SYNC_QUEUE_KEY = 'lageplan-sync-queue'
+
+interface SyncQueueItem {
+  id: string
+  url: string
+  method: string
+  body: string
+  timestamp: number
+}
+
+/** Get all queued saves */
+export function getSyncQueue(): SyncQueueItem[] {
+  try {
+    const raw = localStorage.getItem(SYNC_QUEUE_KEY)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}
+
+/** Add a save operation to the sync queue (called when offline) */
+export function addToSyncQueue(url: string, method: string, body: any): void {
+  const queue = getSyncQueue()
+  // Deduplicate: if same URL+method exists, replace it with newer data
+  const existing = queue.findIndex(q => q.url === url && q.method === method)
+  const item: SyncQueueItem = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    url,
+    method,
+    body: JSON.stringify(body),
+    timestamp: Date.now(),
+  }
+  if (existing >= 0) {
+    queue[existing] = item
+  } else {
+    queue.push(item)
+  }
+  localStorage.setItem(SYNC_QUEUE_KEY, JSON.stringify(queue))
+}
+
+/** Flush the sync queue — send all queued requests to the server */
+export async function flushSyncQueue(): Promise<{ success: number; failed: number }> {
+  const queue = getSyncQueue()
+  if (queue.length === 0) return { success: 0, failed: 0 }
+
+  let success = 0
+  let failed = 0
+  const remaining: SyncQueueItem[] = []
+
+  for (const item of queue) {
+    try {
+      const res = await fetch(item.url, {
+        method: item.method,
+        headers: { 'Content-Type': 'application/json' },
+        body: item.body,
+      })
+      if (res.ok) {
+        success++
+      } else {
+        // Server error — keep in queue for retry
+        remaining.push(item)
+        failed++
+      }
+    } catch {
+      // Still offline — keep in queue
+      remaining.push(item)
+      failed++
+    }
+  }
+
+  localStorage.setItem(SYNC_QUEUE_KEY, JSON.stringify(remaining))
+  return { success, failed }
+}
+
+/** Clear the sync queue */
+export function clearSyncQueue(): void {
+  localStorage.removeItem(SYNC_QUEUE_KEY)
+}
+
+/** Check if we're online */
+export function isOnline(): boolean {
+  return navigator.onLine
+}
+
+/** Register Background Sync (if supported) */
+export async function registerBackgroundSync(): Promise<void> {
+  if ('serviceWorker' in navigator && 'SyncManager' in window) {
+    try {
+      const reg = await navigator.serviceWorker.ready
+      await (reg as any).sync.register('sync-saves')
+    } catch {
+      // Background Sync not supported or failed — will use manual flush
+    }
+  }
+}