Adapt settings pages to Obsidian's declarative API

src/modules/features/SettingDialogue/SettingPane.ts

@@ -6,6 +6,7 @@ import {
     type ConfigLevel,
 } from "@vrtmrz/livesync-commonlib/compat/common/types";
 import type { AllSettingItemKey, AllSettings } from "./settingConstants";
+import type { ButtonComponent } from "@/deps.ts";
 
 export const combineOnUpdate = (func1: OnUpdateFunc, func2: OnUpdateFunc): OnUpdateFunc => {
     return () => ({
@@ -38,6 +39,25 @@ export function setStyle(el: HTMLElement, styleHead: string, condition: () => bo
     }
 }
 
+/**
+ * Applies destructive-action styling without requiring Obsidian 1.13 at
+ * runtime. Older supported versions used the `mod-warning` class for the same
+ * presentation.
+ */
+export function setButtonDestructiveState(button: ButtonComponent, isDestructive = true): ButtonComponent {
+    const compatibleButton = button as unknown as {
+        setDestructive?: () => ButtonComponent;
+        removeDestructive?: () => ButtonComponent;
+    };
+    const updateNativeStyle = isDestructive ? compatibleButton.setDestructive : compatibleButton.removeDestructive;
+    if (typeof updateNativeStyle === "function") {
+        updateNativeStyle.call(button);
+    } else {
+        button.buttonEl.classList.toggle("mod-warning", isDestructive);
+    }
+    return button;
+}
+
 export function visibleOnly(cond: () => boolean): OnUpdateFunc {
     return () => ({
         visibility: cond(),
@@ -106,6 +126,15 @@ export function wrapMemo<T>(func: (arg: T) => void) {
         }
     };
 }
+
+/**
+ * Defers pane construction until the owning settings page can confirm that its
+ * render scope is still active.
+ */
+export type DeferredPageElement<T extends HTMLElement = HTMLDivElement> = {
+    then(callback: (value: T) => unknown): void;
+};
+
 export type PageFunctions = {
     addPane: (
         parentEl: HTMLElement,
@@ -113,12 +142,12 @@ export type PageFunctions = {
         icon: string,
         order: number,
         level?: ConfigLevel
-    ) => Promise<HTMLDivElement>;
+    ) => DeferredPageElement;
     addPanel: (
         parentEl: HTMLElement,
         title: string,
         callback?: (el: HTMLDivElement) => void,
         func?: OnUpdateFunc,
         level?: ConfigLevel
-    ) => Promise<HTMLDivElement>;
+    ) => DeferredPageElement;
 };