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:
@@ -0,0 +1,563 @@
|
||||
<script lang="ts">
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { get } from "svelte/store";
|
||||
import { claudeStore, isClaudeProcessing } from "$lib/stores/claude";
|
||||
import { characterState, characterInfo } from "$lib/stores/character";
|
||||
import { isStreamerMode } from "$lib/stores/config";
|
||||
import { handleNewUserMessage } from "$lib/notifications/rules";
|
||||
import type { CharacterState, CharacterStateInfo } from "$lib/types/states";
|
||||
|
||||
interface Props {
|
||||
onExpand: () => void;
|
||||
}
|
||||
|
||||
let { onExpand }: Props = $props();
|
||||
|
||||
let inputValue = $state("");
|
||||
let isSubmitting = $state(false);
|
||||
let isConnected = $state(false);
|
||||
let isProcessing = $state(false);
|
||||
let streamerModeActive = $state(false);
|
||||
let currentState: CharacterState = $state("idle");
|
||||
let info: CharacterStateInfo = $state({
|
||||
state: "idle",
|
||||
label: "Ready",
|
||||
description: "Waiting for your command~",
|
||||
spriteFile: "idle.png",
|
||||
});
|
||||
|
||||
// Recent messages for compact display
|
||||
let recentMessages = $state<Array<{ type: string; content: string }>>([]);
|
||||
const MAX_RECENT_MESSAGES = 3;
|
||||
|
||||
claudeStore.connectionStatus.subscribe((status) => {
|
||||
isConnected = status === "connected";
|
||||
});
|
||||
|
||||
isClaudeProcessing.subscribe((processing) => {
|
||||
isProcessing = processing;
|
||||
});
|
||||
|
||||
isStreamerMode.subscribe((value) => {
|
||||
streamerModeActive = value;
|
||||
});
|
||||
|
||||
characterState.subscribe((state) => {
|
||||
currentState = state;
|
||||
});
|
||||
|
||||
characterInfo.subscribe((i) => {
|
||||
info = i;
|
||||
});
|
||||
|
||||
// Track recent terminal output
|
||||
claudeStore.terminalLines.subscribe((lines) => {
|
||||
const recent = lines.slice(-MAX_RECENT_MESSAGES).map((line) => ({
|
||||
type: line.type,
|
||||
content: line.content.substring(0, 100) + (line.content.length > 100 ? "..." : ""),
|
||||
}));
|
||||
recentMessages = recent;
|
||||
});
|
||||
|
||||
function getAnimationClass(): string {
|
||||
switch (currentState) {
|
||||
case "thinking":
|
||||
return "animate-thinking";
|
||||
case "typing":
|
||||
return "animate-typing";
|
||||
case "searching":
|
||||
return "animate-searching";
|
||||
case "success":
|
||||
return "animate-celebrate";
|
||||
case "error":
|
||||
return "animate-shake";
|
||||
default:
|
||||
return "animate-idle";
|
||||
}
|
||||
}
|
||||
|
||||
function getStateGlow(): string {
|
||||
switch (currentState) {
|
||||
case "thinking":
|
||||
return "glow-thinking";
|
||||
case "typing":
|
||||
return "glow-typing";
|
||||
case "success":
|
||||
return "glow-success";
|
||||
case "error":
|
||||
return "glow-error";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: Event) {
|
||||
event.preventDefault();
|
||||
|
||||
const message = inputValue.trim();
|
||||
if (!message || isSubmitting || !isConnected) return;
|
||||
|
||||
isSubmitting = true;
|
||||
inputValue = "";
|
||||
|
||||
handleNewUserMessage();
|
||||
claudeStore.addLine("user", message);
|
||||
characterState.setState("thinking");
|
||||
|
||||
try {
|
||||
const conversationId = get(claudeStore.activeConversationId);
|
||||
if (!conversationId) {
|
||||
throw new Error("No active conversation");
|
||||
}
|
||||
await invoke("send_prompt", {
|
||||
conversationId,
|
||||
message,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to send prompt:", error);
|
||||
claudeStore.addLine("error", `Failed to send: ${error}`);
|
||||
characterState.setTemporaryState("error", 3000);
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInterrupt() {
|
||||
try {
|
||||
const conversationId = get(claudeStore.activeConversationId);
|
||||
if (!conversationId) return;
|
||||
|
||||
await invoke("interrupt_claude", { conversationId });
|
||||
claudeStore.addLine("system", "Interrupted");
|
||||
characterState.setState("idle");
|
||||
} catch (error) {
|
||||
console.error("Failed to interrupt:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
handleSubmit(event);
|
||||
}
|
||||
// Escape expands to full mode
|
||||
if (event.key === "Escape") {
|
||||
onExpand();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="compact-container {getStateGlow()}">
|
||||
<!-- Character sprite (smaller) -->
|
||||
<div class="compact-character">
|
||||
<div class="sprite-wrapper {getAnimationClass()}">
|
||||
<img
|
||||
src="/sprites/{info.spriteFile}"
|
||||
alt="Hikari - {info.label}"
|
||||
class="compact-sprite"
|
||||
onerror={(e) => {
|
||||
const target = e.currentTarget as HTMLImageElement;
|
||||
target.src = "/sprites/placeholder.svg";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="state-badge">{info.label}</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent message preview -->
|
||||
<div class="message-preview">
|
||||
{#if recentMessages.length > 0}
|
||||
{#each recentMessages.slice(-1) as msg (msg.content)}
|
||||
<div class="preview-message {msg.type}">
|
||||
{msg.content}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="preview-message system">Ask me anything~</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Compact input -->
|
||||
<form onsubmit={handleSubmit} class="compact-input-form">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={inputValue}
|
||||
onkeydown={handleKeyDown}
|
||||
placeholder={isConnected ? "Quick message..." : "Not connected"}
|
||||
disabled={isSubmitting || !isConnected}
|
||||
class="compact-input"
|
||||
/>
|
||||
|
||||
<div class="compact-buttons">
|
||||
{#if isProcessing}
|
||||
<button type="button" onclick={handleInterrupt} class="compact-btn stop-btn" title="Stop">
|
||||
■
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isConnected || isSubmitting || !inputValue.trim()}
|
||||
class="compact-btn send-btn"
|
||||
title="Send"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button type="button" onclick={onExpand} class="compact-btn expand-btn" title="Expand (Esc)">
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<polyline points="9 21 3 21 3 15"></polyline>
|
||||
<line x1="21" y1="3" x2="14" y2="10"></line>
|
||||
<line x1="3" y1="21" x2="10" y2="14"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Streamer mode indicator -->
|
||||
{#if streamerModeActive}
|
||||
<div class="compact-live-indicator" title="Streamer mode active"></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.compact-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.compact-container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 2px;
|
||||
background: transparent;
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.glow-thinking {
|
||||
box-shadow: inset 0 0 30px rgba(147, 51, 234, 0.15);
|
||||
}
|
||||
|
||||
.glow-thinking::before {
|
||||
background: linear-gradient(180deg, #9333ea, var(--trans-blue));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-typing {
|
||||
box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.glow-typing::before {
|
||||
background: linear-gradient(180deg, #3b82f6, var(--trans-pink));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-success {
|
||||
box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.glow-success::before {
|
||||
background: linear-gradient(180deg, #10b981, var(--trans-blue));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.glow-error {
|
||||
box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.glow-error::before {
|
||||
background: linear-gradient(180deg, #ef4444, var(--trans-pink));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.compact-character {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sprite-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.compact-sprite {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.state-badge {
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.message-preview {
|
||||
min-height: 24px;
|
||||
max-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-message {
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.preview-message.user {
|
||||
color: var(--trans-pink);
|
||||
}
|
||||
|
||||
.preview-message.assistant {
|
||||
color: var(--trans-blue);
|
||||
}
|
||||
|
||||
.preview-message.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.compact-input-form {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.compact-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.compact-input:focus {
|
||||
border-color: var(--trans-blue);
|
||||
box-shadow: 0 0 0 2px rgba(91, 206, 250, 0.2);
|
||||
}
|
||||
|
||||
.compact-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compact-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.compact-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.compact-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.compact-btn:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent-primary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.compact-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.send-btn:not(:disabled) {
|
||||
background: var(--trans-gradient-vibrant);
|
||||
border-color: transparent;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.stop-btn {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
border-color: rgb(239, 68, 68);
|
||||
color: rgb(248, 113, 113);
|
||||
}
|
||||
|
||||
.stop-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.compact-live-indicator {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgb(239, 68, 68);
|
||||
animation: pulse-live 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-live {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Character animations (smaller scale for compact) */
|
||||
@keyframes idle-bob {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes thinking-sway {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes searching-look {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes celebrate {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05) rotate(3deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-idle {
|
||||
animation: idle-bob 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-thinking {
|
||||
animation: thinking-sway 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-typing {
|
||||
animation: typing-bounce 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-searching {
|
||||
animation: searching-look 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-celebrate {
|
||||
animation: celebrate 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user