tab pane styles/handling mobile/portrait, smaller changes

* tab pane in portrait mode now covers the entire viewport
* tab pane X turned into a chevron
* added divider between tab pane header and content
* changed default tab pane state to open
* added code to scroll messages back to bottom after tab pane animation
  and message input resize

ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+    import { onMount } from "svelte";
-    import {subscribe} from "$lib/utils.svelte";
+    import { subscribe } from "$lib/utils.svelte";
-    import {chatInput} from "$lib/shared.svelte";
+    import { chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
 
     let textarea: HTMLTextAreaElement;
 
@@ -53,8 +53,11 @@
         if (!textarea)
             return;
 
+        const scrolledToBottom = messagesList.scrolledToBottom;
         textarea.style.height = '1px';
         textarea.style.height = `${textarea.scrollHeight + 10}px`; // with +10px extra padding
+        if (scrolledToBottom)
+            scrollMessagesToBottom();
     }
 
     $effect(() => {
@@ -97,4 +100,4 @@
         min-height: 2.5em;
         line-height: 1.25;
     }
-</style>
+</style>

ChatTwo/Http/Frontend/src/components/TabPane.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { selectedTab, knownTabs, tabPaneState, closeTabPane } from "$lib/shared.svelte";
+    import { selectedTab, knownTabs, tabPaneState, tabPaneAnimationState, closeTabPane, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
 
     async function selectTab(index: number) {
         const rawResponse = await fetch('/tab', {
@@ -13,18 +13,41 @@
         // const content = await rawResponse.json();
         // TODO: use the response
     }
+
+    function handleClose() {
+        tabPaneAnimationState.noAnimation = false;
+        closeTabPane();
+    }
+
+    let scrolledToBottom = true;
+    function ontransitionstart() {
+        scrolledToBottom = messagesList.scrolledToBottom;
+    }
+
+    function ontransitionend() {
+        if (scrolledToBottom)
+            scrollMessagesToBottom();
+    }
 </script>
 
-<aside id="tabs" class:visible={tabPaneState.visible}>
+<aside
+    id="tabs"
+    class:no-animation={tabPaneAnimationState.noAnimation}
+    class:hidden={!tabPaneState.visible}
+    {ontransitionstart}
+    {ontransitionend}
+>
     <div class="inner">
         <header>
             <span>Tabs</span>
-            <button type="button" onclick={() => closeTabPane()}>
+            <button type="button" onclick={() => handleClose()}>
-                <!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
+                <!-- "chevron-left" 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>
+                <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="15 18 9 12 15 6"/></svg>
             </button>
         </header>
 
+        <hr>
+
         <ol id="tabs-list">
             {#each knownTabs as tab}
                 <li class:active={selectedTab.index == tab.index}>

ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { tabPaneState, openTabPane } from "$lib/shared.svelte";
+    import { tabPaneState, tabPaneAnimationState, openTabPane } from "$lib/shared.svelte";
 
     function onclick() {
+        tabPaneAnimationState.noAnimation = false;
         openTabPane();
     }
 </script>

ChatTwo/Http/Frontend/src/lib/chat.svelte.ts

@@ -1,4 +1,4 @@
-import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput } from "$lib/shared.svelte";
+import { channelOptions, isChannelLocked, selectedTab, knownTabs, chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
 import { source, type Source } from "sveltekit-sse";
 
 interface ChatElements {
@@ -62,7 +62,6 @@ interface ChatTabUnreadState {
 export class ChatTwoWeb {
     elements!: ChatElements;
     maxTimestampWidth: number = 0;
-    scrolledToBottom: boolean = true;
 
     sse!: EventSource;
     connection!: Source;
@@ -84,6 +83,7 @@ export class ChatTwoWeb {
 
             inputForm: document.querySelector('#input > form'),
         };
+        messagesList.element = this.elements.messagesList;
 
         // add indicator signaling more messages below
         this.elements.messagesContainer?.addEventListener('scroll', (event) => {
@@ -100,8 +100,8 @@ export class ChatTwoWeb {
 
         // adjust scroll when the window size changes; mostly for mobile (opening/closing the keyboard)
         window.addEventListener('resize', () => {
-            if (this.scrolledToBottom) {
+            if (messagesList.scrolledToBottom) {
-                this.scrollMessagesToBottom();
+                scrollMessagesToBottom();
             }
         })
 
@@ -129,21 +129,17 @@ export class ChatTwoWeb {
 
     messagesAreScrolledToBottom() {
         if (this.elements.messagesContainer === null) {
-            return this.scrolledToBottom;
+            return messagesList.scrolledToBottom;
         }
 
-        if (this.elements.messagesContainer.scrollTopMax) {
+        messagesList.scrolledToBottom =
-            this.scrolledToBottom = this.elements.messagesContainer.scrollTop === this.elements.messagesContainer.scrollTopMax;
+            (
-        } else {
+                this.elements.messagesContainer.scrollHeight -
-            this.scrolledToBottom =
+                this.elements.messagesContainer.clientHeight -
-                (
+                this.elements.messagesContainer.scrollTop
-                    this.elements.messagesContainer.scrollHeight -
+            ) < 1;
-                    this.elements.messagesContainer.clientHeight -
-                    this.elements.messagesContainer.scrollTop
-                ) < 1;
-        }
 
-        return this.scrolledToBottom;
+        return messagesList.scrolledToBottom;
     }
 
     updateChannelHint(channel: SwitchChannel) {
@@ -183,20 +179,6 @@ export class ChatTwoWeb {
         }
     }
 
-    scrollMessagesToBottom() {
-        if (this.elements.messagesContainer === null || this.elements.messagesList === null)
-            return;
-
-        if (this.elements.messagesContainer.scrollTopMax) {
-            this.elements.messagesContainer.scrollTop = this.elements.messagesContainer.scrollTopMax;
-        } else {
-            if (this.elements.messagesList.lastElementChild === null)
-                return;
-
-            this.elements.messagesList.lastElementChild.scrollIntoView();
-        }
-    }
-
     addMessage(messageData: MessageResponse) {
         if (this.elements.messagesList === null)
             return;
@@ -218,7 +200,7 @@ export class ChatTwoWeb {
         this.elements.messagesList.appendChild(liMessage);
 
         if (scrolledToBottom) {
-            this.scrollMessagesToBottom();
+            scrollMessagesToBottom();
         }
     }
 
@@ -406,4 +388,4 @@ export class ChatTwoWeb {
             }
         });
     }
-}
+}

ChatTwo/Http/Frontend/src/lib/shared.svelte.ts

@@ -11,7 +11,8 @@ export interface ChannelOption {
 
 export const selectedTab: { index: number } = $state({ index: 0 });
 export const knownTabs: ChatTab[] = $state([]);
-export const tabPaneState: { visible: boolean } = $state({ visible: false });
+export const tabPaneState: { visible: boolean } = $state({ visible: true });
+export const tabPaneAnimationState: { noAnimation: boolean } = $state({ noAnimation: true });
 export const persistentTabPabeStateKey = 'chat2_tab_pane_visible';
 
 export function openTabPane() {
@@ -24,4 +25,15 @@ export function closeTabPane() {
     window.localStorage.setItem(persistentTabPabeStateKey, 'false');
 }
 
-export const chatInput: { content: string } = $state({ content: ''} );
+export const chatInput: { content: string } = $state({ content: ''} );
+export const messagesList: {
+    element: HTMLElement | null,
+    scrolledToBottom: boolean
+} = $state({ element: null, scrolledToBottom: true });
+
+export function scrollMessagesToBottom() {
+    if (messagesList.element === null)
+        return;
+
+    messagesList.element.lastElementChild?.scrollIntoView();
+}

ChatTwo/Http/Frontend/static/static/start.css

@@ -1,4 +1,4 @@
-/* fonts */
+/* fonts */
 @font-face {
     font-family: Lodestone;
     src: url('/files/FFXIV_Lodestone_SSF.ttf') format('truetype');
@@ -125,8 +125,12 @@ aside#tabs {
     background-color: var(--bg-sidebar);
     transition: width 250ms ease;
 
-    width: 0px;
+    width: 200px;
-    &.visible { width: 200px; }
+    &.hidden { width: 0px; }
+
+    &.no-animation {
+        transition: none;
+    }
 
     div.inner {
         width: 200px;
@@ -137,7 +141,6 @@ aside#tabs {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
-        margin-bottom: 20px;
         font-size: 1.1rem;
         font-weight: 550;
 
@@ -148,6 +151,11 @@ aside#tabs {
         }
     }
 
+    hr {
+        margin: 0.6rem 0 0.75rem;
+        border-color: var(--fg-faint);
+    }
+
     ol#tabs-list {
         margin: 0 -5px;
         padding: 0;
@@ -157,6 +165,7 @@ aside#tabs {
     li {
         padding: 3px 5px;
         color: var(--fg-faint);
+        border-radius: 3px;
 
         button {
             width: 100%;
@@ -171,9 +180,13 @@ aside#tabs {
         margin-top: 3px;
     }
 
+    li:has(button:hover) {
+        color: var(--fg);
+        background-color: rgb(from var(--bg-input) r g b / 0.5);
+    }
+
     li.active {
         color: var(--fg);
-        border-radius: 3px;
         background-color: var(--bg-input);
     }
 
@@ -187,6 +200,7 @@ aside#tabs {
 section#messages {
     position: relative;
     flex: 1;
+    min-width: 0;
     min-height: 0;
     padding: 20px;
     line-height: 1.5;
@@ -444,4 +458,15 @@ section#input {
             height: 1.5rem;
         }
     }
+
+    aside#tabs {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        z-index: 1000;
+
+        div.inner {
+            width: 100vw;
+        }
+    }
 }