Settings Tab: Allow resizing the left pane

stylesheets/components/Preferences.scss

@@ -33,49 +33,25 @@ $secondary-text-color: light-dark(
     background: variables.$color-gray-95;
   }
 
-  &__header {
-    display: flex;
-    flex-direction: row;
-  }
-
-  &__header__toggle {
-    flex-grow: 0;
-    min-width: 80px;
-    width: 80px;
-    margin-inline-end: -24px;
-  }
-
-  &__header__text {
-    flex-grow: 1;
-    margin-inline-start: 24px;
-    @include mixins.font-title-medium;
-    line-height: 20px;
-    margin-top: 12px;
-    margin-bottom: 20px;
-  }
-
   &__dialog-container {
     margin-bottom: 8px;
   }
 
   &__page-selector {
-    padding-top: var(--title-bar-drag-area-height);
+    padding-top: 2px;
-    width: 279px;
+    max-height: 100%;
-    flex-grow: 0;
+
-    flex-shrink: 0;
     @include mixins.light-theme {
       background: variables.$color-gray-04;
-      border-inline-end: 0.5px solid variables.$color-black-alpha-16;
     }
     @include mixins.dark-theme {
       background: variables.$color-gray-80;
-      border-inline-end: 0.5px solid variables.$color-white-alpha-16;
     }
   }
 
   &__scroll-area {
     overflow-y: scroll;
-    max-height: calc(100% - 52px);
+    max-height: 100%;
 
     &::-webkit-scrollbar-thumb {
       @include mixins.light-theme {

ts/components/Preferences.stories.tsx

@@ -243,6 +243,7 @@ export default {
     },
     page: Page.Profile,
     preferredSystemLocales: ['en'],
+    preferredWidthFromStorage: 300,
     resolvedLocale: 'en',
     selectedCamera:
       'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
@@ -328,6 +329,7 @@ export default {
     ),
     resetAllChatColors: action('resetAllChatColors'),
     resetDefaultChatColor: action('resetDefaultChatColor'),
+    savePreferredLeftPaneWidth: action('savePreferredLeftPaneWidth'),
     setGlobalDefaultConversationColor: action(
       'setGlobalDefaultConversationColor'
     ),

ts/components/Preferences.tsx

@@ -49,8 +49,8 @@ import {
 import { PreferencesBackups } from './PreferencesBackups';
 import { PreferencesInternal } from './PreferencesInternal';
 import { FunEmojiLocalizationProvider } from './fun/FunEmojiLocalizationProvider';
-import { NavTabsToggle } from './NavTabs';
 import { Avatar, AvatarSize } from './Avatar';
+import { NavSidebar } from './NavSidebar';
 
 import type { MediaDeviceSettings } from '../types/Calling';
 import type { ValidationResultType as BackupValidationResultType } from '../services/backups';
@@ -151,6 +151,7 @@ export type PropsDataType = {
   me: ConversationType;
   badge: BadgeType | undefined;
   theme: ThemeType;
+  preferredWidthFromStorage: number;
 
   // Limited support features
   isAutoDownloadUpdatesSupported: boolean;
@@ -200,6 +201,7 @@ type PropsFunctionType = {
   removeCustomColorOnConversations: (colorId: string) => unknown;
   resetAllChatColors: () => unknown;
   resetDefaultChatColor: () => unknown;
+  savePreferredLeftPaneWidth: (_: number) => void;
   setGlobalDefaultConversationColor: (
     color: ConversationColorType,
     customColorData?: {
@@ -411,6 +413,7 @@ export function Preferences({
   page,
   phoneNumber = '',
   preferredSystemLocales,
+  preferredWidthFromStorage,
   refreshCloudBackupStatus,
   refreshBackupSubscriptionStatus,
   removeCustomColor,
@@ -421,6 +424,7 @@ export function Preferences({
   resetAllChatColors,
   resetDefaultChatColor,
   resolvedLocale,
+  savePreferredLeftPaneWidth,
   selectedCamera,
   selectedMicrophone,
   selectedSpeaker,
@@ -651,6 +655,9 @@ export function Preferences({
           <Control
             left={i18n('icu:Preferences--phone-number')}
             right={phoneNumber}
+            rightStyle={{
+              maxWidth: '33%',
+            }}
           />
           <Control
             left={
@@ -662,6 +669,9 @@ export function Preferences({
               </>
             }
             right={deviceName}
+            rightStyle={{
+              maxWidth: '33%',
+            }}
           />
         </SettingsRow>
         <SettingsRow title={i18n('icu:Preferences--system')}>
@@ -1908,24 +1918,20 @@ export function Preferences({
     <FunEmojiLocalizationProvider i18n={i18n}>
       <div className="module-title-bar-drag-area" />
       <div className="Preferences">
-        <div className="Preferences__page-selector">
+        <NavSidebar
-          <div className="Preferences__header">
+          title={i18n('icu:Preferences--header')}
-            {navTabsCollapsed ? (
-              <div className="Preferences__header__toggle">
-                <NavTabsToggle
           i18n={i18n}
-                  onToggleNavTabsCollapse={onToggleNavTabsCollapse}
-                  navTabsCollapsed
-                  hasFailedStorySends={hasFailedStorySends}
           otherTabsUnreadStats={otherTabsUnreadStats}
+          hasFailedStorySends={hasFailedStorySends}
           hasPendingUpdate={false}
-                />
+          navTabsCollapsed={navTabsCollapsed}
-              </div>
+          onToggleNavTabsCollapse={onToggleNavTabsCollapse}
-            ) : undefined}
+          preferredLeftPaneWidth={preferredWidthFromStorage}
-            <h1 className="Preferences__header__text">
+          requiresFullWidth
-              {i18n('icu:Preferences--header')}
+          savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
-            </h1>
+          renderToastManager={renderToastManager}
-          </div>
+        >
+          <div className="Preferences__page-selector">
             {maybeUpdateDialog ? (
               <div className="Preferences__dialog-container">
                 <div className="module-left-pane__dialogs">
@@ -2084,11 +2090,9 @@ export function Preferences({
               ) : null}
             </div>
           </div>
+        </NavSidebar>
         {content}
       </div>
-      {renderToastManager({
-        containerWidthBreakpoint: WidthBreakpoint.Wide,
-      })}
     </FunEmojiLocalizationProvider>
   );
 }

ts/components/PreferencesUtil.tsx

@@ -32,12 +32,14 @@ export function SettingsControl({
   left,
   onClick,
   right,
+  rightStyle,
 }: {
   /** A className or `true` to leave room for icon */
   icon?: string | true;
   left: ReactNode;
   onClick?: () => unknown;
   right: ReactNode;
+  rightStyle?: React.CSSProperties;
 }): JSX.Element {
   const content = (
     <>
@@ -50,7 +52,9 @@ export function SettingsControl({
         />
       )}
       <div className="Preferences__control--key">{left}</div>
-      <div className="Preferences__control--value">{right}</div>
+      <div className="Preferences__control--value" style={rightStyle}>
+        {right}
+      </div>
     </>
   );
 

ts/state/smart/Preferences.tsx

@@ -17,6 +17,7 @@ import {
   getCustomColors,
   getItems,
   getNavTabsCollapsed,
+  getPreferredLeftPaneWidth,
 } from '../selectors/items';
 import { DEFAULT_AUTO_DOWNLOAD_ATTACHMENT } from '../../textsecure/Storage';
 import { DEFAULT_CONVERSATION_COLOR } from '../../types/Colors';
@@ -127,6 +128,7 @@ export function SmartPreferences(): JSX.Element | null {
     putItem,
     removeCustomColor,
     resetDefaultChatColor,
+    savePreferredLeftPaneWidth,
     setEmojiSkinToneDefault: onEmojiSkinToneDefaultChange,
     setGlobalDefaultConversationColor,
     toggleNavTabsCollapse,
@@ -144,17 +146,19 @@ export function SmartPreferences(): JSX.Element | null {
   const getConversationsWithCustomColor = useSelector(
     getConversationsWithCustomColorSelector
   );
-  const items = useSelector(getItems);
   const i18n = useSelector(getIntl);
+  const items = useSelector(getItems);
+  const hasFailedStorySends = useSelector(getHasAnyFailedStorySends);
   const hasPendingUpdate = useSelector(getHasPendingUpdate);
   const isUpdateDownloaded = useSelector(getIsUpdateDownloaded);
-  const navTabsCollapsed = useSelector(getNavTabsCollapsed);
-  const hasFailedStorySends = useSelector(getHasAnyFailedStorySends);
-  const otherTabsUnreadStats = useSelector(getOtherTabsUnreadStats);
   const me = useSelector(getMe);
-  const badge = useSelector(getPreferredBadgeSelector)(me.badges);
+  const navTabsCollapsed = useSelector(getNavTabsCollapsed);
+  const otherTabsUnreadStats = useSelector(getOtherTabsUnreadStats);
+  const preferredWidthFromStorage = useSelector(getPreferredLeftPaneWidth);
   const theme = useSelector(getTheme);
 
+  const badge = useSelector(getPreferredBadgeSelector)(me.badges);
+
   // The weird ones
 
   const makeSyncRequest = async () => {
@@ -763,6 +767,7 @@ export function SmartPreferences(): JSX.Element | null {
         otherTabsUnreadStats={otherTabsUnreadStats}
         page={page}
         preferredSystemLocales={preferredSystemLocales}
+        preferredWidthFromStorage={preferredWidthFromStorage}
         refreshCloudBackupStatus={refreshCloudBackupStatus}
         refreshBackupSubscriptionStatus={refreshBackupSubscriptionStatus}
         removeCustomColorOnConversations={removeCustomColorOnConversations}
@@ -779,6 +784,7 @@ export function SmartPreferences(): JSX.Element | null {
         sentMediaQualitySetting={sentMediaQualitySetting}
         setGlobalDefaultConversationColor={setGlobalDefaultConversationColor}
         setPage={setPage}
+        savePreferredLeftPaneWidth={savePreferredLeftPaneWidth}
         showToast={showToast}
         theme={theme}
         themeSetting={themeSetting}