v1.2.0: Symbol-Verwaltung, SOMA-Admin, Light Mode Farbsystem, Onboarding-Tour, Credit-Link

src/components/onboarding/onboarding-tour.tsx

@@ -2,13 +2,17 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { Button } from '@/components/ui/button'
-import { X, ChevronRight, ChevronLeft, SkipForward } from 'lucide-react'
+import {
+  X, ChevronRight, ChevronLeft, SkipForward,
+  MapPin, Pencil, LayoutGrid, Save, Ruler, Users, Keyboard, Rocket,
+} from 'lucide-react'
 
 const TOUR_STORAGE_KEY = 'lageplan-onboarding-completed'
 
 interface TourStep {
   title: string
   description: string
+  icon?: React.ReactNode
   targetSelector?: string
   position?: 'top' | 'bottom' | 'left' | 'right'
 }
@@ -16,39 +20,56 @@ interface TourStep {
 const TOUR_STEPS: TourStep[] = [
   {
     title: 'Willkommen bei Lageplan!',
-    description: 'Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen.',
+    icon: <Rocket className="w-5 h-5 text-red-500" />,
+    description: 'Lageplan ist deine taktische Lageskizzen-App für den Feuerwehr-Einsatz. Diese kurze Tour zeigt dir die wichtigsten Funktionen. Du kannst sie jederzeit überspringen oder später im Benutzermenü erneut starten.',
   },
   {
-    title: 'Neuer Einsatz',
-    description: 'Erstelle einen neuen Einsatz über das Menü oben links. Gib eine Adresse ein und die Karte fliegt automatisch dorthin.',
+    title: 'Einsatz erstellen',
+    icon: <MapPin className="w-5 h-5 text-red-500" />,
+    description: 'Erstelle über «Neuer Einsatz» ein neues Projekt. Gib eine Adresse ein — die Karte fliegt automatisch dorthin. Jeder Einsatz wird separat gespeichert und kann als PDF oder PNG exportiert werden.',
     targetSelector: '[data-tour="new-project"]',
     position: 'bottom',
   },
   {
     title: 'Zeichenwerkzeuge',
-    description: 'Links findest du alle Werkzeuge: Punkte, Linien, Polygone, Freihand, Pfeile, Text und mehr. Jedes Werkzeug hat ein Tastenkürzel (drücke ? für die Übersicht).',
+    icon: <Pencil className="w-5 h-5 text-blue-500" />,
+    description: 'Die Werkzeugleiste links enthält alle Zeichentools: Punkte, Linien, Polygone, Freihand, Pfeile, Text, Radiergummi und mehr. Jedes Tool hat ein Tastenkürzel — drücke «?» für eine Übersicht.',
     targetSelector: '[data-tour="toolbar"]',
     position: 'right',
   },
   {
-    title: 'Symbole & Karte',
-    description: 'Rechts findest du die Symbol-Bibliothek. Ziehe Symbole per Drag & Drop auf die Karte. Wechsle zwischen Karte und Journal.',
+    title: 'Symbole & Sidebar',
+    icon: <LayoutGrid className="w-5 h-5 text-orange-500" />,
+    description: 'Rechts findest du über 100 taktische Feuerwehr-Symbole, sortiert nach Kategorien (Wasser, Feuer, Fahrzeuge usw.). Ziehe sie per Drag & Drop auf die Karte. Wechsle zwischen Symbolen und dem Einsatz-Journal.',
     targetSelector: '[data-tour="sidebar"]',
     position: 'left',
   },
   {
-    title: 'Speichern & Exportieren',
-    description: 'Dein Einsatz wird automatisch gespeichert. Du kannst ihn auch als PNG oder PDF exportieren.',
+    title: 'Speichern & Export',
+    icon: <Save className="w-5 h-5 text-green-500" />,
+    description: 'Speichere deinen Einsatz mit Ctrl+S oder dem Speichern-Button. Exportiere als PNG (Bild) oder als druckfertiges PDF. Die letzte Kartenansicht wird automatisch gespeichert.',
     targetSelector: '[data-tour="save"]',
     position: 'bottom',
   },
   {
-    title: 'Tastenkürzel',
-    description: 'Drücke ? oder F1 für eine Übersicht aller Tastenkürzel. Ctrl+S speichert, Ctrl+Z macht rückgängig.',
+    title: 'Messen & Schlauch-Rechner',
+    icon: <Ruler className="w-5 h-5 text-purple-500" />,
+    description: 'Mit dem Messwerkzeug (Taste «M») misst du Distanzen direkt auf der Karte. Der Schlauch-Rechner im Admin-Bereich berechnet die benötigten Schlauchlängen und -typen für deinen Einsatz.',
   },
   {
-    title: 'Bereit!',
-    description: 'Das war\'s! Du kannst diese Tour jederzeit über das Benutzermenü erneut starten. Viel Erfolg im Einsatz!',
+    title: 'Live-Zusammenarbeit',
+    icon: <Users className="w-5 h-5 text-cyan-500" />,
+    description: 'Mehrere Benutzer können gleichzeitig am selben Einsatz arbeiten. Änderungen werden in Echtzeit synchronisiert — ideal für die Einsatzleitung mit mehreren Operateuren.',
+  },
+  {
+    title: 'Tastenkürzel (CH)',
+    icon: <Keyboard className="w-5 h-5 text-slate-500" />,
+    description: 'Optimiert für Schweizer Tastaturen: Ctrl+Y = Rückgängig, Ctrl+Z = Wiederholen, Del = Löschen, Ctrl+S = Speichern. Drücke «?» oder F1 für die komplette Übersicht aller Kürzel.',
+  },
+  {
+    title: 'Bereit für den Einsatz!',
+    icon: <Rocket className="w-5 h-5 text-red-500" />,
+    description: 'Du bist startklar! Diese Tour kannst du jederzeit über dein Benutzermenü (oben rechts → «Tour starten») erneut aufrufen. Viel Erfolg im Einsatz — Feuer frei!',
   },
 ]
 
@@ -192,7 +213,10 @@ export function OnboardingTour({ forceShow = false, onComplete }: OnboardingTour
         style={getTooltipStyle()}
       >
         <div className="flex items-start justify-between mb-2">
-          <h3 className="font-semibold text-base">{step.title}</h3>
+          <div className="flex items-center gap-2">
+            {step.icon}
+            <h3 className="font-semibold text-base">{step.title}</h3>
+          </div>
           <button
             onClick={completeTour}
             className="text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1"