diff options
Diffstat (limited to 'packages/renderer/src/components/sidebar/ServiceSwitcher.tsx')
-rw-r--r-- | packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx index 404149b..010c716 100644 --- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx +++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx | |||
@@ -21,9 +21,12 @@ | |||
21 | import Tab from '@mui/material/Tab'; | 21 | import Tab from '@mui/material/Tab'; |
22 | import Tabs from '@mui/material/Tabs'; | 22 | import Tabs from '@mui/material/Tabs'; |
23 | import { alpha, styled } from '@mui/material/styles'; | 23 | import { alpha, styled } from '@mui/material/styles'; |
24 | import type { TFunction } from 'i18next'; | ||
24 | import { observer } from 'mobx-react-lite'; | 25 | import { observer } from 'mobx-react-lite'; |
25 | import React from 'react'; | 26 | import React from 'react'; |
27 | import { useTranslation } from 'react-i18next'; | ||
26 | 28 | ||
29 | import type Service from '../../stores/Service'; | ||
27 | import { useStore } from '../StoreProvider'; | 30 | import { useStore } from '../StoreProvider'; |
28 | 31 | ||
29 | import ServiceIcon from './ServiceIcon'; | 32 | import ServiceIcon from './ServiceIcon'; |
@@ -63,7 +66,36 @@ const ServiceSwitcherTab = styled(Tab, { | |||
63 | }, | 66 | }, |
64 | })); | 67 | })); |
65 | 68 | ||
69 | function getServiceTitle(service: Service, t: TFunction) { | ||
70 | const { | ||
71 | settings: { name }, | ||
72 | directMessageCount, | ||
73 | indirectMessageCount, | ||
74 | } = service; | ||
75 | let messagesText: string | undefined; | ||
76 | if (indirectMessageCount > 0) { | ||
77 | messagesText = | ||
78 | directMessageCount > 0 | ||
79 | ? t('service.title.directAndIndirectMessageCount', { | ||
80 | directMessageCount, | ||
81 | indirectMessageCount, | ||
82 | }) | ||
83 | : t('service.title.indirectMessageCount', { | ||
84 | count: indirectMessageCount, | ||
85 | }); | ||
86 | } else if (directMessageCount > 0) { | ||
87 | messagesText = t('service.title.directMessageCount', { | ||
88 | count: directMessageCount, | ||
89 | }); | ||
90 | } | ||
91 | if (messagesText === undefined) { | ||
92 | return t('service.title.nameWithNoMessages', { name }); | ||
93 | } | ||
94 | return t('service.title.nameWithMessages', { name, messages: messagesText }); | ||
95 | } | ||
96 | |||
66 | function ServiceSwitcher(): JSX.Element { | 97 | function ServiceSwitcher(): JSX.Element { |
98 | const { t } = useTranslation(); | ||
67 | const { settings, services } = useStore(); | 99 | const { settings, services } = useStore(); |
68 | const { selectedService } = settings; | 100 | const { selectedService } = settings; |
69 | 101 | ||
@@ -81,7 +113,7 @@ function ServiceSwitcher(): JSX.Element { | |||
81 | key={service.id} | 113 | key={service.id} |
82 | value={service.id} | 114 | value={service.id} |
83 | icon={<ServiceIcon service={service} />} | 115 | icon={<ServiceIcon service={service} />} |
84 | aria-label={service.settings.name} | 116 | aria-label={getServiceTitle(service, t)} |
85 | /> | 117 | /> |
86 | ))} | 118 | ))} |
87 | </ServiceSwitcherRoot> | 119 | </ServiceSwitcherRoot> |