feat: middle save

bun.lock

@@ -7,6 +7,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router": "^7.3.0",
+        "zustand": "^5.0.3",
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -447,6 +448,8 @@
 
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
+    "zustand": ["zustand@5.0.3", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg=="],
+
     "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],

package.json

@@ -14,7 +14,8 @@
 	"dependencies": {
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"react-router": "^7.3.0"
+		"react-router": "^7.3.0",
+		"zustand": "^5.0.3"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.21.0",

src/App.tsx

@@ -1,11 +1,12 @@
 import { BrowserRouter, Route, Routes } from "react-router";
 import "./App.scss";
+import Dashboard from "./components/dashboard";
 
 function App() {
 	return (
 		<BrowserRouter>
 			<Routes>
-				<Route path={"/"} element={<></>} />
+				<Route path={"*"} element={<Dashboard />} />
 			</Routes>
 		</BrowserRouter>
 	);

src/components/dashboard/index.tsx

@@ -0,0 +1,10 @@
+import Directory from "../directory";
+import "./dashboard.scss";
+
+function Dashboard() {
+	return (
+		<Directory />
+	);
+}
+
+export default Dashboard;

src/components/directory/directory.scss

@@ -0,0 +1 @@
+

src/components/directory/index.tsx

@@ -0,0 +1,18 @@
+import { usePath } from "../../store/path";
+import { useEffect } from "react";
+
+import "./directory.scss";
+
+function Directory() {
+	const path = usePath();
+
+	useEffect(() => {
+		path.update(location.pathname);
+	});
+
+	return (
+		<div></div>
+	);
+}
+
+export default Directory;

src/store/path.ts

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+interface PathState {
+	data: undefined;
+	update(path: string): Promise<void>;
+}
+
+export const usePath = create<PathState>((set) => ({
+	data: undefined,
+	update: async (path: string) => {
+		console.log(path);
+		set({ data: undefined });
+	}
+}));