Bunch of settings changes

Author: rambleraptor

package-lock.json

@@ -36,6 +36,7 @@
     "react-hook-form": "^7.53.2",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.28.0",
+    "redux-persist": "^6.0.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

package.json

@@ -7,8 +7,9 @@ import CreateForm from "./components/form/form";
 import InfoPage from "./app/explorer/info";
 import UpdatePage from "./app/explorer/update_form";
 
-import { selectResources, store } from './state/store';
+import { selectResources, store, persistor } from './state/store';
 import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
 import { useAppSelector } from "./hooks/store";
 
 function transformUrlForRouter(url: string): string {
@@ -52,7 +53,9 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
 function App() {
   return (
     <Provider store={store} >
+      <PersistGate loading={null} persistor={persistor}>
         <Routes />
+      </PersistGate>
     </Provider>
   );
 }

src/App.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import {
   Sidebar,
   SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
   SidebarHeader,
-  SidebarInput,
   SidebarRail,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
 } from "@/components/ui/sidebar";
-import { useAppDispatch, useAppSelector } from "@/hooks/store";
-import { selectHeaders, selectRootResources, setHeaders, selectMockServerEnabled, setMockServerEnabled } from "@/state/store";
-import { Label } from "../../components/ui/label";
-import { Checkbox } from "../../components/ui/checkbox";
+import { useAppSelector } from "@/hooks/store";
+import { selectRootResources } from "@/state/store";
 import { ResourceTypeList } from "@/components/resource_types/resource_type_list";
+import { Home } from "lucide-react";
+import { Link } from "react-router-dom";
 
 // The AppSidebar. This fetches the list of root resources from the schema and displays them.
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
@@ -21,8 +21,16 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar {...props}>
       <SidebarHeader>
-        <HeadersInput />
-        <MockServerToggle />
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild>
+              <Link to="/">
+                <Home className="h-4 w-4" />
+                <span>Home</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
       </SidebarHeader>
       <SidebarContent>
         <ResourceTypeList resources={resources} />
@@ -31,52 +39,3 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     </Sidebar>
   );
 }
-
-export function HeadersInput() {
-  const headers = useAppSelector(selectHeaders);
-  const dispatch = useAppDispatch();
-
-  const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(setHeaders(event.target.value));
-  };
-
-  return (
-    <form>
-      <SidebarGroup className="py-0">
-        <SidebarGroupContent className="relative">
-          <Label htmlFor="headers" className="sr-only">
-            Headers
-          </Label>
-          <SidebarInput
-            id="headers"
-            placeholder="Headers"
-            type="text"
-            value={headers!}
-            onChange={handleTextChange} />
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </form>
-  );
-}
-
-export function MockServerToggle() {
-  const mockServerEnabled = useAppSelector(selectMockServerEnabled);
-  const dispatch = useAppDispatch();
-
-  const handleToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
-    dispatch(setMockServerEnabled(event.target.checked));
-  };
-
-  return (
-    <SidebarGroup className="py-2">
-      <SidebarGroupContent>
-        <Checkbox
-          id="mock-server"
-          checked={mockServerEnabled}
-          onChange={handleToggle}
-          label="Use Mock Server"
-        />
-      </SidebarGroupContent>
-    </SidebarGroup>
-  );
-}

src/app/sidebar/app-sidebar.tsx

@@ -1,16 +1,11 @@
-import { OASSelector } from "@/components/oas-selector";
+import { Settings } from "@/components/settings";
 import { useAppSelector } from "@/hooks/store";
 import { schemaState } from "@/state/store";
 
 export default function SpecSpecifierPage() {
-  const state = useAppSelector(schemaState);
-  if(state == 'unset') {
-    return (
-      <div className="flex h-screen w-full items-center justify-center px-4">
-        <OASSelector />
-      </div>
-    )
-  } else {
-    return <div />
-  }
+  return (
+    <div className="flex h-screen w-full items-center justify-center px-4">
+      <Settings />
+    </div>
+  )
 }