lyrics-transcriber 0.43.0__py3-none-any.whl → 0.44.0__py3-none-any.whl

lyrics_transcriber/frontend/src/components/GlobalSyncEditor.tsx

@@ -0,0 +1,675 @@
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    IconButton,
+    Box,
+    Button,
+    Typography,
+    Slider,
+    ButtonGroup
+} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline'
+import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import CancelIcon from '@mui/icons-material/Cancel'
+import ZoomInIcon from '@mui/icons-material/ZoomIn'
+import ZoomOutIcon from '@mui/icons-material/ZoomOut'
+import { LyricsSegment, Word } from '../types'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import TimelineEditor from './TimelineEditor'
+
+interface GlobalSyncEditorProps {
+    open: boolean
+    onClose: () => void
+    segments: LyricsSegment[]
+    onSave: (updatedSegments: LyricsSegment[]) => void
+    onPlaySegment?: (startTime: number) => void
+    currentTime?: number
+    setModalSpacebarHandler: (handler: (() => (e: KeyboardEvent) => void) | undefined) => void
+}
+
+// Zoom levels in seconds per screen width - more granular at the lower end
+const ZOOM_LEVELS = [5, 10, 15, 20, 30, 45, 60, 90, 120, 180, 300, 600, 1200];
+
+interface FlattenedWord {
+    word: Word;
+    segmentIndex: number;
+    wordIndex: number;
+}
+
+export default function GlobalSyncEditor({
+    open,
+    onClose,
+    segments,
+    onSave,
+    onPlaySegment,
+    currentTime = 0,
+    setModalSpacebarHandler
+}: GlobalSyncEditorProps) {
+    const [editedSegments, setEditedSegments] = useState<LyricsSegment[]>([]);
+    const [allWords, setAllWords] = useState<FlattenedWord[]>([]);
+    const [isManualSyncing, setIsManualSyncing] = useState(false);
+    const [syncWordIndex, setSyncWordIndex] = useState<number>(-1);
+    const [zoomLevel, setZoomLevel] = useState<number>(3); // Default to 20 seconds per screen
+    const [scrollPosition, setScrollPosition] = useState<number>(0);
+    const [songDuration, setSongDuration] = useState<number>(0);
+    const [visibleTimeRange, setVisibleTimeRange] = useState<{start: number, end: number}>({start: 0, end: 20});
+    const [isPlaying, setIsPlaying] = useState(false);
+    const timelineContainerRef = useRef<HTMLDivElement>(null);
+    
+    // Initialize the edited segments and flatten all words when the modal opens
+    useEffect(() => {
+        if (open && segments) {
+            const segmentsCopy = [...segments];
+            setEditedSegments(segmentsCopy);
+            
+            // Create flattened word list with references to original segment and word indices
+            const flattenedWords: FlattenedWord[] = [];
+            segmentsCopy.forEach((segment, segmentIndex) => {
+                segment.words.forEach((word, wordIndex) => {
+                    flattenedWords.push({
+                        word,
+                        segmentIndex,
+                        wordIndex
+                    });
+                });
+            });
+            
+            // Sort words by start time
+            flattenedWords.sort((a, b) => {
+                const aStart = a.word.start_time ?? 0;
+                const bStart = b.word.start_time ?? 0;
+                return aStart - bStart;
+            });
+            
+            setAllWords(flattenedWords);
+            
+            // Calculate song duration
+            const allEndTimes = flattenedWords.map(item => item.word.end_time).filter((t): t is number => t !== null);
+            const duration = allEndTimes.length > 0 ? Math.max(...allEndTimes) + 5 : 60; // Add 5 seconds padding
+            setSongDuration(duration);
+            
+            // Reset scroll position
+            setScrollPosition(0);
+            updateVisibleTimeRange(0, zoomLevel);
+        }
+    }, [open, segments, zoomLevel]);
+    
+    // Update visible time range when scroll position or zoom level changes
+    const updateVisibleTimeRange = useCallback((scrollPos: number, zoom: number) => {
+        const secondsPerScreen = ZOOM_LEVELS[zoom];
+        const start = scrollPos * songDuration / 100;
+        const end = start + secondsPerScreen;
+        setVisibleTimeRange({start, end});
+    }, [songDuration]);
+    
+    // Handle scroll position change
+    const handleScroll = useCallback(() => {
+        if (!timelineContainerRef.current) return;
+        
+        const container = timelineContainerRef.current;
+        const scrollPercentage = (container.scrollLeft / (container.scrollWidth - container.clientWidth)) * 100;
+        setScrollPosition(scrollPercentage);
+        updateVisibleTimeRange(scrollPercentage, zoomLevel);
+    }, [zoomLevel, updateVisibleTimeRange]);
+    
+    // Handle zoom level change
+    const handleZoomChange = useCallback((_event: React.SyntheticEvent | Event, newValue: number | number[]) => {
+        const newZoom = Array.isArray(newValue) ? newValue[0] : newValue;
+        setZoomLevel(newZoom);
+        updateVisibleTimeRange(scrollPosition, newZoom);
+    }, [scrollPosition, updateVisibleTimeRange]);
+    
+    // Handle word update
+    const handleWordUpdate = useCallback((flatWordIndex: number, updates: Partial<Word>) => {
+        if (flatWordIndex < 0 || flatWordIndex >= allWords.length) return;
+        
+        const { segmentIndex, wordIndex } = allWords[flatWordIndex];
+        const newSegments = [...editedSegments];
+        
+        if (segmentIndex < 0 || segmentIndex >= newSegments.length) return;
+        const segment = newSegments[segmentIndex];
+        
+        if (wordIndex < 0 || wordIndex >= segment.words.length) return;
+        
+        // Update the word
+        const newWords = [...segment.words];
+        newWords[wordIndex] = {
+            ...newWords[wordIndex],
+            ...updates
+        };
+        
+        // Update segment start/end times based on words
+        const validStartTimes = newWords.map(w => w.start_time).filter((t): t is number => t !== null);
+        const validEndTimes = newWords.map(w => w.end_time).filter((t): t is number => t !== null);
+        
+        const segmentStartTime = validStartTimes.length > 0 ? Math.min(...validStartTimes) : segment.start_time;
+        const segmentEndTime = validEndTimes.length > 0 ? Math.max(...validEndTimes) : segment.end_time;
+        
+        newSegments[segmentIndex] = {
+            ...segment,
+            words: newWords,
+            start_time: segmentStartTime,
+            end_time: segmentEndTime
+        };
+        
+        setEditedSegments(newSegments);
+        
+        // Update the flattened words array
+        const newAllWords = [...allWords];
+        newAllWords[flatWordIndex] = {
+            ...newAllWords[flatWordIndex],
+            word: {
+                ...newAllWords[flatWordIndex].word,
+                ...updates
+            }
+        };
+        setAllWords(newAllWords);
+    }, [allWords, editedSegments]);
+    
+    // Create a custom manual sync hook for the global timeline
+    const useGlobalManualSync = () => {
+        const [isSpacebarPressed, setIsSpacebarPressed] = useState(false);
+        const wordStartTimeRef = useRef<number | null>(null);
+        const spacebarPressTimeRef = useRef<number | null>(null);
+        const currentTimeRef = useRef(currentTime);
+        
+        // Keep currentTimeRef up to date
+        useEffect(() => {
+            currentTimeRef.current = currentTime;
+        }, [currentTime]);
+        
+        const cleanupManualSync = useCallback(() => {
+            setIsManualSyncing(false);
+            setSyncWordIndex(-1);
+            setIsSpacebarPressed(false);
+            wordStartTimeRef.current = null;
+            spacebarPressTimeRef.current = null;
+        }, []);
+        
+        const startManualSyncFromBeginning = useCallback(() => {
+            if (isManualSyncing) {
+                cleanupManualSync();
+                return;
+            }
+            
+            if (!onPlaySegment || allWords.length === 0) return;
+            
+            setIsManualSyncing(true);
+            setSyncWordIndex(0);
+            setIsSpacebarPressed(false);
+            wordStartTimeRef.current = null;
+            spacebarPressTimeRef.current = null;
+            
+            // Start playing 3 seconds before the first word
+            const firstWordStartTime = allWords[0].word.start_time ?? 0;
+            onPlaySegment(Math.max(0, firstWordStartTime - 3));
+            setIsPlaying(true);
+        }, [isManualSyncing, allWords, onPlaySegment, cleanupManualSync]);
+        
+        const startManualSyncFromCurrent = useCallback(() => {
+            if (isManualSyncing) {
+                cleanupManualSync();
+                return;
+            }
+            
+            if (!onPlaySegment || allWords.length === 0) return;
+            
+            // Find the word closest to the current time
+            const currentT = currentTimeRef.current;
+            let closestIndex = 0;
+            let minDiff = Number.MAX_VALUE;
+            
+            allWords.forEach((item, index) => {
+                const wordStart = item.word.start_time ?? 0;
+                const diff = Math.abs(wordStart - currentT);
+                if (diff < minDiff) {
+                    minDiff = diff;
+                    closestIndex = index;
+                }
+            });
+            
+            setIsManualSyncing(true);
+            setSyncWordIndex(closestIndex);
+            setIsSpacebarPressed(false);
+            wordStartTimeRef.current = null;
+            spacebarPressTimeRef.current = null;
+            
+            // Start playing 3 seconds before the selected word
+            const wordStartTime = allWords[closestIndex].word.start_time ?? 0;
+            onPlaySegment(Math.max(0, wordStartTime - 3));
+            setIsPlaying(true);
+        }, [isManualSyncing, allWords, onPlaySegment, cleanupManualSync, currentTimeRef]);
+        
+        const handleKeyDown = useCallback((e: KeyboardEvent) => {
+            if (e.code !== 'Space') return;
+            
+            console.log('GlobalSyncEditor - Spacebar pressed down', {
+                isManualSyncing,
+                syncWordIndex,
+                currentTime: currentTimeRef.current
+            });
+            
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isManualSyncing && !isSpacebarPressed && syncWordIndex >= 0 && syncWordIndex < allWords.length) {
+                const currentWord = allWords[syncWordIndex];
+                console.log('GlobalSyncEditor - Recording word start time', {
+                    wordIndex: syncWordIndex,
+                    wordText: currentWord.word.text,
+                    time: currentTimeRef.current
+                });
+                
+                setIsSpacebarPressed(true);
+                
+                // Record the start time of the current word
+                wordStartTimeRef.current = currentTimeRef.current;
+                
+                // Record when the spacebar was pressed (for tap detection)
+                spacebarPressTimeRef.current = Date.now();
+                
+                // Update the word's start time immediately
+                handleWordUpdate(syncWordIndex, { start_time: currentTimeRef.current });
+            } else if (!isManualSyncing && onPlaySegment) {
+                // Toggle playback when not in manual sync mode
+                if (window.toggleAudioPlayback) {
+                    window.toggleAudioPlayback();
+                    setIsPlaying(prev => !prev);
+                }
+            }
+        }, [isManualSyncing, syncWordIndex, allWords, isSpacebarPressed, handleWordUpdate, onPlaySegment]);
+        
+        const handleKeyUp = useCallback((e: KeyboardEvent) => {
+            if (e.code !== 'Space') return;
+            
+            console.log('GlobalSyncEditor - Spacebar released', {
+                isManualSyncing,
+                syncWordIndex,
+                currentTime: currentTimeRef.current,
+                wordStartTime: wordStartTimeRef.current
+            });
+            
+            e.preventDefault();
+            e.stopPropagation();
+            
+            if (isManualSyncing && isSpacebarPressed && syncWordIndex >= 0 && syncWordIndex < allWords.length) {
+                const currentWord = allWords[syncWordIndex];
+                const pressDuration = spacebarPressTimeRef.current ? Date.now() - spacebarPressTimeRef.current : 0;
+                const isTap = pressDuration < 200; // If pressed for less than 200ms, consider it a tap
+                
+                console.log('GlobalSyncEditor - Recording word end time', {
+                    wordIndex: syncWordIndex,
+                    wordText: currentWord.word.text,
+                    startTime: wordStartTimeRef.current,
+                    endTime: currentTimeRef.current,
+                    pressDuration: `${pressDuration}ms`,
+                    isTap,
+                    duration: (currentTimeRef.current - (wordStartTimeRef.current || 0)).toFixed(2) + 's'
+                });
+                
+                setIsSpacebarPressed(false);
+                
+                // Set the end time for the current word based on whether it was a tap or hold
+                if (isTap) {
+                    // For a tap, set a default duration of 1 second
+                    const defaultEndTime = (wordStartTimeRef.current || currentTimeRef.current) + 1.0;
+                    handleWordUpdate(syncWordIndex, { end_time: defaultEndTime });
+                } else {
+                    // For a hold, use the current time as the end time
+                    handleWordUpdate(syncWordIndex, { end_time: currentTimeRef.current });
+                }
+                
+                // Move to the next word
+                if (syncWordIndex === allWords.length - 1) {
+                    // If this was the last word, finish manual sync
+                    console.log('GlobalSyncEditor - Completed manual sync for all words');
+                    setIsManualSyncing(false);
+                    setSyncWordIndex(-1);
+                    wordStartTimeRef.current = null;
+                    spacebarPressTimeRef.current = null;
+                } else {
+                    // Otherwise, move to the next word
+                    const nextWord = allWords[syncWordIndex + 1];
+                    console.log('GlobalSyncEditor - Moving to next word', {
+                        nextWordIndex: syncWordIndex + 1,
+                        nextWordText: nextWord.word.text
+                    });
+                    setSyncWordIndex(syncWordIndex + 1);
+                    
+                    // If the next word's start time would overlap with the current word's end time,
+                    // adjust the next word's start time
+                    const currentEndTime = currentWord.word.end_time;
+                    const nextStartTime = nextWord.word.start_time;
+                    
+                    if (currentEndTime !== null && nextStartTime !== null && currentEndTime > nextStartTime) {
+                        handleWordUpdate(syncWordIndex + 1, { start_time: currentEndTime + 0.01 });
+                    }
+                }
+            }
+        }, [isManualSyncing, syncWordIndex, allWords, isSpacebarPressed, handleWordUpdate]);
+        
+        // Combine the key handlers into a single function for external use
+        const handleSpacebar = useCallback((e: KeyboardEvent) => {
+            if (e.type === 'keydown') {
+                handleKeyDown(e);
+            } else if (e.type === 'keyup') {
+                handleKeyUp(e);
+            }
+        }, [handleKeyDown, handleKeyUp]);
+        
+        return {
+            isSpacebarPressed,
+            startManualSyncFromBeginning,
+            startManualSyncFromCurrent,
+            cleanupManualSync,
+            handleSpacebar
+        };
+    };
+    
+    const {
+        isSpacebarPressed,
+        startManualSyncFromBeginning,
+        startManualSyncFromCurrent,
+        cleanupManualSync,
+        handleSpacebar
+    } = useGlobalManualSync();
+    
+    // Update the spacebar handler when modal state changes
+    useEffect(() => {
+        const spacebarHandler = handleSpacebar; // Capture the current handler
+        
+        if (open) {
+            console.log('GlobalSyncEditor - Setting up modal spacebar handler');
+            
+            // Create a function that will be called by the global event listeners
+            const handleKeyEvent = (e: KeyboardEvent) => {
+                if (e.code === 'Space') {
+                    spacebarHandler(e);
+                }
+            };
+            
+            // Wrap the handler function to match the expected signature
+            setModalSpacebarHandler(() => () => handleKeyEvent);
+            
+            // Only cleanup when the effect is re-run or the modal is closed
+            return () => {
+                if (!open) {
+                    console.log('GlobalSyncEditor - Cleanup: clearing modal spacebar handler');
+                    setModalSpacebarHandler(undefined);
+                }
+            };
+        }
+    }, [
+        open,
+        handleSpacebar,
+        setModalSpacebarHandler
+    ]);
+    
+    // Update isPlaying state when currentTime changes
+    useEffect(() => {
+        if (window.isAudioPlaying !== undefined) {
+            setIsPlaying(window.isAudioPlaying);
+        }
+    }, [currentTime]);
+    
+    const handleClose = useCallback(() => {
+        cleanupManualSync();
+        onClose();
+    }, [onClose, cleanupManualSync]);
+    
+    const handleSave = useCallback(() => {
+        onSave(editedSegments);
+        onClose();
+    }, [editedSegments, onSave, onClose]);
+    
+    const handlePlayFromTime = useCallback((time: number) => {
+        if (onPlaySegment) {
+            onPlaySegment(time);
+            setIsPlaying(true);
+        }
+    }, [onPlaySegment]);
+    
+    const handlePlayPause = useCallback(() => {
+        if (window.toggleAudioPlayback) {
+            window.toggleAudioPlayback();
+            setIsPlaying(prev => !prev);
+        }
+    }, []);
+    
+    const handleStop = useCallback(() => {
+        if (window.isAudioPlaying && window.toggleAudioPlayback) {
+            window.toggleAudioPlayback(); // Pause the audio
+            setIsPlaying(false);
+        }
+    }, []);
+    
+    // Scroll to current time
+    const scrollToCurrentTime = useCallback(() => {
+        if (!timelineContainerRef.current) return;
+        
+        const container = timelineContainerRef.current;
+        const totalWidth = container.scrollWidth;
+        const viewportWidth = container.clientWidth;
+        
+        // Calculate the position of the current time as a percentage of the total duration
+        const currentTimePosition = (currentTime / songDuration) * totalWidth;
+        
+        // Calculate the scroll position to center the current time in the viewport
+        const scrollLeft = Math.max(0, currentTimePosition - (viewportWidth / 2));
+        
+        // Smoothly scroll to the position
+        container.scrollTo({
+            left: scrollLeft,
+            behavior: 'smooth'
+        });
+    }, [currentTime, songDuration]);
+    
+    // Early return if no segments
+    if (!segments || segments.length === 0) return null;
+    
+    // Calculate zoom-related values
+    const secondsPerScreen = ZOOM_LEVELS[zoomLevel];
+    const totalWidthPercentage = (songDuration / secondsPerScreen) * 100;
+    
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth="lg"
+            fullWidth
+            PaperProps={{
+                sx: {
+                    height: '80vh',
+                    display: 'flex',
+                    flexDirection: 'column'
+                }
+            }}
+        >
+            <DialogTitle>
+                Edit Sync - All Words
+                <IconButton
+                    aria-label="close"
+                    onClick={handleClose}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        top: 8,
+                        color: (theme) => theme.palette.grey[500],
+                    }}
+                >
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            
+            <DialogContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                {/* Zoom controls */}
+                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <Typography variant="body2">Zoom:</Typography>
+                    <IconButton 
+                        size="small" 
+                        onClick={() => setZoomLevel(Math.max(0, zoomLevel - 1))}
+                        disabled={zoomLevel === 0}
+                    >
+                        <ZoomOutIcon />
+                    </IconButton>
+                    
+                    <Slider
+                        value={zoomLevel}
+                        min={0}
+                        max={ZOOM_LEVELS.length - 1}
+                        step={1}
+                        onChange={handleZoomChange}
+                        marks
+                        sx={{ flexGrow: 1, maxWidth: 300 }}
+                    />
+                    
+                    <IconButton 
+                        size="small" 
+                        onClick={() => setZoomLevel(Math.min(ZOOM_LEVELS.length - 1, zoomLevel + 1))}
+                        disabled={zoomLevel === ZOOM_LEVELS.length - 1}
+                    >
+                        <ZoomInIcon />
+                    </IconButton>
+                    
+                    <Typography variant="body2">
+                        {ZOOM_LEVELS[zoomLevel]} seconds per screen
+                    </Typography>
+                </Box>
+                
+                {/* Playback and manual sync controls */}
+                <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
+                    <ButtonGroup variant="outlined">
+                        <Button
+                            onClick={handlePlayPause}
+                            startIcon={isPlaying ? <PauseCircleOutlineIcon /> : <PlayCircleOutlineIcon />}
+                        >
+                            {isPlaying ? "Pause" : "Play"}
+                        </Button>
+                        <Button
+                            onClick={handleStop}
+                            startIcon={<StopCircleIcon />}
+                            disabled={!isPlaying}
+                        >
+                            Stop
+                        </Button>
+                        <Button
+                            onClick={scrollToCurrentTime}
+                            disabled={!currentTime}
+                        >
+                            Go to Current Time
+                        </Button>
+                    </ButtonGroup>
+                    
+                    <Button
+                        variant={isManualSyncing ? "outlined" : "contained"}
+                        onClick={startManualSyncFromBeginning}
+                        disabled={!onPlaySegment || allWords.length === 0}
+                        startIcon={isManualSyncing ? <CancelIcon /> : <PlayCircleOutlineIcon />}
+                        color={isManualSyncing ? "error" : "primary"}
+                    >
+                        {isManualSyncing ? "Cancel Sync" : "Sync From Start"}
+                    </Button>
+                    
+                    <Button
+                        variant="contained"
+                        onClick={startManualSyncFromCurrent}
+                        disabled={!onPlaySegment || allWords.length === 0 || isManualSyncing}
+                        startIcon={<PlayCircleOutlineIcon />}
+                    >
+                        Sync From Current Time
+                    </Button>
+                </Box>
+                
+                {/* Manual sync status */}
+                {isManualSyncing && syncWordIndex >= 0 && syncWordIndex < allWords.length && (
+                    <Box sx={{ mb: 2 }}>
+                        <Typography variant="body2">
+                            Word {syncWordIndex + 1} of {allWords.length}: <strong>{allWords[syncWordIndex].word.text || ''}</strong>
+                        </Typography>
+                        <Typography variant="caption" color="text.secondary">
+                            {isSpacebarPressed ? 
+                                "Holding spacebar... Release when word ends" : 
+                                "Press spacebar when word starts (tap for short words, hold for long words)"}
+                        </Typography>
+                    </Box>
+                )}
+                
+                {/* Timeline container with horizontal scrolling */}
+                <Box 
+                    ref={timelineContainerRef}
+                    sx={{ 
+                        flexGrow: 1, 
+                        overflowX: 'auto',
+                        overflowY: 'hidden',
+                        position: 'relative',
+                        '&::-webkit-scrollbar': {
+                            height: '10px',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            backgroundColor: 'rgba(0,0,0,0.2)',
+                            borderRadius: '10px',
+                        },
+                    }}
+                    onScroll={handleScroll}
+                >
+                    <Box sx={{ 
+                        width: `${totalWidthPercentage}%`, 
+                        minWidth: '100%',
+                        height: '100%',
+                        position: 'relative',
+                    }}>
+                        {/* Timeline editor */}
+                        <TimelineEditor
+                            words={allWords.map(item => item.word)}
+                            startTime={0}
+                            endTime={songDuration}
+                            onWordUpdate={(index, updates) => handleWordUpdate(index, updates)}
+                            currentTime={currentTime}
+                            onPlaySegment={handlePlayFromTime}
+                            showPlaybackIndicator={false} // Disable the built-in indicator to avoid duplication
+                        />
+                        
+                        {/* Custom current time indicator */}
+                        {currentTime >= 0 && currentTime <= songDuration && (
+                            <Box
+                                sx={{
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: `${(currentTime / songDuration) * 100}%`,
+                                    width: '2px',
+                                    height: '100%',
+                                    backgroundColor: 'error.main',
+                                    zIndex: 10,
+                                }}
+                            />
+                        )}
+                    </Box>
+                </Box>
+                
+                {/* Time range indicator */}
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography variant="body2">
+                        Visible: {visibleTimeRange.start.toFixed(1)}s - {visibleTimeRange.end.toFixed(1)}s
+                    </Typography>
+                    <Typography variant="body2">
+                        Total Duration: {songDuration.toFixed(1)}s
+                    </Typography>
+                </Box>
+                
+                {/* Word count indicator */}
+                <Typography variant="body2" sx={{ mt: 1 }}>
+                    Total Words: {allWords.length}
+                </Typography>
+            </DialogContent>
+            
+            <DialogActions>
+                <Button onClick={handleClose}>Cancel</Button>
+                <Button onClick={handleSave} variant="contained" color="primary">Save</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}