refactor(arr): chevron icons for provider order

web/src/settings.ts

@@ -718,6 +718,20 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
 
   /* -- subtitles ------------------------------------------------------------ */
 
+  /**
+   * A reorder control: the same `control control-quiet control-icon` the
+   * sibling rows in this view use (#231), with a chevron off the shared
+   * glyph set (#251) rather than the words "up" and "down".
+   */
+  function moveButton(glyph: "chevronUp" | "chevronDown", label: string): HTMLButtonElement {
+    const button = el("button", "control control-quiet control-icon provider-move");
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    button.append(icon(glyph));
+    return button;
+  }
+
   /**
    * One row per known provider, checkbox to enable, a daily-budget number,
    * and up/down controls — list order is the priority order the API stores
@@ -744,12 +758,8 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
     budgetInput.classList.add("provider-budget");
     budgetInput.setAttribute("aria-label", `${provider} daily budget`);
 
-    const up = el("button", "control control-quiet readout provider-move", "up");
+    const up = moveButton("chevronUp", `move ${provider} up`);
-    up.type = "button";
+    const down = moveButton("chevronDown", `move ${provider} down`);
-    up.setAttribute("aria-label", `move ${provider} up`);
-    const down = el("button", "control control-quiet readout provider-move", "down");
-    down.type = "button";
-    down.setAttribute("aria-label", `move ${provider} down`);
 
     up.addEventListener("click", () => {
       const previous = item.previousElementSibling;