From 72ac9972b65671cb74927886ae8985bea1df7cec Mon Sep 17 00:00:00 2001 From: Chromosomologist Date: Mon, 16 Dec 2024 11:16:03 +0100 Subject: [PATCH 1/5] feat: make categories a clickable toggle --- src/lib/components/SphereBar.svelte | 68 ++++++++++++++++++++++++----- src/lib/types/category.ts | 3 +- src/lib/ws.ts | 4 +- 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/lib/components/SphereBar.svelte b/src/lib/components/SphereBar.svelte index a8060a6..6f221f2 100644 --- a/src/lib/components/SphereBar.svelte +++ b/src/lib/components/SphereBar.svelte @@ -3,6 +3,7 @@ import state from '$lib/ws'; import userData from '$lib/user_data'; import type { Sphere } from '$lib/types/sphere'; + import type { Category } from '$lib/types/category'; import { page } from '$app/stores'; import { SphereChannelType } from '$lib/types/channel'; @@ -29,6 +30,11 @@ if (window.screen.width > 1000) return { duration: 0 }; return slide(node, params); }; + + const toggleCategory = (e: MouseEvent, c: Category) => { + console.log(c) + $state.categories[c.id].collapsed = !c.collapsed; + }
@@ -61,16 +67,30 @@
@@ -135,12 +155,38 @@ .category { margin: 10px 0; + user-select: none; + display: flex; + flex-direction: column; + } + + .category h4 { + margin: 0; + } + + .category-name { + color: var(--color-text); + display: flex; + align-items: center; + cursor: pointer; + padding: 5px; + border-radius: 5px; + } + + .category-name:hover { + background-color: var(--purple-300); } .channel { - padding-left: 5px; + padding: 5px; + border-radius: 5px; text-decoration: none; } + + .channel:hover { + color: var(--gray-600); + background-color: var(--purple-300); + } #sphere-banner { width: 100%; diff --git a/src/lib/types/category.ts b/src/lib/types/category.ts index 3e04bea..657ebab 100644 --- a/src/lib/types/category.ts +++ b/src/lib/types/category.ts @@ -1,8 +1,9 @@ -import { SphereChannel } from "./channel"; +import type { SphereChannel } from "./channel"; export interface Category { id: number; name: string; channels: SphereChannel[]; position: number; + collapsed: boolean; } \ No newline at end of file diff --git a/src/lib/ws.ts b/src/lib/ws.ts index 304ca73..0378c71 100644 --- a/src/lib/ws.ts +++ b/src/lib/ws.ts @@ -76,10 +76,8 @@ const connect = async (userData: UserData) => { u.members.forEach((m) => { state.users[m.user.id] = m.user; }); - // u.channels.forEach((c) => { - // state.channels[c.id] = c; - // }); u.categories.forEach((c) => { + c.collapsed = false; // TODO: Maybe remember this between sessions? state.categories[c.id] = c; c.channels.forEach((c) => { state.channels[c.id] = c; From 39a4ca17b4f8cc3ac9f87480eb47fcbbf1ccad58 Mon Sep 17 00:00:00 2001 From: Chromosomologist Date: Mon, 16 Dec 2024 11:28:21 +0100 Subject: [PATCH 2/5] feat: display current channel --- src/lib/components/SphereBar.svelte | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/lib/components/SphereBar.svelte b/src/lib/components/SphereBar.svelte index 6f221f2..2548fdd 100644 --- a/src/lib/components/SphereBar.svelte +++ b/src/lib/components/SphereBar.svelte @@ -5,13 +5,14 @@ import type { Sphere } from '$lib/types/sphere'; import type { Category } from '$lib/types/category'; import { page } from '$app/stores'; - import { SphereChannelType } from '$lib/types/channel'; + import { SphereChannelType, type Channel } from '$lib/types/channel'; let currentSphere: Sphere | null = null; + let currentChannel: Channel | null = null; let spheres: Sphere[] = Object.values($state.spheres ?? []); $: { - let currentChannel = $state.channels[Number.parseInt($page.params.channel_id)]; + currentChannel = $state.channels[Number.parseInt($page.params.channel_id)]; if ( currentChannel && (currentChannel.type == SphereChannelType.TEXT || @@ -84,7 +85,7 @@ {/if} {#if !category.collapsed} {#each category.channels as channel (channel.id)} - + # {channel.name}
@@ -179,6 +180,7 @@ .channel { padding: 5px; + margin: 2px; border-radius: 5px; text-decoration: none; } @@ -188,6 +190,11 @@ background-color: var(--purple-300); } + .channel.current { + color: var(--gray-600); + background-color: var(--purple-400); + } + #sphere-banner { width: 100%; height: 115px; From 92ed0a29bc42c75b570f4aef8d4d6502c3d25396 Mon Sep 17 00:00:00 2001 From: Chromosomologist Date: Tue, 17 Dec 2024 21:10:53 +0100 Subject: [PATCH 3/5] chore: format stuff --- src/lib/components/SphereBar.svelte | 50 ++++++++++++++++++----------- src/lib/types/category.ts | 14 ++++---- src/lib/ws.ts | 33 +++++++++++-------- 3 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/lib/components/SphereBar.svelte b/src/lib/components/SphereBar.svelte index 2548fdd..5026d09 100644 --- a/src/lib/components/SphereBar.svelte +++ b/src/lib/components/SphereBar.svelte @@ -1,10 +1,10 @@
@@ -70,28 +69,41 @@ {#each currentSphere.categories as category (category.id)}
{#if category.id != currentSphere.id} - toggleCategory(e, category)}> + toggleCategory(e, category)}>

- + {#if !category.collapsed} - + {:else} - + {/if} {category.name}

- {/if} - {#if !category.collapsed} - {#each category.channels as channel (channel.id)} - - # {channel.name} - -
- {/each} - {/if} -
+ {/if} + {#if !category.collapsed} + {#each category.channels as channel (channel.id)} + + # {channel.name} + +
+ {/each} + {/if} +
{/each} @@ -164,7 +176,7 @@ .category h4 { margin: 0; } - + .category-name { color: var(--color-text); display: flex; @@ -184,7 +196,7 @@ border-radius: 5px; text-decoration: none; } - + .channel:hover { color: var(--gray-600); background-color: var(--purple-300); diff --git a/src/lib/types/category.ts b/src/lib/types/category.ts index 657ebab..fafa051 100644 --- a/src/lib/types/category.ts +++ b/src/lib/types/category.ts @@ -1,9 +1,9 @@ -import type { SphereChannel } from "./channel"; +import type { SphereChannel } from './channel'; export interface Category { - id: number; - name: string; - channels: SphereChannel[]; - position: number; - collapsed: boolean; -} \ No newline at end of file + id: number; + name: string; + channels: SphereChannel[]; + position: number; + collapsed: boolean; +} diff --git a/src/lib/ws.ts b/src/lib/ws.ts index 0378c71..1e89841 100644 --- a/src/lib/ws.ts +++ b/src/lib/ws.ts @@ -15,13 +15,13 @@ const state = writable({ users: [], spheres: [], categories: [], - channels: [], + channels: [] }); let ws: WebSocket | null = null; let pingInterval: NodeJS.Timeout | null = null; let lastAuthorID: { [name: number]: number } = {}; -let lastAuthorData: { [name: number]: { name: string, avatar: string | number | undefined } } = {}; +let lastAuthorData: { [name: number]: { name: string; avatar: string | number | undefined } } = {}; let notification: Notification; let notification_opt: number; let connected = false; @@ -77,12 +77,12 @@ const connect = async (userData: UserData) => { state.users[m.user.id] = m.user; }); u.categories.forEach((c) => { - c.collapsed = false; // TODO: Maybe remember this between sessions? + c.collapsed = false; // TODO: Maybe remember this between sessions? state.categories[c.id] = c; c.channels.forEach((c) => { state.channels[c.id] = c; - }) - }) + }); + }); state.spheres[u.id] = u; }); state.users[payload.d.user.id] = payload.d.user; @@ -138,27 +138,32 @@ const connect = async (userData: UserData) => { const authorData = { name: payload.d._disguise?.name ?? - payload.d.author.display_name ?? payload.d.author.username, - avatar: - payload.d._disguise?.avatar ?? - payload.d.author.avatar + payload.d.author.display_name ?? + payload.d.author.username, + avatar: payload.d._disguise?.avatar ?? payload.d.author.avatar }; if (!lastAuthorData[channelID]) { let lastMessage = get(state).messages[channelID].messages.at(-1); if (lastMessage) { lastAuthorData[channelID] = { - name: lastMessage?._disguise?.name ?? - lastMessage.author.display_name ?? lastMessage.author.username, + name: + lastMessage?._disguise?.name ?? + lastMessage.author.display_name ?? + lastMessage.author.username, avatar: lastMessage?._disguise?.avatar ?? lastMessage?.author.avatar }; lastAuthorID[channelID] = lastMessage?.author.id; } } - let sameData = authorData?.name == lastAuthorData[channelID]?.name && authorData?.avatar == lastAuthorData[channelID].avatar; + let sameData = + authorData?.name == lastAuthorData[channelID]?.name && + authorData?.avatar == lastAuthorData[channelID].avatar; const message = { renderedContent: content, showAuthor: !sameData || payload.d.author.id != lastAuthorID[channelID], - mentioned: new RegExp(`(?`, 'gm').test(payload.d.content ?? ''), + mentioned: new RegExp(`(?`, 'gm').test( + payload.d.content ?? '' + ), ...payload.d }; lastAuthorData[channelID] = authorData; @@ -188,7 +193,7 @@ const connect = async (userData: UserData) => { } ); // new Audio('...').play(); - }; + } } state.update((state) => { if (state.messages[message.channel.id]) { From c1ee1f5ec35c3c896ab5d1b664f43a5665fef3ea Mon Sep 17 00:00:00 2001 From: Chromosomologist Date: Mon, 6 Jan 2025 10:47:50 +0100 Subject: [PATCH 4/5] feat: use details and store category state --- src/lib/components/SphereBar.svelte | 64 ++++++++++++++--------------- src/lib/types/ui/config.ts | 1 + 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/src/lib/components/SphereBar.svelte b/src/lib/components/SphereBar.svelte index 5026d09..b49dbe9 100644 --- a/src/lib/components/SphereBar.svelte +++ b/src/lib/components/SphereBar.svelte @@ -2,6 +2,7 @@ import { slide, type SlideParams } from 'svelte/transition'; import { page } from '$app/stores'; import state from '$lib/ws'; + import userConfig from '$lib/user_config'; import userData from '$lib/user_data'; import type { Sphere } from '$lib/types/sphere'; import type { Category } from '$lib/types/category'; @@ -32,8 +33,19 @@ return slide(node, params); }; - const toggleCategory = (e: MouseEvent, c: Category) => { - $state.categories[c.id].collapsed = !c.collapsed; + const toggleCategory = (e: Event, c: Category) => { + if ((e as ToggleEvent).newState == 'closed') { + if ($userConfig.hiddenCategories) { + $userConfig.hiddenCategories?.push(c.id); + } else { + $userConfig.hiddenCategories = [c.id]; + } + } else { + let index = $userConfig.hiddenCategories?.indexOf(c.id) ?? -1; + if (index >= 0) $userConfig.hiddenCategories!.splice(index, 1); + } + + $userConfig = $userConfig; }; @@ -66,32 +78,21 @@

{currentSphere.name ?? currentSphere.slug}

    - {#each currentSphere.categories as category (category.id)} -
    - {#if category.id != currentSphere.id} - toggleCategory(e, category)}> -

    - - {#if !category.collapsed} - - {:else} - - {/if} - - {category.name} -

    -     - {/if} + {#each currentSphere.categories[0].channels as channel (channel.id)} + + # {channel.name} + + {/each} + {#each currentSphere.categories.slice(1) as category (category.id)} +
    toggleCategory(e, category)} + > + {category.name} {#if !category.collapsed} {#each category.channels as channel (channel.id)} # {channel.name} -
    {/each} {/if} -
    + {/each}
@@ -173,14 +173,12 @@ flex-direction: column; } - .category h4 { + .category summary { margin: 0; } .category-name { color: var(--color-text); - display: flex; - align-items: center; cursor: pointer; padding: 5px; border-radius: 5px; diff --git a/src/lib/types/ui/config.ts b/src/lib/types/ui/config.ts index af50716..725ee15 100644 --- a/src/lib/types/ui/config.ts +++ b/src/lib/types/ui/config.ts @@ -5,4 +5,5 @@ export interface UserConfig { userList?: boolean; recentEmojis?: string[]; lastChannel?: number; + hiddenCategories?: number[]; } From 76e43f7ce7dccc838f1d925bed571965e977bc02 Mon Sep 17 00:00:00 2001 From: Chromosomologist Date: Tue, 7 Jan 2025 14:58:23 +0100 Subject: [PATCH 5/5] refactor: ew --- src/lib/components/SphereBar.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/SphereBar.svelte b/src/lib/components/SphereBar.svelte index b49dbe9..272e2bd 100644 --- a/src/lib/components/SphereBar.svelte +++ b/src/lib/components/SphereBar.svelte @@ -89,7 +89,7 @@ {#each currentSphere.categories.slice(1) as category (category.id)}
toggleCategory(e, category)} > {category.name}