market_screener/ui/src/lib/AnalysisSidebar.svelte

<script>
  import Spinner from '$lib/Spinner.svelte';

  let { sidebar, onClose } = $props();
</script>

{#if sidebar.open}
  <!-- Backdrop -->
  <div
    class="sidebar-backdrop"
    role="button"
    tabindex="-1"
    aria-label="Close sidebar"
    onclick={onClose}
    onkeydown={(e) => e.key === 'Escape' && onClose()}
  ></div>

  <!-- Panel -->
  <aside class="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-title">
        <span>🤖 LLM Analysis</span>
        {#if sidebar.type}<span class="sidebar-type">{sidebar.type}S</span>{/if}
      </div>
      <button class="sidebar-close" onclick={onClose}>✕</button>
    </div>

    <div class="sidebar-body">
      {#if sidebar.loading}
        <div class="sidebar-loading">
          <Spinner size="lg" label="Analyzing tickers…" />
        </div>

      {:else if sidebar.error}
        <div class="sidebar-error">{sidebar.error}</div>

      {:else if sidebar.analysis}
        {@const a = sidebar.analysis}
        <div class="sb-sentiment-row">
          <span class="sentiment-pill" data-sentiment={a.sentiment}>{a.sentiment}</span>
        </div>

        <p class="sb-summary">{a.summary}</p>

        <h3 class="sb-sub">Affected Industries</h3>
        <div class="sb-list">
          {#each a.affectedIndustries ?? [] as ind}
            <div class="sb-item">
              <span class="sb-name">{ind.name}</span>
              <span class="sb-reason">{ind.reason}</span>
            </div>
          {/each}
        </div>

        <h3 class="sb-sub">Related Tickers to Watch</h3>
        <div class="sb-list">
          {#each a.relatedTickers ?? [] as rt}
            <div class="sb-item">
              <span class="sb-name ticker">{rt.ticker}</span>
              <span class="sb-reason">{rt.reason}</span>
            </div>
          {/each}
        </div>
      {/if}
    </div>
  </aside>
{/if}

<style>
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: #00000055;
    z-index: 100;
  }

  .sidebar {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 380px;
    background: var(--bg-surface);
    border-left: 1px solid var(--blue-surface);
    z-index: 101;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--space-xl);
    border-bottom: 1px solid var(--border);
    background: var(--blue-badge);
    flex-shrink: 0;
  }

  .sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-secondary);
  }

  .sidebar-type {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    background: var(--blue-surface);
    color: var(--blue-muted);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
  }

  .sidebar-close {
    background: none;
    border: none;
    color: var(--text-dimmer);
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-xs);

    &:hover { color: var(--text-muted); background: var(--bg-card); }
  }

  .sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sidebar-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 60px 0;
  }

  .sidebar-error {
    color: var(--red);
    background: var(--red-bg);
    border-radius: var(--radius-md);
    padding: 12px var(--space-lg);
    font-size: var(--fs-md);
  }

  .sb-sentiment-row { display: flex; align-items: center; gap: 8px; }

  .sb-summary {
    font-size: var(--fs-md);
    color: var(--text-muted);
    line-height: 1.6;
    border-left: 3px solid var(--blue-surface);
    padding-left: 12px;
    margin: 0;
  }

  .sb-sub {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dimmer);
    margin: 0;
  }

  .sb-list { display: flex; flex-direction: column; gap: 8px; }

  .sb-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
  }

  .sb-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }

  .sb-reason {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    line-height: 1.4;
  }
</style>