hikari-desktop/src/lib/components/AboutPanel.svelte

<script lang="ts">
  import { openUrl } from "@tauri-apps/plugin-opener";
  import { getVersion } from "@tauri-apps/api/app";
  import { onMount } from "svelte";

  interface Props {
    onClose: () => void;
  }

  const { onClose }: Props = $props();

  let appVersion = $state("");

  onMount(async () => {
    appVersion = await getVersion();
  });

  const links = {
    source: "https://git.nhcarrigan.com/nhcarrigan/hikari-desktop",
    discord: "https://chat.nhcarrigan.com",
    website: "https://nhcarrigan.com",
    license: "https://docs.nhcarrigan.com/legal/license/",
    changelog: "https://git.nhcarrigan.com/nhcarrigan/hikari-desktop/releases",
  };
</script>

<div
  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
  onclick={onClose}
  role="button"
  tabindex="0"
  onkeydown={(e) => e.key === "Escape" && onClose()}
>
  <div
    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-md w-full p-6"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="about-title"
    tabindex="-1"
  >
    <div class="flex items-center justify-between mb-4">
      <h2 id="about-title" class="text-xl font-semibold text-[var(--text-primary)]">
        About Hikari Desktop
      </h2>
      <button
        onclick={onClose}
        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
        aria-label="Close"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="space-y-4 text-sm">
      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">What is Hikari Desktop?</h3>
        <p class="text-[var(--text-secondary)]">
          Hikari Desktop is an AI-powered desktop assistant that brings Claude directly to your
          desktop. Built with love using Tauri, Svelte, and Rust for a fast, native experience.
        </p>
      </div>

      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">Version</h3>
        <p class="text-[var(--text-secondary)] mb-1">
          {appVersion || "Loading..."}
        </p>
        <button
          onclick={() => openUrl(links.changelog)}
          class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
        >
          View Changelog
        </button>
      </div>

      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">Source Code</h3>
        <button
          onclick={() => openUrl(links.source)}
          class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
        >
          View on Git
        </button>
      </div>

      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">Support & Community</h3>
        <p class="text-[var(--text-secondary)] mb-1">Found a bug or have a suggestion?</p>
        <button
          onclick={() => openUrl(links.discord)}
          class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
        >
          Join our Discord
        </button>
      </div>

      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">Built with 💕 by</h3>
        <button
          onclick={() => openUrl(links.website)}
          class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
        >
          Naomi Carrigan
        </button>
      </div>

      <div>
        <h3 class="font-medium text-[var(--text-primary)] mb-2">License</h3>
        <p class="text-[var(--text-secondary)] mb-1">
          This project is open source and available under our license terms.
        </p>
        <button
          onclick={() => openUrl(links.license)}
          class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
        >
          View License
        </button>
      </div>

      <div class="pt-4 mt-4 border-t border-[var(--border-color)]">
        <p class="text-xs text-[var(--text-tertiary)] text-center">
          Copyright © {new Date().getFullYear()} Naomi Carrigan. All rights reserved.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Ensure the panel appears above other content */
  [role="dialog"] {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
</style>