- {cardSkeletons.map((id) => (
+ {PORTAL_PROJECTS_CARD_SKELETONS.map((id) => (
@@ -832,7 +833,7 @@ export function PortalProjectDetailPendingPage() {
- {milestonesSkeletons.map((id) => (
+ {PORTAL_PROJECT_DETAIL_MILESTONES_SKELETONS.map((id) => (
- {commentSkeletons.map((id) => (
+ {PORTAL_PROJECT_DETAIL_COMMENT_SKELETONS.map((id) => (
- {fileSkeletons.map((id) => (
+ {PORTAL_PROJECT_DETAIL_FILE_SKELETONS.map((id) => (
- {updateSkeletons.map((id) => (
+ {PORTAL_PROJECT_DETAIL_UPDATE_SKELETONS.map((id) => (
);
}
+
+export function MutationErrorBanner({
+ error,
+}: {
+ error: { message: string } | null | undefined;
+}) {
+ if (!error) {
+ return null;
+ }
+ return (
+
+ {error.message}
+
+ );
+}
diff --git a/src/components/evilcharts/charts/bar-chart.tsx b/src/components/evilcharts/charts/bar-chart.tsx
index 8aceb73..e5d300b 100644
--- a/src/components/evilcharts/charts/bar-chart.tsx
+++ b/src/components/evilcharts/charts/bar-chart.tsx
@@ -138,6 +138,8 @@ type EvilBarChartPropsWithCallback<
> = EvilBarChartProps
&
(EvilBarChartClickable | EvilBarChartNotClickable);
+const EMPTY_GLOWING_BARS: any[] = [];
+
export function EvilBarChart<
TData extends Record,
TConfig extends Record,
@@ -169,7 +171,7 @@ export function EvilBarChart<
enableHoverHighlight = false,
isLoading = false,
loadingBars,
- glowingBars = [],
+ glowingBars = EMPTY_GLOWING_BARS,
showBrush = false,
brushHeight,
brushFormatLabel,
diff --git a/src/components/evilcharts/charts/line-chart.tsx b/src/components/evilcharts/charts/line-chart.tsx
index 28c65bc..f37319d 100644
--- a/src/components/evilcharts/charts/line-chart.tsx
+++ b/src/components/evilcharts/charts/line-chart.tsx
@@ -130,6 +130,8 @@ type EvilLineChartPropsWithCallback<
> = EvilLineChartProps &
(EvilLineChartClickable | EvilLineChartNotClickable);
+const EMPTY_GLOWING_LINES: any[] = [];
+
export function EvilLineChart<
TData extends Record,
TConfig extends Record,
@@ -160,7 +162,7 @@ export function EvilLineChart<
isClickable = false,
isLoading = false,
loadingPoints,
- glowingLines = [],
+ glowingLines = EMPTY_GLOWING_LINES,
showBrush = false,
brushHeight,
brushFormatLabel,
diff --git a/src/components/evilcharts/charts/radial-chart.tsx b/src/components/evilcharts/charts/radial-chart.tsx
index 8e9cd50..f4447f3 100644
--- a/src/components/evilcharts/charts/radial-chart.tsx
+++ b/src/components/evilcharts/charts/radial-chart.tsx
@@ -100,6 +100,8 @@ type EvilRadialChartPropsWithCallback> =
EvilRadialChartProps &
(EvilRadialChartClickable | EvilRadialChartNotClickable);
+const EMPTY_GLOWING_BARS: string[] = [];
+
export function EvilRadialChart>({
data,
dataKey,
@@ -122,7 +124,7 @@ export function EvilRadialChart>({
tooltipDefaultIndex,
isClickable = false,
isLoading = false,
- glowingBars = [],
+ glowingBars = EMPTY_GLOWING_BARS,
onSelectionChange,
backgroundVariant,
}: EvilRadialChartPropsWithCallback) {
diff --git a/src/components/evilcharts/charts/sankey-chart.tsx b/src/components/evilcharts/charts/sankey-chart.tsx
index a041e50..7f78c5c 100644
--- a/src/components/evilcharts/charts/sankey-chart.tsx
+++ b/src/components/evilcharts/charts/sankey-chart.tsx
@@ -799,50 +799,50 @@ const GlowFilter = ({
* The skeleton sankey shown while the chart is loading. Rendered by the root in
* place of the real diagram — a fixed grid of pulsing nodes and links.
*/
-const LoadingSankey = () => {
- const nodes = [
- { x: 30, y: 25, width: 12, height: 65, delay: 0 },
- { x: 30, y: 110, width: 12, height: 50, delay: 0.3 },
- { x: 30, y: 180, width: 12, height: 45, delay: 0.15 },
- { x: 244, y: 20, width: 12, height: 55, delay: 0.45 },
- { x: 244, y: 95, width: 12, height: 75, delay: 0.6 },
- { x: 244, y: 190, width: 12, height: 40, delay: 0.25 },
- { x: 458, y: 35, width: 12, height: 80, delay: 0.5 },
- { x: 458, y: 135, width: 12, height: 90, delay: 0.1 },
- ];
-
- const links = [
- { from: 0, to: 3, width: 26, delay: 0.2 },
- { from: 0, to: 4, width: 18, delay: 0.7 },
- { from: 1, to: 4, width: 24, delay: 0.4 },
- { from: 1, to: 5, width: 12, delay: 0.9 },
- { from: 2, to: 4, width: 16, delay: 0.1 },
- { from: 2, to: 5, width: 14, delay: 0.55 },
- { from: 3, to: 6, width: 22, delay: 0.35 },
- { from: 3, to: 7, width: 18, delay: 0.8 },
- { from: 4, to: 6, width: 28, delay: 0.05 },
- { from: 4, to: 7, width: 32, delay: 0.65 },
- { from: 5, to: 7, width: 16, delay: 0.45 },
- ];
-
- // Builds a bezier path connecting the right edge of one node to the left of another
- const getLinkPath = (fromIdx: number, toIdx: number) => {
- const from = nodes[fromIdx];
- const to = nodes[toIdx];
- const startX = from.x + from.width;
- const startY = from.y + from.height / 2;
- const endX = to.x;
- const endY = to.y + to.height / 2;
- const controlX1 = startX + (endX - startX) * 0.4;
- const controlX2 = startX + (endX - startX) * 0.6;
- return `M${startX},${startY} C${controlX1},${startY} ${controlX2},${endY} ${endX},${endY}`;
- };
+const LOADING_NODES = [
+ { x: 30, y: 25, width: 12, height: 65, delay: 0 },
+ { x: 30, y: 110, width: 12, height: 50, delay: 0.3 },
+ { x: 30, y: 180, width: 12, height: 45, delay: 0.15 },
+ { x: 244, y: 20, width: 12, height: 55, delay: 0.45 },
+ { x: 244, y: 95, width: 12, height: 75, delay: 0.6 },
+ { x: 244, y: 190, width: 12, height: 40, delay: 0.25 },
+ { x: 458, y: 35, width: 12, height: 80, delay: 0.5 },
+ { x: 458, y: 135, width: 12, height: 90, delay: 0.1 },
+];
+
+const LOADING_LINKS = [
+ { from: 0, to: 3, width: 26, delay: 0.2 },
+ { from: 0, to: 4, width: 18, delay: 0.7 },
+ { from: 1, to: 4, width: 24, delay: 0.4 },
+ { from: 1, to: 5, width: 12, delay: 0.9 },
+ { from: 2, to: 4, width: 16, delay: 0.1 },
+ { from: 2, to: 5, width: 14, delay: 0.55 },
+ { from: 3, to: 6, width: 22, delay: 0.35 },
+ { from: 3, to: 7, width: 18, delay: 0.8 },
+ { from: 4, to: 6, width: 28, delay: 0.05 },
+ { from: 4, to: 7, width: 32, delay: 0.65 },
+ { from: 5, to: 7, width: 16, delay: 0.45 },
+];
+
+// Builds a bezier path connecting the right edge of one node to the left of another
+const getLinkPath = (fromIdx: number, toIdx: number) => {
+ const from = LOADING_NODES[fromIdx];
+ const to = LOADING_NODES[toIdx];
+ const startX = from.x + from.width;
+ const startY = from.y + from.height / 2;
+ const endX = to.x;
+ const endY = to.y + to.height / 2;
+ const controlX1 = startX + (endX - startX) * 0.4;
+ const controlX2 = startX + (endX - startX) * 0.6;
+ return `M${startX},${startY} C${controlX1},${startY} ${controlX2},${endY} ${endX},${endY}`;
+};
+const LoadingSankey = () => {
const baseDuration = LOADING_ANIMATION_DURATION / 1000;
return (
<>
- {links.map((link, i) => (
+ {LOADING_LINKS.map((link, i) => (
{
}}
/>
))}
- {nodes.map((node, i) => (
+ {LOADING_NODES.map((node, i) => (
(null);
export function useChart() {
- const context = React.useContext(ChartContext);
+ const context = React.use(ChartContext);
if (!context) {
throw new Error("useChart must be used within a ");
@@ -102,8 +102,10 @@ function ChartContainer({
// Validate chart config at runtime
validateChartConfigColors(config);
+ const contextValue = React.useMemo(() => ({ config }), [config]);
+
return (
-
+
{
(color, index) => ` --color-${key}-${index}: ${color};`
);
})
- .filter(Boolean)
.join("\n");
const css = Object.entries(THEMES)
@@ -209,7 +210,7 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
)
.join("\n");
- return ;
+ return ;
};
// Helper to extract item config from a payload.
diff --git a/src/components/evilcharts/ui/evil-brush.tsx b/src/components/evilcharts/ui/evil-brush.tsx
index bd36e76..3f8893c 100644
--- a/src/components/evilcharts/ui/evil-brush.tsx
+++ b/src/components/evilcharts/ui/evil-brush.tsx
@@ -249,18 +249,15 @@ function EvilBrush({
// mouse movements don't produce index changes (e.g., at boundaries)
const lastCommittedRef = React.useRef
(internalRange);
- useEffect(() => {
- if (!isControlled) {
- setInternalRange((prev) => {
- const adjusted = {
- startIndex: Math.min(prev.startIndex, Math.max(0, totalPoints - 1)),
- endIndex: Math.min(prev.endIndex, Math.max(0, totalPoints - 1)),
- };
- lastCommittedRef.current = adjusted;
- return adjusted;
- });
- }
- }, [totalPoints, isControlled]);
+ // Adjust range when totalPoints changes during render
+ if (totalPoints > 0 && (internalRange.startIndex > totalPoints - 1 || internalRange.endIndex > totalPoints - 1)) {
+ const adjusted = {
+ startIndex: Math.min(internalRange.startIndex, Math.max(0, totalPoints - 1)),
+ endIndex: Math.min(internalRange.endIndex, Math.max(0, totalPoints - 1)),
+ };
+ setInternalRange(adjusted);
+ lastCommittedRef.current = adjusted;
+ }
// ── Clamping & committing ───────────────────────────────────────────────
@@ -333,18 +330,19 @@ function EvilBrush({
// Position always driven by internalRange (never lags behind controlled props)
const range = internalRange;
- // Sync internalRange with controlled props when not dragging
- useEffect(() => {
- if (isControlled && !isDragging) {
- const syncedRange = {
- startIndex: controlledStart,
- endIndex: controlledEnd,
- };
- // eslint-disable-next-line react-hooks/set-state-in-effect
- setInternalRange(syncedRange);
- lastCommittedRef.current = syncedRange;
- }
- }, [isControlled, controlledStart, controlledEnd, isDragging]);
+ const prevStartRef = React.useRef(controlledStart);
+ const prevEndRef = React.useRef(controlledEnd);
+
+ if (isControlled && (controlledStart !== prevStartRef.current || controlledEnd !== prevEndRef.current)) {
+ const clamped = clampRange({
+ startIndex: controlledStart,
+ endIndex: controlledEnd,
+ });
+ prevStartRef.current = controlledStart;
+ prevEndRef.current = controlledEnd;
+ setInternalRange(clamped);
+ lastCommittedRef.current = clamped;
+ }
// ── Computed positions (%) ──────────────────────────────────────────────
@@ -543,16 +541,19 @@ function MiniChart({
connectNulls?: boolean;
barRadius?: number;
}) {
- const gradients = React.useMemo(
- () =>
- Object.entries(chartConfig)
- .filter(([key]) => keys.includes(key))
- .map(([dataKey, config]) => ({
- dataKey,
+ const gradients = React.useMemo(() => {
+ const result: Array<{ dataKey: string; colorsCount: number }> = [];
+ const keysSet = new Set(keys);
+ for (const [key, config] of Object.entries(chartConfig)) {
+ if (keysSet.has(key)) {
+ result.push({
+ dataKey: key,
colorsCount: getColorsCount(config),
- })),
- [chartConfig, keys]
- );
+ });
+ }
+ }
+ return result;
+ }, [chartConfig, keys]);
const dashArray =
strokeVariant === "dashed" || strokeVariant === "animated-dashed"
@@ -740,13 +741,14 @@ function useEvilBrush>({
// deferred value. React can skip intermediate slices during fast drags.
const deferredRange = React.useDeferredValue(range);
- useEffect(() => {
- // eslint-disable-next-line react-hooks/set-state-in-effect
+ const [prevDataLength, setPrevDataLength] = React.useState(data.length);
+ if (data.length !== prevDataLength) {
+ setPrevDataLength(data.length);
setRange({
startIndex: 0,
endIndex: Math.max(0, data.length - 1),
});
- }, [data.length]);
+ }
const visibleData = React.useMemo(
() => data.slice(deferredRange.startIndex, deferredRange.endIndex + 1),
diff --git a/src/components/evilcharts/ui/legend.tsx b/src/components/evilcharts/ui/legend.tsx
index 14dc8d0..c458310 100644
--- a/src/components/evilcharts/ui/legend.tsx
+++ b/src/components/evilcharts/ui/legend.tsx
@@ -52,38 +52,43 @@ function ChartLegendContent({
className
)}
>
- {payload
- .filter((item) => item.type !== "none")
- .map((item) => {
- // For pie charts, item.value contains the sector name (e.g., "chrome")
- // For radial charts, the name is in item.payload[nameKey]
- // For other charts, item.dataKey contains the series name (e.g., "desktop")
- const payloadName =
- nameKey && item.payload
- ? (item.payload as Record)[nameKey]
- : undefined;
- const key = `${payloadName ?? item.value ?? item.dataKey ?? "value"}`;
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
- const isSelected = selected === null || selected === key;
-
- // Get colors count for this item to determine gradient vs solid
- const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;
-
+ {payload.map((item) => {
+ if (item.type === "none") {
+ return null;
+ }
+
+ // For pie charts, item.value contains the sector name (e.g., "chrome")
+ // For radial charts, the name is in item.payload[nameKey]
+ // For other charts, item.dataKey contains the series name (e.g., "desktop")
+ const payloadName =
+ nameKey && item.payload
+ ? (item.payload as Record)[nameKey]
+ : undefined;
+ const key = `${payloadName ?? item.value ?? item.dataKey ?? "value"}`;
+ const itemConfig = getPayloadConfigFromPayload(config, item, key);
+ const isSelected = selected === null || selected === key;
+
+ // Get colors count for this item to determine gradient vs solid
+ const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;
+
+ const handleSelect = () => {
+ if (!isClickable) {
+ return;
+ }
+
+ onSelectChange?.(selected === key ? null : key);
+ };
+
+ if (isClickable) {
return (
- svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
- !isSelected && "opacity-30",
- isClickable && "cursor-pointer"
+ "flex items-center gap-1.5 transition-opacity [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground cursor-pointer text-left bg-transparent border-none p-0 font-sans text-sm",
+ !isSelected && "opacity-30"
)}
key={key}
- onClick={() => {
- if (!isClickable) {
- return;
- }
-
- onSelectChange?.(selected === key ? null : key);
- }}
+ onClick={handleSelect}
>
{itemConfig?.icon && !hideIcon ? (
@@ -95,9 +100,31 @@ function ChartLegendContent({
/>
)}
{itemConfig?.label}
-
+
);
- })}
+ }
+
+ return (
+ svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+ !isSelected && "opacity-30"
+ )}
+ key={key}
+ >
+ {itemConfig?.icon && !hideIcon ? (
+
+ ) : (
+
+ )}
+ {itemConfig?.label}
+
+ );
+ })}
- {payload
- .filter((item) => item.type !== "none")
- .map((item, index) => {
+ {(() => {
+ let visibleIndex = 0;
+ return payload.map((item) => {
+ if (item.type === "none") {
+ return null;
+ }
+
+ const currentVisibleIndex = visibleIndex++;
+
// For pie charts, item.name contains the sector name (e.g., "chrome")
// For radial charts, the name is in item.payload[nameKey]
// For other charts, item.name or item.dataKey contains the series name
@@ -122,7 +147,7 @@ function ChartTooltipContent({
nameKey && item.payload
? (item.payload as Record)[nameKey]
: undefined;
- const key = `${payloadName ?? item.name ?? item.dataKey ?? "value"}`;
+ const key = `${payloadName ?? item.value ?? item.dataKey ?? "value"}`;
const itemConfig = getPayloadConfigFromPayload(config, item, key);
// Get colors count for this item to determine gradient vs solid
@@ -135,10 +160,10 @@ function ChartTooltipContent({
indicator === "dot" && "items-center",
selected != null && selected !== item.dataKey && "opacity-30"
)}
- key={index}
+ key={key}
>
{formatter && item?.value !== undefined && item.name ? (
- formatter(item.value, item.name, item, index, item.payload)
+ formatter(item.value, item.name, item, currentVisibleIndex, item.payload)
) : (
<>
{itemConfig?.icon ? (
@@ -181,7 +206,8 @@ function ChartTooltipContent({
)}
);
- })}
+ });
+ })()}
);
diff --git a/src/components/layout/portal-shell.tsx b/src/components/layout/portal-shell.tsx
index e8d439d..8d65cec 100644
--- a/src/components/layout/portal-shell.tsx
+++ b/src/components/layout/portal-shell.tsx
@@ -42,7 +42,12 @@ import { authClient } from "@/lib/auth-client";
const logoUrl = "/logo.webp";
const portalNav = [
- { href: "/portal", label: "Overview", icon: DashboardSquare01Icon, exact: true },
+ {
+ href: "/portal",
+ label: "Overview",
+ icon: DashboardSquare01Icon,
+ exact: true,
+ },
{ href: "/portal/projects", label: "Projects", icon: Briefcase01Icon },
{ href: "/portal/files", label: "Files", icon: File01Icon },
{ href: "/portal/activity", label: "Activity", icon: Activity01Icon },
@@ -68,7 +73,9 @@ function PortalNavUser() {
}
};
- if (!user) return null;
+ if (!user) {
+ return null;
+ }
return (
@@ -125,11 +132,11 @@ function PortalSidebarNav() {
width={32}
/>
{showText && (
-
+
Clientra
-
+
Client Portal
@@ -145,9 +152,11 @@ function PortalSidebarNav() {
{portalNav.map((item) => (
{({ isActive }) => (
{/* Discussion Column */}
-
-
-
-
- Project Discussion
-
-
- Share updates, ask questions, or leave feedback.
-
-
+
onAddOpenChange(true)}
@@ -237,8 +230,11 @@ export function ProjectCollaborationView({
>
Post Comment
-
-
- Activity Timeline
-
-
- Chronological feed of project events.
-
-