gui-video-clipper/src/lib/components/AboutDialog.svelte

<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"
  tabindex="-1"
  onclick={onClose}
  onkeydown={(e) => {
    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
      if (e.key !== 'Escape') e.preventDefault();
      onClose();
    }
  }}
>
  <div
    class="dialog"
    role="dialog"
    tabindex="-1"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
  >
    <svg class="app-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="blade-grad" gradientUnits="userSpaceOnUse" x1="256" y1="130" x2="256" y2="290">
          <stop offset="0%" stop-color="#fb923c"/>
          <stop offset="100%" stop-color="#ea580c"/>
        </linearGradient>
      </defs>
      <rect width="512" height="512" rx="90" fill="#18181b"/>
      <g transform="translate(-3, 3)">
        <polygon points="72,220 265,220 239,292 72,292" fill="#3f3f46"/>
        <rect x="92" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="130" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="168" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="92" y="273" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="130" y="273" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="168" y="273" width="11" height="13" rx="3" fill="#27272a"/>
      </g>
      <g transform="translate(3, -3)">
        <polygon points="273,220 440,220 440,292 247,292" fill="#3f3f46"/>
        <rect x="298" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="345" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="392" y="226" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="278" y="273" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="330" y="273" width="11" height="13" rx="3" fill="#27272a"/>
        <rect x="382" y="273" width="11" height="13" rx="3" fill="#27272a"/>
      </g>
      <line x1="269" y1="216" x2="243" y2="296" stroke="#f97316" stroke-width="2" opacity="0.6"/>
      <g transform="rotate(20, 256, 256)">
        <polygon points="264,250 172,155 248,262" fill="url(#blade-grad)"/>
        <polygon points="248,250 340,155 264,262" fill="url(#blade-grad)"/>
        <polygon points="248,250 194,330 202,336 264,262" fill="#52525b"/>
        <polygon points="264,250 318,330 310,336 248,262" fill="#52525b"/>
        <circle cx="192" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
        <circle cx="320" cy="348" r="20" stroke="#a1a1aa" stroke-width="4" fill="#18181b"/>
        <circle cx="256" cy="256" r="7" fill="#a1a1aa"/>
      </g>
    </svg>
    <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>