some comments

Author: shakyShane

special-pages/pages/history/app/components/Header.js

@@ -46,9 +46,7 @@ function Controls({ term, range }) {
     const title = useComputed(() => (results.value.items.length === 0 ? t('delete_none') : ''));
 
     /**
-     * The button text should alternate between 'delete' and 'delete all' depending on the
-     * state of the current query. It should only read 'delete all' when the query is the default one
-     * and there are no selections
+     * The button text should be 'delete all', unless there are row selections, then it's just 'delete'
      */
     const buttonTxt = useComputed(() => {
         const hasSelections = selected.value.size > 0;
@@ -59,8 +57,9 @@ function Controls({ term, range }) {
     /**
      * Which action should the delete button take?
      *
-     * - if there are selections, they should be deleted
+     * - if there are selections, they should be deleted by indexes
      * - if there's a range selected, that should be deleted
+     * - if there's a search term, that should be deleted
      * - or fallback to deleting all
      */
     function onClick() {

special-pages/pages/history/app/components/Header.module.css

@@ -74,6 +74,7 @@
     height: 28px;
     border-radius: 6px;
     border: 0.5px solid var(--history-surface-border-color);
+    /* these precise numbers help it match figma when overriding default UI */
     padding-left: 31px;
     padding-right: 9px;
     background: inherit;

special-pages/pages/history/app/components/Item.module.css

@@ -63,6 +63,10 @@
     }
 }
 
+/**
+ * The following code handles handles the multi-row selections. It's responsible
+ * for ensuring only the first and last elements in a selection have rounded corners.
+ */
 [data-is-selected='true'] .row {
     border-radius: 0;
 }