126 lines
4.8 KiB
TypeScript
126 lines
4.8 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import type { TimelineConflict, TimelineEntry } from '@shared/timeline'
|
|
import { useAppStore } from '@renderer/stores/useAppStore'
|
|
import { useBookStore } from '@renderer/stores/useBookStore'
|
|
import { useEditStore } from '@renderer/stores/useEditStore'
|
|
import { ipcCall } from '@renderer/lib/ipc-client'
|
|
|
|
export function TimelineModal(): React.JSX.Element | null {
|
|
const { t } = useTranslation()
|
|
const open = useAppStore((s) => s.timelineModalOpen)
|
|
const setOpen = useAppStore((s) => s.setTimelineModalOpen)
|
|
const bookId = useBookStore((s) => s.currentBookId)
|
|
const settings = useBookStore((s) => s.settings)
|
|
const switchTarget = useEditStore((s) => s.switchTarget)
|
|
const [entries, setEntries] = useState<TimelineEntry[]>([])
|
|
const [conflicts, setConflicts] = useState<TimelineConflict[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const conflictChapterIds = useMemo(
|
|
() => new Set(conflicts.map((c) => c.chapterId)),
|
|
[conflicts]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (!open || !bookId) return
|
|
setLoading(true)
|
|
void Promise.all([
|
|
ipcCall(() => window.electronAPI.timeline.list(bookId)),
|
|
ipcCall(() => window.electronAPI.timeline.conflicts(bookId))
|
|
])
|
|
.then(([list, conf]) => {
|
|
setEntries(list)
|
|
setConflicts(conf)
|
|
})
|
|
.finally(() => setLoading(false))
|
|
}, [open, bookId])
|
|
|
|
const handleJump = async (entry: TimelineEntry): Promise<void> => {
|
|
if (!entry.chapterId) return
|
|
await switchTarget({ kind: 'chapter', id: entry.chapterId })
|
|
setOpen(false)
|
|
}
|
|
|
|
const handleAddEvent = async (): Promise<void> => {
|
|
if (!bookId) return
|
|
const title = window.prompt(t('timeline.eventTitlePrompt'))
|
|
if (!title?.trim()) return
|
|
const storyTime = window.prompt(t('timeline.storyTimePrompt')) ?? ''
|
|
await ipcCall(() =>
|
|
window.electronAPI.timeline.upsert(bookId, {
|
|
title: title.trim(),
|
|
storyTime: storyTime.trim() || null
|
|
})
|
|
)
|
|
const list = await ipcCall(() => window.electronAPI.timeline.list(bookId))
|
|
setEntries(list)
|
|
}
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="modal-overlay" data-testid="timeline-modal" role="dialog" aria-modal="true">
|
|
<div className="modal-content modal-content--wide">
|
|
<div className="modal-header">
|
|
<h3>{t('timeline.title')}</h3>
|
|
<button type="button" className="modal-close" onClick={() => setOpen(false)}>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
{loading ? (
|
|
<p>{t('cockpit.loading')}</p>
|
|
) : (
|
|
<div className="timeline-list" data-testid="timeline-list">
|
|
{entries.map((entry) => {
|
|
const conflict = conflicts.find((c) => c.chapterId === entry.chapterId)
|
|
const isConflict = entry.chapterId && conflictChapterIds.has(entry.chapterId)
|
|
return (
|
|
<div
|
|
key={entry.id}
|
|
className={`timeline-item ${isConflict ? 'timeline-item--conflict' : ''}`}
|
|
data-testid={`timeline-item-${entry.id}`}
|
|
>
|
|
<div className="timeline-item-main">
|
|
<strong>{entry.title}</strong>
|
|
<span className="timeline-item-meta">
|
|
{entry.storyTime ? entry.storyTime : t('timeline.noTime')}
|
|
{entry.kind === 'manual' ? ` · ${t('timeline.manual')}` : ''}
|
|
</span>
|
|
</div>
|
|
{conflict && (
|
|
<div className="timeline-conflict-msg" data-testid="timeline-conflict-msg">
|
|
{conflict.message}
|
|
</div>
|
|
)}
|
|
{entry.chapterId && (
|
|
<button type="button" className="btn" onClick={() => void handleJump(entry)}>
|
|
{t('timeline.jumpChapter')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
{entries.length === 0 && <p className="text-muted">{t('timeline.empty')}</p>}
|
|
</div>
|
|
)}
|
|
{settings.filter((s) => s.type === 'character').length > 0 && (
|
|
<p className="text-muted" style={{ marginTop: 12, fontSize: 12 }}>
|
|
{t('timeline.characterHint')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button type="button" className="btn" onClick={() => void handleAddEvent()}>
|
|
{t('timeline.addEvent')}
|
|
</button>
|
|
<button type="button" className="btn btn-primary" onClick={() => setOpen(false)}>
|
|
{t('dialog.cancel')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|