diff --git a/client/src/App.css b/client/src/App.css index b86ce5a..9440289 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1418,6 +1418,32 @@ html.scheme-dark .themed-select-option.is-selected { background: rgba(244, 63, 94, 0.1); } +.btn-edit { + background: none; + border: none; + color: #475569; + cursor: pointer; + padding: 6px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all 0.2s ease; + position: absolute; + top: 12px; + right: 48px; +} + +.logbook-card:hover .btn-edit { + opacity: 1; +} + +.btn-edit:hover { + color: var(--app-accent-light); + background: var(--app-accent-bg); +} + .btn-pdf { background: none; border: none; diff --git a/client/src/components/EditLogbookModal.tsx b/client/src/components/EditLogbookModal.tsx new file mode 100644 index 0000000..f21777d --- /dev/null +++ b/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 +} + +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(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 ( +
+
e.stopPropagation()}> + + +

+ + {t('dashboard.edit_title')} +

+ +
+
+ setTitle(e.target.value)} + disabled={loading} + required + autoFocus + style={{ width: '100%', textAlign: 'left' }} + /> +
+ + {error &&
{error}
} + +
+ + +
+
+
+
+ ) +} diff --git a/client/src/components/LogbookDashboard.tsx b/client/src/components/LogbookDashboard.tsx index 0553481..db14f92 100644 --- a/client/src/components/LogbookDashboard.tsx +++ b/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([]) const [newTitle, setNewTitle] = useState('') + const [editingLogbook, setEditingLogbook] = useState(null) const [loading, setLoading] = useState(false) const [refreshing, setRefreshing] = useState(false) const [error, setError] = useState(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 + +