geniusrun/frontend/src/App.tsx

import { useEffect, useState } from "react";
import { api } from "./api/client";
import "./App.css";
import { Dashboard } from "./pages/Dashboard";
import { Plan } from "./pages/Plan";
import { Profile } from "./pages/Profile";
import { ReviewQueue } from "./pages/ReviewQueue";

const TABS = [
  { key: "activities", label: "Activities", icon: "☰", Component: ReviewQueue },
  { key: "dashboard", label: "Progression", icon: "↗", Component: Dashboard },
  { key: "plan", label: "Training plan", icon: "✎", Component: Plan },
] as const;

type TabKey = (typeof TABS)[number]["key"];

function App() {
  const [tab, setTab] = useState<TabKey>("activities");
  // Profile isn't a tab: it's reached via the profile name in the top-right
  // corner instead, since (for now, single-profile) it's account settings,
  // not a content view alongside Activities/Progression/Training plan.
  const [showProfile, setShowProfile] = useState(false);
  const [profileName, setProfileName] = useState<string | null>(null);

  useEffect(() => {
    api.getProfile().then((p) => setProfileName(p.Name)).catch(() => {});
  }, []);

  const Active = TABS.find((t) => t.key === tab)!.Component;

  return (
    <div className="app">
      <header className="app-header">
        <h1>🧞‍♀️ geniusrun</h1>
        <nav className="tabs">
          {TABS.map((t) => (
            <button
              key={t.key}
              className={!showProfile && t.key === tab ? "tab active" : "tab"}
              onClick={() => {
                setShowProfile(false);
                setTab(t.key);
              }}
            >
              <span className="tab-icon">{t.icon}</span>
              {t.label}
            </button>
          ))}
        </nav>
        <button
          type="button"
          className={showProfile ? "profile-name active" : "profile-name"}
          onClick={() => setShowProfile(true)}
        >
          {profileName ?? "Profile"}
        </button>
      </header>
      <main>{showProfile ? <Profile onSaved={(p) => setProfileName(p.Name)} /> : <Active />}</main>
    </div>
  );
}

export default App;