Move plugin sort from dropdown to clickable column headers

Replace the toolbar sort dropdown with sortable Name/Source/Status column
headers that cycle ascending, descending, then clear. Add a Source column
and a PluginSortKey::None baseline for the cleared state. The whole header
cell is the click target and the sort triangle snaps in without a fade.

resources/web/dialog/PluginsDialog/index.html

@@ -23,45 +23,6 @@
 <!--        <button id="open_terminal" class="ButtonStyleRegular ButtonTypeChoice left-btn">-->
 <!--            Open Terminal-->
 <!--        </button>-->
-      <div id="sortDropdown" class="sort-dropdown">
-        <button id="sort_menu_btn" class="ButtonStyleRegular ButtonTypeChoice sort-menu-btn" type="button"
-          aria-haspopup="true" aria-expanded="false" aria-controls="sortMenu" title="Sort plugins">
-          <svg class="sort-order-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
-            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
-            <path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
-          </svg>
-          <span id="sort_current_label"></span>
-          <span class="sort-caret" aria-hidden="true"></span>
-        </button>
-        <div id="sortMenu" class="sort-menu" role="menu" hidden>
-          <div class="sort-group-label" id="sortByLabel">Sort by</div>
-          <div role="group" aria-labelledby="sortByLabel">
-            <button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="status">Status</button>
-            <button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="name">Name</button>
-            <button type="button" class="sort-menu-item" role="menuitemradio" data-sort-field="source">Source</button>
-          </div>
-          <div class="sort-group-label" id="sortOrderLabel">Order</div>
-          <div role="group" aria-labelledby="sortOrderLabel">
-            <button type="button" class="sort-menu-item" role="menuitemradio" data-sort-order="asc">
-              <svg class="sort-order-icon" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
-                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
-                <path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
-              </svg>
-              Ascending
-            </button>
-            <button type="button" class="sort-menu-item" role="menuitemradio" data-sort-order="desc">
-              <svg class="sort-order-icon desc" viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor"
-                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M2.5 4.5h3.5M2.5 8h5.5M2.5 11.5h7.5" />
-                <path d="M12.5 11.5V4.5M10 7l2.5-2.5L15 7" />
-              </svg>
-              Descending
-            </button>
-          </div>
-        </div>
-      </div>
       <button id="refresh_btn" class="ButtonStyleRegular ButtonTypeChoice">
         Refresh
       </button>
@@ -84,9 +45,13 @@
       <section class="pane plugin-list-pane">
         <div class="hdr plugin-cols">
           <span>Activate</span>
-          <span>Name</span>
+          <span class="sort-th" data-sort-field="name" role="button" tabindex="0"
+            title="Sort by name">Name<span class="sort-tri" aria-hidden="true"></span></span>
           <span>Plugin Version</span>
-          <span>Status</span>
+          <span class="sort-th" data-sort-field="source" role="button" tabindex="0"
+            title="Sort by source">Source<span class="sort-tri" aria-hidden="true"></span></span>
+          <span class="sort-th" data-sort-field="status" role="button" tabindex="0"
+            title="Sort by status">Status<span class="sort-tri" aria-hidden="true"></span></span>
         </div>
         <div id="pluginList" class="body thin-scroll"></div>
       </section>

resources/web/dialog/PluginsDialog/index.js

@@ -118,10 +118,6 @@ function ShowExploreMenu() {
   if (!exploreMenu || !exploreMenuButton)
     return;
 
-  // why: our stopPropagation blocks the outside-click handler, so close the sibling sort menu ourselves (mirror of ToggleSortMenu).
-  if (typeof HideSortMenu === "function")
-    HideSortMenu();
-
   exploreMenu.hidden = false;
   exploreMenuButton.setAttribute("aria-expanded", "true");
 }
@@ -220,7 +216,7 @@ function HandleStudio(value) {
     SetSelectedInstallAction(payload.install_action, false);
     if (typeof NormalizePluginSort === "function") {
       pluginSort = NormalizePluginSort(payload.sort_key, payload.sort_order);
-      RenderSortMenuState();
+      RenderSortHeaders();
     }
     ApplyPlugins(payload.data || []);
   } else if (payload.command === "status_message") {
@@ -337,6 +333,7 @@ function RenderPlugins() {
     row.appendChild(CheckCell(row, plugin));
     row.appendChild(LabelCell(plugin, isExpanded, capabilities.length));
     row.appendChild(VersionCell(plugin));
+    row.appendChild(SourceCell(plugin));
     row.appendChild(StatusCell(plugin));
 
     block.appendChild(row);
@@ -531,11 +528,24 @@ function LabelCell(plugin, isExpanded = false, capabilityCount = 0) {
     nameWrap.appendChild(countBadge);
   }
   labelCell.appendChild(nameWrap);
-  labelCell.appendChild(SourceBadge(plugin.source));
 
   return labelCell;
 }
 
+function SourceCell(plugin) {
+  const cell = document.createElement("span");
+  const normalized = String(plugin.source || "").toLowerCase();
+  const variant = (normalized === "mine" || normalized === "subscribed") ? normalized : "local";
+  cell.className = `source-cell source-${variant}`;
+
+  const sourceLabel = document.createElement("span");
+  sourceLabel.className = "source-label";
+  sourceLabel.textContent = SourceLabel(plugin.source);
+  cell.appendChild(sourceLabel);
+
+  return cell;
+}
+
 function RenderCapabilityTree(plugin, capabilities) {
   const tree = document.createElement("div");
   tree.className = "capabilities-tree";
@@ -574,6 +584,11 @@ function RenderCapabilityRow(plugin, capability, isLast) {
   typeCell.textContent = String(capability?.type || "-");
   row.appendChild(typeCell);
 
+  // why: empty placeholder for the new Source column so the run-action cell stays under Status.
+  const sourceSpacer = document.createElement("span");
+  sourceSpacer.className = "capability-source-cell";
+  row.appendChild(sourceSpacer);
+
   const actionsCell = document.createElement("span");
   actionsCell.className = "capability-actions-cell";
   const capabilityName = String(capability?.name || "");

resources/web/dialog/PluginsDialog/plugin-sort.css

@@ -1,89 +1,42 @@
-/* why: isolate dropdown styling from the existing plugin dialog styles. */
+/* why: sort affordance lives on the list column headers, not a toolbar dropdown. */
 
-.sort-dropdown {
+.hdr .sort-th {
-  position: relative;
-  display: inline-flex;
-  margin-right: auto;
-}
-
-.sort-menu-btn {
-  height: 32px !important;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  /* why: global .ButtonTypeChoice adds margin-left:15px (dialog button rows); as the leftmost
-     toolbar item that stacks on .app's 8px padding - kill it like .explore-dropdown does. */
-  margin-left: 0 !important;
-}
-
-/* note: asc is bars growing downward + up arrow; a vertical flip yields the desc icon. */
-.sort-order-icon {
-  display: block;
-  flex: none;
-}
-
-.sort-menu-btn.order-desc .sort-order-icon,
-.sort-order-icon.desc {
-  transform: scaleY(-1);
-}
-
-.sort-caret {
-  width: 7px;
-  height: 7px;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: translateY(-2px) rotate(45deg);
-}
-
-.sort-menu {
-  position: absolute;
-  left: 0;
-  top: calc(100% + 2px);
-  z-index: 20;
-  min-width: 200px;
-  padding: 4px 0;
-  background: var(--main-color);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
-}
-
-.sort-menu[hidden] {
-  display: none !important;
-}
-
-.sort-group-label {
-  padding: 8px 10px 4px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: rgba(255, 255, 255, 0.55);
-}
-
-.sort-menu-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
-  width: 100%;
-  padding: 8px 10px 8px 28px; /* why: reserve space for the active-row checkmark. */
-  border: 0;
-  background: transparent;
-  color: #ffffff;
-  box-sizing: border-box;
-  text-align: left;
-  font: inherit;
   cursor: pointer;
-  position: relative;
+  user-select: none;
 }
 
-/* note: same tint as .explore-menu-item hover/.selected, so the two menus match */
+.hdr .sort-th .sort-tri {
-.sort-menu-item:hover,
+  width: 0;
-.sort-menu-item:focus-visible,
+  height: 0;
-.sort-menu-item[aria-checked="true"] {
+  flex: none;
-  outline: none;
+  border-left: 4px solid transparent;
-  background: rgba(255, 255, 255, 0.14);
+  border-right: 4px solid transparent;
+  display: none;
 }
 
-.sort-menu-item[aria-checked="true"]::before {
+/* faint up-triangle hint on hover, only while the column is not the active sort */
-  content: "\2713"; /* note: checkmark on the active field/order. */
+.hdr .sort-th:hover .sort-tri {
-  position: absolute;
+  display: block;
-  left: 10px;
+  border-bottom: 5px solid var(--muted);
+}
+
+/* active column wins over the hover hint (same specificity, declared later) */
+.hdr .sort-th[data-sort="asc"] .sort-tri {
+  display: block;
+  border-bottom: 5px solid var(--text);
+  border-top: 0;
+}
+
+.hdr .sort-th[data-sort="desc"] .sort-tri {
+  display: block;
+  border-top: 5px solid var(--text);
+  border-bottom: 0;
+}
+
+.hdr .sort-th[data-sort="asc"],
+.hdr .sort-th[data-sort="desc"] {
+  color: var(--text);
 }

resources/web/dialog/PluginsDialog/plugin-sort.js

@@ -1,6 +1,8 @@
 // why: C++ owns ordering; this file only sends and reflects sort state.
 
-const DEFAULT_PLUGIN_SORT = { key: "status", order: "asc" };
+const DEFAULT_PLUGIN_SORT = { key: "none", order: "asc" };
+// note: SORT_FIELDS are the clickable columns. "none" is the baseline/cleared state, not a field -
+//   it is special-cased in NormalizePluginSort and produced by CyclePluginSort's third click.
 const SORT_FIELDS = new Set(["status", "name", "source"]);
 let pluginSort = { ...DEFAULT_PLUGIN_SORT };
 
@@ -8,14 +10,14 @@ let pluginSort = { ...DEFAULT_PLUGIN_SORT };
 function NormalizePluginSort(sortKey, sortOrder) {
   const key = String(sortKey || "");
   return {
-    key: SORT_FIELDS.has(key) ? key : DEFAULT_PLUGIN_SORT.key,
+    key: key === "none" ? "none" : (SORT_FIELDS.has(key) ? key : DEFAULT_PLUGIN_SORT.key),
     order: sortOrder === "desc" ? "desc" : DEFAULT_PLUGIN_SORT.order,
   };
 }
 
 function RequestPluginSort(sortKey, sortOrder) {
   pluginSort = NormalizePluginSort(sortKey, sortOrder);
-  RenderSortMenuState();
+  RenderSortHeaders();
 
   if (typeof SendMessage === "function")
     SendMessage("set_plugin_sort", {
@@ -24,67 +26,42 @@ function RequestPluginSort(sortKey, sortOrder) {
     });
 }
 
-let sortMenuEl = null;
+// why: one click per column cycles asc -> desc -> clear; setting any column clears the previous
-let sortMenuButton = null;
+//   one for free because C++ (and pluginSort) only ever hold a single key.
-let sortCurrentLabel = null;
+function CyclePluginSort(field) {
-
+  if (!SORT_FIELDS.has(field))
-function InitSortDropdown() {
-  sortMenuEl = document.getElementById("sortMenu");
-  sortMenuButton = document.getElementById("sort_menu_btn");
-  sortCurrentLabel = document.getElementById("sort_current_label");
-  if (!sortMenuButton || !sortMenuEl)
     return;
-  sortMenuButton.addEventListener("click", ToggleSortMenu);
+  if (pluginSort.key !== field)
-  sortMenuEl.addEventListener("click", OnSortMenuClick);
+    RequestPluginSort(field, "asc");
-  RenderSortMenuState();
+  else if (pluginSort.order === "asc")
+    RequestPluginSort(field, "desc");
+  else
+    RequestPluginSort("none", "asc"); // third click: back to baseline
 }
 
-function ToggleSortMenu(event) {
+// why: paints the sort indicator for headers
-  event.preventDefault();
+// e.g., when user clicks triangle to change sort order, or change to sort by a new different field
-  event.stopPropagation();
+function RenderSortHeaders() {
-  if (!sortMenuEl)
+  document.querySelectorAll(".hdr .sort-th").forEach((th) => {
-    return;
+    // "" | "asc" | "desc" - renders the triangle via plugin-sort.css [data-sort=...].
-  const willShow = sortMenuEl.hidden;
+    th.dataset.sort = th.dataset.sortField === pluginSort.key ? pluginSort.order : "";
-  // why: our stopPropagation blocks index.js's outside-click handler, so close the sibling explore menu ourselves.
+  });
-  if (willShow && typeof HideExploreMenu === "function")
-    HideExploreMenu();
-  sortMenuEl.hidden = !willShow;
-  sortMenuButton.setAttribute("aria-expanded", willShow ? "true" : "false");
 }
 
-function HideSortMenu() {
+function InitSortHeaders() {
-  if (!sortMenuEl || sortMenuEl.hidden)
+  document.querySelectorAll(".hdr .sort-th").forEach((th) => {
-    return;
+    th.addEventListener("click", () => CyclePluginSort(th.dataset.sortField));
-  sortMenuEl.hidden = true;
+    // note: role="button" cells need Enter/Space to match the old dropdown's keyboard access.
-  sortMenuButton.setAttribute("aria-expanded", "false");
+    th.addEventListener("keydown", (event) => {
-}
+      if (event.key === "Enter" || event.key === " ") {
-
+        event.preventDefault();
-function OnSortMenuClick(event) {
+        CyclePluginSort(th.dataset.sortField);
-  const item = event.target.closest("[data-sort-field],[data-sort-order]");
+      }
-  if (!item)
+    });
-    return;
+  });
-  event.preventDefault();
+  RenderSortHeaders(); // paint the initial state (baseline = no triangle)
-  const sortKey = item.dataset.sortField || pluginSort.key;
-  const sortOrder = item.dataset.sortOrder || pluginSort.order;
-  // why: leave the menu open so the user can set field then order in one visit; outside-click/Escape close it.
-  RequestPluginSort(sortKey, sortOrder);
-}
-
-function RenderSortMenuState() {
-  const field = sortMenuEl?.querySelector(`[data-sort-field="${pluginSort.key}"]`);
-  if (sortCurrentLabel)
-    sortCurrentLabel.textContent = field?.textContent.trim() || "Status";
-  sortMenuButton?.classList.toggle("order-desc", pluginSort.order === "desc");
-  sortMenuEl?.querySelectorAll("[data-sort-field]").forEach((el) =>
-    el.setAttribute("aria-checked", el.dataset.sortField === pluginSort.key ? "true" : "false"));
-  sortMenuEl?.querySelectorAll("[data-sort-order]").forEach((el) =>
-    el.setAttribute("aria-checked", el.dataset.sortOrder === pluginSort.order ? "true" : "false"));
 }
 
 // why: guarded so the module can be loaded in headless syntax checks.
-// note: owns its own lifecycle + outside-click/Escape, so index.js's OnInit needs no edit.
+if (typeof document !== "undefined")
-if (typeof document !== "undefined") {
+  document.addEventListener("DOMContentLoaded", InitSortHeaders);
-  document.addEventListener("DOMContentLoaded", InitSortDropdown);
-  document.addEventListener("click", (event) => { if (!event.target.closest(".sort-dropdown")) HideSortMenu(); });
-  document.addEventListener("keydown", (event) => { if (event.key === "Escape") HideSortMenu(); });
-}

resources/web/dialog/PluginsDialog/styles.css

@@ -187,7 +187,27 @@ body {
 }
 
 .plugin-cols {
-  grid-template-columns: 70px minmax(0, 2.8fr) minmax(120px, 0.9fr) minmax(140px, 1fr);
+  grid-template-columns: 70px minmax(0, 2.4fr) minmax(110px, 0.85fr) minmax(96px, 0.7fr) minmax(130px, 0.95fr);
+}
+
+/* Source is its own (sortable) column, shown as colored text (mirrors .status-cell), not a chip. */
+.source-cell {
+  display: flex;
+  align-items: center;
+}
+
+.source-cell.source-mine {
+  color: var(--plugin-source-mine-text);
+  font-weight: 600;
+}
+
+.source-cell.source-subscribed {
+  color: var(--plugin-source-subscribed-text);
+  font-weight: 600;
+}
+
+.source-cell.source-local {
+  color: var(--plugin-source-neutral-text);
 }
 
 /* Center the "Activate" header over the centered checkbox in each row. */
@@ -835,11 +855,6 @@ body {
   white-space: nowrap;
 }
 
-/* In a list row, sit at the right edge of the Name column (the name fills the rest). */
-.label-cell .plugin-source-badge {
-  margin-right: 4px;
-}
-
 .plugin-source-badge.source-local {
   background: var(--plugin-source-neutral-bg);
   color: var(--plugin-source-neutral-text);

src/slic3r/GUI/PluginSort.hpp

@@ -15,7 +15,10 @@ namespace Slic3r::GUI
     {
         Status,
         Name,
-        Source
+        Source,
+        // why: neutral "no column selected" state - clearing a header sort returns here and the
+        //   list falls to compare_plugin_base_order only. Header UI reaches it via the asc/desc/clear cycle.
+        None
     };
 
     enum class PluginSortOrder
@@ -31,6 +34,7 @@ namespace Slic3r::GUI
         case PluginSortKey::Status: return "status";
         case PluginSortKey::Name: return "name";
         case PluginSortKey::Source: return "source";
+        case PluginSortKey::None: return "none";
         }
 
         return "status";
@@ -49,6 +53,8 @@ namespace Slic3r::GUI
             return PluginSortKey::Name;
         if (sort_key == "source")
             return PluginSortKey::Source;
+        if (sort_key == "none")
+            return PluginSortKey::None;
         return fallback;
     }
 
@@ -151,6 +157,10 @@ namespace Slic3r::GUI
             return compare_ascii_case_insensitive_natural(lhs.display_name, rhs.display_name);
         case PluginSortKey::Source:
             return static_cast<int>(lhs.source) - static_cast<int>(rhs.source);
+        case PluginSortKey::None:
+            // why: no primary key - every pair ties here so sort_plugin_items_for_dialog falls
+            //   straight to the ascending base order (direction is irrelevant for the baseline).
+            return 0;
         }
 
         return 0;

src/slic3r/GUI/PluginsDialog.hpp

@@ -210,7 +210,7 @@ private:
     }
 
     std::function<void()> m_open_terminal_dlg_fn;
-    PluginSortKey m_plugin_sort_key       = PluginSortKey::Status;
+    PluginSortKey m_plugin_sort_key       = PluginSortKey::None;
     PluginSortOrder m_plugin_sort_order   = PluginSortOrder::Asc;
 
     // Serializes run_script_plugin. With main-thread execution a plugin's orca.host.ui modal

tests/slic3rutils/test_plugin_sort.cpp

@@ -136,9 +136,30 @@ TEST_CASE("natural compare handles digits, case, prefixes and leading zeros", "[
     CHECK(compare_ascii_case_insensitive_natural("", "a") < 0);
 }
 
+TEST_CASE("plugin dialog None sort key falls to ascending base order in both directions", "[plugin][sort]")
+{
+    std::vector<SortFixtureItem> items = {
+        {"local_z", PluginSource::Local, PluginStatus::Activated, "script", "Zeta"},
+        {"mine_a", PluginSource::Mine, PluginStatus::Inactive, "script", "Alpha"},
+        {"sub_m", PluginSource::Subscribed, PluginStatus::Error, "script", "Mu"},
+    };
+
+    // why: base order is source priority (Mine, Subscribed, Local) then name - and it ignores the
+    //   requested status/order entirely, so the neutral baseline is deterministic.
+    const std::vector<std::string> base_expected = {"mine_a", "sub_m", "local_z"};
+
+    sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Asc);
+    CHECK(keys(items) == base_expected);
+
+    // why: None has no direction - Desc must not reverse the baseline.
+    sort_plugin_items_for_dialog(items, PluginSortKey::None, PluginSortOrder::Desc);
+    CHECK(keys(items) == base_expected);
+}
+
 TEST_CASE("plugin dialog sort request parsing keeps previous state on invalid values", "[plugin][sort]")
 {
     CHECK(plugin_sort_key_from_string("source", PluginSortKey::Status) == PluginSortKey::Source);
+    CHECK(plugin_sort_key_from_string("none", PluginSortKey::Status) == PluginSortKey::None);
     CHECK(plugin_sort_key_from_string("missing", PluginSortKey::Name) == PluginSortKey::Name);
 
     CHECK(plugin_sort_order_from_string("desc", PluginSortOrder::Asc) == PluginSortOrder::Desc);