adds chart title to window, adds light mode to chartswindowpage

src/app/App.tsx

@@ -34,7 +34,10 @@ function App() {
   const isChartWindow = window.location.pathname.startsWith("/chart-window/");
 
   if (isChartWindow) {
-    return <ChartWindowPage theme="dark" />;
+    const params = new URLSearchParams(window.location.search);
+    const theme = params.get("theme") === "light" ? "light" : "dark";
+
+    return <ChartWindowPage theme={theme} />;
   }
 
   return (

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<ChartWorkspaceItem | null>(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 (
-            <div className="flex h-screen items-center justify-center bg-[#07101B] text-sm font-bold text-[#7F8CA3]">
+            <div
+                className={
+                    isDark
+                        ? "flex h-screen items-center justify-center bg-[#07101B] text-sm font-bold text-[#7F8CA3]"
+                        : "flex h-screen items-center justify-center bg-white text-sm font-bold text-slate-500"
+                }
+            >
                 Gráfico não encontrado.
             </div>
         );
@@ -219,64 +237,51 @@ export function ChartWindowPage({ theme }: ChartWindowPageProps) {
     };
 
     return (
-        <div className="flex h-screen flex-col overflow-hidden bg-[#07101B] text-white">
+        <div
-            <header className="flex h-9 shrink-0 items-center bg-[#1F232A] text-[#D7DEE8]">
+            className={
+                isDark
+                    ? "flex h-screen flex-col overflow-hidden bg-[#07101B] text-white"
+                    : "flex h-screen flex-col overflow-hidden bg-white text-[#0F172A]"
+            }
+        >
+            <header className={titleBarClass}>
                 <div
                     data-tauri-drag-region
-                    className="flex h-full flex-1 items-center px-3 text-xs font-semibold"
+                    className="flex h-full flex-1 items-center px-3 text-xs font-black"
                 >
                     {chart.title}
                 </div>
 
                 <div className="flex h-full items-center">
-                    <button
+                    <button type="button" title="Configurar" onClick={() => setConfigOpen(true)} className={titleButtonClass}>
-                        type="button"
-                        title="Configurar"
-                        onClick={() => setConfigOpen(true)}
-                        className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
-                    >
                         <Cog className="h-4 w-4" />
                     </button>
 
-                    <button
+                    <button type="button" title="Repor no grid" onClick={attachAndClose} className={titleButtonClass}>
-                        type="button"
-                        title="Repor no grid"
-                        onClick={attachAndClose}
-                        className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
-                    >
                         <PanelTop className="h-4 w-4" />
                     </button>
 
-                    <button
+                    <button type="button" title="Minimizar" onClick={() => currentWindow.minimize()} className={titleButtonClass}>
-                        type="button"
-                        title="Minimizar"
-                        onClick={() => currentWindow.minimize()}
-                        className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
-                    >
                         <Minus className="h-4 w-4" />
                     </button>
 
-                    <button
+                    <button type="button" title="Maximizar" onClick={() => currentWindow.toggleMaximize()} className={titleButtonClass}>
-                        type="button"
-                        title="Maximizar"
-                        onClick={() => currentWindow.toggleMaximize()}
-                        className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-white/10 hover:text-white"
-                    >
                         <Square className="h-3.5 w-3.5" />
                     </button>
 
-                    <button
+                    <button type="button" title="Fechar" onClick={closeAndHide} className={closeButtonClass}>
-                        type="button"
-                        title="Fechar"
-                        onClick={closeAndHide}
-                        className="grid h-9 w-11 place-items-center text-[#A8B3C7] transition hover:bg-red-500 hover:text-white"
-                    >
                         <X className="h-4 w-4" />
                     </button>
                 </div>
             </header>
 
-            <main className="min-h-0 flex-1 bg-[#07101B] [&>section]:h-full [&>section]:rounded-none [&>section]:border-0">
+            <main
+                className={
+                    isDark
+                        ? "min-h-0 flex-1 bg-[#07101B] [&>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"
+                }
+            >
                 <WorkspaceChart
                     theme={theme}
                     chart={chartConfig}

src/features/maincharts/pages/MainChartsPage.tsx

@@ -392,7 +392,13 @@ export function MainChartsPage({ theme }: MainChartsPageProps) {
         );
 
         window.setTimeout(() => {
-            void openChartWindow(chartId);
+            const chart = charts.find((item) => item.id === chartId);
+
+            void openChartWindow(
+                chartId,
+                theme,
+                chart?.title ?? "Chart",
+            );
         }, 100);
     };
 

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,