Customize headers when display bookmark sort

GoogleChrome · Dec 17, 2024 · f07181e · f07181e
1 parent 2901887
commit f07181e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/frontend/src/static/js/components/webstatus-overview-cells.ts b/frontend/src/static/js/components/webstatus-overview-cells.ts
@@ -458,6 +458,24 @@ export function renderHeaderCell(
   `;
 }
 
+export function renderHeaderCellWithQuerySort(
+  column: ColumnKey,
+  boomarkTitle: string | undefined,
+): TemplateResult {
+  const colDef = CELL_DEFS[column];
+
+  let titleDescription = '';
+  let sortIndicator = html``;
+  if (column === ColumnKey.Name) {
+    titleDescription = `Sorted by ${boomarkTitle} query order`;
+    sortIndicator = html` <sl-icon name="arrow-down"></sl-icon> `;
+  }
+
+  return html`
+    <th title=${titleDescription}>${sortIndicator} ${colDef?.headerHtml}</th>
+  `;
+}
+
 export function renderFeatureCell(
   feature: components['schemas']['Feature'],
   routerLocation: {search: string},

diff --git a/frontend/src/static/js/components/webstatus-overview-table.ts b/frontend/src/static/js/components/webstatus-overview-table.ts
@@ -27,6 +27,7 @@ import {
   parseColumnsSpec,
   renderFeatureCell,
   renderHeaderCell,
+  renderHeaderCellWithQuerySort,
 } from './webstatus-overview-cells.js';
 import {TaskTracker} from '../utils/task-tracker.js';
 import {ApiError, BadRequestError} from '../api/errors.js';
@@ -174,14 +175,22 @@ export class WebstatusOverviewTable extends LitElement {
     );
     const sortSpec: string =
       getSortSpec(this.location) || (DEFAULT_SORT_SPEC as string);
-
     return html`
       <table class="data-table">
         <thead>
           <tr>
-            ${columns.map(
-              col => html`${renderHeaderCell(this.location, col, sortSpec)}`,
-            )}
+            ${this.bookmark?.is_ordered
+              ? columns.map(
+                  col =>
+                    html`${renderHeaderCellWithQuerySort(
+                      col,
+                      this.bookmark?.name,
+                    )}`,
+                )
+              : columns.map(
+                  col =>
+                    html`${renderHeaderCell(this.location, col, sortSpec)}`,
+                )}
           </tr>
         </thead>
         <tbody>

diff --git a/frontend/src/static/js/components/webstatus-sidebar-menu.ts b/frontend/src/static/js/components/webstatus-sidebar-menu.ts
@@ -232,6 +232,7 @@ export class WebstatusSidebarMenu extends LitElement {
     const bookmarkUrl = formatOverviewPageUrl(currentURL, {
       q: bookmark.query,
       start: 0,
+      num: 25,
     });
     // The bookmark should only be active when the path is the FEATURES path
     // and the query is set to the active query.

diff --git a/frontend/src/static/js/utils/constants.ts b/frontend/src/static/js/utils/constants.ts
@@ -44,5 +44,6 @@ export const DEFAULT_BOOKMARKS: Bookmark[] = [
       'id:anchor-positioning OR id:container-queries OR id:has OR id:nesting OR id:view-transitions OR id:subgrid OR id:grid OR name:scrollbar OR id:scroll-driven-animations OR id:scope',
     description:
       "This list reflects the top 10 interoperability pain points identified by developers in the State of CSS 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
+    is_ordered: true,
   },
 ];