frontend: separate more elements into different components

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

@@ -0,0 +1,26 @@
+<script>
+    import { HashIcon } from "svelte-feather-icons";
+
+    export let channel;
+</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);
+    }
+</style>
+
+<div class="top-bar">
+    <HashIcon />
+    <span class="h5 channel-heading">{ channel.name }</span>
+</div>

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

@@ -1,48 +1,9 @@
 <script>
-    import { HashIcon } from "svelte-feather-icons";
+    import ChannelTopBar from "./ChannelTopBar.svelte";
-    import request from "../../../request";
+    import MessageInput from "./MessageInput.svelte";
-    import { apiRoute } from "../../../storage";
-    import { messagesStoreProvider, userInfoStore } from "../../../stores";
     import Messages from "./Messages.svelte";
 
     export let channel;
-    let messageInput = "";
-
-    $: messages = messagesStoreProvider.getStore(channel.id);
-
-    const onKeydown = async (e) => {
-        if (e.code !== "Enter")
-            return;
-
-        if (messageInput.trim() === "" || !$userInfoStore)
-            return;
-
-        // optimistically add message to store
-        const optimisticMessageId = Math.floor(Math.random() * 999999);
-        const optimisticMessage = {
-            id: optimisticMessageId,
-            content: messageInput,
-            channel_id: channel.id,
-            author_id: $userInfoStore.id,
-            author_username: $userInfoStore.username,
-            created_at: Date.now().toString(),
-            _isPending: true
-        };
-        messages.addMessage(optimisticMessage);
-        messageInput = "";
-
-        const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
-            content: optimisticMessage.content
-        });
-        
-        if (res.success && res.ok) {
-            messages.setMessage(optimisticMessageId, res.json);
-        } else {
-            messages.deleteMessage({
-                id: optimisticMessageId
-            });
-        }
-    };
 </script>
 
 <style>
@@ -54,49 +15,10 @@
         width: 100%;
         height: 100%;
     }
-
-    .top-bar {
-        height: 3.4em;
-        width: 100%;
-        padding: var(--space-xs);
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid var(--background-color-2);
-    }
-
-    .channel-heading {
-        margin-left: var(--space-xxs);
-    }
-
-    .message-input-container {
-        width: 100%;
-        padding: var(--space-norm);
-    }
-
-    .message-input {
-        height: 3em;
-        width: 100%;
-        background-color : var(--background-color-2);
-        border: none;
-        color: currentColor;
-        border-radius: var(--radius-md);
-        padding: var(--space-sm);
-        font-size: inherit;
-        line-height: inherit;
-    }
-
-    .message-input::placeholder {
-        color: var(--foreground-color-3);
-    }
 </style>
 
 <div class="main-container">
-    <div class="top-bar">
+    <ChannelTopBar channel={ channel } />
-        <HashIcon />
-        <span class="h5 channel-heading">{ channel.name }</span>
-    </div>
     <Messages channelId="{ channel.id }" />
-    <div class="message-input-container">
+    <MessageInput channel={ channel } />
-        <input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
-    </div>
 </div>

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

@@ -0,0 +1,71 @@
+<script>
+    import request from "../../../request";
+    import { apiRoute } from "../../../storage";
+    import { messagesStoreProvider, userInfoStore } from "../../../stores";
+
+    export let channel;
+    let messageInput = "";
+
+    $: messages = messagesStoreProvider.getStore(channel.id);
+
+    const onKeydown = async (e) => {
+        if (e.code !== "Enter")
+            return;
+
+        if (messageInput.trim() === "" || !$userInfoStore)
+            return;
+
+        // optimistically add message to store
+        const optimisticMessageId = Math.floor(Math.random() * 999999);
+        const optimisticMessage = {
+            id: optimisticMessageId,
+            content: messageInput,
+            channel_id: channel.id,
+            author_id: $userInfoStore.id,
+            author_username: $userInfoStore.username,
+            created_at: Date.now().toString(),
+            _isPending: true
+        };
+        messages.addMessage(optimisticMessage);
+        messageInput = "";
+
+        const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
+            content: optimisticMessage.content
+        });
+        
+        if (res.success && res.ok) {
+            messages.setMessage(optimisticMessageId, res.json);
+        } else {
+            messages.deleteMessage({
+                id: optimisticMessageId
+            });
+        }
+    };
+</script>
+
+<style>
+    .message-input-container {
+        width: 100%;
+        padding: var(--space-norm);
+    }
+
+    .message-input {
+        height: 3em;
+        width: 100%;
+        background-color : var(--background-color-2);
+        border: none;
+        color: currentColor;
+        border-radius: var(--radius-md);
+        padding: var(--space-sm);
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    .message-input::placeholder {
+        color: var(--foreground-color-3);
+    }
+</style>
+
+<div class="message-input-container">
+    <input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
+</div>

frontend/src/main.js

@@ -1,7 +1,6 @@
 import App from './components/App.svelte';
 import gateway from './gateway';
-import request from './request';
+import { initStorageDefaults } from './storage';
-import { apiRoute, initStorageDefaults } from './storage';
 
 initStorageDefaults();
 gateway.init();