Add fallback screen

src/components/Inbox/MessagesFallback.module.scss

@@ -0,0 +1,26 @@
+.MessagesFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+
+  $width: 10.5em;
+
+  .text {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    width: $width;
+  }
+
+  .button {
+    background: #141414;
+    border-radius: 12px;
+    width: 100%;
+    max-width: $width;
+    text-align: center;
+    color: #fff;
+    height: 48px;
+    text-transform: none;
+  }
+}

src/components/Inbox/MessagesFallback.tsx

@@ -0,0 +1,25 @@
+import { Show } from 'solid-js'
+import styles from './MessagesFallback.module.scss'
+
+type MessagesFallback = {
+  message: string
+  onClick?: () => void
+  actionText?: string
+}
+
+const MessagesFallback = (props: MessagesFallback) => {
+  return (
+    <div class={styles.MessagesFallback}>
+      <div>
+        <p class={styles.text}>{props.message}</p>
+        <Show when={props.onClick}>
+          <button class={styles.button} type="button" onClick={props.onClick}>
+            {props.actionText}
+          </button>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default MessagesFallback

src/components/Views/Inbox.tsx

@@ -16,6 +16,7 @@ import '../../styles/Inbox.scss'
 import { useInbox } from '../../context/inbox'
 import DialogHeader from '../Inbox/DialogHeader'
 import { apiClient } from '../../utils/apiClient'
+import MessagesFallback from '../Inbox/MessagesFallback'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -88,11 +89,11 @@ export const InboxView = () => {
     setPostMessageText(event.target.value)
   }
   createEffect(() => {
+    if (!textareaParent) return
     textareaParent.dataset.replicatedValue = postMessageText()
   })
 
-  const handleOpenInviteModal = (event: Event) => {
-    event.preventDefault()
+  const handleOpenInviteModal = () => {
     showModal('inviteToChat')
   }
 
@@ -120,9 +121,9 @@ export const InboxView = () => {
         <div class="chat-list col-md-4">
           <div class="sidebar-header">
             <Search placeholder="Поиск" onChange={getQuery} />
-            <div onClick={handleOpenInviteModal}>
+            <button type="button" onClick={handleOpenInviteModal}>
               <Icon name="plus-button" style={{ width: '40px', height: '40px' }} />
-            </div>
+            </button>
           </div>
 
           <div class="chat-list__types">
@@ -173,40 +174,47 @@ export const InboxView = () => {
         </div>
 
         <div class="col-md-8 conversation">
-          <Show when={currentDialog()}>
+          <Show
+            when={currentDialog()}
+            fallback={
+              <MessagesFallback
+                message={t('Choose who you want to write to')}
+                onClick={handleOpenInviteModal}
+                actionText={t('Start conversation')}
+              />
+            }
+          >
             <DialogHeader ownId={currentUserId()} chat={currentDialog()} />
-          </Show>
+            <div class="conversation__messages">
+              <div class="conversation__messages-container" ref={chatWindow}>
+                <For each={messages()}>
+                  {(message) => (
+                    <Message content={message} ownId={currentUserId()} members={currentDialog().members} />
+                  )}
+                </For>
 
-          <div class="conversation__messages">
-            <div class="conversation__messages-container" ref={chatWindow}>
-              <For each={messages()}>
-                {(message) => (
-                  <Message content={message} ownId={currentUserId()} members={currentDialog().members} />
-                )}
-              </For>
-
-              {/*<div class="conversation__date">*/}
-              {/*  <time>12 сентября</time>*/}
-              {/*</div>*/}
-            </div>
-          </div>
-
-          <div class="message-form">
-            <div class="wrapper">
-              <div class="grow-wrap" ref={textareaParent}>
-                <textarea
-                  value={postMessageText()}
-                  rows={1}
-                  onInput={(event) => handleChangeMessage(event)}
-                  placeholder="Написать сообщение"
-                  disabled={!currentDialog()?.id}
-                />
+                {/*<div class="conversation__date">*/}
+                {/*  <time>12 сентября</time>*/}
+                {/*</div>*/}
               </div>
-              <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
-                <Icon name="send-message" />
-              </button>
             </div>
-          </div>
+
+            <div class="message-form">
+              <div class="wrapper">
+                <div class="grow-wrap" ref={textareaParent}>
+                  <textarea
+                    value={postMessageText()}
+                    rows={1}
+                    onInput={(event) => handleChangeMessage(event)}
+                    placeholder="Написать сообщение"
+                  />
+                </div>
+                <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
+                  <Icon name="send-message" />
+                </button>
+              </div>
+            </div>
+          </Show>
         </div>
       </div>
     </div>

src/locales/ru.json

@@ -188,5 +188,7 @@
   "create_group": "Создать группу",
   "discourse_theme": "Тема дискурса",
   "cancel": "Отмена",
-  "group_chat": "Общий чат"
+  "group_chat": "Общий чат",
+  "Choose who you want to write to": "Выберите кому хотите написать",
+  "Start conversation": "Начать беседу"
 }