hikari-desktop/src/lib/components/TodoPanel.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>