feat(control-center): group audio device menu by shared label prefix and size popup to content

Author: ItsLemmy

src/shell/control_center/tabs/audio_tab.cpp

@@ -26,7 +26,10 @@
 #include <format>
 #include <memory>
 #include <ranges>
+#include <span>
 #include <string>
+#include <string_view>
+#include <tuple>
 #include <unordered_map>
 #include <utility>
 #include <vector>
@@ -739,6 +742,115 @@ namespace {
     return out;
   }
 
+  std::vector<std::string_view> deviceLabelTokens(std::string_view label) {
+    std::vector<std::string_view> tokens;
+    std::size_t pos = 0;
+    while (pos < label.size()) {
+      while (pos < label.size() && label[pos] == ' ') {
+        ++pos;
+      }
+      const std::size_t start = pos;
+      while (pos < label.size() && label[pos] != ' ') {
+        ++pos;
+      }
+      if (pos > start) {
+        tokens.push_back(label.substr(start, pos - start));
+      }
+    }
+    return tokens;
+  }
+
+  std::size_t commonTokenCount(std::span<const std::string_view> a, std::span<const std::string_view> b) {
+    const std::size_t limit = std::min(a.size(), b.size());
+    std::size_t count = 0;
+    while (count < limit && a[count] == b[count]) {
+      ++count;
+    }
+    return count;
+  }
+
+  std::string joinTokens(std::span<const std::string_view> tokens) {
+    std::string out;
+    for (const std::string_view token : tokens) {
+      if (!out.empty()) {
+        out.push_back(' ');
+      }
+      out.append(token);
+    }
+    return out;
+  }
+
+  struct DeviceMenuItem {
+    std::uint32_t id = 0;
+    std::string label;
+    bool selected = false;
+  };
+
+  // PipeWire sink/source descriptions are "card + profile/port" concatenations, so a multi-port card
+  // yields several near-identical labels. Fold labels sharing a substantial token prefix under one
+  // non-interactive header so each entry carries only its distinguishing tail.
+  std::vector<ContextMenuControlEntry> buildDeviceMenuEntries(std::vector<DeviceMenuItem> items) {
+    constexpr std::size_t kMinSharedTokens = 2;
+
+    std::ranges::sort(items, [](const DeviceMenuItem& a, const DeviceMenuItem& b) {
+      return std::tie(a.label, a.id) < std::tie(b.label, b.id);
+    });
+
+    std::vector<std::vector<std::string_view>> tokens;
+    tokens.reserve(items.size());
+    for (const DeviceMenuItem& item : items) {
+      tokens.push_back(deviceLabelTokens(item.label));
+    }
+
+    auto deviceEntry = [](const DeviceMenuItem& item, std::string label) {
+      return ContextMenuControlEntry{
+          .id = static_cast<std::int32_t>(item.id),
+          .label = std::move(label),
+          .radio = true,
+          .toggleState = item.selected ? 1 : 0,
+          .ellipsize = TextEllipsize::Middle,
+      };
+    };
+
+    std::vector<ContextMenuControlEntry> entries;
+    entries.reserve(items.size());
+    std::size_t i = 0;
+    while (i < items.size()) {
+      // Grow the run while the shared token prefix stays substantial.
+      std::size_t shared = tokens[i].size();
+      std::size_t j = i + 1;
+      while (j < items.size()) {
+        const std::size_t common = commonTokenCount(std::span(tokens[i]).first(shared), tokens[j]);
+        if (common < kMinSharedTokens) {
+          break;
+        }
+        shared = common;
+        ++j;
+      }
+      // A member whose whole label is the shared prefix would fold to an empty entry; keep such
+      // runs unfolded (the first item is emitted alone and grouping restarts at the next one).
+      bool foldable = j - i >= 2;
+      for (std::size_t k = i; foldable && k < j; ++k) {
+        foldable = tokens[k].size() > shared;
+      }
+      if (foldable) {
+        entries.push_back({
+            .label = joinTokens(std::span(tokens[i]).first(shared)),
+            .header = true,
+            .ellipsize = TextEllipsize::Middle,
+        });
+        for (std::size_t k = i; k < j; ++k) {
+          entries.push_back(deviceEntry(items[k], joinTokens(std::span(tokens[k]).subspan(shared))));
+        }
+        i = j;
+      } else {
+        entries.push_back(deviceEntry(items[i], items[i].label));
+        ++i;
+      }
+    }
+    return entries;
+  }
+
   class AudioDeviceRow : public Flex {
   public:
     explicit AudioDeviceRow(float scale, std::function<void()> onSelect) : m_onSelect(std::move(onSelect)) {
@@ -1323,19 +1435,16 @@ void AudioTab::openDeviceMenu(DeviceVolumeCardState& card, const DeviceMenuModel
   const AudioState& state = m_audio->state();
 
   const std::uint32_t defaultDeviceId = menu.defaultDeviceId(state);
-  auto entries = availableDevices(menu.devices(state), defaultDeviceId)
+  auto items = availableDevices(menu.devices(state), defaultDeviceId)
       | std::views::transform([&](const AudioNode& node) {
-                   const std::string_view selectedPrefix = node.id == defaultDeviceId ? "• " : "";
-                   return ContextMenuControlEntry{
-                       .id = static_cast<std::int32_t>(node.id),
-                       .label = std::format("{}{}", selectedPrefix, audioDeviceLabel(node)),
-                       .enabled = true,
-                       .separator = false,
-                       .hasSubmenu = false,
-                       .ellipsize = TextEllipsize::Middle,
-                   };
-                 })
+                 return DeviceMenuItem{
+                     .id = node.id,
+                     .label = audioDeviceLabel(node),
+                     .selected = node.id == defaultDeviceId,
+                 };
+               })
       | std::ranges::to<std::vector>();
+  auto entries = buildDeviceMenuEntries(std::move(items));
 
   if (card.menuAnchor == nullptr) {
     return;
@@ -1350,8 +1459,11 @@ void AudioTab::openDeviceMenu(DeviceVolumeCardState& card, const DeviceMenuModel
   float anchorAbsY = 0.0f;
   Node::absolutePosition(card.menuAnchor, anchorAbsX, anchorAbsY);
 
+  // Size the popup to its entries: at least the old card-bound width, but free to grow past the
+  // half-width card so long device names stay readable.
   const float scale = contentScale();
-  const float menuWidth = std::min(280.0f * scale, card.menuAnchor->width());
+  const float minMenuWidth = std::min(280.0f * scale, card.menuAnchor->width());
+  const float maxMenuWidth = 420.0f * scale;
 
   if (m_config != nullptr) {
     m_deviceMenuPopup->setShadowConfig(m_config->config().shell.shadow);
@@ -1376,7 +1488,8 @@ void AudioTab::openDeviceMenu(DeviceVolumeCardState& card, const DeviceMenuModel
   m_deviceMenuPopup->open(
       ContextMenuPopupRequest{
           .entries = std::move(entries),
-          .menuWidth = menuWidth,
+          .minMenuWidth = minMenuWidth,
+          .maxMenuWidth = maxMenuWidth,
           .maxVisible = 10,
           .anchor =
               PopupAnchorRect{

src/ui/controls/context_menu.cpp

@@ -7,6 +7,7 @@
 #include "ui/style.h"
 
 #include <algorithm>
+#include <cmath>
 #include <linux/input-event-codes.h>
 
 namespace {
@@ -26,6 +27,10 @@ namespace {
 
   bool hasToggle(const ContextMenuControlEntry& entry) { return entry.checkmark || entry.radio; }
 
+  bool isInteractive(const ContextMenuControlEntry& entry) {
+    return entry.enabled && !entry.separator && !entry.header;
+  }
+
   std::string toggleGlyphName(const ContextMenuControlEntry& entry) {
     if (entry.toggleState == 2) {
       return "minus";
@@ -91,7 +96,7 @@ void ContextMenuControl::setRedrawCallback(std::function<void()> redrawCallback)
 
 std::size_t ContextMenuControl::firstInteractiveIndex() const noexcept {
   for (std::size_t i = 0; i < m_entries.size(); ++i) {
-    if (m_entries[i].enabled && !m_entries[i].separator) {
+    if (isInteractive(m_entries[i])) {
       return i;
     }
   }
@@ -154,7 +159,7 @@ bool ContextMenuControl::activateHighlighted() {
     return false;
   }
   const ContextMenuControlEntry& entry = m_entries[m_highlightedIndex];
-  if (!entry.enabled || entry.separator) {
+  if (!isInteractive(entry)) {
     return false;
   }
   if (entry.hasSubmenu) {
@@ -183,6 +188,25 @@ float ContextMenuControl::rowBottom(std::size_t index) const noexcept {
 
 float ContextMenuControl::preferredHeight() const { return preferredHeight(m_entries, m_maxVisible, m_contentScale); }
 
+float ContextMenuControl::preferredWidth(
+    Renderer& renderer, const std::vector<ContextMenuControlEntry>& entries, float scale
+) {
+  scale = safeScale(scale);
+  float maxRowWidth = 0.0f;
+  for (const ContextMenuControlEntry& entry : entries) {
+    if (entry.separator || entry.label.empty()) {
+      continue;
+    }
+    const float toggleSlot = hasToggle(entry) ? 22.0f * scale : 0.0f;
+    const FontWeight weight = entry.header ? FontWeight::Bold : FontWeight::Normal;
+    const float textWidth = std::ceil(renderer.measureText(entry.label, kMenuFontSize * scale, weight).width);
+    // Mirrors rebuildRows: 8px label inset each side, 30px right when a chevron is drawn.
+    const float sidePadding = (entry.hasSubmenu ? 30.0f : 16.0f) * scale;
+    maxRowWidth = std::max(maxRowWidth, textWidth + toggleSlot + sidePadding);
+  }
+  return maxRowWidth + kMenuPadding * scale * 2.0f;
+}
+
 float ContextMenuControl::preferredHeight(
     const std::vector<ContextMenuControlEntry>& entries, std::size_t maxVisible, float scale
 ) {
@@ -245,7 +269,7 @@ void ContextMenuControl::rebuildRows(Renderer& renderer) {
 
   for (std::size_t i = 0; i < visibleItems; ++i) {
     const ContextMenuControlEntry& entry = m_entries[i];
-    const bool interactive = entry.enabled && !entry.separator;
+    const bool interactive = isInteractive(entry);
     const bool separator = entry.separator;
     const float rowHeight = separator ? separatorHeight : itemHeight;
 
@@ -261,7 +285,7 @@ void ContextMenuControl::rebuildRows(Renderer& renderer) {
 
     const float rowCenterY = currentY + rowHeight * 0.5f;
     row->setOnClick([this, entry, rowCenterY](const InputArea::PointerData& data) {
-      if (!entry.enabled || entry.separator || data.button != BTN_LEFT) {
+      if (!isInteractive(entry) || data.button != BTN_LEFT) {
         return;
       }
       if (entry.hasSubmenu) {
@@ -305,7 +329,10 @@ void ContextMenuControl::rebuildRows(Renderer& renderer) {
           .out = &labelPtr,
           .text = entry.label,
           .fontSize = kMenuFontSize * scale,
-          .color = entry.enabled ? enabledItemColor() : disabledItemColor(),
+          .fontWeight = entry.header ? FontWeight::Bold : FontWeight::Normal,
+          .color = entry.header ? colorSpecFromRole(ColorRole::OnSurfaceVariant)
+              : entry.enabled   ? enabledItemColor()
+                                : disabledItemColor(),
           .maxWidth =
               entry.hasSubmenu ? (rowWidth - 30.0f * scale - toggleSlot) : (rowWidth - 16.0f * scale - toggleSlot),
           .maxLines = 1,
@@ -367,9 +394,10 @@ void ContextMenuControl::rebuildRows(Renderer& renderer) {
         .interactive = interactive,
     };
     if (rowBgPtr != nullptr && labelPtr != nullptr) {
-      visual.apply = [rowBgPtr, labelPtr, togglePtr, chevronPtr, interactive, separator](bool highlighted) {
+      visual.apply = [rowBgPtr, labelPtr, togglePtr, chevronPtr, interactive, separator,
+                      header = entry.header](bool highlighted) {
         rowBgPtr->setFill(highlighted ? colorSpecFromRole(ColorRole::Hover) : clearColorSpec());
-        if (separator) {
+        if (separator || header) {
           labelPtr->setColor(colorSpecFromRole(ColorRole::OnSurfaceVariant));
         } else {
           labelPtr->setColor(

src/ui/controls/context_menu.h

@@ -20,6 +20,8 @@ struct ContextMenuControlEntry {
   std::string label;
   bool enabled = true;
   bool separator = false;
+  // Non-interactive group heading; entries below it read as members of the group.
+  bool header = false;
   bool hasSubmenu = false;
   bool checkmark = false;
   bool radio = false;
@@ -51,6 +53,9 @@ class ContextMenuControl : public Node {
   [[nodiscard]] float preferredHeight() const;
   [[nodiscard]] static float
   preferredHeight(const std::vector<ContextMenuControlEntry>& entries, std::size_t maxVisible, float scale = 1.0f);
+  // Width that fits the widest entry without elision (label + toggle/submenu slots + padding).
+  [[nodiscard]] static float
+  preferredWidth(Renderer& renderer, const std::vector<ContextMenuControlEntry>& entries, float scale = 1.0f);
 
 private:
   struct RowVisual {

src/ui/controls/context_menu_popup.cpp

@@ -42,8 +42,18 @@ void ContextMenuPopup::open(ContextMenuPopupRequest request) {
   const std::size_t maxVisible =
       request.maxVisible > 0 ? request.maxVisible : std::max<std::size_t>(1, request.entries.size());
   const float menuHeight = ContextMenuControl::preferredHeight(request.entries, maxVisible);
+  float menuWidth = request.menuWidth;
+  if (menuWidth <= 0.0f) {
+    menuWidth = ContextMenuControl::preferredWidth(m_renderContext, request.entries);
+    if (request.maxMenuWidth > 0.0f) {
+      menuWidth = std::min(menuWidth, request.maxMenuWidth);
+    }
+    if (request.minMenuWidth > 0.0f) {
+      menuWidth = std::max(menuWidth, request.minMenuWidth);
+    }
+  }
   const auto chrome =
-      popup_chrome::computeGeometry(request.menuWidth, menuHeight, m_shadowConfig, Style::popupShadowsEnabled());
+      popup_chrome::computeGeometry(menuWidth, menuHeight, m_shadowConfig, Style::popupShadowsEnabled());
   m_scrollState = {};
   m_scrollView = nullptr;
   m_menu = nullptr;

src/ui/controls/context_menu_popup.h

@@ -34,7 +34,10 @@ struct ContextMenuPopupPlacement {
 
 struct ContextMenuPopupRequest {
   std::vector<ContextMenuControlEntry> entries;
+  // <= 0 sizes the menu to its widest entry, clamped to [minMenuWidth, maxMenuWidth] (0 = unbounded).
   float menuWidth = 0.0f;
+  float minMenuWidth = 0.0f;
+  float maxMenuWidth = 0.0f;
   std::size_t maxVisible = 0;
   PopupAnchorRect anchor;
   PopupSurfaceParent parent;