phase-10: ui code enhancements

2026-06-08 13:13:17 -04:00
parent 357dfb8249
commit 3c321a4a79
18 changed files with 179 additions and 182 deletions
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { CalendarEvent } from '$lib/types.js';
+
+  let { events }: { events: CalendarEvent[] } = $props();
+
+  type EventType = 'earnings' | 'exdividend' | 'dividend';
+  const eventIcon  = (t: EventType): string => ({ earnings: '📊', exdividend: '💰', dividend: '💵' })[t] ?? '📅';
+  const eventColor = (t: EventType): string =>
+    ({ earnings: '#60a5fa', exdividend: '#facc15', dividend: '#4ade80' })[t] ?? '#94a3b8';
+
+  const fmtMoney = (n: number | null | undefined): string | null => n == null ? null :
+    n >= 1e9 ? '$' + (n / 1e9).toFixed(1) + 'B' :
+    n >= 1e6 ? '$' + (n / 1e6).toFixed(1) + 'M' : '$' + n.toFixed(2);
+
+  const upcoming = $derived(events.filter(e => !e.isPast).slice(0, 20));
+  const past     = $derived(events.filter(e => e.isPast).slice(0, 10));
+</script>
+
+{#if events.length > 0}
+  <section class="section">
+    <div class="section-header">
+      <h2>📅 Upcoming Events</h2>
+      <span class="count">{upcoming.length} upcoming</span>
+      {#if past.length > 0}
+        <span class="count" style="margin-left:4px">{past.length} recent</span>
+      {/if}
+    </div>
+    <div class="cal-grid">
+      {#each upcoming as ev}
+        <div class="cal-event">
+          <div class="cal-date">{ev.date}</div>
+          <div class="cal-content">
+            <span class="cal-ticker">{ev.ticker}</span>
+            <span class="cal-type" style="color:{eventColor(ev.type)}">
+              {eventIcon(ev.type)} {ev.label}
+              {#if ev.detail}<span class="cal-detail">· {ev.detail}</span>{/if}
+            </span>
+            {#if ev.epsEstimate != null}
+              <span class="cal-est">EPS est. ${ev.epsEstimate.toFixed(2)} · Rev est. {fmtMoney(ev.revEstimate)}</span>
+            {/if}
+          </div>
+        </div>
+      {/each}
+
+      {#if past.length > 0}
+        <div class="cal-divider">— Past —</div>
+        {#each past as ev}
+          <div class="cal-event past">
+            <div class="cal-date">{ev.date}</div>
+            <div class="cal-content">
+              <span class="cal-ticker">{ev.ticker}</span>
+              <span class="cal-type past-type">{eventIcon(ev.type)} {ev.label}</span>
+            </div>
+          </div>
+        {/each}
+      {/if}
+    </div>
+  </section>
+{/if}
+
@@ -0,0 +1,69 @@
+<script lang="ts">
+  interface TickerSnapshot {
+    price:  number | null;
+    signal: string | null;
+  }
+
+  interface MarketCall {
+    id:       string;
+    title:    string;
+    quarter:  string;
+    date:     string;
+    thesis:   string;
+    tickers:  string[];
+    snapshot: Record<string, TickerSnapshot>;
+  }
+
+  let {
+    call,
+    onDelete,
+  }: {
+    call:     MarketCall;
+    onDelete: (id: string) => void;
+  } = $props();
+
+  const signalColor = (s: string | null | undefined): string => {
+    if (s?.includes('Strong'))      return '#4ade80';
+    if (s?.includes('Momentum'))    return '#60a5fa';
+    if (s?.includes('Neutral'))     return '#94a3b8';
+    if (s?.includes('Speculation')) return '#fb923c';
+    return '#f87171';
+  };
+</script>
+
+<section class="section call-card">
+  <div class="section-header">
+    <div class="call-card-meta">
+      <a href="/calls/{call.id}" class="call-card-title">{call.title}</a>
+      <div class="call-card-badges">
+        <span class="tag">{call.quarter}</span>
+        <span class="call-date-badge">{call.date}</span>
+        <span class="count">{call.tickers.length} tickers</span>
+      </div>
+    </div>
+    <button class="btn-call-delete" onclick={() => onDelete(call.id)}>✕</button>
+  </div>
+
+  <div class="call-card-body">
+    <p class="call-thesis">{call.thesis}</p>
+
+    {#if Object.keys(call.snapshot ?? {}).length}
+      <div class="snapshot-grid">
+        {#each call.tickers as ticker}
+          {@const snap = call.snapshot[ticker]}
+          {#if snap}
+            <a href="/calls/{call.id}" class="snap-card">
+              <div class="snap-ticker">{ticker}</div>
+              <div class="snap-price">${snap.price?.toFixed(2) ?? '—'}</div>
+              <div class="snap-signal" style="color:{signalColor(snap.signal)}">
+                {snap.signal?.replace(/[✅⚡⚠️🔄❌]/u, '').trim() ?? '—'}
+              </div>
+            </a>
+          {/if}
+        {/each}
+      </div>
+      <a href="/calls/{call.id}" class="call-view-link">View performance →</a>
+    {/if}
+  </div>
+</section>
+
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Spinner from '$lib/components/shared/Spinner.svelte';
+
+  interface FormData {
+    title:   string;
+    quarter: string;
+    date:    string;
+    thesis:  string;
+    tickers: string;
+  }
+
+  let {
+    saving = false,
+    error  = null,
+    onSubmit,
+    onCancel,
+  }: {
+    saving?:  boolean;
+    error?:   string | null;
+    onSubmit: (data: FormData) => void;
+    onCancel: () => void;
+  } = $props();
+
+  function currentQuarter(): string {
+    const d = new Date();
+    return `Q${Math.ceil((d.getMonth() + 1) / 3)} ${d.getFullYear()}`;
+  }
+
+  let form = $state<FormData>({
+    title:   '',
+    quarter: currentQuarter(),
+    date:    new Date().toISOString().slice(0, 10),
+    thesis:  '',
+    tickers: '',
+  });
+
+  function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    onSubmit({ ...form });
+  }
+</script>
+
+<section class="section form-section">
+  <div class="section-header"><h2>New Market Call</h2></div>
+  <form class="call-form" onsubmit={handleSubmit}>
+    <div class="call-form-row">
+      <label>
+        <span>Title</span>
+        <input bind:value={form.title} placeholder="Q3 2025 — Rate pivot & tech rotation" required />
+      </label>
+      <label class="narrow">
+        <span>Quarter</span>
+        <input bind:value={form.quarter} placeholder="Q3 2025" required />
+      </label>
+      <label class="narrow">
+        <span>Date</span>
+        <input type="date" bind:value={form.date} required />
+      </label>
+    </div>
+    <label>
+      <span>Thesis</span>
+      <textarea
+        bind:value={form.thesis}
+        rows="4"
+        placeholder="Describe the macro thesis behind this call — why these tickers, why now..."
+        required
+      ></textarea>
+    </label>
+    <label>
+      <span>Tickers to track</span>
+      <input bind:value={form.tickers} placeholder="AAPL, MSFT, TLT, GLD …" required />
+      <span class="call-hint">Comma or space separated. Current prices will be snapshot automatically.</span>
+    </label>
+    {#if error}
+      <div class="form-error-block">⚠ {error}</div>
+    {/if}
+    <div class="call-form-actions">
+      <button type="submit" class="btn-primary" disabled={saving}>
+        {#if saving}<Spinner size="sm" /><span>Snapshotting prices…</span>
+        {:else}Save Call{/if}
+      </button>
+      <button type="button" class="btn-ghost" onclick={onCancel}>Cancel</button>
+    </div>
+  </form>
+</section>
+
@@ -0,0 +1,3 @@
+export { default as CallForm } from './CallForm.svelte';
+export { default as CallCard } from './CallCard.svelte';
+export { default as CalendarSection } from './CalendarSection.svelte';