improve config entry names and fix selected channel persistance

frontend/public/global.css

@@ -11,8 +11,8 @@
 :root {
 	--background-color-0: hsl(180, 11%, 6%);
 	--background-color-1: hsl(180, 11%, 7%);
-	--background-color-2: hsl(180, 11%, 11%);
-	--background-color-3: hsl(180, 11%, 15%);
+	--background-color-2: hsl(180, 11%, 10%);
+	--background-color-3: hsl(180, 11%, 13%);
 	--foreground-color-1: rgb(253, 254, 255);
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
@@ -98,6 +98,10 @@ body {
 	flex-shrink: 0;
 }
 
+.top-bar.darker {
+	background-color: var(--background-color-0);
+}
+
 .top-bar-heading {
 	margin-left: var(--space-xxs);
 }

frontend/src/animations.js

@@ -2,11 +2,11 @@ import { fade, fly } from "svelte/transition";
 import { getItem } from "./storage";
 
 export function maybeFly(...e) {
-    if (getItem("app:behavior:doAnimations"))
+    if (getItem("ui:doAnimations"))
         return fly(...e);
 }
 
 export function maybeFade(...e) {
-    if (getItem("app:behavior:doAnimations"))
+    if (getItem("ui:doAnimations"))
         return fade(...e);
 }

frontend/src/components/Main.svelte

@@ -45,7 +45,7 @@
 <OverlayProvider />
 
 {#if !$gatewayStatus.ready}
-    <div class="top-bar">
+    <div class="top-bar darker">
         <CloudIcon />
         <span class="h5 top-bar-heading">connecting...</span>
     </div>

frontend/src/logging.js

@@ -2,7 +2,7 @@ import { getItem } from "./storage";
 
 export default function logger(sink) {
     return (...args) => {
-        if (getItem(`loggingSink:${sink}`)) {
+        if (getItem(`log:${sink}`)) {
             console.log(
                 `%c[${sink}]`,
                 "color: #8f3f71; font-weight: bold;",

frontend/src/storage.js

@@ -2,11 +2,12 @@ const defaults = {
     "server:apiBase": `${window.location.origin}/api/v1`,
     "server:gatewayBase": `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`,
     "auth:token": "",
-    "app:behavior:doAnimations": true,
-    "app:cache:openChannelId": -1,
-    "app:visual:theme": "dark",
-    "loggingSink:Gateway": false,
-    "loggingSink:Store": false
+    "ui:doAnimations": true,
+    "ui:theme": "dark",
+    "state:openChannelId": -1,
+    "log:Gateway": false,
+    "log:Store": false,
+    "ui:stateful:presistSelectedChannel": true
 };
 const store = new Map(Object.entries(defaults));
 const persistentProvider = localStorage;

frontend/src/stores.js

@@ -59,6 +59,9 @@ class ChannelsStore extends Store {
 
         gateway.subscribe(GatewayEventType.Ready, ({ channels }) => {
             this.value = channels;
+            if (getItem("ui:stateful:presistSelectedChannel")) {
+                selectedChannel.set({ id: getItem("state:openChannelId"), name: "none", creator_id: -1 });
+            }
             if (channels.length >= 1) {
                 if (!selectedChannel.value || selectedChannel.value.id === -1) {
                     selectedChannel.set(channels[0]);
@@ -327,8 +330,8 @@ export const selectedChannel = new Store({ id: -1, name: "none", creator_id: -1
 export const showSidebar = new Store(true, "showSidebar");
 export const smallViewport = new Store(false, "smallViewport");
 export const showChannelView = new Store(true, "showChannelView");
-export const theme = new StorageItemStore("app:visual:theme");
-export const doAnimations = new StorageItemStore("app:behavior:doAnimations");
+export const theme = new StorageItemStore("ui:theme");
+export const doAnimations = new StorageItemStore("ui:doAnimations");
 export const channels = new ChannelsStore();
 export const gatewayStatus = new GatewayStatusStore();
 export const messagesStoreProvider = new MessagesStoreProvider();
@@ -350,9 +353,7 @@ export const allStores = {
 };
 
 selectedChannel.watch((newSelectedChannel) => {
-    setItem("app:cache:openChannelId", newSelectedChannel.id);
-});
-
-gateway.subscribe(GatewayEventType.Authenticate, () => {
-    selectedChannel.set("app:cache:openChannelId");
+    if (getItem("ui:stateful:presistSelectedChannel")) {
+        setItem("state:openChannelId", newSelectedChannel.id);
+    }
 });