experiments.setEnabled(key, enabled)}
- description={EXPERIMENTS[key].description}
- title={EXPERIMENTS[key].title}
- />
- ))}
+
+ {AVAILABLE_EXPERIMENTS.map((key) => (
+
+ experiments.setEnabled(key, enabled)
+ }
+ description={EXPERIMENTS[key].description}
+ title={EXPERIMENTS[key].title}
+ />
+ ))}
+
{AVAILABLE_EXPERIMENTS.length === 0 && (
diff --git a/src/pages/settings/panes/Notifications.tsx b/src/pages/settings/panes/Notifications.tsx
index 3e987497..b8edac46 100644
--- a/src/pages/settings/panes/Notifications.tsx
+++ b/src/pages/settings/panes/Notifications.tsx
@@ -4,7 +4,7 @@ import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
import { useContext, useEffect, useState } from "preact/hooks";
-import { Checkbox } from "@revoltchat/ui";
+import { Checkbox, Column } from "@revoltchat/ui";
import { urlBase64ToUint8Array } from "../../../lib/conversion";
@@ -36,96 +36,103 @@ export const Notifications = observer(() => {
-
- }
- description={
-
- }
- onChange={async (desktopEnabled) => {
- if (desktopEnabled) {
- const permission =
- await Notification.requestPermission();
-
- if (permission !== "granted") {
- return openScreen({
- id: "error",
- error: "DeniedNotification",
- });
- }
+
+
}
+ description={
+
+ }
+ onChange={async (desktopEnabled) => {
+ if (desktopEnabled) {
+ const permission =
+ await Notification.requestPermission();
- settings.set("notifications:desktop", desktopEnabled);
- }}
- />
-
- }
- description={
-
- }
- onChange={async (pushEnabled) => {
- try {
- const reg =
- await navigator.serviceWorker?.getRegistration();
- if (reg) {
- if (pushEnabled) {
- const sub = await reg.pushManager.subscribe({
- userVisibleOnly: true,
- applicationServerKey: urlBase64ToUint8Array(
- client.configuration!.vapid,
- ),
+ if (permission !== "granted") {
+ return openScreen({
+ id: "error",
+ error: "DeniedNotification",
});
-
- // tell the server we just subscribed
- const json = sub.toJSON();
- if (json.keys) {
- client.api.post("/push/subscribe", {
- endpoint: sub.endpoint,
- ...(json.keys as {
- p256dh: string;
- auth: string;
- }),
- });
- setPushEnabled(true);
- }
- } else {
- const sub =
- await reg.pushManager.getSubscription();
- sub?.unsubscribe();
- setPushEnabled(false);
-
- client.api.post("/push/unsubscribe");
}
}
- } catch (err) {
- console.error("Failed to enable push!", err);
+
+ settings.set("notifications:desktop", desktopEnabled);
+ }}
+ />
+
}
- }}
- />
+ description={
+
+ }
+ onChange={async (pushEnabled) => {
+ try {
+ const reg =
+ await navigator.serviceWorker?.getRegistration();
+ if (reg) {
+ if (pushEnabled) {
+ const sub = await reg.pushManager.subscribe(
+ {
+ userVisibleOnly: true,
+ applicationServerKey:
+ urlBase64ToUint8Array(
+ client.configuration!.vapid,
+ ),
+ },
+ );
+
+ // tell the server we just subscribed
+ const json = sub.toJSON();
+ if (json.keys) {
+ client.api.post("/push/subscribe", {
+ endpoint: sub.endpoint,
+ ...(json.keys as {
+ p256dh: string;
+ auth: string;
+ }),
+ });
+ setPushEnabled(true);
+ }
+ } else {
+ const sub =
+ await reg.pushManager.getSubscription();
+ sub?.unsubscribe();
+ setPushEnabled(false);
+
+ client.api.post("/push/unsubscribe");
+ }
+ }
+ } catch (err) {
+ console.error("Failed to enable push!", err);
+ }
+ }}
+ />
+
- {settings.sounds.getState().map(({ id, enabled }) => (
-
- }
- onChange={(enabled) =>
- settings.sounds.setEnabled(id, enabled)
- }
- />
- ))}
+
+ {settings.sounds.getState().map(({ id, enabled }) => (
+
+ }
+ onChange={(enabled) =>
+ settings.sounds.setEnabled(id, enabled)
+ }
+ />
+ ))}
+
);
});
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index c6551d72..e5faf987 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -481,6 +481,8 @@
border-radius: var(--border-radius);
margin-top: 0;
+ transition: 0.1s ease background-color;
+
&:hover {
background: var(--secondary-background);
}
diff --git a/src/pages/settings/panes/Sync.tsx b/src/pages/settings/panes/Sync.tsx
index a6d26c6a..c068634f 100644
--- a/src/pages/settings/panes/Sync.tsx
+++ b/src/pages/settings/panes/Sync.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
import styles from "./Panes.module.scss";
import { Text } from "preact-i18n";
-import { Checkbox } from "@revoltchat/ui";
+import { Checkbox, Column } from "@revoltchat/ui";
import { useApplicationState } from "../../../mobx/State";
import { SyncKeys } from "../../../mobx/stores/Sync";
@@ -20,26 +20,28 @@ export const Sync = observer(() => {
- {(
- [
- ["appearance", "appearance.title"],
- ["theme", "appearance.theme"],
- ["locale", "language.title"],
- // notifications sync is always-on
- ] as [SyncKeys, string][]
- ).map(([key, title]) => (
- }
- description={
-
- }
- onChange={() => sync.toggle(key)}
- />
- ))}
+
+ {(
+ [
+ ["appearance", "appearance.title"],
+ ["theme", "appearance.theme"],
+ ["locale", "language.title"],
+ // notifications sync is always-on
+ ] as [SyncKeys, string][]
+ ).map(([key, title]) => (
+ }
+ description={
+
+ }
+ onChange={() => sync.toggle(key)}
+ />
+ ))}
+
{/*
Last sync at 12:00
*/}
diff --git a/yarn.lock b/yarn.lock
index 86a9f87c..88208886 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2220,9 +2220,9 @@ __metadata:
languageName: node
linkType: hard
-"@revoltchat/ui@npm:1.0.35":
- version: 1.0.35
- resolution: "@revoltchat/ui@npm:1.0.35"
+"@revoltchat/ui@npm:1.0.36":
+ version: 1.0.36
+ resolution: "@revoltchat/ui@npm:1.0.36"
dependencies:
"@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0
@@ -2235,7 +2235,7 @@ __metadata:
react-device-detect: "*"
react-virtuoso: "*"
revolt.js: "*"
- checksum: 39831a463f030b1361401270b8d1d10c18b28c964b878083784544902e62682ddee0634fe087af99437963d24b585ac680d8b7c2df0d298bffb3bddc140a52ac
+ checksum: 97eee93df28f2ca826c7cb1493e3c0efe0ab83d3ef8ea3d3ec013ff3b527f2692193ef50c8e44d144f96d49457c4d290a4dc708a38ab527f3a4290e0d05b41b5
languageName: node
linkType: hard
@@ -3521,7 +3521,7 @@ __metadata:
"@hcaptcha/react-hcaptcha": ^0.3.6
"@insertish/vite-plugin-babel-macros": ^1.0.5
"@preact/preset-vite": ^2.0.0
- "@revoltchat/ui": 1.0.35
+ "@revoltchat/ui": 1.0.36
"@rollup/plugin-replace": ^2.4.2
"@styled-icons/boxicons-logos": ^10.38.0
"@styled-icons/boxicons-regular": ^10.38.0