feat(V2-1a): Monorepo 구조 전환 — apps/desktop으로 V1 이동
- npm workspaces 루트 (apps/*, packages/*) 세팅 - V1 전체를 apps/desktop/으로 git mv (src, resources, tests, sidecar, scripts, electron.vite.config.ts, electron-builder.yml, vitest.config.ts, tsconfig.node.json, tsconfig.web.json) - apps/desktop/package.json 신규 (name=@d3ro/desktop) - productName: 'd3ro-voice' 명시 — app.getName()을 고정하여 userData 경로 %APPDATA%\d3ro-voice\ 그대로 유지 (기존 DB/설정 연속성 보장) - 루트 package.json을 workspace 루트로 재구성, 공통 devDep만 유지 (typescript, eslint, prettier) - turbo.json, tsconfig.base.json 추가 (Turborepo 자체 설치는 별도 sub-phase) - memory/project_status.md 생성 (규칙 13) 검증: - npm run typecheck 통과 - npm run build 통과 (electron-vite main+preload+renderer) - npm run dev 실제 실행 → DB/핫키/Ollama 자동 실행 모두 정상
This commit is contained in:
yunchan8804
parent
3a160b9032
commit
45a580878a
178 changed files with 214 additions and 0 deletions
17
apps/desktop/src/renderer/popups/caption-overlay/index.html
Normal file
17
apps/desktop/src/renderer/popups/caption-overlay/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Live Caption</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="container" class="caption-overlay">
|
||||
<div id="lines"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
193
apps/desktop/src/renderer/popups/caption-overlay/script.js
Normal file
193
apps/desktop/src/renderer/popups/caption-overlay/script.js
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
// Caption Overlay 팝업 스크립트
|
||||
// Phase 10.1: Live Caption — 실시간 자막 오버레이
|
||||
// Vanilla JS (다른 팝업과 동일한 패턴)
|
||||
|
||||
;(function () {
|
||||
'use strict'
|
||||
|
||||
// ── 설정 (기본값, IPC로 업데이트) ─────────────────────
|
||||
var config = {
|
||||
fontSize: 18,
|
||||
opacity: 0.85,
|
||||
maxLines: 3,
|
||||
autoClearMs: 5000
|
||||
}
|
||||
|
||||
// ── DOM 참조 ─────────────────────────────────────────
|
||||
var linesContainer = document.getElementById('lines')
|
||||
var container = document.getElementById('container')
|
||||
|
||||
// ── 상태 ──────────────────────────────────────────────
|
||||
/** @type {Array<{el: HTMLElement, timer: number|null, id: string}>} */
|
||||
var lines = []
|
||||
/** @type {HTMLElement|null} */
|
||||
var deltaLine = null
|
||||
|
||||
// ── 자막 줄 추가 ──────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 확정된 자막 세그먼트를 추가한다.
|
||||
* @param {{id: string, text: string, timestamp: number, isFinal: boolean}} segment
|
||||
*/
|
||||
function addSegment(segment) {
|
||||
// delta 줄이 있으면 제거 (확정 줄로 교체)
|
||||
removeDeltaLine()
|
||||
|
||||
var el = document.createElement('div')
|
||||
el.className = 'caption-line'
|
||||
el.textContent = segment.text
|
||||
el.style.fontSize = config.fontSize + 'px'
|
||||
linesContainer.appendChild(el)
|
||||
|
||||
// auto-clear 타이머 설정
|
||||
var timer = setTimeout(function () {
|
||||
fadeAndRemoveLine(entry)
|
||||
}, config.autoClearMs)
|
||||
|
||||
var entry = { el: el, timer: timer, id: segment.id }
|
||||
lines.push(entry)
|
||||
|
||||
// maxLines 초과 시 가장 오래된 줄 제거
|
||||
while (lines.length > config.maxLines) {
|
||||
var oldest = lines.shift()
|
||||
if (oldest) {
|
||||
if (oldest.timer) clearTimeout(oldest.timer)
|
||||
if (oldest.el.parentNode) {
|
||||
oldest.el.parentNode.removeChild(oldest.el)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 중간(delta) 자막을 업데이트한다 (아직 확정되지 않은 줄).
|
||||
* @param {{text: string, isFinal: boolean}} data
|
||||
*/
|
||||
function updateDelta(data) {
|
||||
if (data.isFinal) {
|
||||
// isFinal이면 segment로 처리
|
||||
removeDeltaLine()
|
||||
return
|
||||
}
|
||||
|
||||
if (!deltaLine) {
|
||||
deltaLine = document.createElement('div')
|
||||
deltaLine.className = 'caption-line delta'
|
||||
deltaLine.style.fontSize = config.fontSize + 'px'
|
||||
linesContainer.appendChild(deltaLine)
|
||||
}
|
||||
|
||||
deltaLine.textContent = data.text
|
||||
}
|
||||
|
||||
/**
|
||||
* delta 줄을 제거한다.
|
||||
*/
|
||||
function removeDeltaLine() {
|
||||
if (deltaLine && deltaLine.parentNode) {
|
||||
deltaLine.parentNode.removeChild(deltaLine)
|
||||
}
|
||||
deltaLine = null
|
||||
}
|
||||
|
||||
/**
|
||||
* 줄을 페이드 아웃 후 제거한다.
|
||||
* @param {{el: HTMLElement, timer: number|null, id: string}} entry
|
||||
*/
|
||||
function fadeAndRemoveLine(entry) {
|
||||
entry.el.classList.add('fading')
|
||||
setTimeout(function () {
|
||||
if (entry.el.parentNode) {
|
||||
entry.el.parentNode.removeChild(entry.el)
|
||||
}
|
||||
var idx = lines.indexOf(entry)
|
||||
if (idx !== -1) {
|
||||
lines.splice(idx, 1)
|
||||
}
|
||||
}, 500) // CSS transition 시간과 일치
|
||||
}
|
||||
|
||||
/**
|
||||
* 모든 줄을 제거한다.
|
||||
*/
|
||||
function clearAllLines() {
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
if (lines[i].timer) clearTimeout(lines[i].timer)
|
||||
if (lines[i].el.parentNode) {
|
||||
lines[i].el.parentNode.removeChild(lines[i].el)
|
||||
}
|
||||
}
|
||||
lines = []
|
||||
removeDeltaLine()
|
||||
}
|
||||
|
||||
/**
|
||||
* 설정을 적용한다.
|
||||
* @param {object} newConfig
|
||||
*/
|
||||
function applyConfig(newConfig) {
|
||||
if (newConfig.fontSize !== undefined) config.fontSize = newConfig.fontSize
|
||||
if (newConfig.opacity !== undefined) config.opacity = newConfig.opacity
|
||||
if (newConfig.maxLines !== undefined) config.maxLines = newConfig.maxLines
|
||||
if (newConfig.autoClearMs !== undefined) config.autoClearMs = newConfig.autoClearMs
|
||||
|
||||
// 기존 줄에 폰트 크기 반영
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
lines[i].el.style.fontSize = config.fontSize + 'px'
|
||||
}
|
||||
if (deltaLine) {
|
||||
deltaLine.style.fontSize = config.fontSize + 'px'
|
||||
}
|
||||
|
||||
// 컨테이너 투명도
|
||||
if (container) {
|
||||
container.style.opacity = String(config.opacity)
|
||||
}
|
||||
}
|
||||
|
||||
// ── IPC 리스너 ────────────────────────────────────────
|
||||
|
||||
if (window.popupAPI) {
|
||||
// 확정된 자막 세그먼트
|
||||
window.popupAPI.on('caption:segment', function (segment) {
|
||||
addSegment(segment)
|
||||
})
|
||||
|
||||
// 중간 전사 결과 (delta)
|
||||
window.popupAPI.on('caption:delta', function (data) {
|
||||
updateDelta(data)
|
||||
})
|
||||
|
||||
// 설정 업데이트
|
||||
window.popupAPI.on('caption:config', function (newConfig) {
|
||||
applyConfig(newConfig)
|
||||
})
|
||||
|
||||
// 숨기기 (세션 종료)
|
||||
window.popupAPI.on('caption:hide', function () {
|
||||
clearAllLines()
|
||||
})
|
||||
|
||||
// 상태 변경
|
||||
window.popupAPI.on('caption:stateChanged', function (data) {
|
||||
if (data.state === 'starting') {
|
||||
// 로딩 표시
|
||||
clearAllLines()
|
||||
var loadingEl = document.createElement('div')
|
||||
loadingEl.className = 'caption-line loading'
|
||||
loadingEl.id = 'caption-loading'
|
||||
loadingEl.textContent = '⏳ Loading STT model...'
|
||||
loadingEl.style.fontSize = config.fontSize + 'px'
|
||||
linesContainer.appendChild(loadingEl)
|
||||
} else if (data.state === 'active') {
|
||||
// 로딩 표시 제거
|
||||
var existing = document.getElementById('caption-loading')
|
||||
if (existing && existing.parentNode) {
|
||||
existing.parentNode.removeChild(existing)
|
||||
}
|
||||
} else if (data.state === 'inactive' || data.state === 'stopping') {
|
||||
clearAllLines()
|
||||
}
|
||||
})
|
||||
}
|
||||
})()
|
||||
114
apps/desktop/src/renderer/popups/caption-overlay/style.css
Normal file
114
apps/desktop/src/renderer/popups/caption-overlay/style.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
/* Caption Overlay — Phase 10.1 Live Caption
|
||||
* CSS Custom Properties 기반 — fallback은 dark 테마값.
|
||||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
:root {
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-accent-glow: rgba(242, 91, 41, 0.6);
|
||||
--d3-accent-glow-dim: rgba(242, 91, 41, 0.3);
|
||||
--d3-accent-light: #ff8a65;
|
||||
--d3-accent-light-glow: rgba(255, 138, 101, 0.7);
|
||||
--d3-accent-light-glow-dim: rgba(255, 138, 101, 0.4);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.caption-overlay {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#lines {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.caption-line {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: var(--d3-accent-main);
|
||||
text-shadow:
|
||||
0 0 8px var(--d3-accent-glow),
|
||||
0 0 16px var(--d3-accent-glow-dim),
|
||||
0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
border-radius: 6px;
|
||||
padding: 4px 12px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-out;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.caption-line.fading {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Newest line (bottom) is brightest */
|
||||
.caption-line:last-child {
|
||||
color: var(--d3-accent-light);
|
||||
text-shadow:
|
||||
0 0 10px var(--d3-accent-light-glow),
|
||||
0 0 20px var(--d3-accent-light-glow-dim),
|
||||
0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* Oldest lines are dimmer */
|
||||
.caption-line:first-child {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.caption-line:nth-child(2) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Delta (partial/unfinished) line has pulsing cursor */
|
||||
.caption-line.delta::after {
|
||||
content: '\2588';
|
||||
animation: blink 0.8s step-end infinite;
|
||||
margin-left: 2px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* 로딩 중 표시 — 점멸 애니메이션 */
|
||||
.caption-line.loading {
|
||||
opacity: 0.6;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
24
apps/desktop/src/renderer/popups/command-popup/index.html
Normal file
24
apps/desktop/src/renderer/popups/command-popup/index.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Command Popup</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="container" class="command-popup">
|
||||
<div id="title" class="title">COMMAND SELECT</div>
|
||||
<div id="items" class="items"></div>
|
||||
<div class="hints">
|
||||
<span>↑↓ 선택</span>
|
||||
<span>⏎ 적용</span>
|
||||
<span>0 해제</span>
|
||||
<span>ESC ×</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
172
apps/desktop/src/renderer/popups/command-popup/script.js
Normal file
172
apps/desktop/src/renderer/popups/command-popup/script.js
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
// CommandPopup 팝업 스크립트
|
||||
// Ctrl+Shift+C로 커서 위치에 명령어 선택 팝업
|
||||
// Arrow↑↓ 선택, Enter 적용, 1-5 직접 선택, ESC 닫기
|
||||
|
||||
;(function () {
|
||||
'use strict'
|
||||
|
||||
var container = document.getElementById('container')
|
||||
var itemsContainer = document.getElementById('items')
|
||||
var items = []
|
||||
var selectedIndex = 0
|
||||
var currentCommands = []
|
||||
var currentActiveId = null
|
||||
var i18nStrings = {}
|
||||
|
||||
// ── 아이템 렌더링 ───────────────────────────────────
|
||||
function renderItems(commands, activeId) {
|
||||
currentCommands = commands
|
||||
currentActiveId = activeId
|
||||
itemsContainer.innerHTML = ''
|
||||
items = []
|
||||
|
||||
if (commands.length === 0) {
|
||||
var empty = document.createElement('div')
|
||||
empty.style.cssText = 'color: rgba(255,255,255,0.4); font-size: 13px; text-align: center; padding: 24px 16px;'
|
||||
empty.textContent = i18nStrings.noCommands || 'No commands'
|
||||
itemsContainer.appendChild(empty)
|
||||
return
|
||||
}
|
||||
|
||||
// ── "선택 해제" 항목 (맨 위) ──
|
||||
var noneDiv = document.createElement('div')
|
||||
noneDiv.className = 'item item-none' + (0 === selectedIndex ? ' selected' : '') + (!activeId ? ' active' : '')
|
||||
noneDiv.dataset.index = '0'
|
||||
|
||||
var noneNum = document.createElement('span')
|
||||
noneNum.className = 'item-number'
|
||||
noneNum.textContent = '0'
|
||||
var noneName = document.createElement('span')
|
||||
noneName.className = 'item-name'
|
||||
noneName.style.opacity = '0.5'
|
||||
noneName.textContent = i18nStrings.noCommand || 'No command (insert original)'
|
||||
|
||||
if (!activeId) {
|
||||
var noneBadge = document.createElement('span')
|
||||
noneBadge.className = 'item-active-badge'
|
||||
noneBadge.textContent = '●'
|
||||
noneDiv.appendChild(noneNum)
|
||||
noneDiv.appendChild(noneName)
|
||||
noneDiv.appendChild(noneBadge)
|
||||
} else {
|
||||
noneDiv.appendChild(noneNum)
|
||||
noneDiv.appendChild(noneName)
|
||||
}
|
||||
|
||||
itemsContainer.appendChild(noneDiv)
|
||||
items.push(noneDiv)
|
||||
noneDiv.addEventListener('click', function () {
|
||||
selectAndApply(-1)
|
||||
})
|
||||
|
||||
commands.forEach(function (cmd, index) {
|
||||
var itemIndex = index + 1
|
||||
var div = document.createElement('div')
|
||||
div.className = 'item' + (itemIndex === selectedIndex ? ' selected' : '') + (cmd.id === activeId ? ' active' : '')
|
||||
div.dataset.index = String(itemIndex)
|
||||
|
||||
var num = document.createElement('span')
|
||||
num.className = 'item-number'
|
||||
num.textContent = String(itemIndex)
|
||||
|
||||
var name = document.createElement('span')
|
||||
name.className = 'item-name'
|
||||
name.textContent = cmd.name
|
||||
|
||||
var desc = document.createElement('span')
|
||||
desc.className = 'item-desc'
|
||||
desc.textContent = cmd.description
|
||||
|
||||
div.appendChild(num)
|
||||
div.appendChild(name)
|
||||
|
||||
if (cmd.id === activeId) {
|
||||
var badge = document.createElement('span')
|
||||
badge.className = 'item-active-badge'
|
||||
badge.textContent = '●'
|
||||
div.appendChild(badge)
|
||||
}
|
||||
|
||||
div.appendChild(desc)
|
||||
itemsContainer.appendChild(div)
|
||||
items.push(div)
|
||||
|
||||
div.addEventListener('click', function () {
|
||||
selectAndApply(itemIndex)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── 선택 업데이트 ───────────────────────────────────
|
||||
function updateSelection(newIndex) {
|
||||
var totalItems = currentCommands.length + 1 // +1 for "none" item
|
||||
if (totalItems <= 1) return
|
||||
if (newIndex < 0) newIndex = totalItems - 1
|
||||
if (newIndex >= totalItems) newIndex = 0
|
||||
|
||||
items.forEach(function (item, i) {
|
||||
if (i === newIndex) {
|
||||
item.classList.add('selected')
|
||||
} else {
|
||||
item.classList.remove('selected')
|
||||
}
|
||||
})
|
||||
selectedIndex = newIndex
|
||||
|
||||
if (items[selectedIndex]) {
|
||||
items[selectedIndex].scrollIntoView({ block: 'nearest' })
|
||||
}
|
||||
}
|
||||
|
||||
// ── 선택 적용 ───────────────────────────────────────
|
||||
function selectAndApply(index) {
|
||||
// index 0 또는 -1 = "선택 해제"
|
||||
if (index <= 0) {
|
||||
window.popupAPI.send('command:selected', { id: '', name: '' })
|
||||
return
|
||||
}
|
||||
var cmdIndex = index - 1
|
||||
if (cmdIndex < 0 || cmdIndex >= currentCommands.length) return
|
||||
var cmd = currentCommands[cmdIndex]
|
||||
window.popupAPI.send('command:selected', { id: cmd.id, name: cmd.name })
|
||||
}
|
||||
|
||||
// ── IPC 리스너 ───────────────────────────────────────
|
||||
window.popupAPI.on('command:showItems', function (data) {
|
||||
selectedIndex = 0
|
||||
if (data._i18n) i18nStrings = data._i18n
|
||||
renderItems(data.commands || [], data.activeId || null)
|
||||
container.classList.remove('hiding')
|
||||
})
|
||||
|
||||
window.popupAPI.on('command:show', function () {
|
||||
container.classList.add('visible')
|
||||
container.classList.remove('hiding')
|
||||
})
|
||||
|
||||
window.popupAPI.on('command:hide', function () {
|
||||
container.classList.add('hiding')
|
||||
container.classList.remove('visible')
|
||||
})
|
||||
|
||||
window.popupAPI.on('command:keyEvent', function (data) {
|
||||
var key = data.key
|
||||
|
||||
if (key === 'ArrowUp') {
|
||||
updateSelection(selectedIndex - 1)
|
||||
} else if (key === 'ArrowDown') {
|
||||
updateSelection(selectedIndex + 1)
|
||||
} else if (key === 'Enter') {
|
||||
selectAndApply(selectedIndex)
|
||||
} else if (key === 'Escape') {
|
||||
window.popupAPI.send('command:dismissed', {})
|
||||
} else if (key === '0') {
|
||||
selectAndApply(0)
|
||||
} else if (key >= '1' && key <= '9') {
|
||||
var idx = parseInt(key, 10)
|
||||
if (idx <= currentCommands.length) {
|
||||
selectAndApply(idx)
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
161
apps/desktop/src/renderer/popups/command-popup/style.css
Normal file
161
apps/desktop/src/renderer/popups/command-popup/style.css
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
/* command-popup/style.css
|
||||
* CSS Custom Properties 기반 — fallback은 dark 테마값.
|
||||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
:root {
|
||||
--d3-bg-card: #242427;
|
||||
--d3-border-default: rgba(255, 255, 255, 0.08);
|
||||
--d3-border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-inactive: rgba(255, 255, 255, 0.3);
|
||||
--d3-text-muted: rgba(255, 255, 255, 0.25);
|
||||
--d3-text-dimLabel: #5c2615;
|
||||
--d3-text-secondary: rgba(255, 255, 255, 0.35);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-accent-dim: rgba(242, 91, 41, 0.08);
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.command-popup {
|
||||
background: var(--d3-bg-card);
|
||||
border: 1px solid var(--d3-border-default);
|
||||
border-radius: 12px;
|
||||
padding: 6px;
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scale(0.98);
|
||||
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
|
||||
min-width: 280px;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.command-popup.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.command-popup.hiding {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--d3-text-dimLabel);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.5px;
|
||||
padding: 6px 10px 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.items {
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 100ms;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.item.selected {
|
||||
background: var(--d3-border-subtle);
|
||||
}
|
||||
|
||||
.item.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 3px;
|
||||
background: var(--d3-accent-main);
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
background: var(--d3-accent-dim);
|
||||
}
|
||||
|
||||
.item-number {
|
||||
color: var(--d3-text-inactive);
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
flex: 1;
|
||||
color: var(--d3-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
color: var(--d3-text-secondary);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-none {
|
||||
border-bottom: 1px solid var(--d3-border-subtle);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.item-active-badge {
|
||||
color: var(--d3-accent-main);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
.hints {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 6px 0 4px;
|
||||
border-top: 1px solid var(--d3-border-subtle);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.hints span {
|
||||
color: var(--d3-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
22
apps/desktop/src/renderer/popups/history-popup/index.html
Normal file
22
apps/desktop/src/renderer/popups/history-popup/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>History Popup</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="container" class="history-popup">
|
||||
<div id="items" class="items"></div>
|
||||
<div class="hints">
|
||||
<span>↑↓ Select</span>
|
||||
<span>⏎ Paste</span>
|
||||
<span>ESC ×</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
156
apps/desktop/src/renderer/popups/history-popup/script.js
Normal file
156
apps/desktop/src/renderer/popups/history-popup/script.js
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
// HistoryPopup 팝업 스크립트
|
||||
// Phase 3.5: 커서 위치에 최근 전사 히스토리 팝업
|
||||
// Arrow↑↓ 선택, Enter 붙여넣기, 1-9 직접 선택, ESC 닫기
|
||||
|
||||
;(function () {
|
||||
'use strict'
|
||||
|
||||
var container = document.getElementById('container')
|
||||
var itemsContainer = document.getElementById('items')
|
||||
var items = []
|
||||
var selectedIndex = 0
|
||||
var currentEntries = []
|
||||
|
||||
// ── 상대 시간 표시 ───────────────────────────────────
|
||||
function relativeTime(timestamp) {
|
||||
var diff = Date.now() - timestamp
|
||||
var sec = Math.floor(diff / 1000)
|
||||
if (sec < 60) return 'just now'
|
||||
var min = Math.floor(sec / 60)
|
||||
if (min < 60) return min + 'm ago'
|
||||
var hr = Math.floor(min / 60)
|
||||
if (hr < 24) return hr + 'h ago'
|
||||
var day = Math.floor(hr / 24)
|
||||
return day + 'd ago'
|
||||
}
|
||||
|
||||
// ── 텍스트 truncate ──────────────────────────────────
|
||||
function truncate(text, maxLen) {
|
||||
if (text.length <= maxLen) return text
|
||||
return text.substring(0, maxLen) + '...'
|
||||
}
|
||||
|
||||
// ── 아이템 렌더링 ───────────────────────────────────
|
||||
function renderItems(entries) {
|
||||
currentEntries = entries
|
||||
itemsContainer.innerHTML = ''
|
||||
items = []
|
||||
|
||||
if (entries.length === 0) {
|
||||
var empty = document.createElement('div')
|
||||
empty.className = 'empty-state'
|
||||
empty.textContent = 'No history yet'
|
||||
itemsContainer.appendChild(empty)
|
||||
return
|
||||
}
|
||||
|
||||
entries.forEach(function (entry, index) {
|
||||
var div = document.createElement('div')
|
||||
div.className = 'item' + (index === selectedIndex ? ' selected' : '')
|
||||
div.dataset.index = String(index)
|
||||
|
||||
var num = document.createElement('span')
|
||||
num.className = 'item-number'
|
||||
num.textContent = String(index + 1)
|
||||
|
||||
var text = document.createElement('span')
|
||||
text.className = 'item-text'
|
||||
text.textContent = truncate(entry.polishedText || entry.originalText, 50)
|
||||
|
||||
var time = document.createElement('span')
|
||||
time.className = 'item-time'
|
||||
time.textContent = relativeTime(entry.createdAt)
|
||||
|
||||
div.appendChild(num)
|
||||
div.appendChild(text)
|
||||
div.appendChild(time)
|
||||
itemsContainer.appendChild(div)
|
||||
items.push(div)
|
||||
|
||||
// 클릭으로 선택+삽입
|
||||
div.addEventListener('click', function () {
|
||||
selectAndInsert(index)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── 선택 업데이트 ───────────────────────────────────
|
||||
function updateSelection(newIndex) {
|
||||
if (currentEntries.length === 0) return
|
||||
if (newIndex < 0) newIndex = currentEntries.length - 1
|
||||
if (newIndex >= currentEntries.length) newIndex = 0
|
||||
|
||||
items.forEach(function (item, i) {
|
||||
if (i === newIndex) {
|
||||
item.classList.add('selected')
|
||||
} else {
|
||||
item.classList.remove('selected')
|
||||
}
|
||||
})
|
||||
selectedIndex = newIndex
|
||||
|
||||
// 스크롤 보장
|
||||
if (items[selectedIndex]) {
|
||||
items[selectedIndex].scrollIntoView({ block: 'nearest' })
|
||||
}
|
||||
}
|
||||
|
||||
// ── 선택 후 삽입 ───────────────────────────────────
|
||||
function selectAndInsert(index) {
|
||||
if (index < 0 || index >= currentEntries.length) return
|
||||
var entry = currentEntries[index]
|
||||
var text = entry.polishedText || entry.originalText
|
||||
window.popupAPI.send('history:itemSelected', { id: entry.id, text: text })
|
||||
}
|
||||
|
||||
// ── 크기 측정 ───────────────────────────────────────
|
||||
function measureAndReport() {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
var rect = container.getBoundingClientRect()
|
||||
window.popupAPI.send('history:popupMeasured', {
|
||||
width: Math.ceil(rect.width) + 4,
|
||||
height: Math.ceil(rect.height) + 4
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── IPC 리스너 ───────────────────────────────────────
|
||||
window.popupAPI.on('history:showItems', function (data) {
|
||||
selectedIndex = 0
|
||||
renderItems(data.entries || [])
|
||||
container.classList.remove('hiding')
|
||||
measureAndReport()
|
||||
})
|
||||
|
||||
window.popupAPI.on('history:show', function () {
|
||||
container.classList.add('visible')
|
||||
container.classList.remove('hiding')
|
||||
})
|
||||
|
||||
window.popupAPI.on('history:hide', function () {
|
||||
container.classList.add('hiding')
|
||||
container.classList.remove('visible')
|
||||
})
|
||||
|
||||
// 키보드 이벤트 (main에서 전달)
|
||||
window.popupAPI.on('history:keyEvent', function (data) {
|
||||
var key = data.key
|
||||
|
||||
if (key === 'ArrowUp') {
|
||||
updateSelection(selectedIndex - 1)
|
||||
} else if (key === 'ArrowDown') {
|
||||
updateSelection(selectedIndex + 1)
|
||||
} else if (key === 'Enter') {
|
||||
selectAndInsert(selectedIndex)
|
||||
} else if (key === 'Escape') {
|
||||
window.popupAPI.send('history:popupDismissed', {})
|
||||
} else if (key >= '1' && key <= '9') {
|
||||
var idx = parseInt(key, 10) - 1
|
||||
if (idx < currentEntries.length) {
|
||||
selectAndInsert(idx)
|
||||
}
|
||||
}
|
||||
})
|
||||
})()
|
||||
141
apps/desktop/src/renderer/popups/history-popup/style.css
Normal file
141
apps/desktop/src/renderer/popups/history-popup/style.css
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/* history-popup/style.css
|
||||
* CSS Custom Properties 기반 — fallback은 dark 테마값.
|
||||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
:root {
|
||||
--d3-bg-card: #242427;
|
||||
--d3-border-default: rgba(255, 255, 255, 0.08);
|
||||
--d3-border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-inactive: rgba(255, 255, 255, 0.3);
|
||||
--d3-text-muted: rgba(255, 255, 255, 0.25);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.history-popup {
|
||||
background: var(--d3-bg-card);
|
||||
border: 1px solid var(--d3-border-default);
|
||||
border-radius: 12px;
|
||||
padding: 6px;
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px) scale(0.98);
|
||||
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
|
||||
min-width: 300px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.history-popup.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.history-popup.hiding {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.items {
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 100ms;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.item.selected {
|
||||
background: var(--d3-border-subtle);
|
||||
}
|
||||
|
||||
.item.selected::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
width: 3px;
|
||||
background: var(--d3-accent-main);
|
||||
border-radius: 1.5px;
|
||||
}
|
||||
|
||||
.item-number {
|
||||
color: var(--d3-text-inactive);
|
||||
font-size: 11px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
flex: 1;
|
||||
color: var(--d3-text-primary);
|
||||
font-size: 13px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
color: var(--d3-text-inactive);
|
||||
font-size: 11px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hints {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 6px 0 4px;
|
||||
border-top: 1px solid var(--d3-border-subtle);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.hints span {
|
||||
color: var(--d3-text-muted);
|
||||
font-size: 10px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--d3-text-inactive);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 24px 16px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
35
apps/desktop/src/renderer/popups/recording-tip/index.html
Normal file
35
apps/desktop/src/renderer/popups/recording-tip/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Recording Tip</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="container" class="recording-tip">
|
||||
<!-- recording 상태 -->
|
||||
<div id="recording-view" class="view">
|
||||
<div id="wave-bars" class="wave-bars"></div>
|
||||
<span id="duration-text" class="duration">0:00</span>
|
||||
</div>
|
||||
|
||||
<!-- thinking 상태 -->
|
||||
<div id="thinking-view" class="view hidden">
|
||||
<div class="progress-container">
|
||||
<div id="progress-bar" class="progress-bar"></div>
|
||||
</div>
|
||||
<span id="thinking-text" class="thinking-label">처리 중...</span>
|
||||
</div>
|
||||
|
||||
<!-- error 상태 -->
|
||||
<div id="error-view" class="view hidden">
|
||||
<span class="error-icon">!</span>
|
||||
<span id="error-text" class="error-label"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
190
apps/desktop/src/renderer/popups/recording-tip/script.js
Normal file
190
apps/desktop/src/renderer/popups/recording-tip/script.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
// RecordingTip 팝업 스크립트
|
||||
// 설계서 03: 9개 웨이브바, cos 분포 가중치, 100ms 애니메이션
|
||||
// Speakly 패턴 준수
|
||||
|
||||
;(function () {
|
||||
'use strict'
|
||||
|
||||
// ── 상수 ─────────────────────────────────────────────
|
||||
const BAR_COUNT = 9
|
||||
const UPDATE_INTERVAL = 100
|
||||
const MIN_HEIGHT = 2
|
||||
const MAX_HEIGHT = 28
|
||||
const SMOOTHING = 0.5
|
||||
const RANDOM_FACTOR = 0.35
|
||||
|
||||
// 코사인 분포 가중치 (중앙이 가장 높음)
|
||||
// 설계서 03: cos((n - 4) * PI / 9)
|
||||
const weights = Array.from({ length: BAR_COUNT }, function (_, i) {
|
||||
var center = (BAR_COUNT - 1) / 2
|
||||
var normalized = (i - center) / center
|
||||
return Math.cos(normalized * Math.PI / 2)
|
||||
})
|
||||
|
||||
// ── DOM 참조 ─────────────────────────────────────────
|
||||
var container = document.getElementById('container')
|
||||
var recordingView = document.getElementById('recording-view')
|
||||
var thinkingView = document.getElementById('thinking-view')
|
||||
var errorView = document.getElementById('error-view')
|
||||
var waveBarsContainer = document.getElementById('wave-bars')
|
||||
var durationText = document.getElementById('duration-text')
|
||||
var progressBar = document.getElementById('progress-bar')
|
||||
var errorText = document.getElementById('error-text')
|
||||
|
||||
// ── 상태 ─────────────────────────────────────────────
|
||||
var bars = []
|
||||
var currentHeights = new Array(BAR_COUNT).fill(MIN_HEIGHT)
|
||||
var audioLevel = 0
|
||||
var animInterval = null
|
||||
var durationInterval = null
|
||||
var recordingStartTime = 0
|
||||
var thinkingStartTime = 0
|
||||
var thinkingRaf = null
|
||||
var currentState = 'idle'
|
||||
|
||||
// ── 웨이브 바 생성 ───────────────────────────────────
|
||||
function createWaveBars() {
|
||||
for (var i = 0; i < BAR_COUNT; i++) {
|
||||
var bar = document.createElement('div')
|
||||
bar.className = 'wave-bar'
|
||||
bar.style.height = MIN_HEIGHT + 'px'
|
||||
waveBarsContainer.appendChild(bar)
|
||||
bars.push(bar)
|
||||
}
|
||||
}
|
||||
|
||||
// ── 웨이브 바 애니메이션 ─────────────────────────────
|
||||
function updateBars() {
|
||||
// 최소 진동: audioLevel이 0이어도 바가 미세하게 움직여 "살아있음" 표현
|
||||
var effectiveLevel = Math.max(0.08, audioLevel)
|
||||
|
||||
for (var i = 0; i < BAR_COUNT; i++) {
|
||||
var baseTarget = effectiveLevel * MAX_HEIGHT * weights[i]
|
||||
var randomized = baseTarget * (1 + (Math.random() - 0.5) * 2 * RANDOM_FACTOR)
|
||||
var target = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, randomized))
|
||||
|
||||
// 스무딩 보간
|
||||
currentHeights[i] += (target - currentHeights[i]) * SMOOTHING
|
||||
bars[i].style.height = Math.round(currentHeights[i]) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
// ── 녹음 시간 표시 ───────────────────────────────────
|
||||
function updateDuration() {
|
||||
var elapsed = Math.floor((Date.now() - recordingStartTime) / 1000)
|
||||
var minutes = Math.floor(elapsed / 60)
|
||||
var seconds = elapsed % 60
|
||||
durationText.textContent = minutes + ':' + (seconds < 10 ? '0' : '') + seconds
|
||||
}
|
||||
|
||||
// ── Thinking 프로그레스 바 (점근 수렴 패턴) ──────────
|
||||
// 설계서 03: min(95, (1 - 1/(1 + 1.5*t)) * 100)%
|
||||
function updateThinkingProgress() {
|
||||
var elapsed = (performance.now() - thinkingStartTime) / 1000
|
||||
var progress = Math.min(95, (1 - 1 / (1 + 1.5 * elapsed)) * 100)
|
||||
progressBar.style.width = progress + '%'
|
||||
|
||||
if (progress < 95 && currentState === 'thinking') {
|
||||
thinkingRaf = requestAnimationFrame(updateThinkingProgress)
|
||||
}
|
||||
}
|
||||
|
||||
// ── 뷰 전환 ─────────────────────────────────────────
|
||||
function hideAllViews() {
|
||||
recordingView.classList.add('hidden')
|
||||
thinkingView.classList.add('hidden')
|
||||
errorView.classList.add('hidden')
|
||||
clearInterval(animInterval)
|
||||
clearInterval(durationInterval)
|
||||
if (thinkingRaf) cancelAnimationFrame(thinkingRaf)
|
||||
animInterval = null
|
||||
durationInterval = null
|
||||
thinkingRaf = null
|
||||
}
|
||||
|
||||
function showRecording() {
|
||||
currentState = 'recording'
|
||||
hideAllViews()
|
||||
recordingView.classList.remove('hidden')
|
||||
recordingStartTime = Date.now()
|
||||
durationText.textContent = '0:00'
|
||||
currentHeights.fill(MIN_HEIGHT)
|
||||
|
||||
animInterval = setInterval(updateBars, UPDATE_INTERVAL)
|
||||
durationInterval = setInterval(updateDuration, 1000)
|
||||
}
|
||||
|
||||
function showThinking() {
|
||||
currentState = 'thinking'
|
||||
hideAllViews()
|
||||
thinkingView.classList.remove('hidden')
|
||||
progressBar.style.width = '0%'
|
||||
progressBar.style.transition = 'width 100ms linear'
|
||||
thinkingStartTime = performance.now()
|
||||
thinkingRaf = requestAnimationFrame(updateThinkingProgress)
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
currentState = 'error'
|
||||
hideAllViews()
|
||||
errorView.classList.remove('hidden')
|
||||
errorText.textContent = message || '오류가 발생했습니다'
|
||||
}
|
||||
|
||||
// ── 크기 측정 (2-phase 리사이즈) ────────────────────
|
||||
function measureAndReport() {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
var rect = container.getBoundingClientRect()
|
||||
window.popupAPI.send('window:tipMeasured', {
|
||||
width: Math.ceil(rect.width) + 4,
|
||||
height: Math.ceil(rect.height) + 4
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── IPC 리스너 ───────────────────────────────────────
|
||||
function setupListeners() {
|
||||
// Phase 1: prepare — 숨겨진 상태에서 렌더링 후 크기 측정
|
||||
window.popupAPI.on('window:tipPrepare', function (data) {
|
||||
var state = data.state
|
||||
if (state === 'recording') showRecording()
|
||||
else if (state === 'thinking') showThinking()
|
||||
else if (state === 'error') showError(data.errorMessage)
|
||||
|
||||
measureAndReport()
|
||||
})
|
||||
|
||||
// Phase 2: show — 리사이즈 완료 후 표시
|
||||
window.popupAPI.on('window:tipShow', function () {
|
||||
container.style.opacity = '1'
|
||||
})
|
||||
|
||||
// 오디오 레벨
|
||||
window.popupAPI.on('voice:audioLevel', function (data) {
|
||||
audioLevel = data.level || 0
|
||||
})
|
||||
|
||||
// 상태 변경 (showRecordingTip + updateRecordingTipState 양쪽에서 사용)
|
||||
window.popupAPI.on('window:tipStateChanged', function (data) {
|
||||
var state = data.state
|
||||
if (state === 'recording') showRecording()
|
||||
else if (state === 'thinking') showThinking()
|
||||
else if (state === 'error') showError(data.errorMessage)
|
||||
// 항상 가시성 보장
|
||||
container.style.opacity = '1'
|
||||
})
|
||||
|
||||
// 클릭 시 녹음 취소
|
||||
container.addEventListener('click', function () {
|
||||
window.popupAPI.send('voice:cancelRecording', {})
|
||||
})
|
||||
}
|
||||
|
||||
// ── 초기화 ───────────────────────────────────────────
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
createWaveBars()
|
||||
setupListeners()
|
||||
})
|
||||
})()
|
||||
120
apps/desktop/src/renderer/popups/recording-tip/style.css
Normal file
120
apps/desktop/src/renderer/popups/recording-tip/style.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
/* recording-tip/style.css
|
||||
* CSS Custom Properties 기반 — fallback은 dark 테마값.
|
||||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
:root {
|
||||
--d3-bg-tip: rgba(0, 0, 0, 0.85);
|
||||
--d3-text-primary: rgba(255, 255, 255, 0.87);
|
||||
--d3-text-secondary: rgba(255, 255, 255, 0.6);
|
||||
--d3-accent-main: #f25b29;
|
||||
--d3-border-strong: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.recording-tip {
|
||||
background: var(--d3-bg-tip);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: opacity 150ms ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wave-bars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.wave-bar {
|
||||
width: 3px;
|
||||
background: var(--d3-accent-main);
|
||||
border-radius: 1.5px;
|
||||
transition: height 100ms ease-out;
|
||||
min-height: 2px;
|
||||
}
|
||||
|
||||
.duration {
|
||||
color: var(--d3-text-primary);
|
||||
font-size: 13px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 120px;
|
||||
height: 3px;
|
||||
background: var(--d3-border-strong);
|
||||
border-radius: 1.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 3px;
|
||||
background: var(--d3-accent-main);
|
||||
border-radius: 1.5px;
|
||||
width: 0%;
|
||||
transition: width 100ms linear;
|
||||
}
|
||||
|
||||
.thinking-label {
|
||||
color: var(--d3-text-secondary);
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.error-label {
|
||||
color: var(--d3-text-primary);
|
||||
font-size: 12px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.view.hidden {
|
||||
display: none;
|
||||
}
|
||||
28
apps/desktop/src/renderer/popups/result-popup/index.html
Normal file
28
apps/desktop/src/renderer/popups/result-popup/index.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<title>Result</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="container" class="result-popup">
|
||||
<div id="result-text" class="result-text"></div>
|
||||
<div id="actions" class="actions">
|
||||
<button id="copy-btn" class="action-btn" title="복사">
|
||||
<svg id="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
<svg id="check-icon" class="hidden" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
95
apps/desktop/src/renderer/popups/result-popup/script.js
Normal file
95
apps/desktop/src/renderer/popups/result-popup/script.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
// ResultPopup 팝업 스크립트
|
||||
// 설계서 03: 2-phase 리사이즈, auto-close, 마우스 호버 시 유지
|
||||
|
||||
;(function () {
|
||||
'use strict'
|
||||
|
||||
var container = document.getElementById('container')
|
||||
var resultText = document.getElementById('result-text')
|
||||
var copyBtn = document.getElementById('copy-btn')
|
||||
var copyIcon = document.getElementById('copy-icon')
|
||||
var checkIcon = document.getElementById('check-icon')
|
||||
|
||||
var autoCloseTimer = null
|
||||
var remainingTime = 0
|
||||
var lastTick = 0
|
||||
|
||||
// ── Auto-close 제어 ─────────────────────────────────
|
||||
function startAutoCloseTimer(ms) {
|
||||
remainingTime = ms
|
||||
lastTick = Date.now()
|
||||
clearInterval(autoCloseTimer)
|
||||
autoCloseTimer = setInterval(function () {
|
||||
remainingTime -= (Date.now() - lastTick)
|
||||
lastTick = Date.now()
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(autoCloseTimer)
|
||||
autoCloseTimer = null
|
||||
window.popupAPI.send('window:hideResultPopup')
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function pauseAutoClose() {
|
||||
clearInterval(autoCloseTimer)
|
||||
autoCloseTimer = null
|
||||
}
|
||||
|
||||
function resumeAutoClose() {
|
||||
startAutoCloseTimer(remainingTime > 0 ? remainingTime : 2000)
|
||||
}
|
||||
|
||||
// ── 복사 버튼 ───────────────────────────────────────
|
||||
copyBtn.addEventListener('click', function () {
|
||||
// navigator.clipboard는 팝업에서 작동 안 할 수 있으므로 IPC 사용
|
||||
window.popupAPI.send('clipboard:copy', resultText.textContent)
|
||||
|
||||
copyBtn.classList.add('copied')
|
||||
copyIcon.classList.add('hidden')
|
||||
checkIcon.classList.remove('hidden')
|
||||
|
||||
setTimeout(function () {
|
||||
copyBtn.classList.remove('copied')
|
||||
copyIcon.classList.remove('hidden')
|
||||
checkIcon.classList.add('hidden')
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
// ── 마우스 호버 시 auto-close 일시정지 ──────────────
|
||||
container.addEventListener('mouseenter', pauseAutoClose)
|
||||
container.addEventListener('mouseleave', resumeAutoClose)
|
||||
|
||||
// ── IPC 리스너 ───────────────────────────────────────
|
||||
|
||||
// Phase 1: prepare — 결과 텍스트 세팅 + 크기 측정
|
||||
window.popupAPI.on('result:prepare', function (data) {
|
||||
resultText.textContent = data.text || ''
|
||||
container.classList.remove('visible')
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
var rect = container.getBoundingClientRect()
|
||||
window.popupAPI.send('result:measured', {
|
||||
width: Math.ceil(rect.width) + 4,
|
||||
height: Math.ceil(rect.height) + 4
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Phase 2: show — 리사이즈 완료 후 표시
|
||||
window.popupAPI.on('result:show', function (data) {
|
||||
container.classList.add('visible')
|
||||
var autoHideMs = (data && data.autoHideMs) || 5000
|
||||
if (autoHideMs > 0) {
|
||||
startAutoCloseTimer(autoHideMs)
|
||||
}
|
||||
})
|
||||
|
||||
// hide
|
||||
window.popupAPI.on('result:hide', function () {
|
||||
container.classList.remove('visible')
|
||||
clearInterval(autoCloseTimer)
|
||||
autoCloseTimer = null
|
||||
})
|
||||
})()
|
||||
97
apps/desktop/src/renderer/popups/result-popup/style.css
Normal file
97
apps/desktop/src/renderer/popups/result-popup/style.css
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* result-popup/style.css
|
||||
* CSS Custom Properties 기반 — fallback은 dark 테마값.
|
||||
* @media (prefers-color-scheme: dark) 블록 제거 → CSS 변수로 통합.
|
||||
* WindowManager.insertCSS()가 :root에 테마 변수를 주입하면 자동 전환.
|
||||
*/
|
||||
|
||||
/* ── 다크 테마 fallback 기본값 (:root) ─────────────────────────── */
|
||||
:root {
|
||||
--d3-bg-result: #1e1e1e;
|
||||
--d3-border-result: rgba(255, 255, 255, 0.08);
|
||||
--d3-text-result: rgba(255, 255, 255, 0.87);
|
||||
--d3-action-btn: rgba(255, 255, 255, 0.4);
|
||||
--d3-action-btn-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
--d3-action-btn-hover: rgba(255, 255, 255, 0.7);
|
||||
--d3-shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.result-popup {
|
||||
background: var(--d3-bg-result);
|
||||
border: 1px solid var(--d3-border-result);
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: var(--d3-shadow-popup);
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transition: opacity 200ms ease-out, transform 200ms ease-out;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-popup.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.result-text {
|
||||
flex: 1;
|
||||
color: var(--d3-text-result);
|
||||
font-size: 14px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
color: var(--d3-action-btn);
|
||||
cursor: pointer;
|
||||
transition: background 150ms, color 150ms;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--d3-action-btn-hover-bg);
|
||||
color: var(--d3-action-btn-hover);
|
||||
}
|
||||
|
||||
.action-btn.copied {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue