diff --git a/src/app/App.tsx b/src/app/App.tsx index 3444dd1..0dcc697 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -34,7 +34,10 @@ function App() { const isChartWindow = window.location.pathname.startsWith("/chart-window/"); if (isChartWindow) { - return ; + const params = new URLSearchParams(window.location.search); + const theme = params.get("theme") === "light" ? "light" : "dark"; + + return ; } return ( diff --git a/src/features/maincharts/pages/ChartWindowPage.tsx b/src/features/maincharts/pages/ChartWindowPage.tsx index f139947..fb966a2 100644 --- a/src/features/maincharts/pages/ChartWindowPage.tsx +++ b/src/features/maincharts/pages/ChartWindowPage.tsx @@ -39,6 +39,7 @@ type ChartWindowPageProps = { }; export function ChartWindowPage({ theme }: ChartWindowPageProps) { + const isDark = theme === "dark"; const parts = window.location.pathname.split("/").filter(Boolean); const chartId = parts[parts.length - 1] ?? ""; @@ -48,9 +49,20 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) { const [configOpen, setConfigOpen] = useState(false); const currentWindow = getCurrentWindow(); - const latestChartRef = useRef(null); + const titleBarClass = isDark + ? "flex h-9 shrink-0 items-center bg-[#1F232A] text-[#D7DEE8]" + : "flex h-9 shrink-0 items-center border-b border-[#D7DEE8] bg-white text-[#0F172A]"; + + const titleButtonClass = isDark + ? "grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white" + : "grid h-9 w-11 place-items-center text-slate-500 transition hover:bg-[#F8FAFC] hover:text-[#0F172A]"; + + const closeButtonClass = isDark + ? "grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-red-500 hover:text-white" + : "grid h-9 w-11 place-items-center text-slate-500 transition hover:bg-red-500 hover:text-white"; + useChartWorkspacePersistence({ scope: "GLOBAL", layoutMode: "fourGrid", @@ -184,7 +196,13 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) { if (!chart) { return ( -
+
Gráfico não encontrado.
); @@ -219,64 +237,51 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) { }; return ( -
-
+
+
{chart.title}
- - - - -
-
+
section]:h-full [&>section]:rounded-none [&>section]:border-0" + : "min-h-0 flex-1 bg-white [&>section]:h-full [&>section]:rounded-none [&>section]:border-0 [&>section]:shadow-none" + } + > { - void openChartWindow(chartId); + const chart = charts.find((item) => item.id === chartId); + + void openChartWindow( + chartId, + theme, + chart?.title ?? "Chart", + ); }, 100); }; diff --git a/src/features/maincharts/utils/openChartWindow.ts b/src/features/maincharts/utils/openChartWindow.ts index 66d1f25..1083df1 100644 --- a/src/features/maincharts/utils/openChartWindow.ts +++ b/src/features/maincharts/utils/openChartWindow.ts @@ -1,6 +1,10 @@ import { WebviewWindow } from "@tauri-apps/api/webviewWindow"; -export async function openChartWindow(chartId: string) { +export async function openChartWindow( + chartId: string, + theme: "dark" | "light", + title: string, +) { const label = `chart-${chartId}`; const existing = await WebviewWindow.getByLabel(label); @@ -12,9 +16,9 @@ export async function openChartWindow(chartId: string) { } const chartWindow = new WebviewWindow(label, { - url: `/chart-window/${chartId}`, + url: `/chart-window/${chartId}?theme=${theme}`, - title: "Chart", + title, width: 920, height: 680,