feat(downloads): rework tab bar downloads indicator

src/app/PersistableValues.ts

@@ -122,9 +122,13 @@ type PersistableValues_4_16_0 = PersistableValues_4_15_0 & {
   navigationLayout: 'tabs' | 'sidebar' | 'hidden';
 };
 
+type PersistableValues_4_16_1 = PersistableValues_4_16_0 & {
+  isDownloadsPercentageEnabled: boolean;
+};
+
 export type PersistableValues = Pick<
-  PersistableValues_4_16_0,
-  keyof PersistableValues_4_16_0
+  PersistableValues_4_16_1,
+  keyof PersistableValues_4_16_1
 >;
 
 export const migrations = {
@@ -242,4 +246,8 @@ export const migrations = {
     navigationLayout:
       (before as Partial<PersistableValues_4_16_0>).navigationLayout ?? 'tabs',
   }),
+  '>=4.16.1': (before: PersistableValues_4_16_0): PersistableValues_4_16_1 => ({
+    ...before,
+    isDownloadsPercentageEnabled: true,
+  }),
 };

src/app/selectors.ts

@@ -38,6 +38,8 @@ const selectPersistableValuesA = createStructuredSelector({
   isReportEnabled: ({ isReportEnabled }: RootState) => isReportEnabled,
   isFlashFrameEnabled: ({ isFlashFrameEnabled }: RootState) =>
     isFlashFrameEnabled,
+  isDownloadsPercentageEnabled: ({ isDownloadsPercentageEnabled }: RootState) =>
+    isDownloadsPercentageEnabled,
   isInternalVideoChatWindowEnabled: ({
     isInternalVideoChatWindowEnabled,
   }: RootState) => isInternalVideoChatWindowEnabled,

src/i18n/de-DE.i18n.json

@@ -215,6 +215,10 @@
         "onLinux": "Einige Linux-Distributionen unterstützen diese Funktion nicht.",
         "descriptionDarwin": "Lässt das App-Symbol im Dock hüpfen, um die Aufmerksamkeit des Benutzers zu erregen."
       },
+      "downloadsPercentage": {
+        "title": "Download-Prozentsatz",
+        "description": "Zeigt den Download-Fortschrittsprozenzsatz in der Tab-Leiste an."
+      },
       "hardwareAcceleration": {
         "title": "Hardware-Beschleunigung",
         "description": "Aktiviert die Verwendung der Hardwarebeschleunigung, sofern verfügbar. Die Anwendung wird bei Änderung neu geladen."

src/i18n/en.i18n.json

@@ -268,6 +268,10 @@
         "onLinux": "Some Linux distros don't have support for this feature.",
         "descriptionDarwin": "Dock icon bounces when a new message is received."
       },
+      "downloadsPercentage": {
+        "title": "Download percentage",
+        "description": "Show download progress percentage in the tab bar."
+      },
       "hardwareAcceleration": {
         "title": "Hardware acceleration",
         "description": "Improves visual rendering and performance. Disable if you experience visual glitches or instability.",

src/i18n/es.i18n.json

@@ -234,6 +234,10 @@
         "onLinux": "Algunas distribuciones de Linux no admiten esta función.",
         "descriptionDarwin": "Hace rebotar el icono de la aplicación en el dock para atraer la atención del usuario."
       },
+      "downloadsPercentage": {
+        "title": "Porcentaje de descarga",
+        "description": "Mostrar el porcentaje de progreso de descarga en la barra de pestañas."
+      },
       "hardwareAcceleration": {
         "title": "Aceleración de hardware",
         "description": "Habilita el uso de la aceleración de hardware cuando esté disponible. La aplicación se reiniciará al realizar cambios."

src/i18n/fi.i18n.json

@@ -222,6 +222,10 @@
         "onLinux": "Jotkin Linux-jakelut eivät tue tätä ominaisuutta.",
         "descriptionDarwin": "Herättää käyttäjän huomion ponnauttamalla sovelluskuvaketta Dockissa."
       },
+      "downloadsPercentage": {
+        "title": "Latauksen prosenttiosuus",
+        "description": "Näytä latauksen etenemisprosentti välilehtien palkissa."
+      },
       "hardwareAcceleration": {
         "title": "Laitteistokiihdytys",
         "description": "Ottaa käyttöön laitteistokiihdytyksen, jos se on käytettävissä. Sovellus latautuu uudelleen muutoksen yhteydessä."

src/i18n/fr.i18n.json

@@ -222,6 +222,10 @@
         "onLinux": "Certaines distributions Linux ne prennent pas en charge cette fonctionnalité.",
         "descriptionDarwin": "Fait rebondir l'icône de l'application dans le dock pour attirer l'attention de l'utilisateur."
       },
+      "downloadsPercentage": {
+        "title": "Pourcentage de téléchargement",
+        "description": "Afficher le pourcentage de progression du téléchargement dans la barre d'onglets."
+      },
       "hardwareAcceleration": {
         "title": "Accélération matérielle",
         "description": "Active l'utilisation de l'accélération matérielle lorsqu'elle est disponible. L'application se rechargera en cas de changement."

src/i18n/hu.i18n.json

@@ -247,6 +247,10 @@
         "onLinux": "Egyes Linux disztribúciók nem támogatják ezt a funkciót.",
         "descriptionDarwin": "Pattogtatja az alkalmazás ikonját a dokkban, hogy felhívja a felhasználó figyelmét."
       },
+      "downloadsPercentage": {
+        "title": "Letöltés százaléka",
+        "description": "A letöltés előrehaladási százalékának megjelenítése a lapok sávján."
+      },
       "hardwareAcceleration": {
         "title": "Hardveres gyorsítás",
         "description": "Engedélyezi a hardveres gyorsítás használatát, ha elérhető. Az alkalmazás újratöltődik a megváltoztatásakor."

src/i18n/no.i18n.json

@@ -254,6 +254,10 @@
         "onLinux": "Noen Linux-distroer har ikke støtte for denne funksjonen.",
         "descriptionDarwin": "Spretter appikonet i dokken for å tiltrekke brukerens oppmerksomhet."
       },
+      "downloadsPercentage": {
+        "title": "Nedlastingsprosentasje",
+        "description": "Vis nedlastingsprogressprosenten i fanen."
+      },
       "hardwareAcceleration": {
         "title": "Maskinvareakselerasjon",
         "description": "Muliggjør maskinvareakselerasjon når tilgjengelig. Applikasjonen vil lastes inn på nytt ved endring."

src/i18n/pt-BR.i18n.json

@@ -229,6 +229,10 @@
         "onLinux": "Algumas distribuições Linux não possuem suporte a esta funcionalidade.",
         "descriptionDarwin": "Faz o ícone da aplicação saltar na dock quando recebe notificação."
       },
+      "downloadsPercentage": {
+        "title": "Percentual de download",
+        "description": "Mostrar o percentual de progresso do download na barra de abas."
+      },
       "hardwareAcceleration": {
         "title": "Aceleração de hardware",
         "description": "Ativa aceleração de hardware quando disponível. O aplicativo será reiniciado ao ser alterado."

src/i18n/ru.i18n.json

@@ -216,6 +216,10 @@
         "onLinux": "Некоторые дистрибутивы Linux не поддерживают эту функцию.",
         "descriptionDarwin": "Мигание значка приложения в трее для привлечения внимания пользователя."
       },
+      "downloadsPercentage": {
+        "title": "Процент загрузки",
+        "description": "Показывать процент прогресса загрузки в строке вкладок."
+      },
       "hardwareAcceleration": {
         "title": "Аппаратное ускорение",
         "description": "Включает использование аппаратного ускорения, если оно доступно. Приложение будет перезапущено при изменении этой настройки."

src/i18n/sv.i18n.json

@@ -243,6 +243,10 @@
         "onLinux": "Vissa Linux-distributioner har inte stöd för den här funktionen.",
         "descriptionDarwin": "Appikonen studsar i dockan för att dra till sig användarens uppmärksamhet."
       },
+      "downloadsPercentage": {
+        "title": "Nedladdningsprocent",
+        "description": "Visa nedladdningsförloppsandelen i fliken."
+      },
       "hardwareAcceleration": {
         "title": "Hårdvaruacceleration",
         "description": "Aktiverar användning av hårdvaruacceleration när sådan finns tillgänglig. Programmet laddas om vid ändring."

src/i18n/zh-CN.i18n.json

@@ -158,6 +158,10 @@
         "description": "使用闪屏来吸引用户的注意。",
         "onLinux": "在一些Linux系统上这个功能不可用。"
       },
+      "downloadsPercentage": {
+        "title": "下载百分比",
+        "description": "在选项卡栏中显示下载进度百分比。"
+      },
       "internalVideoChatWindow": {
         "title": "在程序窗口中打开视频通话",
         "description": "如果启用，视频通话将在应用程序窗口中打开，而不是在默认浏览器中打开。但是，对于<strong>Google Meet</strong>和<strong>Jitsi</strong>，Electron应用程序不支持屏幕录制，所以无论此设置如何，它们始终会在浏览器中打开。",

src/store/rootReducer.ts

@@ -32,6 +32,7 @@ import { isAddNewServersEnabled } from '../ui/reducers/isAddNewServersEnabled';
 import { isDebugLoggingEnabled } from '../ui/reducers/isDebugLoggingEnabled';
 import { isDetailedEventsLoggingEnabled } from '../ui/reducers/isDetailedEventsLoggingEnabled';
 import { isDeveloperModeEnabled } from '../ui/reducers/isDeveloperModeEnabled';
+import { isDownloadsPercentageEnabled } from '../ui/reducers/isDownloadsPercentageEnabled';
 import { isFlashFrameEnabled } from '../ui/reducers/isFlashFrameEnabled';
 import { isHardwareAccelerationEnabled } from '../ui/reducers/isHardwareAccelerationEnabled';
 import { isInternalVideoChatWindowEnabled } from '../ui/reducers/isInternalVideoChatWindowEnabled';
@@ -117,6 +118,7 @@ export const rootReducer = combineReducers({
   updateError,
   isReportEnabled,
   isFlashFrameEnabled,
+  isDownloadsPercentageEnabled,
   isHardwareAccelerationEnabled,
   isInternalVideoChatWindowEnabled,
   isAddNewServersEnabled,

src/ui/actions.ts

@@ -128,6 +128,8 @@ export const SETTINGS_SET_E2E_PDF_PREVIEW_SIZE_LIMIT_CHANGED =
   'settings/set-e2e-pdf-preview-size-limit-changed';
 export const SETTINGS_SET_NAVIGATION_LAYOUT_CHANGED =
   'settings/set-navigation-layout-changed';
+export const SETTINGS_SET_DOWNLOADS_PERCENTAGE_ENABLED_CHANGED =
+  'settings/set-downloads-percentage-enabled-changed';
 export const SET_HAS_TRAY_MINIMIZE_NOTIFICATION_SHOWN =
   'notifications/set-has-tray-minimize-notification-shown';
 export const VIDEO_CALL_WINDOW_OPEN_URL = 'video-call-window/open-url';
@@ -270,6 +272,7 @@ export type UiActionTypeToPayloadMap = {
   [SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_WINDOW_PERSISTENCE_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED]: boolean;
+  [SETTINGS_SET_DOWNLOADS_PERCENTAGE_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_DEVELOPER_MODE_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_DEVTOOLS_AUTO_OPEN_ENABLED_CHANGED]: boolean;
   [SETTINGS_SET_IS_VIDEO_CALL_SCREEN_CAPTURE_FALLBACK_ENABLED_CHANGED]: boolean;

src/ui/components/SettingsView/GeneralTab.tsx

@@ -1,6 +1,7 @@
 import { Box, FieldGroup } from '@rocket.chat/fuselage';
 
 import { AvailableBrowsers } from './features/AvailableBrowsers';
+import { DownloadsPercentage } from './features/DownloadsPercentage';
 import { E2ePdfPreviewSizeLimit } from './features/E2ePdfPreviewSizeLimit';
 import { FlashFrame } from './features/FlashFrame';
 import { HardwareAcceleration } from './features/HardwareAcceleration';
@@ -32,6 +33,7 @@ export const GeneralTab = () => {
           {isWin32 && <MinimizeOnClose />}
           {!isDarwin && !isWin32 && <MenuBar />}
           <FlashFrame />
+          <DownloadsPercentage />
         </FieldGroup>
 
         <FieldGroup mbs='x24'>

src/ui/components/SettingsView/features/DownloadsPercentage.tsx

@@ -0,0 +1,46 @@
+import type { ChangeEvent } from 'react';
+import { useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import type { Dispatch } from 'redux';
+
+import type { RootAction } from '../../../../store/actions';
+import type { RootState } from '../../../../store/rootReducer';
+import { SETTINGS_SET_DOWNLOADS_PERCENTAGE_ENABLED_CHANGED } from '../../../actions';
+import { ToggleField } from './ToggleField';
+
+type DownloadsPercentageProps = {
+  className?: string;
+};
+
+export const DownloadsPercentage = (props: DownloadsPercentageProps) => {
+  const isDownloadsPercentageEnabled = useSelector(
+    ({ isDownloadsPercentageEnabled }: RootState) =>
+      isDownloadsPercentageEnabled
+  );
+  const dispatch = useDispatch<Dispatch<RootAction>>();
+  const { t } = useTranslation();
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const isChecked = event.currentTarget.checked;
+      dispatch({
+        type: SETTINGS_SET_DOWNLOADS_PERCENTAGE_ENABLED_CHANGED,
+        payload: isChecked,
+      });
+    },
+    [dispatch]
+  );
+
+  const isDownloadsPercentageEnabledId = useId();
+
+  return (
+    <ToggleField
+      id={isDownloadsPercentageEnabledId}
+      label={t('settings.options.downloadsPercentage.title')}
+      description={t('settings.options.downloadsPercentage.description')}
+      checked={isDownloadsPercentageEnabled}
+      onChange={handleChange}
+      className={props.className}
+    />
+  );
+};

src/ui/components/Shell/index.tsx

@@ -88,8 +88,8 @@ export const Shell = () => {
           <TabBar
             trailingSlot={
               <>
-                <DownloadsIndicator />
                 <UpdateLabel />
+                <DownloadsIndicator />
                 <MeatballMenuButton />
               </>
             }
@@ -102,8 +102,8 @@ export const Shell = () => {
             }
             trailingSlot={
               <>
-                <DownloadsIndicator />
                 <UpdateLabel />
+                <DownloadsIndicator />
               </>
             }
           />