Setup basic notification page

web/package.json

@@ -42,6 +42,7 @@
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^3.6.0",
+    "firebase": "^10.12.3",
     "hls.js": "^1.5.13",
     "idb-keyval": "^6.2.1",
     "immer": "^10.1.1",

web/src/hooks/use-firebase.ts

@@ -0,0 +1,11 @@
+import { firebaseConfig } from "@/types/notifications";
+import { initializeApp } from "firebase/app";
+import { useMemo } from "react";
+
+export function useFirebaseApp() {
+  return useMemo(() => {
+    const app = initializeApp(firebaseConfig);
+    app.automaticDataCollectionEnabled = false;
+    return app;
+  }, []);
+}

web/src/pages/Settings.tsx

@@ -35,6 +35,7 @@ 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";
 
 export default function Settings() {
   const settingsViews = [
@@ -44,6 +45,7 @@ export default function Settings() {
     "motion tuner",
     "debug",
     "users",
+    "notifications",
   ] as const;
 
   type SettingsType = (typeof settingsViews)[number];
@@ -181,6 +183,7 @@ export default function Settings() {
           />
         )}
         {page == "users" && <AuthenticationView />}
+        {page == "notifications" && <NotificationView />}
       </div>
       {confirmationDialogOpen && (
         <AlertDialog

web/src/types/notifications.ts

@@ -0,0 +1,9 @@
+export const firebaseConfig = {
+  apiKey: "AIzaSyCoweRLtvai8iNwhsoT-GH_CH_0pckqMmA",
+  authDomain: "frigate-ed674.firebaseapp.com",
+  projectId: "frigate-ed674",
+  storageBucket: "frigate-ed674.appspot.com",
+  messagingSenderId: "76314288339",
+  appId: "1:76314288339:web:090e170610d3bf0966f426",
+  measurementId: "G-GZ1JKNDJZK",
+};

web/src/views/settings/NotificationsSettingsView.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button";
+import { useFirebaseApp } from "@/hooks/use-firebase";
+
+export default function NotificationView() {
+  const firebaseApp = useFirebaseApp();
+
+  return (
+    <div className="flex size-full flex-col md:flex-row">
+      <Button
+        onClick={() => {
+          firebaseApp.automaticDataCollectionEnabled = false;
+        }}
+      >
+        Enable Notifications
+      </Button>
+    </div>
+  );
+}