moteva/frontend/src/ui/App.tsx

"use client";

import { Loader2 } from "lucide-react";
import { useEffect, useState } from "react";
import { openHome, readRoute, type AppRoute } from "@/application/route";
import { BrandMark } from "@/ui/components/BrandMark";
import { CanvasWorkspace } from "@/ui/pages/CanvasWorkspace";
import { HomePage } from "@/ui/pages/HomePage";
import { ProjectsRoutePage } from "@/ui/pages/ProjectsRoutePage";
import { useAuth } from "@/ui/auth/AuthProvider";

export function App() {
  const { isAuthenticated, openLogin } = useAuth();
  const [route, setRoute] = useState<AppRoute | null>(null);

  useEffect(() => {
    setRoute(readRoute());
    const handleRoute = () => setRoute(readRoute());
    window.addEventListener("hashchange", handleRoute);
    window.addEventListener("popstate", handleRoute);
    return () => {
      window.removeEventListener("hashchange", handleRoute);
      window.removeEventListener("popstate", handleRoute);
    };
  }, []);

  useEffect(() => {
    if (route?.name === "project" && !isAuthenticated) {
      openLogin();
    }
  }, [isAuthenticated, openLogin, route]);

  if (!route) {
    return (
      <div className="workspace-loading">
        <Loader2 className="spin" size={28} />
      </div>
    );
  }

  if (route.name === "project" && !isAuthenticated) return <ProjectAuthPreview />;
  if (route.name === "project") return <CanvasWorkspace projectId={route.id} />;
  if (route.name === "projects") return <ProjectsRoutePage />;
  if (route.name === "notFound") return <NotFoundPage />;
  return <HomePage />;
}

function NotFoundPage() {
  const handleHome = () => {
    openHome();
  };

  return (
    <main className="not-found-shell">
      <section className="not-found-content">
        <NotFoundMark />
        <h1>404：页面未找到！</h1>
        <p>我们到处都找过了，但找不到您要找的页面。</p>
        <button type="button" onClick={handleHome}>
          返回首页
        </button>
      </section>
    </main>
  );
}

function NotFoundMark() {
  return (
    <svg className="not-found-mark" xmlns="http://www.w3.org/2000/svg" width="279" height="128" fill="none" viewBox="0 0 279 128" aria-label="404">
      <g clipPath="url(#missing_svg_a)">
        <g filter="url(#missing_svg_b)">
          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53 12v90" />
        </g>
        <g filter="url(#missing_svg_c)">
          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53.5 11.5 14.843 60.29c-5.193 6.555-.525 16.21 7.838 16.21H74" />
        </g>
        <g filter="url(#missing_svg_d)">
          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M231 12v90" />
        </g>
        <g filter="url(#missing_svg_e)">
          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="m231.5 11.5-38.657 48.79c-5.193 6.555-.525 16.21 7.838 16.21H252" />
        </g>
        <g filter="url(#missing_svg_f)">
          <circle cx="231.089" cy="101.089" r="6.291" stroke="#fff" strokeWidth="3.595" />
        </g>
        <circle cx="231.089" cy="101.089" r="7.19" stroke="#fff" strokeWidth="1.798" />
        <g filter="url(#missing_svg_g)">
          <path fill="#2F3640" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
          <path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.723" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
        </g>
        <g filter="url(#missing_svg_h)">
          <ellipse cx="131.5" cy="57" stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" rx="29.5" ry="40" />
        </g>
      </g>
      <defs>
        <filter id="missing_svg_b" width="20.672" height="110.672" x="42.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="4.494" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
          <feBlend in2="shape" result="innerShadow" />
        </filter>
        <filter id="missing_svg_c" width="82.027" height="85.672" x="2.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="4.494" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
          <feBlend in2="shape" result="innerShadow" />
        </filter>
        <filter id="missing_svg_d" width="20.672" height="110.672" x="220.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="4.494" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
          <feBlend in2="shape" result="innerShadow" />
        </filter>
        <filter id="missing_svg_e" width="82.027" height="85.672" x="180.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="4.494" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
          <feBlend in2="shape" result="innerShadow" />
        </filter>
        <filter id="missing_svg_f" width="26.601" height="26.603" x="217.787" y="87.787" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feGaussianBlur result="foregroundBlur" stdDeviation="2.606" />
        </filter>
        <filter id="missing_svg_g" width="30.279" height="28.458" x="224.519" y="100.822" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset dy="5.786" />
          <feGaussianBlur stdDeviation="2.893" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
          <feBlend in2="BackgroundImageFix" result="dropShadow" />
          <feBlend in="SourceGraphic" in2="dropShadow" result="shape" />
        </filter>
        <filter id="missing_svg_h" width="79.672" height="100.672" x="91.664" y="6.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
          <feFlood floodOpacity="0" result="BackgroundImageFix" />
          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
          <feOffset />
          <feGaussianBlur stdDeviation="4.494" />
          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
          <feBlend in2="shape" result="innerShadow" />
        </filter>
        <clipPath id="missing_svg_a">
          <path fill="#fff" d="M0 0h279v128H0z" />
        </clipPath>
      </defs>
    </svg>
  );
}

function ProjectAuthPreview() {
  return (
    <div className="project-auth-shell" aria-hidden="true">
      <div className="project-auth-blur">
        <header className="project-auth-topbar">
          <div className="project-auth-title">
            <BrandMark className="project-auth-mark" />
            <span />
          </div>
          <div className="project-auth-top-actions">
            <i />
            <i />
            <b />
          </div>
        </header>
        <main className="project-auth-main">
          <section className="project-auth-stage">
            <div className="project-auth-grid" />
            <div className="project-auth-frame primary" />
            <div className="project-auth-frame secondary" />
            <div className="project-auth-frame tertiary" />
            <div className="project-auth-toolbar">
              <i />
              <i />
              <i />
              <i />
            </div>
          </section>
          <aside className="project-auth-panel">
            <div className="project-auth-panel-head">
              <span />
              <i />
              <i />
            </div>
            <div className="project-auth-thread">
              <b />
              <span />
              <span />
              <span />
            </div>
            <div className="project-auth-composer">
              <span />
              <div>
                <i />
                <i />
              </div>
            </div>
          </aside>
        </main>
      </div>
    </div>
  );
}