From 3e29ca0529f759ab9bc507f14e067f1c31efc17a Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Thu, 10 Sep 2026 03:09:39 -0400
Subject: [PATCH] feat: extract product identity workflow step

---
 .../molecules/ProductIdentityStep.scss        |  9 ++++
 .../molecules/ProductIdentityStep.stories.js  | 22 +++++++++
 .../molecules/ProductIdentityStep.vue         | 48 +++++++++++++++++++
 apps/web/src/pages/AdminHomePage.vue          | 43 ++++-------------
 docs/IMPLEMENTATION-STATUS.md                 |  1 +
 5 files changed, 90 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/components/molecules/ProductIdentityStep.scss
 create mode 100644 apps/web/src/components/molecules/ProductIdentityStep.stories.js
 create mode 100644 apps/web/src/components/molecules/ProductIdentityStep.vue

diff --git a/apps/web/src/components/molecules/ProductIdentityStep.scss b/apps/web/src/components/molecules/ProductIdentityStep.scss
new file mode 100644
index 0000000..c97e83c
--- /dev/null
+++ b/apps/web/src/components/molecules/ProductIdentityStep.scss
@@ -0,0 +1,9 @@
+.product-identity-step {
+  align-content: start;
+}
+
+.product-identity-step__intro {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
diff --git a/apps/web/src/components/molecules/ProductIdentityStep.stories.js b/apps/web/src/components/molecules/ProductIdentityStep.stories.js
new file mode 100644
index 0000000..c33a572
--- /dev/null
+++ b/apps/web/src/components/molecules/ProductIdentityStep.stories.js
@@ -0,0 +1,22 @@
+import ProductIdentityStep from './ProductIdentityStep.vue';
+
+export default { title: 'Molecules/ProductIdentityStep', component: ProductIdentityStep };
+
+export const Empty = {
+  args: {
+    productName: '',
+    categoryId: '',
+    categories: [
+      { id: 'cards', name: 'Trading cards' },
+      { id: 'merchandise', name: 'Merchandise' },
+    ],
+  },
+};
+
+export const Filled = {
+  args: {
+    productName: 'Charizard ex #199/165',
+    categoryId: 'cards',
+    categories: [{ id: 'cards', name: 'Trading cards' }],
+  },
+};
diff --git a/apps/web/src/components/molecules/ProductIdentityStep.vue b/apps/web/src/components/molecules/ProductIdentityStep.vue
new file mode 100644
index 0000000..a4160d4
--- /dev/null
+++ b/apps/web/src/components/molecules/ProductIdentityStep.vue
@@ -0,0 +1,48 @@
+<script setup>
+defineProps({
+  productName: { type: String, required: true },
+  categoryId: { type: String, required: true },
+  categories: { type: Array, required: true },
+  isSaving: { type: Boolean, default: false },
+});
+
+defineEmits(['update:productName', 'update:categoryId', 'submit']);
+</script>
+
+<template>
+  <form id="workflow-product" class="showcase-panel product-identity-step" @submit.prevent="$emit('submit')">
+    <div>
+      <p class="catalog-kicker">Step 1</p>
+      <h2>Identify the Product</h2>
+      <p class="product-identity-step__intro">Create the shared product record before adding a physical copy.</p>
+    </div>
+    <label class="fixture-label" for="product-name">Name</label>
+    <input
+      id="product-name"
+      :value="productName"
+      class="fixture-input"
+      required
+      @input="$emit('update:productName', $event.target.value)"
+    />
+    <label class="fixture-label" for="product-category">Category</label>
+    <select
+      id="product-category"
+      :value="categoryId"
+      class="fixture-input"
+      required
+      @change="$emit('update:categoryId', $event.target.value)"
+    >
+      <option value="" disabled>Select a category</option>
+      <option v-for="category in categories" :key="category.id" :value="category.id">
+        {{ category.name }}
+      </option>
+    </select>
+    <button class="button button--primary" type="submit" :disabled="isSaving">
+      Create product
+    </button>
+  </form>
+</template>
+
+<style scoped lang="scss">
+@use './ProductIdentityStep.scss';
+</style>
diff --git a/apps/web/src/pages/AdminHomePage.vue b/apps/web/src/pages/AdminHomePage.vue
index e33cdef..70ee587 100644
--- a/apps/web/src/pages/AdminHomePage.vue
+++ b/apps/web/src/pages/AdminHomePage.vue
@@ -5,6 +5,7 @@ import { RouterLink } from "vue-router";
 import { useAuth } from "@/composables/useAuth.js";
 import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
 import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue";
+import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
 import {
   createAdminInventory,
   createAdminProduct,
@@ -675,39 +676,15 @@ onMounted(load);
     <InventoryWorkflowStepper :steps="workflowSteps" />
 
     <div class="admin-workspace-grid">
-      <form id="workflow-product" class="showcase-panel" @submit.prevent="createProduct">
-        <h2>Add product</h2>
-        <label class="fixture-label" for="product-name">Name</label>
-        <input
-          id="product-name"
-          v-model="productName"
-          class="fixture-input"
-          required
-        />
-        <label class="fixture-label" for="product-category">Category</label>
-        <select
-          id="product-category"
-          v-model="categoryId"
-          class="fixture-input"
-          required
-        >
-          <option value="" disabled>Select a category</option>
-          <option
-            v-for="category in categories"
-            :key="category.id"
-            :value="category.id"
-          >
-            {{ category.name }}
-          </option>
-        </select>
-        <button
-          class="button button--primary"
-          type="submit"
-          :disabled="isSaving"
-        >
-          Create product
-        </button>
-      </form>
+      <ProductIdentityStep
+        :product-name="productName"
+        :category-id="categoryId"
+        :categories="categories"
+        :is-saving="isSaving"
+        @update:product-name="productName = $event"
+        @update:category-id="categoryId = $event"
+        @submit="createProduct"
+      />
       <form id="workflow-mapping" class="showcase-panel" @submit.prevent="createProviderMapping">
         <h2>Link provider mapping</h2>
         <label class="fixture-label" for="mapping-product">Product</label>
diff --git a/docs/IMPLEMENTATION-STATUS.md b/docs/IMPLEMENTATION-STATUS.md
index 97eb32a..5f441c6 100644
--- a/docs/IMPLEMENTATION-STATUS.md
+++ b/docs/IMPLEMENTATION-STATUS.md
@@ -167,6 +167,7 @@ Remaining roadmap areas are approved external provider credentials/adapters, bro
 - Public catalog filtering now supports URL-synchronized set, event, and tag text filters through a reusable atomic text-filter control and the shared search API.
 - Public catalog filtering now supports explicit Available, Pending, Sold, and All status modes plus a 30-day Newly added toggle through the shared search API and atomic controls.
 - The admin workspace now includes a responsive guided inventory workflow stepper linking Product, Sources, Copy, Images, Pricing, and List stages, with progress derived from loaded admin state.
+- Product identification is now an extracted `ProductIdentityStep` molecule with empty/filled Storybook states, while preserving the existing create-product API workflow.
 - Public catalog sorting now supports latest manual/calculated market value low-to-high and high-to-low, with null values placed last.
 - Public catalog filters now collapse behind an accessible mobile disclosure, show an active-filter count, and provide a reset action while preserving URL synchronization.