Update collapsed left pane designs to minimize empty space

stylesheets/_modules.scss

@@ -4574,8 +4574,8 @@ button.module-image__border-overlay:focus {
   padding-right: 10px;
 
   &--width-narrow {
-    padding-left: 6px;
+    padding-left: 10px;
-    padding-right: 6px;
+    padding-right: 10px;
   }
 
   &--scroll-behavior {
@@ -4681,6 +4681,9 @@ button.module-image__border-overlay:focus {
     }
 
     &--contact-or-conversation {
+      $unread-indicator-selector: '#{&}__unread-indicator';
+      $avatar-container-unread-indicator-selector: '#{&}__avatar-container #{$unread-indicator-selector}';
+
       @include button-reset;
 
       align-items: center;
@@ -4695,7 +4698,7 @@ button.module-image__border-overlay:focus {
       width: 100%;
 
       .module-conversation-list--width-narrow & {
-        padding-left: 18px;
+        padding-left: 14px;
         padding-right: 0;
       }
 
@@ -4738,14 +4741,58 @@ button.module-image__border-overlay:focus {
 
       &--is-selected {
         @include light-theme {
-          background-color: $color-gray-15;
+          $background-color: $color-gray-15;
+          background-color: $background-color;
+          '#{$avatar-container-unread-indicator-selector}' {
+            border-color: $background-color;
+          }
         }
         @include dark-theme {
-          background-color: $color-white-alpha-12;
+          $background-color: $color-gray-65;
+          background-color: $background-color;
+          '#{$avatar-container-unread-indicator-selector}' {
+            border-color: $background-color;
+          }
         }
       }
 
-      &__unread-indicator {
+      &__avatar-container {
+        position: relative;
+
+        '#{$unread-indicator-selector}' {
+          $border-width: 3px;
+          $size: 21px + $border-width;
+
+          @include rounded-corners;
+          border: $border-width solid transparent;
+          display: none;
+          height: $size;
+          margin: 0;
+          min-width: $size;
+          position: absolute;
+          right: -(5px + $border-width);
+          top: -(1px + $border-width);
+
+          .module-conversation-list--width-narrow & {
+            display: block;
+          }
+
+          @include light-theme {
+            border-color: $color-gray-02;
+          }
+          @include dark-theme {
+            border-color: $color-gray-80;
+          }
+
+          &--two-digits,
+          &--many {
+            right: -(7px + $border-width);
+          }
+        }
+      }
+
+      // We want this to just be the unread indicator selector, not a child of the parent.
+      @at-root '#{$unread-indicator-selector}' {
         $size: 18px;
 
         @include font-caption-bold;
@@ -4766,8 +4813,7 @@ button.module-image__border-overlay:focus {
         align-items: center;
 
         .module-conversation-list--width-narrow & {
-          margin-left: 6px;
+          display: none;
-          box-sizing: border-box;
         }
 
         @include light-theme {
@@ -4779,7 +4825,6 @@ button.module-image__border-overlay:focus {
 
         &--two-digits,
         &--many {
-          box-sizing: content-box;
           padding-left: 4px;
           padding-right: 4px;
         }
@@ -5141,7 +5186,7 @@ button.module-image__border-overlay:focus {
         @include rounded-corners;
         display: block;
         height: 2px;
-        margin: 19px 0 19px 17px;
+        margin: 19px 0 19px 14px;
         padding-bottom: 0;
         width: 48px;
 
@@ -5180,21 +5225,35 @@ button.module-image__border-overlay:focus {
   position: relative;
 
   @include light-theme {
+    $background-color: $color-gray-02;
+
     border-color: $color-gray-15;
-    background-color: $color-gray-02;
+    background-color: $background-color;
 
     ::-webkit-scrollbar-thumb {
       border: 2px solid $color-gray-02;
     }
+
+    .module-conversation-list__item--contact-or-conversation:hover
+      .module-conversation-list__item--contact-or-conversation__unread-indicator {
+      border-color: mix($color-black, $background-color, 6%);
+    }
   }
 
   @include dark-theme {
+    $background-color: $color-gray-80;
+
     border-color: $color-gray-65;
-    background-color: $color-gray-80;
+    background-color: $background-color;
 
     ::-webkit-scrollbar-thumb {
       border: 2px solid $color-gray-80;
     }
+
+    .module-conversation-list__item--contact-or-conversation:hover
+      .module-conversation-list__item--contact-or-conversation__unread-indicator {
+      border-color: mix($color-white, $background-color, 6%);
+    }
   }
 }
 

ts/components/LeftPane.tsx

@@ -42,7 +42,7 @@ import type {
   SaveAvatarToDiskActionType,
 } from '../types/Avatar';
 
-const MIN_WIDTH = 109;
+const MIN_WIDTH = 97;
 const SNAP_WIDTH = 200;
 const MIN_FULL_WIDTH = 280;
 const MAX_WIDTH = 380;

ts/components/conversationList/BaseConversationListItem.tsx

@@ -18,6 +18,7 @@ import { Spinner } from '../Spinner';
 
 const BASE_CLASS_NAME =
   'module-conversation-list__item--contact-or-conversation';
+const AVATAR_CONTAINER_CLASS_NAME = `${BASE_CLASS_NAME}__avatar-container`;
 const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
 const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
 export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
@@ -142,27 +143,30 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
 
     const contents = (
       <>
-        <Avatar
+        <div className={AVATAR_CONTAINER_CLASS_NAME}>
-          acceptedMessageRequest={acceptedMessageRequest}
+          <Avatar
-          avatarPath={avatarPath}
+            acceptedMessageRequest={acceptedMessageRequest}
-          color={color}
+            avatarPath={avatarPath}
-          conversationType={conversationType}
+            color={color}
-          noteToSelf={isAvatarNoteToSelf}
+            conversationType={conversationType}
-          searchResult={isUsernameSearchResult}
+            noteToSelf={isAvatarNoteToSelf}
-          i18n={i18n}
+            searchResult={isUsernameSearchResult}
-          isMe={isMe}
+            i18n={i18n}
-          name={name}
+            isMe={isMe}
-          phoneNumber={phoneNumber}
+            name={name}
-          profileName={profileName}
+            phoneNumber={phoneNumber}
-          title={title}
+            profileName={profileName}
-          sharedGroupNames={sharedGroupNames}
+            title={title}
-          size={AvatarSize.FORTY_EIGHT}
+            sharedGroupNames={sharedGroupNames}
-          unblurredAvatarPath={unblurredAvatarPath}
+            size={AvatarSize.FORTY_EIGHT}
-          // This is here to appease the type checker.
+            unblurredAvatarPath={unblurredAvatarPath}
-          {...(props.badge
+            // This is here to appease the type checker.
-            ? { badge: props.badge, theme: props.theme }
+            {...(props.badge
-            : { badge: undefined })}
+              ? { badge: props.badge, theme: props.theme }
-        />
+              : { badge: undefined })}
+          />
+          <UnreadIndicator count={unreadCount} isUnread={isUnread} />
+        </div>
         <div
           className={classNames(
             CONTENT_CLASS_NAME,
@@ -197,7 +201,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
                 </div>
               )}
               {messageStatusIcon}
-              {isUnread && <UnreadIndicator count={unreadCount} />}
+              <UnreadIndicator count={unreadCount} isUnread={isUnread} />
             </div>
           ) : null}
         </div>
@@ -254,7 +258,14 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
     );
   });
 
-function UnreadIndicator({ count = 0 }: Readonly<{ count?: number }>) {
+function UnreadIndicator({
+  count = 0,
+  isUnread,
+}: Readonly<{ count?: number; isUnread: boolean }>) {
+  if (!isUnread) {
+    return null;
+  }
+
   let classModifier: undefined | string;
   if (count > 99) {
     classModifier = 'many';