diff options
| author | Kit La Touche <kit@transneptune.net> | 2024-10-08 15:08:47 -0400 |
|---|---|---|
| committer | Kit La Touche <kit@transneptune.net> | 2024-10-08 15:08:47 -0400 |
| commit | 9b709a51d8af7ab0a0a14ae9b8f700e4719d63e7 (patch) | |
| tree | 1f1bfddbf6c9fa16e8ca9d60ef1fb974a952d697 /hi-ui/src | |
| parent | 05de3c7b211727039b3912311aa4bab6787a7457 (diff) | |
Remove Flowbite, add Skeleton, add Markdown rendering
Diffstat (limited to 'hi-ui/src')
| -rw-r--r-- | hi-ui/src/app.html | 4 | ||||
| -rw-r--r-- | hi-ui/src/lib/Message.svelte | 3 | ||||
| -rw-r--r-- | hi-ui/src/lib/MessageInput.svelte | 31 |
3 files changed, 20 insertions, 18 deletions
diff --git a/hi-ui/src/app.html b/hi-ui/src/app.html index 77a5ff5..63eb917 100644 --- a/hi-ui/src/app.html +++ b/hi-ui/src/app.html @@ -1,12 +1,12 @@ <!doctype html> -<html lang="en"> +<html lang="en" class="dark"> <head> <meta charset="utf-8" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> %sveltekit.head% </head> - <body data-sveltekit-preload-data="hover"> + <body data-sveltekit-preload-data="hover" data-theme="skeleton"> <div style="display: contents">%sveltekit.body%</div> </body> </html> diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte index 88e47cf..0e7cdaf 100644 --- a/hi-ui/src/lib/Message.svelte +++ b/hi-ui/src/lib/Message.svelte @@ -1,4 +1,5 @@ <script> + import SvelteMarkdown from 'svelte-markdown'; import { currentUser } from '../store'; import { deleteMessage } from '../apiServer'; @@ -14,7 +15,7 @@ @{sender.name}: </div> <div class="body grow"> - {message.body} + <SvelteMarkdown source={message.body} /> </div> <div class="timestamp basis-6"> <!-- TODO: this is too long and looks awful. --> diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte index b899221..3d22f89 100644 --- a/hi-ui/src/lib/MessageInput.svelte +++ b/hi-ui/src/lib/MessageInput.svelte @@ -1,31 +1,32 @@ <script> - import { Input, ButtonGroup, Button } from 'flowbite-svelte'; - import { CaretRightSolid } from 'flowbite-svelte-icons'; - import { tick } from 'svelte'; import { postToChannel } from '../apiServer'; import { activeChannel } from '../store'; - let self; let input; - $: disabled = !$activeChannel.isSet(); + let value; + let disabled; + activeChannel.subscribe((value) => { + disabled = !value.isSet(); + if (input && !disabled) { + input.focus(); + } + }); async function handleSubmit(event) { disabled = true; // TODO try/catch: - await postToChannel($activeChannel.get(), input); - input = ''; + await postToChannel($activeChannel.get(), value); + value = ''; disabled = false; await tick(); - self.focus(); + input.focus(); } </script> -<form on:submit|preventDefault={handleSubmit} class="w-full"> - <ButtonGroup> - <Input disabled={disabled} bind:this={self} bind:value={input} /> - <Button color="primary" type="submit"> - <CaretRightSolid class="w-5 h-5" /> - </Button> - </ButtonGroup> +<form on:submit|preventDefault={handleSubmit}> + <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]"> + <input bind:this={input} bind:value={value} disabled={disabled} type="search" /> + <button color="primary variant-filled-secondary" type="submit">»</button> + </div> </form> |