Add tabs pinning for some control over what types show up first

Author: mirekm

locale/defaultMessages.json

@@ -1354,6 +1354,10 @@
     "context": "product field",
     "string": "Export Variant SKU"
   },
+  "5nUlWb": {
+    "context": "Section header in the Model Type More dropdown listing pinned types",
+    "string": "Pinned"
+  },
   "5nrCxC": {
     "string": "Go to model types"
   },
@@ -3380,6 +3384,10 @@
     "context": "dialog content",
     "string": "You are not able to modify this group members. Solve this problem to continue with request."
   },
+  "H0+SNu": {
+    "context": "Accessible label for the pin button next to a Model Type in the More dropdown",
+    "string": "Pin {name} to keep it visible at the start of the tab strip"
+  },
   "H1L1cc": {
     "context": "url",
     "string": "URL"
@@ -3613,6 +3621,10 @@
     "context": "error message",
     "string": "Billing address is not set"
   },
+  "IGOsZG": {
+    "context": "Accessible label for the unpin button next to a pinned Model Type",
+    "string": "Unpin {name}"
+  },
   "IGvQ8k": {
     "context": "button",
     "string": "Create attribute"
@@ -5821,10 +5833,6 @@
     "context": "Description for scheduled status when publication date is in the future",
     "string": "Publication scheduled"
   },
-  "UgCuqX": {
-    "context": "tab name",
-    "string": "All models"
-  },
   "Uh3NX/": {
     "context": "remove failed installation dialog content",
     "string": "Are you sure you want to delete {name} failed installation?"
@@ -7830,6 +7838,10 @@
   "ftcHpD": {
     "string": "Customer created"
   },
+  "ftio46": {
+    "context": "Section header in the Model Type More dropdown listing remaining (unpinned) types",
+    "string": "All types"
+  },
   "fuFCpI": {
     "context": "allow unpaid orders checkbox label",
     "string": "Allow unpaid orders"

src/components/TableFilter/FilterTab.tsx

@@ -1,6 +1,7 @@
 import { Tab } from "@material-ui/core";
 import { makeStyles } from "@saleor/macaw-ui";
 import clsx from "clsx";
+import { type ReactNode } from "react";
 
 const useStyles = makeStyles(
   theme => ({
@@ -44,6 +45,18 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(0.5),
       flexShrink: 0,
     },
+    // Slot for a small marker icon (e.g. a pin glyph for pinned tabs). Rendered
+    // before the label, slightly raised relative to the baseline-aligned label
+    // so it visually centers with the cap height of the text.
+    tabLeadingIcon: {
+      alignSelf: "center",
+      display: "inline-flex",
+      flexShrink: 0,
+      // Inherit the tab's current text color (active vs inactive) but always
+      // dim the marker so it reads as metadata, not as a primary glyph.
+      color: theme.palette.text.disabled,
+      marginRight: theme.spacing(0.75),
+    },
     tabRoot: {
       minWidth: "80px",
       opacity: 1,
@@ -62,24 +75,30 @@ interface FilterTabProps {
    * Always rendered in a muted color so the label remains the dominant element.
    */
   count?: number;
+  /**
+   * Optional small marker rendered before the label. Useful for surfacing
+   * subtle metadata on a tab (e.g. a pin glyph for pinned tabs, à la Chrome).
+   * Keep it tiny (≤ 12px) and let the component dim it via `text.disabled`.
+   */
+  leadingIcon?: ReactNode;
   selected?: boolean;
   value?: number;
 }
 
 export const FilterTab = (props: FilterTabProps) => {
-  const { onClick, label, count, selected, value } = props;
+  const { onClick, label, count, leadingIcon, selected, value } = props;
   const classes = useStyles(props);
-  const tabContent =
-    count === undefined ? (
-      <span className={classes.tabContent} title={label}>
-        <span className={classes.tabLabelText}>{label}</span>
-      </span>
-    ) : (
-      <span className={classes.tabContent} title={label}>
-        <span className={classes.tabLabelText}>{label}</span>
-        <span className={classes.tabCount}>({count})</span>
-      </span>
-    );
+  const tabContent = (
+    <span className={classes.tabContent} title={label}>
+      {leadingIcon && (
+        <span className={classes.tabLeadingIcon} aria-hidden="true">
+          {leadingIcon}
+        </span>
+      )}
+      <span className={classes.tabLabelText}>{label}</span>
+      {count !== undefined && <span className={classes.tabCount}>({count})</span>}
+    </span>
+  );
 
   return (
     <Tab

src/modeling/components/PageListPage/ModelTypeTabs/ModelTypeTabs.module.css

@@ -0,0 +1,56 @@
+/*
+ * Pin affordance lives inline at the right of each overflow item. Unpinned
+ * items only reveal it on hover/focus (keeps the dropdown clean and avoids
+ * implying every type is "managed"). Pinned items show the pin always,
+ * filled-in, so it reads as state — not just a control.
+ */
+
+.overflowItem {
+  /* Establish hover scope so children can react via :hover on this row. */
+  position: relative;
+}
+
+.pinButton,
+.pinButtonActive {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    opacity 120ms ease;
+}
+
+.pinButton {
+  /* Hidden by default; revealed when the row is hovered or the button itself
+     is focused. The focus rule keeps the control reachable for keyboard-only
+     navigation even though it's visually dormant. */
+  color: var(--mu-colors-text-default2);
+  opacity: 0;
+}
+
+.overflowItem:hover .pinButton,
+.pinButton:focus-visible {
+  opacity: 1;
+}
+
+.pinButton:hover,
+.pinButton:focus-visible {
+  background-color: var(--mu-colors-background-default1-hovered);
+  color: var(--mu-colors-text-default1);
+}
+
+.pinButtonActive {
+  /* Pinned state is always visible — this is information, not just an action. */
+  color: var(--mu-colors-text-accent1);
+}
+
+.pinButtonActive:hover,
+.pinButtonActive:focus-visible {
+  background-color: var(--mu-colors-background-default1-hovered);
+}

src/modeling/components/PageListPage/ModelTypeTabs/ModelTypeTabs.stories.tsx

@@ -3,7 +3,8 @@ import type { ComponentType } from "react";
 import { MemoryRouter } from "react-router-dom";
 import { fn } from "storybook/test";
 
-import { type ModelType, ModelTypeTabs } from "./ModelTypeTabs";
+import { type ModelType } from "./computeVisibleTypes";
+import { ModelTypeTabs } from "./ModelTypeTabs";
 
 const fewTypes: ModelType[] = [
   { id: "pt-1", name: "Brand" },
@@ -59,7 +60,10 @@ const meta: Meta<typeof ModelTypeTabs> = {
   ],
   args: {
     onChange: fn(),
+    onTogglePin: fn(),
+    onOverflowOpen: fn(),
     activeType: null,
+    pinnedTypeIds: [],
     loading: false,
   },
 };
@@ -127,3 +131,25 @@ export const CountsStillLoading: Story = {
     totalCount: undefined,
   },
 };
+
+export const WithPinnedTypes: Story = {
+  args: {
+    types: manyTypes,
+    counts: manyCounts,
+    totalCount: 41,
+    // "Refund Reason" + "Career" pinned (in pin order). They appear right
+    // after the "All" tab, before the alphabetical fillers.
+    pinnedTypeIds: ["pt-1", "pt-9"],
+  },
+};
+
+export const PinnedExceedsSlotBudget: Story = {
+  args: {
+    types: manyTypes,
+    counts: manyCounts,
+    totalCount: 41,
+    // 7 pinned types — pinned always wins, so they all stay visible even though
+    // visibleSlots defaults to 6.
+    pinnedTypeIds: ["pt-1", "pt-2", "pt-3", "pt-4", "pt-5", "pt-6", "pt-7"],
+  },
+};