JonKazama-Hellion/HellionChat
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases 28 Activity

add collapsible tab pane

Browse Source
This commit is contained in:
Ennea
2025-09-30 15:08:55 +02:00
parent 11311316fd
commit 2cdc5bfcd9
7 changed files with 208 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ChatTwo/Http/Frontend/src/app.html
+1
View File
@@ -6,6 +6,7 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
ChatTwo/Http/Frontend/src/components/TabPane.svelte
+42
View File
@@ -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>
ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte
+30
View File
@@ -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>
ChatTwo/Http/Frontend/src/lib/chat.svelte.ts
+16 -11
View File
@@ -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);
}
}
});
}
}
}
ChatTwo/Http/Frontend/src/lib/shared.svelte.ts
+7 -1
View File
@@ -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;
}
}
export const selectedTab: { index: number } = $state({ index: 0 });
export const knownTabs: ChatTab[] = $state([]);
export const tabBarState: { visible: boolean } = $state({ visible: false });
ChatTwo/Http/Frontend/src/routes/chat/+page.svelte
+35 -27
View File
@@ -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>
<div id="timestamp-width-probe"></div>