diff --git a/frontend/app.js b/frontend/app.js index 3e1f505..7ed80e7 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -122,7 +122,8 @@ async function loadTranscripts() { div.className = 'transcript-item'; const name = document.createElement('span'); - name.textContent = t.filename.replace('.md', ''); + name.className = 'name'; + name.textContent = t.filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, ''); const meta = document.createElement('span'); meta.className = 'meta'; @@ -155,7 +156,10 @@ async function loadTranscripts() { loadTranscripts(); }); - div.append(name, meta, reprocessBtn, delBtn); + const actions = document.createElement('div'); + actions.className = 'item-actions'; + actions.append(reprocessBtn, delBtn); + div.append(name, meta, actions); return div; }) ); diff --git a/frontend/index.html b/frontend/index.html index 4455148..ee5bdb8 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -33,9 +33,9 @@ padding: 16px 24px; border-bottom: 1px solid var(--border); } - .logo-dot { width: 12px; height: 12px; background: var(--red); border-radius: 50%; } - header h1 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.04em; } - header h1 span { color: var(--red); } + .header-logo { height: 28px; width: auto; display: block; } + .header-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } + .header-appname { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .status-badge { font-size: 0.75rem; @@ -112,11 +112,13 @@ .transcript-item { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; - display: flex; align-items: center; justify-content: space-between; + display: flex; align-items: center; gap: 10px; font-size: 0.82rem; cursor: pointer; transition: border-color 0.1s; } .transcript-item:hover { border-color: var(--red); } - .transcript-item .meta { color: var(--muted); font-size: 0.75rem; } + .transcript-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .transcript-item .meta { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; } + .item-actions { display: flex; gap: 2px; flex-shrink: 0; } .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); } @@ -163,8 +165,9 @@