Implement support for notifications (#12523)

* Setup basic notification page

* Add basic notification implementation

* Register for push notifications

* Implement dispatching

* Add fields

* Handle image and link

* Add notification config

* Add field for users notification tokens

* Implement saving of notification tokens

* Implement VAPID key generation

* Implement public key encoding

* Implement webpush from server

* Implement push notification handling

* Make notifications config only

* Add maskable icon

* Use zod form to control notification settings in the UI

* Use js

* Always open notification

* Support multiple endpoints

* Handle cleaning up expired notification registrations

* Correctly unsubscribe notifications

* Change ttl dynamically

* Add note about notification latency and features

* Cleanup docs

* Fix firefox pushes

* Add links to docs and improve formatting

* Improve wording

* Fix docstring

Co-authored-by: Blake Blackshear <blake@frigate.video>

* Handle case where native auth is not enabled

* Show errors in UI

---------

Co-authored-by: Blake Blackshear <blake@frigate.video>

web/src/pages/Settings.tsx

@@ -35,24 +35,39 @@ import ObjectSettingsView from "@/views/settings/ObjectSettingsView";
 import MotionTunerView from "@/views/settings/MotionTunerView";
 import MasksAndZonesView from "@/views/settings/MasksAndZonesView";
 import AuthenticationView from "@/views/settings/AuthenticationView";
+import NotificationView from "@/views/settings/NotificationsSettingsView";
+
+const allSettingsViews = [
+  "general",
+  "camera settings",
+  "masks / zones",
+  "motion tuner",
+  "debug",
+  "users",
+  "notifications",
+] as const;
+type SettingsType = (typeof allSettingsViews)[number];
 
 export default function Settings() {
-  const settingsViews = [
-    "general",
-    "camera settings",
-    "masks / zones",
-    "motion tuner",
-    "debug",
-    "users",
-  ] as const;
-
-  type SettingsType = (typeof settingsViews)[number];
   const [page, setPage] = useState<SettingsType>("general");
   const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
   const tabsRef = useRef<HTMLDivElement | null>(null);
 
   const { data: config } = useSWR<FrigateConfig>("config");
 
+  // available settings views
+
+  const settingsViews = useMemo(() => {
+    const views = [...allSettingsViews];
+
+    if (!("Notification" in window) || !window.isSecureContext) {
+      const index = views.indexOf("notifications");
+      views.splice(index, 1);
+    }
+
+    return views;
+  }, []);
+
   // TODO: confirm leave page
   const [unsavedChanges, setUnsavedChanges] = useState(false);
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
@@ -181,6 +196,9 @@ export default function Settings() {
           />
         )}
         {page == "users" && <AuthenticationView />}
+        {page == "notifications" && (
+          <NotificationView setUnsavedChanges={setUnsavedChanges} />
+        )}
       </div>
       {confirmationDialogOpen && (
         <AlertDialog