Improve models main view for easier access based on model type

locale/defaultMessages.json

@@ -3914,6 +3914,10 @@
     "context": "product availability publish date",
     "string": "Publish on"
   },
+  "Jnlk2Y": {
+    "context": "Model Type tab showing all entries across types",
+    "string": "All"
+  },
   "Jo01VZ": {
     "context": "bought by label",
     "string": "Bought by"
@@ -5675,6 +5679,10 @@
     "context": "product inventory, checkbox",
     "string": "Track Inventory"
   },
+  "TktK7L": {
+    "context": "Inline message in the type tabs row when no Model Types exist",
+    "string": "No model types yet."
+  },
   "Tl+7X4": {
     "context": "tabel column header",
     "string": "Refunded Qty"
@@ -6620,6 +6628,10 @@
   "YzLUXA": {
     "string": "Ensure this value is greater than 0."
   },
+  "Z+b2u3": {
+    "context": "Overflow dropdown trigger holding additional Model Types",
+    "string": "More"
+  },
   "Z/7hyu": {
     "context": "card balance label",
     "string": "Card Balance"
@@ -10582,6 +10594,10 @@
     "context": "gift card bulk create success dialog accept button",
     "string": "Ok"
   },
+  "vDoAcW": {
+    "context": "Inline link in the type tabs row when no Model Types exist",
+    "string": "Create your first model type"
+  },
   "vDp2tH": {
     "context": "all structures",
     "string": "All structures"

src/components/AppLayout/ListFilters/components/SearchInput.module.css

@@ -0,0 +1,24 @@
+/*
+ * SearchInput owns one continuous bordered surface.
+ *
+ * macaw-ui-next's SearchInput applies its own internal background on the
+ * `inputContainer` recipe (via vanilla-extract recipe variants with higher
+ * specificity than sprinkle props). We neutralize every nested background
+ * so the wrapper's color is the only visible fill — both in idle and focus
+ * states — and the trailing tooltip icon shares the exact same surface as
+ * the magnifier and the input field.
+ */
+.wrapper > *,
+.wrapper > * > * {
+  background-color: transparent !important;
+}
+
+.wrapper:focus-within {
+  /*
+   * Matches the idle background of macaw-ui-next's DropdownButton (e.g. the
+   * "More" button) — verified to be `--mu-colors-background-default2`. This
+   * is the design-system's "barely tinted near-white" surface (98% lightness
+   * in light theme) and the exact reference the user pointed to.
+   */
+  background-color: var(--mu-colors-background-default2);
+}

src/components/AppLayout/ListFilters/components/SearchInput.tsx

@@ -7,6 +7,7 @@ import {
 } from "@saleor/macaw-ui-next";
 import * as React from "react";
 
+import styles from "./SearchInput.module.css";
 import { SearchTooltip } from "./SearchTooltip/SearchTooltip";
 
 interface SearchInputProps extends SearchPageProps {
@@ -32,8 +33,25 @@ const SearchInput = (props: SearchInputProps) => {
         };
 
         return (
-          <Box display="flex" alignItems="center" gap={1.5} width="100%">
-            <Box as="label" display="flex" alignItems="center" width="100%">
+          <Box
+            as="label"
+            display="flex"
+            alignItems="center"
+            width="100%"
+            // Inactive: matches the page surface (default1 = pure white in light
+            // theme / page bg in dark theme), so only the gentle border outlines
+            // the input. On focus the wrapper shifts to a visible tint via
+            // :focus-within in the CSS module. The module also forces every
+            // nested background transparent so the magnifier, input field and
+            // trailing tooltip icon all share this exact same color.
+            backgroundColor="default1"
+            borderWidth={1}
+            borderStyle="solid"
+            borderColor="default1"
+            borderRadius={3}
+            className={styles.wrapper}
+          >
+            <Box __flex={1} __minWidth={0} display="flex" alignItems="center">
               <MacawSearchInput
                 size={size}
                 value={search}
@@ -42,7 +60,11 @@ const SearchInput = (props: SearchInputProps) => {
                 data-test-id="search-input"
               />
             </Box>
-            {showSearchTooltip && <SearchTooltip />}
+            {showSearchTooltip && (
+              <Box display="flex" alignItems="center" paddingRight={2}>
+                <SearchTooltip />
+              </Box>
+            )}
           </Box>
         );
       }}

src/components/AppLayout/ListFilters/components/SearchTooltip/SearchTooltip.tsx

@@ -49,7 +49,10 @@ export const SearchTooltip = () => {
           type="button"
           display="flex"
           alignItems="center"
-          cursor="pointer"
+          // Macaw sprinkles only accept a small enum of cursor values
+          // (pointer, text, auto, etc.). `help` is the standard convention for
+          // tooltip-triggering, info-only elements, so escape via __cursor.
+          __cursor="help"
           padding={0}
           borderWidth={0}
           backgroundColor="transparent"

src/components/Datagrid/Datagrid.tsx

@@ -100,6 +100,12 @@ interface DatagridProps {
   readonly?: boolean;
   hasRowHover?: boolean;
   rowMarkers?: DataEditorProps["rowMarkers"];
+  /**
+   * Width (in px) of the row marker (checkbox) column. Increase to add visual breathing
+   * room on the left of the grid — useful when the page above the grid is laid out with
+   * inset content and you want the first data column to align with that inset.
+   */
+  rowMarkerWidth?: number;
   freezeColumns?: DataEditorProps["freezeColumns"];
   verticalBorder?: DataEditorProps["verticalBorder"];
   columnSelect?: DataEditorProps["columnSelect"];
@@ -132,6 +138,7 @@ export const Datagrid = ({
   getColumnTooltipContent,
   readonly = false,
   rowMarkers = "checkbox",
+  rowMarkerWidth = 48,
   freezeColumns = 1,
   verticalBorder,
   columnSelect = "none",
@@ -585,7 +592,7 @@ export const Datagrid = ({
                             )}
                       </div>
                     }
-                    rowMarkerWidth={48}
+                    rowMarkerWidth={rowMarkerWidth}
                   />
                   {/* FIXME: https://github.com/glideapps/glide-data-grid/issues/505 */}
                   {hasColumnGroups && <div className={classes.columnGroupFixer} />}

src/components/TableFilter/FilterTab.tsx

@@ -6,17 +6,44 @@ const useStyles = makeStyles(
   theme => ({
     selectedTabLabel: {
       "&$tabLabel": {
-        color: theme.typography.body1.color,
+        color: theme.palette.text.primary,
       },
     },
     tabLabel: {
       "&:hover": {
-        color: theme.typography.body1.color,
+        color: theme.palette.text.primary,
       },
-      color: theme.typography.caption.color,
+      // `text.secondary` is dimmer than active text but not as gray as `text.disabled`,
+      // so inactive tabs read as "less prominent" rather than "unavailable".
+      color: theme.palette.text.secondary,
       fontSize: theme.typography.body1.fontSize,
       fontWeight: 500,
     },
+    // Force a single-line, row-oriented layout for label + count.
+    // MUI's default `Tab > .wrapper` is `flex-direction: column` (so icons can stack
+    // above text); our label + count fragment needs them inline, no wrapping.
+    tabContent: {
+      display: "inline-flex",
+      flexDirection: "row",
+      alignItems: "baseline",
+      whiteSpace: "nowrap",
+      // Prevent overgrown labels from blowing out the tab strip layout.
+      maxWidth: 220,
+    },
+    tabLabelText: {
+      // Ellipsis truncation for the label only — counts stay visible at the end.
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      minWidth: 0,
+    },
+    tabCount: {
+      // Counts always use the secondary tone so the active label still stands out.
+      color: theme.palette.text.secondary,
+      fontWeight: 500,
+      marginLeft: theme.spacing(0.5),
+      flexShrink: 0,
+    },
     tabRoot: {
       minWidth: "80px",
       opacity: 1,
@@ -30,18 +57,34 @@ const useStyles = makeStyles(
 interface FilterTabProps {
   onClick: () => void;
   label: string;
+  /**
+   * Optional badge-like number rendered next to the label, e.g. "Brand (5)".
+   * Always rendered in a muted color so the label remains the dominant element.
+   */
+  count?: number;
   selected?: boolean;
   value?: number;
 }
 
 export const FilterTab = (props: FilterTabProps) => {
-  const { onClick, label, selected, value } = props;
+  const { onClick, label, count, 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>
+    );
 
   return (
     <Tab
       disableRipple
-      label={label}
+      label={tabContent}
       classes={{
         root: classes.tabRoot,
         wrapper: clsx(classes.tabLabel, {

src/components/TableFilter/FilterTabs.tsx

@@ -5,7 +5,10 @@ import type * as React from "react";
 const useStyles = makeStyles(
   theme => ({
     tabsRoot: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
+      // Use the macaw-ui-next border token instead of MUI's palette.divider —
+      // the latter falls back to rgba(255,255,255,0.12) in dark mode, which is
+      // virtually invisible against the navy app surface.
+      borderBottom: "1px solid var(--mu-colors-border-default1)",
       paddingLeft: theme.spacing(4),
     },
   }),

src/modelTypes/hooks/usePageTypeDelete/usePageTypeDelete.tsx

@@ -34,9 +34,12 @@ function usePageTypeDelete({
       variables: pagesAssignedToSelectedTypesQueryVars,
       skip: shouldSkipPageListQuery,
     });
-  const selectedPagesAssignedToDeleteUrl = pageListUrl({
-    pageTypes,
-  });
+  // The Modeling list groups entries by Model Type tabs. When a single type is being deleted,
+  // jump straight into its tab so the user sees only the assigned entries; for multi-delete we
+  // fall back to the unfiltered "All" tab.
+  const selectedPagesAssignedToDeleteUrl = pageListUrl(
+    pageTypes.length === 1 ? { activeType: pageTypes[0] } : {},
+  );
   const assignedItemsCount = pagesAssignedToSelectedTypesData?.pages?.totalCount;
 
   return {

src/modeling/components/PageListDatagrid/PageListDatagrid.tsx

@@ -109,6 +109,10 @@ export const PageListDatagrid = ({
         readonly
         loading={loading}
         rowMarkers="checkbox-visible"
+        // Push the checkbox right so the row marker column aligns with the page's
+        // inset content area (title, tabs, search) above. Default is 48; +24px = 72
+        // matches the surrounding `paddingX={6}` content gutter.
+        rowMarkerWidth={72}
         columnSelect="single"
         hasRowHover={hasRowHover}
         onColumnMoved={handlers.onMove}