feat: add about and help panels, donate button, and live setting update (#48)

### Explanation _No response_ ### Issue Closes #26 Closes #27 ### Attestations - [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [ ] I have pinned the dependencies to a specific patch version. ### Style - [ ] I have run the linter and resolved any errors. - [ ] My pull request uses an appropriate title, matching the conventional commit standards. - [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #48 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
2026-01-20 20:04:03 -08:00
parent d83697e5cf
commit 377f81d978
6 changed files with 380 additions and 16 deletions
@@ -0,0 +1,151 @@
+<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-gray-100">About Hikari Desktop</h2>
+      <button
+        onclick={onClose}
+        class="p-1 text-gray-500 hover:text-gray-300 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-gray-200 mb-2">What is Hikari Desktop?</h3>
+        <p class="text-gray-400">
+          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-gray-200 mb-2">Version</h3>
+        <p class="text-gray-400 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-gray-200 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-gray-200 mb-2">Support & Community</h3>
+        <p class="text-gray-400 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-gray-200 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-gray-200 mb-2">License</h3>
+        <p class="text-gray-400 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-gray-500 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>