File size: 2,353 Bytes
e8a6c67
 
 
da4b993
86e2a29
e8a6c67
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
da4b993
e8a6c67
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86e2a29
e8a6c67
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script lang="ts">
  import { page } from '$app/state';
  import { briefingState } from '$lib/stores/briefingState.svelte';
  import RipMark from './RipMark.svelte';
  import StatusPill from './StatusPill.svelte';

  interface Props {
    query?: string | null;
    onResetCold?: () => void;
  }
  let { query = null, onResetCold }: Props = $props();

  /**
   * Open the curated print artifact in a new tab. The print route
   * hydrates from localStorage (key riprap:print:<queryId>), renders
   * briefing + citations only, and auto-fires window.print(). Hidden
   * until the live page signals briefingState.ready — we don't want
   * users exporting a half-streamed report.
   */
  function openPrintView() {
    if (typeof window === 'undefined') return;
    const id = page.params.queryId ?? (page.url.pathname === '/q/sample' ? 'sample' : '');
    if (!id) return;
    window.open(`/print/${encodeURIComponent(id)}`, '_blank', 'noopener');
  }
</script>

<header class="app-header no-print" data-screen-label="App header">
  <div class="app-header-inner">
    <div class="app-header-left">
      <a href="/" class="riprap-wordmark" aria-label="Riprap — home"><RipMark size={20} />riprap</a>
      <span class="app-header-sep">/</span>
      <span class="app-header-context">flood-exposure briefing</span>
    </div>
    <div class="app-header-mid">
      {#if query}
        <button
          type="button"
          class="app-header-query"
          onclick={onResetCold}
          aria-label="Edit query"
        >
          <span class="app-header-query-icon" aria-hidden="true"></span>
          <span class="app-header-query-text">{query}</span>
          <span class="app-header-query-edit">edit</span>
        </button>
      {/if}
    </div>
    <div class="app-header-right">
      <a class="app-header-link" href="#methodology">methodology</a>
      {#if briefingState.ready}
        <button
          type="button"
          class="app-header-link app-header-link-button"
          onclick={openPrintView}
          aria-label="Open curated PDF view of completed briefing in new tab"
        >export PDF</button>
      {/if}
      <StatusPill />
    </div>
  </div>
</header>

<style>
  .app-header-link-button {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }
</style>