// p05-seed.jsx — Seed detail screen + P05a/b/c/e sheets // States: default / playingPhrase / playingDialogue / unfiled (no pouch) function ScreenSeed({ state, onNavigate, seedId, from }) { const T = window.T; const seed = window.MOCK_SEEDS.find(s => s.id === (seedId || 's01')) || window.MOCK_SEEDS[0]; const isUnfiled = state === 'unfiled'; const seedPouches = isUnfiled ? [] : seed.pouches.map(id => window.MOCK_POUCHES.find(p => p.id === id)).filter(Boolean); // When entering from P10 (success screen), show a context breadcrumb // so the user knows where to return. P10 multi additionally gets prev/next // navigation through the freshly-created seeds. const fromP10 = from === 'P10' || from === 'P10m'; const fromP10Multi = from === 'P10m'; const createdList = fromP10Multi ? (window.MOCK_SEEDS || []).slice(0, 5) : null; const createdIdx = fromP10Multi ? createdList.findIndex(s => s.id === seed.id) : -1; const prevSeed = createdIdx > 0 ? createdList[createdIdx - 1] : null; const nextSeed = createdIdx >= 0 && createdIdx < createdList?.length - 1 ? createdList[createdIdx + 1] : null; // 인라인 편집 가능한 분류: 첨출표 제거(×) + "+ 추가" 시트. // 초기값은 씨앗의 자동 분류는 ID. 편집 세션이 이어지도록 state로 든다. const [seedCats, setSeedCats] = React.useState(seed.categories || []); React.useEffect(() => { setSeedCats(seed.categories || []); }, [seed.id]); const [catSheetOpen, setCatSheetOpen] = React.useState(false); const [playingPhrase, setPlayingPhrase] = React.useState(state === 'playingPhrase'); const [playingDialogue, setPlayingDialogue] = React.useState(state === 'playingDialogue'); const [sheet, setSheet] = React.useState(null); // 'actions' | 'move' | 'cats' | null const [showDelete, setShowDelete] = React.useState(false); // 곳간(즐겨찾기) — 별 토글 + 토스트 const seedFavs = useSeedFavs(); const fav = seedFavs.isFav(seed.id); const [favToast, setFavToast] = React.useState(null); React.useEffect(() => { if (!favToast) return; const t = setTimeout(() => setFavToast(null), 2200); return () => clearTimeout(t); }, [favToast]); const toggleFav = () => { const now = seedFavs.toggle(seed.id); setFavToast(now ? '곳간에 담았어요' : '곳간에서 뺐어요'); }; // Tokenize foreign text: word-by-word for space-separated langs, char-by-char otherwise (JA/ZH). const hasSpaces = /\s/.test(seed.foreign); const isPunct = (t) => /^[\s、。?,.!?¿¡·…]+$/.test(t); const words = React.useMemo(() => ( hasSpaces ? seed.foreign.split(/(\s+)/).filter(Boolean) : Array.from(seed.foreign) ), [seed.foreign, hasSpaces]); const highlightables = React.useMemo( () => words.map((w, i) => (isPunct(w) ? -1 : i)).filter(i => i >= 0), [words] ); // Static frames for screenshot states: mid-phrase highlight + the "me" turn. const staticPhraseIdx = highlightables[Math.min(2, highlightables.length - 1)] ?? -1; const meIdx = seed.dialogue.findIndex(l => l.who === 'me'); const staticDialIdx = meIdx >= 0 ? meIdx : Math.min(1, seed.dialogue.length - 1); const [phraseWordIdx, setPhraseWordIdx] = React.useState( state === 'playingPhrase' ? staticPhraseIdx : -1 ); const [dialIdx, setDialIdx] = React.useState( state === 'playingDialogue' ? staticDialIdx : -1 ); // When entering via state prop, hold the static frame on first mount. // Only animate when the user toggles play themselves. const skipPhraseAnim = React.useRef(state === 'playingPhrase'); const skipDialAnim = React.useRef(state === 'playingDialogue'); // ─── 내 표현 듣기: walk word-by-word, then auto-stop. ─── React.useEffect(() => { if (!playingPhrase) { setPhraseWordIdx(-1); return; } if (skipPhraseAnim.current) { skipPhraseAnim.current = false; return; } let step = 0; setPhraseWordIdx(highlightables[0] ?? -1); const perWord = hasSpaces ? 380 : 240; // chars tick faster than words const id = setInterval(() => { step += 1; if (step >= highlightables.length) { clearInterval(id); setPhraseWordIdx(-1); setPlayingPhrase(false); } else { setPhraseWordIdx(highlightables[step]); } }, perWord); return () => clearInterval(id); }, [playingPhrase, highlightables, hasSpaces]); // ─── 대화 전체 듣기: start at line 0, advance through all, auto-stop. ─── React.useEffect(() => { if (!playingDialogue) { setDialIdx(-1); return; } if (skipDialAnim.current) { skipDialAnim.current = false; return; } let i = 0; setDialIdx(0); const id = setInterval(() => { i += 1; if (i >= seed.dialogue.length) { clearInterval(id); setDialIdx(-1); setPlayingDialogue(false); } else { setDialIdx(i); } }, 1500); return () => clearInterval(id); }, [playingDialogue, seed.dialogue.length]); return (
} onClick={() => onNavigate('back')}/>} trailing={
} onClick={toggleFav}/> } onClick={() => setSheet('actions')}/>
} /> {/* P10 context breadcrumb. Both default (1 seed) and multi (5 seeds) users see this; multi additionally gets prev/next buttons. */} {fromP10 && (
{fromP10Multi && createdIdx >= 0 ? ✨ 방금 만든 {createdList.length}개 중 {createdIdx + 1}번째 : 방금 만든 씨앗 확인 중} {fromP10Multi && ( )}
)}
{/* Language label */}
{seed.langLabel}
{/* Foreign (largest) */}
{playingPhrase ? words.map((w, i) => ( {w} )) : seed.foreign}
{/* Pronunciation */}
{seed.pron}
{/* Korean */}
{seed.korean}
{/* Primary play */} {/* Dialogue context */}
이런 상황에서
{seed.dialogue.map((line, i) => { const isMe = line.who === 'me'; const active = playingDialogue && i === dialIdx; return (
{isMe ? '나' : '상대'}
{line.text}
{line.pron}
{active && (
{[0, 1, 2].map(b => (
))}
)}
); })}
{/* Categories */}
분류
{seedCats.map(cid => { const liveCats = window.__cpCats || window.MOCK_CATEGORIES; const c = liveCats.find(x => x.id === cid); if (!c) return null; return (
{c.icon || window.monogramOf(c.label)} {c.label}
); })} {seedCats.length === 0 && ( 분류가 없어요. 옆 버튼으로 추가해주세요 )}
{/* Pouches — moved to bottom per design feedback */}
담긴 주머니
{seedPouches.map(p => ( onNavigate('P04', { pouchId: p.id, from: 'P05' })} accent={T[p.color]}> {p.name} ))} {seedPouches.length === 0 && ( 아직 주머니에 담기지 않았어요 )}
{/* P05a Actions sheet */} setSheet(null)}> { setSheet(null); toggleFav(); }} onMove={() => setSheet('move')} onCats={() => setSheet('cats')} onDelete={() => { setSheet(null); setShowDelete(true); }} /> {/* P05b Move (pouches) sheet */} setSheet(null)} title="주머니에 담기"> setSheet(null)}/> {/* P05c Categories sheet */} setSheet(null)} title="카테고리 변경"> setSheet(null)}/> {/* P05e Delete confirm */} { setShowDelete(false); onNavigate('back'); }} onCancel={() => setShowDelete(false)} /> {/* Inline 분류 추가 sheet — reused from P10. */} {catSheetOpen && window.CategoryAddSheet && ( { setSeedCats(cs => cs.includes(id) ? cs : [...cs, id]); setCatSheetOpen(false); }} onClose={() => setCatSheetOpen(false)} /> )} {favToast && }
); } // ────────────────────────────────────────────────────────────── // P05a Actions sheet content // ────────────────────────────────────────────────────────────── function ActionsSheet({ seed, pouches, fav, onToggleFav, onMove, onCats, onDelete }) { const T = window.T; return (
{/* Preview */}
{seed.langLabel}
{seed.foreign}
{seed.korean}
{pouches.slice(0, 3).map(p => ( {p.name} ))}
} onClick={onToggleFav} last/>
} trailing={} onClick={onMove}/> } trailing={} onClick={onCats} last/>
} onClick={onDelete} last/>
); } function MoveSheet({ seedPouches, onClose }) { const T = window.T; const all = window.MOCK_POUCHES; const [sel, setSel] = React.useState(new Set(seedPouches.map(p => p.id))); const toggle = (id) => { const n = new Set(sel); n.has(id) ? n.delete(id) : n.add(id); setSel(n); }; return (
여러 주머니에 동시에 담을 수 있어요
{all.map((p, i) => ( } trailing={
{sel.has(p.id) && }
} onClick={() => toggle(p.id)} last={i === all.length - 1} /> ))}
); } // ────────────────────────────────────────────────────────────── // P05c — Categories sheet. // Now sources from the live in-app store (window.__cpCats) so adds from // P13b / P06 show up here. Inline [+ 새 카테고리] expands a compact form // without leaving the sheet. "자주 쓰는" surfaced first, rest behind 더 보기. // ────────────────────────────────────────────────────────────── function CatsSheet({ seed, onClose }) { const T = window.T; const liveCats = window.__cpCats || window.MOCK_CATEGORIES; const [cats, setCats] = React.useState(liveCats); const [sel, setSel] = React.useState(new Set(seed.categories)); const [showMore, setShowMore] = React.useState(false); const [addOpen, setAddOpen] = React.useState(false); const [newLabel, setNewLabel] = React.useState(''); const [newIcon, setNewIcon] = React.useState(null); const MAX = 3; // multi-select cap // Sort cats by usage descending → top N visible by default. const sorted = window.sortCatsByUsage(cats); const TOP = 6; const topCats = sorted.slice(0, TOP); const restCats = sorted.slice(TOP); const visibleCats = showMore ? sorted : topCats; const toggle = (id) => { const n = new Set(sel); if (n.has(id)) n.delete(id); else if (n.size < MAX) n.add(id); setSel(n); }; const commitNew = () => { const label = newLabel.trim(); if (!label) return; const c = window.makeNewCat(label, newIcon); const next = [c, ...cats]; setCats(next); window.__cpCats = next; // share with other screens this session const ns = new Set(sel); if (ns.size < MAX) ns.add(c.id); // auto-select new one (if room) setSel(ns); setNewLabel(''); setNewIcon(null); setAddOpen(false); }; return (
최대 {MAX}개까지 선택할 수 있어요 = MAX ? T.danger : T.ink3 }}> {sel.size}/{MAX}
분류
{visibleCats.map(c => { const on = sel.has(c.id); const disabled = !on && sel.size >= MAX; return ( ); })} {/* + 새 카테고리 (inline opener) */} {!addOpen && ( )}
{/* See-more toggle */} {restCats.length > 0 && ( )} {/* Inline new-category form */} {addOpen && (
setNewLabel(e.target.value.slice(0, 16))} placeholder="카테고리 이름" autoFocus maxLength={16} onKeyDown={(e) => { if (e.key === 'Enter') commitNew(); }} style={{ flex: 1, height: 38, padding: '0 12px', background: T.bg, border: `0.5px solid ${T.hairlineStrong}`, borderRadius: 10, fontSize: 14, color: T.ink, fontFamily: 'inherit', outline: 'none', letterSpacing: '-0.01em', }}/>
{/* Quick emoji picker (compact: first 16) */}
{(window.MOCK_CAT_EMOJI || []).slice(0, 15).map(e => { const on = newIcon === e; return ( ); })}
)} {!addOpen &&
}
); } Object.assign(window, { ScreenSeed });