integrate UserControls into main navbar

3 files changed, 90 insertions, 126 deletions

diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte
deleted file mode 100644
index 184a40a..0000000
--- a/web/pw-server/src/lib/components/navbar/UserControls.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { get_session_token, clear_session_token } from "$lib/auth";
-  import { currentUser } from "$lib/stores/current_user";
-
-  import { onMount } from "svelte";
-
-  onMount(async () => {
-    // TODO: currentUser won't be set if the navbar component is not created.
-    const session_token = get_session_token();
-    if (!session_token) {
-      return;
-    }
-
-    let response = await fetch("/api/users/me", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${session_token}`,
-      },
-    });
-
-    if (!response.ok) {
-      throw response.statusText;
-    }
-
-    const user = await response.json();
-    currentUser.set(user);
-  });
-
-  function signOut() {
-    // TODO: destroy session on server
-    currentUser.set(null);
-    clear_session_token();
-  }
-</script>
-
-<div class="user-controls">
-  {#if $currentUser}
-    <a class="current-user-name" href="/users/{$currentUser['username']}">
-      {$currentUser["username"]}
-    </a>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="sign-out" on:click={signOut}>Sign out</div>
-  {:else}
-    <a class="account-href" href="/login">Sign in</a>
-    <a class="account-href" href="/register">Sign up</a>
-  {/if}
-</div>
-
-<style lang="scss">
-  @mixin navbar-item {
-    font-size: 18px;
-    font-family: Helvetica, sans-serif;
-    padding: 4px 8px;
-    font-weight: 400;
-  }
-
-  .account-href {
-    @include navbar-item;
-    color: #eee;
-    text-decoration: none;
-  }
-
-  .current-user-name {
-    @include navbar-item;
-    text-decoration: none;
-    color: #fff;
-  }
-
-  .sign-out {
-    @include navbar-item;
-    color: #ccc;
-    cursor: pointer;
-  }
-
-  .user-controls {
-    display: flex;
-    align-items: center;
-  }
-
-  // TODO: pretty hacky
-  @media screen and (max-width: 600px) {
-    .user-controls {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-</style>
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index e826ab1..59f6c4b 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -1,17 +1,52 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate } from "$app/navigation";
-  import UserControls from "$lib/components/navbar/UserControls.svelte";
+  import { afterNavigate } from "$app/navigation";
 
   import "./style.css";
 
-  let isExpanded = false;
+  import { get_session_token, clear_session_token } from "$lib/auth";
+  import { currentUser } from "$lib/stores/current_user";
+
+  import { onMount } from "svelte";
+
+  // TODO: ideally we'd not store this in the user session,
+  // and we'd be able to handle this in the load() function
+  onMount(async () => {
+    // TODO: currentUser won't be set if the navbar component is not created.
+    const session_token = get_session_token();
+    if (!session_token) {
+      return;
+    }
+
+    let response = await fetch("/api/users/me", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${session_token}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw response.statusText;
+    }
+
+    const user = await response.json();
+    currentUser.set(user);
+  });
+
+  function signOut() {
+    // TODO: destroy session on server
+    currentUser.set(null);
+    clear_session_token();
+  }
+
+  let navbarExpanded = false;
 
   function toggleExpanded() {
-    isExpanded = !isExpanded;
+    navbarExpanded = !navbarExpanded;
   }
 
   afterNavigate(() => {
-    isExpanded = false;
+    navbarExpanded = false;
   });
 </script>
 
@@ -20,12 +55,13 @@
 </svelte:head>
 
 <div class="outer-container">
-  <div class="navbar" class:expanded={isExpanded}>
-    <div class="navbar-left">
-      <a href="/" class="navbar-header">
-        <img alt="logo" src="/ship.svg" height="32px'" />
-        PlanetWars
-      </a>
+  <div class="navbar" class:expanded={navbarExpanded}>
+    <a href="/" class="navbar-header">
+      <img alt="logo" src="/ship.svg" height="32px'" />
+      PlanetWars
+    </a>
+    <div class="navbar-expand" on:click={toggleExpanded}>expand</div>
+    <div class="navbar-items">
       <div class="navbar-item">
         <a href="/editor">Editor</a>
       </div>
@@ -36,13 +72,25 @@
         <a href="/docs/rules">How to play</a>
       </div>
       <div class="navbar-divider" />
-      <div class="navbar-item">
-        <UserControls />
-      </div>
+      {#if $currentUser}
+        <div class="navbar-item">
+          <a class="current-user-name" href="/users/{$currentUser['username']}">
+            {$currentUser["username"]}
+          </a>
+        </div>
+        <div class="navbar-item">
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div class="sign-out" on:click={signOut}>Sign out</div>
+        </div>
+      {:else}
+        <div class="navbar-item">
+          <a class="account-href" href="/login">Sign in</a>
+        </div>
+        <div class="navbar-item">
+          <a class="account-href" href="/register">Sign up</a>
+        </div>
+      {/if}
     </div>
-    <!-- <div class="navbar-right">
-    </div> -->
-    <div class="navbar-expand" on:click={toggleExpanded}>expand</div>
   </div>
   <slot />
 </div>
@@ -70,7 +118,7 @@
     padding: 0 15px;
   }
 
-  .navbar-left {
+  .navbar-items {
     display: flex;
     width: 100%;
     align-items: center;
@@ -104,7 +152,7 @@
   }
   .navbar-item {
     margin: auto 0;
-    padding: 0 8px;
+    padding: 8px;
   }
   .navbar-item a {
     font-size: 14px;
@@ -113,6 +161,24 @@
     font-weight: 600;
   }
 
+  .navbar-item a:hover {
+    color: #ccc;
+  }
+
+  .current-user-name {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  .sign-out {
+    color: #ccc;
+    cursor: pointer;
+  }
+
+  .sign-out:hover {
+    color: #fff;
+  }
+
   .navbar-expand {
     color: white;
     display: none;
@@ -120,7 +186,7 @@
     height: $navbarHeight;
   }
   @media screen and (max-width: 600px) {
-    .navbar-item {
+    .navbar-items {
       display: none;
     }
 
@@ -130,24 +196,14 @@
 
     .navbar.expanded {
       height: auto;
+      flex-wrap: wrap;
     }
 
-    .navbar.expanded .navbar-left {
+    .navbar.expanded .navbar-items {
+      display: flex;
       flex-direction: column;
       align-items: flex-start;
-    }
-
-    .navbar.expanded .navbar-item {
-      display: block;
-      padding: 8px;
-    }
-
-    .navbar-right {
-      display: none;
-    }
-
-    .navbar.expanded .navbar-right {
-      display: flex;
+      width: 100%;
     }
 
     .navbar-expand {
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 f527690..422e446 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
@@ -23,10 +23,6 @@
   export let owner;
 </script>
 
-<svelte:head>
-  <title>{bot["name"]}</title>
-</svelte:head>
-
 <div class="header">
   <div class="header-title-line">
     <h1 class="bot-name">{bot["name"]}</h1>