notifications setting

src/components/Sidebar.js

@@ -1,4 +1,5 @@
 import util from "../util"
+import "./Toggle.js"
 
 class Sidebar extends Shadow {
     SIDEBAR_WIDTH
@@ -66,17 +67,23 @@ class Sidebar extends Shadow {
                 
             this.SidebarItem("Logout")
 
-            button("Delete Account")
+            VStack(() => {
-                .fontSize(0.9, em)
+                Toggle("Enable Push Notifications")
-                .marginTop("auto")
+                    .marginLeft(1, em)
-                .marginBottom(2, em)
+    
-                .background("var(--darkred)")
+                button("Delete Account")
-                .paddingVertical(1, em)
+                    .fontSize(0.9, em)
-                .border("none")
+                    .marginBottom(2, em)
-                .outline("1px solid var(--divider)")
+                    .background("var(--darkred)")
-                .color("var(--text)")
+                    .paddingVertical(1, em)
-                .onTap((done) => this.deleteAccount())
+                    .border("none")
+                    .outline("1px solid var(--divider)")
+                    .color("var(--text)")
+                    .onTap((done) => this.deleteAccount())
             })
+            .marginTop("auto")
+            .gap(2, em)
+        })
         .gap(1, em)
         .paddingTop(15, vh)
         .paddingHorizontal(1, em)

src/components/Toggle.js

@@ -0,0 +1,50 @@
+css(`
+    .toggle-input {
+        appearance: none;
+        width: 44px;
+        height: 24px;
+        background: #ccc;
+        border-radius: 12px;
+        position: relative;
+        cursor: pointer;
+        transition: background 0.2s;
+    }
+
+    .toggle-input::after {
+        content: '';
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background: white;
+        border-radius: 50%;
+        top: 2px;
+        left: 2px;
+        transition: left 0.2s;
+    }
+
+    .toggle-input:checked {
+        background: var(--darkred);
+    }
+
+    .toggle-input:checked::after {
+        left: 22px;
+    }
+`)
+
+class Toggle extends Shadow {
+    render() {
+        HStack(() => {
+            input("", "44px", "24px")
+                .attr({ type: "checkbox", checked: global.profile.preferences.notifications ? "" : null, class: "toggle-input"})
+                .onChange(async (e) => {
+                    await server.updateNotificationPreferences(global.profile.id, e.target.checked)
+                })
+            p("Enable Push Notifications")
+                .color("var(--text)")
+        })
+        .verticalAlign("center")
+        .gap(10, px)
+    }
+}
+
+register(Toggle)