diff --git a/frontend/public/global.css b/frontend/public/global.css index 4486739..eb3570a 100644 --- a/frontend/public/global.css +++ b/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); } diff --git a/frontend/src/animations.js b/frontend/src/animations.js index 16bdeab..d97be8d 100644 --- a/frontend/src/animations.js +++ b/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); } diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte index d635f79..ebe7444 100644 --- a/frontend/src/components/Main.svelte +++ b/frontend/src/components/Main.svelte @@ -45,7 +45,7 @@ {#if !$gatewayStatus.ready} -
+
connecting...
diff --git a/frontend/src/logging.js b/frontend/src/logging.js index 14f0546..31cc107 100644 --- a/frontend/src/logging.js +++ b/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;", diff --git a/frontend/src/storage.js b/frontend/src/storage.js index 4f55568..56d77ba 100644 --- a/frontend/src/storage.js +++ b/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; diff --git a/frontend/src/stores.js b/frontend/src/stores.js index 90e0b55..7bcfd8e 100644 --- a/frontend/src/stores.js +++ b/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); + } });