feat(@ui): migrate checkbox component

src/pages/settings/panes/Notifications.tsx

@@ -4,6 +4,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Checkbox } from "@revoltchat/ui";
+
 import { urlBase64ToUint8Array } from "../../../lib/conversion";
 
 import { useApplicationState } from "../../../mobx/State";
@@ -11,8 +13,6 @@ import { useApplicationState } from "../../../mobx/State";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
-import Checkbox from "../../../components/ui/Checkbox";
-
 export const Notifications = observer(() => {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
@@ -38,7 +38,10 @@ export const Notifications = observer(() => {
             </h3>
             <Checkbox
                 disabled={!("Notification" in window)}
-                checked={settings.get("notifications:desktop", false)!}
+                value={settings.get("notifications:desktop", false)!}
+                title={
+                    <Text id="app.settings.pages.notifications.enable_desktop" />
+                }
                 description={
                     <Text id="app.settings.pages.notifications.descriptions.enable_desktop" />
                 }
@@ -56,12 +59,14 @@ export const Notifications = observer(() => {
                     }
 
                     settings.set("notifications:desktop", desktopEnabled);
-                }}>
-                <Text id="app.settings.pages.notifications.enable_desktop" />
-            </Checkbox>
+                }}
+            />
             <Checkbox
                 disabled={typeof pushEnabled === "undefined"}
-                checked={pushEnabled ?? false}
+                value={pushEnabled ?? false}
+                title={
+                    <Text id="app.settings.pages.notifications.enable_push" />
+                }
                 description={
                     <Text id="app.settings.pages.notifications.descriptions.enable_push" />
                 }
@@ -102,21 +107,24 @@ export const Notifications = observer(() => {
                     } catch (err) {
                         console.error("Failed to enable push!", err);
                     }
-                }}>
-                <Text id="app.settings.pages.notifications.enable_push" />
-            </Checkbox>
+                }}
+            />
             <h3>
                 <Text id="app.settings.pages.notifications.sounds" />
             </h3>
             {settings.sounds.getState().map(({ id, enabled }) => (
                 <Checkbox
                     key={id}
-                    checked={enabled}
+                    value={enabled}
+                    title={
+                        <Text
+                            id={`app.settings.pages.notifications.sound.${id}`}
+                        />
+                    }
                     onChange={(enabled) =>
                         settings.sounds.setEnabled(id, enabled)
-                    }>
-                    <Text id={`app.settings.pages.notifications.sound.${id}`} />
-                </Checkbox>
+                    }
+                />
             ))}
         </div>
     );