From 30c13478d61065a512f5bc8824fecbf2ee6afc81 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 3 Oct 2024 23:30:10 -0400
Subject: Handle basics of interface scrolling

---
 hi-ui/src/lib/Message.svelte | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 hi-ui/src/lib/Message.svelte

(limited to 'hi-ui/src/lib/Message.svelte')

diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
new file mode 100644
index 0000000..d3ecbd8
--- /dev/null
+++ b/hi-ui/src/lib/Message.svelte
@@ -0,0 +1,38 @@
+<script>
+    import { currentUser } from '../store';
+    import { deleteMessage } from '../apiServer';
+
+    export let at;
+    export let sender;
+    export let message;
+
+    let timestamp = new Date(at).toTimeString();
+
+    function handleDeleteMessage() {
+        deleteMessage(message.id);
+    }
+</script>
+
+<div class="hover:bg-zinc-300 flex flex-row">
+    <div class="sender basis-20 text-right mr-1">
+        @{sender.name}:
+    </div>
+    <div class="body grow">
+        {message.body}
+    </div>
+    <div class="timestamp basis-6">
+        <!-- TODO: this is too long and looks awful. -->
+        <!-- {timestamp} -->
+    </div>
+    {#if sender.id === $currentUser?.id}
+        <div class="controls basis-1 hidden relative -top-3 rounded-md border-2 border-slate-600 px-1 bg-slate-300">
+            <button on:click|preventDefault={handleDeleteMessage}>&#x1F5D1;</button>
+        </div>
+    {/if}
+</div>
+
+<style>
+    div:hover .controls {
+        display: block;
+    }
+</style>
-- 
cgit v1.2.3


From d2af16cd8368dc52d5d8702eb0ef2cf74a33cdb9 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sat, 5 Oct 2024 17:25:14 -0400
Subject: Remove delete-message buttons

They're badly styled and don't do anything yet anyway.
---
 hi-ui/src/lib/Message.svelte      | 9 ---------
 hi-ui/src/lib/MessageInput.svelte | 8 ++++----
 2 files changed, 4 insertions(+), 13 deletions(-)

(limited to 'hi-ui/src/lib/Message.svelte')

diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
index d3ecbd8..88e47cf 100644
--- a/hi-ui/src/lib/Message.svelte
+++ b/hi-ui/src/lib/Message.svelte
@@ -7,10 +7,6 @@
     export let message;
 
     let timestamp = new Date(at).toTimeString();
-
-    function handleDeleteMessage() {
-        deleteMessage(message.id);
-    }
 </script>
 
 <div class="hover:bg-zinc-300 flex flex-row">
@@ -24,11 +20,6 @@
         <!-- TODO: this is too long and looks awful. -->
         <!-- {timestamp} -->
     </div>
-    {#if sender.id === $currentUser?.id}
-        <div class="controls basis-1 hidden relative -top-3 rounded-md border-2 border-slate-600 px-1 bg-slate-300">
-            <button on:click|preventDefault={handleDeleteMessage}>&#x1F5D1;</button>
-        </div>
-    {/if}
 </div>
 
 <style>
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 6cd732a..9a8475c 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { Input, InputAddon, ButtonGroup, Button } from 'flowbite-svelte';
+    import { Input, ButtonGroup, Button } from 'flowbite-svelte';
     import { CaretRightSolid } from 'flowbite-svelte-icons';
 
     import { tick } from 'svelte';
@@ -21,10 +21,10 @@
     }
 </script>
 
-<form on:submit|preventDefault={handleSubmit}>
-    <ButtonGroup class="w-full">
+<form on:submit|preventDefault={handleSubmit} class="w-full">
+    <ButtonGroup>
         <Input disabled={disabled} bind:this={self} bind:value={input} />
-        <Button color="primary" class="!p-2.5" type="submit">
+        <Button color="primary" type="submit">
             <CaretRightSolid class="w-5 h-5" />
         </Button>
     </ButtonGroup>
-- 
cgit v1.2.3