fix: Formatting

Author: klawr

frontend/src/components/messages.svelte

@@ -26,10 +26,12 @@ THE SOFTWARE.
 
 	export let selectedTopic: Treebranch | null; // Can't be null.
 
-	let selectedMessage = selectedTopic?.messages[0]!;
+	let selectedMessage = selectedTopic?.messages[0];
 	function selectMessage(message: CustomEvent) {
-		selectedMessage = selectedTopic?.messages
-			.find(msg => msg.timestamp == message.detail)!;
+		const foundMessage = selectedTopic?.messages.find((msg) => msg.timestamp == message.detail);
+		if (foundMessage) {
+			selectedMessage = foundMessage;
+		}
 	}
 </script>
 
@@ -41,12 +43,14 @@ THE SOFTWARE.
 
 	{#if selectedTopic?.messages.length}
 		<Tile light>
-			<h5>
-				Selected message: {new Date(selectedMessage.timestamp).toLocaleString()}
-			</h5>
-			<div style="height: 30em;">
-				<Monaco readonly bind:code={selectedMessage.text} />
-			</div>
+			{#if selectedMessage}
+				<h5>
+					Selected message: {new Date(selectedMessage.timestamp).toLocaleString()}
+				</h5>
+				<div style="height: 30em;">
+					<Monaco readonly bind:code={selectedMessage.text} />
+				</div>
+			{/if}
 		</Tile>
 	{/if}
 
@@ -57,7 +61,7 @@ THE SOFTWARE.
 				{#each selectedTopic?.messages as message}
 					<RadioTile value={message.timestamp} style="height: 1em">
 						{new Date(message.timestamp).toLocaleString() +
-								(message.delta_t ? ' (' + message.delta_t + ' ms)' : '')}
+							(message.delta_t ? ' (' + message.delta_t + ' ms)' : '')}
 					</RadioTile>
 				{/each}
 			</TileGroup>

frontend/src/components/publish_message.svelte

@@ -20,7 +20,7 @@ THE SOFTWARE.
 -->
 
 <script lang="ts">
-	import { Button, ComboBox, Row, TextInput, Tile } from 'carbon-components-svelte';
+	import { Button, ComboBox, TextInput, Tile } from 'carbon-components-svelte';
 	import { requestCommandAddition, requestPublishMqttMessage } from '$lib/socket';
 	import { Add, TrashCan } from 'carbon-icons-svelte';
 	import type { BrokerRepositoryEntry, Command } from '$lib/state';
@@ -93,7 +93,7 @@ THE SOFTWARE.
 	function clicked() {
 		setTimeout(() => {
 			if (open) {
-				scrollBy({top: 1000, behavior: 'smooth'});
+				scrollBy({ top: 1000, behavior: 'smooth' });
 			}
 		}, 0);
 	}

frontend/src/routes/+page.svelte

@@ -254,27 +254,29 @@ THE SOFTWARE.
 							<Tab label="Treeview" />
 							<Tab label="Pipeline" />
 							<svelte:fragment slot="content">
-							<TabContent>
-								<TopicTree bind:broker={app.brokerRepository[app.selectedBroker]} />
-							</TabContent>
-							<TabContent>
-								<Pipeline
-									bind:pipelines={app.pipelines}
-									bind:broker={app.brokerRepository[app.selectedBroker]}
-									bind:socket
-								/>
-							</TabContent>
-						</svelte:fragment>
-					</Tabs>
+								<TabContent>
+									<TopicTree bind:broker={app.brokerRepository[app.selectedBroker]} />
+								</TabContent>
+								<TabContent>
+									<Pipeline
+										bind:pipelines={app.pipelines}
+										bind:broker={app.brokerRepository[app.selectedBroker]}
+										bind:socket
+									/>
+								</TabContent>
+							</svelte:fragment>
+						</Tabs>
+					</div>
+					<div style="flex: 1">
+						{#if app.brokerRepository[app.selectedBroker].selectedTopic?.messages.length}
+							<Messages
+								bind:selectedTopic={app.brokerRepository[app.selectedBroker].selectedTopic}
+							/>
+						{/if}
+					</div>
 				</div>
-				<div style="flex: 1">
-					{#if app.brokerRepository[app.selectedBroker].selectedTopic?.messages.length}
-						<Messages
-							bind:selectedTopic={app.brokerRepository[app.selectedBroker].selectedTopic} />
-					{/if}
-				</div>
-			</div>
-		</Grid>
+			</div></Grid
+		>
 		<PublishMessage
 			bind:savedCommands={app.commands}
 			bind:selectedBroker={app.selectedBroker}