feat: enhance root layout with navigation and theme handling

- Added useNavigate hook to facilitate programmatic navigation.
- Implemented a useEffect to redirect to the board view if a project was previously open and the root path is accessed.
- Updated theme class application to ensure proper filtering of theme options.

This improves user experience by ensuring the correct view is displayed upon navigation and enhances theme management.
This commit is contained in:
Kacper
2025-12-18 01:37:33 +01:00
parent e78bfc80ec
commit e1c3b7528f

View File

@@ -1,12 +1,11 @@
import { createRootRoute, Outlet, useLocation } from "@tanstack/react-router";
import { createRootRoute, Outlet, useLocation, useNavigate } from "@tanstack/react-router";
import { useEffect, useState, useCallback } from "react";
import { Sidebar } from "@/components/layout/sidebar";
import { FileBrowserProvider, useFileBrowser, setGlobalFileBrowser } from "@/contexts/file-browser-context";
import { useAppStore } from "@/store/app-store";
import { useSetupStore } from "@/store/setup-store";
import { getElectronAPI } from "@/lib/electron";
import { Toaster } from "sonner";
import { themeOptions } from "@/config/theme-options";
import { ThemeOption, themeOptions } from "@/config/theme-options";
function RootLayoutContent() {
const location = useLocation();
@@ -17,7 +16,7 @@ function RootLayoutContent() {
previewTheme,
getEffectiveTheme,
} = useAppStore();
const { isFirstRun, setupComplete } = useSetupStore();
const navigate = useNavigate();
const [isMounted, setIsMounted] = useState(false);
const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
const { openFileBrowser } = useFileBrowser();
@@ -82,13 +81,20 @@ function RootLayoutContent() {
testConnection();
}, [setIpcConnected]);
// Restore to board view if a project was previously open
useEffect(() => {
if (isMounted && currentProject && location.pathname === "/") {
navigate({ to: "/board" });
}
}, [isMounted, currentProject, location.pathname, navigate]);
// Apply theme class to document
useEffect(() => {
const root = document.documentElement;
// Remove all theme classes dynamically from themeOptions
const themeClasses = themeOptions
.map((option) => option.value)
.filter((theme) => theme !== "system");
.filter((theme) => theme !== "system" as ThemeOption['value']);
root.classList.remove(...themeClasses);
if (effectiveTheme === "dark") {