Message header - clickable avatar (#287)

* Message header - clickable avatar
* Hide cancel button in messenger

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;

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}

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>

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"

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>

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)}

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} />
 }