feat: add About dialog with version, author, and license info

Co-authored-by: Cursor <cursoragent@cursor.com>

src/lib/components/AboutDialog.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { getVersion } from '@tauri-apps/api/app';
+
+  let { onClose }: { onClose: () => void } = $props();
+
+  let version = $state('');
+
+  $effect(() => {
+    getVersion().then((v) => {
+      version = v;
+    });
+  });
+</script>
+
+<div class="overlay" role="presentation" onclick={onClose}>
+  <div class="dialog" role="dialog" onclick={(e) => e.stopPropagation()}>
+    <img class="app-icon" src="/favicon.svg" alt="GUI Video Clipper icon" />
+    <h2>GUI Video Clipper</h2>
+    {#if version}
+      <span class="version">v{version}</span>
+    {/if}
+    <p class="author">by cottongin</p>
+    <p class="license">MIT License</p>
+    <a
+      class="repo-link"
+      href="https://code.cottongin.xyz/cottongin/gui-video-clipper"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      code.cottongin.xyz/cottongin/gui-video-clipper
+    </a>
+    <div class="actions">
+      <button class="primary" onclick={onClose}>Close</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 900;
+  }
+
+  .dialog {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 32px;
+    max-width: 360px;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .app-icon {
+    width: 64px;
+    height: 64px;
+    border-radius: 12px;
+    margin-bottom: 8px;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .version {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-family: var(--font-mono);
+  }
+
+  .author {
+    color: var(--text-secondary);
+    font-size: 13px;
+    margin: 0;
+  }
+
+  .license {
+    color: var(--text-muted);
+    font-size: 12px;
+    margin: 0;
+  }
+
+  .repo-link {
+    color: var(--accent);
+    font-size: 12px;
+    text-decoration: none;
+  }
+
+  .repo-link:hover {
+    text-decoration: underline;
+  }
+
+  .actions {
+    margin-top: 12px;
+  }
+
+  .primary {
+    background: var(--accent);
+    color: var(--bg-primary);
+    font-weight: 600;
+  }
+</style>