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

lyrics_transcriber/frontend/src/components/Header.tsx

@@ -1,6 +1,9 @@
-import { Box, Button, Typography, useMediaQuery, useTheme, Switch, FormControlLabel, Tooltip, CircularProgress } from '@mui/material'
+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 TimerIcon from '@mui/icons-material/Timer'
 import { CorrectionData } from '../types'
 import CorrectionMetrics from './CorrectionMetrics'
 import ModeSelector from './ModeSelector'
@@ -26,6 +29,9 @@ interface HeaderProps {
     onHandlerToggle: (handler: string, enabled: boolean) => void
     isUpdatingHandlers: boolean
     onHandlerClick?: (handler: string) => void
+    onAddLyrics?: () => void
+    onFindReplace?: () => void
+    onEditSync?: () => void
 }
 
 export default function Header({
@@ -40,7 +46,10 @@ export default function Header({
     onTimeUpdate,
     onHandlerToggle,
     isUpdatingHandlers,
-    onHandlerClick
+    onHandlerClick,
+    onAddLyrics,
+    onFindReplace,
+    onEditSync
 }: HeaderProps) {
     const theme = useTheme()
     const isMobile = useMediaQuery(theme.breakpoints.down('md'))
@@ -89,28 +98,29 @@ export default function Header({
     return (
         <>
             {isReadOnly && (
-                <Box sx={{ display: 'flex', alignItems: 'center', mb: 2, color: 'text.secondary' }}>
-                    <LockIcon sx={{ mr: 1 }} />
-                    <Typography variant="body2">
+                <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.8, color: 'text.secondary' }}>
+                    <LockIcon sx={{ mr: 0.5 }} fontSize="small" />
+                    <Typography variant="body2" sx={{ fontSize: '0.75rem' }}>
                         View Only Mode
                     </Typography>
                 </Box>
             )}
 
-            <Box sx={{
-                display: 'flex',
+            <Box sx={{ 
+                display: 'flex', 
                 flexDirection: isMobile ? 'column' : 'row',
-                gap: 2,
+                gap: 1,
                 justifyContent: 'space-between',
                 alignItems: isMobile ? 'stretch' : 'center',
-                mb: 3
+                mb: 1
             }}>
-                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.75rem' : '2.125rem' }}>
-                    Lyrics Correction Review
+                <Typography variant="h4" sx={{ fontSize: isMobile ? '1.3rem' : '1.5rem' }}>
+                    Nomad Karaoke: Lyrics Transcription Review
                 </Typography>
                 {isReadOnly && (
                     <Button
                         variant="outlined"
+                        size="small"
                         startIcon={<UploadFileIcon />}
                         onClick={onFileLoad}
                         fullWidth={isMobile}
@@ -122,87 +132,74 @@ export default function Header({
 
             <Box sx={{
                 display: 'flex',
-                gap: 2,
-                mb: 3,
-                flexDirection: isMobile ? 'column' : 'row'
+                gap: 1,
+                mb: 1,
+                flexDirection: isMobile ? 'column' : 'row',
+                height: '140px'
             }}>
                 <Box sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 1,
-                    minWidth: '250px',
-                    position: 'relative'
+                    width: '280px',
+                    position: 'relative',
+                    height: '100%'
                 }}>
-                    <Typography variant="subtitle2" color="text.secondary">
-                        Correction Handlers
-                    </Typography>
+                    <Paper sx={{
+                        p: 0.8,
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }}>
+                        <Typography variant="subtitle2" color="text.secondary" sx={{ mb: 0.5, fontSize: '0.7rem' }}>
+                            Correction Handlers
+                        </Typography>
 
-                    {availableHandlers.map(handler => (
-                        <Tooltip
-                            key={handler.id}
-                            title={handler.description}
-                            placement="right"
-                        >
-                            <FormControlLabel
-                                control={
-                                    <Switch
-                                        checked={enabledHandlers.has(handler.id)}
-                                        onChange={(e) => onHandlerToggle(handler.id, e.target.checked)}
-                                        size="small"
-                                        disabled={isUpdatingHandlers}
-                                    />
-                                }
-                                label={`${handler.name} (${handlerCounts[handler.id] || 0})`}
-                                onClick={(e) => {
-                                    if ((e.target as HTMLElement).tagName !== 'INPUT') {
-                                        e.preventDefault();
-                                        e.stopPropagation();
-                                        onHandlerClick?.(handler.id);
-                                    }
-                                }}
-                                sx={{
-                                    ml: 0,
-                                    '& .MuiFormControlLabel-label': {
-                                        fontSize: '0.875rem',
-                                        cursor: 'pointer'
-                                    }
-                                }}
-                            />
-                        </Tooltip>
-                    ))}
-
-                    {isUpdatingHandlers && (
                         <Box sx={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
+                            flex: 1,
+                            overflow: 'auto',
                             display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
-                            borderRadius: 1,
-                            zIndex: 1
+                            flexDirection: 'column'
                         }}>
-                            <Box sx={{
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                padding: 2,
-                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
-                                borderRadius: 1,
-                                boxShadow: 1
-                            }}>
-                                <CircularProgress size={24} />
-                                <Typography variant="body2" color="text.secondary">
-                                    Updating corrections...
-                                </Typography>
-                            </Box>
+                            {availableHandlers.map(handler => (
+                                <Box key={handler.id} sx={{ mb: 0.5 }}>
+                                    <Tooltip
+                                        title={handler.description}
+                                        placement="right"
+                                    >
+                                        <FormControlLabel
+                                            control={
+                                                <Switch
+                                                    checked={enabledHandlers.has(handler.id)}
+                                                    onChange={(e) => onHandlerToggle(handler.id, e.target.checked)}
+                                                    size="small"
+                                                    disabled={isUpdatingHandlers}
+                                                />
+                                            }
+                                            label={`${handler.name} (${handlerCounts[handler.id] || 0})`}
+                                            onClick={(e) => {
+                                                if ((e.target as HTMLElement).tagName !== 'INPUT') {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    onHandlerClick?.(handler.id);
+                                                }
+                                            }}
+                                            sx={{
+                                                ml: 0,
+                                                py: 0,
+                                                my: 0,
+                                                minHeight: '24px',
+                                                '& .MuiFormControlLabel-label': {
+                                                    fontSize: '0.7rem',
+                                                    cursor: 'pointer',
+                                                    lineHeight: 1.2
+                                                }
+                                            }}
+                                        />
+                                    </Tooltip>
+                                </Box>
+                            ))}
                         </Box>
-                    )}
+                    </Paper>
                 </Box>
-                <Box sx={{ flexGrow: 1 }}>
+                <Box sx={{ flex: 1, height: '100%' }}>
                     <CorrectionMetrics
                         // Anchor metrics
                         anchorCount={data.metadata.anchor_sequences_count}
@@ -226,24 +223,67 @@ export default function Header({
                 </Box>
             </Box>
 
-            <Box sx={{
-                display: 'flex',
-                flexDirection: isMobile ? 'column' : 'row',
-                gap: 5,
-                alignItems: 'flex-start',
-                justifyContent: 'flex-start',
-                mb: 3
-            }}>
-                <ModeSelector
-                    effectiveMode={effectiveMode}
-                    onChange={onModeChange}
-                />
-                <AudioPlayer
-                    apiClient={apiClient}
-                    onTimeUpdate={onTimeUpdate}
-                    audioHash={audioHash}
-                />
-            </Box>
+            <Paper sx={{ p: 0.8, mb: 1 }}>
+                <Box sx={{ 
+                    display: 'flex', 
+                    flexDirection: isMobile ? 'column' : 'row',
+                    gap: 1,
+                    alignItems: isMobile ? 'flex-start' : 'center',
+                    justifyContent: 'space-between',
+                    width: '100%'
+                }}>
+                    <Box sx={{
+                        display: 'flex',
+                        gap: 1,
+                        flexDirection: isMobile ? 'column' : 'row',
+                        alignItems: isMobile ? 'flex-start' : 'center',
+                        height: '32px'
+                    }}>
+                        <ModeSelector
+                            effectiveMode={effectiveMode}
+                            onChange={onModeChange}
+                        />
+                        {!isReadOnly && (
+                            <Button
+                                variant="outlined"
+                                size="small"
+                                onClick={onFindReplace}
+                                startIcon={<FindReplaceIcon />}
+                                sx={{ minWidth: 'fit-content', height: '32px' }}
+                            >
+                                Find/Replace
+                            </Button>
+                        )}
+                        {!isReadOnly && onEditSync && (
+                            <Button
+                                variant="outlined"
+                                size="small"
+                                onClick={onEditSync}
+                                startIcon={<TimerIcon />}
+                                sx={{ minWidth: 'fit-content', height: '32px' }}
+                            >
+                                Edit Sync
+                            </Button>
+                        )}
+                        <AudioPlayer
+                            apiClient={apiClient}
+                            onTimeUpdate={onTimeUpdate}
+                            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>
         </>
     )
 }