ZacharyZhang-NY
75022f82c5
Create src/renderer/components/ui/icons.ts as the single re-export point
for every Phosphor icon the renderer touches, then rewrite the 95 files
that previously imported directly from "@phosphor-icons/react" to pull
from the relative-path-to-barrel instead. The TitleBar commit earlier
in this series already used ui/icons; this commit extends the pattern
to the rest of the renderer.
Benefits now wired in:
- one location where bundle tree-shaking can be reasoned about,
- typos like Briefcase vs BriefCase show up against a finite list,
- re-theming or swapping icon sets is a one-file edit,
- a lint rule that flags raw @phosphor-icons/react imports can be
added later without mass-rewriting call sites.
The barrel also re-exports the `Icon` type so call sites that type
icon props against the Phosphor component type work unchanged.
Test count stays at 363 passing; typecheck stays at 156 errors.
51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
import { AnimatePresence, motion } from "framer-motion";
|
|
import { WarningCircle } from "../components/ui/icons";
|
|
import type { SectionId } from "@shared/types";
|
|
import { ErrorBoundary } from "../components/ui";
|
|
import { OrganizationSections } from "./sections/OrganizationSections";
|
|
import { ExecutionSections } from "./sections/ExecutionSections";
|
|
import { OperationsSections } from "./sections/OperationsSections";
|
|
|
|
interface SectionContentViewProps {
|
|
section: SectionId;
|
|
error: string | null;
|
|
pageTransition: { duration: number; ease?: readonly [number, number, number, number] } | { duration: number };
|
|
}
|
|
|
|
export function SectionContentView({ section, error, pageTransition }: SectionContentViewProps) {
|
|
const isCommunication = section === "communication";
|
|
return (
|
|
<div className={`flex-1 ${isCommunication ? "flex flex-col overflow-hidden" : "overflow-auto"}`}>
|
|
<div className={isCommunication ? "flex min-h-0 flex-1 flex-col" : "mx-auto flex w-full max-w-[1040px] flex-col px-6 py-6 lg:px-10 lg:py-8"}>
|
|
|
|
{error ? (
|
|
<div className={`flex items-center gap-3 rounded-lg bg-destructive-muted px-4 py-3 text-[13px] text-destructive ${isCommunication ? "mx-6 mt-4" : "mb-6"}`}>
|
|
<WarningCircle size={18} />
|
|
<span>{error}</span>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className={isCommunication ? "flex min-h-0 flex-1 flex-col" : "min-h-0 flex-1"}>
|
|
<ErrorBoundary>
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={section}
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -12 }}
|
|
transition={pageTransition}
|
|
className={isCommunication ? "flex min-h-0 flex-1 flex-col" : "space-y-14"}
|
|
style={isCommunication ? { height: "100%" } : undefined}
|
|
>
|
|
<OrganizationSections section={section} />
|
|
<ExecutionSections section={section} />
|
|
<OperationsSections section={section} />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</ErrorBoundary>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|