fix: dark mode and header text display issues (#3315)

* Fix dark mode not starting with the browser saved variable

* Added the Last saved at text on the header too

* Fixed css

src/frontend/src/App.tsx

@@ -1,16 +1,9 @@
-import { useContext, useEffect } from "react";
+import { Suspense, useContext, useEffect } from "react";
 import { Cookies } from "react-cookie";
-import { ErrorBoundary } from "react-error-boundary";
+import { RouterProvider } from "react-router-dom";
-import { Outlet } from "react-router-dom";
 import "reactflow/dist/style.css";
-import "./App.css";
-import AlertDisplayArea from "./alerts/displayArea";
-import CrashErrorComponent from "./components/crashErrorComponent";
-import FetchErrorComponent from "./components/fetchErrorComponent";
 import LoadingComponent from "./components/loadingComponent";
 import {
-  FETCH_ERROR_DESCRIPION,
-  FETCH_ERROR_MESSAGE,
   LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS,
   LANGFLOW_ACCESS_TOKEN_EXPIRE_SECONDS_ENV,
 } from "./constants/constants";
@@ -19,20 +12,15 @@ import {
   useAutoLogin,
   useRefreshAccessToken,
 } from "./controllers/API/queries/auth";
-import { useGetHealthQuery } from "./controllers/API/queries/health";
 import { useGetVersionQuery } from "./controllers/API/queries/version";
 import { setupAxiosDefaults } from "./controllers/API/utils";
-import useTrackLastVisitedPath from "./hooks/use-track-last-visited-path";
+import router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import useAuthStore from "./stores/authStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
-import { useFolderStore } from "./stores/foldersStore";
-import { cn } from "./utils/utils";
 
 export default function App() {
-  useTrackLastVisitedPath();
-  const isLoading = useFlowsManagerStore((state) => state.isLoading);
   const { login, setUserData, getUser } = useContext(AuthContext);
   const setAutoLogin = useAuthStore((state) => state.setAutoLogin);
   const setLoading = useAlertStore((state) => state.setLoading);
@@ -48,18 +36,10 @@ export default function App() {
 
   useGetVersionQuery();
 
-  const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
   const { mutate: mutateRefresh } = useRefreshAccessToken();
 
   const isLoginPage = location.pathname.includes("login");
 
-  const {
-    data: healthData,
-    isFetching: fetchingHealth,
-    isError: isErrorHealth,
-    refetch,
-  } = useGetHealthQuery();
-
   useEffect(() => {
     if (!dark) {
       document.getElementById("body")!.classList.remove("dark");
@@ -136,49 +116,16 @@ export default function App() {
     });
   };
 
-  const isLoadingApplication = isLoading || isLoadingFolders;
-
   return (
     //need parent component with width and height
-    <div className="flex h-full flex-col">
+    <Suspense
-      <ErrorBoundary
+      fallback={
-        onReset={() => {
+        <div className="loading-page-panel">
-          // any reset function
+          <LoadingComponent remSize={50} />
-        }}
+        </div>
-        FallbackComponent={CrashErrorComponent}
+      }
-      >
+    >
-        <>
+      <RouterProvider router={router} />
-          {
+    </Suspense>
-            <FetchErrorComponent
-              description={FETCH_ERROR_DESCRIPION}
-              message={FETCH_ERROR_MESSAGE}
-              openModal={
-                isErrorHealth ||
-                (healthData &&
-                  Object.values(healthData).some((value) => value !== "ok"))
-              }
-              setRetry={() => {
-                refetch();
-              }}
-              isLoadingHealth={fetchingHealth}
-            ></FetchErrorComponent>
-          }
-
-          <div
-            className={cn(
-              "loading-page-panel absolute left-0 top-0 z-[999]",
-              isLoadingApplication ? "" : "hidden",
-            )}
-          >
-            <LoadingComponent remSize={50} />
-          </div>
-          <Outlet />
-        </>
-      </ErrorBoundary>
-      <div></div>
-      <div className="app-div">
-        <AlertDisplayArea />
-      </div>
-    </div>
   );
 }

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -61,7 +61,8 @@ export const MenuBar = ({}: {}): JSX.Element => {
 
   const savedText =
     updatedAt && changesNotSaved
-      ? new Date(updatedAt).toLocaleString("en-US", {
+      ? SAVED_HOVER +
+        new Date(updatedAt).toLocaleString("en-US", {
           hour: "numeric",
           minute: "numeric",
         })

src/frontend/src/components/headerComponent/index.tsx

@@ -89,7 +89,7 @@ export default function Header(): JSX.Element {
 
   return (
     <div className="header-arrangement">
-      <div className="header-start-display lg:w-[407px]">
+      <div className="header-start-display lg:w-[450px]">
         <Link to="/all" className="cursor-pointer">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>

src/frontend/src/index.tsx

@@ -2,31 +2,23 @@ import ReactDOM from "react-dom/client";
 import ContextWrapper from "./contexts";
 import reportWebVitals from "./reportWebVitals";
 
+import "./style/classes.css";
 // @ts-ignore
 import "./style/index.css";
 // @ts-ignore
+import "./App.css";
 import "./style/applies.css";
+
 // @ts-ignore
-import { Suspense } from "react";
+import App from "./App";
-import { RouterProvider } from "react-router-dom";
-import LoadingComponent from "./components/loadingComponent";
-import router from "./routes";
-import "./style/classes.css";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
+
 root.render(
   <ContextWrapper>
-    <Suspense
+    <App />
-      fallback={
-        <div className="loading-page-panel">
-          <LoadingComponent remSize={50} />
-        </div>
-      }
-    >
-      <RouterProvider router={router} />
-    </Suspense>
   </ContextWrapper>,
 );
 reportWebVitals();

src/frontend/src/pages/AppWrapperPage/index.tsx

@@ -0,0 +1,71 @@
+import AlertDisplayArea from "@/alerts/displayArea";
+import CrashErrorComponent from "@/components/crashErrorComponent";
+import FetchErrorComponent from "@/components/fetchErrorComponent";
+import LoadingComponent from "@/components/loadingComponent";
+import {
+  FETCH_ERROR_DESCRIPION,
+  FETCH_ERROR_MESSAGE,
+} from "@/constants/constants";
+import { useGetHealthQuery } from "@/controllers/API/queries/health";
+import useTrackLastVisitedPath from "@/hooks/use-track-last-visited-path";
+import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { useFolderStore } from "@/stores/foldersStore";
+import { cn } from "@/utils/utils";
+import { ErrorBoundary } from "react-error-boundary";
+import { Outlet } from "react-router-dom";
+
+export function AppWrapperPage() {
+  useTrackLastVisitedPath();
+
+  const isLoading = useFlowsManagerStore((state) => state.isLoading);
+  const isLoadingFolders = useFolderStore((state) => state.isLoadingFolders);
+  const {
+    data: healthData,
+    isFetching: fetchingHealth,
+    isError: isErrorHealth,
+    refetch,
+  } = useGetHealthQuery();
+  const isLoadingApplication = isLoading || isLoadingFolders;
+  return (
+    <div className="flex h-full flex-col">
+      <ErrorBoundary
+        onReset={() => {
+          // any reset function
+        }}
+        FallbackComponent={CrashErrorComponent}
+      >
+        <>
+          {
+            <FetchErrorComponent
+              description={FETCH_ERROR_DESCRIPION}
+              message={FETCH_ERROR_MESSAGE}
+              openModal={
+                isErrorHealth ||
+                (healthData &&
+                  Object.values(healthData).some((value) => value !== "ok"))
+              }
+              setRetry={() => {
+                refetch();
+              }}
+              isLoadingHealth={fetchingHealth}
+            ></FetchErrorComponent>
+          }
+
+          <div
+            className={cn(
+              "loading-page-panel absolute left-0 top-0 z-[999]",
+              isLoadingApplication ? "" : "hidden",
+            )}
+          >
+            <LoadingComponent remSize={50} />
+          </div>
+          <Outlet />
+        </>
+      </ErrorBoundary>
+      <div></div>
+      <div className="app-div">
+        <AlertDisplayArea />
+      </div>
+    </div>
+  );
+}

src/frontend/src/routes.tsx

@@ -12,6 +12,7 @@ import { ProtectedLoginRoute } from "./components/authLoginGuard";
 import { AuthSettingsGuard } from "./components/authSettingsGuard";
 import { CatchAllRoute } from "./components/catchAllRoutes";
 import { StoreGuard } from "./components/storeGuard";
+import { AppWrapperPage } from "./pages/AppWrapperPage";
 const MessagesPage = lazy(
   () => import("./pages/SettingsPage/pages/messagesPage"),
 );
@@ -44,7 +45,7 @@ const ViewPage = lazy(() => import("./pages/ViewPage"));
 
 const router = createBrowserRouter(
   createRoutesFromElements([
-    <Route path="" element={<App />}>
+    <Route path="" element={<AppWrapperPage />}>
       <Route
         path="/"
         element={