diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/lib/apiServer.js | 27 | ||||
| -rw-r--r-- | ui/lib/components/ActiveChannel.svelte | 2 | ||||
| -rw-r--r-- | ui/lib/components/Message.svelte | 6 | ||||
| -rw-r--r-- | ui/lib/store/channels.js | 14 | ||||
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 15 | ||||
| -rw-r--r-- | ui/routes/+layout.svelte | 8 |
6 files changed, 14 insertions, 58 deletions
diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js index 3e270fc..5c6e5ef 100644 --- a/ui/lib/apiServer.js +++ b/ui/lib/apiServer.js @@ -1,6 +1,5 @@ import axios from 'axios'; -import { get } from 'svelte/store'; -import { currentUser, channelsList, logins, messages } from '$lib/store'; +import { channelsList, logins, messages } from '$lib/store'; export const apiServer = axios.create({ baseURL: '/api/', @@ -116,33 +115,9 @@ function onMessageEvent(data) { switch (data.event) { case 'sent': messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body)); - displayToast(data); break; case 'deleted': messages.update((value) => value.deleteMessage(data.id)); break; } } - -function displayToast(data) { - // we use get throughout this as this function is not reactive, and just - // needs the values of the stores at a moment in time. - const currentUserId = get(currentUser).id; - if (currentUserId === data.sender) { - return; - } - - const senderName = get(logins).get(data.sender); - const channelName = get(channelsList).get(data.channel); - const title = `${senderName} in ${channelName}`; - - const opts = { - body: data.body, - tag: title, - // TODO: we need to inject the understory/hi icon in a more principled way here: - icon: "/ui/lib/assets/logo.png", - // TODO: support onclick bringing you to the relevant channel? - onclick: null - } - new Notification(title, opts); -} diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte index 455043b..76bf13a 100644 --- a/ui/lib/components/ActiveChannel.svelte +++ b/ui/lib/components/ActiveChannel.svelte @@ -37,6 +37,6 @@ <style> .container { - overflow: scroll; + overflow: auto; } </style> diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index c9dd301..dd06eca 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -14,7 +14,7 @@ <div class="message relative"> <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span> - <section use:scroll class="py-1"> + <section use:scroll class="py-1 message-body"> {@html renderedBody} </section> </div> @@ -26,4 +26,8 @@ .message:hover .timestamp { display: flex; } + .message-body:empty:after { + content: "."; + visibility: hidden; + } </style> diff --git a/ui/lib/store/channels.js b/ui/lib/store/channels.js index 6d722c5..b57ca7e 100644 --- a/ui/lib/store/channels.js +++ b/ui/lib/store/channels.js @@ -1,26 +1,17 @@ export class Channels { constructor() { this.channels = []; - this.channelData = {}; } setChannels(channels) { this.channels = [...channels]; this.sort(); - this.channelData = channels.reduce( - (acc, val) => ({ - ...acc, - [val.id]: val.name, - }), - {} - ); return this; } addChannel(id, name) { this.channels = [...this.channels, { id, name }]; this.sort(); - this.channelData[id] = name; return this; } @@ -29,14 +20,9 @@ export class Channels { if (channelIndex !== -1) { this.channels.splice(channelIndex, 1); } - delete this.channelData[id]; return this; } - get(id) { - return this.channelData[id]; - } - sort() { this.channels.sort((a, b) => { if (a.name < b.name) { diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index cf5d5f1..ae80324 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -72,7 +72,6 @@ {:else} <div id="interface" class="p-2"> <nav id="sidebar" data-expanded={showMenuValue}> - <button class="h-4 w-4" aria-controls="sidebar" aria-expanded={showMenuValue} on:click={toggleMenu}>✖</button> <div class="channel-list"> <ChannelList active={channel} /> </div> @@ -81,10 +80,10 @@ </div> </nav> <main> - <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]"> + <div class="active-channel"> <slot /> </div> - <div class="create-message overflow-scroll max-h-full"> + <div class="create-message max-h-full"> <MessageInput {channel} /> </div> </main> @@ -101,12 +100,12 @@ #interface { margin: unset; display: grid; - grid-template: + grid-template: 'side main' 1fr / auto 1fr ; height: calc(100vh - var(--app-bar-height)); - + @media (width > 640px) { --overlay: static; --translate: 0; @@ -114,7 +113,7 @@ } nav { grid-area: side; - background-color: rgb(var(--color-surface-600)); + background-color: rgb(var(--color-surface-800)); inset: auto auto 0 0; padding: 0.25rem; position: var(--overlay, absolute); @@ -134,11 +133,11 @@ main { } .active-channel { height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); - overflow: scroll; + overflow: auto; } .channel-list { height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); - overflow: scroll; + overflow: auto; } nav[data-expanded=false] { translate: var(--translate, -100% 0); diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index eb29179..a86a7e8 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -2,8 +2,6 @@ import "../app.css"; import logo from '$lib/assets/logo.png'; - import { onMount } from 'svelte'; - import { AppBar } from '@skeletonlabs/skeleton'; import { showMenu, currentUser } from '$lib/store'; @@ -12,12 +10,6 @@ function toggleMenu() { showMenu.update((value) => !value); } - - onMount(() => { - Notification.requestPermission().then((result) => { - console.log(result); - }); - }); </script> <div id="app" class="m-0 p-0 h-vh w-full"> |