From 62916a8397bbeefc432760b0adbf303ae9fa36dd Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Sun, 12 Apr 2026 22:37:19 +0200
Subject: [PATCH] fix(F-08): stronger selected state on hobby picker cards +
 biome formatting

Selected hobby cards now use dark gray fill with inverted white
text/icon for clear visual distinction. Also fixes biome formatting
across all changed files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/GearImage.tsx           |  9 +++++++--
 src/client/components/ProfileSection.tsx      | 15 +++++++++++---
 .../components/onboarding/HobbyCard.tsx       | 20 +++++++++++++++----
 src/client/routes/items/$itemId.tsx           |  8 +++++++-
 4 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/client/components/GearImage.tsx b/src/client/components/GearImage.tsx
index a70a879..d417c04 100644
--- a/src/client/components/GearImage.tsx
+++ b/src/client/components/GearImage.tsx
@@ -20,7 +20,9 @@ export function GearImage({
 	cover = false,
 }: GearImageProps) {
 	const hasCrop = cropZoom != null && cropZoom > 1;
-	const bgStyle = dominantColor ? { backgroundColor: dominantColor } : undefined;
+	const bgStyle = dominantColor
+		? { backgroundColor: dominantColor }
+		: undefined;
 
 	if (cover) {
 		return (
@@ -49,7 +51,10 @@ export function GearImage({
 	}
 
 	return (
-		<div className="w-full h-full flex items-center justify-center" style={bgStyle}>
+		<div
+			className="w-full h-full flex items-center justify-center"
+			style={bgStyle}
+		>
 			<img
 				src={src}
 				alt={alt}
diff --git a/src/client/components/ProfileSection.tsx b/src/client/components/ProfileSection.tsx
index 466ac3b..98e4191 100644
--- a/src/client/components/ProfileSection.tsx
+++ b/src/client/components/ProfileSection.tsx
@@ -148,7 +148,10 @@ export function ProfileSection() {
 					{avatarUrl && (
 						<button
 							type="button"
-							onClick={() => { setAvatarUrl(null); setDirty(true); }}
+							onClick={() => {
+								setAvatarUrl(null);
+								setDirty(true);
+							}}
 							className="block text-xs text-red-500 hover:text-red-700 mt-0.5"
 						>
 							Remove
@@ -176,7 +179,10 @@ export function ProfileSection() {
 					id="displayName"
 					type="text"
 					value={displayName}
-					onChange={(e) => { setDisplayName(e.target.value); setDirty(true); }}
+					onChange={(e) => {
+						setDisplayName(e.target.value);
+						setDirty(true);
+					}}
 					maxLength={100}
 					placeholder="Your display name"
 					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
@@ -194,7 +200,10 @@ export function ProfileSection() {
 				<textarea
 					id="bio"
 					value={bio}
-					onChange={(e) => { setBio(e.target.value); setDirty(true); }}
+					onChange={(e) => {
+						setBio(e.target.value);
+						setDirty(true);
+					}}
 					maxLength={500}
 					rows={3}
 					placeholder="Tell others about yourself and your gear interests"
diff --git a/src/client/components/onboarding/HobbyCard.tsx b/src/client/components/onboarding/HobbyCard.tsx
index 0dbd4fb..1fd0e3a 100644
--- a/src/client/components/onboarding/HobbyCard.tsx
+++ b/src/client/components/onboarding/HobbyCard.tsx
@@ -21,14 +21,26 @@ export function HobbyCard({
 			onClick={onClick}
 			className={`w-40 h-40 flex flex-col items-center justify-center gap-3 p-5 rounded-2xl cursor-pointer transition-all ${
 				selected
-					? "border-gray-700 ring-2 ring-gray-700/20 bg-white border"
+					? "bg-gray-800 border border-gray-800 ring-2 ring-gray-700/20"
 					: "bg-gray-50 border border-gray-200 hover:border-gray-300 hover:shadow-sm"
 			}`}
 		>
-			<LucideIcon name={icon} size={32} className="text-gray-700" />
+			<LucideIcon
+				name={icon}
+				size={32}
+				className={selected ? "text-white" : "text-gray-700"}
+			/>
 			<div className="text-center">
-				<div className="text-sm font-semibold text-gray-900">{name}</div>
-				<div className="text-xs text-gray-400">{descriptor}</div>
+				<div
+					className={`text-sm font-semibold ${selected ? "text-white" : "text-gray-900"}`}
+				>
+					{name}
+				</div>
+				<div
+					className={`text-xs ${selected ? "text-gray-300" : "text-gray-400"}`}
+				>
+					{descriptor}
+				</div>
 			</div>
 		</button>
 	);
diff --git a/src/client/routes/items/$itemId.tsx b/src/client/routes/items/$itemId.tsx
index f60b243..a633e15 100644
--- a/src/client/routes/items/$itemId.tsx
+++ b/src/client/routes/items/$itemId.tsx
@@ -344,7 +344,13 @@ function ItemDetail() {
 							className="mb-4 w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
 							title="Adjust framing"
 						>
-							<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+							<svg
+								className="w-4 h-4"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								strokeWidth={2}
+							>
 								<path d="M6.13 1L6 16a2 2 0 0 0 2 2h15" />
 								<path d="M1 6.13L16 6a2 2 0 0 1 2 2v15" />
 							</svg>