Skip to content

Commit a85f358

Browse files
leopu00leopu00
committed
merge: dev4 → master — case-studies: profili tradotti in 7 lingue (profiles-i18n) + menu laterale full-height + card tester uniformi + snapshot beta-1 30/06 (641 pos) + fix linee budget SVG
# Conflicts: # web/lib/case-studies.ts
2 parents b74084f + 7e4ee43 commit a85f358

9 files changed

Lines changed: 1638 additions & 520 deletions

File tree

‎web/app/case-studies/CaseStudiesShell.tsx‎

Lines changed: 104 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -109,127 +109,119 @@ export default function CaseStudiesShell({
109109
const t = T[useLocale()];
110110

111111
return (
112-
<div className="flex gap-8 items-start">
112+
<div className="flex items-stretch">
113+
{/* ── Menu laterale: pannello a tutta altezza agganciato al bordo
114+
sinistro (desktop). Su mobile è nascosto: le stesse run sono già
115+
elencate come card nel contenuto principale. ──────────────────── */}
113116
{!collapsed && (
114-
<aside className="w-[260px] shrink-0 sticky top-20">
115-
<div className="mb-4 h-8 flex items-center justify-between">
116-
<span className="text-[10px] font-semibold tracking-[0.16em] uppercase text-[var(--color-dim)]">
117-
{t.tester}
118-
</span>
119-
<button
120-
type="button"
121-
onClick={() => setCollapsed(true)}
122-
title={t.collapse}
123-
aria-label={t.collapseAria}
124-
className="h-7 w-7 inline-flex items-center justify-center text-[13px] rounded-md border cursor-pointer transition-colors text-[var(--color-dim)] hover:text-[var(--color-white)]"
125-
style={{
126-
borderColor: "var(--color-border)",
127-
background: "var(--color-card)",
128-
}}
129-
>
130-
⟨
131-
</button>
132-
</div>
133-
134-
<nav className="space-y-2">
135-
{testers.map((t) => (
136-
<Link
137-
key={t.id}
138-
href={`/case-studies/${t.id}`}
139-
className="group block rounded-xl border border-[var(--color-border)] bg-[var(--color-card)] p-3.5 no-underline transition-colors hover:border-[var(--color-blue)]"
117+
<aside
118+
className="hidden lg:block w-[320px] shrink-0 self-stretch border-r border-[var(--color-border)]"
119+
style={{
120+
background:
121+
"color-mix(in srgb, var(--color-card) 45%, transparent)",
122+
}}
123+
>
124+
<div className="sticky top-14 px-5 py-10">
125+
<div className="mb-4 h-8 flex items-center justify-between">
126+
<span className="text-[10px] font-semibold tracking-[0.16em] uppercase text-[var(--color-dim)]">
127+
{t.tester}
128+
</span>
129+
<button
130+
type="button"
131+
onClick={() => setCollapsed(true)}
132+
title={t.collapse}
133+
aria-label={t.collapseAria}
134+
className="h-7 w-7 inline-flex items-center justify-center text-[13px] rounded-md border cursor-pointer transition-colors text-[var(--color-dim)] hover:text-[var(--color-white)]"
135+
style={{
136+
borderColor: "var(--color-border)",
137+
background: "var(--color-card)",
138+
}}
140139
>
141-
<div className="flex items-center gap-2.5">
142-
<span
143-
className="inline-flex items-center justify-center w-8 h-8 rounded-lg text-[11px] font-extrabold shrink-0"
144-
style={{
145-
background:
146-
"color-mix(in srgb, var(--color-blue) 18%, transparent)",
147-
color: "var(--color-blue)",
148-
}}
149-
>
150-
{t.badge}
151-
</span>
152-
<div className="min-w-0">
153-
<div className="text-[13px] font-bold text-[var(--color-white)] truncate">
154-
{t.category}
140+
⟨
141+
</button>
142+
</div>
143+
144+
<nav className="grid grid-cols-1 auto-rows-fr gap-2.5">
145+
{testers.map((t) => (
146+
<Link
147+
key={t.id}
148+
href={`/case-studies/${t.id}`}
149+
className="group flex h-full flex-col rounded-xl border border-[var(--color-border)] bg-[var(--color-card)] px-3.5 py-3 no-underline transition-colors hover:border-[var(--color-blue)]"
150+
>
151+
<div className="min-w-0 flex-1">
152+
<div className="flex items-center gap-2">
153+
<span className="text-[13px] font-bold text-[var(--color-white)] truncate">
154+
{t.category}
155+
</span>
156+
<span className="ml-auto text-[var(--color-dim)] group-hover:text-[var(--color-blue)] transition-colors">
157+
→
158+
</span>
155159
</div>
156-
<div className="text-[10px] text-[var(--color-dim)] truncate">
157-
{t.label}
160+
161+
<div className="mt-1.5 flex items-center gap-1 flex-wrap">
162+
<span
163+
className="text-[9px] rounded-full px-1.5 py-0.5 border text-[var(--color-base)]"
164+
style={{
165+
borderColor:
166+
"color-mix(in srgb, var(--color-blue) 35%, transparent)",
167+
background:
168+
"color-mix(in srgb, var(--color-blue) 10%, transparent)",
169+
}}
170+
>
171+
{t.seniority}
172+
</span>
173+
{t.geos.map((g) => (
174+
<span
175+
key={g}
176+
className="text-[9px] rounded-full px-1.5 py-0.5 border border-[var(--color-border)] text-[var(--color-muted)]"
177+
>
178+
{g}
179+
</span>
180+
))}
181+
<span
182+
className="text-[9px] font-semibold rounded-full px-1.5 py-0.5"
183+
style={{
184+
background:
185+
"color-mix(in srgb, #00e676 14%, transparent)",
186+
color: "#00e676",
187+
}}
188+
>
189+
{t.model}
190+
</span>
158191
</div>
159192
</div>
160-
<span className="ml-auto text-[var(--color-dim)] group-hover:text-[var(--color-blue)] transition-colors">
161-
→
162-
</span>
163-
</div>
164-
165-
<div className="mt-3">
166-
<span
167-
className="text-[10px] rounded-full px-2 py-0.5 border text-[var(--color-base)]"
168-
style={{
169-
borderColor:
170-
"color-mix(in srgb, var(--color-blue) 35%, transparent)",
171-
background:
172-
"color-mix(in srgb, var(--color-blue) 10%, transparent)",
173-
}}
174-
>
175-
{t.seniority}
176-
</span>
177-
</div>
178-
179-
<div className="mt-2 flex items-center gap-1.5 flex-wrap">
180-
<span aria-hidden className="text-[10px]">
181-
📍
182-
</span>
183-
{t.geos.map((g) => (
184-
<span
185-
key={g}
186-
className="text-[10px] rounded-full px-2 py-0.5 border border-[var(--color-border)] text-[var(--color-muted)]"
187-
>
188-
{g}
189-
</span>
190-
))}
191-
</div>
192-
193-
<div className="mt-2 flex items-center gap-1.5">
194-
<span className="text-[9px] uppercase tracking-wide text-[var(--color-dim)]">
195-
{t.model}
196-
</span>
197-
<span
198-
className="text-[10px] font-semibold rounded-md px-2 py-0.5"
199-
style={{
200-
background:
201-
"color-mix(in srgb, #00e676 14%, transparent)",
202-
color: "#00e676",
203-
}}
204-
>
205-
{t.model}
206-
</span>
207-
</div>
208-
</Link>
209-
))}
210-
</nav>
193+
</Link>
194+
))}
195+
</nav>
196+
</div>
211197
</aside>
212198
)}
213199

214200
<div className="flex-1 min-w-0">
215-
{collapsed && (
216-
<button
217-
type="button"
218-
onClick={() => setCollapsed(false)}
219-
title={t.show}
220-
aria-label={t.showAria}
221-
className="mb-6 h-8 px-3 inline-flex items-center gap-2 text-[10px] font-semibold tracking-[0.14em] uppercase rounded-lg border cursor-pointer transition-colors"
222-
style={{
223-
borderColor: "var(--color-border)",
224-
color: "var(--color-base)",
225-
background: "var(--color-card)",
226-
}}
227-
>
228-
<span aria-hidden>☰</span>
229-
{t.tester}
230-
</button>
231-
)}
232-
{children}
201+
<div
202+
className={`px-6 sm:px-10 py-12 ${
203+
collapsed ? "mx-auto max-w-6xl" : "mx-auto lg:mx-0 max-w-5xl"
204+
}`}
205+
>
206+
{collapsed && (
207+
<button
208+
type="button"
209+
onClick={() => setCollapsed(false)}
210+
title={t.show}
211+
aria-label={t.showAria}
212+
className="mb-6 h-8 px-3 hidden lg:inline-flex items-center gap-2 text-[10px] font-semibold tracking-[0.14em] uppercase rounded-lg border cursor-pointer transition-colors"
213+
style={{
214+
borderColor: "var(--color-border)",
215+
color: "var(--color-base)",
216+
background: "var(--color-card)",
217+
}}
218+
>
219+
<span aria-hidden>☰</span>
220+
{t.tester}
221+
</button>
222+
)}
223+
{children}
224+
</div>
233225
</div>
234226
</div>
235227
);

‎web/app/case-studies/IntradayBudgetChart.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,15 @@ import { useEffect, useRef, useState } from "react";
1414
import type { TeamActivityRole } from "@/lib/team-activity";
1515
import { ROLE_META } from "@/lib/team-activity-meta";
1616
import { useLocale } from "@/lib/use-locale";
17+
import { useTheme } from "@/app/theme-provider";
1718
import type { Locale } from "@/i18n/config";
1819

20+
// Colore "linea/asse budget AI": LITERAL hex applicato direttamente agli
21+
// attributi SVG / style inline — MAI via classe CSS o var(), che la build
22+
// (Tailwind v4 / Lightning) prunava facendo sparire la linea. Vedi nota gemella
23+
// in WorkBudgetChart.tsx. ⚠️ NON spostare nel CSS.
24+
const BUDGET_LINE = { dark: "#ffd600", light: "#a16207" } as const;
25+
1926
const T: Record<
2027
Locale,
2128
{
@@ -95,6 +102,8 @@ export default function IntradayBudgetChart({
95102
}) {
96103
const locale = useLocale();
97104
const t = T[locale];
105+
const { resolvedTheme } = useTheme();
106+
const budgetColor = BUDGET_LINE[resolvedTheme] ?? BUDGET_LINE.dark;
98107
const wrapRef = useRef<HTMLDivElement>(null);
99108
const [w, setW] = useState(0);
100109
const [hover, setHover] = useState<number | null>(null);
@@ -195,7 +204,7 @@ export default function IntradayBudgetChart({
195204
{rightTicks.map((tk) => (
196205
<text
197206
key={`r${tk}`}
198-
className="cs-budget-fill"
207+
fill={budgetColor}
199208
x={padL + plotW + 5}
200209
y={yR(tk) + 3}
201210
textAnchor="start"
@@ -264,7 +273,7 @@ export default function IntradayBudgetChart({
264273

265274
{/* linea: budget cumulato (asse dx) */}
266275
<polyline
267-
className="cs-budget-stroke"
276+
stroke={budgetColor}
268277
points={cumLine}
269278
fill="none"
270279
strokeWidth={2}
@@ -329,7 +338,10 @@ export default function IntradayBudgetChart({
329338
</div>
330339
))}
331340
<div className="mt-1 pt-1 border-t border-[var(--color-border)] flex items-center gap-1.5">
332-
<span className="cs-budget-bg inline-block w-2 h-2 rounded-sm" />
341+
<span
342+
className="inline-block w-2 h-2 rounded-sm"
343+
style={{ backgroundColor: budgetColor }}
344+
/>
333345
<span className="text-[var(--color-muted)]">
334346
{t.budgetCum(Math.round(hd.cum))}
335347
</span>
@@ -357,7 +369,10 @@ export default function IntradayBudgetChart({
357369
{t.legendBudget}
358370
</span>
359371
<span className="flex items-center gap-1.5">
360-
<span className="cs-budget-bg inline-block w-4 h-0.5" />
372+
<span
373+
className="inline-block w-4 h-0.5"
374+
style={{ backgroundColor: budgetColor }}
375+
/>
361376
<span className="text-[10px] text-[var(--color-muted)]">
362377
{t.cumWeek}
363378
</span>

0 commit comments

Comments
 (0)