web/ui/src/routes/dashboard/+layout.svelte


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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

<script lang="ts">
  import { page } from '$app/stores';
  import BrandMark from '$lib/components/BrandMark.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import { PLANS } from '$lib/plans';

  let { data, children } = $props();

  const tabs = [
    { id: '01', slug: 'keys',    label: 'Keys' },
    { id: '02', slug: 'usage',   label: 'Usage' },
    { id: '03', slug: 'account', label: 'Account' }
  ];

  let currentPath = $derived($page.url.pathname);
  let account = $derived(data.account);
  let planInfo = $derived(account ? PLANS[account.plan] : PLANS.free);
</script>

<svelte:head>
  <title>Tidy Index — Dashboard</title>
</svelte:head>

<header class="app-header">
  <div class="container app-header-inner">
    <a href="/dashboard/keys" class="brand" aria-label="Tidy Index dashboard home">
      <BrandMark />
      <span>Tidy&nbsp;Index</span>
    </a>

    <div class="app-header-meta">
      <span class="plan-chip">
        plan:&nbsp;<strong>{planInfo.name.toLowerCase()}</strong>
      </span>
      {#if account?.email}
        <span title={account.email}>{account.email}</span>
      {:else if account?.pending_email}
        <span class="pending-chip" title="Sign-in link sent — awaiting verification">
          pending&nbsp;·&nbsp;{account.pending_email}
        </span>
      {:else}
        <span class="text-mute">anonymous</span>
      {/if}
    </div>
  </div>
</header>

<div class="container">
  {#if !account?.email && !account?.pending_email}
    <div class="banner">
      <span>
        You're using an anonymous session.&nbsp;
        <strong>Sign in with an email so you don't lose access to your keys.</strong>
      </span>
      <a href="/dashboard/account?focus=email" class="btn btn-sm btn-ghost">Sign in</a>
    </div>
  {:else if account?.pending_email && !account?.email}
    <div class="banner">
      <span>
        We sent a sign-in link to&nbsp;<strong>{account.pending_email}</strong>.
        Check your inbox to finish signing in.
      </span>
      <a href="/dashboard/account" class="btn btn-sm btn-ghost">Manage</a>
    </div>
  {/if}

  <nav class="tabs" aria-label="Dashboard sections">
    <div class="tabs-inner">
      {#each tabs as tab}
        {@const active = currentPath.startsWith(`/dashboard/${tab.slug}`)}
        <a
          href="/dashboard/{tab.slug}"
          class="tab {active ? 'active' : ''}"
          aria-current={active ? 'page' : undefined}
        >
          <span class="tab-num">§&nbsp;{tab.id}</span>
          <span>{tab.label}</span>
        </a>
      {/each}
    </div>
  </nav>
</div>

<main class="app-main">
  <div class="container">
    {@render children()}
  </div>
</main>

<Footer />