tabbed bot page

3 files changed, 90 insertions, 45 deletions

diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
new file mode 100644
index 0000000..baa8f99
--- /dev/null
+++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
@@ -0,0 +1,87 @@
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+
+  export async function load({ params, fetch }) {
+    const apiClient = new ApiClient(fetch);
+    const botName = params["bot_name"];
+    const { bot, owner } = await apiClient.get(`/api/bots/${botName}`);
+
+    return {
+      props: {
+        bot,
+        owner,
+      },
+    };
+  }
+</script>
+
+<script lang="ts">
+  export let bot;
+  export let owner;
+</script>
+
+<div class="header">
+  <div class="header-title-line">
+    <h1 class="bot-name">{bot["name"]}</h1>
+    {#if owner}
+      <span class="title-line-owner">
+        by
+        <a class="owner-name" href="/users/{owner['username']}">
+          {owner["username"]}
+        </a>
+      </span>
+    {/if}
+  </div>
+  <div class="bot-tabs">
+    <a class="bot-tab" href={`/bots/${bot.name}`}>index</a>
+    <a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a>
+    <a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a>
+  </div>
+</div>
+<slot />
+
+<style lang="scss">
+  .header {
+    padding: 0 16px;
+    border-bottom: 1px solid black;
+  }
+
+  .header-title-line {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .title-line-owner {
+    padding: 0 16px;
+    color: #333;
+  }
+
+  $header-space-above-line: 12px;
+
+  .bot-name {
+    font-size: 24pt;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .owner-name {
+    font-size: 14pt;
+    // font-weight: 600;
+    text-decoration: none;
+    color: black;
+    margin-bottom: $header-space-above-line;
+  }
+
+  .bot-tabs {
+    display: flex;
+  }
+
+  .bot-tab {
+    padding: 8px;
+    text-decoration: none;
+    color: black;
+  }
+
+  .bot-tab:hover {
+    background-color: rgb(246, 248, 250);
+  }
+</style>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/index.svelte b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
index a5934b6..afe2cc7 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/index.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
@@ -57,15 +57,6 @@
 </form> -->
 
 <div class="container">
-  <div class="header">
-    <h1 class="bot-name">{bot["name"]}</h1>
-    {#if owner}
-      <a class="owner-name" href="/users/{owner['username']}">
-        {owner["username"]}
-      </a>
-    {/if}
-  </div>
-
   {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
     <div>
       <!-- TODO: can we avoid hardcoding the url? -->
@@ -126,28 +117,6 @@
     padding-bottom: 24px;
   }
 
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    margin-bottom: 60px;
-    border-bottom: 1px solid black;
-  }
-
-  $header-space-above-line: 12px;
-
-  .bot-name {
-    font-size: 24pt;
-    margin-bottom: $header-space-above-line;
-  }
-
-  .owner-name {
-    font-size: 14pt;
-    text-decoration: none;
-    color: #333;
-    margin-bottom: $header-space-above-line;
-  }
-
   .btn-container {
     padding: 24px;
     text-align: center;
diff --git a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte
index 6b5a2e1..67b769f 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte
@@ -12,11 +12,10 @@
         apiClient.get("/api/leaderboard"),
       ]);
 
-      const { bot, owner } = botData;
+      const { bot } = botData;
       return {
         props: {
           bot,
-          owner,
           botStats,
           leaderboard,
         },
@@ -29,7 +28,7 @@
     }
   }
 
-  function mergedStats(rawStats: object) {
+  function calcMergedStats(rawStats: object) {
     return Object.fromEntries(
       Object.entries(rawStats).map(([opponent, ms]) => {
         const mapStats = ms as { k: MatchupStats };
@@ -59,23 +58,13 @@
 
 <script lang="ts">
   export let bot: object;
-  export let owner: object;
   export let botStats: object;
   export let leaderboard: object[];
 
-  $: mergedStats = mergedStats(botStats);
+  $: mergedStats = calcMergedStats(botStats);
 </script>
 
 <div class="container">
-  <div class="header">
-    <h1 class="bot-name">{bot["name"]}</h1>
-    {#if owner}
-      <a class="owner-name" href="/users/{owner['username']}">
-        {owner["username"]}
-      </a>
-    {/if}
-  </div>
-  <h2>Stats</h2>
   <table class="leaderboard">
     <tr class="leaderboard-row leaderboard-header">
       <th class="leaderboard-rank">Rank</th>