left_sidebar: Redesign condensed view popover.

This commit also sets all popover labels to flex grow into the remaining
available space. This allows us to align the unread counters, if any
to the rightmost corner of the menu option. This change, however, does
not lead to visual changes in any popover.

Fixes part of #28699.

web/src/left_sidebar_navigation_area_popovers.js

@@ -218,6 +218,7 @@ export function initialize() {
     });
 
     popover_menus.register_popover_menu(".left-sidebar-navigation-menu-icon", {
+        theme: "popover-menu",
         ...popover_menus.left_sidebar_tippy_options,
         onShow(instance) {
             // Determine at show time whether there are scheduled messages,

web/styles/left_sidebar.css

@@ -847,23 +847,8 @@ li.top_left_scheduled_messages {
 }
 
 .condensed-views-popover-menu {
-    .left-sidebar-popover-icon-label-count {
-        display: flex;
-        align-items: baseline;
-    }
-
-    .filter-icon {
-        align-self: center;
-        height: 15px;
-    }
-
-    .left-sidebar-navigation-label {
-        flex: 1 0 0;
-        margin-left: 3px;
-    }
-
     .unread_count {
-        margin-left: 6px;
+        margin: 1px 0 0 6px;
         border-color: var(--color-border-unread-counter-popover-menu);
     }
 }

web/styles/popovers.css

@@ -1178,6 +1178,7 @@ ul {
         /* Keep menu items on a single line, unless forced to wrap
         by a max-width on the popover. */
         width: max-content;
+        flex: 1 0 0;
     }
 
     .text-item,

web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs

@@ -1,33 +1,26 @@
-{{! Contents of the condensed nav vdots popup }}
+<div class="popover-menu" data-simplebar>
-<ul class="nav nav-list condensed-views-popover-menu">
+    <ul role="menu" class="popover-menu-list condensed-views-popover-menu">
-    <li class="condensed-views-popover-menu-reactions">
+        <li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-reactions">
-        {{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
+            <a href="#narrow/has/reaction/sender/me" role="menuitem" class="popover-menu-link tippy-left-sidebar-tooltip" data-tooltip-template-id="my-reactions-tooltip-template" tabindex="0">
-        <a tabindex="0" href="#narrow/has/reaction/sender/me" class="left-sidebar-popover-icon-label-count tippy-left-sidebar-tooltip" data-tooltip-template-id="my-reactions-tooltip-template">
+                <i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
-            <span class="filter-icon">
+                <span class="popover-menu-label">{{t 'Reactions' }}</span>
-                <i class="zulip-icon zulip-icon-smile" aria-hidden="true"></i>
-            </span>
-            <span class="left-sidebar-navigation-label">{{t 'Reactions' }}</span>
             </a>
         </li>
-    <li class="condensed-views-popover-menu-drafts">
+        <li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-drafts">
-        {{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
+            <a href="#drafts" role="menuitem" class="popover-menu-link tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template" tabindex="0">
-        <a tabindex="0" href="#drafts" class="left-sidebar-popover-icon-label-count tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template">
+                <i class="popover-menu-icon zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
-            <span class="filter-icon">
+                <span class="popover-menu-label">{{t 'Drafts' }}</span>
-                <i class="zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
-            </span>
-            <span class="left-sidebar-navigation-label">{{t 'Drafts' }}</span>
                 <span class="unread_count"></span>
             </a>
         </li>
         {{#if has_scheduled_messages }}
-    <li class="condensed-views-popover-menu-scheduled-messages">
+        <li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-scheduled-messages">
-        <a tabindex="0" href="#scheduled" class="left-sidebar-popover-icon-label-count">
+            <a href="#scheduled" role="menuitem" class="popover-menu-link" tabindex="0">
-            <span class="filter-icon">
+                <i class="popover-menu-icon zulip-icon zulip-icon-scheduled-messages" aria-hidden="true"></i>
-                <i class="zulip-icon zulip-icon-scheduled-messages" aria-hidden="true"></i>
+                <span class="popover-menu-label">{{t 'Scheduled messages' }}</span>
-            </span>
-            <span class="left-sidebar-navigation-label">{{t 'Scheduled messages' }}</span>
                 <span class="unread_count"></span>
             </a>
         </li>
         {{/if}}
-</ul>
+    </ul>
+</div>