wsb-daemon 0.275.7622

<script lang="ts">
  import { sync } from "../../stores/sync.svelte.js";
  import { ui } from "../../stores/ui.svelte.js";
  import AppIcon from "../layout/AppIcon.svelte";

  function handleOverlayClick(e: MouseEvent) {
    if (
      (e.target as HTMLElement).classList.contains(
        "about-overlay",
      )
    ) {
      ui.activeModal = null;
    }
  }

</script>

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
  class="about-overlay"
  onclick={handleOverlayClick}
  onkeydown={(e) => {
    if (e.key === "Escape") ui.activeModal = null;
  }}
>
  <div class="about-modal">
    <div class="about-header">
      <div class="about-logo" aria-hidden="true">
        <div class="about-logo-mark">
          <AppIcon name="layout-list" size={20} />
        </div>
      </div>
      <div class="about-name">WSB</div>
      <button
        class="close-btn"
        onclick={() => ui.activeModal = null}
      >
        <AppIcon name="x" size={14} />
      </button>
    </div>

    <div class="about-body">
      {#if sync.serverVersion}
        <div class="about-row">
          <span class="about-label">Version</span>
          <span class="about-value mono">
            {sync.serverVersion.version}
          </span>
        </div>
        <div class="about-row">
          <span class="about-label">Backend build</span>
          <span class="about-value mono">
            {sync.serverVersion.backend_build_id}
          </span>
        </div>
        <div class="about-row">
          <span class="about-label">Frontend build</span>
          <span class="about-value mono">
            {sync.serverVersion.frontend_build_id}
          </span>
        </div>
      {/if}

      <div class="about-note">
        This is not meant for use outside my personal projects.
      </div>
      <div class="about-note">
        It borrows heavily from
        <a
          href="https://github.com/wesm/agentsview"
          target="_blank"
          rel="noopener noreferrer"
        >
          wesm/agentsview
        </a>,
        which is super cool and is what should be used for other projects.
      </div>
    </div>

    <div class="about-footer">
      Bahram's Worktree Tool
    </div>
  </div>
</div>

<style>
  .about-overlay {
    position: fixed;
    inset: 0;
    background: var(--vscode-widget-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  .about-modal {
    width: 320px;
    background: var(--vscode-sideBar-background);
    border: 1px solid var(--vscode-panel-border);
    border-radius: var(--wsb-radius-lg);
    box-shadow: var(--wb-shadow-md);
    overflow: hidden;
  }

  .about-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--wb-spacing-20) var(--wb-spacing-16) var(--wb-spacing-12);
    position: relative;
  }

  .about-logo {
    margin-bottom: var(--wb-spacing-8);
  }

  .about-logo-mark {
    width: var(--wb-control-size-40);
    height: var(--wb-control-size-40);
    border-radius: var(--wb-corner-radius-10);
    background: var(--vscode-focusBorder, #3b82f6);
    color: var(--vscode-sideBar-background, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, black 12%, transparent);
  }

  .about-name {
    font-size: var(--wb-font-size-15);
    font-weight: 650;
    color: var(--vscode-editor-foreground);
    letter-spacing: -0.01em;
  }

  .close-btn {
    position: absolute;
    top: var(--wb-spacing-10);
    right: var(--wb-spacing-10);
    width: var(--wb-control-size-24);
    height: var(--wb-control-size-24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wb-font-size-16);
    color: var(--vscode-disabledForeground);
    border-radius: var(--wsb-radius-sm);
  }

  .close-btn:hover {
    background: var(--vscode-list-hoverBackground);
    color: var(--vscode-editor-foreground);
  }

  .about-body {
    padding: var(--wb-spacing-8) var(--wb-spacing-20) var(--wb-spacing-12);
  }

  .about-note {
    margin-top: var(--wb-spacing-10);
    font-size: var(--wb-font-size-12);
    line-height: 1.45;
    color: var(--vscode-descriptionForeground, var(--vscode-disabledForeground));
  }

  .about-note a {
    color: var(--vscode-textLink-foreground);
    text-decoration: none;
  }

  .about-note a:hover {
    text-decoration: underline;
  }

  .about-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wb-spacing-4) 0;
  }

  .about-label {
    font-size: var(--wb-font-size-12);
    color: var(--vscode-disabledForeground);
  }

  .about-value {
    font-size: var(--wb-font-size-12);
    color: var(--vscode-foreground);
  }

  .about-value.mono {
    font-family: var(--wsb-font-mono);
    font-size: var(--wb-font-size-11);
  }

  .about-footer {
    padding: var(--wb-spacing-10) var(--wb-spacing-20);
    border-top: 1px solid var(--vscode-panel-border);
    font-size: var(--wb-font-size-11);
    color: var(--vscode-disabledForeground);
    text-align: center;
  }
</style>