🔧 chore(control-center/pages/backlight): load the default backlight from user data

src/widget/control-center/pages/Backlight.tsx

@@ -11,6 +11,17 @@ export const PageBacklight = new Page({
     id: "backlight",
     title: tr("control_center.pages.backlight.title"),
     description: tr("control_center.pages.backlight.description"),
+    $: () => {
+        const dataDefaultBacklight = userData.getProperty("control_center.default_backlight", "any");
+        if(typeof dataDefaultBacklight === "string" && 
+           Backlights.getDefault().default?.name !== dataDefaultBacklight) {
+
+            const bk = Backlights.getDefault().backlights.filter(b => b.name === dataDefaultBacklight)[0];
+            if(!bk) return;
+
+            Backlights.getDefault().setDefault(bk);
+        }
+    },
     content: () => (
         <With value={createBinding(Backlights.getDefault(), "backlights")}>
             {(bklights: Array<Backlights.Backlight>) => bklights.length > 0 &&

src/widget/control-center/pages/Page.tsx

@@ -10,6 +10,7 @@ export type PageProps = {
     id: string;
     title: string;
     description?: string;
+    $?: (self: Gtk.Box) => void;
     headerButtons?: Array<HeaderButton> | Accessor<Array<HeaderButton>>;
     bottomButtons?: Array<BottomButton> | Accessor<Array<BottomButton>>;
     orientation?: Gtk.Orientation | Accessor<Gtk.Orientation>;
@@ -42,6 +43,7 @@ export class Page {
     #spacing: number|Accessor<number> = 4;
     #headerButtons?: Array<HeaderButton>|Accessor<Array<HeaderButton>>;
     #bottomButtons?: Array<BottomButton>|Accessor<Array<BottomButton>>;
+    #setup?: (self: Gtk.Box) => void;
     readonly #id?: string;
     readonly #create: () => WidgetNodeType;
 
@@ -67,12 +69,16 @@ export class Page {
 
         if(props.headerButtons != null)
             this.#headerButtons = props.headerButtons;
+
+        if(props.$ != null)
+            this.#setup = props.$;
     }
 
     public create(): Gtk.Box {
         return createRoot((dispose) => 
             <Gtk.Box hexpand class={`page container ${this.#id ?? ""}`} cssName={"page"} name={"page"}
-              orientation={Gtk.Orientation.VERTICAL} onUnmap={() => dispose()}>
+              orientation={Gtk.Orientation.VERTICAL} onUnmap={() => dispose()}
+              $={this.#setup}>
 
                 <Gtk.Box class={"header"} orientation={Gtk.Orientation.VERTICAL}>
                     <Gtk.Box class={"top"} hexpand>