feat: display leave status in chat header (#119)

danyadev · Oct 4, 2024 · d12cc1e · d12cc1e
1 parent c2561ff
commit d12cc1e
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 47 deletions.
diff --git a/src/assets/icons/Icon24Info.svg b/src/assets/icons/Icon24Info.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -16,6 +16,7 @@ export { default as Icon24ChevronCompactLeft } from './Icon24ChevronCompactLeft.
 // export { default as Icon24CopyOutline } from './Icon24CopyOutline.svg'
 export { default as Icon24DoorArrowRightOutline } from './Icon24DoorArrowRightOutline.svg'
 export { default as Icon24HideOutline } from './Icon24HideOutline.svg'
+export { default as Icon24Info } from './Icon24Info.svg'
 export { default as Icon24LinkExternalOutline } from './Icon24LinkExternalOutline.svg'
 export { default as Icon24MuteOutline } from './Icon24MuteOutline.svg'
 export { default as Icon24Spinner } from './Icon24Spinner.svg'

diff --git a/src/converters/ConvoConverter.ts b/src/converters/ConvoConverter.ts
@@ -74,24 +74,30 @@ export function fromApiConvo(
         throw new Error('Chat with out of range id: ' + peerId)
       }
 
+      if (!apiConvo.chat_settings) {
+        console.warn(apiConvo)
+        throw new Error('Chat without chat_settings: ' + peerId)
+      }
+
       return {
         convo: {
           kind: 'ChatConvo',
           id: peerId,
-          isChannel: !!apiConvo.chat_settings?.is_group_channel,
-          isCasper: !!apiConvo.chat_settings?.is_disappearing,
-          pinnedMessage: apiConvo.chat_settings?.pinned_message
+          status: apiConvo.chat_settings.state,
+          isChannel: !!apiConvo.chat_settings.is_group_channel,
+          isCasper: !!apiConvo.chat_settings.is_disappearing,
+          pinnedMessage: apiConvo.chat_settings.pinned_message
             ? fromApiPinnedMessage(apiConvo.chat_settings.pinned_message)
             : undefined,
           ...baseConvo
         },
         peer: {
           kind: 'Chat',
           id: peerId,
-          title: apiConvo.chat_settings?.title ?? '',
-          photo50: apiConvo.chat_settings?.photo?.photo_50,
-          photo100: apiConvo.chat_settings?.photo?.photo_100,
-          membersCount: apiConvo.chat_settings?.members_count ?? 0
+          title: apiConvo.chat_settings.title,
+          photo50: apiConvo.chat_settings.photo?.photo_50,
+          photo100: apiConvo.chat_settings.photo?.photo_100,
+          membersCount: apiConvo.chat_settings.members_count ?? 0
         }
       }
 

diff --git a/src/lang/ru.ts b/src/lang/ru.ts
@@ -108,6 +108,8 @@ export const ru = {
   me_user_was_online_a_long_time_ago: 'заходил давно',
   me_attach_wall_empty: 'Пустая запись',
   me_attach_wall_open_button: 'Открыть запись',
+  me_chat_leaved_status: 'Вы вышли из чата',
+  me_chat_kicked_status: 'Вы были исключены из чата',
 
   me_chat_members_count: {
     one: '{count} участник',

diff --git a/src/model/Convo.ts b/src/model/Convo.ts
@@ -34,6 +34,7 @@ interface GroupConvo extends BaseConvo {
 export interface ChatConvo extends BaseConvo {
   kind: 'ChatConvo'
   id: Peer.ChatId
+  status: 'in' | 'kicked' | 'left' | 'out'
   isChannel: boolean
   isCasper: boolean
   pinnedMessage?: Message.Pinned
@@ -132,6 +133,7 @@ function mock(id: Peer.Id): Convo {
     return {
       kind: 'ChatConvo',
       id,
+      status: 'in',
       isCasper: false,
       isChannel: false,
       ...base

diff --git a/src/ui/messenger/ConvoComposer/ConvoComposer.css b/src/ui/messenger/ConvoComposer/ConvoComposer.css
@@ -9,24 +9,14 @@
 
 .ConvoComposer__panel {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   background: var(--vkd--color_background_composer);
   padding: 4px 6px;
   min-height: 42px;
   border-radius: 12px;
   box-shadow: var(--vkui--elevation3);
 }
 
-.ConvoComposer__panel--blocked {
-  align-items: center;
-  justify-content: center;
-}
-
-.ConvoComposer__actionButton {
-  color: var(--vkui--color_text_accent);
-  font-weight: 500;
-}
-
 .ConvoComposer__input {
   width: 100%;
   margin: 8px 6px;
@@ -40,3 +30,17 @@
   pointer-events: none;
   color: var(--vkui--color_text_secondary);
 }
+
+.ConvoComposer__restriction {
+  display: flex;
+  align-items: center;
+  margin: 0 4px;
+  gap: 8px;
+  color: var(--vkui--color_text_subhead);
+}
+
+.ConvoComposer__muteChannelButton {
+  color: var(--vkui--color_text_accent);
+  font-weight: 500;
+  margin: 0 auto;
+}
diff --git a/src/ui/messenger/ConvoComposer/ConvoComposer.tsx b/src/ui/messenger/ConvoComposer/ConvoComposer.tsx
@@ -2,7 +2,7 @@ import { defineComponent, ref } from 'vue'
 import * as Convo from 'model/Convo'
 import { useEnv } from 'hooks'
 import { Button } from 'ui/ui/Button/Button'
-import { Icon24MuteOutline, Icon24VolumeOutline } from 'assets/icons'
+import { Icon24Info, Icon24MuteOutline, Icon24VolumeOutline } from 'assets/icons'
 import './ConvoComposer.css'
 
 type Props = {
@@ -35,36 +35,48 @@ export const ConvoComposer = defineComponent<Props>((props) => {
       }
     }
 
+    const renderPanel = () => {
+      if (props.convo.kind === 'ChatConvo' && props.convo.status === 'kicked') {
+        return (
+          <div class="ConvoComposer__restriction">
+            <Icon24Info color="var(--vkui--color_accent_orange)" />
+            {lang.use('me_chat_kicked_status')}
+          </div>
+        )
+      }
+
+      if (isChannel) {
+        return (
+          <Button
+            class="ConvoComposer__muteChannelButton"
+            mode="tertiary"
+            loading={loading.value}
+            onClick={toggleNotifications}
+            before={
+              props.convo.notifications.enabled
+                ? <Icon24MuteOutline />
+                : <Icon24VolumeOutline />
+            }
+          >
+            {props.convo.notifications.enabled
+              ? lang.use('me_convo_disable_notifications')
+              : lang.use('me_convo_enable_notifications')}
+          </Button>
+        )
+      }
+
+      return (
+        <div
+          class="ConvoComposer__input"
+          contenteditable
+          placeholder={lang.use('me_convo_composer_placeholder')}
+        />
+      )
+    }
+
     return (
       <div class="ConvoComposer">
-        <div class={['ConvoComposer__panel', {
-          'ConvoComposer__panel--blocked': isChannel
-        }]}
-        >
-          {!isChannel ? (
-            <div
-              class="ConvoComposer__input"
-              contenteditable
-              placeholder={lang.use('me_convo_composer_placeholder')}
-            />
-          ) : (
-            <Button
-              class="ConvoComposer__actionButton"
-              mode="tertiary"
-              loading={loading.value}
-              onClick={toggleNotifications}
-              before={
-                props.convo.notifications.enabled
-                  ? <Icon24MuteOutline />
-                  : <Icon24VolumeOutline />
-              }
-            >
-              {props.convo.notifications.enabled
-                ? lang.use('me_convo_disable_notifications')
-                : lang.use('me_convo_enable_notifications')}
-            </Button>
-          )}
-        </div>
+        <div class="ConvoComposer__panel">{renderPanel()}</div>
       </div>
     )
   }

diff --git a/src/ui/messenger/ConvoHeader/ConvoHeader.tsx b/src/ui/messenger/ConvoHeader/ConvoHeader.tsx
@@ -45,6 +45,14 @@ export const ConvoHeader = defineComponent<Props>(({ convo }) => {
       }
 
       case 'Chat': {
+        if (convo.kind === 'ChatConvo' && convo.status === 'left') {
+          return lang.use('me_chat_leaved_status')
+        }
+
+        if (convo.kind === 'ChatConvo' && convo.status === 'kicked') {
+          return lang.use('me_chat_kicked_status')
+        }
+
         const langKey = isChannel ? 'me_group_members_count' : 'me_chat_members_count'
         return lang.usePlural(langKey, peer.membersCount, {
           count: shortenCount(peer.membersCount)