feat: batch of fixes and features (#56)

## Summary

This PR includes a batch of bug fixes and new features:

### Bug Fixes
- **Links in chat history now open in default browser** instead of navigating within the app
  - Closes #54
- **Allow spaces in tab names** - space key no longer acts like enter when renaming tabs
  - Closes #52

### New Features
- **`/cd` command** - Change the working directory of an active tab with context preservation
  - Closes #55
- **`/search` command** - Search and highlight matches within the conversation
  - Closes #32

## Test Plan
- [ ] Click a link in chat history and verify it opens in the default browser
- [ ] Rename a tab and verify spaces can be typed
- [ ] Use `/cd <path>` and verify the directory changes while preserving conversation context
- [ ] Use `/search <query>` and verify matches are highlighted in yellow
- [ ] Use `/search` with no args to clear the search highlighting

✨ This PR was created with help from Hikari~ 🌸

Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Reviewed-on: #56
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

src/lib/components/Markdown.svelte

@@ -2,12 +2,14 @@
   import { marked } from "marked";
   import hljs from "highlight.js";
   import { onMount } from "svelte";
+  import { openUrl } from "@tauri-apps/plugin-opener";
 
   interface Props {
     content: string;
+    searchQuery?: string;
   }
 
-  let { content }: Props = $props();
+  let { content, searchQuery = "" }: Props = $props();
   let containerElement: HTMLDivElement;
 
   const renderer = new marked.Renderer();
@@ -51,10 +53,47 @@
     return processed;
   }
 
+  function highlightSearchMatches(html: string, query: string): string {
+    if (!query) return html;
+
+    const codeBlockPlaceholders: string[] = [];
+    const tagPlaceholders: string[] = [];
+
+    // Temporarily replace code blocks with placeholders (don't highlight in code)
+    let processed = html.replace(/<(pre|code)[^>]*>[\s\S]*?<\/\1>/gi, (match) => {
+      codeBlockPlaceholders.push(match);
+      return `__CODE_SEARCH_PLACEHOLDER_${codeBlockPlaceholders.length - 1}__`;
+    });
+
+    // Temporarily replace all HTML tags with placeholders
+    processed = processed.replace(/<[^>]+>/g, (match) => {
+      tagPlaceholders.push(match);
+      return `__TAG_PLACEHOLDER_${tagPlaceholders.length - 1}__`;
+    });
+
+    // Apply search highlighting to text content
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const regex = new RegExp(`(${escapedQuery})`, "gi");
+    processed = processed.replace(regex, '<mark class="search-highlight">$1</mark>');
+
+    // Restore HTML tags
+    processed = processed.replace(/__TAG_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return tagPlaceholders[parseInt(index)];
+    });
+
+    // Restore code blocks
+    processed = processed.replace(/__CODE_SEARCH_PLACEHOLDER_(\d+)__/g, (_, index) => {
+      return codeBlockPlaceholders[parseInt(index)];
+    });
+
+    return processed;
+  }
+
   function renderMarkdown(text: string): string {
     try {
       const html = marked.parse(text) as string;
-      return processSpoilers(html);
+      const withSpoilers = processSpoilers(html);
+      return highlightSearchMatches(withSpoilers, searchQuery);
     } catch {
       return text;
     }
@@ -75,6 +114,15 @@
     }
   }
 
+  function handleLinkClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const anchor = target.closest("a");
+    if (anchor?.href) {
+      event.preventDefault();
+      openUrl(anchor.href);
+    }
+  }
+
   onMount(() => {
     if (containerElement) {
       containerElement.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
@@ -87,7 +135,10 @@
 <div
   bind:this={containerElement}
   class="markdown-content"
-  onclick={handleSpoilerClick}
+  onclick={(e) => {
+    handleSpoilerClick(e);
+    handleLinkClick(e);
+  }}
   onkeydown={handleSpoilerKeydown}
   role="presentation"
 >
@@ -291,4 +342,11 @@
     color: var(--text-primary);
     user-select: text;
   }
+
+  .markdown-content :global(.search-highlight) {
+    background-color: var(--search-highlight, #fbbf24);
+    color: var(--search-highlight-text, #000);
+    border-radius: 2px;
+    padding: 0 2px;
+  }
 </style>