move bot versions to its own tab

3 files changed, 90 insertions, 43 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
index baa8f99..f445cbb 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+  import { currentUser } from "$lib/stores/current_user";
+
   export let bot;
   export let owner;
 </script>
@@ -36,6 +38,9 @@
     <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>
+    {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
+      <a class="bot-tab" href={`/bots/${bot.name}/versions`}>versions</a>
+    {/if}
   </div>
 </div>
 <slot />
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 afe2cc7..ae38d13 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/index.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/index.svelte
@@ -20,8 +20,6 @@
       return {
         props: {
           bot,
-          owner,
-          versions,
           botStats,
           matches: matchesPage["matches"],
           errorMatches: errorMatchesPage["matches"],
@@ -43,8 +41,6 @@
   import LinkButton from "$lib/components/LinkButton.svelte";
 
   export let bot: object;
-  export let owner: object;
-  export let versions: object[];
   export let matches: object[];
   export let errorMatches: object[];
 </script>
@@ -58,31 +54,6 @@
 
 <div class="container">
   {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
-    <div>
-      <!-- TODO: can we avoid hardcoding the url? -->
-      Publish a new version by pushing a docker container to
-      <code>registry.planetwars.dev/{bot["name"]}:latest</code>, or using the web editor.
-    </div>
-
-    <div class="versions">
-      <h3>Versions</h3>
-      <ul class="version-list">
-        {#each versions.slice(0, 10) as version}
-          <li class="bot-version">
-            {dayjs(version["created_at"]).format("YYYY-MM-DD HH:mm")}
-            {#if version["container_digest"]}
-              <span class="container-digest">{version["container_digest"]}</span>
-            {:else}
-              <a href={`/code/${version["id"]}`}>view code</a>
-            {/if}
-          </li>
-        {/each}
-      </ul>
-      {#if versions.length == 0}
-        This bot does not have any versions yet.
-      {/if}
-    </div>
-
     <div class="matches">
       <h3>Matches with errors</h3>
       <MatchList matches={errorMatches} />
@@ -126,18 +97,4 @@
     padding: 12px;
     text-align: center;
   }
-
-  .versions {
-    margin: 30px 0;
-  }
-
-  .version-list {
-    padding: 0;
-  }
-
-  .bot-version {
-    display: flex;
-    justify-content: space-between;
-    padding: 4px 24px;
-  }
 </style>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/versions.svelte b/web/pw-server/src/routes/bots/[bot_name]/versions.svelte
new file mode 100644
index 0000000..73f891f
--- /dev/null
+++ b/web/pw-server/src/routes/bots/[bot_name]/versions.svelte
@@ -0,0 +1,85 @@
+<!-- TODO: should we prevent users who are not the bot owner
+from seeing this page? -->
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+  import dayjs from "dayjs";
+
+  export async function load({ params, fetch }) {
+    const apiClient = new ApiClient(fetch);
+
+    try {
+      const botName = params["bot_name"];
+      const { bot, versions } = await apiClient.get(`/api/bots/${botName}`);
+
+      versions.sort((a: string, b: string) =>
+        dayjs(a["created_at"]).isAfter(b["created_at"]) ? -1 : 1
+      );
+      return {
+        props: {
+          bot,
+          versions,
+        },
+      };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
+    }
+  }
+</script>
+
+<script lang="ts">
+  export let bot;
+  export let versions;
+</script>
+
+<div class="container">
+  <div>
+    <!-- TODO: can we avoid hardcoding the url? -->
+    Publish a new version by pushing a docker container to
+    <code>registry.planetwars.dev/{bot["name"]}:latest</code>, or using the web editor.
+  </div>
+
+  <div class="versions">
+    <h3>Versions</h3>
+    <ul class="version-list">
+      {#each versions as version}
+        <li class="bot-version">
+          {dayjs(version["created_at"]).format("YYYY-MM-DD HH:mm")}
+          {#if version["container_digest"]}
+            <span class="container-digest">{version["container_digest"]}</span>
+          {:else}
+            <a href={`/code/${version["id"]}`}>view code</a>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if versions.length == 0}
+      This bot does not have any versions yet.
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .container {
+    width: 800px;
+    max-width: 80%;
+    margin: 50px auto;
+    padding-bottom: 24px;
+  }
+
+  .versions {
+    margin: 30px 0;
+  }
+
+  .version-list {
+    padding: 0;
+  }
+
+  .bot-version {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 24px;
+  }
+</style>