PyPI - lyrics-transcriber - Versions diffs - 0.45.0__py3-none-any.whl → 0.47.0__py3-none-any.whl - Mend

lyrics-transcriber 0.45.0py3-none-any.whl → 0.47.0py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

lyrics_transcriber/frontend/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lyrics Transcriber Analyzer</title>
-    <script type="module" crossorigin src="/assets/index-ZCT0s9MG.js"></script>
+    <script type="module" crossorigin src="/assets/index-2vK-qVJS.js"></script>
   </head>
   <body>
     <div id="root"></div>

lyrics_transcriber/frontend/package.json CHANGED Viewed

@@ -38,5 +38,5 @@
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.7.0"
 }

lyrics_transcriber/frontend/src/components/EditModal.tsx CHANGED Viewed

@@ -185,15 +185,15 @@ export default function EditModal({
     isGlobal = false,
     isLoading = false
 }: EditModalProps) {
-    console.log('EditModal - Render', {
-        open,
-        isGlobal,
-        isLoading,
-        hasSegment: !!segment,
-        segmentIndex,
-        hasOriginalSegment: !!originalSegment,
-        hasOriginalTranscribedSegment: !!originalTranscribedSegment
-    });
+    // console.log('EditModal - Render', {
+    //     open,
+    //     isGlobal,
+    //     isLoading,
+    //     hasSegment: !!segment,
+    //     segmentIndex,
+    //     hasOriginalSegment: !!originalSegment,
+    //     hasOriginalTranscribedSegment: !!originalTranscribedSegment
+    // });
     const [editedSegment, setEditedSegment] = useState<LyricsSegment | null>(segment)
     const [isPlaying, setIsPlaying] = useState(false)
@@ -233,7 +233,7 @@ export default function EditModal({
     })
     const handleClose = useCallback(() => {
-        console.log('EditModal - handleClose called');
+        // console.log('EditModal - handleClose called');
         cleanupManualSync()
         onClose()
     }, [onClose, cleanupManualSync])
@@ -243,12 +243,12 @@ export default function EditModal({
         const spacebarHandler = handleSpacebar // Capture the current handler
         if (open) {
-            console.log('EditModal - Setting up modal spacebar handler', {
-                hasPlaySegment: !!onPlaySegment,
-                editedSegmentId: editedSegment?.id,
-                handlerFunction: spacebarHandler.toString().slice(0, 100),
-                isLoading
-            })
+            // console.log('EditModal - Setting up modal spacebar handler', {
+            //     hasPlaySegment: !!onPlaySegment,
+            //     editedSegmentId: editedSegment?.id,
+            //     handlerFunction: spacebarHandler.toString().slice(0, 100),
+            //     isLoading
+            // })
             // Create a function that will be called by the global event listeners
             const handleKeyEvent = (e: KeyboardEvent) => {
@@ -262,7 +262,7 @@ export default function EditModal({
             // Only cleanup when the effect is re-run or the modal is closed
             return () => {
                 if (!open) {
-                    console.log('EditModal - Cleanup: clearing modal spacebar handler')
+                    // console.log('EditModal - Cleanup: clearing modal spacebar handler')
                     setModalSpacebarHandler(undefined)
                 }
             }
@@ -289,11 +289,11 @@ export default function EditModal({
     // All useEffect hooks
     useEffect(() => {
-        console.log('EditModal - segment changed', {
-            hasSegment: !!segment,
-            segmentId: segment?.id,
-            wordCount: segment?.words.length
-        });
+        // console.log('EditModal - segment changed', {
+        //     hasSegment: !!segment,
+        //     segmentId: segment?.id,
+        //     wordCount: segment?.words.length
+        // });
         setEditedSegment(segment)
     }, [segment])
@@ -304,7 +304,7 @@ export default function EditModal({
         const endTime = editedSegment.end_time ?? 0
         if (window.isAudioPlaying && currentTime > endTime) {
-            console.log('Stopping playback: current time exceeded end time')
+            // console.log('Stopping playback: current time exceeded end time')
             window.toggleAudioPlayback?.()
             cleanupManualSync()
         }
@@ -519,7 +519,7 @@ export default function EditModal({
     // Memoize the dialog title to prevent re-renders
     const dialogTitle = useMemo(() => {
-        console.log('EditModal - Rendering dialog title', { isLoading, isGlobal });
+        // console.log('EditModal - Rendering dialog title', { isLoading, isGlobal });
         if (isLoading) {
             return (
@@ -563,24 +563,24 @@ export default function EditModal({
     // Early return after all hooks and function definitions
     if (!isLoading && (!segment || !editedSegment || !originalSegment)) {
-        console.log('EditModal - Early return: missing required data', {
-            hasSegment: !!segment,
-            hasEditedSegment: !!editedSegment,
-            hasOriginalSegment: !!originalSegment,
-            isLoading
-        });
+        // console.log('EditModal - Early return: missing required data', {
+        //     hasSegment: !!segment,
+        //     hasEditedSegment: !!editedSegment,
+        //     hasOriginalSegment: !!originalSegment,
+        //     isLoading
+        // });
         return null;
     }
     if (!isLoading && !isGlobal && segmentIndex === null) {
-        console.log('EditModal - Early return: non-global mode with null segmentIndex');
+        // console.log('EditModal - Early return: non-global mode with null segmentIndex');
         return null;
     }
-    console.log('EditModal - Rendering dialog content', {
-        isLoading,
-        hasEditedSegment: !!editedSegment,
-        hasOriginalSegment: !!originalSegment
-    });
+    // console.log('EditModal - Rendering dialog content', {
+    //     isLoading,
+    //     hasEditedSegment: !!editedSegment,
+    //     hasOriginalSegment: !!originalSegment
+    // });
     return (
         <Dialog

lyrics_transcriber/frontend/src/components/EditWordList.tsx CHANGED Viewed

@@ -33,7 +33,8 @@ const WordRow = memo(function WordRow({
     onWordUpdate,
     onSplitWord,
     onRemoveWord,
-    wordsLength
+    wordsLength,
+    onTabNavigation
 }: {
     word: Word
     index: number
@@ -41,7 +42,17 @@ const WordRow = memo(function WordRow({
     onSplitWord: (index: number) => void
     onRemoveWord: (index: number) => void
     wordsLength: number
+    onTabNavigation: (currentIndex: number) => void
 }) {
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        // console.log('KeyDown event:', e.key, 'Shift:', e.shiftKey, 'Index:', index);
+        if (e.key === 'Tab' && !e.shiftKey) {
+            // console.log('Tab key detected, preventing default and navigating');
+            e.preventDefault();
+            onTabNavigation(index);
+        }
+    };
     return (
         <Box sx={{
             display: 'flex',
@@ -53,8 +64,10 @@ const WordRow = memo(function WordRow({
                 label={`Word ${index}`}
                 value={word.text}
                 onChange={(e) => onWordUpdate(index, { text: e.target.value })}
+                onKeyDown={handleKeyDown}
                 fullWidth
                 size="small"
+                id={`word-text-${index}`}
             />
             <TextField
                 label="Start Time"
@@ -108,7 +121,8 @@ const WordItem = memo(function WordItem({
     onAddSegment,
     onMergeSegment,
     wordsLength,
-    isGlobal
+    isGlobal,
+    onTabNavigation
 }: {
     word: Word
     index: number
@@ -122,6 +136,7 @@ const WordItem = memo(function WordItem({
     onMergeSegment?: (mergeWithNext: boolean) => void
     wordsLength: number
     isGlobal: boolean
+    onTabNavigation: (currentIndex: number) => void
 }) {
     return (
         <Box key={word.id}>
@@ -132,6 +147,7 @@ const WordItem = memo(function WordItem({
                 onSplitWord={onSplitWord}
                 onRemoveWord={onRemoveWord}
                 wordsLength={wordsLength}
+                onTabNavigation={onTabNavigation}
             />
             {/* Word divider with merge/split functionality */}
@@ -210,6 +226,60 @@ export default function EditWordList({
         setPage(value);
     };
+    // Handle tab navigation between word text fields
+    const handleTabNavigation = (currentIndex: number) => {
+        // console.log('handleTabNavigation called with index:', currentIndex);
+        const nextIndex = (currentIndex + 1) % words.length;
+        // console.log('Next index calculated:', nextIndex, 'Total words:', words.length);
+        // If the next word is on a different page, change the page
+        if (isGlobal && (nextIndex < startIndex || nextIndex >= endIndex)) {
+            // console.log('Next word is on different page. Current page:', page, 'startIndex:', startIndex, 'endIndex:', endIndex);
+            const nextPage = Math.floor(nextIndex / pageSize) + 1;
+            // console.log('Changing to page:', nextPage);
+            setPage(nextPage);
+            // Use setTimeout to allow the page change to render before focusing
+            setTimeout(() => {
+                // console.log('Timeout callback executing, trying to focus element with ID:', `word-text-${nextIndex}`);
+                focusWordTextField(nextIndex);
+            }, 50);
+        } else {
+            // console.log('Next word is on same page, trying to focus element with ID:', `word-text-${nextIndex}`);
+            focusWordTextField(nextIndex);
+        }
+    };
+    // Helper function to focus a word text field by index
+    const focusWordTextField = (index: number) => {
+        // Material-UI TextField uses a more complex structure
+        // The actual input is inside the TextField component
+        const element = document.getElementById(`word-text-${index}`);
+        // console.log('Element found:', !!element);
+        if (element) {
+            // Try different selectors to find the input element
+            // First try the standard input selector
+            let input = element.querySelector('input');
+            // If that doesn't work, try the MUI-specific selector
+            if (!input) {
+                input = element.querySelector('.MuiInputBase-input');
+            }
+            // console.log('Input element found:', !!input);
+            if (input) {
+                input.focus();
+                input.select();
+                // console.log('Focus and select called on input');
+            } else {
+                // As a fallback, try to focus the TextField itself
+                // console.log('Trying to focus the TextField itself');
+                element.focus();
+            }
+        }
+    };
     return (
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, flexGrow: 1, minHeight: 0 }}>
             {/* Initial divider with Add Segment Before button */}
@@ -265,6 +335,7 @@ export default function EditWordList({
                             onMergeSegment={onMergeSegment}
                             wordsLength={words.length}
                             isGlobal={isGlobal}
+                            onTabNavigation={handleTabNavigation}
                         />
                     );
                 })}

lyrics_transcriber/frontend/src/components/Header.tsx CHANGED Viewed

@@ -1,14 +1,12 @@
 import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, Paper } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
-import TextSnippetIcon from '@mui/icons-material/TextSnippet'
 import FindReplaceIcon from '@mui/icons-material/FindReplace'
 import EditIcon from '@mui/icons-material/Edit'
-import { CorrectionData } from '../types'
+import { CorrectionData, InteractionMode } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import ModeSelector from './ModeSelector'
 import AudioPlayer from './AudioPlayer'
-import { InteractionMode } from '../types'
 import { ApiClient } from '../api'
 import { findWordById } from './shared/utils/wordUtils'
@@ -29,7 +27,6 @@ interface HeaderProps {
     onHandlerToggle: (handler: string, enabled: boolean) => void
     isUpdatingHandlers: boolean
     onHandlerClick?: (handler: string) => void
-    onAddLyrics?: () => void
     onFindReplace?: () => void
     onEditAll?: () => void
 }
@@ -47,7 +44,6 @@ export default function Header({
     onHandlerToggle,
     isUpdatingHandlers,
     onHandlerClick,
-    onAddLyrics,
     onFindReplace,
     onEditAll,
 }: HeaderProps) {
@@ -271,17 +267,6 @@ export default function Header({
                             audioHash={audioHash}
                         />
                     </Box>
-                    {!isReadOnly && apiClient && onAddLyrics && (
-                        <Button
-                            variant="outlined"
-                            size="small"
-                            onClick={onAddLyrics}
-                            startIcon={<TextSnippetIcon />}
-                            sx={{ minWidth: 'fit-content', height: '32px' }}
-                        >
-                            Add Reference Lyrics
-                        </Button>
-                    )}
                 </Box>
             </Paper>
         </>

lyrics_transcriber/frontend/src/components/LyricsAnalyzer.tsx CHANGED Viewed

@@ -22,7 +22,8 @@ import {
     deleteSegment,
     updateSegment,
     mergeSegment,
-    findAndReplace
+    findAndReplace,
+    deleteWord
 } from './shared/utils/segmentOperations'
 import { loadSavedData, saveData, clearSavedData } from './shared/utils/localStorage'
 import { setupKeyboardHandlers, setModalHandler, getModalState } from './shared/utils/keyboardHandlers'
@@ -124,6 +125,7 @@ interface MemoizedReferenceViewProps {
     onSourceChange: (source: string) => void
     corrected_segments: LyricsSegment[]
     corrections: WordCorrection[]
+    onAddLyrics?: () => void
 }
 // Create a memoized ReferenceView component
@@ -139,7 +141,8 @@ const MemoizedReferenceView = memo(function MemoizedReferenceView({
     currentSource,
     onSourceChange,
     corrected_segments,
-    corrections
+    corrections,
+    onAddLyrics
 }: MemoizedReferenceViewProps) {
     return (
         <ReferenceView
@@ -155,6 +158,7 @@ const MemoizedReferenceView = memo(function MemoizedReferenceView({
             onSourceChange={onSourceChange}
             corrected_segments={corrected_segments}
             corrections={corrections}
+            onAddLyrics={onAddLyrics}
         />
     );
 });
@@ -195,7 +199,6 @@ const MemoizedHeader = memo(function MemoizedHeader({
     onHandlerToggle,
     isUpdatingHandlers,
     onHandlerClick,
-    onAddLyrics,
     onFindReplace,
     onEditAll
 }: MemoizedHeaderProps) {
@@ -213,7 +216,6 @@ const MemoizedHeader = memo(function MemoizedHeader({
             onHandlerToggle={onHandlerToggle}
             isUpdatingHandlers={isUpdatingHandlers}
             onHandlerClick={onHandlerClick}
-            onAddLyrics={onAddLyrics}
             onFindReplace={onFindReplace}
             onEditAll={onEditAll}
         />
@@ -236,6 +238,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     const [originalData] = useState(() => JSON.parse(JSON.stringify(initialData)))
     const [interactionMode, setInteractionMode] = useState<InteractionMode>('edit')
     const [isShiftPressed, setIsShiftPressed] = useState(false)
+    const [isCtrlPressed, setIsCtrlPressed] = useState(false)
     const [editModalSegment, setEditModalSegment] = useState<{
         segment: LyricsSegment
         index: number
@@ -301,8 +304,9 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             })
         }
-        const { handleKeyDown, handleKeyUp } = setupKeyboardHandlers({
+        const { handleKeyDown, handleKeyUp, cleanup } = setupKeyboardHandlers({
             setIsShiftPressed,
+            setIsCtrlPressed
         })
         // Always add keyboard listeners
@@ -315,6 +319,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
         // Reset modifier states when a modal opens
         if (isAnyModalOpen) {
             setIsShiftPressed(false)
+            setIsCtrlPressed(false)
         }
         // Cleanup function
@@ -325,8 +330,10 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             window.removeEventListener('keydown', handleKeyDown)
             window.removeEventListener('keyup', handleKeyUp)
             document.body.style.userSelect = ''
+            // Call the cleanup function to remove window blur/focus listeners
+            cleanup()
         }
-    }, [setIsShiftPressed, isAnyModalOpen])
+    }, [setIsShiftPressed, setIsCtrlPressed, isAnyModalOpen])
     // Update modal state tracking
     useEffect(() => {
@@ -342,7 +349,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
     }, [modalContent, editModalSegment, isReviewModalOpen, isAddLyricsModalOpen, isFindReplaceModalOpen, isEditAllModalOpen])
     // Calculate effective mode based on modifier key states
-    const effectiveMode = isShiftPressed ? 'highlight' : interactionMode
+    const effectiveMode = isCtrlPressed ? 'delete_word' : (isShiftPressed ? 'highlight' : interactionMode)
     const handleFlash = useCallback((type: FlashType, info?: HighlightInfo) => {
         setFlashingType(null)
@@ -367,6 +374,16 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
             console.log('LyricsAnalyzer handleWordClick:', { info });
         }
+        if (effectiveMode === 'delete_word') {
+            // Use the shared deleteWord utility function
+            const newData = deleteWord(data, info.word_id);
+            setData(newData);
+            // Flash to indicate the word was deleted
+            handleFlash('word');
+            return;
+        }
         if (effectiveMode === 'highlight') {
             // Find if this word is part of a correction
             const correction = data.corrections?.find(c =>
@@ -491,7 +508,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                 });
             }
         }
-    }, [data, effectiveMode, setModalContent]);
+    }, [data, effectiveMode, setModalContent, handleFlash, deleteWord]);
     const handleUpdateSegment = useCallback((updatedSegment: LyricsSegment) => {
         if (!editModalSegment) return
@@ -948,6 +965,7 @@ export default function LyricsAnalyzer({ data: initialData, onFileLoad, apiClien
                         onSourceChange={setCurrentSource}
                         corrected_segments={data.corrected_segments}
                         corrections={data.corrections}
+                        onAddLyrics={() => setIsAddLyricsModalOpen(true)}
                     />
                 </Grid>
             </Grid>

lyrics_transcriber/frontend/src/components/ModeSelector.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
-import { ToggleButton, ToggleButtonGroup, Box, Typography } from '@mui/material';
+import { ToggleButton, ToggleButtonGroup, Box, Typography, Tooltip } from '@mui/material';
 import HighlightIcon from '@mui/icons-material/Highlight';
 import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { InteractionMode } from '../types';
 interface ModeSelectorProps {
@@ -17,7 +18,7 @@ export default function ModeSelector({ effectiveMode, onChange }: ModeSelectorPr
             <ToggleButtonGroup
                 value={effectiveMode}
                 exclusive
-                onChange={(_, newMode) => newMode && onChange(newMode)}
+                onChange={(_, newMode) => newMode === 'edit' && onChange(newMode)}
                 size="small"
                 sx={{
                     height: '32px',
@@ -28,20 +29,38 @@ export default function ModeSelector({ effectiveMode, onChange }: ModeSelectorPr
                     }
                 }}
             >
-                <ToggleButton
-                    value="edit"
-                    title="Click to edit segments and make corrections in the transcription view"
-                >
-                    <EditIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
-                    Edit
-                </ToggleButton>
-                <ToggleButton
-                    value="highlight"
-                    title="Click words in the transcription view to highlight the matching anchor sequence in the reference lyrics. You can also hold SHIFT to temporarily activate this mode."
-                >
-                    <HighlightIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
-                    Highlight
-                </ToggleButton>
+                <Tooltip title="Default mode; click words to edit that lyrics segment">
+                    <ToggleButton
+                        value="edit"
+                    >
+                        <EditIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                        Edit
+                    </ToggleButton>
+                </Tooltip>
+                <Tooltip title="Hold SHIFT and click words to highlight the matching anchor sequence in the reference lyrics">
+                    <span>
+                        <ToggleButton
+                            value="highlight"
+                            disabled
+                        >
+                            <HighlightIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                            Highlight
+                        </ToggleButton>
+                    </span>
+                </Tooltip>
+                <Tooltip title="Hold CTRL and click words to delete them">
+                    <span>
+                        <ToggleButton
+                            value="delete_word"
+                            disabled
+                        >
+                            <DeleteIcon sx={{ mr: 0.5, fontSize: '1rem' }} />
+                            Delete
+                        </ToggleButton>
+                    </span>
+                </Tooltip>
             </ToggleButtonGroup>
         </Box>
     );

lyrics_transcriber/frontend/src/components/ReferenceView.tsx CHANGED Viewed

@@ -34,7 +34,8 @@ export default function ReferenceView({
     highlightInfo,
     mode,
     gaps,
-    corrections
+    corrections,
+    onAddLyrics
 }: ReferenceViewProps) {
     // Get available sources from referenceSources object
     const availableSources = useMemo(() =>
@@ -183,6 +184,7 @@ export default function ReferenceView({
                     availableSources={availableSources}
                     currentSource={effectiveCurrentSource}
                     onSourceChange={onSourceChange}
+                    onAddLyrics={onAddLyrics}
                 />
             </Box>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>

lyrics_transcriber/frontend/src/components/shared/components/HighlightedText.tsx CHANGED Viewed

@@ -181,7 +181,8 @@ export function HighlightedText({
                             return correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,
-                                confidence: correction.confidence
+                                confidence: correction.confidence,
+                                source: correction.source
                             } : null;
                         })()}
                     />
@@ -219,7 +220,8 @@ export function HighlightedText({
                             const correctionInfo = correction ? {
                                 originalWord: correction.original_word,
                                 handler: correction.handler,
-                                confidence: correction.confidence
+                                confidence: correction.confidence,
+                                source: correction.source
                             } : null;
                             return (

lyrics_transcriber/frontend/src/components/shared/components/SourceSelector.tsx CHANGED Viewed

@@ -1,21 +1,23 @@
 import { Box, Button } from '@mui/material'
+import AddIcon from '@mui/icons-material/Add'
 export interface SourceSelectorProps {
     currentSource: string
     onSourceChange: (source: string) => void
     availableSources: string[]
+    onAddLyrics?: () => void
 }
-export function SourceSelector({ currentSource, onSourceChange, availableSources }: SourceSelectorProps) {
+export function SourceSelector({ currentSource, onSourceChange, availableSources, onAddLyrics }: SourceSelectorProps) {
     return (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3 }}>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.3, alignItems: 'center' }}>
             {availableSources.map((source) => (
                 <Button
                     key={source}
                     size="small"
                     variant={currentSource === source ? 'contained' : 'outlined'}
                     onClick={() => onSourceChange(source)}
-                    sx={{
+                    sx={{
                         mr: 0,
                         py: 0.2,
                         px: 0.8,
@@ -28,6 +30,27 @@ export function SourceSelector({ currentSource, onSourceChange, availableSources
                     {source.charAt(0).toUpperCase() + source.slice(1)}
                 </Button>
             ))}
+            {onAddLyrics && (
+                <Button
+                    size="small"
+                    variant="outlined"
+                    onClick={onAddLyrics}
+                    startIcon={<AddIcon sx={{ fontSize: '0.9rem' }} />}
+                    sx={{
+                        mr: 0,
+                        py: 0.2,
+                        px: 0.8,
+                        minWidth: 'auto',
+                        fontSize: '0.7rem',
+                        lineHeight: 1.2,
+                        '& .MuiButton-startIcon': {
+                            marginLeft: '-5px',
+                            marginRight: '1px',
+                            marginTop: '-1px'
+                        }
+                    }}
+                >New</Button>
+            )}
         </Box>
     )
 }

lyrics_transcriber/frontend/src/components/shared/components/Word.tsx CHANGED Viewed

@@ -61,7 +61,8 @@ export const WordComponent = React.memo(function Word({
         const tooltipContent = (
             <>
                 <strong>Original:</strong> "{correction.originalWord}"<br />
-                <strong>Corrected by:</strong> {correction.handler}
+                <strong>Corrected by:</strong> {correction.handler}<br />
+                <strong>Source:</strong> {correction.source}
             </>
         )

lyrics_transcriber/frontend/src/components/shared/hooks/useWordClick.ts CHANGED Viewed

@@ -97,7 +97,7 @@ export function useWordClick({
             }
         }
-        if (mode === 'highlight' || mode === 'edit') {
+        if (mode === 'highlight' || mode === 'edit' || mode === 'delete_word') {
             if (belongsToAnchor && anchor) {
                 onWordClick?.({
                     word_id: wordId,
@@ -131,7 +131,8 @@ export function useWordClick({
                     gap: undefined
                 })
             }
-        } else if (mode === 'details') {
+        } else {
+            // This is a fallback for any future modes
             if (belongsToAnchor && anchor) {
                 onElementClick({
                     type: 'anchor',

lyrics-transcriber 0.45.0__py3-none-any.whl → 0.47.0__py3-none-any.whl

lyrics-transcriber 0.45.0py3-none-any.whl → 0.47.0py3-none-any.whl