generated from nhcarrigan/template
hikari
d41b37d9e8
Add comprehensive E2E-style integration tests for notification commands that verify command structure without executing system APIs. This approach enables testing cross-platform code in Linux CI environments. Changes: - Add 10 E2E tests for notification command structure verification - Add helper functions to build commands for testing (Linux, Windows) - Test command arguments, quote escaping, unicode support, edge cases - Fix flaky frontend test by mocking console.error in config store test - Fix lint errors (unused variables, TypeScript any types, unused imports) - Fix TypeScript type errors in Svelte components Test coverage: - notifications.rs: 10 new E2E tests (command structure verification) - All 417 backend tests passing - All 363 frontend tests passing (no stderr output) - 61.08% backend coverage (appropriate for architecture) The E2E tests verify: ✓ Correct command names and arguments ✓ Proper quote escaping for PowerShell ✓ Unicode preservation across platforms ✓ Special character handling ✓ Edge case resilience (empty inputs) ✓ Cross-platform consistency ✨ This commit was crafted with love by Hikari~ 🌸
183 lines
6.6 KiB
Svelte
183 lines
6.6 KiB
Svelte
<script lang="ts">
|
|
import { todos } from "$lib/stores/todos";
|
|
import { CheckCircle, Circle, Loader } from "lucide-svelte";
|
|
|
|
interface Props {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const { onClose }: Props = $props();
|
|
|
|
const currentTodos = $derived($todos);
|
|
const hasTodos = $derived(currentTodos.length > 0);
|
|
const completedCount = $derived(currentTodos.filter((t) => t.status === "completed").length);
|
|
const totalCount = $derived(currentTodos.length);
|
|
</script>
|
|
|
|
<div
|
|
class="fixed top-0 right-0 h-full w-96 bg-[var(--bg-primary)] border-l border-[var(--accent-primary)]/30 shadow-2xl flex flex-col z-50"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between p-4 border-b border-[var(--accent-primary)]/30">
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-[var(--accent-primary)]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-[var(--text-primary)]">Hikari's Todo List</h2>
|
|
{#if hasTodos}
|
|
<p class="text-xs text-[var(--text-secondary)]">
|
|
{completedCount} of {totalCount} completed
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onclick={onClose}
|
|
class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors p-1 rounded-lg hover:bg-[var(--bg-secondary)]"
|
|
aria-label="Close todo panel"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
{#if !hasTodos}
|
|
<div class="flex flex-col items-center justify-center h-full text-[var(--text-secondary)]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-16 w-16 mb-4 opacity-50"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
<p class="text-center">No active todos</p>
|
|
<p class="text-sm text-center mt-2">I'll update this when I start working on tasks!</p>
|
|
</div>
|
|
{:else}
|
|
<div class="space-y-2">
|
|
{#each currentTodos as todo (todo.content)}
|
|
<div
|
|
class="group bg-[var(--bg-secondary)]/50 rounded-lg p-3 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/50 transition-all"
|
|
class:opacity-60={todo.status === "completed"}
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<!-- Status Icon -->
|
|
<div class="mt-0.5 flex-shrink-0">
|
|
{#if todo.status === "completed"}
|
|
<CheckCircle class="w-5 h-5 text-[var(--success-color)]" />
|
|
{:else if todo.status === "in_progress"}
|
|
<Loader class="w-5 h-5 text-[var(--accent-primary)] animate-spin" />
|
|
{:else}
|
|
<Circle class="w-5 h-5 text-[var(--text-secondary)]" />
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 min-w-0">
|
|
<p
|
|
class="text-sm font-medium"
|
|
class:text-[var(--text-secondary)]={todo.status === "completed"}
|
|
class:line-through={todo.status === "completed"}
|
|
class:text-[var(--text-primary)]={todo.status !== "completed"}
|
|
>
|
|
{todo.status === "in_progress" ? todo.activeForm : todo.content}
|
|
</p>
|
|
|
|
<!-- Status Badge -->
|
|
<div class="mt-1">
|
|
{#if todo.status === "completed"}
|
|
<span
|
|
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--success-color)]/20 text-[var(--success-color)] border border-[var(--success-color)]/30"
|
|
>
|
|
✓ Completed
|
|
</span>
|
|
{:else if todo.status === "in_progress"}
|
|
<span
|
|
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] border border-[var(--accent-primary)]/30 animate-pulse"
|
|
>
|
|
⚡ In Progress
|
|
</span>
|
|
{:else}
|
|
<span
|
|
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]"
|
|
>
|
|
○ Pending
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Footer with Progress Bar -->
|
|
{#if hasTodos}
|
|
<div class="border-t border-[var(--accent-primary)]/30 p-4 bg-[var(--bg-secondary)]/50">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs font-medium text-[var(--text-secondary)]">Progress</span>
|
|
<span class="text-xs font-medium text-[var(--accent-primary)]">
|
|
{Math.round((completedCount / totalCount) * 100)}%
|
|
</span>
|
|
</div>
|
|
<div class="w-full bg-[var(--bg-secondary)] rounded-full h-2 overflow-hidden">
|
|
<div
|
|
class="bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] h-2 rounded-full transition-all duration-500 ease-out"
|
|
style="width: {(completedCount / totalCount) * 100}%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
</style>
|