From c9a93f1d0a7faa9f9fa3518558ea75e39e462455 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <Christoph.Brandau@janus-engineering.com>
Date: Wed, 8 Jul 2026 14:20:51 +0200
Subject: [PATCH] feat(blame): add search functionality to blame dialog

This update introduces a search bar to the blame dialog, allowing users to filter blame lines based on their input. The search highlights matching text segments, improving the usability of the blame feature for navigating large files.

- Implemented a search bar for filtering blame lines
- Added visual feedback for matched search terms
- Enhanced overall user experience in the blame dialog
---
 src/app.css                           |  45 ++++++++
 src/lib/components/BlameDialog.svelte | 141 +++++++++++++++++++++-----
 2 files changed, 163 insertions(+), 23 deletions(-)

diff --git a/src/app.css b/src/app.css
index b0448e9..e9b0c7e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3120,6 +3120,45 @@
     font-weight: 800;
   }
 
+  .blame-search-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 38px;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--color-border-subtle);
+    background: #111321;
+  }
+  .blame-search-bar svg {
+    position: absolute;
+    left: 20px;
+    color: var(--color-ink-faint);
+    pointer-events: none;
+  }
+  .blame-search-bar input {
+    width: 100%;
+    height: 26px;
+    padding: 0 34px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 6px;
+    background: #0b0e18;
+    color: var(--color-ink);
+    font-size: 12px;
+  }
+  .blame-search-clear {
+    position: absolute;
+    right: 14px;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--color-ink-faint);
+  }
+  .blame-search-clear svg {
+    position: static;
+  }
+
   .blame-column-headers {
     grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
   }
@@ -3233,6 +3272,12 @@
   .blame-group:hover .blame-line-code {
     background: #151a2b;
   }
+  .blame-search-hit {
+    padding: 0 1px;
+    border-radius: 3px;
+    background: rgba(240,182,72,0.28);
+    color: #f3d487;
+  }
 
   .global-search-body {
     display: grid;
diff --git a/src/lib/components/BlameDialog.svelte b/src/lib/components/BlameDialog.svelte
index b9a7884..0738f02 100644
--- a/src/lib/components/BlameDialog.svelte
+++ b/src/lib/components/BlameDialog.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { FileCode, LoaderCircle, X } from "@lucide/svelte";
+  import { FileCode, LoaderCircle, Search, X } from "@lucide/svelte";
   import type { GitBlameLine } from "../types";
 
   interface BlameGroup {
@@ -14,6 +14,11 @@
     lines: GitBlameLine[];
   }
 
+  interface TextSegment {
+    text: string;
+    matched: boolean;
+  }
+
   interface Props {
     filePath: string;
     lines: GitBlameLine[];
@@ -32,6 +37,8 @@
     onClose = () => {},
   }: Props = $props();
 
+  let blameSearch = $state("");
+
   function groupBlameLines(source: GitBlameLine[]): BlameGroup[] {
     const groups: BlameGroup[] = [];
     for (const line of source) {
@@ -67,7 +74,56 @@
     return `${group.authorName} <${group.authorEmail}>\n${group.summary}\n${group.hash}`;
   }
 
-  let groups = $derived(groupBlameLines(lines));
+  function blameLineSearchText(line: GitBlameLine): string {
+    return [
+      line.line_number,
+      line.content,
+      line.commit_hash,
+      line.short_hash,
+      line.author_name,
+      line.author_email,
+      formatBlameDate(line.author_time),
+      line.summary,
+      line.is_uncommitted ? "uncommitted not committed yet" : "",
+    ].join("\n").toLowerCase();
+  }
+
+  function lineMatchesSearch(line: GitBlameLine, query: string): boolean {
+    return !query || blameLineSearchText(line).includes(query);
+  }
+
+  function textSegments(value: string | number): TextSegment[] {
+    const text = String(value ?? "");
+    const query = blameSearch.trim();
+    if (!query || !text) return [{ text, matched: false }];
+
+    const lowerText = text.toLowerCase();
+    const lowerQuery = query.toLowerCase();
+    const segments: TextSegment[] = [];
+    let cursor = 0;
+    let matchIndex = lowerText.indexOf(lowerQuery);
+
+    while (matchIndex !== -1) {
+      if (matchIndex > cursor) {
+        segments.push({ text: text.slice(cursor, matchIndex), matched: false });
+      }
+      const end = matchIndex + query.length;
+      segments.push({ text: text.slice(matchIndex, end), matched: true });
+      cursor = end;
+      matchIndex = lowerText.indexOf(lowerQuery, cursor);
+    }
+
+    if (cursor < text.length) {
+      segments.push({ text: text.slice(cursor), matched: false });
+    }
+
+    return segments.length > 0 ? segments : [{ text, matched: false }];
+  }
+
+  let searchQuery = $derived(blameSearch.trim().toLowerCase());
+  let searchActive = $derived(searchQuery.length > 0);
+  let visibleLines = $derived(searchActive ? lines.filter((line) => lineMatchesSearch(line, searchQuery)) : lines);
+  let groups = $derived(groupBlameLines(visibleLines));
 </script>
 
 <div class="dialog-backdrop" role="presentation">
@@ -93,13 +149,28 @@
         </div>
       {:else if error}
         <div class="blank-state">{error}</div>
-      {:else if groups.length === 0}
+      {:else if lines.length === 0}
         <div class="blank-state">No blame information available for this file.</div>
       {:else}
         <div class="diff-header blame-code-header">
           <FileCode size={13} aria-hidden="true" />
           <span title={filePath}>{filePath}</span>
-          <strong>{lines.length} lines</strong>
+          <strong>{searchActive ? `${visibleLines.length} of ${lines.length} lines` : `${lines.length} lines`}</strong>
+        </div>
+        <div class="blame-search-bar">
+          <Search size={14} aria-hidden="true" />
+          <input
+            bind:value={blameSearch}
+            autocomplete="off"
+            spellcheck="false"
+            placeholder="Search blame"
+            aria-label="Search blame"
+          />
+          {#if searchActive}
+            <button class="btn-sm blame-search-clear" type="button" onclick={() => { blameSearch = ""; }} aria-label="Clear blame search">
+              <X size={14} aria-hidden="true" />
+            </button>
+          {/if}
         </div>
         <div class="split-col-headers blame-column-headers">
           <div class="split-col-label blame-commit-col-label">Commit</div>
@@ -107,26 +178,50 @@
         </div>
         <div class="split-diff blame-diff" role="table" aria-label="File blame">
           <div class="split-pane blame-scroll">
-            <div class="blame-code-table">
-              {#each groups as group (group.id)}
-                <div class="blame-group" class:uncommitted={group.isUncommitted} title={groupTooltip(group)}>
-                  <div class="blame-meta">
-                    <span class="blame-hash">{group.isUncommitted ? "Uncommitted" : group.shortHash}</span>
-                    <span class="blame-author">{group.isUncommitted ? "Not committed yet" : group.authorName}</span>
-                    <span class="blame-summary">{group.summary || "No commit message"}</span>
-                    {#if !group.isUncommitted}
-                      <span class="blame-date">{formatBlameDate(group.authorTime)}</span>
-                    {/if}
+            {#if groups.length === 0}
+              <div class="blank-state">No matches found.</div>
+            {:else}
+              <div class="blame-code-table">
+                {#each groups as group (group.id)}
+                  <div class="blame-group" class:uncommitted={group.isUncommitted} title={groupTooltip(group)}>
+                    <div class="blame-meta">
+                      <span class="blame-hash">
+                        {#each textSegments(group.isUncommitted ? "Uncommitted" : group.shortHash) as segment, index (`hash-${group.id}-${index}`)}
+                          {#if segment.matched}<mark class="blame-search-hit">{segment.text}</mark>{:else}{segment.text}{/if}
+                        {/each}
+                      </span>
+                      <span class="blame-author">
+                        {#each textSegments(group.isUncommitted ? "Not committed yet" : group.authorName) as segment, index (`author-${group.id}-${index}`)}
+                          {#if segment.matched}<mark class="blame-search-hit">{segment.text}</mark>{:else}{segment.text}{/if}
+                        {/each}
+                      </span>
+                      <span class="blame-summary">
+                        {#each textSegments(group.summary || "No commit message") as segment, index (`summary-${group.id}-${index}`)}
+                          {#if segment.matched}<mark class="blame-search-hit">{segment.text}</mark>{:else}{segment.text}{/if}
+                        {/each}
+                      </span>
+                      {#if !group.isUncommitted}
+                        <span class="blame-date">
+                          {#each textSegments(formatBlameDate(group.authorTime)) as segment, index (`date-${group.id}-${index}`)}
+                            {#if segment.matched}<mark class="blame-search-hit">{segment.text}</mark>{:else}{segment.text}{/if}
+                          {/each}
+                        </span>
+                      {/if}
+                    </div>
+                    <div class="split-pane-grid blame-lines">
+                      {#each group.lines as line (line.line_number)}
+                        <span class="split-num blame-line-number">{line.line_number}</span>
+                        <code class="split-cell blame-line-code">
+                          {#each textSegments(line.content) as segment, index (`line-${line.line_number}-${index}`)}
+                            {#if segment.matched}<mark class="blame-search-hit">{segment.text}</mark>{:else}{segment.text}{/if}
+                          {/each}
+                        </code>
+                      {/each}
+                    </div>
                   </div>
-                  <div class="split-pane-grid blame-lines">
-                    {#each group.lines as line (line.line_number)}
-                      <span class="split-num blame-line-number">{line.line_number}</span>
-                      <code class="split-cell blame-line-code">{line.content}</code>
-                    {/each}
-                  </div>
-                </div>
-              {/each}
-            </div>
+                {/each}
+              </div>
+            {/if}
           </div>
         </div>
       {/if}