🐛 fix the dialogs
This commit is contained in:
@@ -435,6 +435,7 @@ export function AnalysisToolbar(): JSX.Element {
|
|||||||
≡
|
≡
|
||||||
</button>
|
</button>
|
||||||
{activeFilePath && paragraphRhythm.length > 0 && (
|
{activeFilePath && paragraphRhythm.length > 0 && (
|
||||||
|
<>
|
||||||
<button
|
<button
|
||||||
ref={rhythmButtonRef}
|
ref={rhythmButtonRef}
|
||||||
className={`toolbar-btn toolbar-btn-outline${rhythmOpen ? ' active' : ''}`}
|
className={`toolbar-btn toolbar-btn-outline${rhythmOpen ? ' active' : ''}`}
|
||||||
@@ -443,8 +444,60 @@ export function AnalysisToolbar(): JSX.Element {
|
|||||||
>
|
>
|
||||||
∿
|
∿
|
||||||
</button>
|
</button>
|
||||||
|
{rhythmOpen && rhythmButtonRef.current && createPortal(
|
||||||
|
(() => {
|
||||||
|
const rect = rhythmButtonRef.current!.getBoundingClientRect()
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={rhythmMenuRef}
|
||||||
|
className="toolbar-rhythm-popover"
|
||||||
|
style={{ top: rect.bottom + 4, left: rect.left }}
|
||||||
|
>
|
||||||
|
<div className="toolbar-stats-header">
|
||||||
|
<span className="toolbar-stats-title">Paragraph Rhythm</span>
|
||||||
|
<button className="toolbar-stats-close" onClick={() => setRhythmOpen(false)}>×</button>
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-stats-summary">
|
||||||
|
<span><strong>{paragraphRhythm.length}</strong> paragraphs</span>
|
||||||
|
<span>avg <strong>{Math.round(paragraphRhythm.reduce((s, p) => s + p.sentences, 0) / paragraphRhythm.length * 10) / 10}</strong> sentences</span>
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-rhythm-list">
|
||||||
|
{paragraphRhythm.map((p, i) => {
|
||||||
|
const barW = Math.max(12, Math.round((p.words / maxParaWords) * 180))
|
||||||
|
const color = sentenceCountColor(p.sentences)
|
||||||
|
const preview = p.text.length > 80 ? p.text.slice(0, 80) + '…' : p.text
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="toolbar-rhythm-row"
|
||||||
|
title={`${p.sentences} sentence${p.sentences !== 1 ? 's' : ''} · ${p.words} words\n${preview}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="toolbar-rhythm-bar"
|
||||||
|
style={{ width: barW, background: color }}
|
||||||
|
/>
|
||||||
|
<span className="toolbar-rhythm-count" style={{ color }}>{p.sentences}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-rhythm-legend">
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7, 8].map(n => (
|
||||||
|
<div key={n} className="toolbar-rhythm-legend-item" title={`${n}${n === 8 ? '+' : ''} sentence${n !== 1 ? 's' : ''}`}>
|
||||||
|
<div className="toolbar-rhythm-legend-swatch" style={{ background: sentenceCountColor(n) }} />
|
||||||
|
<span>{n}{n === 8 ? '+' : ''}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})(),
|
||||||
|
document.body
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
{activeFilePath && sentenceStats && (
|
{activeFilePath && sentenceStats && (
|
||||||
|
<>
|
||||||
<button
|
<button
|
||||||
ref={statsButtonRef}
|
ref={statsButtonRef}
|
||||||
className={`toolbar-btn toolbar-btn-stats${statsOpen ? ' active' : ''}`}
|
className={`toolbar-btn toolbar-btn-stats${statsOpen ? ' active' : ''}`}
|
||||||
@@ -453,6 +506,76 @@ export function AnalysisToolbar(): JSX.Element {
|
|||||||
>
|
>
|
||||||
≈
|
≈
|
||||||
</button>
|
</button>
|
||||||
|
{statsOpen && statsButtonRef.current && createPortal(
|
||||||
|
(() => {
|
||||||
|
const rect = statsButtonRef.current!.getBoundingClientRect()
|
||||||
|
const maxBin = Math.max(...sentenceStats.bins, 1)
|
||||||
|
const CHART_H = 60
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={statsMenuRef}
|
||||||
|
className="toolbar-stats-popover"
|
||||||
|
style={{ top: rect.bottom + 4, left: rect.left }}
|
||||||
|
>
|
||||||
|
<div className="toolbar-stats-header">
|
||||||
|
<span className="toolbar-stats-title">Sentence Lengths</span>
|
||||||
|
<button className="toolbar-stats-close" onClick={() => setStatsOpen(false)}>×</button>
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-stats-summary">
|
||||||
|
<span>avg <strong>{Math.round(sentenceStats.avg * 10) / 10}w</strong></span>
|
||||||
|
<span>σ <strong>{Math.round(sentenceStats.stdDev * 10) / 10}</strong></span>
|
||||||
|
<span><strong>{sentenceStats.totalSentences}</strong> sentences</span>
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-stats-chart" style={{ height: CHART_H }}>
|
||||||
|
{sentenceStats.bins.map((count, i) => {
|
||||||
|
const wordCount = i + 1
|
||||||
|
const isTarget = wordCount >= 11 && wordCount <= 16
|
||||||
|
const barH = count === 0 ? 0 : Math.max(2, Math.round((count / maxBin) * CHART_H))
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`toolbar-stats-bar${isTarget ? ' target' : ''}`}
|
||||||
|
style={{ height: barH }}
|
||||||
|
title={`${wordCount === 31 ? '31+' : wordCount}w: ${count} sentence${count !== 1 ? 's' : ''}`}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-stats-axis">
|
||||||
|
<span>1</span>
|
||||||
|
<span>8</span>
|
||||||
|
<span className="toolbar-stats-axis-target">11–16 ●</span>
|
||||||
|
<span>22</span>
|
||||||
|
<span>31+</span>
|
||||||
|
</div>
|
||||||
|
{sentenceStats.outliers.length > 0 && (
|
||||||
|
<div className="toolbar-stats-outliers">
|
||||||
|
<div className="toolbar-stats-outliers-title">
|
||||||
|
Flagged (≤4 or ≥26 words)
|
||||||
|
</div>
|
||||||
|
<div className="toolbar-stats-outliers-list">
|
||||||
|
{sentenceStats.outliers.slice(0, 8).map((o, i) => (
|
||||||
|
<div key={i} className="toolbar-stats-outlier">
|
||||||
|
<span className="toolbar-stats-outlier-wc">{o.wordCount}w</span>
|
||||||
|
<span className={`toolbar-stats-outlier-text${o.wordCount <= 4 ? ' short' : ' long'}`}>
|
||||||
|
{o.text.length > 55 ? o.text.slice(0, 55) + '…' : o.text}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{sentenceStats.outliers.length > 8 && (
|
||||||
|
<div className="toolbar-stats-outlier-more">
|
||||||
|
+{sentenceStats.outliers.length - 8} more
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})(),
|
||||||
|
document.body
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
ref={analyzeButtonRef}
|
ref={analyzeButtonRef}
|
||||||
@@ -552,126 +675,6 @@ export function AnalysisToolbar(): JSX.Element {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="toolbar-right">
|
<div className="toolbar-right">
|
||||||
{activeFilePath && paragraphRhythm.length > 0 && rhythmOpen && rhythmButtonRef.current && createPortal(
|
|
||||||
(() => {
|
|
||||||
const rect = rhythmButtonRef.current!.getBoundingClientRect()
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={rhythmMenuRef}
|
|
||||||
className="toolbar-rhythm-popover"
|
|
||||||
style={{ top: rect.bottom + 4, right: window.innerWidth - rect.right }}
|
|
||||||
>
|
|
||||||
<div className="toolbar-stats-header">
|
|
||||||
<span className="toolbar-stats-title">Paragraph Rhythm</span>
|
|
||||||
<button className="toolbar-stats-close" onClick={() => setRhythmOpen(false)}>×</button>
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-stats-summary">
|
|
||||||
<span><strong>{paragraphRhythm.length}</strong> paragraphs</span>
|
|
||||||
<span>avg <strong>{Math.round(paragraphRhythm.reduce((s, p) => s + p.sentences, 0) / paragraphRhythm.length * 10) / 10}</strong> sentences</span>
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-rhythm-list">
|
|
||||||
{paragraphRhythm.map((p, i) => {
|
|
||||||
const barW = Math.max(12, Math.round((p.words / maxParaWords) * 180))
|
|
||||||
const color = sentenceCountColor(p.sentences)
|
|
||||||
const preview = p.text.length > 80 ? p.text.slice(0, 80) + '…' : p.text
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className="toolbar-rhythm-row"
|
|
||||||
title={`${p.sentences} sentence${p.sentences !== 1 ? 's' : ''} · ${p.words} words\n${preview}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="toolbar-rhythm-bar"
|
|
||||||
style={{ width: barW, background: color }}
|
|
||||||
/>
|
|
||||||
<span className="toolbar-rhythm-count" style={{ color }}>{p.sentences}</span>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-rhythm-legend">
|
|
||||||
{[1, 2, 3, 4, 5, 6, 7, 8].map(n => (
|
|
||||||
<div key={n} className="toolbar-rhythm-legend-item" title={`${n}${n === 8 ? '+' : ''} sentence${n !== 1 ? 's' : ''}`}>
|
|
||||||
<div className="toolbar-rhythm-legend-swatch" style={{ background: sentenceCountColor(n) }} />
|
|
||||||
<span>{n}{n === 8 ? '+' : ''}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})(),
|
|
||||||
document.body
|
|
||||||
)}
|
|
||||||
|
|
||||||
{activeFilePath && sentenceStats && statsOpen && statsButtonRef.current && createPortal(
|
|
||||||
(() => {
|
|
||||||
const rect = statsButtonRef.current!.getBoundingClientRect()
|
|
||||||
const maxBin = Math.max(...sentenceStats.bins, 1)
|
|
||||||
const CHART_H = 60
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
ref={statsMenuRef}
|
|
||||||
className="toolbar-stats-popover"
|
|
||||||
style={{ top: rect.bottom + 4, right: window.innerWidth - rect.right }}
|
|
||||||
>
|
|
||||||
<div className="toolbar-stats-header">
|
|
||||||
<span className="toolbar-stats-title">Sentence Lengths</span>
|
|
||||||
<button className="toolbar-stats-close" onClick={() => setStatsOpen(false)}>×</button>
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-stats-summary">
|
|
||||||
<span>avg <strong>{Math.round(sentenceStats.avg * 10) / 10}w</strong></span>
|
|
||||||
<span>σ <strong>{Math.round(sentenceStats.stdDev * 10) / 10}</strong></span>
|
|
||||||
<span><strong>{sentenceStats.totalSentences}</strong> sentences</span>
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-stats-chart" style={{ height: CHART_H }}>
|
|
||||||
{sentenceStats.bins.map((count, i) => {
|
|
||||||
const wordCount = i + 1
|
|
||||||
const isTarget = wordCount >= 11 && wordCount <= 16
|
|
||||||
const barH = count === 0 ? 0 : Math.max(2, Math.round((count / maxBin) * CHART_H))
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={`toolbar-stats-bar${isTarget ? ' target' : ''}`}
|
|
||||||
style={{ height: barH }}
|
|
||||||
title={`${wordCount === 31 ? '31+' : wordCount}w: ${count} sentence${count !== 1 ? 's' : ''}`}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-stats-axis">
|
|
||||||
<span>1</span>
|
|
||||||
<span>8</span>
|
|
||||||
<span className="toolbar-stats-axis-target">11–16 ●</span>
|
|
||||||
<span>22</span>
|
|
||||||
<span>31+</span>
|
|
||||||
</div>
|
|
||||||
{sentenceStats.outliers.length > 0 && (
|
|
||||||
<div className="toolbar-stats-outliers">
|
|
||||||
<div className="toolbar-stats-outliers-title">
|
|
||||||
Flagged (≤4 or ≥26 words)
|
|
||||||
</div>
|
|
||||||
<div className="toolbar-stats-outliers-list">
|
|
||||||
{sentenceStats.outliers.slice(0, 8).map((o, i) => (
|
|
||||||
<div key={i} className="toolbar-stats-outlier">
|
|
||||||
<span className="toolbar-stats-outlier-wc">{o.wordCount}w</span>
|
|
||||||
<span className={`toolbar-stats-outlier-text${o.wordCount <= 4 ? ' short' : ' long'}`}>
|
|
||||||
{o.text.length > 55 ? o.text.slice(0, 55) + '…' : o.text}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
{sentenceStats.outliers.length > 8 && (
|
|
||||||
<div className="toolbar-stats-outlier-more">
|
|
||||||
+{sentenceStats.outliers.length - 8} more
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})(),
|
|
||||||
document.body
|
|
||||||
)}
|
|
||||||
{activeFilePath && (
|
{activeFilePath && (
|
||||||
<span
|
<span
|
||||||
className="toolbar-wordcount"
|
className="toolbar-wordcount"
|
||||||
|
|||||||
Reference in New Issue
Block a user