From aaaa5ff402d483e0d5d504c448bb2cbedc9166a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20F=C3=B6rtsch?= <mail@felixfoertsch.de>
Date: Wed, 4 Mar 2026 17:31:34 +0100
Subject: [PATCH] rename /setup route to /settings, fix hooks violation crash
 on settings page

useState was called after conditional return (React hooks rules violation),
causing the settings page to crash. moved all hooks to top level.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/features/setup/SetupPage.tsx       | 16 +++++++++++-----
 src/routes/__root.tsx                  |  2 +-
 src/routes/{setup.tsx => settings.tsx} |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)
 rename src/routes/{setup.tsx => settings.tsx} (73%)

diff --git a/src/features/setup/SetupPage.tsx b/src/features/setup/SetupPage.tsx
index d645280..77e8436 100644
--- a/src/features/setup/SetupPage.tsx
+++ b/src/features/setup/SetupPage.tsx
@@ -110,8 +110,18 @@ function ConnSection({
 export function SetupPage() {
 	const [data, setData] = useState<SetupData | null>(null);
 	const [clearStatus, setClearStatus] = useState('');
+	const [mappings, setMappings] = useState<[string, string][]>([['', '']]);
+	const [mappingSaved, setMappingSaved] = useState('');
+	const [mappingsLoaded, setMappingsLoaded] = useState(false);
 
-	const load = () => api.get<SetupData>('/api/setup').then(setData);
+	const load = () => api.get<SetupData>('/api/setup').then((d) => {
+		setData(d);
+		if (!mappingsLoaded) {
+			const pm: [string, string][] = JSON.parse(d.config.path_mappings ?? '[]');
+			setMappings(pm.length > 0 ? pm : [['', '']]);
+			setMappingsLoaded(true);
+		}
+	});
 	useEffect(() => { load(); }, []);
 
 	if (!data) return <div className="text-gray-400 py-8 text-center">Loading…</div>;
@@ -127,10 +137,6 @@ export function SetupPage() {
 	const saveSonarr = (url: string, apiKey: string) =>
 		api.post('/api/setup/sonarr', { url, api_key: apiKey });
 
-	const pathMappings: [string, string][] = JSON.parse(cfg.path_mappings ?? '[]');
-	const [mappings, setMappings] = useState<[string, string][]>(pathMappings.length > 0 ? pathMappings : [['', '']]);
-	const [mappingSaved, setMappingSaved] = useState('');
-
 	const saveMappings = async () => {
 		const valid = mappings.filter(([f, t]) => f.trim() && t.trim());
 		await api.post('/api/setup/path-mappings', { mappings: valid });
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index b6e29d9..c9daf2e 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -54,7 +54,7 @@ function RootLayout() {
 				<NavLink to="/execute">Execute</NavLink>
 				<div className="flex-1" />
 				<NavLink to="/nodes">Nodes</NavLink>
-				<NavLink to="/setup">Settings</NavLink>
+				<NavLink to="/settings">Settings</NavLink>
 			</nav>
 			<main className="max-w-[1600px] mx-auto px-5 pt-4 pb-12">
 				<Outlet />
diff --git a/src/routes/setup.tsx b/src/routes/settings.tsx
similarity index 73%
rename from src/routes/setup.tsx
rename to src/routes/settings.tsx
index 8707437..8a9313a 100644
--- a/src/routes/setup.tsx
+++ b/src/routes/settings.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { SetupPage } from '~/features/setup/SetupPage';
 
-export const Route = createFileRoute('/setup')({
+export const Route = createFileRoute('/settings')({
 	component: SetupPage,
 });