From d79716bde0b96a17945b606e0c3b39d162a17323 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 1 Nov 2023 11:34:59 +0300
Subject: [PATCH] Message header - clickable avatar (#287)

* Message header - clickable avatar
* Hide cancel button in messenger
---
 .../AuthorBadge/AuthorBadge.module.scss       |  7 +++
 .../Author/AuthorBadge/AuthorBadge.tsx        | 39 +++++++-------
 src/components/Author/Userpic/Userpic.tsx     |  2 +-
 src/components/Editor/SimplifiedEditor.tsx    |  8 ++-
 src/components/Inbox/DialogCard.tsx           | 53 ++++++++++++-------
 src/components/Views/Inbox.tsx                |  1 +
 src/components/_shared/Image/Image.tsx        |  4 +-
 7 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
index 281ec4d0..dc79e763 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@@ -5,6 +5,13 @@
   margin-bottom: 2rem;
   gap: 1rem;
 
+  &.nameOnly {
+    align-items: center;
+    .info {
+      margin-bottom: 0;
+    }
+  }
+
   @include media-breakpoint-down(sm) {
     flex-wrap: wrap;
     margin-bottom: 3rem;
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 26405ec5..851bacf9 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -17,6 +17,7 @@ type Props = {
   minimizeSubscribeButton?: boolean
   showMessageButton?: boolean
   iconButtons?: boolean
+  nameOnly?: boolean
 }
 export const AuthorBadge = (props: Props) => {
   const [isSubscribing, setIsSubscribing] = createSignal(false)
@@ -63,7 +64,7 @@ export const AuthorBadge = (props: Props) => {
   })
 
   return (
-    <div class={clsx(styles.AuthorBadge)}>
+    <div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
       <Userpic
         hasLink={true}
         size={'M'}
@@ -75,24 +76,26 @@ export const AuthorBadge = (props: Props) => {
         <div class={styles.name}>
           <span>{props.author.name}</span>
         </div>
-        <Switch
-          fallback={
-            <div class={styles.bio}>
-              {t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
-            </div>
-          }
-        >
-          <Match when={props.author.bio}>
-            <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
-          </Match>
-          <Match when={props.author?.stat && props.author?.stat.shouts > 0}>
-            <div class={styles.bio}>
-              {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
-            </div>
-          </Match>
-        </Switch>
+        <Show when={!props.nameOnly}>
+          <Switch
+            fallback={
+              <div class={styles.bio}>
+                {t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
+              </div>
+            }
+          >
+            <Match when={props.author.bio}>
+              <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
+            </Match>
+            <Match when={props.author?.stat && props.author?.stat.shouts > 0}>
+              <div class={styles.bio}>
+                {t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
+              </div>
+            </Match>
+          </Switch>
+        </Show>
       </a>
-      <Show when={props.author.slug !== session()?.user.slug}>
+      <Show when={props.author.slug !== session()?.user.slug && !props.nameOnly}>
         <div class={styles.actions}>
           <Show
             when={!props.minimizeSubscribeButton}
diff --git a/src/components/Author/Userpic/Userpic.tsx b/src/components/Author/Userpic/Userpic.tsx
index da243cfb..c9ccfea2 100644
--- a/src/components/Author/Userpic/Userpic.tsx
+++ b/src/components/Author/Userpic/Userpic.tsx
@@ -55,7 +55,7 @@ export const Userpic = (props: Props) => {
           condition={props.hasLink}
           wrapper={(children) => <a href={`/author/${props.slug}`}>{children}</a>}
         >
-          <Show when={props.userpic} fallback={<div class={styles.letters}>{letters()}</div>}>
+          <Show keyed={true} when={props.userpic} fallback={<div class={styles.letters}>{letters()}</div>}>
             <Image src={props.userpic} width={avatarSize()} height={avatarSize()} alt={props.name} />
           </Show>
         </ConditionalWrapper>
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 4ec2c340..534a28ad 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import {
   createEditorTransaction,
@@ -53,6 +53,7 @@ type Props = {
   onlyBubbleControls?: boolean
   controlsAlwaysVisible?: boolean
   autoFocus?: boolean
+  isCancelButtonVisible: boolean
 }
 
 export const MAX_DESCRIPTION_LIMIT = 400
@@ -61,6 +62,7 @@ const SimplifiedEditor = (props: Props) => {
   const { t } = useLocalize()
   const [counter, setCounter] = createSignal<number>()
 
+  const isCancelButtonVisible = createMemo(() => props.isCancelButtonVisible !== false)
   const wrapperEditorElRef: {
     current: HTMLElement
   } = {
@@ -327,7 +329,9 @@ const SimplifiedEditor = (props: Props) => {
           </div>
           <Show when={!props.onChange}>
             <div class={styles.buttons}>
-              <Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
+              <Show when={isCancelButtonVisible()}>
+                <Button value={t('Cancel')} variant="secondary" onClick={handleClear} />
+              </Show>
               <Button
                 value={props.submitButtonText ?? t('Send')}
                 variant="primary"
diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx
index 4a671ab0..52465089 100644
--- a/src/components/Inbox/DialogCard.tsx
+++ b/src/components/Inbox/DialogCard.tsx
@@ -5,6 +5,7 @@ import GroupDialogAvatar from './GroupDialogAvatar'
 import { clsx } from 'clsx'
 import styles from './DialogCard.module.scss'
 import { useLocalize } from '../../context/localize'
+import { AuthorBadge } from '../Author/AuthorBadge'
 
 type DialogProps = {
   online?: boolean
@@ -40,27 +41,41 @@ const DialogCard = (props: DialogProps) => {
         })}
         onClick={props.onClick}
       >
-        <div class={styles.avatar}>
-          <Switch fallback={<DialogAvatar name={props.members[0].slug} url={props.members[0].userpic} />}>
-            <Match when={props.members.length >= 3}>
+        <Switch
+          fallback={
+            <Show
+              when={props.isChatHeader}
+              fallback={
+                <div class={styles.avatar}>
+                  <DialogAvatar name={props.members[0].slug} url={props.members[0].userpic} />
+                </div>
+              }
+            >
+              <AuthorBadge nameOnly={true} author={props.members[0]} />
+            </Show>
+          }
+        >
+          <Match when={props.members.length >= 3}>
+            <div class={styles.avatar}>
               <GroupDialogAvatar users={props.members} />
-            </Match>
-          </Switch>
-        </div>
-        <div class={styles.row}>
-          <div class={styles.name}>
-            {companions()?.length > 1 ? t('Group Chat') : companions()[0]?.name}
-          </div>
-          <div class={styles.message}>
-            <Switch>
-              <Match when={props.message && !props.isChatHeader}>
-                <div innerHTML={props.message} />
-              </Match>
-              <Match when={props.isChatHeader && companions().length > 1}>{names()}</Match>
-            </Switch>
-          </div>
-        </div>
+            </div>
+          </Match>
+        </Switch>
+
         <Show when={!props.isChatHeader}>
+          <div class={styles.row}>
+            <div class={styles.name}>
+              {companions()?.length > 1 ? t('Group Chat') : companions()[0]?.name}
+            </div>
+            <div class={styles.message}>
+              <Switch>
+                <Match when={props.message}>
+                  <div innerHTML={props.message} />
+                </Match>
+                <Match when={props.isChatHeader && companions().length > 1}>{names()}</Match>
+              </Switch>
+            </div>
+          </div>
           <div class={styles.activity}>
             <Show when={props.lastUpdate}>
               <div class={styles.time}>{formatTime(new Date(props.lastUpdate * 1000))}</div>
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 0ab9c89e..fa34387c 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -266,6 +266,7 @@ export const InboxView = () => {
                 <SimplifiedEditor
                   smallHeight={true}
                   imageEnabled={true}
+                  isCancelButtonVisible={false}
                   placeholder={t('Write message')}
                   setClear={isClear()}
                   onSubmit={(message) => handleSubmit(message)}
diff --git a/src/components/_shared/Image/Image.tsx b/src/components/_shared/Image/Image.tsx
index df5ae79c..bf2ce8f3 100644
--- a/src/components/_shared/Image/Image.tsx
+++ b/src/components/_shared/Image/Image.tsx
@@ -1,4 +1,4 @@
-import { splitProps } from 'solid-js'
+import { createMemo, splitProps } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { getImageUrl } from '../../../utils/getImageUrl'
 
@@ -9,8 +9,6 @@ type Props = JSX.ImgHTMLAttributes<HTMLImageElement> & {
 
 export const Image = (props: Props) => {
   const [local, others] = splitProps(props, ['src', 'alt'])
-
   const src = getImageUrl(local.src, { width: others.width })
-
   return <img src={src} alt={local.alt} {...others} />
 }