ui: Day 4 frontend — dual-write history to SQLite + persist History rename
addToHistory, renameHistoryEntry, deleteFromHistory in
src/lib/stores/page.svelte.js now dual-write to:
- the in-memory `history` array (UI snappiness, unchanged)
- localStorage (offline / browser-preview fallback, unchanged)
- SQLite via the new Tauri commands from 1cce567 (the canonical store)
The SQLite write is best-effort: failure does not lose the in-memory
copy. Console-warns for diagnostic visibility. Browser-preview path
correctly skips the Tauri call.
HistoryPage rename flow (renameItem) now calls renameHistoryEntry, which
goes through update_transcript. Closes the long-standing TODO from
architecture-review.md §13: rename was UI-only, never persisted, lost
on reload.
On rename failure a warn-toast surfaces "your change is visible now but
did not save" so the user is not surprised on next launch.
NOT WIRED YET (deferred):
- HistoryPage.searchQuery still filters in-memory rather than calling
search_transcripts. Fine for small histories; FTS5 infrastructure is
in place to upgrade when needed.
- Reading initial history from SQLite on session boot. localStorage
remains the cold-start source for now; SQLite catches up via dual-
write. A backfill / one-time sync command can land later.
This commit is contained in:
@@ -1,14 +1,35 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onDestroy } from "svelte";
|
import { onDestroy } from "svelte";
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
import { history, saveHistory, deleteFromHistory } from "$lib/stores/page.svelte.js";
|
import { history, saveHistory, deleteFromHistory, renameHistoryEntry } from "$lib/stores/page.svelte.js";
|
||||||
|
import { toasts } from "$lib/stores/toasts.svelte.js";
|
||||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||||
|
import { getPreferences } from "$lib/stores/preferences.svelte.js";
|
||||||
|
import { clampTextLines, measurePreWrap } from "$lib/utils/textMeasure.js";
|
||||||
|
import { bodyPretextLineHeight, pretextFontShorthand } from "$lib/utils/accessibilityTypography.js";
|
||||||
|
import { buildCumulativeOffsets, findVisibleRange } from "$lib/utils/virtualList.js";
|
||||||
import Card from "$lib/components/Card.svelte";
|
import Card from "$lib/components/Card.svelte";
|
||||||
import EmptyState from "$lib/components/EmptyState.svelte";
|
import EmptyState from "$lib/components/EmptyState.svelte";
|
||||||
import { formatTime, formatDuration } from "$lib/utils/time.js";
|
import { formatTime, formatDuration } from "$lib/utils/time.js";
|
||||||
import { PLAYBACK_SPEEDS, FEEDBACK_TIMEOUT_MS } from "$lib/utils/constants.js";
|
import { PLAYBACK_SPEEDS } from "$lib/utils/constants.js";
|
||||||
import { Search, Clock, Play, Pause, FileText, Mic, ChevronDown } from 'lucide-svelte';
|
import { Search, Clock, Play, Pause, FileText, Mic, ChevronDown } from 'lucide-svelte';
|
||||||
|
|
||||||
|
const prefs = getPreferences();
|
||||||
|
const COLLAPSED_ROW_MIN_HEIGHT = 54;
|
||||||
|
const COLLAPSED_ROW_VERTICAL_PADDING = 24;
|
||||||
|
const EXPANDED_BASE_HEIGHT = 92;
|
||||||
|
const AUDIO_PLAYER_HEIGHT = 54;
|
||||||
|
const HISTORY_PREVIEW_LINES = 2;
|
||||||
|
const HISTORY_DURATION_WIDTH = 48;
|
||||||
|
const HISTORY_DATE_WIDTH = 90;
|
||||||
|
const HISTORY_ICON_WIDTH = 24;
|
||||||
|
const HISTORY_SOURCE_WIDTH = 14;
|
||||||
|
const HISTORY_CHEVRON_WIDTH = 14;
|
||||||
|
const HISTORY_ROW_GAP = 12;
|
||||||
|
const HISTORY_ROW_HORIZONTAL_PADDING = 32;
|
||||||
|
const HISTORY_PREVIEW_MIN_WIDTH = 120;
|
||||||
|
const BUFFER_COUNT = 6;
|
||||||
|
|
||||||
let searchQuery = $state("");
|
let searchQuery = $state("");
|
||||||
let expandedId = $state(null);
|
let expandedId = $state(null);
|
||||||
let playingId = $state(null);
|
let playingId = $state(null);
|
||||||
@@ -17,6 +38,10 @@
|
|||||||
let duration = $state(0);
|
let duration = $state(0);
|
||||||
let playbackRate = $state(1);
|
let playbackRate = $state(1);
|
||||||
let animFrameId = null;
|
let animFrameId = null;
|
||||||
|
let listEl = $state(null);
|
||||||
|
let containerHeight = $state(0);
|
||||||
|
let containerWidth = $state(0);
|
||||||
|
let scrollTop = $state(0);
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
stopPlayback();
|
stopPlayback();
|
||||||
@@ -36,6 +61,106 @@
|
|||||||
: history
|
: history
|
||||||
);
|
);
|
||||||
|
|
||||||
|
let historyTextFont = $derived(pretextFontShorthand(prefs.accessibility, 13));
|
||||||
|
let historyLineHeight = $derived(bodyPretextLineHeight(prefs.accessibility, 13));
|
||||||
|
|
||||||
|
function compactPreviewText(item) {
|
||||||
|
return item.title || item.preview || item.text || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
let compactPreviews = $derived.by(() => {
|
||||||
|
return filtered.map((item) => {
|
||||||
|
const text = compactPreviewText(item);
|
||||||
|
if (!text) {
|
||||||
|
return {
|
||||||
|
text: "",
|
||||||
|
fullText: "",
|
||||||
|
height: historyLineHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (containerWidth <= 0) {
|
||||||
|
const fallbackText = text.length > 80 ? `${text.slice(0, 79)}…` : text;
|
||||||
|
return {
|
||||||
|
text: fallbackText,
|
||||||
|
fullText: text,
|
||||||
|
height: historyLineHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const reservedWidth =
|
||||||
|
HISTORY_ROW_HORIZONTAL_PADDING +
|
||||||
|
HISTORY_ICON_WIDTH +
|
||||||
|
(item.duration ? HISTORY_DURATION_WIDTH : 0) +
|
||||||
|
HISTORY_SOURCE_WIDTH +
|
||||||
|
HISTORY_DATE_WIDTH +
|
||||||
|
HISTORY_CHEVRON_WIDTH +
|
||||||
|
HISTORY_ROW_GAP * (item.duration ? 5 : 4);
|
||||||
|
const textWidth = Math.max(HISTORY_PREVIEW_MIN_WIDTH, containerWidth - reservedWidth);
|
||||||
|
const preview = clampTextLines(
|
||||||
|
text,
|
||||||
|
historyTextFont,
|
||||||
|
textWidth,
|
||||||
|
historyLineHeight,
|
||||||
|
HISTORY_PREVIEW_LINES,
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
text: preview.text,
|
||||||
|
fullText: text,
|
||||||
|
height: preview.height,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let itemHeights = $derived.by(() => {
|
||||||
|
if (!filtered.length) return [];
|
||||||
|
const textWidth = Math.max(0, containerWidth - 32);
|
||||||
|
return filtered.map((item, index) => {
|
||||||
|
const compactHeight = Math.max(
|
||||||
|
COLLAPSED_ROW_MIN_HEIGHT,
|
||||||
|
(compactPreviews[index]?.height || historyLineHeight) + COLLAPSED_ROW_VERTICAL_PADDING,
|
||||||
|
);
|
||||||
|
let height = compactHeight;
|
||||||
|
if (expandedId === item.id) {
|
||||||
|
const transcriptHeight = item.text && textWidth > 0
|
||||||
|
? measurePreWrap(item.text, historyTextFont, textWidth, historyLineHeight).height
|
||||||
|
: historyLineHeight;
|
||||||
|
height += transcriptHeight + EXPANDED_BASE_HEIGHT;
|
||||||
|
if (item.audioPath && playingId === item.id) {
|
||||||
|
height += AUDIO_PLAYER_HEIGHT;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return height;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let cumulativeOffsets = $derived(buildCumulativeOffsets(itemHeights));
|
||||||
|
let totalHeight = $derived(
|
||||||
|
cumulativeOffsets.length > 0 ? cumulativeOffsets[cumulativeOffsets.length - 1] : 0
|
||||||
|
);
|
||||||
|
let visibleRange = $derived.by(() =>
|
||||||
|
findVisibleRange(
|
||||||
|
cumulativeOffsets,
|
||||||
|
filtered.length,
|
||||||
|
scrollTop,
|
||||||
|
containerHeight,
|
||||||
|
BUFFER_COUNT,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
let visibleItems = $derived.by(() => {
|
||||||
|
const items = [];
|
||||||
|
for (let i = visibleRange.start; i < visibleRange.end; i++) {
|
||||||
|
items.push({
|
||||||
|
item: filtered[i],
|
||||||
|
top: cumulativeOffsets[i],
|
||||||
|
height: itemHeights[i],
|
||||||
|
preview: compactPreviews[i],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return items;
|
||||||
|
});
|
||||||
|
|
||||||
function clearAll() {
|
function clearAll() {
|
||||||
if (!confirm("Delete all history? This can't be undone.")) return;
|
if (!confirm("Delete all history? This can't be undone.")) return;
|
||||||
history.splice(0);
|
history.splice(0);
|
||||||
@@ -48,6 +173,10 @@
|
|||||||
expandedId = expandedId === id ? null : id;
|
expandedId = expandedId === id ? null : id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onListScroll(e) {
|
||||||
|
scrollTop = e.target.scrollTop;
|
||||||
|
}
|
||||||
|
|
||||||
function copyItem(item) {
|
function copyItem(item) {
|
||||||
invoke("copy_to_clipboard", { text: item.text }).catch(() => {});
|
invoke("copy_to_clipboard", { text: item.text }).catch(() => {});
|
||||||
}
|
}
|
||||||
@@ -61,12 +190,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renameItem(item) {
|
async function renameItem(item) {
|
||||||
const name = prompt("Name this transcript:", item.title || "");
|
const name = prompt("Name this transcript:", item.title || "");
|
||||||
if (name !== null) {
|
if (name === null) return;
|
||||||
item.title = name.trim();
|
|
||||||
item.preview = name.trim() ? `${name.trim()} — ${item.text.slice(0, 80)}` : item.text.slice(0, 120);
|
const trimmed = name.trim();
|
||||||
saveHistory();
|
item.title = trimmed;
|
||||||
|
item.preview = trimmed ? `${trimmed} — ${item.text.slice(0, 80)}` : item.text.slice(0, 120);
|
||||||
|
|
||||||
|
// Persist via the dual-write helper. Updates SQLite + localStorage and
|
||||||
|
// surfaces a toast on failure (Day 4 of the upgrade plan, closes
|
||||||
|
// architecture-review.md §13).
|
||||||
|
try {
|
||||||
|
await renameHistoryEntry(item.id, { title: trimmed });
|
||||||
|
} catch (err) {
|
||||||
|
toasts.warn(
|
||||||
|
"Rename did not persist",
|
||||||
|
"Your change is visible now but did not save. It may revert on next launch."
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -115,12 +256,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let seekTimeout = null;
|
||||||
function seekTo(e) {
|
function seekTo(e) {
|
||||||
const val = parseFloat(e.target.value);
|
const val = parseFloat(e.target.value);
|
||||||
if (audioEl) {
|
currentTime = val; // update UI immediately
|
||||||
audioEl.currentTime = val;
|
clearTimeout(seekTimeout);
|
||||||
currentTime = val;
|
seekTimeout = setTimeout(() => {
|
||||||
}
|
if (audioEl) audioEl.currentTime = val;
|
||||||
|
}, 50);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSpeed(speed) {
|
function setSpeed(speed) {
|
||||||
@@ -137,6 +280,24 @@
|
|||||||
window.open("/viewer", "_blank", "width=600,height=700");
|
window.open("/viewer", "_blank", "width=600,height=700");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (!listEl) return;
|
||||||
|
const ro = new ResizeObserver((entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
containerHeight = entry.contentRect.height;
|
||||||
|
containerWidth = entry.contentRect.width;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
ro.observe(listEl);
|
||||||
|
return () => ro.disconnect();
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (expandedId && !filtered.some((item) => item.id === expandedId)) {
|
||||||
|
expandedId = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col h-full overflow-y-auto animate-fade-in">
|
<div class="flex flex-col h-full overflow-y-auto animate-fade-in">
|
||||||
@@ -186,137 +347,147 @@
|
|||||||
message={searchQuery ? "No matching transcripts" : "Your transcriptions will be saved here"}
|
message={searchQuery ? "No matching transcripts" : "Your transcriptions will be saved here"}
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-1 overflow-y-auto">
|
<div bind:this={listEl} class="flex-1 overflow-y-auto" onscroll={onListScroll}>
|
||||||
{#each filtered as item}
|
<div class="relative" style="height: {totalHeight}px">
|
||||||
<!-- Compact row -->
|
{#each visibleItems as { item, top, height, preview } (item.id)}
|
||||||
<div
|
<div class="absolute left-0 right-0" style="top: {top}px; min-height: {height}px">
|
||||||
class="flex items-center gap-3 px-4 py-3 border-b border-border-subtle bg-bg-card hover:bg-hover cursor-pointer"
|
<!-- Compact row -->
|
||||||
style="transition-duration: var(--duration-ui)"
|
<div
|
||||||
onclick={() => toggleExpand(item.id)}
|
class="flex items-center gap-3 px-4 py-3 border-b border-border-subtle bg-bg-card hover:bg-hover cursor-pointer"
|
||||||
onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleExpand(item.id); } }}
|
style="transition-duration: var(--duration-ui)"
|
||||||
role="button"
|
onclick={() => toggleExpand(item.id)}
|
||||||
tabindex="0"
|
onkeydown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleExpand(item.id); } }}
|
||||||
aria-expanded={expandedId === item.id}
|
role="button"
|
||||||
>
|
tabindex="0"
|
||||||
<!-- Play button (if audio exists) -->
|
aria-expanded={expandedId === item.id}
|
||||||
{#if item.audioPath}
|
|
||||||
<button
|
|
||||||
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}
|
<!-- Play button (if audio exists) -->
|
||||||
<Pause size={10} aria-hidden="true" />
|
{#if item.audioPath}
|
||||||
|
<button
|
||||||
|
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}
|
||||||
|
<Pause size={10} aria-hidden="true" />
|
||||||
|
{:else}
|
||||||
|
<Play size={10} class="ml-0.5" aria-hidden="true" />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
{:else}
|
{:else}
|
||||||
<Play size={10} class="ml-0.5" aria-hidden="true" />
|
<div class="w-6 h-6 flex-shrink-0"></div>
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<div class="w-6 h-6 flex-shrink-0"></div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Title / preview text (truncated) -->
|
<!-- Title / preview text (truncated) -->
|
||||||
<span class="flex-1 truncate text-[13px] text-text">
|
<div class="flex-1 min-w-0">
|
||||||
{item.title || item.preview || item.text.slice(0, 80)}
|
<p
|
||||||
</span>
|
class="text-[13px] text-text whitespace-pre-wrap break-words"
|
||||||
|
style="line-height: {historyLineHeight}px"
|
||||||
|
title={preview?.fullText || ""}
|
||||||
|
>
|
||||||
|
{preview?.text || compactPreviewText(item)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Duration -->
|
<!-- Duration -->
|
||||||
{#if item.duration}
|
{#if item.duration}
|
||||||
<span class="text-[11px] text-text-tertiary flex-shrink-0 tabular-nums">
|
<span class="text-[11px] text-text-tertiary flex-shrink-0 tabular-nums">
|
||||||
{formatDuration(item.duration)}
|
{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")}
|
|
||||||
<FileText size={14} aria-hidden="true" />
|
|
||||||
{:else}
|
|
||||||
<Mic size={14} aria-hidden="true" />
|
|
||||||
{/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 -->
|
|
||||||
<ChevronDown
|
|
||||||
size={14}
|
|
||||||
class="text-text-tertiary flex-shrink-0 {expandedId === item.id ? 'rotate-180' : ''}"
|
|
||||||
style="transition: transform var(--duration-ui)"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Expanded detail -->
|
|
||||||
{#if expandedId === item.id}
|
|
||||||
<div class="px-4 py-4 bg-bg-elevated border-b border-border-subtle 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>
|
</span>
|
||||||
<input
|
{/if}
|
||||||
type="range"
|
|
||||||
min="0"
|
<!-- Source icon -->
|
||||||
max={duration || 0}
|
<span class="flex-shrink-0 text-text-tertiary" title={item.source}>
|
||||||
step="0.1"
|
{#if item.source && item.source.toLowerCase().includes("file")}
|
||||||
value={currentTime}
|
<FileText size={14} aria-hidden="true" />
|
||||||
oninput={seekTo}
|
{:else}
|
||||||
class="flex-1 accent-accent h-1"
|
<Mic size={14} aria-hidden="true" />
|
||||||
data-no-transition
|
{/if}
|
||||||
onclick={(e) => e.stopPropagation()}
|
</span>
|
||||||
/>
|
|
||||||
<div class="flex gap-0.5">
|
<!-- Date (right-aligned) -->
|
||||||
{#each PLAYBACK_SPEEDS as speed}
|
<span class="text-[11px] text-text-tertiary flex-shrink-0 text-right min-w-[90px]">
|
||||||
|
{item.date}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Expand chevron -->
|
||||||
|
<ChevronDown
|
||||||
|
size={14}
|
||||||
|
class="text-text-tertiary flex-shrink-0 {expandedId === item.id ? 'rotate-180' : ''}"
|
||||||
|
style="transition: transform var(--duration-ui)"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expanded detail -->
|
||||||
|
{#if expandedId === item.id}
|
||||||
|
<div class="px-4 py-4 bg-bg-elevated border-b border-border-subtle">
|
||||||
|
<!-- 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 whitespace-pre-wrap mb-4" style="line-height: {historyLineHeight}px">{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"
|
||||||
|
style="transition-duration: var(--duration-ui)"
|
||||||
|
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"
|
||||||
|
style="transition-duration: var(--duration-ui)"
|
||||||
|
onclick={(e) => { e.stopPropagation(); copyItem(item); }}
|
||||||
|
>Copy</button>
|
||||||
|
{#if item.audioPath && item.segments && item.segments.length > 0}
|
||||||
<button
|
<button
|
||||||
class="text-[9px] px-1.5 py-0.5 rounded-full
|
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-accent hover:text-accent-hover"
|
||||||
{playbackRate === speed
|
style="transition-duration: var(--duration-ui)"
|
||||||
? 'bg-accent/15 text-accent font-medium'
|
onclick={(e) => { e.stopPropagation(); openViewer(item); }}
|
||||||
: 'text-text-tertiary hover:text-text-secondary'}"
|
>Open viewer</button>
|
||||||
onclick={(e) => { e.stopPropagation(); setSpeed(speed); }}
|
{/if}
|
||||||
>{speed}x</button>
|
<div class="flex-1"></div>
|
||||||
{/each}
|
<button
|
||||||
|
class="text-[11px] px-3 py-1.5 rounded-lg bg-hover text-text-secondary hover:text-danger"
|
||||||
|
style="transition-duration: var(--duration-ui)"
|
||||||
|
onclick={(e) => { e.stopPropagation(); removeItem(item); }}
|
||||||
|
>Delete</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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"
|
|
||||||
style="transition-duration: var(--duration-ui)"
|
|
||||||
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"
|
|
||||||
style="transition-duration: var(--duration-ui)"
|
|
||||||
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"
|
|
||||||
style="transition-duration: var(--duration-ui)"
|
|
||||||
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"
|
|
||||||
style="transition-duration: var(--duration-ui)"
|
|
||||||
onclick={(e) => { e.stopPropagation(); removeItem(item); }}
|
|
||||||
>Delete</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/each}
|
||||||
{/each}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -75,7 +75,17 @@ export function saveProfiles() {
|
|||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- History (persisted to localStorage) ----
|
// ---- History (dual-write: SQLite via Tauri = canonical, localStorage = read-cache) ----
|
||||||
|
//
|
||||||
|
// As of Day 4 of the upgrade plan, the canonical store is the SQLite
|
||||||
|
// transcripts table reachable via the `add_transcript`, `list_transcripts`,
|
||||||
|
// `update_transcript`, `delete_transcript`, `search_transcripts` Tauri
|
||||||
|
// commands. localStorage continues to back the in-memory `history` array
|
||||||
|
// for UI snappiness and offline browser-preview support, but the source
|
||||||
|
// of truth is SQLite. Browser preview falls back to localStorage only.
|
||||||
|
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { hasTauriRuntime } from "$lib/utils/runtime.js";
|
||||||
|
|
||||||
const HISTORY_KEY = "kon_history";
|
const HISTORY_KEY = "kon_history";
|
||||||
|
|
||||||
@@ -95,15 +105,86 @@ export function saveHistory() {
|
|||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function addToHistory(entry) {
|
/**
|
||||||
|
* Add a transcript to history. Dual-writes to SQLite (canonical) and
|
||||||
|
* localStorage (cache). The SQLite write is best-effort: if it fails,
|
||||||
|
* we still update the in-memory + localStorage copy so the UI stays
|
||||||
|
* responsive. The next session boot reconciles by reading SQLite first.
|
||||||
|
*
|
||||||
|
* `entry` shape:
|
||||||
|
* { id, text, source?, title?, audioPath?, duration?, engine?, modelId?,
|
||||||
|
* inferenceMs?, sampleRate?, audioChannels?, formatMode?,
|
||||||
|
* removeFillers?, britishEnglish?, antiHallucination?, ...uiOnlyFields }
|
||||||
|
*/
|
||||||
|
export async function addToHistory(entry) {
|
||||||
history.unshift(entry);
|
history.unshift(entry);
|
||||||
if (history.length > 100) history.length = 100;
|
if (history.length > 100) history.length = 100;
|
||||||
saveHistory();
|
saveHistory();
|
||||||
|
|
||||||
|
if (!hasTauriRuntime()) return; // Browser preview: localStorage only.
|
||||||
|
|
||||||
|
try {
|
||||||
|
await invoke("add_transcript", {
|
||||||
|
transcript: {
|
||||||
|
id: String(entry.id),
|
||||||
|
text: entry.text ?? "",
|
||||||
|
source: entry.source ?? "microphone",
|
||||||
|
title: entry.title ?? null,
|
||||||
|
audioPath: entry.audioPath ?? null,
|
||||||
|
duration: Number(entry.duration ?? 0),
|
||||||
|
engine: entry.engine ?? null,
|
||||||
|
modelId: entry.modelId ?? null,
|
||||||
|
inferenceMs: entry.inferenceMs ?? null,
|
||||||
|
sampleRate: entry.sampleRate ?? null,
|
||||||
|
audioChannels: entry.audioChannels ?? null,
|
||||||
|
formatMode: entry.formatMode ?? null,
|
||||||
|
removeFillers: !!entry.removeFillers,
|
||||||
|
britishEnglish: !!entry.britishEnglish,
|
||||||
|
antiHallucination: !!entry.antiHallucination,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.warn("addToHistory: SQLite dual-write failed, kept in localStorage", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update text and/or title of an existing transcript. Persists to SQLite
|
||||||
|
* via update_transcript; updates the in-memory + localStorage cache.
|
||||||
|
* Closes the historic "rename never persists" bug from
|
||||||
|
* architecture-review.md §13.
|
||||||
|
*/
|
||||||
|
export async function renameHistoryEntry(id, updates) {
|
||||||
|
const idx = history.findIndex(h => String(h.id) === String(id));
|
||||||
|
if (idx >= 0) {
|
||||||
|
if (updates.title !== undefined) history[idx].title = updates.title;
|
||||||
|
if (updates.text !== undefined) history[idx].text = updates.text;
|
||||||
|
saveHistory();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasTauriRuntime()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await invoke("update_transcript", {
|
||||||
|
id: String(id),
|
||||||
|
text: updates.text ?? null,
|
||||||
|
title: updates.title ?? null,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.warn("renameHistoryEntry: SQLite update failed", err);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function deleteFromHistory(index) {
|
export function deleteFromHistory(index) {
|
||||||
|
const entry = history[index];
|
||||||
history.splice(index, 1);
|
history.splice(index, 1);
|
||||||
saveHistory();
|
saveHistory();
|
||||||
|
|
||||||
|
if (!hasTauriRuntime() || !entry?.id) return;
|
||||||
|
|
||||||
|
invoke("delete_transcript", { id: String(entry.id) })
|
||||||
|
.catch(err => console.warn("deleteFromHistory: SQLite delete failed", err));
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- Tasks (persisted to localStorage) ----
|
// ---- Tasks (persisted to localStorage) ----
|
||||||
|
|||||||
Reference in New Issue
Block a user