refactor(kon): history page — compact list view with expand-to-detail
- Replace card-per-entry layout with single-line rows (title truncated, duration, source icon, date, chevron) - Add expand/collapse per row via expandedId $state (id-based, one at a time) - Expanded detail shows full transcript, audio player (when active), and action buttons (Rename, Copy, Open viewer, Delete) - All existing functionality preserved: search, playback, rename, delete, openViewer, clearAll Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
@@ -8,7 +8,7 @@
|
||||
import { PLAYBACK_SPEEDS, FEEDBACK_TIMEOUT_MS } from "$lib/utils/constants.js";
|
||||
|
||||
let searchQuery = $state("");
|
||||
let selectedItem = $state(null);
|
||||
let expandedId = $state(null);
|
||||
let playingId = $state(null);
|
||||
let audioEl = $state(null);
|
||||
let currentTime = $state(0);
|
||||
@@ -37,12 +37,12 @@
|
||||
function clearAll() {
|
||||
history.splice(0);
|
||||
saveHistory();
|
||||
selectedItem = null;
|
||||
expandedId = null;
|
||||
stopPlayback();
|
||||
}
|
||||
|
||||
function openItem(item) {
|
||||
selectedItem = selectedItem === item ? null : item;
|
||||
function toggleExpand(id) {
|
||||
expandedId = expandedId === id ? null : id;
|
||||
}
|
||||
|
||||
function copyItem(item) {
|
||||
@@ -53,7 +53,7 @@
|
||||
const idx = history.indexOf(item);
|
||||
if (idx !== -1) {
|
||||
deleteFromHistory(idx);
|
||||
if (selectedItem === item) selectedItem = null;
|
||||
if (expandedId === item.id) expandedId = null;
|
||||
if (playingId === item.id) stopPlayback();
|
||||
}
|
||||
}
|
||||
@@ -125,14 +125,11 @@
|
||||
if (audioEl) audioEl.playbackRate = speed;
|
||||
}
|
||||
|
||||
|
||||
async function openViewer(item) {
|
||||
// Store item data for the viewer window
|
||||
try {
|
||||
localStorage.setItem("kon_viewer_item", JSON.stringify(item));
|
||||
await invoke("open_viewer_window");
|
||||
} catch {
|
||||
// Fallback: open in browser tab (dev mode)
|
||||
localStorage.setItem("kon_viewer_item", JSON.stringify(item));
|
||||
window.open("/viewer", "_blank", "width=600,height=700");
|
||||
}
|
||||
@@ -181,7 +178,7 @@
|
||||
|
||||
<!-- History list -->
|
||||
<div class="flex-1 px-7 pb-4 min-h-0">
|
||||
<Card classes="h-full flex flex-col">
|
||||
<Card classes="h-full flex flex-col overflow-hidden">
|
||||
{#if filtered.length === 0}
|
||||
<div class="flex-1 flex flex-col items-center justify-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-bg-elevated flex items-center justify-center">
|
||||
@@ -197,110 +194,147 @@
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-1 overflow-y-auto p-3 space-y-1">
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
{#each filtered as item}
|
||||
<!-- Compact row -->
|
||||
<div
|
||||
class="w-full text-left p-3 rounded-xl hover:bg-hover cursor-pointer group"
|
||||
onclick={() => openItem(item)}
|
||||
onkeydown={(e) => { if (e.key === "Enter") openItem(item); }}
|
||||
class="flex items-center gap-3 px-4 py-3 border-b border-border-subtle hover:bg-hover cursor-pointer transition-colors duration-150"
|
||||
onclick={() => toggleExpand(item.id)}
|
||||
onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleExpand(item.id); } }}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded={expandedId === item.id}
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<!-- Play button -->
|
||||
{#if item.audioPath}
|
||||
<button
|
||||
class="w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0
|
||||
{playingId === item.id ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-accent hover:bg-accent/20'}"
|
||||
onclick={(e) => { e.stopPropagation(); togglePlay(item); }}
|
||||
aria-label={playingId === item.id && audioEl && !audioEl.paused ? "Pause" : "Play"}
|
||||
>
|
||||
{#if playingId === item.id && audioEl && !audioEl.paused}
|
||||
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="6" y="4" width="4" height="16" rx="1" />
|
||||
<rect x="14" y="4" width="4" height="16" rx="1" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-3 h-3 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if item.title}
|
||||
<span class="text-[12px] text-text font-medium">{item.title}</span>
|
||||
<span class="text-[11px] text-text-tertiary">·</span>
|
||||
{/if}
|
||||
<span class="text-[11px] text-text-tertiary">{item.date}</span>
|
||||
<span class="text-[11px] text-text-tertiary">·</span>
|
||||
<span class="text-[11px] text-text-tertiary">{item.source}</span>
|
||||
{#if item.duration}
|
||||
<span class="text-[11px] text-text-tertiary">· {formatDuration(item.duration)}</span>
|
||||
{/if}
|
||||
<div class="flex-1"></div>
|
||||
<!-- Viewer button -->
|
||||
{#if item.audioPath && item.segments && item.segments.length > 0}
|
||||
<button
|
||||
class="text-[11px] text-accent opacity-0 group-hover:opacity-100 hover:text-accent-hover"
|
||||
onclick={(e) => { e.stopPropagation(); openViewer(item); }}
|
||||
>Open viewer</button>
|
||||
{/if}
|
||||
<!-- Play button (if audio exists) -->
|
||||
{#if item.audioPath}
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-accent"
|
||||
onclick={(e) => { e.stopPropagation(); renameItem(item); }}
|
||||
>Rename</button>
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-accent"
|
||||
onclick={(e) => { e.stopPropagation(); copyItem(item); }}
|
||||
>Copy</button>
|
||||
<button
|
||||
class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-danger"
|
||||
onclick={(e) => { e.stopPropagation(); removeItem(item); }}
|
||||
>Delete</button>
|
||||
</div>
|
||||
<p class="text-[13px] text-text-secondary line-clamp-2 leading-relaxed">
|
||||
{item.title ? item.text.slice(0, 120) : item.preview}
|
||||
</p>
|
||||
|
||||
{#if selectedItem === item}
|
||||
<div class="mt-3 pt-3 border-t border-border-subtle animate-slide-up">
|
||||
<!-- Media player (if audio exists) -->
|
||||
{#if item.audioPath && playingId === item.id}
|
||||
<div class="flex items-center gap-3 mb-3 px-1">
|
||||
<!-- Time -->
|
||||
<span class="text-[10px] text-text-tertiary tabular-nums w-[80px]">
|
||||
{formatTime(currentTime)} / {formatTime(duration)}
|
||||
</span>
|
||||
<!-- Seek bar -->
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
step="0.1"
|
||||
value={currentTime}
|
||||
oninput={seekTo}
|
||||
class="flex-1 accent-accent h-1"
|
||||
data-no-transition
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<!-- Speed pills -->
|
||||
<div class="flex gap-0.5">
|
||||
{#each PLAYBACK_SPEEDS as speed}
|
||||
<button
|
||||
class="text-[9px] px-1.5 py-0.5 rounded-full
|
||||
{playbackRate === speed
|
||||
? 'bg-accent/15 text-accent font-medium'
|
||||
: 'text-text-tertiary hover:text-text-secondary'}"
|
||||
onclick={(e) => { e.stopPropagation(); setSpeed(speed); }}
|
||||
>{speed}x</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0
|
||||
{playingId === item.id ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-accent hover:bg-accent/20'}"
|
||||
onclick={(e) => { e.stopPropagation(); togglePlay(item); }}
|
||||
aria-label={playingId === item.id && audioEl && !audioEl.paused ? "Pause" : "Play"}
|
||||
>
|
||||
{#if playingId === item.id && audioEl && !audioEl.paused}
|
||||
<svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<rect x="6" y="4" width="4" height="16" rx="1" />
|
||||
<rect x="14" y="4" width="4" height="16" rx="1" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg class="w-2.5 h-2.5 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
{/if}
|
||||
<p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap">{item.text}</p>
|
||||
</div>
|
||||
</button>
|
||||
{:else}
|
||||
<!-- Spacer to keep alignment when no audio -->
|
||||
<div class="w-6 h-6 flex-shrink-0"></div>
|
||||
{/if}
|
||||
|
||||
<!-- Title / preview text (truncated) -->
|
||||
<span class="flex-1 truncate text-[13px] text-text">
|
||||
{item.title || item.preview || item.text.slice(0, 80)}
|
||||
</span>
|
||||
|
||||
<!-- Duration -->
|
||||
{#if item.duration}
|
||||
<span class="text-[11px] text-text-tertiary flex-shrink-0 tabular-nums">
|
||||
{formatDuration(item.duration)}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<!-- Source icon -->
|
||||
<span class="flex-shrink-0 text-text-tertiary" title={item.source}>
|
||||
{#if item.source && item.source.toLowerCase().includes("file")}
|
||||
<!-- File icon -->
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
</svg>
|
||||
{:else}
|
||||
<!-- Microphone icon -->
|
||||
<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
|
||||
<path d="M19 10v2a7 7 0 0 1-14 0v-2" />
|
||||
<line x1="12" y1="19" x2="12" y2="23" />
|
||||
<line x1="8" y1="23" x2="16" y2="23" />
|
||||
</svg>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<!-- Date (right-aligned) -->
|
||||
<span class="text-[11px] text-text-tertiary flex-shrink-0 text-right min-w-[90px]">
|
||||
{item.date}
|
||||
</span>
|
||||
|
||||
<!-- Expand chevron -->
|
||||
<svg
|
||||
class="w-3.5 h-3.5 text-text-tertiary flex-shrink-0 transition-transform duration-150 {expandedId === item.id ? 'rotate-180' : ''}"
|
||||
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Expanded detail -->
|
||||
{#if expandedId === item.id}
|
||||
<div class="px-4 py-4 bg-bg-elevated border-b border-border animate-slide-up">
|
||||
<!-- Audio player (if playing this item) -->
|
||||
{#if item.audioPath && playingId === item.id}
|
||||
<div class="flex items-center gap-3 mb-4 px-1">
|
||||
<span class="text-[10px] text-text-tertiary tabular-nums w-[80px]">
|
||||
{formatTime(currentTime)} / {formatTime(duration)}
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={duration || 0}
|
||||
step="0.1"
|
||||
value={currentTime}
|
||||
oninput={seekTo}
|
||||
class="flex-1 accent-accent h-1"
|
||||
data-no-transition
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<div class="flex gap-0.5">
|
||||
{#each PLAYBACK_SPEEDS as speed}
|
||||
<button
|
||||
class="text-[9px] px-1.5 py-0.5 rounded-full
|
||||
{playbackRate === speed
|
||||
? 'bg-accent/15 text-accent font-medium'
|
||||
: 'text-text-tertiary hover:text-text-secondary'}"
|
||||
onclick={(e) => { e.stopPropagation(); setSpeed(speed); }}
|
||||
>{speed}x</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Full transcript -->
|
||||
<p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap mb-4">{item.text}</p>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text transition-colors"
|
||||
onclick={(e) => { e.stopPropagation(); renameItem(item); }}
|
||||
>Rename</button>
|
||||
<button
|
||||
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-text transition-colors"
|
||||
onclick={(e) => { e.stopPropagation(); copyItem(item); }}
|
||||
>Copy</button>
|
||||
{#if item.audioPath && item.segments && item.segments.length > 0}
|
||||
<button
|
||||
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-accent hover:text-accent-hover transition-colors"
|
||||
onclick={(e) => { e.stopPropagation(); openViewer(item); }}
|
||||
>Open viewer</button>
|
||||
{/if}
|
||||
<div class="flex-1"></div>
|
||||
<button
|
||||
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-danger transition-colors"
|
||||
onclick={(e) => { e.stopPropagation(); removeItem(item); }}
|
||||
>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user