feat(vessel): add E2E encrypted Yacht photo upload with client-side canvas resizing

client/src/App.css

@@ -1638,3 +1638,93 @@ body:has(.theme-cupertino) {
   color: #38bdf8;
 }
 
+/* Yacht Photo Styling */
+.vessel-photo-wrapper {
+  grid-column: span 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  background: rgba(30, 41, 59, 0.4);
+  border: 1px dashed #334155;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 12px;
+}
+
+.vessel-photo-preview {
+  position: relative;
+  width: 200px;
+  height: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.vessel-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vessel-photo-placeholder {
+  color: #475569;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.vessel-photo-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 23, 42, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: #fbbf24;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.vessel-photo-preview:hover .vessel-photo-overlay {
+  opacity: 1;
+}
+
+.vessel-photo-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-sm {
+  padding: 6px 12px !important;
+  font-size: 12.5px !important;
+  height: auto !important;
+  min-height: auto !important;
+}
+
+.btn.danger {
+  background: rgba(239, 68, 68, 0.15) !important;
+  color: #fca5a5 !important;
+  border: 1px solid rgba(239, 68, 68, 0.3) !important;
+}
+
+.btn.danger:hover {
+  background: rgba(239, 68, 68, 0.25) !important;
+  border-color: #ef4444 !important;
+}
+
+

client/src/components/VesselForm.tsx

@@ -4,7 +4,7 @@ import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
-import { Ship, Save, Check, Plus, X } from 'lucide-react'
+import { Ship, Save, Check, Plus, X, Camera, Trash2 } from 'lucide-react'
 
 interface VesselFormProps {
   logbookId: string
@@ -23,6 +23,10 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
   const [sails, setSails] = useState<string[]>([])
   const [newSailName, setNewSailName] = useState('')
 
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const [photo, setPhoto] = useState<string | null>(null)
+  const [photoError, setPhotoError] = useState<string | null>(null)
+
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
   const [success, setSuccess] = useState(false)
@@ -51,6 +55,7 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
             setAtis(decrypted.atis || '')
             setMmsi(decrypted.mmsi || '')
             setSails(decrypted.sails || [])
+            setPhoto(decrypted.photo || null)
           }
         }
       } catch (err: any) {
@@ -76,6 +81,65 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
     setSails(sails.filter((_, idx) => idx !== indexToRemove))
   }
 
+  const triggerFileInput = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleRemovePhoto = () => {
+    setPhoto(null)
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    setPhotoError(null)
+
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const img = new Image()
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          if (!ctx) throw new Error('Could not get canvas context')
+
+          let width = img.width
+          let height = img.height
+          const MAX_WIDTH = 800
+          const MAX_HEIGHT = 600
+
+          // Calculate resizing conserving aspect ratio
+          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+            const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
+            width = Math.round(width * ratio)
+            height = Math.round(height * ratio)
+          }
+
+          canvas.width = width
+          canvas.height = height
+          ctx.drawImage(img, 0, 0, width, height)
+
+          // Compress to JPEG, 70% quality
+          const compressedBase64 = canvas.toDataURL('image/jpeg', 0.7)
+          setPhoto(compressedBase64)
+        } catch (err: any) {
+          console.error('Failed to resize yacht photo:', err)
+          setPhotoError(err.message || 'Failed to process image')
+        }
+      }
+      img.onerror = () => {
+        setPhotoError('Invalid image file')
+      }
+      img.src = event.target?.result as string
+    }
+    reader.onerror = () => {
+      setPhotoError('Failed to read file')
+    }
+    reader.readAsDataURL(file)
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setSaving(true)
@@ -95,7 +159,8 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
         callSign: callSign.trim(),
         atis: atis.trim(),
         mmsi: mmsi.trim(),
-        sails: sails
+        sails: sails,
+        photo: photo
       }
 
       // E2E encrypt
@@ -154,6 +219,55 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
 
       <form onSubmit={handleSubmit} className="vessel-form">
         <div className="form-grid">
+          <div className="vessel-photo-wrapper">
+            <div className="vessel-photo-preview" onClick={triggerFileInput}>
+              {photo ? (
+                <img src={photo} alt={name || 'Yacht'} className="vessel-photo" />
+              ) : (
+                <div className="vessel-photo-placeholder">
+                  <Ship size={48} className="placeholder-icon" />
+                </div>
+              )}
+              <div className="vessel-photo-overlay">
+                <Camera size={24} />
+                <span>{photo ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
+              </div>
+            </div>
+            
+            <div className="vessel-photo-actions">
+              <button
+                type="button"
+                className="btn secondary btn-sm"
+                onClick={triggerFileInput}
+                disabled={saving}
+              >
+                <Camera size={16} />
+                {photo ? t('vessel.photo_change') : t('vessel.photo_add')}
+              </button>
+              
+              {photo && (
+                <button
+                  type="button"
+                  className="btn danger btn-sm"
+                  onClick={handleRemovePhoto}
+                  disabled={saving}
+                >
+                  <Trash2 size={16} />
+                  {t('vessel.photo_delete')}
+                </button>
+              )}
+            </div>
+            
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handlePhotoChange}
+              accept="image/*"
+              style={{ display: 'none' }}
+            />
+            {photoError && <div className="auth-error mt-2">{photoError}</div>}
+          </div>
+
           <div className="input-group">
             <label>{t('vessel.name')}</label>
             <input

client/src/i18n/locales/de.json

@@ -46,7 +46,10 @@
       "sails_help": "Tragen Sie hier die Segel ein, die an Eurem Schiff zur Verfügung stehen (z. B. Großsegel, Genua, Fock).",
       "add_sail": "Segel hinzufügen",
       "sail_name_placeholder": "z. B. Großsegel",
-      "no_sails": "Keine Segel hinterlegt."
+      "no_sails": "Keine Segel hinterlegt.",
+      "photo_add": "Foto hinzufügen",
+      "photo_change": "Foto ändern",
+      "photo_delete": "Foto löschen"
     },
     "logs": {
       "title": "Logbuch-Journal",

client/src/i18n/locales/en.json

@@ -46,7 +46,10 @@
       "sails_help": "List the sails available on your vessel (e.g. Mainsail, Genoa, Jib).",
       "add_sail": "Add Sail",
       "sail_name_placeholder": "e.g. Mainsail",
-      "no_sails": "No sails defined."
+      "no_sails": "No sails defined.",
+      "photo_add": "Add Photo",
+      "photo_change": "Change Photo",
+      "photo_delete": "Delete Photo"
     },
     "logs": {
       "title": "Logbook Journal",