add simple status bar

frontend/src/components/ChannelView.svelte

@@ -4,6 +4,7 @@
     import Messages from "./Messages.svelte";
     import { quadInOut } from "svelte/easing";
     import { maybeFly } from "../animations";
+    import { statusBarStore } from "../stores";
 
     export let channel;
 </script>
@@ -20,6 +21,11 @@
 </style>
 
 <div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
+    {#if $statusBarStore}
+        <div class="info-bar">
+            <span class="info-text">{ $statusBarStore }</span>
+        </div>
+    {/if}
     <ChannelTopBar channel={ channel } />
     <Messages channelId="{ channel.id }" />
     <MessageInput channel={ channel } />

frontend/src/stores.js

@@ -675,6 +675,7 @@ export const presenceStore = new PresenceStore();
 export const unreadStore = new UnreadStore();
 export const pluginStore = new PluginStore();
 export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
+export const statusBarStore = new Store(null, "statusBarStore");
 
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
 export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {

frontend/src/styles/global.css

@@ -40,7 +40,7 @@
 	--foreground-color-2: hsl(63, 10%, 82%);
 	--foreground-color-3: hsl(63, 2%, 60%);
 	--foreground-color-4: hsl(63, 2%, 49%);
-	--foreground-special-color-1: hsl(180, 18%, 70%);
+	--foreground-special-color-1: hsl(180, 2%, 70%);
 	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
@@ -131,10 +131,7 @@ body {
 	align-items: center;
 	justify-content: left;
 	width: 100%;
-	padding-left: var(--space-sm);
-	padding-right: var(--space-sm);
-	padding-top: var(--space-sm);
-	padding-bottom: var(--space-sm);
+	padding: var(--space-sm);
 	flex-grow: 0;
 	flex-shrink: 0;
 }
@@ -147,6 +144,20 @@ body {
 	font-weight: bold;
 }
 
+.info-bar {
+	display: flex;
+	align-items: center;
+	background-color: var(--background-color-0);
+	padding: var(--space-xxs);
+	margin: var(--space-xs);
+	border-radius: var(--radius-sm);
+}
+
+.info-bar .info-text {
+	margin-left: var(--space-sm);
+	color: var(--foreground-color-2);
+}
+
 /* modal */
 
 .modal-backdrop {