frontend: separate app component from chat view

frontend/src/components/App.svelte

@@ -1,8 +1,6 @@
 <script>
 	import { apiClient } from "../api/common";
-	import MessageEntry from "./MessageEntry.svelte";
+	import ChatView from "./ChatView.svelte";
-	import MessageList from "./MessageList.svelte";
-	import SelectedGuildInfoDisplay from "./SelectedGuildInfoDisplay.svelte";
 
 	let messageStore = {};
 	let selectedGuild = null;
@@ -47,7 +45,6 @@
 			poll();
 		});
 
-	$: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
 
 	function onTextEntryMessage(event) {
 		if (!selectedGuild || !selectedChannel) {
@@ -87,34 +84,9 @@
 	}
 </script>
 
-<style>
+<ChatView
-	.message-list-container {
+	messageStore={messageStore}
-		height: 580px;
+	selectedChannel={selectedChannel}
-		overflow-y: auto;
+	selectedGuild={selectedGuild}
-		padding: 8px;
+	on:entermessage={onTextEntryMessage}
-		padding-left: 0;
+/>
-		margin-top: 4px;
-	}
-
-	main {
-		box-sizing: border-box;
-		width: 820px;
-		margin: 0 auto;
-	}
-
-	@media (max-width: 820px) {
-		main {
-			width: 100%;
-		}
-	}
-</style>
-
-<main>
-	<div class="card full-card">
-		<SelectedGuildInfoDisplay guild={selectedGuild} channel={selectedChannel} />
-		<div class="message-list-container">
-			<MessageList messages={selectedChannelMessages} />
-		</div>
-	</div>
-	<MessageEntry on:sendmessage={onTextEntryMessage} />
-</main>

frontend/src/components/ChatView.svelte

@@ -0,0 +1,46 @@
+<script>
+	import MessageEntry from "./MessageEntry.svelte";
+	import MessageList from "./MessageList.svelte";
+
+	export let messageStore = {};
+    export let selectedChannel;
+    export let selectedGuild;
+
+    $: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
+</script>
+
+<style>
+	.message-list-container {
+		height: 580px;
+		overflow-y: auto;
+		padding: 8px;
+		padding-left: 0;
+		margin-top: 4px;
+	}
+
+	.main-panel-header {
+		font-size: 1.1em;
+	}
+
+	main {
+		box-sizing: border-box;
+		width: 820px;
+		margin: 0 auto;
+	}
+
+	@media (max-width: 820px) {
+		main {
+			width: 100%;
+		}
+	}
+</style>
+
+<main>
+	<div class="card full-card">
+		<span class="main-panel-header">{(selectedGuild ? selectedGuild.name : "[no guild]")} • {(selectedChannel ? selectedChannel.name : "[no channel]")}</span>
+		<div class="message-list-container">
+			<MessageList messages={selectedChannelMessages} />
+		</div>
+	</div>
+	<MessageEntry on:entermessage placeholder="Go on, type something interesting!" />
+</main>

frontend/src/components/MessageEntry.svelte

@@ -1,6 +1,7 @@
 <script>
     import { createEventDispatcher } from "svelte";
 
+    export let placeholder;
     let text = "";
 
     const dispatch = createEventDispatcher();
@@ -8,11 +9,11 @@
     function onKeydown(e) {
         if (e.code === "Enter") {
             if (text.trim() !== "") {
-                dispatch("sendmessage", text);
+                dispatch("entermessage", text);
                 text = "";
             }
         }
     }
 </script>
 
-<input class="separated-card card full-card" placeholder="Go on, type something interesting!" on:keydown={onKeydown} bind:value={text} />
+<input class="separated-card card full-card" placeholder={placeholder} on:keydown={onKeydown} bind:value={text} />

frontend/src/components/SelectedGuildInfoDisplay.svelte

@@ -1,8 +0,0 @@
-<script>
-    export let guild;
-    export let channel;
-</script>
-
-{#if guild && channel}
-    <span>{guild.name} • {channel.name}</span>
-{/if}