Compare commits

...

7 Commits

Author SHA1 Message Date
elpatron ef5891ba3f chore: release v0.1.0.58 2026-05-31 13:22:59 +02:00
elpatron d25095bab3 fix: Fehlalarm bei sauberem Working Tree in update-prod.sh vermeiden
Die Clean-Tree-Prüfung verlässt sich nur noch auf git status --porcelain,
da git diff-index nach git reset fälschlich Änderungen melden kann.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 13:22:52 +02:00
elpatron 0d16782001 fix: Onboarding-Tour bei gelöschtem Demo-Logbuch und GPS-Schritt stabilisieren
Bereinigt veraltete Demo-Referenzen, löst gültiges Logbuch und ersten Eintrag zur Laufzeit auf und scrollt den GPS-Track-Schritt automatisch ins Viewport.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 13:15:53 +02:00
elpatron b7e2d470a9 fix: Tour-Tooltip auf feste Breite begrenzen
Entfernt left+right-Stretching in CSS, positioniert das Tooltip horizontal
am Spotlight und misst Ziele nach Navigation mit verzögerten Retries.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 13:08:31 +02:00
elpatron 520ba766a3 feat: Onboarding-Tour um Benutzerprofil erweitern
Profil-Schritte auf dem Dashboard und in den Einstellungen, entry_open
highlightet nur die Karte ohne Editor, Finish verweist auf Benutzerprofil.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 13:04:02 +02:00
elpatron c215cd8b15 docs: Beta-Flyer-Formulierung für Skipper/Crew-Fotos präzisieren
Feature-Text nennt Avatarbilder statt Foto-Anhänge; PDF entsprechend aktualisiert.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 12:57:23 +02:00
elpatron 27c780d2b8 fix: Passkey-Signatur beim Speichern der Logbuchseite erhalten
Leeres Event-Formular (nur Uhrzeit) galt fälschlich als Änderung und
invalidierte frische Signaturen. Speichern-Button und Hash-Sperre folgen
nun echten Entwürfen und synchronisiertem Seiteninhalt.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-31 12:57:02 +02:00
20 changed files with 572 additions and 84 deletions
+1 -1
View File
@@ -1 +1 @@
0.1.0.58
0.1.0.59
+6 -4
View File
@@ -4276,10 +4276,12 @@ body.app-tour-active .app-tour-target-active {
}
.app-tour-tooltip:not(.centered) {
left: max(16px, env(safe-area-inset-left, 0px));
right: max(16px, env(safe-area-inset-right, 0px));
width: auto;
max-width: none;
left: 50%;
transform: translateX(-50%);
}
.app-tour-tooltip:not(.centered).app-tour-tooltip--anchored {
transform: none;
}
.app-tour-tooltip.centered {
+78 -22
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react'
import { useState, useEffect, useCallback, useRef } from 'react'
import './App.css'
import { DialogProvider } from './components/ModalDialog.tsx'
import AuthOnboarding from './components/AuthOnboarding.tsx'
@@ -46,7 +46,7 @@ import DisclaimerHeaderButton from './components/DisclaimerHeaderButton.tsx'
import FeedbackHeaderButton from './components/FeedbackHeaderButton.tsx'
import { useTranslation } from 'react-i18next'
import {
getStoredDemoFirstEntryId,
resolveTourLogbookContext,
seedDemoLogbookIfNeeded
} from './services/demoLogbook.js'
import { fetchLogbooks, parseCollaborationRole } from './services/logbook.js'
@@ -57,7 +57,7 @@ const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'
function App() {
const { t, i18n } = useTranslation()
const { confirmLeave } = useUnsavedChangesContext()
const { registerNavigation, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
const { registerNavigation, registerDemoTourContext, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
const [isAuthenticated, setIsAuthenticated] = useState(false)
const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
@@ -69,6 +69,12 @@ function App() {
const [isSyncing, setIsSyncing] = useState(false)
const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
const [showUserProfile, setShowUserProfile] = useState(false)
const tourLogbookRef = useRef<{ id: string; title: string } | null>(null)
const activeLogbookRef = useRef<{ id: string | null; title: string | null }>({
id: activeLogbookId,
title: activeLogbookTitle
})
activeLogbookRef.current = { id: activeLogbookId, title: activeLogbookTitle }
// Viewer mode for read-only shared links
const [isViewerMode, setIsViewerMode] = useState(false)
@@ -309,28 +315,66 @@ function App() {
setIsAcceptingInvite(false)
}, [])
useEffect(() => {
registerNavigation({
setActiveTab,
setSelectedEntryId: setTourSelectedEntryId,
setFeedbackOpen: setTourFeedbackOpen
})
}, [registerNavigation])
useEffect(() => {
if (isAuthenticated && activeLogbookId) {
setDemoHighlightEntryId(getStoredDemoFirstEntryId())
}
}, [isAuthenticated, activeLogbookId])
const selectLogbook = (id: string, title: string) => {
const selectLogbook = useCallback((id: string, title: string) => {
setActiveLogbookId(id)
setActiveLogbookTitle(title)
setActiveTab('logs')
setTourSelectedEntryId(null)
localStorage.setItem('active_logbook_id', id)
localStorage.setItem('active_logbook_title', title)
}
}, [])
const ensureTourLogbookOpen = useCallback(async () => {
const ctx = await resolveTourLogbookContext(tourLogbookRef.current?.id)
if (!ctx) return
if (activeLogbookRef.current.id !== ctx.logbookId) {
selectLogbook(ctx.logbookId, ctx.title)
}
if (ctx.firstEntryId) {
setDemoHighlightEntryId(ctx.firstEntryId)
registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
}
}, [registerDemoTourContext, selectLogbook])
useEffect(() => {
registerNavigation({
setActiveTab,
setSelectedEntryId: setTourSelectedEntryId,
setFeedbackOpen: setTourFeedbackOpen,
setProfileOpen: setShowUserProfile,
ensureLogbookForTour: ensureTourLogbookOpen,
setLogbookActive: (active) => {
if (active) {
void ensureTourLogbookOpen()
return
}
const { id, title } = activeLogbookRef.current
if (id && title) {
tourLogbookRef.current = { id, title }
}
setActiveLogbookId(null)
setActiveLogbookTitle(null)
setTourSelectedEntryId(null)
localStorage.removeItem('active_logbook_id')
localStorage.removeItem('active_logbook_title')
}
})
}, [ensureTourLogbookOpen, registerNavigation])
useEffect(() => {
if (!isAuthenticated || !activeLogbookId) return
void (async () => {
const ctx = await resolveTourLogbookContext()
if (!ctx || ctx.logbookId !== activeLogbookId) return
if (ctx.firstEntryId) {
setDemoHighlightEntryId(ctx.firstEntryId)
registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
}
})()
}, [isAuthenticated, activeLogbookId, registerDemoTourContext])
const openLogbookById = useCallback(
async (logbookId: string) => {
@@ -346,7 +390,7 @@ function App() {
}
selectLogbook(logbookId, `${logbookId.slice(0, 8)}`)
},
[]
[selectLogbook]
)
const consumePendingPushLogbook = useCallback(() => {
@@ -398,8 +442,20 @@ function App() {
const savedLogbookId = localStorage.getItem('active_logbook_id')
const savedLogbookTitle = localStorage.getItem('active_logbook_title')
if (savedLogbookId && savedLogbookTitle) {
setActiveLogbookId(savedLogbookId)
setActiveLogbookTitle(savedLogbookTitle)
try {
const books = await fetchLogbooks()
const match = books.find((b) => b.id === savedLogbookId)
if (match) {
setActiveLogbookId(match.id)
setActiveLogbookTitle(match.title)
} else {
localStorage.removeItem('active_logbook_id')
localStorage.removeItem('active_logbook_title')
}
} catch {
setActiveLogbookId(savedLogbookId)
setActiveLogbookTitle(savedLogbookTitle)
}
}
consumePendingPushLogbook()
}
+71 -17
View File
@@ -4,6 +4,7 @@ import { X, ChevronLeft, ChevronRight } from 'lucide-react'
import {
getTourStepCopy,
getTourTargetSelector,
getTourTargetRetryDelay,
isCenteredTourStep,
useAppTour
} from '../context/AppTourContext.tsx'
@@ -17,6 +18,20 @@ interface SpotlightRect {
const TOOLTIP_EDGE_MARGIN = 16
const TOOLTIP_ESTIMATED_HEIGHT = 240
const TOOLTIP_WIDTH = 420
const TARGET_VIEWPORT_MARGIN = 24
function clampTooltipTop(preferred: number): number {
const maxTop = window.innerHeight - TOOLTIP_EDGE_MARGIN - TOOLTIP_ESTIMATED_HEIGHT
return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(preferred, maxTop))
}
function computeTooltipLeft(spotlight: SpotlightRect): number {
const tooltipWidth = Math.min(TOOLTIP_WIDTH, window.innerWidth - TOOLTIP_EDGE_MARGIN * 2)
const ideal = spotlight.left + spotlight.width / 2 - tooltipWidth / 2
const maxLeft = window.innerWidth - TOOLTIP_EDGE_MARGIN - tooltipWidth
return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(ideal, maxLeft))
}
function buildCutoutClipPath(rect: SpotlightRect): string {
const right = rect.left + rect.width
@@ -28,20 +43,36 @@ function computeTooltipTop(spotlight: SpotlightRect): number {
const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
const below = spotlight.top + spotlight.height + 12
if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
return below
return clampTooltipTop(below)
}
const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
if (above >= TOOLTIP_EDGE_MARGIN) {
return above
return clampTooltipTop(above)
}
return Math.max(
TOOLTIP_EDGE_MARGIN,
Math.min(below, viewportBottom - TOOLTIP_ESTIMATED_HEIGHT)
return clampTooltipTop(below)
}
function isTargetVisibleInViewport(rect: DOMRect): boolean {
return (
rect.top >= TARGET_VIEWPORT_MARGIN &&
rect.bottom <= window.innerHeight - TARGET_VIEWPORT_MARGIN
)
}
function measureSpotlight(el: Element): SpotlightRect | null {
const rect = el.getBoundingClientRect()
if (rect.width <= 0 || rect.height <= 0) return null
const padding = 8
return {
top: Math.max(8, rect.top - padding),
left: Math.max(8, rect.left - padding),
width: rect.width + padding * 2,
height: rect.height + padding * 2
}
}
export default function AppTourOverlay() {
const { t } = useTranslation()
const {
@@ -50,6 +81,7 @@ export default function AppTourOverlay() {
currentStepId,
currentStepIndex,
totalSteps,
layoutTick,
nextStep,
prevStep,
skipTour
@@ -65,7 +97,10 @@ export default function AppTourOverlay() {
return
}
let cancelled = false
const updateSpotlight = () => {
if (cancelled) return
const selector = getTourTargetSelector(currentStepId)
if (!selector) {
setSpotlight(null)
@@ -76,27 +111,38 @@ export default function AppTourOverlay() {
setSpotlight(null)
return
}
const rect = el.getBoundingClientRect()
const padding = 8
setSpotlight({
top: Math.max(8, rect.top - padding),
left: Math.max(8, rect.left - padding),
width: rect.width + padding * 2,
height: rect.height + padding * 2
})
if (!isTargetVisibleInViewport(rect)) {
el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
window.requestAnimationFrame(() => {
if (cancelled) return
const next = measureSpotlight(el)
setSpotlight(next)
})
return
}
setSpotlight(measureSpotlight(el))
}
updateSpotlight()
window.addEventListener('resize', updateSpotlight)
window.addEventListener('scroll', updateSpotlight, true)
const timer = window.setTimeout(updateSpotlight, 120)
const retryDelays =
currentStepId === 'entry_track'
? [400, 700, 1100, 1600]
: [getTourTargetRetryDelay(currentStepId), 120, 280, 480]
const timers = retryDelays.map((delay) => window.setTimeout(updateSpotlight, delay))
return () => {
window.clearTimeout(timer)
cancelled = true
for (const timer of timers) window.clearTimeout(timer)
window.removeEventListener('resize', updateSpotlight)
window.removeEventListener('scroll', updateSpotlight, true)
}
}, [currentStepId, isActive])
}, [currentStepId, isActive, layoutTick])
useEffect(() => {
if (!isActive) return
@@ -132,9 +178,17 @@ export default function AppTourOverlay() {
const tooltipStyle = centered
? undefined
: spotlight
? { top: computeTooltipTop(spotlight) }
? { top: computeTooltipTop(spotlight), left: computeTooltipLeft(spotlight) }
: { top: '20%' }
const tooltipClassName = [
'app-tour-tooltip',
centered ? 'centered' : '',
!centered && spotlight ? 'app-tour-tooltip--anchored' : ''
]
.filter(Boolean)
.join(' ')
const backdropStyle = spotlight && !centered
? { clipPath: buildCutoutClipPath(spotlight) }
: undefined
@@ -159,7 +213,7 @@ export default function AppTourOverlay() {
/>
)}
<div className={`app-tour-tooltip${centered ? ' centered' : ''}`} style={tooltipStyle}>
<div className={tooltipClassName} style={tooltipStyle}>
<button type="button" className="app-tour-close" onClick={skipTour} aria-label={t('tour.skip')}>
<X size={18} />
</button>
+6 -1
View File
@@ -365,6 +365,11 @@ export default function LogEntriesList({
)
}
const tourFirstEntryId =
highlightEntryId && entries.some((e) => e.id === highlightEntryId)
? highlightEntryId
: entries[0]?.id ?? null
return (
<div className="form-card">
<div className="section-title-bar mb-6">
@@ -402,7 +407,7 @@ export default function LogEntriesList({
<div
key={item.id}
className="logbook-card glass"
data-tour={highlightEntryId === item.id ? 'entry-first' : undefined}
data-tour={tourFirstEntryId === item.id ? 'entry-first' : undefined}
onClick={() => setSelectedEntryId(item.id)}
>
<div className="card-icon">
+60 -20
View File
@@ -22,7 +22,7 @@ import {
hasAnySignature
} from '../utils/signatures.js'
import type { SignatureValue } from '../types/signatures.js'
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, hasUnsavedEventDraft, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
import EventTimeInput24h from './EventTimeInput24h.tsx'
import CourseDialInput from './CourseDialInput.tsx'
import { degreesToCardinal } from '../utils/courseAngle.js'
@@ -202,6 +202,7 @@ export default function LogEntryEditor({
const contentReadyRef = useRef(false)
const lastSignatureAlertHashRef = useRef<string | null>(null)
const skipCrewSignClearRef = useRef(false)
const entryHashSeqRef = useRef(0)
const [editingEventIndex, setEditingEventIndex] = useState<number | null>(null)
const applyTrackStats = (waypoints: SavedTrack['waypoints']) => {
@@ -304,13 +305,7 @@ export default function LogEntryEditor({
}
const hasPendingEventForm = useMemo(() => {
if (!evTime.trim()) return false
const draft = buildEventFromForm()
if (editingEventIndex !== null) {
const original = events[editingEventIndex]
return original ? !logEventsEqual(draft, original) : false
}
return true
return hasUnsavedEventDraft(buildEventFromForm(), editingEventIndex, events)
}, [
evTime, evMgk, evRwk, evWindPressure, evWindDirection, evWindStrength, evSeaState,
evWeatherIcon, evCurrent, evHeel, evSailsOrMotor, evLogReading, evDistance,
@@ -331,16 +326,27 @@ export default function LogEntryEditor({
onBack()
}
const persistEntryToDb = useCallback(async (eventsOverride?: LogEvent[]) => {
const persistEntryToDb = useCallback(async (
options?: LogEvent[] | {
eventsOverride?: LogEvent[]
signSkipper?: SignatureValue | ''
signCrew?: SignatureValue | ''
}
) => {
if (readOnly) return
const normalized = Array.isArray(options) ? { eventsOverride: options } : (options ?? {})
const eventsOverride = normalized.eventsOverride
const skipperToSave = normalized.signSkipper !== undefined ? normalized.signSkipper : signSkipper
const crewToSave = normalized.signCrew !== undefined ? normalized.signCrew : signCrew
const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
if (!masterKey) throw new Error('Encryption key not found. Please log in.')
const entryData = {
...buildPayloadForSigning(eventsOverride),
signSkipper: normalizedSerializedSignature(signSkipper),
signCrew: normalizedSerializedSignature(signCrew)
signSkipper: normalizedSerializedSignature(skipperToSave),
signCrew: normalizedSerializedSignature(crewToSave)
}
const encrypted = await encryptJson(entryData, masterKey)
@@ -368,9 +374,14 @@ export default function LogEntryEditor({
setSavedFingerprint(JSON.stringify({
...buildPayloadForSigning(eventsOverride),
signSkipper: fingerprintSignature(signSkipper),
signCrew: fingerprintSignature(signCrew)
signSkipper: fingerprintSignature(skipperToSave),
signCrew: fingerprintSignature(crewToSave)
}))
const hash = await hashEntryForSigning(buildPayloadForSigning(eventsOverride))
entryHashSeqRef.current += 1
setEntryHash(hash)
lockedContentHashRef.current = hasAnySignature(skipperToSave, crewToSave) ? hash : null
}, [
readOnly, logbookId, entryId, events, buildPayloadForSigning, signSkipper, signCrew
])
@@ -398,9 +409,11 @@ export default function LogEntryEditor({
}, [logbookId])
useEffect(() => {
const seq = ++entryHashSeqRef.current
let cancelled = false
hashEntryForSigning(buildPayloadForSigning()).then((hash) => {
if (!cancelled) setEntryHash(hash)
if (cancelled || seq !== entryHashSeqRef.current) return
setEntryHash(hash)
})
return () => { cancelled = true }
}, [buildPayloadForSigning])
@@ -471,6 +484,7 @@ export default function LogEntryEditor({
role: 'skipper'
})
setSignSkipper(signature)
entryHashSeqRef.current += 1
setEntryHash(hash)
lockedContentHashRef.current = hash
trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'skipper' })
@@ -489,6 +503,7 @@ export default function LogEntryEditor({
role: 'crew'
})
setSignCrew(signature)
entryHashSeqRef.current += 1
setEntryHash(hash)
lockedContentHashRef.current = hash
trackPlausibleEvent(PlausibleEvents.ENTRY_SIGNED, { role: 'crew' })
@@ -921,10 +936,23 @@ export default function LogEntryEditor({
setEvLocationName('')
}
const resolveSignaturesAfterContentChange = (skipperOnly = false) => {
const hadSkipper = !!signSkipper
const hadCrew = !!signCrew
const cleared = hadSkipper || (hadCrew && !skipperOnly)
skipCrewSignClearRef.current = skipperOnly
const nextSkipper: SignatureValue | '' = hadSkipper ? '' : signSkipper
const nextCrew: SignatureValue | '' = hadCrew && !skipperOnly ? '' : signCrew
if (cleared) {
if (hadSkipper) setSignSkipper('')
if (hadCrew && !skipperOnly) setSignCrew('')
lockedContentHashRef.current = null
}
return { signSkipper: nextSkipper, signCrew: nextCrew, cleared }
}
const markSkipperSignatureClearedForEventChange = () => {
if (!signSkipper) return
skipCrewSignClearRef.current = true
setSignSkipper('')
resolveSignaturesAfterContentChange(true)
}
const handleEditEvent = (index: number) => {
@@ -1014,11 +1042,20 @@ export default function LogEntryEditor({
if (readOnly) return
let eventsToSave = events
let signaturesForSave: { signSkipper: SignatureValue | ''; signCrew: SignatureValue | '' } | undefined
if (hasPendingEventForm) {
const isEdit = editingEventIndex !== null
if (isEdit && signSkipper) {
markSkipperSignatureClearedForEventChange()
const resolved = resolveSignaturesAfterContentChange(isEdit)
signaturesForSave = {
signSkipper: resolved.signSkipper,
signCrew: resolved.signCrew
}
if (resolved.cleared) {
void showAlertRef.current(
isEdit ? t('logs.sign_cleared_skipper_re_sign') : t('logs.sign_cleared_re_sign'),
isEdit ? t('logs.sign_cleared_skipper_re_sign_title') : t('logs.sign_cleared_re_sign_title')
)
}
eventsToSave = applyEventFormToEvents(buildEventFromForm())
setEvents(eventsToSave)
@@ -1032,7 +1069,10 @@ export default function LogEntryEditor({
setSuccess(false)
try {
await persistEntryToDb(eventsToSave)
await persistEntryToDb({
eventsOverride: eventsToSave,
...signaturesForSave
})
setSuccess(true)
trackPlausibleEvent(PlausibleEvents.TRAVEL_DAY_SAVED)
@@ -314,6 +314,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProf
onClick={onOpenProfile}
title={t('dashboard.open_profile', { name: username })}
aria-label={t('dashboard.open_profile', { name: username })}
data-tour="nav-profile"
>
<User size={18} aria-hidden="true" />
<span className="skipper-badge__name">{username}</span>
@@ -443,6 +443,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
</section>
) : profile ? (
<>
<div data-tour="profile-preferences">
<section className="form-card">
<div className="form-header">
<User size={24} className="form-icon" />
@@ -484,6 +485,7 @@ export default function UserProfilePage({ onBack, onLogout }: UserProfilePagePro
</section>
<UserProfilePreferences userId={profile.userId} />
</div>
<section className="member-editor-card glass">
<div className="profile-section-header">
+41
View File
@@ -0,0 +1,41 @@
import { describe, expect, it } from 'vitest'
import {
DEMO_EXCLUDED_STEPS,
DEMO_STEP_ORDER,
FULL_STEP_ORDER,
getTourScrollRetryDelays,
getTourTargetRetryDelay,
tourStepOpensEntry
} from './AppTourContext.tsx'
describe('AppTourContext step order', () => {
it('includes profile steps before finish in full tour', () => {
const profileIndex = FULL_STEP_ORDER.indexOf('nav_profile')
const prefsIndex = FULL_STEP_ORDER.indexOf('profile_preferences')
const finishIndex = FULL_STEP_ORDER.indexOf('finish')
expect(profileIndex).toBeGreaterThan(FULL_STEP_ORDER.indexOf('nav_feedback'))
expect(prefsIndex).toBe(profileIndex + 1)
expect(finishIndex).toBe(prefsIndex + 1)
expect(FULL_STEP_ORDER).toHaveLength(12)
})
it('excludes profile, stats and feedback from demo tour', () => {
for (const step of DEMO_EXCLUDED_STEPS) {
expect(DEMO_STEP_ORDER).not.toContain(step)
}
expect(DEMO_STEP_ORDER).toContain('finish')
expect(DEMO_STEP_ORDER).toHaveLength(FULL_STEP_ORDER.length - DEMO_EXCLUDED_STEPS.length)
})
it('only opens entry editor on entry_track step', () => {
expect(tourStepOpensEntry('entry_open')).toBe(false)
expect(tourStepOpensEntry('entry_list')).toBe(false)
expect(tourStepOpensEntry('entry_track')).toBe(true)
})
it('retries scroll for entry_track while editor mounts', () => {
expect(getTourTargetRetryDelay('entry_track')).toBeGreaterThanOrEqual(400)
expect(getTourScrollRetryDelays('entry_track').length).toBeGreaterThan(1)
})
})
+119 -15
View File
@@ -29,12 +29,17 @@ export type TourStepId =
| 'nav_crew'
| 'nav_stats'
| 'nav_feedback'
| 'nav_profile'
| 'profile_preferences'
| 'finish'
interface TourNavigation {
setActiveTab: (tab: AppTab) => void
setSelectedEntryId: (entryId: string | null) => void
setFeedbackOpen: (open: boolean) => void
setLogbookActive: (active: boolean) => void
setProfileOpen: (open: boolean) => void
ensureLogbookForTour?: () => Promise<void>
}
interface DemoTourContext {
@@ -47,6 +52,7 @@ interface AppTourContextValue {
currentStepId: TourStepId | null
currentStepIndex: number
totalSteps: number
layoutTick: number
startTour: (options?: { force?: boolean; demoMode?: boolean }) => void
stopTour: () => void
restartTour: () => void
@@ -58,7 +64,7 @@ interface AppTourContextValue {
requestStartAfterLogin: () => void
}
const FULL_STEP_ORDER: TourStepId[] = [
export const FULL_STEP_ORDER: TourStepId[] = [
'welcome',
'nav_logs',
'entry_list',
@@ -68,12 +74,33 @@ const FULL_STEP_ORDER: TourStepId[] = [
'nav_crew',
'nav_stats',
'nav_feedback',
'nav_profile',
'profile_preferences',
'finish'
]
/** Public demo has no stats/feedback UI — skip those steps. */
const DEMO_EXCLUDED_STEPS: TourStepId[] = ['nav_stats', 'nav_feedback']
const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter((id) => !DEMO_EXCLUDED_STEPS.includes(id))
/** Public demo has no stats/feedback/profile UI — skip those steps. */
export const DEMO_EXCLUDED_STEPS: TourStepId[] = [
'nav_stats',
'nav_feedback',
'nav_profile',
'profile_preferences'
]
export const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter(
(id) => !DEMO_EXCLUDED_STEPS.includes(id)
)
const LOGBOOK_TOUR_STEPS = new Set<TourStepId>([
'nav_logs',
'entry_list',
'entry_open',
'entry_track',
'nav_vessel',
'nav_crew',
'nav_stats',
'nav_feedback'
])
function getStepOrder(demoMode: boolean): TourStepId[] {
return demoMode ? DEMO_STEP_ORDER : FULL_STEP_ORDER
@@ -87,7 +114,28 @@ const TARGET_BY_STEP: Partial<Record<TourStepId, string>> = {
nav_vessel: '[data-tour="nav-vessel"]',
nav_crew: '[data-tour="nav-crew"]',
nav_stats: '[data-tour="stats-dashboard"]',
nav_feedback: '[data-tour="feedback-form"]'
nav_feedback: '[data-tour="feedback-form"]',
nav_profile: '[data-tour="nav-profile"]',
profile_preferences: '[data-tour="profile-preferences"]'
}
/** Whether a tour step opens the first log entry editor (not the list card). */
export function tourStepOpensEntry(stepId: TourStepId): boolean {
return stepId === 'entry_track'
}
export function getTourTargetDelay(stepId: TourStepId): number {
if (stepId === 'entry_track') return 400
if (stepId === 'nav_feedback') return 180
if (stepId === 'nav_profile' || stepId === 'profile_preferences') return 250
return 0
}
/** Extra scroll attempts while async UI (e.g. entry editor) mounts. */
export function getTourScrollRetryDelays(stepId: TourStepId): number[] {
if (stepId === 'entry_track') return [400, 700, 1100, 1600]
const initial = getTourTargetDelay(stepId)
return initial > 0 ? [initial] : [0]
}
const AppTourContext = createContext<AppTourContextValue | null>(null)
@@ -97,6 +145,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
const [stepIndex, setStepIndex] = useState(0)
const [pendingAfterLogin, setPendingAfterLogin] = useState(false)
const [isDemoTour, setIsDemoTour] = useState(false)
const [layoutTick, setLayoutTick] = useState(0)
const navigationRef = useRef<TourNavigation | null>(null)
const demoContextRef = useRef<DemoTourContext | null>(null)
const tourModeRef = useRef<{ demoMode: boolean }>({ demoMode: false })
@@ -112,13 +161,24 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
const nav = navigationRef.current
if (!nav) return
if (LOGBOOK_TOUR_STEPS.has(stepId)) {
nav.setProfileOpen(false)
nav.setLogbookActive(true)
}
if (stepId === 'nav_logs' || stepId === 'entry_list' || stepId === 'entry_open' || stepId === 'entry_track') {
nav.setActiveTab('logs')
}
if (stepId === 'entry_open' || stepId === 'entry_track') {
if (stepId === 'entry_list' || stepId === 'entry_open') {
nav.setSelectedEntryId(null)
} else if (tourStepOpensEntry(stepId)) {
const firstEntryId = resolveFirstEntryId()
if (firstEntryId) nav.setSelectedEntryId(firstEntryId)
} else if (LOGBOOK_TOUR_STEPS.has(stepId)) {
nav.setSelectedEntryId(null)
}
if (stepId === 'nav_vessel') {
nav.setSelectedEntryId(null)
nav.setActiveTab('vessel')
@@ -137,19 +197,34 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
} else {
nav.setFeedbackOpen(false)
}
if (stepId === 'nav_profile') {
nav.setProfileOpen(false)
nav.setLogbookActive(false)
}
if (stepId === 'profile_preferences') {
nav.setLogbookActive(false)
nav.setProfileOpen(true)
}
}, [resolveFirstEntryId])
const scrollToCurrentTarget = useCallback((stepId: TourStepId | null) => {
if (!stepId) return
const selector = TARGET_BY_STEP[stepId]
if (!selector) return
const delayMs = stepId === 'nav_feedback' ? 180 : 0
window.setTimeout(() => {
window.requestAnimationFrame(() => {
const el = document.querySelector(selector)
el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
})
}, delayMs)
for (const delayMs of getTourScrollRetryDelays(stepId)) {
window.setTimeout(() => {
window.requestAnimationFrame(() => {
const el = document.querySelector(selector)
el?.scrollIntoView({
behavior: stepId === 'entry_track' ? 'instant' : 'smooth',
block: 'center',
inline: 'nearest'
})
})
}, delayMs)
}
}, [])
const startTour = useCallback((options?: { force?: boolean; demoMode?: boolean }) => {
@@ -173,6 +248,8 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED, tourProps)
const nav = navigationRef.current
if (nav && !tourModeRef.current.demoMode) {
nav.setProfileOpen(false)
nav.setLogbookActive(true)
nav.setSelectedEntryId(null)
nav.setActiveTab('stats')
}
@@ -183,6 +260,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
tourModeRef.current = { demoMode: false }
navigationRef.current?.setFeedbackOpen(false)
navigationRef.current?.setProfileOpen(false)
setIsDemoTour(false)
setIsActive(false)
setStepIndex(0)
@@ -213,8 +291,25 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
if (!isActive) return
const stepId = getStepOrder(isDemoTour)[stepIndex]
if (!stepId) return
applyStepSideEffects(stepId)
scrollToCurrentTarget(stepId)
let cancelled = false
const run = async () => {
if (LOGBOOK_TOUR_STEPS.has(stepId) && !isDemoTour) {
await navigationRef.current?.ensureLogbookForTour?.()
}
if (cancelled) return
applyStepSideEffects(stepId)
scrollToCurrentTarget(stepId)
setLayoutTick((tick) => tick + 1)
window.setTimeout(() => {
if (!cancelled) setLayoutTick((tick) => tick + 1)
}, 150)
}
void run()
return () => {
cancelled = true
}
}, [isActive, isDemoTour, stepIndex, applyStepSideEffects, scrollToCurrentTarget])
const restartTour = useCallback(() => {
@@ -257,6 +352,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
currentStepId,
currentStepIndex: stepIndex,
totalSteps: stepOrder.length,
layoutTick,
startTour,
stopTour,
restartTour,
@@ -281,6 +377,7 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
startTour,
stepIndex,
stepOrder.length,
layoutTick,
stopTour
]
)
@@ -321,3 +418,10 @@ export function getTourTargetSelector(stepId: TourStepId | null): string | null
export function isCenteredTourStep(stepId: TourStepId | null): boolean {
return stepId === 'welcome' || stepId === 'finish'
}
export function getTourTargetRetryDelay(stepId: TourStepId | null): number {
if (stepId === 'entry_track') return 400
if (stepId === 'profile_preferences') return 300
if (stepId === 'nav_profile') return 200
return 120
}
+9 -1
View File
@@ -672,9 +672,17 @@
"title": "Feedback senden",
"body": "Über dieses Formular kannst du Fehler, Ideen oder allgemeines Feedback direkt an das Projektteam schicken auch nach der Tour jederzeit über das Symbol oben rechts."
},
"nav_profile": {
"title": "Dein Benutzerprofil",
"body": "Über den Skipper-Button oben erreichst du dein persönliches Profil unabhängig vom aktuellen Logbuch."
},
"profile_preferences": {
"title": "Konto & Darstellung",
"body": "Hier verwaltest du deine Konto-Identität, Theme und Hell/Dunkel-Modus. Die App-Tour kannst du jederzeit erneut starten. Passkeys und Sicherheitseinstellungen findest du weiter unten im Profil."
},
"finish": {
"title": "Alles klar!",
"body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit unter Einstellungen erneut starten. Gute Fahrt!"
"body": "Du landest gleich im Statistik-Dashboard. Die Tour kannst du jederzeit im Benutzerprofil erneut starten. Gute Fahrt!"
}
}
},
+9 -1
View File
@@ -672,9 +672,17 @@
"title": "Send feedback",
"body": "Use this form to report bugs, ideas, or general feedback to the project team — you can also open it anytime later via the icon in the top right."
},
"nav_profile": {
"title": "Your user profile",
"body": "Tap the skipper button at the top to open your personal profile — independent of the current logbook."
},
"profile_preferences": {
"title": "Account & appearance",
"body": "Manage your account identity, theme, and light/dark mode here. You can restart the app tour anytime. Passkeys and security settings are further down on the profile page."
},
"finish": {
"title": "You're all set!",
"body": "You'll land on the statistics dashboard next. You can restart the tour anytime in Settings. Fair winds!"
"body": "You'll land on the statistics dashboard next. You can restart the tour anytime from your user profile. Fair winds!"
}
}
},
+36
View File
@@ -0,0 +1,36 @@
import { beforeEach, describe, expect, it } from 'vitest'
import {
clearDemoLogbookRefs,
getDemoFirstEntryStorageKey,
getDemoLogbookStorageKey
} from './demoLogbook.js'
describe('clearDemoLogbookRefs', () => {
const userId = 'user-1'
beforeEach(() => {
localStorage.clear()
localStorage.setItem('active_userid', userId)
})
it('removes demo logbook and first-entry keys for the user', () => {
const logbookId = 'lb-demo'
localStorage.setItem(getDemoLogbookStorageKey(userId), logbookId)
localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
clearDemoLogbookRefs(userId, logbookId)
expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBeNull()
expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBeNull()
})
it('does not clear refs when logbookId does not match stored demo id', () => {
localStorage.setItem(getDemoLogbookStorageKey(userId), 'other-logbook')
localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
clearDemoLogbookRefs(userId, 'deleted-logbook')
expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBe('other-logbook')
expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBe('entry-1')
})
})
+64
View File
@@ -108,6 +108,7 @@ export async function seedDemoLogbookIfNeeded(): Promise<DemoSeedResult | null>
const title = i18n.t('demo.logbook_title')
return { logbookId: existingId, title, firstEntryId }
}
clearDemoLogbookRefs(userId, existingId)
}
if (!shouldSeed) return null
@@ -152,3 +153,66 @@ export function getStoredDemoFirstEntryId(): string | null {
if (!userId) return null
return localStorage.getItem(getDemoFirstEntryStorageKey(userId))
}
/** Remove persisted demo logbook pointers when the logbook no longer exists. */
export function clearDemoLogbookRefs(userId: string, logbookId?: string): void {
const storedId = localStorage.getItem(getDemoLogbookStorageKey(userId))
if (logbookId && storedId && storedId !== logbookId) return
localStorage.removeItem(getDemoLogbookStorageKey(userId))
localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
}
export async function entryExistsInLogbook(logbookId: string, entryId: string): Promise<boolean> {
const entry = await db.entries.get(entryId)
return entry?.logbookId === logbookId
}
export interface TourLogbookContext {
logbookId: string
title: string
firstEntryId: string | null
}
/** Pick a logbook + first entry for the onboarding tour (handles deleted demo data). */
export async function resolveTourLogbookContext(
preferLogbookId?: string | null
): Promise<TourLogbookContext | null> {
const userId = localStorage.getItem('active_userid')
if (!userId || !getActiveMasterKey()) return null
const demoId = localStorage.getItem(getDemoLogbookStorageKey(userId))
if (demoId && !(await db.logbooks.get(demoId))) {
clearDemoLogbookRefs(userId, demoId)
}
const { fetchLogbooks } = await import('./logbook.js')
const books = await fetchLogbooks()
if (books.length === 0) return null
const activeId = localStorage.getItem('active_logbook_id')
const pick =
(preferLogbookId ? books.find((b) => b.id === preferLogbookId) : undefined) ??
(activeId ? books.find((b) => b.id === activeId) : undefined) ??
(demoId ? books.find((b) => b.id === demoId) : undefined) ??
books[0]
const firstEntryId = await resolveTourFirstEntryId(pick.id, userId)
return { logbookId: pick.id, title: pick.title, firstEntryId }
}
async function resolveTourFirstEntryId(logbookId: string, userId: string): Promise<string | null> {
const stored = localStorage.getItem(getDemoFirstEntryStorageKey(userId))
if (stored && (await entryExistsInLogbook(logbookId, stored))) {
return stored
}
if (stored) {
localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
}
const localEntries = await db.entries.where({ logbookId }).toArray()
if (localEntries.length === 0) return null
localEntries.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
return localEntries[0]?.payloadId ?? null
}
+4
View File
@@ -4,6 +4,7 @@ import { encryptJson, decryptJson, encryptBuffer, decryptBuffer } from './crypto
import { getLogbookKey, saveLogbookKey, generateLogbookKey } from './logbookKeys.js'
import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
import { apiFetch } from './api.js'
import { clearDemoLogbookRefs, getDemoLogbookStorageKey } from './demoLogbook.js'
const API_BASE = '/api/logbooks'
@@ -320,6 +321,9 @@ export async function deleteLogbook(id: string): Promise<void> {
// Perform local cascading cleanup
await deleteLocalLogbookCache(id)
if (userId && id === localStorage.getItem(getDemoLogbookStorageKey(userId))) {
clearDemoLogbookRefs(userId, id)
}
trackPlausibleEvent(PlausibleEvents.LOGBOOK_DELETED)
}
+42
View File
@@ -0,0 +1,42 @@
import { describe, expect, it } from 'vitest'
import {
hasUnsavedEventDraft,
isLogEventDraftEmpty,
normalizeLogEvent,
type LogEventPayload
} from './logEntryPayload.js'
const emptyDraft = (): LogEventPayload =>
normalizeLogEvent({ time: '12:34' })
const filledDraft = (): LogEventPayload =>
normalizeLogEvent({ time: '12:34', remarks: 'Wind dreht' })
describe('logEntryPayload event drafts', () => {
it('treats time-only draft as empty', () => {
expect(isLogEventDraftEmpty(emptyDraft())).toBe(true)
})
it('detects draft with content', () => {
expect(isLogEventDraftEmpty(filledDraft())).toBe(false)
})
it('does not flag empty open form as unsaved', () => {
expect(hasUnsavedEventDraft(emptyDraft(), null, [])).toBe(false)
})
it('flags new event draft with content as unsaved', () => {
expect(hasUnsavedEventDraft(filledDraft(), null, [])).toBe(true)
})
it('flags edited event when values differ', () => {
const events = [emptyDraft()]
const edited = filledDraft()
expect(hasUnsavedEventDraft(edited, 0, events)).toBe(true)
})
it('ignores edit mode when values match', () => {
const events = [filledDraft()]
expect(hasUnsavedEventDraft(filledDraft(), 0, events)).toBe(false)
})
})
+21
View File
@@ -111,6 +111,27 @@ export function logEventsEqual(a: LogEventPayload, b: LogEventPayload): boolean
return LOG_EVENT_FIELDS.every((key) => a[key] === b[key])
}
const LOG_EVENT_CONTENT_FIELDS = LOG_EVENT_FIELDS.filter((key) => key !== 'time')
/** Draft with only a time (or empty fields) — not an unsaved log entry change. */
export function isLogEventDraftEmpty(event: LogEventPayload): boolean {
return LOG_EVENT_CONTENT_FIELDS.every((key) => !event[key]?.trim())
}
/** Whether the event form holds unsaved changes worth merging on page save. */
export function hasUnsavedEventDraft(
draft: LogEventPayload,
editingEventIndex: number | null,
events: LogEventPayload[]
): boolean {
if (!isValidTimeHHMM(draft.time)) return false
if (editingEventIndex !== null) {
const original = events[editingEventIndex]
return original ? !logEventsEqual(draft, original) : false
}
return !isLogEventDraftEmpty(draft)
}
/** Chronological order: earliest time first (HH:MM). */
export function sortLogEventsByTime<T extends LogEventPayload>(events: T[]): T[] {
return [...events].sort((a, b) => (a.time || '').localeCompare(b.time || ''))
+1 -1
View File
@@ -322,7 +322,7 @@
<div class="feature"><span class="feature-icon"></span><span>GPS-Track Upload (GPX/KML) mit Kartendarstellung</span></div>
<div class="feature"><span class="feature-icon"></span><span>Streckenstatistik</span></div>
<div class="feature"><span class="feature-icon"></span><span>Foto-Anhänge pro Reisetag</span></div>
<div class="feature"><span class="feature-icon"></span><span>Foto-Anhänge für Skipper und Crew</span></div>
<div class="feature"><span class="feature-icon"></span><span>Foto-Avatarbilder für Skipper und Crew</span></div>
<div class="feature"><span class="feature-icon"></span><span>Crew einladen — gemeinsam am Logbuch arbeiten</span></div>
<div class="feature"><span class="feature-icon"></span><span>PDF- &amp; CSV-Export</span></div>
<div class="feature"><span class="feature-icon"></span><span>Verschlüsseltes Backup &amp; Wiederherstellung</span></div>
Binary file not shown.
+1 -1
View File
@@ -59,7 +59,7 @@ bump_patch_version() {
}
ensure_clean_git_tree() {
if git diff-index --quiet HEAD -- && [ -z "$(git status --porcelain)" ]; then
if [ -z "$(git status --porcelain)" ]; then
return 0
fi