frontend: add username to top bar and improve paddings

frontend/public/global.css

@@ -63,6 +63,20 @@ body {
 	background-color: var(--background-color-1);
 }
 
+/* shared styles for all components */
+
+.top-bar {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	height: 3.4em;
+	width: 100%;
+	padding: var(--space-sm);
+	border-bottom: 1px solid var(--background-color-2);
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+
 .h1 {
 	font-size: 2.488rem;
 }
@@ -87,6 +101,8 @@ body {
 	font-size: 0.833rem;
 }
 
+/* change box model */
+
 *,
 ::before,
 ::after {

frontend/src/components/pages/main/ChannelTopBar.svelte

@@ -5,16 +5,6 @@
 </script>
 
 <style>
-    .top-bar {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        height: 3.4em;
-        width: 100%;
-        padding: var(--space-xs);
-        border-bottom: 1px solid var(--background-color-2);
-    }
-
     .channel-heading {
         margin-left: var(--space-xxs);
     }

frontend/src/components/pages/main/Sidebar.svelte

@@ -1,27 +1,36 @@
 <script>
     import { HashIcon } from "svelte-feather-icons";
     import { channels, selectedChannel } from "../../../stores";
+    import UserTopBar from "./UserTopBar.svelte";
 </script>
 
-<div class="sidebar">
-    {#each $channels as channel (channel.id)}
-        <button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
-            <div>
-                <HashIcon />
-            </div>
-            <span>{ channel.name }</span>
-        </button>
-    {/each}
+<div class="sidebar-container">
+    <UserTopBar />
+    <div class="sidebar">
+        {#each $channels as channel (channel.id)}
+            <button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
+                <div>
+                    <HashIcon />
+                </div>
+                <span>{ channel.name }</span>
+            </button>
+        {/each}
+    </div>
 </div>
 
 <style>
-    .sidebar {
+    .sidebar-container {
+        background-color: var(--background-color-1);
+        border-right: 1px solid var(--background-color-2);
         height: 100%;
         width: 255px;
         max-width: 255px;
-        padding: var(--space-sm);
-        background-color: var(--background-color-1);
-        border-right: 1px solid var(--background-color-2);
+    }
+
+    .sidebar {
+        width: 100%;
+        height: 100%;
+        padding: var(--space-xs);
     }
 
     .sidebar-button {
@@ -30,13 +39,13 @@
         justify-content: left;
         border: none;
         background-color: var(--background-color-1);
-        padding: var(--space-sm);
+        padding: var(--space-xs);
         margin-bottom: var(--space-xxs);
         color: currentColor;
         font: inherit;
         border-radius: var(--radius-md);
         width: 100%;
-        height: 3.4em;
+        max-height: 3.4em;
         text-align: center;
     }
 

frontend/src/components/pages/main/UserTopBar.svelte

@@ -0,0 +1,15 @@
+<script>
+    import { AtSignIcon } from "svelte-feather-icons";
+    import { userInfoStore } from "../../../stores";
+</script>
+
+<style>
+    .user-heading {
+        margin-left: var(--space-xxs);
+    }
+</style>
+
+<div class="top-bar">
+    <AtSignIcon />
+    <span class="h5 user-heading">{ $userInfoStore.username }</span>
+</div>

frontend/src/stores.js

@@ -13,12 +13,14 @@ class Store {
         const newLength = this._handlers.push(handler);
         const handlerIndex = newLength - 1;
         handler(this.value);
+        console.log(this.value);
         return () => {
             this._handlers.splice(handlerIndex, 1);
         };
     }
 
     updated() {
+        console.log(this.value);
         this._handlers.forEach(e => {
             e(this.value);
         });