Pre-launch design sync with Figma spec (#2154)

* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface

app/javascript/controllers/application.js

@@ -6,52 +6,14 @@ const application = Application.start();
 application.debug = false;
 window.Stimulus = application;
 
-Turbo.config.forms.confirm = (message) => {
-  const dialog = document.getElementById("turbo-confirm");
-
-  try {
-    const { title, body, accept, acceptClass } = JSON.parse(message);
-
-    if (title) {
-      document.getElementById("turbo-confirm-title").innerHTML = title;
-    }
-
-    if (body) {
-      document.getElementById("turbo-confirm-body").innerHTML = body;
-    }
-
-    if (accept) {
-      document.getElementById("turbo-confirm-accept").innerHTML = accept;
-    }
-
-    if (acceptClass) {
-      document.getElementById("turbo-confirm-accept").className = acceptClass;
-    }
-  } catch (e) {
-    document.getElementById("turbo-confirm-title").innerText = message;
-  }
-
-  dialog.showModal();
-
-  return new Promise((resolve) => {
-    dialog.addEventListener(
-      "close",
-      () => {
-        const confirmed = dialog.returnValue === "confirm";
-
-        if (!confirmed) {
-          document.getElementById("turbo-confirm-title").innerHTML =
-            "Are you sure?";
-          document.getElementById("turbo-confirm-body").innerHTML =
-            "You will not be able to undo this decision";
-          document.getElementById("turbo-confirm-accept").innerHTML = "Confirm";
-        }
-
-        resolve(confirmed);
-      },
-      { once: true },
+Turbo.config.forms.confirm = (data) => {
+  const confirmDialogController =
+    application.getControllerForElementAndIdentifier(
+      document.getElementById("confirm-dialog"),
+      "confirm-dialog",
     );
-  });
+
+  return confirmDialogController.handleConfirm(data);
 };
 
 export { application };