frontend: very basic layout prototype

frontend/public/global.css

@@ -1,4 +1,10 @@
 body {
 	padding: 0;
 	margin: 0;
-}
+}
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}

frontend/src/components/App.svelte

@@ -1,5 +1,6 @@
 <script>
-	let count = 0;
+import ChannelView from "./Main.svelte";
+
 </script>
 
-<button on:click="{() => { count++ }}">{ count }</button>
+<ChannelView />

frontend/src/components/ChannelView.svelte

@@ -0,0 +1,40 @@
+<style>
+    .main-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+    }
+
+    .top-bar {
+        height: 3.4rem;
+        width: 100%;
+        padding: 6px;
+        background-color: papayawhip;
+    }
+
+    .messages-container {
+        height: 100%;
+        width: 100%;
+        background-color: mediumseagreen;
+    }
+
+    .message-input-container {
+        height: 3.4rem;
+        width: 100%;
+        padding: 6px;
+        background-color: antiquewhite;
+    }
+</style>
+
+<div class="main-container">
+    <div class="top-bar">
+
+    </div>
+    <div class="messages-container">
+
+    </div>
+    <div class="message-input-container">
+
+    </div>
+</div>

frontend/src/components/Main.svelte

@@ -0,0 +1,19 @@
+<script>
+import ChannelView from "./ChannelView.svelte";
+import Sidebar from "./Sidebar.svelte";
+
+</script>
+<style>
+    .flex-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: row;
+    }    
+</style>
+
+
+<div class="flex-container">
+    <Sidebar />
+    <ChannelView />
+</div>

frontend/src/components/Sidebar.svelte

@@ -0,0 +1,12 @@
+<style>
+    .sidebar {
+        height: 100%;
+        width: 255px;
+        background-color: black;
+    }
+</style>
+
+
+<div class="sidebar">
+
+</div>