Fix unread reset and notification settings (#1824)

* reset unread with client sync state change

* fix notification toggle setting not working

* revert formatOnSave vscode setting

src/app/hooks/usePermission.js

@@ -1,28 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-import { useEffect, useState } from 'react';
-
-export function usePermission(name, initial) {
-  const [state, setState] = useState(initial);
-
-  useEffect(() => {
-    let descriptor;
-
-    const update = () => setState(descriptor.state);
-
-    if (navigator.permissions?.query) {
-      navigator.permissions.query({ name }).then((_descriptor) => {
-        descriptor = _descriptor;
-
-        update();
-        descriptor.addEventListener('change', update);
-      });
-    }
-
-    return () => {
-      if (descriptor) descriptor.removeEventListener('change', update);
-    };
-  }, []);
-
-  return [state, setState];
-}

src/app/hooks/usePermission.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+export function usePermissionState(name: PermissionName, initialValue: PermissionState = 'prompt') {
+  const [permissionState, setPermissionState] = useState<PermissionState>(initialValue);
+
+  useEffect(() => {
+    let permissionStatus: PermissionStatus;
+
+    function handlePermissionChange(this: PermissionStatus) {
+      setPermissionState(this.state);
+    }
+
+    navigator.permissions
+      .query({ name })
+      .then((permStatus: PermissionStatus) => {
+        permissionStatus = permStatus;
+        handlePermissionChange.apply(permStatus);
+        permStatus.addEventListener("change", handlePermissionChange);
+      })
+      .catch(() => {
+        // Silence error since FF doesn't support microphone permission
+      });
+
+    return () => {
+      permissionStatus?.removeEventListener("change", handlePermissionChange);
+    };
+  }, [name]);
+
+  return permissionState;
+}