diff --git a/frontend/autometabuilder/app/layout.tsx b/frontend/autometabuilder/app/layout.tsx index 2050b1e..01d1d90 100644 --- a/frontend/autometabuilder/app/layout.tsx +++ b/frontend/autometabuilder/app/layout.tsx @@ -23,7 +23,7 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/frontend/autometabuilder/components/layout/PageLayout.tsx b/frontend/autometabuilder/components/layout/PageLayout.tsx index 844147a..86930f8 100644 --- a/frontend/autometabuilder/components/layout/PageLayout.tsx +++ b/frontend/autometabuilder/components/layout/PageLayout.tsx @@ -1,5 +1,7 @@ -import { ReactNode } from "react"; -import { Box, Toolbar, Typography } from "@mui/material"; +"use client"; + +import { ReactNode, useEffect, useState } from "react"; +import { Box, IconButton, Toolbar, Typography } from "@mui/material"; import { NavigationItem } from "../../lib/types"; import Sidebar from "./Sidebar"; @@ -12,11 +14,28 @@ type PageLayoutProps = { }; export default function PageLayout({ navItems, section, onSectionChange, t, children }: PageLayoutProps) { + const [theme, setTheme] = useState<"light" | "dark">("light"); + + useEffect(() => { + const initialTheme = document.documentElement.getAttribute("data-theme"); + if (initialTheme === "dark") { + setTheme("dark"); + } + }, []); + + useEffect(() => { + document.documentElement.setAttribute("data-theme", theme); + }, [theme]); + + const handleToggleTheme = () => { + setTheme((prev) => (prev === "light" ? "dark" : "light")); + }; + return ( - +
{t("ui.app.title", "AutoMetabuilder Dashboard")} @@ -25,6 +44,9 @@ export default function PageLayout({ navItems, section, onSectionChange, t, chil {t("ui.dashboard.subtitle", "Control the bot and monitor system activity")}
+ + {theme === "light" ? "🌞" : "🌙"} + {children} diff --git a/frontend/autometabuilder/components/layout/Sidebar.tsx b/frontend/autometabuilder/components/layout/Sidebar.tsx index 9085b99..3f53f6e 100644 --- a/frontend/autometabuilder/components/layout/Sidebar.tsx +++ b/frontend/autometabuilder/components/layout/Sidebar.tsx @@ -11,7 +11,7 @@ type SidebarProps = { export default function Sidebar({ items, selected, onSelect, t }: SidebarProps) { return ( - + {t("ui.app.name", "AutoMetabuilder")} @@ -33,6 +33,9 @@ export default function Sidebar({ items, selected, onSelect, t }: SidebarProps) ))} + + testuser + ); diff --git a/frontend/autometabuilder/components/sections/DashboardSection.tsx b/frontend/autometabuilder/components/sections/DashboardSection.tsx index a914254..0a17d3c 100644 --- a/frontend/autometabuilder/components/sections/DashboardSection.tsx +++ b/frontend/autometabuilder/components/sections/DashboardSection.tsx @@ -19,17 +19,22 @@ type DashboardSectionProps = { logs: string; onRun: (payload: DashboardRunPayload) => Promise; t: (key: string, fallback?: string) => string; + active: boolean; }; -export default function DashboardSection({ status, logs, onRun, t }: DashboardSectionProps) { +export default function DashboardSection({ status, logs, onRun, t, active }: DashboardSectionProps) { const { mode, setMode, iterations, setIterations, stopAtMvp, setStopAtMvp, feedback, handleRun } = useDashboardControls({ onRun, t, }); return ( - - + + {t("ui.dashboard.title", "Dashboard")} @@ -73,10 +78,11 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe onClick={handleRun} disabled={status.is_running} sx={{ mt: 2 }} + id="run-btn" > {t("ui.dashboard.start_bot", "Start Bot")} - + {status.is_running ? t("ui.dashboard.status.running", "Running") : t("ui.dashboard.status.idle", "Idle")} • {" "} {status.mvp_reached ? t("ui.dashboard.status.mvp_reached", "Reached") : t("ui.dashboard.status.mvp_progress", "In Progress")} diff --git a/frontend/autometabuilder/components/sections/DashboardSections.tsx b/frontend/autometabuilder/components/sections/DashboardSections.tsx index 34fff04..f861827 100644 --- a/frontend/autometabuilder/components/sections/DashboardSections.tsx +++ b/frontend/autometabuilder/components/sections/DashboardSections.tsx @@ -31,19 +31,18 @@ export default function DashboardSections({ }: DashboardSectionsProps) { return ( <> - {section === "dashboard" && } - {section === "workflow" && ( - - )} - {section === "prompt" && } - {section === "settings" && } - {section === "translations" && } + + + + + ); } diff --git a/frontend/autometabuilder/components/sections/PromptSection.tsx b/frontend/autometabuilder/components/sections/PromptSection.tsx index a110ff7..3d0cf21 100644 --- a/frontend/autometabuilder/components/sections/PromptSection.tsx +++ b/frontend/autometabuilder/components/sections/PromptSection.tsx @@ -5,9 +5,10 @@ type PromptSectionProps = { content: string; onSave: (content: string) => Promise; t: (key: string, fallback?: string) => string; + active: boolean; }; -export default function PromptSection({ content, onSave, t }: PromptSectionProps) { +export default function PromptSection({ content, onSave, t, active }: PromptSectionProps) { const [draft, setDraft] = useState(content); const [message, setMessage] = useState(""); @@ -22,7 +23,11 @@ export default function PromptSection({ content, onSave, t }: PromptSectionProps }; return ( - + {t("ui.prompt.title", "Prompt Builder")} diff --git a/frontend/autometabuilder/components/sections/SettingsSection.tsx b/frontend/autometabuilder/components/sections/SettingsSection.tsx index 599c1fd..466cb11 100644 --- a/frontend/autometabuilder/components/sections/SettingsSection.tsx +++ b/frontend/autometabuilder/components/sections/SettingsSection.tsx @@ -5,9 +5,10 @@ type SettingsSectionProps = { envVars: Record; onSave: (values: Record) => Promise; t: (key: string, fallback?: string) => string; + active: boolean; }; -export default function SettingsSection({ envVars, onSave, t }: SettingsSectionProps) { +export default function SettingsSection({ envVars, onSave, t, active }: SettingsSectionProps) { const [values, setValues] = useState>(envVars); const [newKey, setNewKey] = useState(""); const [newValue, setNewValue] = useState(""); @@ -35,7 +36,11 @@ export default function SettingsSection({ envVars, onSave, t }: SettingsSectionP }; return ( - + {t("ui.settings.title", "Settings")} diff --git a/frontend/autometabuilder/components/sections/TranslationsSection.tsx b/frontend/autometabuilder/components/sections/TranslationsSection.tsx index be50a3d..2e23586 100644 --- a/frontend/autometabuilder/components/sections/TranslationsSection.tsx +++ b/frontend/autometabuilder/components/sections/TranslationsSection.tsx @@ -5,9 +5,10 @@ type TranslationsSectionProps = { languages: Record; onRefresh: () => void; t: (key: string, fallback?: string) => string; + active: boolean; }; -export default function TranslationsSection({ languages, onRefresh, t }: TranslationsSectionProps) { +export default function TranslationsSection({ languages, onRefresh, t, active }: TranslationsSectionProps) { const { selected, editorValue, @@ -23,7 +24,11 @@ export default function TranslationsSection({ languages, onRefresh, t }: Transla } = useTranslationManager({ languages, onRefresh, t }); return ( - + {t("ui.translations.title", "Translations")} diff --git a/frontend/autometabuilder/components/sections/WorkflowSection.tsx b/frontend/autometabuilder/components/sections/WorkflowSection.tsx index 60880d4..13de819 100644 --- a/frontend/autometabuilder/components/sections/WorkflowSection.tsx +++ b/frontend/autometabuilder/components/sections/WorkflowSection.tsx @@ -10,9 +10,10 @@ type WorkflowSectionProps = { onSave: (content: string) => Promise; onTemplateSelect: (id: string) => void; t: (key: string, fallback?: string) => string; + active: boolean; }; -export default function WorkflowSection({ content, packages, onSave, onTemplateSelect, t }: WorkflowSectionProps) { +export default function WorkflowSection({ content, packages, onSave, onTemplateSelect, t, active }: WorkflowSectionProps) { const [draft, setDraft] = useState(content); const [message, setMessage] = useState(""); @@ -27,7 +28,11 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS }; return ( - + {t("ui.workflow.title", "Workflow Builder")}