From 42a8c0fe3dea53c2857bc76d31eda039ed2caea5 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Tue, 27 Feb 2024 19:56:38 +0000
Subject: [PATCH] feat: show avatar at compose

to make it more in keeping with other event messages
when displayed in thread
---
 src/lib/components/events/Compose.svelte   | 54 +++++++++++++---------
 src/lib/components/users/UserHeader.svelte |  2 +
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/events/Compose.svelte b/src/lib/components/events/Compose.svelte
index 3fef282..1865b73 100644
--- a/src/lib/components/events/Compose.svelte
+++ b/src/lib/components/events/Compose.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { login } from '$lib/stores/users'
+  import { logged_in_user, login } from '$lib/stores/users'
+  import UserHeader from '../users/UserHeader.svelte'
+  import { defaults as user_defaults } from '../users/type'
 
   export let sendReply: (content: string) => void = () => {}
   export let placeholder = 'reply...'
@@ -12,27 +14,35 @@
   let content = ''
 </script>
 
-<div class="">
-  <textarea
-    disabled={submitting}
-    bind:value={content}
-    class="textarea textarea-primary w-full"
-    {placeholder}
-  ></textarea>
-  <div class="flex">
-    <div class="flex-auto"></div>
-    <button
-      on:click={submit}
+<div class="flex pt-5">
+  <div class="mt-0 flex-none px-3">
+    <UserHeader
+      avatar_only={true}
+      user={$logged_in_user || { ...user_defaults, loading: false }}
+    />
+  </div>
+  <div class="flex-grow pt-2">
+    <textarea
       disabled={submitting}
-      class="align-right btn btn-primary btn-sm mt-2 align-bottom"
-    >
-      {#if submitting}
-        Sending
-      {:else if !logged_in}
-        Login before Sending
-      {:else}
-        Send
-      {/if}
-    </button>
+      bind:value={content}
+      class="textarea textarea-primary w-full"
+      {placeholder}
+    ></textarea>
+    <div class="flex">
+      <div class="flex-auto"></div>
+      <button
+        on:click={submit}
+        disabled={submitting}
+        class="align-right btn btn-primary btn-sm mt-2 align-bottom"
+      >
+        {#if submitting}
+          Sending
+        {:else if !logged_in}
+          Login before Sending
+        {:else}
+          Send
+        {/if}
+      </button>
+    </div>
   </div>
 </div>
diff --git a/src/lib/components/users/UserHeader.svelte b/src/lib/components/users/UserHeader.svelte
index 88b10cb..6e0f9e5 100644
--- a/src/lib/components/users/UserHeader.svelte
+++ b/src/lib/components/users/UserHeader.svelte
@@ -9,6 +9,7 @@
 
   export let inline = false
   export let size: 'xs' | 'sm' | 'md' = 'md'
+  export let avatar_only = false
 
   $: ({ profile, loading } = user)
   $: display_name = getName(user)
@@ -56,6 +57,7 @@
       class:flex-auto={!inline}
       class:m-auto={!inline}
       class:inline-block={inline}
+      class:hidden={avatar_only}
     >
       {#if loading}
         <div