Add safe mode page that is just the config editor

web/src/App.tsx

@@ -12,6 +12,8 @@ import { cn } from "./lib/utils";
 import { isPWA } from "./utils/isPWA";
 import ProtectedRoute from "@/components/auth/ProtectedRoute";
 import { AuthProvider } from "@/context/auth-context";
+import useSWR from "swr";
+import { FrigateConfig } from "./types/frigateConfig";
 
 const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
@@ -26,52 +28,16 @@ const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
 function App() {
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
+
   return (
     <Providers>
       <AuthProvider>
         <BrowserRouter basename={window.baseUrl}>
           <Wrapper>
-            <div className="size-full overflow-hidden">
+            {config?.safe_mode ? <SafeAppView /> : <DefaultAppView />}
-              {isDesktop && <Sidebar />}
-              {isDesktop && <Statusbar />}
-              {isMobile && <Bottombar />}
-              <div
-                id="pageRoot"
-                className={cn(
-                  "absolute right-0 top-0 overflow-hidden",
-                  isMobile
-                    ? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
-                    : "bottom-8 left-[52px]",
-                )}
-              >
-                <Suspense>
-                  <Routes>
-                    <Route
-                      element={
-                        <ProtectedRoute requiredRoles={["viewer", "admin"]} />
-                      }
-                    >
-                      <Route index element={<Live />} />
-                      <Route path="/review" element={<Events />} />
-                      <Route path="/explore" element={<Explore />} />
-                      <Route path="/export" element={<Exports />} />
-                      <Route path="/settings" element={<Settings />} />
-                    </Route>
-                    <Route
-                      element={<ProtectedRoute requiredRoles={["admin"]} />}
-                    >
-                      <Route path="/system" element={<System />} />
-                      <Route path="/config" element={<ConfigEditor />} />
-                      <Route path="/logs" element={<Logs />} />
-                      <Route path="/faces" element={<FaceLibrary />} />
-                      <Route path="/playground" element={<UIPlayground />} />
-                    </Route>
-                    <Route path="/unauthorized" element={<AccessDenied />} />
-                    <Route path="*" element={<Redirect to="/" />} />
-                  </Routes>
-                </Suspense>
-              </div>
-            </div>
           </Wrapper>
         </BrowserRouter>
       </AuthProvider>
@@ -79,4 +45,61 @@ function App() {
   );
 }
 
+function DefaultAppView() {
+  return (
+    <div className="size-full overflow-hidden">
+      {isDesktop && <Sidebar />}
+      {isDesktop && <Statusbar />}
+      {isMobile && <Bottombar />}
+      <div
+        id="pageRoot"
+        className={cn(
+          "absolute right-0 top-0 overflow-hidden",
+          isMobile
+            ? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
+            : "bottom-8 left-[52px]",
+        )}
+      >
+        <Suspense>
+          <Routes>
+            <Route
+              element={<ProtectedRoute requiredRoles={["viewer", "admin"]} />}
+            >
+              <Route index element={<Live />} />
+              <Route path="/review" element={<Events />} />
+              <Route path="/explore" element={<Explore />} />
+              <Route path="/export" element={<Exports />} />
+              <Route path="/settings" element={<Settings />} />
+            </Route>
+            <Route element={<ProtectedRoute requiredRoles={["admin"]} />}>
+              <Route path="/system" element={<System />} />
+              <Route path="/config" element={<ConfigEditor />} />
+              <Route path="/logs" element={<Logs />} />
+              <Route path="/faces" element={<FaceLibrary />} />
+              <Route path="/playground" element={<UIPlayground />} />
+            </Route>
+            <Route path="/unauthorized" element={<AccessDenied />} />
+            <Route path="*" element={<Redirect to="/" />} />
+          </Routes>
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
+function SafeAppView() {
+  return (
+    <div className="size-full overflow-hidden">
+      <div
+        id="pageRoot"
+        className={cn("absolute bottom-0 left-0 right-0 top-0 overflow-hidden")}
+      >
+        <Suspense>
+          <ConfigEditor />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
 export default App;

web/src/types/frigateConfig.ts

@@ -283,6 +283,9 @@ export type AllGroupsStreamingSettings = {
 };
 
 export interface FrigateConfig {
+  version: string;
+  safe_mode: boolean;
+
   audio: {
     enabled: boolean;
     enabled_in_config: boolean | null;