Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(web): remove unnecessary "use client" from 6 pure-render components

Browse Source 
BenchResourceCard, MobileProjectCard, MobileCapacityCard, DynamicFieldRenderer,
BudgetStatusBar, and TimelineHeader use no hooks, event handlers, or browser APIs —
they can be server components, reducing client bundle size.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-11 23:36:34 +02:00
parent e08ee94546
commit 8f7c69056f
6 changed files with 122 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/timeline/TimelineHeader.tsx
+29 -14
View File
@@ -1,5 +1,3 @@
"use client";
import { clsx } from "clsx";
import { MONTHS_SHORT } from "./timelineConstants.js";
@@ -33,7 +31,10 @@ export function TimelineHeader({
className="sticky top-0 z-40 flex bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800"
style={{ height: HEADER_MONTH_HEIGHT }}
>
<div className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700" style={{ width: LABEL_WIDTH }} />
<div
className="flex-shrink-0 border-r border-gray-200 dark:border-gray-700"
style={{ width: LABEL_WIDTH }}
/>
<div className="flex">
{monthGroups.map((m, i) => (
<div
@@ -72,27 +73,41 @@ export function TimelineHeader({
key={i}
className={clsx(
"flex-shrink-0 border-r flex flex-col items-center justify-center text-xs overflow-hidden",
isToday ? "bg-brand-50 dark:bg-brand-950/40 border-brand-200 dark:border-brand-800" :
isWeekend ? "bg-brand-50/60 dark:bg-brand-950/30 border-brand-200 dark:border-brand-800" :
isMonday ? "border-gray-200 dark:border-gray-700" : "border-gray-100 dark:border-gray-800",
isToday
? "bg-brand-50 dark:bg-brand-950/40 border-brand-200 dark:border-brand-800"
: isWeekend
? "bg-brand-50/60 dark:bg-brand-950/30 border-brand-200 dark:border-brand-800"
: isMonday
? "border-gray-200 dark:border-gray-700"
: "border-gray-100 dark:border-gray-800",
)}
style={{ width: CELL_WIDTH, height: HEADER_DAY_HEIGHT }}
>
{showLabel && (
<>
<span className={clsx(
"font-medium leading-none",
isToday ? "text-brand-600" : isWeekend ? "text-brand-600 dark:text-brand-400" : "text-gray-600 dark:text-gray-300",
)}>
<span
className={clsx(
"font-medium leading-none",
isToday
? "text-brand-600"
: isWeekend
? "text-brand-600 dark:text-brand-400"
: "text-gray-600 dark:text-gray-300",
)}
>
{zoom === "week"
? `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`
: date.getDate()}
</span>
{zoom === "day" && (
<span className={clsx(
"text-[9px] leading-none mt-0.5",
isWeekend ? "text-brand-400 dark:text-brand-500" : "text-gray-300 dark:text-gray-600",
)}>
<span
className={clsx(
"text-[9px] leading-none mt-0.5",
isWeekend
? "text-brand-400 dark:text-brand-500"
: "text-gray-300 dark:text-gray-600",
)}
>
{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dow]}
</span>
)}