Phase 7~8 구현: 테스트 + 빌드 + CI/CD + SoundEffect + AutoLaunch + UI 리디자인
- vitest 41개 단위 테스트 (HistoryService, DictionaryService, CustomInstructionService, VoiceModeService, D3ROError) - electron-builder.yml (NSIS, asarUnpack, extraResources) - .gitlab-ci.yml (lint, typecheck, test, build, release) - SoundEffectService: WAV 프리로드 + PowerShell 재생 + VoiceMode 연동 - AutoLaunchService: app.setLoginItemSettings + ConfigService 동기화 - TextInsertService: 간이 삽입 검증 (EditMonitor 경량) - 번들링 인프라: SoX 다운로드 스크립트, PyInstaller 빌드, 경로 해상도 유틸 - AudioCaptureService/LocalSTTService: 번들 경로 자동 감지 - 08-design-system.md 기반 MUI 테마 (다크+라이트+auto 테마 시스템) - 전체 UI 컴포넌트 리디자인: AppLayout, Dashboard, StatusBar, History, Dictionary, Commands, Settings - 효과음 WAV 생성: recording-start, recording-stop, error - EPIPE 에러 핸들링 추가
This commit is contained in:
Yun Chan
parent
ed5541f769
commit
3f4d0c5828
40 changed files with 6034 additions and 580 deletions
|
|
@ -1,26 +1,16 @@
|
|||
// src/renderer/pages/CommandsPage.tsx
|
||||
// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
IconButton,
|
||||
Chip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
Card,
|
||||
CardContent
|
||||
Box, Typography, Button, IconButton, Chip,
|
||||
Dialog, DialogTitle, DialogContent, DialogActions,
|
||||
TextField, Card, CardContent
|
||||
} from '@mui/material'
|
||||
import AddIcon from '@mui/icons-material/Add'
|
||||
import DeleteIcon from '@mui/icons-material/Delete'
|
||||
import EditIcon from '@mui/icons-material/Edit'
|
||||
import { d3roPalette } from '../theme'
|
||||
import type { IPCResult } from '@shared/errors'
|
||||
|
||||
interface CustomInstruction {
|
||||
|
|
@ -44,37 +34,21 @@ export function CommandsPage(): React.ReactElement {
|
|||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
const result: IPCResult<CustomInstruction[]> = await window.electronAPI.system
|
||||
.getPlatform()
|
||||
.then(() =>
|
||||
(window as Record<string, unknown>).electronAPI as Record<string, unknown>
|
||||
)
|
||||
.catch(() => null) as unknown as IPCResult<CustomInstruction[]>
|
||||
|
||||
// instruction IPC를 직접 invoke
|
||||
try {
|
||||
const ipcResult = await (window.electronAPI as Record<string, unknown> & {
|
||||
invoke: (channel: string, ...args: unknown[]) => Promise<IPCResult<CustomInstruction[]>>
|
||||
}).invoke?.('instruction:getAll') as unknown as IPCResult<CustomInstruction[]> | undefined
|
||||
|
||||
// fallback: window.electronAPI에 instruction이 아직 없으므로 ipcRenderer 직접 호출
|
||||
const { ipcRenderer } = window as unknown as { ipcRenderer?: { invoke: (ch: string) => Promise<IPCResult<CustomInstruction[]>> } }
|
||||
if (ipcRenderer) {
|
||||
const r = await ipcRenderer.invoke('instruction:getAll')
|
||||
if (r.success) setInstructions(r.data)
|
||||
} else if (ipcResult && ipcResult.success) {
|
||||
if (ipcResult && ipcResult.success) {
|
||||
setInstructions(ipcResult.data)
|
||||
}
|
||||
} catch {
|
||||
// Phase 6에서는 preload에 instruction이 추가되어야 하지만,
|
||||
// 현재 세션에서 빠르게 처리하기 위해 빈 배열로 시작
|
||||
// preload에 instruction API가 없을 수 있음
|
||||
}
|
||||
setLoading(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
const openAdd = () => {
|
||||
setEditId(null)
|
||||
|
|
@ -94,17 +68,20 @@ export function CommandsPage(): React.ReactElement {
|
|||
|
||||
const handleSave = async () => {
|
||||
setDialogOpen(false)
|
||||
// TODO: IPC 호출로 저장
|
||||
loadData()
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600 }}>
|
||||
Custom Commands
|
||||
</Typography>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">
|
||||
<Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||
<Box>
|
||||
<Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Commands</Typography>
|
||||
<Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
|
||||
Custom LLM instructions
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={openAdd}>
|
||||
Add Command
|
||||
</Button>
|
||||
</Box>
|
||||
|
|
@ -113,87 +90,66 @@ export function CommandsPage(): React.ReactElement {
|
|||
<Typography color="text.secondary">Loading...</Typography>
|
||||
) : instructions.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
|
||||
Commands will be available after the service initializes.
|
||||
<CardContent sx={{ py: 6, textAlign: 'center' }}>
|
||||
<Typography color="text.secondary">
|
||||
Built-in commands: Translate, Summarize, Formal Rewrite, Code Explain, Free Prompt.
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<List>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{instructions.map((inst) => (
|
||||
<ListItem
|
||||
key={inst.id}
|
||||
divider
|
||||
secondaryAction={
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<IconButton size="small" onClick={() => openEdit(inst)}>
|
||||
<Card key={inst.id} sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
|
||||
{inst.name}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={inst.isBuiltin ? 'BUILT-IN' : 'CUSTOM'}
|
||||
size="small"
|
||||
color={inst.isBuiltin ? 'secondary' : 'primary'}
|
||||
/>
|
||||
</Box>
|
||||
<Typography sx={{ fontSize: '12px', color: 'text.secondary', mt: 0.5 }}>
|
||||
{inst.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => openEdit(inst)}
|
||||
sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.accent.amber } }}
|
||||
>
|
||||
<EditIcon fontSize="small" />
|
||||
</IconButton>
|
||||
{!inst.isBuiltin && (
|
||||
<IconButton size="small">
|
||||
<IconButton
|
||||
size="small"
|
||||
sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<ListItemText
|
||||
primary={inst.name}
|
||||
secondary={
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{inst.description}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={inst.isBuiltin ? 'Built-in' : 'Custom'}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={inst.isBuiltin ? 'default' : 'primary'}
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Dialog */}
|
||||
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
|
||||
<DialogTitle sx={{ fontWeight: 700 }}>{editId ? 'Edit Command' : 'Add Command'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label="Name"
|
||||
value={formName}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
fullWidth
|
||||
autoFocus
|
||||
sx={{ mt: 1 }}
|
||||
/>
|
||||
<TextField
|
||||
label="Description"
|
||||
value={formDesc}
|
||||
onChange={(e) => setFormDesc(e.target.value)}
|
||||
fullWidth
|
||||
sx={{ mt: 2 }}
|
||||
/>
|
||||
<TextField
|
||||
label="Prompt Template"
|
||||
value={formPrompt}
|
||||
onChange={(e) => setFormPrompt(e.target.value)}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
sx={{ mt: 2 }}
|
||||
helperText="Use {{text}} for the transcribed text"
|
||||
/>
|
||||
<TextField label="Name" value={formName} onChange={(e) => setFormName(e.target.value)} fullWidth autoFocus sx={{ mt: 1 }} />
|
||||
<TextField label="Description" value={formDesc} onChange={(e) => setFormDesc(e.target.value)} fullWidth sx={{ mt: 2 }} />
|
||||
<TextField label="Prompt Template" value={formPrompt} onChange={(e) => setFormPrompt(e.target.value)} fullWidth multiline rows={4} sx={{ mt: 2 }} helperText="Use {{text}} for transcribed text" />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSave} variant="contained" disabled={!formName.trim()}>
|
||||
Save
|
||||
</Button>
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={() => setDialogOpen(false)} color="secondary" variant="contained">Cancel</Button>
|
||||
<Button onClick={handleSave} variant="contained" disabled={!formName.trim()}>Save</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,96 @@
|
|||
// src/renderer/pages/DashboardPage.tsx
|
||||
// 08-design-system.md 3.7 Dashboard 레이아웃.
|
||||
// hero 수치, 카드 그리드, StatusPanel, 태그 시스템.
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Box, Card, CardContent, Typography, Grid } from '@mui/material'
|
||||
import { Box, Card, CardContent, Typography, Chip } from '@mui/material'
|
||||
import MicIcon from '@mui/icons-material/Mic'
|
||||
import TimerIcon from '@mui/icons-material/Timer'
|
||||
import TextFieldsIcon from '@mui/icons-material/TextFields'
|
||||
import TodayIcon from '@mui/icons-material/Today'
|
||||
import WhatshotIcon from '@mui/icons-material/Whatshot'
|
||||
import { d3roPalette, d3roFontMono } from '../theme'
|
||||
import { useTheme } from '@mui/material/styles'
|
||||
import type { StatsSummary } from '@shared/types'
|
||||
|
||||
// ── StatCard 컴포넌트 ────────────────────────────────────
|
||||
|
||||
interface StatCardProps {
|
||||
title: string
|
||||
label: string
|
||||
value: string
|
||||
icon: React.ReactElement
|
||||
tag?: { text: string; color: 'primary' | 'success' | 'warning' | 'error' }
|
||||
}
|
||||
|
||||
function StatCard({ title, value, icon }: StatCardProps): React.ReactElement {
|
||||
function StatCard({ label, value, icon, tag }: StatCardProps): React.ReactElement {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
||||
<Box sx={{ color: 'primary.main' }}>{icon}</Box>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{title}
|
||||
<Card sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
|
||||
{/* Label row */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: d3roPalette.text.label,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
{tag && (
|
||||
<Chip label={tag.text} color={tag.color} size="small" />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Hero value */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
|
||||
<Box sx={{ color: d3roPalette.accent.amber, opacity: 0.8 }}>{icon}</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: '28px',
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.2,
|
||||
color: d3roPalette.text.primary,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="h4">{value}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// ── LED 인디케이터 ───────────────────────────────────────
|
||||
|
||||
function Led({ status }: { status: 'active' | 'warning' | 'error' | 'off' }): React.ReactElement {
|
||||
const colors = {
|
||||
active: { bg: d3roPalette.tag.green, shadow: d3roPalette.tag.green },
|
||||
warning: { bg: d3roPalette.tag.orange, shadow: d3roPalette.tag.orange },
|
||||
error: { bg: d3roPalette.tag.red, shadow: d3roPalette.tag.red },
|
||||
off: { bg: d3roPalette.text.disabled, shadow: 'transparent' },
|
||||
}
|
||||
const c = colors[status]
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
bgcolor: c.bg,
|
||||
boxShadow: status !== 'off' ? `0 0 6px ${c.shadow}, 0 0 12px ${c.shadow}40` : 'none',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// ── 유틸 ─────────────────────────────────────────────────
|
||||
|
||||
function formatTime(ms: number): string {
|
||||
const totalSec = Math.round(ms / 1000)
|
||||
const hours = Math.floor(totalSec / 3600)
|
||||
|
|
@ -39,15 +100,21 @@ function formatTime(ms: number): string {
|
|||
return `${minutes}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// ── DashboardPage ────────────────────────────────────────
|
||||
|
||||
export function DashboardPage(): React.ReactElement {
|
||||
const [stats, setStats] = useState<StatsSummary | null>(null)
|
||||
const [ollamaConnected, setOllamaConnected] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
window.electronAPI.stats.getSummary().then((result) => {
|
||||
if (result.success) setStats(result.data)
|
||||
})
|
||||
|
||||
// 30초마다 갱신
|
||||
window.electronAPI.llm.getStatus().then((result) => {
|
||||
if (result.success) setOllamaConnected(result.data.connectionState === 'connected')
|
||||
})
|
||||
|
||||
const interval = setInterval(() => {
|
||||
window.electronAPI.stats.getSummary().then((result) => {
|
||||
if (result.success) setStats(result.data)
|
||||
|
|
@ -58,73 +125,138 @@ export function DashboardPage(): React.ReactElement {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ mb: 3, fontWeight: 600 }}>
|
||||
Dashboard
|
||||
<Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '22px',
|
||||
fontWeight: 700,
|
||||
color: d3roPalette.text.primary,
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
color: d3roPalette.text.secondary,
|
||||
mt: 0.5,
|
||||
}}
|
||||
>
|
||||
Voice assistant overview
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Status Panel (서비스 상태) */}
|
||||
<Card sx={{ mb: 3, p: 0 }}>
|
||||
<CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led status="active" />
|
||||
<Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
|
||||
STT Ready
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led status={ollamaConnected ? 'active' : 'warning'} />
|
||||
<Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
|
||||
{ollamaConnected ? 'Ollama Connected' : 'Ollama Offline'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Led status="active" />
|
||||
<Typography sx={{ fontSize: '12px', color: d3roPalette.text.secondary }}>
|
||||
Hotkey Active
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stat Cards Grid */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
|
||||
gap: 3,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
<StatCard
|
||||
label="Total Sessions"
|
||||
value={String(stats?.totalSessionCount ?? 0)}
|
||||
icon={<MicIcon />}
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Time"
|
||||
value={formatTime(stats?.totalRecordingTimeMs ?? 0)}
|
||||
icon={<TimerIcon />}
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Words"
|
||||
value={String(stats?.totalWordCount ?? 0)}
|
||||
icon={<TextFieldsIcon />}
|
||||
/>
|
||||
<StatCard
|
||||
label="Streak"
|
||||
value={`${stats?.streakDays ?? 0}d`}
|
||||
icon={<WhatshotIcon />}
|
||||
tag={stats?.streakDays && stats.streakDays > 0 ? { text: 'ACTIVE', color: 'success' } : undefined}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Today Section */}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: d3roPalette.text.label,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
Today
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<StatCard
|
||||
title="Total Sessions"
|
||||
value={String(stats?.totalSessionCount ?? 0)}
|
||||
icon={<MicIcon />}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<StatCard
|
||||
title="Total Time"
|
||||
value={formatTime(stats?.totalRecordingTimeMs ?? 0)}
|
||||
icon={<TimerIcon />}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<StatCard
|
||||
title="Total Words"
|
||||
value={String(stats?.totalWordCount ?? 0)}
|
||||
icon={<TextFieldsIcon />}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 6, md: 3 }}>
|
||||
<StatCard
|
||||
title="Streak"
|
||||
value={`${stats?.streakDays ?? 0} days`}
|
||||
icon={<TodayIcon />}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Today's stats */}
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
Today
|
||||
</Typography>
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={{ xs: 12, sm: 4 }}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">Sessions</Typography>
|
||||
<Typography variant="h5">{stats?.todaySessionCount ?? 0}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 4 }}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">Time</Typography>
|
||||
<Typography variant="h5">{formatTime(stats?.todayRecordingTimeMs ?? 0)}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, sm: 4 }}>
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">Words</Typography>
|
||||
<Typography variant="h5">{stats?.todayWordCount ?? 0}</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: 3,
|
||||
}}
|
||||
>
|
||||
<Card sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
|
||||
<Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
|
||||
Sessions
|
||||
</Typography>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
|
||||
{stats?.todaySessionCount ?? 0}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
|
||||
<Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
|
||||
Time
|
||||
</Typography>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
|
||||
{formatTime(stats?.todayRecordingTimeMs ?? 0)}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
|
||||
<Typography sx={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: d3roPalette.text.label, mb: 1 }}>
|
||||
Words
|
||||
</Typography>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '28px', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>
|
||||
{stats?.todayWordCount ?? 0}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,31 +1,26 @@
|
|||
// src/renderer/pages/DictionaryPage.tsx
|
||||
// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
IconButton,
|
||||
Chip,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Card,
|
||||
CardContent,
|
||||
InputAdornment
|
||||
Box, Typography, TextField, Button, IconButton, Chip,
|
||||
Dialog, DialogTitle, DialogContent, DialogActions,
|
||||
Card, CardContent, InputAdornment
|
||||
} from '@mui/material'
|
||||
import AddIcon from '@mui/icons-material/Add'
|
||||
import DeleteIcon from '@mui/icons-material/Delete'
|
||||
import SearchIcon from '@mui/icons-material/Search'
|
||||
import { d3roPalette, d3roFontMono } from '../theme'
|
||||
import type { DictionaryEntry, DictionaryPage as DictPageData } from '@shared/types'
|
||||
|
||||
const PAGE_SIZE = 50
|
||||
|
||||
const CATEGORY_COLOR: Record<string, 'primary' | 'secondary' | 'warning'> = {
|
||||
user: 'primary',
|
||||
auto: 'warning',
|
||||
technical: 'secondary',
|
||||
}
|
||||
|
||||
export function DictionaryPage(): React.ReactElement {
|
||||
const [data, setData] = useState<DictPageData | null>(null)
|
||||
const [search, setSearch] = useState('')
|
||||
|
|
@ -39,16 +34,11 @@ export function DictionaryPage(): React.ReactElement {
|
|||
const result = search.trim()
|
||||
? await window.electronAPI.dictionary.search({ query: search, page: 0, pageSize: PAGE_SIZE })
|
||||
: await window.electronAPI.dictionary.getAll({ page: 0, pageSize: PAGE_SIZE })
|
||||
|
||||
if (result.success) {
|
||||
setData(result.data)
|
||||
}
|
||||
if (result.success) setData(result.data)
|
||||
setLoading(false)
|
||||
}, [search])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
const handleAdd = async () => {
|
||||
if (!newWord.trim()) return
|
||||
|
|
@ -68,32 +58,32 @@ export function DictionaryPage(): React.ReactElement {
|
|||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600 }}>
|
||||
Dictionary
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => setAddOpen(true)}
|
||||
size="small"
|
||||
>
|
||||
<Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||||
<Box>
|
||||
<Typography sx={{ fontSize: '22px', fontWeight: 700 }}>Dictionary</Typography>
|
||||
<Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
|
||||
Custom words for better STT accuracy
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={() => setAddOpen(true)}>
|
||||
Add Word
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Search */}
|
||||
<TextField
|
||||
placeholder="Search words..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
fullWidth
|
||||
sx={{ mb: 2 }}
|
||||
sx={{ mb: 3 }}
|
||||
slotProps={{
|
||||
input: {
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
<SearchIcon sx={{ color: d3roPalette.text.label }} />
|
||||
</InputAdornment>
|
||||
)
|
||||
}
|
||||
|
|
@ -104,46 +94,51 @@ export function DictionaryPage(): React.ReactElement {
|
|||
<Typography color="text.secondary">Loading...</Typography>
|
||||
) : !data || data.entries.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
|
||||
{search ? 'No words found.' : 'No words yet. Add custom words for better STT accuracy.'}
|
||||
<CardContent sx={{ py: 6, textAlign: 'center' }}>
|
||||
<Typography color="text.secondary">
|
||||
{search ? 'No words found.' : 'No words yet. Add custom words to improve recognition.'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<List>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{data.entries.map((entry: DictionaryEntry) => (
|
||||
<ListItem
|
||||
key={entry.id}
|
||||
divider
|
||||
secondaryAction={
|
||||
<IconButton size="small" onClick={() => handleDelete(entry.id)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemText
|
||||
primary={entry.word}
|
||||
secondary={
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
|
||||
<Card key={entry.id} sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 2, '&:last-child': { pb: 2 }, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'baseline', gap: 1.5 }}>
|
||||
<Typography sx={{ fontSize: '14px', fontWeight: 600 }}>
|
||||
{entry.word}
|
||||
</Typography>
|
||||
{entry.pronunciation && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '12px', color: d3roPalette.text.label }}>
|
||||
[{entry.pronunciation}]
|
||||
</Typography>
|
||||
)}
|
||||
<Chip label={entry.category} size="small" variant="outlined" />
|
||||
<Chip label={`used ${entry.usageCount}x`} size="small" variant="outlined" />
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
|
||||
<Chip label={entry.category.toUpperCase()} size="small" color={CATEGORY_COLOR[entry.category] ?? 'primary'} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: '11px', color: d3roPalette.text.label, alignSelf: 'center' }}>
|
||||
{entry.usageCount}× used
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleDelete(entry.id)}
|
||||
sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Add Word Dialog */}
|
||||
<Dialog open={addOpen} onClose={() => setAddOpen(false)} maxWidth="xs" fullWidth>
|
||||
<DialogTitle>Add Word</DialogTitle>
|
||||
<DialogTitle sx={{ fontWeight: 700 }}>Add Word</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label="Word"
|
||||
|
|
@ -161,11 +156,9 @@ export function DictionaryPage(): React.ReactElement {
|
|||
sx={{ mt: 2 }}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setAddOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleAdd} variant="contained" disabled={!newWord.trim()}>
|
||||
Add
|
||||
</Button>
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={() => setAddOpen(false)} color="secondary" variant="contained">Cancel</Button>
|
||||
<Button onClick={handleAdd} variant="contained" disabled={!newWord.trim()}>Add</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
// src/renderer/pages/HistoryPage.tsx
|
||||
// 08-design-system.md SSOT: 다크 카드, 앰버 악센트, 태그 시스템
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
IconButton,
|
||||
Chip,
|
||||
Pagination,
|
||||
|
|
@ -18,10 +16,29 @@ import {
|
|||
import SearchIcon from '@mui/icons-material/Search'
|
||||
import DeleteIcon from '@mui/icons-material/Delete'
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import { d3roPalette, d3roFontMono } from '../theme'
|
||||
import type { HistoryEntry, HistoryPage as HistoryPageData } from '@shared/types'
|
||||
|
||||
const PAGE_SIZE = 20
|
||||
|
||||
function formatDate(ts: number): string {
|
||||
return new Date(ts).toLocaleString('ko-KR', {
|
||||
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
function formatDuration(sec: number): string {
|
||||
const m = Math.floor(sec / 60)
|
||||
const s = Math.round(sec % 60)
|
||||
return `${m}:${s.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
const MODE_TAG: Record<string, 'primary' | 'secondary' | 'warning'> = {
|
||||
dictation: 'primary',
|
||||
translate: 'secondary',
|
||||
command: 'warning',
|
||||
}
|
||||
|
||||
export function HistoryPage(): React.ReactElement {
|
||||
const [data, setData] = useState<HistoryPageData | null>(null)
|
||||
const [page, setPage] = useState(0)
|
||||
|
|
@ -33,16 +50,11 @@ export function HistoryPage(): React.ReactElement {
|
|||
const result = search.trim()
|
||||
? await window.electronAPI.history.search({ query: search, page, pageSize: PAGE_SIZE })
|
||||
: await window.electronAPI.history.getAll({ page, pageSize: PAGE_SIZE })
|
||||
|
||||
if (result.success) {
|
||||
setData(result.data)
|
||||
}
|
||||
if (result.success) setData(result.data)
|
||||
setLoading(false)
|
||||
}, [page, search])
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
}, [loadData])
|
||||
useEffect(() => { loadData() }, [loadData])
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
await window.electronAPI.history.delete({ id })
|
||||
|
|
@ -53,41 +65,28 @@ export function HistoryPage(): React.ReactElement {
|
|||
navigator.clipboard.writeText(text)
|
||||
}
|
||||
|
||||
const formatDate = (ts: number) => {
|
||||
return new Date(ts).toLocaleString('ko-KR', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const formatDuration = (sec: number) => {
|
||||
const m = Math.floor(sec / 60)
|
||||
const s = Math.round(sec % 60)
|
||||
return `${m}:${s.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
|
||||
History
|
||||
</Typography>
|
||||
<Box sx={{ maxWidth: 1200, mx: 'auto', p: 5 }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography sx={{ fontSize: '22px', fontWeight: 700 }}>History</Typography>
|
||||
<Typography sx={{ fontSize: '14px', color: 'text.secondary', mt: 0.5 }}>
|
||||
Transcription history
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Search */}
|
||||
<TextField
|
||||
placeholder="Search transcriptions..."
|
||||
value={search}
|
||||
onChange={(e) => {
|
||||
setSearch(e.target.value)
|
||||
setPage(0)
|
||||
}}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(0) }}
|
||||
fullWidth
|
||||
sx={{ mb: 2 }}
|
||||
sx={{ mb: 3 }}
|
||||
slotProps={{
|
||||
input: {
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
<SearchIcon sx={{ color: d3roPalette.text.label }} />
|
||||
</InputAdornment>
|
||||
)
|
||||
}
|
||||
|
|
@ -98,59 +97,90 @@ export function HistoryPage(): React.ReactElement {
|
|||
<Typography color="text.secondary">Loading...</Typography>
|
||||
) : !data || data.entries.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
|
||||
{search ? 'No results found.' : 'No history yet.'}
|
||||
<CardContent sx={{ py: 6, textAlign: 'center' }}>
|
||||
<Typography color="text.secondary">
|
||||
{search ? 'No results found.' : 'No history yet. Start recording!'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<>
|
||||
<List>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
||||
{data.entries.map((entry: HistoryEntry) => (
|
||||
<ListItem
|
||||
key={entry.id}
|
||||
divider
|
||||
secondaryAction={
|
||||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleCopy(entry.polishedText || entry.originalText)}
|
||||
>
|
||||
<ContentCopyIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={() => handleDelete(entry.id)}>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<ListItemText
|
||||
primary={entry.polishedText || entry.originalText}
|
||||
secondary={
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 0.5, alignItems: 'center' }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{formatDate(entry.createdAt)}
|
||||
<Card key={entry.id} sx={{ p: 0 }}>
|
||||
<CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 } }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
{/* Text */}
|
||||
<Box sx={{ flex: 1, mr: 2 }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
lineHeight: 1.5,
|
||||
color: 'text.primary',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
}}
|
||||
>
|
||||
{entry.polishedText || entry.originalText}
|
||||
</Typography>
|
||||
<Chip label={formatDuration(entry.duration)} size="small" variant="outlined" />
|
||||
{entry.detectedLanguage && (
|
||||
<Chip label={entry.detectedLanguage} size="small" variant="outlined" />
|
||||
)}
|
||||
<Chip label={entry.mode} size="small" variant="outlined" />
|
||||
|
||||
{/* Meta row */}
|
||||
<Box sx={{ display: 'flex', gap: 1, mt: 1.5, alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: '11px',
|
||||
color: d3roPalette.text.label,
|
||||
}}
|
||||
>
|
||||
{formatDate(entry.createdAt)}
|
||||
</Typography>
|
||||
<Chip label={formatDuration(entry.duration)} size="small" color="primary" />
|
||||
{entry.detectedLanguage && (
|
||||
<Chip label={entry.detectedLanguage.toUpperCase()} size="small" color="secondary" />
|
||||
)}
|
||||
<Chip label={entry.mode.toUpperCase()} size="small" color={MODE_TAG[entry.mode] ?? 'primary'} />
|
||||
</Box>
|
||||
</Box>
|
||||
}
|
||||
primaryTypographyProps={{ sx: { pr: 8 } }}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
{/* Actions */}
|
||||
<Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleCopy(entry.polishedText || entry.originalText)}
|
||||
sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.accent.amber } }}
|
||||
>
|
||||
<ContentCopyIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleDelete(entry.id)}
|
||||
sx={{ color: d3roPalette.text.label, '&:hover': { color: d3roPalette.tag.red } }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
|
||||
<Pagination
|
||||
count={data.totalPages}
|
||||
page={page + 1}
|
||||
onChange={(_, p) => setPage(p - 1)}
|
||||
sx={{
|
||||
'& .Mui-selected': {
|
||||
bgcolor: `${d3roPalette.accent.amberDim} !important`,
|
||||
color: d3roPalette.accent.amber,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue