generated from nhcarrigan/template
feat: add multiple productivity features and UI enhancements (#68)
## 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:
@@ -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, """).replace(/</g, "<").replace(/>/g, ">");
|
||||
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(/"/g, '"')
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/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) {
|
||||
|
||||
Reference in New Issue
Block a user