feat: add logbook title editing with E2E encryption and sync support

client/src/components/EditLogbookModal.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Edit2, X } from 'lucide-react'
+
+interface EditLogbookModalProps {
+  open: boolean
+  onClose: () => void
+  currentTitle: string
+  onSave: (newTitle: string) => Promise<void>
+}
+
+export default function EditLogbookModal({ open, onClose, currentTitle, onSave }: EditLogbookModalProps) {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState(currentTitle)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (open) {
+      setTitle(currentTitle)
+      setError(null)
+    }
+  }, [open, currentTitle])
+
+  if (!open) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const trimmedTitle = title.trim()
+    if (!trimmedTitle) return
+
+    if (trimmedTitle === currentTitle.trim()) {
+      onClose()
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+    try {
+      await onSave(trimmedTitle)
+      onClose()
+    } catch (err: any) {
+      setError(err.message || 'Failed to rename logbook')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="custom-dialog-overlay" onClick={onClose}>
+      <div className="custom-dialog-card glass scale-in" onClick={(e) => e.stopPropagation()}>
+        <button
+          type="button"
+          className="registration-disclaimer__close feedback-modal__close"
+          onClick={onClose}
+          disabled={loading}
+          aria-label={t('feedback.cancel')}
+          style={{ position: 'absolute', top: '12px', right: '12px' }}
+        >
+          <X size={18} />
+        </button>
+
+        <h3 className="custom-dialog-title" style={{ display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'center' }}>
+          <Edit2 size={20} />
+          {t('dashboard.edit_title')}
+        </h3>
+
+        <form onSubmit={handleSubmit} style={{ width: '100%', marginTop: '16px' }}>
+          <div className="input-group" style={{ marginBottom: '20px' }}>
+            <input
+              type="text"
+              className="input-text"
+              placeholder={t('dashboard.edit_placeholder')}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              disabled={loading}
+              required
+              autoFocus
+              style={{ width: '100%', textAlign: 'left' }}
+            />
+          </div>
+
+          {error && <div className="auth-error" style={{ marginBottom: '16px', fontSize: '13px' }}>{error}</div>}
+
+          <div className="custom-dialog-actions">
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={onClose}
+              disabled={loading}
+              style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+            >
+              {t('logs.cancel_event_edit')}
+            </button>
+            <button
+              type="submit"
+              className="btn primary"
+              disabled={loading || !title.trim()}
+              style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}
+            >
+              {t('dashboard.edit_btn')}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

client/src/components/LogbookDashboard.tsx

@@ -2,15 +2,16 @@ import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { db } from '../services/db.js'
-import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
+import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
 import LogbookRoleBadge from './LogbookRoleBadge.tsx'
 import BetaBadge from './BetaBadge.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
+import { BookOpen, Plus, Trash2, Edit2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
 import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
 import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
+import EditLogbookModal from './EditLogbookModal.tsx'
 
 interface LogbookDashboardProps {
   onSelectLogbook: (id: string, title: string) => void
@@ -23,6 +24,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
   const { showConfirm } = useDialog()
   const [logbooks, setLogbooks] = useState<DecryptedLogbook[]>([])
   const [newTitle, setNewTitle] = useState('')
+  const [editingLogbook, setEditingLogbook] = useState<DecryptedLogbook | null>(null)
   const [loading, setLoading] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -99,6 +101,30 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
     }
   }
 
+  const handleEdit = (lb: DecryptedLogbook, e: React.MouseEvent) => {
+    e.stopPropagation() // Prevent selecting the logbook when clicking edit
+    setEditingLogbook(lb)
+  }
+
+  const handleSaveTitle = async (newTitle: string) => {
+    if (!editingLogbook) return
+
+    setLoading(true)
+    setError(null)
+    try {
+      await updateLogbookTitle(editingLogbook.id, newTitle)
+      setLogbooks((prev) =>
+        prev.map((lb) => (lb.id === editingLogbook.id ? { ...lb, title: newTitle, updatedAt: new Date().toISOString() } : lb))
+      )
+      setEditingLogbook(null)
+    } catch (err: any) {
+      setError(err.message || 'Failed to update logbook title')
+      throw err
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const handleLogout = () => {
     void logoutUser()
     onLogout()
@@ -144,6 +170,15 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
         </div>
       </div>
 
+      <button
+        className="btn-edit"
+        onClick={(e) => handleEdit(lb, e)}
+        title={t('dashboard.edit_title')}
+        style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
+      >
+        <Edit2 size={18} />
+      </button>
+
       <button
         className="btn-delete"
         onClick={(e) => handleDelete(lb.id, e)}
@@ -291,6 +326,14 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
           )}
         </section>
       </main>
+
+      {/* Edit Logbook Title Modal */}
+      <EditLogbookModal
+        open={editingLogbook !== null}
+        onClose={() => setEditingLogbook(null)}
+        currentTitle={editingLogbook?.title || ''}
+        onSave={handleSaveTitle}
+      />
     </div>
   )
 }