From 471690550f336604cc64548b08bb50989bb16a05 Mon Sep 17 00:00:00 2001
From: Pepe Ziberi <pepe@lageplan.ch>
Date: Wed, 22 Jul 2026 22:34:30 +0200
Subject: [PATCH] fix(ui): Freigeben-Button in Topbar + Toolbar-Farben nicht
 mehr abgeschnitten (v1.6.7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Freigeben: prominenter grüner Button neben Speichern, sichtbar solange man
  den Bearbeitungs-Lock hält (war nur als versteckter Link in der Statuszeile)
- Linke Toolbar kompakter (flachere Buttons/Trenner, pb-3), damit Farben und
  Linienstärke auf kleineren Screens nicht mehr unten rauslaufen

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 package.json                           |  2 +-
 src/app/app/page.tsx                   |  3 +++
 src/components/layout/left-toolbar.tsx | 24 ++++++++++++------------
 src/components/layout/topbar.tsx       | 24 ++++++++++++++++++++++++
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 46afcad..d6d5082 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lageplan",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Feuerwehr Lageplan - Krokier-App für Einsatzdokumentation",
   "private": true,
   "scripts": {
diff --git a/src/app/app/page.tsx b/src/app/app/page.tsx
index c8b7b6a..7a34223 100644
--- a/src/app/app/page.tsx
+++ b/src/app/app/page.tsx
@@ -1030,6 +1030,9 @@ export default function AppPage() {
             }
           }}
           windLive={windLive}
+          isEditingByMe={isEditingByMe}
+          onStopEditing={handleStopEditing}
+          editingLoading={editingLoading}
         />
 
         {/* Kompakte Status-Zeile — eine Zeile mit Chips statt bis zu vier gestapelten Bannern.
diff --git a/src/components/layout/left-toolbar.tsx b/src/components/layout/left-toolbar.tsx
index 08ad326..27a2c46 100644
--- a/src/components/layout/left-toolbar.tsx
+++ b/src/components/layout/left-toolbar.tsx
@@ -83,8 +83,8 @@ export function LeftToolbar({
 }: LeftToolbarProps) {
   return (
     <TooltipProvider delayDuration={300}>
-      <aside data-tour="toolbar" className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1.5 lg:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
-        {/* Draw Tools — Touch-Ziele mind. 44px auf Mobil/Tablet */}
+      <aside data-tour="toolbar" className="w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1 lg:py-2 pb-3 shrink-0 overflow-y-auto overflow-x-hidden z-10">
+        {/* Draw Tools — Touch-Ziele gross genug für Finger */}
         <div className="flex flex-col gap-0.5">
           {drawTools.map((tool) => (
             <Tooltip key={tool.mode}>
@@ -92,7 +92,7 @@ export function LeftToolbar({
                 <Button
                   variant={drawMode === tool.mode ? 'default' : 'ghost'}
                   size="icon"
-                  className="w-11 h-11 lg:w-12 lg:h-12"
+                  className="w-11 h-10 lg:w-12 lg:h-12"
                   onClick={() => onDrawModeChange(tool.mode)}
                   disabled={!canEdit && tool.mode !== 'select'}
                 >
@@ -106,16 +106,16 @@ export function LeftToolbar({
           ))}
         </div>
 
-        <div className="w-8 lg:w-12 h-px bg-border my-1" />
+        <div className="w-8 lg:w-12 h-px bg-border my-0.5 lg:my-1" />
 
-        {/* Undo/Redo — mobil gestapelt (44px), Desktop 2-spaltig */}
+        {/* Undo/Redo — mobil gestapelt (flach), Desktop 2-spaltig */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-0.5">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
                 size="icon"
-                className="w-11 h-11 lg:w-8 lg:h-8"
+                className="w-11 h-9 lg:w-8 lg:h-8"
                 onClick={onUndo}
                 disabled={!canEdit}
               >
@@ -132,7 +132,7 @@ export function LeftToolbar({
               <Button
                 variant="ghost"
                 size="icon"
-                className="w-11 h-11 lg:w-8 lg:h-8"
+                className="w-11 h-9 lg:w-8 lg:h-8"
                 onClick={onRedo}
                 disabled={!canEdit}
               >
@@ -146,10 +146,10 @@ export function LeftToolbar({
 
         </div>
 
-        <div className="w-8 lg:w-12 h-px bg-border my-1" />
+        <div className="w-8 lg:w-12 h-px bg-border my-0.5 lg:my-1" />
 
         {/* Color Picker - 2-col grid, grössere Swatches für Touch */}
-        <div className="grid grid-cols-2 gap-1">
+        <div className="grid grid-cols-2 gap-1 shrink-0">
           {colors.map((color) => (
             <button
               key={color.value}
@@ -167,10 +167,10 @@ export function LeftToolbar({
           ))}
         </div>
 
-        <div className="w-8 lg:w-12 h-px bg-border my-1" />
+        <div className="w-8 lg:w-12 h-px bg-border my-0.5 lg:my-1" />
 
         {/* Linienstärke */}
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-0.5 shrink-0">
           {widths.map((w) => (
             <button
               key={w.value}
@@ -178,7 +178,7 @@ export function LeftToolbar({
               disabled={!canEdit}
               title={`Linienstärke: ${w.label}`}
               className={cn(
-                'w-11 h-8 lg:w-12 lg:h-8 rounded-md flex items-center justify-center transition-colors',
+                'w-11 h-7 lg:w-12 lg:h-8 rounded-md flex items-center justify-center transition-colors',
                 selectedWidth === w.value ? 'bg-primary/15 ring-1 ring-primary' : 'hover:bg-accent',
                 !canEdit && 'opacity-50 cursor-not-allowed'
               )}
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 4e5ccf4..6c6584d 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -80,6 +80,12 @@ interface TopbarProps {
   onTogglePresentationLock?: () => void
   /** Windrichtung wird live aktualisiert (für die Live-Anzeige oben) */
   windLive?: boolean
+  /** true, wenn der aktuelle Nutzer den Bearbeitungs-Lock hält */
+  isEditingByMe?: boolean
+  /** Karte speichern & für andere freigeben (Lock lösen) */
+  onStopEditing?: () => void
+  /** Lock-Aktion läuft gerade */
+  editingLoading?: boolean
 }
 
 export function Topbar({
@@ -107,6 +113,9 @@ export function Topbar({
   presentationLocked,
   onTogglePresentationLock,
   windLive,
+  isEditingByMe,
+  onStopEditing,
+  editingLoading,
 }: TopbarProps) {
   const [isLoadDialogOpen, setIsLoadDialogOpen] = useState(false)
   const [isHoseSettingsOpen, setIsHoseSettingsOpen] = useState(false)
@@ -236,6 +245,21 @@ export function Topbar({
           {isSaving ? <Loader2 className="w-5 h-5 animate-spin" /> : <Save className="w-5 h-5" />}
         </Button>
 
+        {/* Freigeben — nur sichtbar, solange ich den Bearbeitungs-Lock halte.
+            Speichert und gibt die Karte für andere frei. Grün = ich bin am Zeichnen. */}
+        {isEditingByMe && onStopEditing && (
+          <Button
+            variant="outline"
+            className="h-9 md:h-10 px-2 md:px-2.5 shrink-0 border-green-500 text-green-700 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-950/40"
+            onClick={onStopEditing}
+            disabled={editingLoading}
+            title="Karte speichern & für andere freigeben"
+          >
+            {editingLoading ? <Loader2 className="w-5 h-5 animate-spin lg:mr-1" /> : <Unlock className="w-5 h-5 lg:mr-1" />}
+            <span className="hidden lg:inline">Freigeben</span>
+          </Button>
+        )}
+
         {/* Neu — Split-Button für Einsatz/Übung (ein Akzent statt zwei farbiger Buttons) */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>