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>

src/lib/pages/HistoryPage.svelte

@@ -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) {
+  function toggleExpand(id) {
-    selectedItem = selectedItem === item ? null : item;
+    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"
+              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={() => openItem(item)}
+              onclick={() => toggleExpand(item.id)}
-              onkeydown={(e) => { if (e.key === "Enter") openItem(item); }}
+              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 audio exists) -->
-                <!-- Play button -->
+              {#if item.audioPath}
-                {#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}
                 <button
-                  class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-accent"
+                  class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0
-                  onclick={(e) => { e.stopPropagation(); renameItem(item); }}
+                    {playingId === item.id ? 'bg-accent/20 text-accent' : 'bg-accent/10 text-accent hover:bg-accent/20'}"
-                >Rename</button>
+                  onclick={(e) => { e.stopPropagation(); togglePlay(item); }}
-                <button
+                  aria-label={playingId === item.id && audioEl && !audioEl.paused ? "Pause" : "Play"}
-                  class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-accent"
+                >
-                  onclick={(e) => { e.stopPropagation(); copyItem(item); }}
+                  {#if playingId === item.id && audioEl && !audioEl.paused}
-                >Copy</button>
+                    <svg class="w-2.5 h-2.5" viewBox="0 0 24 24" fill="currentColor">
-                <button
+                      <rect x="6" y="4" width="4" height="16" rx="1" />
-                  class="text-[11px] text-text-tertiary opacity-0 group-hover:opacity-100 hover:text-danger"
+                      <rect x="14" y="4" width="4" height="16" rx="1" />
-                  onclick={(e) => { e.stopPropagation(); removeItem(item); }}
+                    </svg>
-                >Delete</button>
+                  {:else}
-              </div>
+                    <svg class="w-2.5 h-2.5 ml-0.5" viewBox="0 0 24 24" fill="currentColor">
-              <p class="text-[13px] text-text-secondary line-clamp-2 leading-relaxed">
+                      <path d="M8 5v14l11-7z" />
-                {item.title ? item.text.slice(0, 120) : item.preview}
+                    </svg>
-              </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>
                   {/if}
-                  <p class="text-[13px] text-text leading-relaxed whitespace-pre-wrap">{item.text}</p>
+                </button>
-                </div>
+              {: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}