From 56b81ee8ab90b4e61a9a8087548587207bd6fca6 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Mon, 6 Apr 2026 19:17:05 +0200
Subject: [PATCH] =?UTF-8?q?fix(23):=20resolve=20UAT=20issues=20=E2=80=94?=
 =?UTF-8?q?=20duplicate=20header,=20image=20position,=20catalog=20submit?=
 =?UTF-8?q?=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate back arrow/header from ManualEntryForm (overlay already shows it)
- Move ImageUpload to top of ManualEntryForm for visual cohesion
- Change "Submit to Catalog?" from text link to checkbox-style toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/CatalogSearchOverlay.tsx       | 47 +++++++++++++++----
 src/client/components/ManualEntryForm.tsx     | 34 ++++----------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/src/client/components/CatalogSearchOverlay.tsx b/src/client/components/CatalogSearchOverlay.tsx
index d3fc01d..678e651 100644
--- a/src/client/components/CatalogSearchOverlay.tsx
+++ b/src/client/components/CatalogSearchOverlay.tsx
@@ -23,6 +23,7 @@ export function CatalogSearchOverlay() {
 	const [viewMode, setViewMode] = useState<ViewMode>("grid");
 	const [manualEntryMode, setManualEntryMode] = useState(false);
 	const [savedItemName, setSavedItemName] = useState<string | null>(null);
+	const [catalogSubmitted, setCatalogSubmitted] = useState(false);
 
 	// Range filters (client-side)
 	const [weightMin, setWeightMin] = useState(0);
@@ -89,6 +90,7 @@ export function CatalogSearchOverlay() {
 			setPriceMax(100000);
 			setManualEntryMode(false);
 			setSavedItemName(null);
+			setCatalogSubmitted(false);
 		}
 	}, [catalogSearchOpen]);
 
@@ -115,6 +117,7 @@ export function CatalogSearchOverlay() {
 	function handleAddAnother() {
 		setManualEntryMode(false);
 		setSavedItemName(null);
+		setCatalogSubmitted(false);
 	}
 
 	const navigate = useNavigate();
@@ -162,6 +165,7 @@ export function CatalogSearchOverlay() {
 											? () => {
 													setManualEntryMode(false);
 													setSavedItemName(null);
+													setCatalogSubmitted(false);
 												}
 											: closeCatalogSearch
 									}
@@ -472,14 +476,43 @@ export function CatalogSearchOverlay() {
 									</p>
 									<button
 										type="button"
-										onClick={() =>
+										onClick={() => {
+											setCatalogSubmitted(true);
 											toast(
 												"Coming soon — catalog submissions are on the roadmap!",
-											)
-										}
-										className="mt-3 text-sm text-blue-600 hover:text-blue-800 underline underline-offset-2"
+											);
+										}}
+										disabled={catalogSubmitted}
+										className={`mt-3 inline-flex items-center gap-2 text-sm px-3 py-1.5 rounded-full border transition-colors ${
+											catalogSubmitted
+												? "border-green-300 bg-green-50 text-green-700 cursor-default"
+												: "border-gray-300 text-gray-600 hover:border-blue-300 hover:text-blue-600 hover:bg-blue-50"
+										}`}
 									>
-										Submit to Catalog?
+										<span
+											className={`inline-flex items-center justify-center w-4 h-4 rounded border transition-colors ${
+												catalogSubmitted
+													? "border-green-500 bg-green-500"
+													: "border-gray-300"
+											}`}
+										>
+											{catalogSubmitted && (
+												<svg
+													className="w-3 h-3 text-white"
+													fill="none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														strokeWidth={3}
+														d="M5 13l4 4L19 7"
+													/>
+												</svg>
+											)}
+										</span>
+										Submit to Catalog
 									</button>
 									<div className="flex gap-4 mt-6">
 										<button
@@ -503,10 +536,6 @@ export function CatalogSearchOverlay() {
 								<ManualEntryForm
 									initialName={searchInput}
 									onSuccess={handleManualSuccess}
-									onBack={() => {
-										setManualEntryMode(false);
-										setSavedItemName(null);
-									}}
 								/>
 							) : (
 								/* Normal catalog results */
diff --git a/src/client/components/ManualEntryForm.tsx b/src/client/components/ManualEntryForm.tsx
index 3f12328..18d3257 100644
--- a/src/client/components/ManualEntryForm.tsx
+++ b/src/client/components/ManualEntryForm.tsx
@@ -1,4 +1,3 @@
-import { ArrowLeft } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useCategories } from "../hooks/useCategories";
 import { useCreateItem } from "../hooks/useItems";
@@ -8,13 +7,11 @@ import { ImageUpload } from "./ImageUpload";
 interface ManualEntryFormProps {
 	initialName?: string;
 	onSuccess: (itemName: string) => void;
-	onBack: () => void;
 }
 
 export function ManualEntryForm({
 	initialName,
 	onSuccess,
-	onBack,
 }: ManualEntryFormProps) {
 	const { data: categories } = useCategories();
 	const createItem = useCreateItem();
@@ -78,19 +75,15 @@ export function ManualEntryForm({
 
 	return (
 		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-			{/* Back arrow row */}
-			<div className="flex items-center gap-1.5 mb-4">
-				<button
-					type="button"
-					onClick={onBack}
-					className="p-0.5 text-gray-400 hover:text-gray-600 transition-colors"
-				>
-					<ArrowLeft className="w-4 h-4" />
-				</button>
-				<p className="text-xs font-medium text-gray-400">Add Manually</p>
-			</div>
-
 			<form onSubmit={handleSubmit} className="space-y-4">
+				{/* Image upload — hero position */}
+				<div>
+					<ImageUpload
+						value={imageFilename}
+						onChange={(filename) => setImageFilename(filename)}
+					/>
+				</div>
+
 				{/* Name */}
 				<div>
 					<label
@@ -217,17 +210,6 @@ export function ManualEntryForm({
 					/>
 				</div>
 
-				{/* Image upload */}
-				<div>
-					<label className="block text-sm font-medium text-gray-700 mb-1">
-						Image
-					</label>
-					<ImageUpload
-						value={imageFilename}
-						onChange={(filename) => setImageFilename(filename)}
-					/>
-				</div>
-
 				{/* Error */}
 				{error && <p className="text-sm text-red-600">{error}</p>}