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

<script lang="ts">
  import { invoke } from "@tauri-apps/api/core";
  import { notificationManager } from "$lib/notifications/notificationManager";

  let results: { method: string; success: boolean; error?: string }[] = [];
  let testing = false;

  async function testNotificationMethod(method: string, invokeCommand: string) {
    try {
      await invoke(invokeCommand, {
        title: "Hikari Test",
        body: `Testing ${method} notification method`,
      });
      return { method, success: true };
    } catch (error) {
      return { method, success: false, error: String(error) };
    }
  }

  async function testAllMethods() {
    testing = true;
    results = [];

    const methods = [
      { name: "WSL Toast (System Tray)", command: "send_wsl_notification" },
      { name: "VBScript (Popup Dialog)", command: "send_vbs_notification" },
      { name: "Notify-send (Linux)", command: "send_notify_send" },
      { name: "Windows PowerShell", command: "send_windows_notification" },
      { name: "Simple Message (Dialog)", command: "send_simple_notification" },
    ];

    for (const method of methods) {
      const result = await testNotificationMethod(method.name, method.command);
      results = [...results, result];
      // Wait a bit between tests
      await new Promise((resolve) => setTimeout(resolve, 500));
    }

    testing = false;
  }

  async function testIntegratedNotification() {
    await notificationManager.notifySuccess("Integrated notification test!");
  }
</script>

<div class="notification-debugger">
  <h3>Notification Method Debugger</h3>

  <div class="test-buttons">
    <button on:click={testAllMethods} disabled={testing}>
      {testing ? "Testing..." : "Test All Methods"}
    </button>

    <button on:click={testIntegratedNotification}> Test Integrated Notification </button>
  </div>

  {#if results.length > 0}
    <div class="results">
      <h4>Test Results:</h4>
      {#each results as result (result.method)}
        <div class="result" class:success={result.success} class:failed={!result.success}>
          <span class="method">{result.method}:</span>
          <span class="status">{result.success ? "✓ Success" : "✗ Failed"}</span>
          {#if result.error}
            <div class="error">{result.error}</div>
          {/if}
        </div>
      {/each}
    </div>
  {/if}
</div>

<style>
  .notification-debugger {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin: 1rem;
    background: var(--bg-secondary);
  }

  h3,
  h4 {
    margin-top: 0;
    color: var(--text-primary);
  }

  .test-buttons {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
  }

  button {
    padding: 0.5rem 1rem;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  button:hover:not(:disabled) {
    opacity: 0.8;
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .results {
    margin-top: 1rem;
  }

  .result {
    padding: 0.5rem;
    margin: 0.25rem 0;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .result.success {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }

  .result.failed {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
  }

  .method {
    font-weight: bold;
    min-width: 150px;
  }

  .status {
    flex: 1;
  }

  .error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--error-color);
    word-break: break-word;
  }
</style>