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

<script lang="ts">
  import { invoke } from "@tauri-apps/api/core";
  import { openUrl } from "@tauri-apps/plugin-opener";
  import type { UpdateInfo } from "$lib/types/messages";
  import { configStore } from "$lib/stores/config";

  let updateInfo = $state<UpdateInfo | null>(null);
  let dismissed = $state(false);

  export async function checkForUpdates() {
    // Check if update checks are enabled
    const config = configStore.getConfig();
    if (!config.update_checks_enabled) {
      return;
    }

    try {
      const info = await invoke<UpdateInfo>("check_for_updates");
      if (info.has_update) {
        updateInfo = info;
        dismissed = false;
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : String(err);
      console.error("Failed to check for updates:", errorMessage);
    }
  }

  function dismiss() {
    dismissed = true;
  }

  async function openRelease() {
    if (updateInfo?.release_url) {
      await openUrl(updateInfo.release_url);
    }
  }
</script>

{#if updateInfo && !dismissed}
  <div
    class="fixed bottom-4 right-4 max-w-sm bg-[var(--bg-tertiary)] border border-[var(--accent-primary)] rounded-lg shadow-lg p-4 z-50"
  >
    <div class="flex items-start gap-3">
      <div class="text-2xl">🎉</div>
      <div class="flex-1">
        <h3 class="text-[var(--text-primary)] font-semibold mb-1">Update Available!</h3>
        <p class="text-[var(--text-secondary)] text-sm mb-2">
          A new version of Hikari Desktop is available:
          <span class="text-[var(--accent-primary)] font-mono">{updateInfo.latest_version}</span>
        </p>
        <p class="text-[var(--text-muted)] text-xs mb-3">
          Current version: {updateInfo.current_version}
        </p>
        <div class="flex gap-2">
          <button onclick={openRelease} class="btn-trans-gradient px-3 py-1.5 rounded text-sm">
            View Release
          </button>
          <button
            onclick={dismiss}
            class="px-3 py-1.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded text-sm hover:bg-[var(--bg-primary)] transition-all"
          >
            Later
          </button>
        </div>
      </div>
      <button
        onclick={dismiss}
        class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
        aria-label="Dismiss"
      >
        <svg
          class="w-4 h-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
  </div>
{/if}