fix(ui): surface store item catalog in manage stores

frontend/src/components/manage/ManageStores.jsx

@@ -91,6 +91,14 @@ export default function ManageStores() {
       {/* Current Stores Section */}
       <section className="manage-section">
         <h2>Your Stores ({householdStores.length})</h2>
+        <p className="manage-stores-help">
+          Available item management lives inside each store card below.
+        </p>
+        {!isAdmin && (
+          <p className="manage-stores-note">
+            Only household owners and admins can manage store item catalogs.
+          </p>
+        )}
         {householdStores.length === 0 ? (
           <p className="empty-message">No stores added yet.</p>
         ) : (

frontend/src/components/manage/StoreAvailableItemsManager.jsx

@@ -21,7 +21,7 @@ function itemImageSource(item) {
 
 export default function StoreAvailableItemsManager({ householdId, store, isAdmin }) {
   const toast = useActionToast();
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(true);
   const [items, setItems] = useState([]);
   const [query, setQuery] = useState("");
   const [loading, setLoading] = useState(false);
@@ -123,15 +123,15 @@ export default function StoreAvailableItemsManager({ householdId, store, isAdmin
     <div className="store-available-items">
       <div className="store-available-items-header">
         <div>
-          <h4>Available Items</h4>
+          <h4>Store Item Catalog</h4>
-          <p>Curate what members see for {store.name}.</p>
+          <p>Manage the available item list for {store.name}.</p>
         </div>
         <button
           type="button"
           className="btn-secondary btn-small"
           onClick={() => setExpanded((value) => !value)}
         >
-          {expanded ? "Hide" : "Manage"}
+          {expanded ? "Hide Items" : "Manage Items"}
         </button>
       </div>
 

frontend/src/styles/components/manage/ManageStores.css

@@ -25,6 +25,20 @@
   margin-bottom: 1rem;
 }
 
+.manage-stores-help {
+  margin: -0.25rem 0 1rem;
+  color: var(--text-secondary);
+}
+
+.manage-stores-note {
+  margin: -0.25rem 0 1rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--background);
+  color: var(--text-secondary);
+}
+
 /* Stores List */
 .stores-list {
   display: grid;

frontend/tests/available-items-catalog.spec.ts

@@ -154,7 +154,7 @@ test("manage stores lets admins import and curate available items", async ({ pag
 
   const storeCard = page.locator(".store-card").filter({ hasText: "Costco" });
   await expect(storeCard).toBeVisible();
-  await storeCard.getByRole("button", { name: "Manage" }).click();
+  await expect(storeCard.getByText("Store Item Catalog")).toBeVisible();
 
   await expect(storeCard.getByText("milk")).toBeVisible();