From 2cdc5bfcd9598dec26623ccbdd75e7372c6bf70a Mon Sep 17 00:00:00 2001
From: Ennea <Ennea@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:08:55 +0200
Subject: [PATCH 1/3] add collapsible tab pane

---
 ChatTwo/Http/Frontend/src/app.html            |  1 +
 .../Frontend/src/components/TabPane.svelte    | 42 +++++++++
 .../src/components/TabPaneOpener.svelte       | 30 +++++++
 ChatTwo/Http/Frontend/src/lib/chat.svelte.ts  | 27 +++---
 .../Http/Frontend/src/lib/shared.svelte.ts    |  8 +-
 .../Frontend/src/routes/chat/+page.svelte     | 62 ++++++++------
 ChatTwo/Http/Frontend/static/static/start.css | 85 +++++++++++++++++--
 7 files changed, 208 insertions(+), 47 deletions(-)
 create mode 100644 ChatTwo/Http/Frontend/src/components/TabPane.svelte
 create mode 100644 ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
diff --git a/ChatTwo/Http/Frontend/src/app.html b/ChatTwo/Http/Frontend/src/app.html
index 31957d6..beb47fc 100644
--- a/ChatTwo/Http/Frontend/src/app.html
+++ b/ChatTwo/Http/Frontend/src/app.html
@@ -6,6 +6,7 @@
 
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
diff --git a/ChatTwo/Http/Frontend/src/components/TabPane.svelte b/ChatTwo/Http/Frontend/src/components/TabPane.svelte
new file mode 100644
index 0000000..63be4b7
--- /dev/null
+++ b/ChatTwo/Http/Frontend/src/components/TabPane.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { selectedTab, knownTabs, tabBarState } from "$lib/shared.svelte";
+
+    async function selectTab(index: number) {
+        const rawResponse = await fetch('/tab', {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ index })
+        });
+        // const content = await rawResponse.json();
+        // TODO: use the response
+    }
+
+    function closeTabBar() {
+        tabBarState.visible = false;
+    }
+</script>
+
+<aside id="tabs" class:visible={tabBarState.visible}>
+    <div class="inner">
+        <header>
+            <span>Tabs</span>
+            <button type="button" onclick={() => closeTabBar()}>
+                <!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            </button>
+        </header>
+
+        <ol id="tabs-list">
+            {#each knownTabs as tab}
+                <li class:active={selectedTab.index == tab.index}>
+                    <button type="button" onclick={() => selectTab(tab.index)}>
+                        { tab.name }
+                    </button>
+                </li>
+            {/each}
+        </ol>
+    </div>
+</aside>
diff --git a/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
new file mode 100644
index 0000000..96062d7
--- /dev/null
+++ b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { tabBarState } from "$lib/shared.svelte";
+
+    function onclick() {
+        tabBarState.visible = true;
+    }
+</script>
+
+<button type="button" aria-label="Open tab pane" class:visible={!tabBarState.visible} {onclick}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+</button>
+
+<style>
+    button {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        padding: 25px 0;
+        border: none;
+        background-color: transparent;
+        transform: translateY(-50%);
+        z-index: 100;
+        opacity: 0;
+        transition: opacity 250ms ease;
+    }
+
+    button.visible {
+        opacity: 1;
+    }
+</style>
diff --git a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts b/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
index 896d5d8..4967417 100644
--- a/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
+++ b/ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
@@ -1,5 +1,5 @@
-import {type Source, source} from "sveltekit-sse";
-import {channelOptions, isChannelLocked} from "$lib/shared.svelte";
+import { channelOptions, isChannelLocked, selectedTab, knownTabs } from "$lib/shared.svelte";
+import { source, type Source } from "sveltekit-sse";
 
 interface ChatElements {
     messagesContainer: Element | null,
@@ -43,7 +43,7 @@ interface ChannelList {
 }
 
 // ref `DataStructure.ChatTab`
-interface ChatTab {
+export interface ChatTab {
     name: string;
     index: number;
 }
@@ -170,9 +170,9 @@ export class ChatTwoWeb {
         }
     }
 
-    // calculate timestamp width
-    // to ensure that all timestamps have the same width. some typefaces have the same width across
-    // all number glyphs, others do not. then there's AM/PM vs 24 hour, and so on
+    // calculate timestamp width to ensure that all timestamps have the same width.
+    // some typefaces have the same width across all number glyphs, others do not.
+    // then there's AM/PM vs 24 hour, and so on
     calculateTimestampWidth(timestamp: string) {
         if (this.elements.timestampWidthProbe === null)
             return;
@@ -368,10 +368,11 @@ export class ChatTwoWeb {
 
         // tab switched
         this.connection.select('tab-switched').subscribe((data: string) => {
-            console.log(`Data received: ${data}`)
+            console.log(`tab-switched: ${data}`)
             if (data) {
                 try {
-                    let chatTab: ChatTab = JSON.parse(data);
+                    const chatTab: ChatTab = JSON.parse(data);
+                    selectedTab.index = chatTab.index;
                 } catch (error) {
                     console.error(error);
                 }
@@ -380,14 +381,18 @@ export class ChatTwoWeb {
 
         // list of all tabs
         this.connection.select('tab-list').subscribe((data: string) => {
-            console.log(`Data received: ${data}`)
+            console.log(`tab-list: ${data}`)
             if (data) {
                 try {
-                    let chatTabLit: ChatTabList = JSON.parse(data);
+                    const chatTabList: ChatTabList = JSON.parse(data);
+                    knownTabs.length = 0;
+                    for (const tab of chatTabList.tabs) {
+                        knownTabs.push(tab);
+                    }
                 } catch (error) {
                     console.error(error);
                 }
             }
         });
     }
-}
\ No newline at end of file
+}
diff --git a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
index 4fbb944..dd58a46 100644
--- a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+++ b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
@@ -1,3 +1,5 @@
+import type { ChatTab } from "./chat.svelte";
+
 export const isChannelLocked: { locked: boolean } = $state({ locked: false });
 export const channelOptions: ChannelOption[] = $state([ { text: 'Invalid', value: 0, preview: true } ]);
 
@@ -5,4 +7,8 @@ export interface ChannelOption {
     text: string;
     value: number;
     preview: boolean;
-}
\ No newline at end of file
+}
+
+export const selectedTab: { index: number } = $state({ index: 0 });
+export const knownTabs: ChatTab[] = $state([]);
+export const tabBarState: { visible: boolean } = $state({ visible: false });
diff --git a/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte b/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
index 0407be5..851f8e2 100644
--- a/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
+++ b/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
     import { page } from '$app/state'
-    import {Alert} from "@sveltestrap/sveltestrap";
+    import { Alert } from "@sveltestrap/sveltestrap";
     import { onMount } from 'svelte';
-    import {ChatTwoWeb} from '$lib/chat.svelte'
-    import {addGfdStylesheet} from "$lib/gfd";
+    import { ChatTwoWeb } from '$lib/chat.svelte'
+    import { addGfdStylesheet } from "$lib/gfd";
     import DynamicTextArea from "../../components/DynamicTextArea.svelte";
     import ChannelSelector from "../../components/ChannelSelector.svelte";
+    import TabPane from "../../components/TabPane.svelte";
+    import TabPaneOpener from "../../components/TabPaneOpener.svelte";
 
     let data: App.Warning = $state({ hasWarning: false, content: '' });
     $effect.pre(() => {
@@ -34,33 +36,39 @@
 </script>
 
 <main class="chat">
-    <section id="messages">
-        <div class="scroll-container">
-            <ol id="messages-list"></ol>
-        </div>
+    <TabPane />
 
-        <div id="more-messages-indicator">
-            <!-- "arrow-down" icon from https://github.com/feathericons/feather, under MIT license -->
-            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
-        </div>
-    </section>
+    <div class="main-content">
+        <TabPaneOpener />
 
-    {#if data?.hasWarning }
-        <section id="warnings">
-            <Alert content={data.content} color="warning" dismissible={true}/>
-        </section>
-    {/if}
-
-    <section id="input">
-        <form>
-            <div class="input-container">
-                <DynamicTextArea/>
-                <ChannelSelector/>
+        <section id="messages">
+            <div class="scroll-container">
+                <ol id="messages-list"></ol>
             </div>
 
-            <button type="submit">Send</button>
-        </form>
-    </section>
+            <div id="more-messages-indicator">
+                <!-- "arrow-down" icon from https://github.com/feathericons/feather, under MIT license -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
+            </div>
+        </section>
+
+        {#if data?.hasWarning }
+            <section id="warnings">
+                <Alert content={data.content} color="warning" dismissible={true}/>
+            </section>
+        {/if}
+
+        <section id="input">
+            <form>
+                <div class="input-container">
+                    <DynamicTextArea />
+                    <ChannelSelector />
+                </div>
+
+                <button type="submit">Send</button>
+            </form>
+        </section>
+    </div>
 </main>
 
-<div id="timestamp-width-probe"></div>
\ No newline at end of file
+<div id="timestamp-width-probe"></div>
diff --git a/ChatTwo/Http/Frontend/static/static/start.css b/ChatTwo/Http/Frontend/static/static/start.css
index 54a74ea..cf4f022 100644
--- a/ChatTwo/Http/Frontend/static/static/start.css
+++ b/ChatTwo/Http/Frontend/static/static/start.css
@@ -18,6 +18,7 @@
     --fg-faint: #a0a0a0;
     --fg-scrollbar: #404040;
     --bg: #101010;
+    --bg-sidebar: #080808;
     --bg-input: #202020;
     --bg-input-hover: #282828;
     --focus-color: #4060a0;
@@ -51,22 +52,29 @@ span > a {
 
 /* layout and global styles */
 body {
-    padding: 50px;
+    padding: 25px;
     height: 100dvh;
     background-color: var(--bg-input-hover);
 }
 
-body > div > main.chat {
+main.chat {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     width: 100%;
     height: 100%;
+    overflow: hidden;
     background-color: var(--bg);
     border-radius: 20px;
     box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
+
+    & > .main-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
 }
 
-body > div > main.auth {
+main.auth {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -108,6 +116,66 @@ body > div > main.auth {
     }
 }
 
+/* tab list */
+aside#tabs {
+    flex: 0 0 auto;
+    overflow: hidden;
+    background-color: var(--bg-sidebar);
+    transition: width 250ms ease;
+
+    width: 0px;
+    &.visible { width: 200px; }
+
+    div.inner {
+        width: 200px;
+        padding: 20px;
+    }
+
+    header {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        font-size: 1.1rem;
+        font-weight: 550;
+
+        button {
+            margin-bottom: 2px;
+            border: none;
+            background-color: transparent;
+        }
+    }
+
+    ol#tabs-list {
+        margin: 0 -5px;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    li {
+        padding: 3px 5px;
+        color: var(--fg-faint);
+
+        button {
+            width: 100%;
+            text-align: left;
+            color: inherit;
+            border: none;
+            background-color: transparent;
+        }
+    }
+
+    li + li {
+        margin-top: 3px;
+    }
+
+    li.active {
+        color: var(--fg);
+        border-radius: 3px;
+        background-color: var(--bg-input);
+    }
+}
+
 /* message list */
 section#messages {
     position: relative;
@@ -122,7 +190,9 @@ section#messages {
         scrollbar-color: var(--fg-scrollbar) var(--bg);
     }
 
-    ol {
+    ol#messages-list {
+        margin: 0;
+        padding: 0;
         list-style-type: none;
     }
 
@@ -271,7 +341,6 @@ section#input {
             &:focus {
                 outline: 2px solid var(--focus-color);
             }
-
         }
     }
 }
@@ -315,12 +384,12 @@ section#input {
 }
 
 /*** mobile ***/
-@media ((max-width: 600px) and (orientation: portrait)) or (max-width: 400px) {
+@media ((max-width: 600px) and (orientation: portrait)) or (max-height: 400px) {
     body {
         padding: 0;
     }
 
-    body > main.chat {
+    main.chat {
         border-radius: 0;
         box-shadow: none;
     }

From 9f097b4df376d12300fc808a28837d3fdc3a5ecc Mon Sep 17 00:00:00 2001
From: Ennea <Ennea@users.noreply.github.com>
Date: Wed, 1 Oct 2025 16:35:27 +0200
Subject: [PATCH 2/3] persist tab pane state, handle vertical scrolling in tab
 pane

---
 ChatTwo/Http/Frontend/src/components/TabPane.svelte | 10 +++-------
 .../Frontend/src/components/TabPaneOpener.svelte    |  7 ++++---
 ChatTwo/Http/Frontend/src/lib/shared.svelte.ts      | 13 ++++++++++++-
 ChatTwo/Http/Frontend/src/routes/chat/+page.svelte  | 12 ++++++++++++
 ChatTwo/Http/Frontend/static/static/start.css       |  3 ++-
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/ChatTwo/Http/Frontend/src/components/TabPane.svelte b/ChatTwo/Http/Frontend/src/components/TabPane.svelte
index 63be4b7..73420e6 100644
--- a/ChatTwo/Http/Frontend/src/components/TabPane.svelte
+++ b/ChatTwo/Http/Frontend/src/components/TabPane.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { selectedTab, knownTabs, tabBarState } from "$lib/shared.svelte";
+    import { selectedTab, knownTabs, tabPaneState, closeTabPane } from "$lib/shared.svelte";
 
     async function selectTab(index: number) {
         const rawResponse = await fetch('/tab', {
@@ -13,17 +13,13 @@
         // const content = await rawResponse.json();
         // TODO: use the response
     }
-
-    function closeTabBar() {
-        tabBarState.visible = false;
-    }
 </script>
 
-<aside id="tabs" class:visible={tabBarState.visible}>
+<aside id="tabs" class:visible={tabPaneState.visible}>
     <div class="inner">
         <header>
             <span>Tabs</span>
-            <button type="button" onclick={() => closeTabBar()}>
+            <button type="button" onclick={() => closeTabPane()}>
                 <!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
diff --git a/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
index 96062d7..341d02e 100644
--- a/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
+++ b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-    import { tabBarState } from "$lib/shared.svelte";
+    import { tabPaneState, openTabPane } from "$lib/shared.svelte";
 
     function onclick() {
-        tabBarState.visible = true;
+        openTabPane();
     }
 </script>
 
-<button type="button" aria-label="Open tab pane" class:visible={!tabBarState.visible} {onclick}>
+<button type="button" aria-label="Open tab pane" class:visible={!tabPaneState.visible} {onclick} disabled={tabPaneState.visible}>
+    <!-- "chevron-right" icon from https://github.com/feathericons/feather, under MIT license -->
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
 </button>
 
diff --git a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
index dd58a46..a12760f 100644
--- a/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+++ b/ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
@@ -11,4 +11,15 @@ export interface ChannelOption {
 
 export const selectedTab: { index: number } = $state({ index: 0 });
 export const knownTabs: ChatTab[] = $state([]);
-export const tabBarState: { visible: boolean } = $state({ visible: false });
+export const tabPaneState: { visible: boolean } = $state({ visible: false });
+export const persistentTabPabeStateKey = 'chat2_tab_pane_visible';
+
+export function openTabPane() {
+    tabPaneState.visible = true;
+    window.localStorage.setItem(persistentTabPabeStateKey, 'true');
+}
+
+export function closeTabPane() {
+    tabPaneState.visible = false;
+    window.localStorage.setItem(persistentTabPabeStateKey, 'false');
+}
diff --git a/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte b/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
index 851f8e2..ebd11d5 100644
--- a/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
+++ b/ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
@@ -3,6 +3,7 @@
     import { Alert } from "@sveltestrap/sveltestrap";
     import { onMount } from 'svelte';
     import { ChatTwoWeb } from '$lib/chat.svelte'
+    import { tabPaneState, persistentTabPabeStateKey } from "$lib/shared.svelte";
     import { addGfdStylesheet } from "$lib/gfd";
     import DynamicTextArea from "../../components/DynamicTextArea.svelte";
     import ChannelSelector from "../../components/ChannelSelector.svelte";
@@ -30,6 +31,17 @@
         // Populate the stylesheet with gfd data
         addGfdStylesheet('/files/gfdata.gfd', '/files/fonticon_ps5.tex');
 
+        // read saved tab pane state from localStorage
+        try {
+            const tabPaneVisible = window.localStorage.getItem(persistentTabPabeStateKey);
+            if (tabPaneVisible !== null) {
+                tabPaneState.visible = JSON.parse(tabPaneVisible);
+            }
+        } catch (e) {
+            // JSON.parse() failed, let's reset what's in localStorage
+            window.localStorage.removeItem(persistentTabPabeStateKey);
+        }
+
         // Load all web functions in the background
         const _ = new ChatTwoWeb();
     });
diff --git a/ChatTwo/Http/Frontend/static/static/start.css b/ChatTwo/Http/Frontend/static/static/start.css
index cf4f022..8cf8ad2 100644
--- a/ChatTwo/Http/Frontend/static/static/start.css
+++ b/ChatTwo/Http/Frontend/static/static/start.css
@@ -119,7 +119,8 @@ main.auth {
 /* tab list */
 aside#tabs {
     flex: 0 0 auto;
-    overflow: hidden;
+    overflow-x: hidden;
+    scrollbar-color: var(--fg-scrollbar) var(--bg-sidebar);
     background-color: var(--bg-sidebar);
     transition: width 250ms ease;
 

From f325ee15936be5c2df2b39968cc6cfab957db72e Mon Sep 17 00:00:00 2001
From: Ennea <Ennea@users.noreply.github.com>
Date: Wed, 1 Oct 2025 16:49:41 +0200
Subject: [PATCH 3/3] add css classes for unread indicators

---
 ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte | 5 +++++
 ChatTwo/Http/Frontend/static/static/start.css             | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
index 341d02e..19027fc 100644
--- a/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
+++ b/ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
@@ -28,4 +28,9 @@
     button.visible {
         opacity: 1;
     }
+
+    button.unread svg {
+        stroke: var(--unread-color);
+        filter: drop-shadow(0 0 2px var(--unread-color));
+    }
 </style>
diff --git a/ChatTwo/Http/Frontend/static/static/start.css b/ChatTwo/Http/Frontend/static/static/start.css
index 8cf8ad2..952e19a 100644
--- a/ChatTwo/Http/Frontend/static/static/start.css
+++ b/ChatTwo/Http/Frontend/static/static/start.css
@@ -22,6 +22,7 @@
     --bg-input: #202020;
     --bg-input-hover: #282828;
     --focus-color: #4060a0;
+    --unread-color: #beffa0;
 
     --gradient-clickable: linear-gradient(to bottom, #404040, var(--bg-input) 65%, var(--bg-input));
     --gradient-clickable-hover: linear-gradient(to bottom, #505050, var(--bg-input-hover) 65%, var(--bg-input-hover));
@@ -175,6 +176,11 @@ aside#tabs {
         border-radius: 3px;
         background-color: var(--bg-input);
     }
+
+    li.unread button {
+        color: var(--unread-color);
+        text-shadow: 0 0 5px var(--unread-color);
+    }
 }
 
 /* message list */
