a very good jj gui
feat: add TanStack Router setup
Configure TanStack Router for client-side routing:
- Add route tree generation config
- Create root layout route
- Create index route
- Update main.tsx with RouterProvider
- Update App.tsx to use routing
+42
-35
+3
-31
apps/desktop/src/App.tsx
+3
-31
apps/desktop/src/App.tsx
···
1
-
import { useState } from "react";
2
-
import { invoke } from "@tauri-apps/api/core";
3
-
import "./styles/App.css";
4
-
5
-
function App() {
6
-
const [greetMsg, setGreetMsg] = useState("");
7
-
const [name, setName] = useState("");
8
-
9
-
async function greet() {
10
-
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
11
-
setGreetMsg(await invoke("greet", { name }));
12
-
}
13
-
14
-
return (
15
-
<div className="container">
16
-
<h1>Tatami</h1>
17
-
<p>A Jujutsu GUI client</p>
1
+
import { ComponentExample } from "@/components/component-example";
18
2
19
-
<div className="row">
20
-
<input
21
-
id="greet-input"
22
-
onChange={(e) => setName(e.currentTarget.value)}
23
-
placeholder="Enter a name..."
24
-
/>
25
-
<button type="button" onClick={() => greet()}>
26
-
Greet
27
-
</button>
28
-
</div>
29
-
30
-
<p>{greetMsg}</p>
31
-
</div>
32
-
);
3
+
export function App() {
4
+
return <ComponentExample />;
33
5
}
34
6
35
7
export default App;
+13
-4
apps/desktop/src/main.tsx
+13
-4
apps/desktop/src/main.tsx
···
1
1
import React from "react";
2
2
import ReactDOM from "react-dom/client";
3
-
import App from "./App";
3
+
import { RouterProvider, createRouter } from "@tanstack/react-router";
4
+
import { routeTree } from "./routeTree.gen";
4
5
import "./styles/index.css";
5
6
7
+
const router = createRouter({ routeTree });
8
+
9
+
declare module "@tanstack/react-router" {
10
+
interface Register {
11
+
router: typeof router;
12
+
}
13
+
}
14
+
6
15
ReactDOM.createRoot(document.getElementById("root")!).render(
7
-
<React.StrictMode>
8
-
<App />
9
-
</React.StrictMode>,
16
+
<React.StrictMode>
17
+
<RouterProvider router={router} />
18
+
</React.StrictMode>,
10
19
);
+4
apps/desktop/src/routeTree.gen.ts
+4
apps/desktop/src/routeTree.gen.ts
+9
apps/desktop/src/routes/__root.tsx
+9
apps/desktop/src/routes/__root.tsx
+13
apps/desktop/src/routes/index.tsx
+13
apps/desktop/src/routes/index.tsx
···
1
+
import { createRoute } from "@tanstack/react-router";
2
+
import { AppShell } from "@/components/AppShell";
3
+
import { Route as rootRoute } from "./__root";
4
+
5
+
export const Route = createRoute({
6
+
getParentRoute: () => rootRoute,
7
+
path: "/",
8
+
component: IndexComponent,
9
+
});
10
+
11
+
function IndexComponent() {
12
+
return <AppShell />;
13
+
}