Added settings page

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

@@ -190,16 +190,9 @@ export default function Header(): JSX.Element {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="cursor-pointer"
-                  onClick={() => navigate("/global-variables")}
+                  onClick={() => navigate("/settings")}
                 >
-                  Global Variables
-                </DropdownMenuItem>
-
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => navigate("/shortcuts")}
-                >
-                  Shortcuts
+                  Settings
                 </DropdownMenuItem>
                 {!autoLogin && (
                   <>

src/frontend/src/pages/GlobalVariablesPage/index.tsx

@@ -1,26 +1,30 @@
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 
-import PageLayout from "../../components/pageLayout";
 import TableComponent from "../../components/tableComponent";
 
 export default function GlobalVariablesPage() {
   return (
-    <PageLayout
-      title="Global Variables"
-      description="Manage and assign global variables to default fields."
-      button={
-        <>
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="text-xl font-bold tracking-tight">Global Variables</h2>
+          <p className="text-muted-foreground">
+            Manage and assign global variables to default fields. You can add
+            new global variables by clicking the button.
+          </p>
+        </div>
+        <div className="flex-shrink-0">
           <Button data-testid="api-key-button-store" variant="primary">
             <IconComponent name="Plus" className="mr-2 w-4" />
             Add Global Variables
           </Button>
-        </>
-      }
-    >
+        </div>
+      </div>
+
       <div className="flex h-full w-full flex-col justify-between">
         <TableComponent />
       </div>
-    </PageLayout>
+    </div>
   );
 }

src/frontend/src/pages/SettingsPage/index.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { Outlet } from "react-router-dom";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import PageLayout from "../../components/pageLayout";
+import SidebarNav from "../../components/sidebarComponent";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+
+export default function SettingsPage(): JSX.Element {
+  const pathname = location.pathname;
+  const setCurrentFlowId = useFlowsManagerStore(
+    (state) => state.setCurrentFlowId
+  );
+  useEffect(() => {
+    setCurrentFlowId("");
+  }, [pathname]);
+
+  const sidebarNavItems = [
+    {
+      title: "Global Variables",
+      href: "/settings/global-variables",
+      icon: (
+        <ForwardedIconComponent
+          name="Globe"
+          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+        />
+      ),
+    },
+    {
+      title: "Keyboard Shortcuts",
+      href: "/settings/shortcuts",
+      icon: (
+        <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
+      ),
+    },
+  ];
+  return (
+    <PageLayout
+      title="Settings"
+      description="Manage the general settings for Langflow."
+    >
+      <div className="flex h-full w-full space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
+        <aside className="flex h-full flex-col space-y-6 lg:w-1/5">
+          <SidebarNav items={sidebarNavItems} />
+        </aside>
+        <div className="h-full w-full flex-1">
+          <Outlet />
+        </div>
+      </div>
+    </PageLayout>
+  );
+}

src/frontend/src/routes.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
 import { ProtectedAdminRoute } from "./components/authAdminGuard";
 import { ProtectedRoute } from "./components/authGuard";
 import { ProtectedLoginRoute } from "./components/authLoginGuard";
@@ -9,15 +9,16 @@ import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import ApiKeysPage from "./pages/ApiKeysPage";
 import FlowPage from "./pages/FlowPage";
+import GlobalVariablesPage from "./pages/GlobalVariablesPage";
 import HomePage from "./pages/MainPage";
 import ComponentsComponent from "./pages/MainPage/components/components";
 import ProfileSettingsPage from "./pages/ProfileSettingsPage";
+import SettingsPage from "./pages/SettingsPage";
 import StorePage from "./pages/StorePage";
 import ViewPage from "./pages/ViewPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
-import GlobalVariablesPage from "./pages/GlobalVariablesPage";
 
 const Router = () => {
   const navigate = useNavigate();
@@ -46,6 +47,18 @@ const Router = () => {
           element={<ComponentsComponent key="components" />}
         />
       </Route>
+      <Route
+        path="/settings"
+        element={
+          <ProtectedRoute>
+            <SettingsPage />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<Navigate replace to={"global-variables"} />} />
+        <Route path="global-variables" element={<GlobalVariablesPage />} />
+        <Route path="shortcuts" element={<GlobalVariablesPage />} />
+      </Route>
       <Route
         path="/store"
         element={
@@ -127,14 +140,6 @@ const Router = () => {
           </ProtectedAdminRoute>
         }
       />
-      <Route
-        path="/global-variables"
-        element={
-          <ProtectedRoute>
-            <GlobalVariablesPage />
-          </ProtectedRoute>
-        }
-      />
 
       <Route path="/account">
         <Route

src/frontend/src/utils/styleUtils.ts

@@ -67,6 +67,7 @@ import {
   Home,
   Info,
   Key,
+  Keyboard,
   Laptop2,
   Layers,
   Link,
@@ -374,6 +375,7 @@ export const nodeIconsLucide: iconsType = {
   tools: Hammer,
   advanced: Laptop2,
   chat: MessageCircle,
+  Keyboard: Keyboard,
   embeddings: Binary,
   saved_components: GradientSave,
   documentloaders: Paperclip,