feat: add multiple productivity features and UI enhancements (#68)
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 54s
CI / Lint & Test (push) Successful in 14m42s
CI / Build Linux (push) Successful in 19m4s
CI / Build Windows (cross-compile) (push) Successful in 28m37s

## Summary

This PR adds a collection of productivity features and UI enhancements to improve the Hikari Desktop experience:

### New Features
- **Clipboard History** (#25) - Track and manage copied code snippets with language detection, search, filtering, and pinning
- **Quick Actions Panel** (#15) - Buttons for common quick actions like "Review PR", "Run tests", "Explain file", with customizable actions
- **Git Integration Panel** (#24) - View current branch, changed/staged files, quick git actions (commit, push, pull), and branch management
- **Session Import/Export** (#8) - Export conversations to JSON and import previously saved sessions
- **Snippet Library** (#22) - Save and reuse common prompts with categories and quick insert
- **Session History** (#14) - Auto-save conversations with browsable history and search
- **High Contrast Mode** (#20) - Accessibility theme with improved visibility
- **Minimize to System Tray** (#11) - System tray support with right-click menu

### UI Enhancements
- Trans-pride gradient theme applied across UI elements
- Copy button added to code blocks
- Linter formatting and eslint-disable comments for cleaner code

## Closes

Closes #8
Closes #11
Closes #14
Closes #15
Closes #20
Closes #22
Closes #24
Closes #25
Closes #34
Closes #35
Closes #36
Closes #37
Closes #69
Closes #70

## Test Plan

- [ ] Verify clipboard history captures code from code block copy buttons
- [ ] Verify clipboard history captures manually selected text from terminal
- [ ] Test snippet library CRUD operations and insertion
- [ ] Test quick actions panel with default and custom actions
- [ ] Test git panel shows correct status, branch, and performs git operations
- [ ] Test session history auto-save and restore
- [ ] Test session import/export roundtrip
- [ ] Verify high contrast mode provides adequate contrast
- [ ] Test minimize to tray functionality and tray menu
- [ ] Verify trans-pride gradient theme displays correctly in all themes

---
* This PR was created with help from Hikari~ 🌸*

Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Reviewed-on: #68
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>
This commit was merged in pull request #68.
This commit is contained in:
2026-01-25 22:19:00 -08:00
committed by Naomi Carrigan
parent 852a4d6661
commit 4c46d4c8fd
47 changed files with 11695 additions and 319 deletions
+93 -4
View File
@@ -3,6 +3,7 @@
import hljs from "highlight.js";
import { onMount } from "svelte";
import { openUrl } from "@tauri-apps/plugin-opener";
import { clipboardStore } from "$lib/stores/clipboard";
interface Props {
content: string;
@@ -17,7 +18,20 @@
renderer.code = ({ text, lang }) => {
const language = lang && hljs.getLanguage(lang) ? lang : "plaintext";
const highlighted = hljs.highlight(text, { language }).value;
return `<pre class="hljs-code-block"><code class="hljs language-${language}">${highlighted}</code></pre>`;
const escapedText = text.replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
return `<div class="code-block-wrapper">
<div class="code-block-header">
<span class="code-block-lang">${language}</span>
<button class="copy-code-btn" data-code="${escapedText}" title="Copy code">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span class="copy-text">Copy</span>
</button>
</div>
<pre class="hljs-code-block"><code class="hljs language-${language}">${highlighted}</code></pre>
</div>`;
};
renderer.codespan = ({ text }) => {
@@ -123,6 +137,34 @@
}
}
async function handleCopyClick(event: MouseEvent) {
const target = event.target as HTMLElement;
const copyBtn = target.closest(".copy-code-btn") as HTMLButtonElement;
if (copyBtn) {
event.preventDefault();
const code = copyBtn.dataset.code
?.replace(/&quot;/g, '"')
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">");
if (code) {
await navigator.clipboard.writeText(code);
// Capture to clipboard history
const langElement = copyBtn.parentElement?.querySelector(".code-block-lang");
const language = langElement?.textContent || null;
await clipboardStore.captureClipboard(code, language, "Claude response");
const textSpan = copyBtn.querySelector(".copy-text");
if (textSpan) {
textSpan.textContent = "Copied!";
setTimeout(() => {
textSpan.textContent = "Copy";
}, 2000);
}
}
}
}
onMount(() => {
if (containerElement) {
containerElement.querySelectorAll("pre code:not(.hljs)").forEach((block) => {
@@ -138,6 +180,7 @@
onclick={(e) => {
handleSpoilerClick(e);
handleLinkClick(e);
handleCopyClick(e);
}}
onkeydown={handleSpoilerKeydown}
role="presentation"
@@ -163,13 +206,59 @@
margin-bottom: 0;
}
.markdown-content :global(.code-block-wrapper) {
margin: 0.75em 0;
border-radius: 6px;
border: 1px solid var(--border-color);
overflow: hidden;
}
.markdown-content :global(.code-block-header) {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-secondary);
padding: 0.4em 0.75em;
border-bottom: 1px solid var(--border-color);
font-size: 0.8em;
}
.markdown-content :global(.code-block-lang) {
color: var(--text-secondary);
font-family: "JetBrains Mono", "Fira Code", monospace;
text-transform: lowercase;
}
.markdown-content :global(.copy-code-btn) {
display: flex;
align-items: center;
gap: 0.4em;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 0.25em 0.5em;
border-radius: 4px;
font-size: 0.9em;
transition: all 0.15s ease;
}
.markdown-content :global(.copy-code-btn:hover) {
background: var(--bg-hover);
color: var(--text-primary);
}
.markdown-content :global(.copy-code-btn svg) {
flex-shrink: 0;
}
.markdown-content :global(.hljs-code-block) {
background: var(--bg-code, #1e1e2e);
border-radius: 6px;
border-radius: 0;
padding: 1em;
margin: 0.75em 0;
margin: 0;
overflow-x: auto;
border: 1px solid var(--border-color);
border: none;
}
.markdown-content :global(.hljs-code-block code) {