Skip to content

Commit 1e09297

Browse files
jahvonjahvon
authored
refactor(desktop): replace view routing with wouter (#277)
1 parent 4ee39ee commit 1e09297

40 files changed

+1238
-1160
lines changed

‎desktop/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<title>flow Desktop</title>
87
</head>
98

109
<body>
1110
<div id="root"></div>
12-
<script type="module" src="/src/main.tsx"></script>
11+
<script type="module" src="/src/root.tsx"></script>
1312
</body>
1413
</html>

‎desktop/package-lock.json‎

Lines changed: 139 additions & 126 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎desktop/package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@
2626
"@tauri-apps/plugin-shell": "^2.2.2",
2727
"@types/prismjs": "^1.26.5",
2828
"prismjs": "^1.30.0",
29-
"react": "^18.3.1",
30-
"react-dom": "^18.3.1",
31-
"react-markdown": "^10.1.0"
29+
"react": "^19.1.0",
30+
"react-dom": "^19.1.0",
31+
"react-markdown": "^10.1.0",
32+
"wouter": "^3.7.1"
3233
},
3334
"devDependencies": {
3435
"@chromatic-com/storybook": "^4.0.0",
@@ -40,8 +41,8 @@
4041
"@storybook/react-vite": "^9.0.4",
4142
"@tauri-apps/cli": "^2",
4243
"@types/node": "^20.11.24",
43-
"@types/react": "^18.3.1",
44-
"@types/react-dom": "^18.3.1",
44+
"@types/react": "^19.1.0",
45+
"@types/react-dom": "^19.1.0",
4546
"@vitejs/plugin-react": "^4.3.4",
4647
"@vitest/browser": "^3.2.1",
4748
"@vitest/coverage-v8": "^3.2.1",

‎desktop/src/App.tsx‎

Lines changed: 41 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import "@mantine/core/styles.css";
21
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
3-
import { useEffect, useState } from "react";
2+
import { Route, Switch } from "wouter";
43
import "./App.css";
5-
import { useBackendData, useExecutable } from "./hooks/useBackendData";
6-
import { NotifierProvider, useNotifier } from "./hooks/useNotifier";
7-
import { SettingsProvider } from "./hooks/useSettings";
8-
import { AppShell, View, Viewer } from "./layout";
9-
import { ThemeProvider } from "./theme/ThemeProvider";
10-
import { NotificationType } from "./types/notification";
4+
import { AppProvider } from "./hooks/useAppContext.tsx";
5+
import { NotifierProvider } from "./hooks/useNotifier";
6+
import { AppShell } from "./layout";
7+
import { PageWrapper } from "./components/PageWrapper.tsx";
8+
import { Settings, Welcome, Data } from "./pages";
9+
import { WorkspaceRoute } from "./pages/Workspace/WorkspaceRoute.tsx";
10+
import { ExecutableRoute } from "./pages/Executable/ExecutableRoute.tsx";
11+
import { Text } from "@mantine/core";
1112

1213
const queryClient = new QueryClient({
1314
defaultOptions: {
@@ -18,104 +19,42 @@ const queryClient = new QueryClient({
1819
},
1920
});
2021

21-
function AppContent() {
22-
const [currentView, setCurrentView] = useState<View>(View.Welcome);
23-
const [welcomeMessage, setWelcomeMessage] = useState<string>("");
24-
const [selectedExecutable, setSelectedExecutable] = useState<string | null>(
25-
null
26-
);
27-
const [selectedWorkspace, setSelectedWorkspace] = useState<string | null>(
28-
null
29-
);
30-
const { notification, setNotification } = useNotifier();
31-
32-
const { config, workspaces, executables, isLoading, hasError, refreshAll } =
33-
useBackendData(selectedWorkspace);
34-
35-
const { executable, executableError } = useExecutable(
36-
selectedExecutable || ""
37-
);
38-
39-
// Set initial workspace from config when it loads
40-
useEffect(() => {
41-
if (config?.currentWorkspace && workspaces && workspaces.length > 0) {
42-
// Only update if we don't have a selected workspace or if the config workspace is different
43-
if (!selectedWorkspace || config.currentWorkspace !== selectedWorkspace) {
44-
setSelectedWorkspace(config.currentWorkspace);
45-
}
46-
}
47-
}, [config, workspaces]);
48-
49-
useEffect(() => {
50-
if (hasError) {
51-
setNotification({
52-
title: "Unexpected error",
53-
message: hasError.message || "An error occurred",
54-
type: NotificationType.Error,
55-
autoClose: false,
56-
});
57-
}
58-
}, [hasError]);
59-
60-
useEffect(() => {
61-
if (welcomeMessage === "" && executables?.length > 0) {
62-
setWelcomeMessage("Select an executable to get started.");
63-
}
64-
}, [executables, welcomeMessage]);
65-
66-
const handleLogoClick = () => {
67-
setCurrentView(View.Welcome);
68-
};
69-
70-
return (
71-
<AppShell
72-
currentView={currentView}
73-
setCurrentView={(view: string) => setCurrentView(view as View)}
74-
workspaces={workspaces || []}
75-
selectedWorkspace={selectedWorkspace}
76-
onSelectWorkspace={(workspaceName) => {
77-
setSelectedWorkspace(workspaceName);
78-
setCurrentView(View.Workspace);
79-
}}
80-
visibleExecutables={executables || []}
81-
onSelectExecutable={(executable) => {
82-
if (executable === selectedExecutable) {
83-
return;
84-
}
85-
setSelectedExecutable(executable);
86-
if (currentView !== View.Executable) {
87-
setCurrentView(View.Executable);
88-
}
89-
}}
90-
onLogoClick={handleLogoClick}
91-
hasError={hasError}
92-
isLoading={isLoading}
93-
refreshAll={refreshAll}
94-
notification={notification}
95-
setNotification={setNotification}
96-
>
97-
<Viewer
98-
currentView={currentView}
99-
selectedExecutable={executable}
100-
executableError={executableError}
101-
welcomeMessage={welcomeMessage}
102-
workspace={
103-
workspaces?.find((w) => w.name === selectedWorkspace) || null
104-
}
105-
/>
106-
</AppShell>
107-
);
108-
}
109-
11022
function App() {
11123
return (
11224
<QueryClientProvider client={queryClient}>
11325
<NotifierProvider>
114-
<SettingsProvider>
115-
<ThemeProvider>
116-
<AppContent />
117-
</ThemeProvider>
118-
</SettingsProvider>
26+
<AppProvider>
27+
<AppShell>
28+
<Switch>
29+
<Route path="/">
30+
<PageWrapper>
31+
<Welcome />
32+
</PageWrapper>
33+
</Route>
34+
<Route
35+
path="/workspace/:workspaceName"
36+
component={WorkspaceRoute}
37+
/>
38+
<Route
39+
path="/executable/:executableId"
40+
component={ExecutableRoute}
41+
/>
42+
<Route path="/logs">
43+
<PageWrapper>
44+
<Text>Logs view coming soon...</Text>
45+
</PageWrapper>
46+
</Route>
47+
<Route path="/vault" component={Data} />
48+
<Route path="/cache" component={Data} />
49+
<Route path="/settings" component={Settings} />
50+
<Route>
51+
<PageWrapper>
52+
<Welcome welcomeMessage="404: What you are looking for couldn't be found" />
53+
</PageWrapper>
54+
</Route>
55+
</Switch>
56+
</AppShell>
57+
</AppProvider>
11958
</NotifierProvider>
12059
</QueryClientProvider>
12160
);

‎desktop/src/components/CodeHighlighter/CodeHighlighter.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ NC='\\033[0m' # No Color
5151
5252
# Function to log messages
5353
log() {
54-
echo -e "\${GREEN}[$(date +'%Y-%m-%d %H:%M:%S')]\${NC} \$1" | tee -a "\$LOG_FILE"
54+
echo -e "\${GREEN}[$(date +'%Y-%m-%d %H:%M:%S')]\${NC} $1" | tee -a "\$LOG_FILE"
5555
}
5656
5757
# Function to handle errors
5858
error() {
59-
echo -e "\${RED}[ERROR]\${NC} \$1" >&2
59+
echo -e "\${RED}[ERROR]\${NC} $1" >&2
6060
exit 1
6161
}
6262

‎desktop/src/components/CodeHighlighter/CodeHighlighter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export function CodeHighlighter({
5353
type: NotificationType.Error,
5454
autoClose: true,
5555
});
56+
console.error(error);
5657
}
5758
};
5859

‎desktop/src/components/MarkdownRenderer/MarkdownRenderer.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,11 @@ export function MarkdownRenderer({
4747
pre: (props: ComponentPropsWithoutRef<typeof Code>) => {
4848
const codeElement = props.children as React.ReactElement;
4949
const codeContent = codeElement?.props?.children || "";
50-
return <CodeHighlighter theme={settings.theme}>{codeContent}</CodeHighlighter>;
50+
return (
51+
<CodeHighlighter theme={settings.theme}>
52+
{codeContent}
53+
</CodeHighlighter>
54+
);
5155
},
5256
}}
5357
>

‎desktop/src/components/PageWrapper.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ScrollArea } from "@mantine/core";
2+
3+
export function PageWrapper({ children }: { children: React.ReactNode }) {
4+
return (
5+
<ScrollArea
6+
h="calc(100vh - var(--app-header-height) - var(--app-shell-padding-total))"
7+
w="calc(100vw - var(--app-navbar-width) - var(--app-shell-padding-total))"
8+
type="auto"
9+
scrollbarSize={6}
10+
scrollHideDelay={100}
11+
offsetScrollbars
12+
>
13+
{children}
14+
</ScrollArea>
15+
);
16+
}

‎desktop/src/components/Settings.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ export function SettingRow({ label, description, children }: SettingRowProps) {
1212
<Box py="md">
1313
<Group align="flex-start" gap="xl">
1414
<Box className={styles.settingLabel}>
15-
<Text size="sm" fw={500}>{label}</Text>
15+
<Text size="sm" fw={500}>
16+
{label}
17+
</Text>
1618
{description && (
17-
<Text size="xs" c="dimmed" mt={2}>{description}</Text>
19+
<Text size="xs" c="dimmed" mt={2}>
20+
{description}
21+
</Text>
1822
)}
1923
</Box>
20-
<Box className={styles.settingControl}>
21-
{children}
22-
</Box>
24+
<Box className={styles.settingControl}>{children}</Box>
2325
</Group>
2426
</Box>
2527
);
@@ -33,12 +35,17 @@ interface SettingSectionProps {
3335
export function SettingSection({ title, children }: SettingSectionProps) {
3436
return (
3537
<Box mb="lg">
36-
<Text size="xs" fw={500} mb="xs" c="dimmed" tt="uppercase" className={styles.sectionTitle}>
38+
<Text
39+
size="xs"
40+
fw={500}
41+
mb="xs"
42+
c="dimmed"
43+
tt="uppercase"
44+
className={styles.sectionTitle}
45+
>
3746
{title}
3847
</Text>
39-
<Paper className={styles.settingCard}>
40-
{children}
41-
</Paper>
48+
<Paper className={styles.settingCard}>{children}</Paper>
4249
</Box>
4350
);
4451
}

0 commit comments

Comments
 (0)