Selected dialog styles

src/components/Inbox/DialogCard.module.scss

@@ -9,7 +9,7 @@
   cursor: pointer;
   width: 100%;
 
-  &:hover {
+  &.hovered:hover {
     background: #f7f7f7;
   }
 
@@ -69,4 +69,14 @@
       }
     }
   }
+
+  &.opened,
+  &.opened:hover {
+    background: #000;
+    .name,
+    .message,
+    .time {
+      color: #fff !important;
+    }
+  }
 }

src/components/Inbox/DialogCard.tsx

@@ -16,6 +16,7 @@ type DialogProps = {
   onClick?: () => void
   isChatHeader?: boolean
   lastUpdate?: number
+  isOpened?: boolean
 }
 
 const DialogCard = (props: DialogProps) => {
@@ -27,10 +28,16 @@ const DialogCard = (props: DialogProps) => {
       ?.map((companion) => companion.name)
       .join(', ')
   )
-
   return (
     <Show when={props.members}>
-      <div class={clsx(styles.DialogCard, { [styles.header]: props.isChatHeader })} onClick={props.onClick}>
+      <div
+        class={clsx(styles.DialogCard, {
+          [styles.header]: props.isChatHeader,
+          [styles.opened]: props.isOpened,
+          [styles.hovered]: !props.isChatHeader
+        })}
+        onClick={props.onClick}
+      >
         <div class={styles.avatar}>
           <Switch fallback={<DialogAvatar name={props.members[0].name} url={props.members[0].userpic} />}>
             <Match when={companions().length > 2}>

src/components/Inbox/Message.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   margin: 3.2rem 0;
+  position: relative;
 
   .body {
     background: #f6f6f6;

src/components/Inbox/Message.tsx

@@ -5,6 +5,7 @@ import styles from './Message.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Message, ChatMember } from '../../graphql/types.gen'
 import formattedTime from '../../utils/formatDateTime'
+import { Icon } from '../_shared/Icon'
 
 type Props = {
   content: Message
@@ -17,11 +18,13 @@ const md = new MarkdownIt({
 })
 
 const Message = (props: Props) => {
-  // возвращать ID автора
   const isOwn = props.ownId === Number(props.content.author)
   const user = props.members?.find((m) => m.id === Number(props.content.author))
   return (
     <div class={clsx(styles.Message, isOwn && styles.own)}>
+      {/*<div class={styles.actions}>*/}
+      {/*  /!*<Icon name={}></Icon>*!/*/}
+      {/*</div>*/}
       <Show when={!isOwn}>
         <div class={styles.author}>
           <DialogAvatar size="small" name={user.name} url={user.userpic} />

src/components/Views/Inbox.tsx

@@ -17,7 +17,6 @@ import DialogHeader from '../Inbox/DialogHeader'
 import { apiClient } from '../../utils/apiClient'
 import MessagesFallback from '../Inbox/MessagesFallback'
 import { useRouter } from '../../stores/router'
-import createChat from '../../graphql/mutation/create-chat'
 
 const userSearch = (array: Author[], keyword: string) => {
   const searchTerm = keyword.toLowerCase()
@@ -144,43 +143,46 @@ export const InboxView = () => {
             </button>
           </div>
 
-          <div class="chat-list__types">
+          <Show when={chatsToShow}>
-            <ul>
+            <div class="chat-list__types">
-              <li
+              <ul>
-                class={clsx({ ['selected']: !sortByPerToPer() && !sortByGroup() })}
+                <li
-                onClick={() => {
+                  class={clsx({ ['selected']: !sortByPerToPer() && !sortByGroup() })}
-                  setSortByPerToPer(false)
+                  onClick={() => {
-                  setSortByGroup(false)
+                    setSortByPerToPer(false)
-                }}
+                    setSortByGroup(false)
-              >
+                  }}
-                <span>{t('All')}</span>
+                >
-              </li>
+                  <span>{t('All')}</span>
-              <li
+                </li>
-                class={clsx({ ['selected']: sortByPerToPer() })}
+                <li
-                onClick={() => {
+                  class={clsx({ ['selected']: sortByPerToPer() })}
-                  setSortByPerToPer(true)
+                  onClick={() => {
-                  setSortByGroup(false)
+                    setSortByPerToPer(true)
-                }}
+                    setSortByGroup(false)
-              >
+                  }}
-                <span>{t('Personal')}</span>
+                >
-              </li>
+                  <span>{t('Personal')}</span>
-              <li
+                </li>
-                class={clsx({ ['selected']: sortByGroup() })}
+                <li
-                onClick={() => {
+                  class={clsx({ ['selected']: sortByGroup() })}
-                  setSortByGroup(true)
+                  onClick={() => {
-                  setSortByPerToPer(false)
+                    setSortByGroup(true)
-                }}
+                    setSortByPerToPer(false)
-              >
+                  }}
-                <span>{t('Groups')}</span>
+                >
-              </li>
+                  <span>{t('Groups')}</span>
-            </ul>
+                </li>
-          </div>
+              </ul>
+            </div>
+          </Show>
           <div class="holder">
             <div class="dialogs">
               <For each={chatsToShow()}>
                 {(chat) => (
                   <DialogCard
                     onClick={() => handleOpenChat(chat)}
+                    isOpened={chat.id === currentDialog()?.id}
                     title={chat.title || chat.members[0].name}
                     members={chat.members}
                     ownId={currentUserId()}

src/styles/Inbox.scss

@@ -57,7 +57,7 @@ main {
       content: '';
       position: absolute;
       width: 100%;
-      right: 10px;
+      right: 0;
       z-index: 1;
       height: $fade-height;
     }