astro-tractstack 2.3.0 → 2.3.2

package/templates/src/components/storykeep/controls/content/MenuTable.tsx

@@ -183,7 +183,7 @@ export default function MenuTable({
       </div>
 
       {/* Table Container */}
-      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
+      <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow">
         {filteredMenus.length === 0 ? (
           <div className="px-6 py-12 text-center">
             <svg
@@ -217,7 +217,7 @@ export default function MenuTable({
             )}
           </div>
         ) : (
-          <div className="overflow-hidden">
+          <div className="inline-block min-w-full align-middle">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
@@ -247,15 +247,24 @@ export default function MenuTable({
                     <tr key={menu.id} className="hover:bg-gray-50">
                       <td className="px-3 py-4 md:px-6">
                         <div className="flex flex-col">
-                          <div className="text-sm font-bold text-gray-900">
+                          <div
+                            className="max-w-xs truncate text-sm font-bold text-gray-900"
+                            title={menu.title}
+                          >
                             {menu.title}
                           </div>
-                          <div className="text-sm text-gray-500 md:hidden">
+                          <div
+                            className="max-w-xs truncate text-sm text-gray-500 md:hidden"
+                            title={menu.theme || 'No theme'}
+                          >
                             {menu.theme || 'No theme'}
                           </div>
                         </div>
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6">
+                      <td
+                        className="hidden max-w-xs truncate whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6"
+                        title={menu.theme || 'No theme'}
+                      >
                         {menu.theme || 'No theme'}
                       </td>
                       <td className="hidden whitespace-nowrap px-3 py-4 text-sm xl:table-cell xl:px-6">

package/templates/src/components/storykeep/controls/content/ProductTable.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Pagination } from '@ark-ui/react/pagination';
+import { useState, useRef, useEffect, type ChangeEvent } from 'react';
+import { useStore } from '@nanostores/react';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon';
@@ -7,7 +7,13 @@ import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
 import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
-import type { ShopifyProduct } from '@/stores/shopify';
+import {
+  shopifyData,
+  shopifyStatus,
+  fetchShopifyProducts,
+  clearShopifySearch,
+  type ShopifyProduct,
+} from '@/stores/shopify';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface ProductTableProps {
@@ -21,68 +27,120 @@ interface ProductTableProps {
   onEdit: (product: ShopifyProduct, resource: ResourceNode) => void;
 }
 
-const ITEMS_PER_PAGE = 10;
-
 export default function ProductTable({
   products,
   linkedResourceMap,
-  onRefresh,
-  isRefreshing,
   onSelectProduct,
   onLink,
   onUnlink,
   onEdit,
 }: ProductTableProps) {
+  const data = useStore(shopifyData);
+  const status = useStore(shopifyStatus);
+
+  const [inputValue, setInputValue] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
-  const [currentPage, setCurrentPage] = useState(1);
+  const [isDebouncing, setIsDebouncing] = useState(false);
 
-  const filteredProducts = products.filter(
-    (product) =>
-      product.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      product.handle.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const [cursorStack, setCursorStack] = useState<string[]>([]);
+  const [currentCursor, setCurrentCursor] = useState<string | null>(null);
 
-  const totalResults = filteredProducts.length;
-  const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
-  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const paginatedProducts = filteredProducts.slice(
-    startIndex,
-    startIndex + ITEMS_PER_PAGE
-  );
+  const debounceTimer = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    };
+  }, []);
 
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    setInputValue(val);
+    setIsDebouncing(true);
+
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+
+    if (val.length === 0) {
+      setIsDebouncing(false);
+      setSearchTerm('');
+      setCursorStack([]);
+      setCurrentCursor(null);
+      clearShopifySearch();
+      return;
+    }
+
+    debounceTimer.current = setTimeout(() => {
+      setIsDebouncing(false);
+      setSearchTerm(val);
+      setCursorStack([]);
+      setCurrentCursor(null);
+
+      if (val.length >= 3) {
+        fetchShopifyProducts(val, null);
+      } else {
+        clearShopifySearch();
+      }
+    }, 1000);
   };
 
+  const handleRefreshSearch = () => {
+    if (searchTerm.length >= 3) {
+      fetchShopifyProducts(searchTerm, currentCursor);
+    }
+  };
+
+  const handleNext = () => {
+    if (data.pageInfo?.hasNextPage && data.pageInfo?.endCursor) {
+      const nextCursor = data.pageInfo.endCursor;
+      setCursorStack((prev) => [...prev, currentCursor || '']);
+      setCurrentCursor(nextCursor);
+      fetchShopifyProducts(searchTerm, nextCursor);
+    }
+  };
+
+  const handlePrev = () => {
+    if (cursorStack.length > 0) {
+      const newStack = [...cursorStack];
+      const prevCursor = newStack.pop() || null;
+      setCursorStack(newStack);
+      setCurrentCursor(prevCursor || null);
+      fetchShopifyProducts(searchTerm, prevCursor || null);
+    }
+  };
+
+  const isLoading = status.isLoading || isDebouncing;
+
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-4">
-        <div className="flex-1">
-          <input
-            type="text"
-            placeholder="Search products..."
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              setCurrentPage(1);
-            }}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
-          />
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-4">
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Search products..."
+              value={inputValue}
+              onChange={handleSearchChange}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+            />
+          </div>
+          <button
+            onClick={handleRefreshSearch}
+            disabled={isLoading || searchTerm.length < 3}
+            className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50"
+            title="Refresh current search"
+          >
+            <ArrowPathIcon
+              className={`mr-1.5 h-5 w-5 ${isLoading ? 'animate-spin' : ''}`}
+            />
+            Sync
+          </button>
         </div>
-        <button
-          onClick={onRefresh}
-          disabled={isRefreshing}
-          className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 disabled:opacity-50"
-          title="Refresh from Shopify"
-        >
-          <ArrowPathIcon
-            className={`mr-1.5 h-5 w-5 ${isRefreshing ? 'animate-spin' : ''}`}
-          />
-          Sync
-        </button>
+        <p className="text-xs text-gray-500">Search by product title.</p>
       </div>
 
-      <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+      <div className="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
           <thead className="bg-gray-50">
             <tr>
@@ -98,25 +156,63 @@ export default function ProductTable({
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 bg-white">
-            {paginatedProducts.length === 0 ? (
+            {status.error ? (
               <tr>
                 <td colSpan={3} className="px-6 py-12 text-center">
-                  <div className="text-gray-500">
-                    {products.length === 0
-                      ? 'No products found in store'
-                      : 'No products match your search'}
+                  <div className="font-bold text-red-600">{status.error}</div>
+                  <div className="mt-1 text-sm text-red-500">
+                    Please check your Shopify integration settings or API token.
                   </div>
                 </td>
               </tr>
+            ) : isLoading ? (
+              <tr>
+                <td colSpan={3} className="px-6 py-12 text-center">
+                  <div className="mx-auto h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-cyan-600"></div>
+                  <p className="mt-2 text-sm text-gray-500">
+                    Searching Shopify...
+                  </p>
+                </td>
+              </tr>
+            ) : inputValue.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  Search to discover products.
+                </td>
+              </tr>
+            ) : inputValue.length < 3 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  Please enter at least 3 characters to search.
+                </td>
+              </tr>
+            ) : products.length === 0 ? (
+              <tr>
+                <td
+                  colSpan={3}
+                  className="px-6 py-12 text-center text-gray-500"
+                >
+                  No products match your search.
+                </td>
+              </tr>
             ) : (
-              paginatedProducts.map((product) => {
+              products.map((product) => {
                 const linkedResource = linkedResourceMap.get(product.id);
                 const isLinked = !!linkedResource;
 
                 return (
                   <tr key={product.id} className="hover:bg-gray-50">
                     <td className="px-6 py-4">
-                      <div className="font-bold text-gray-900">
+                      <div
+                        className="max-w-xs truncate font-bold text-gray-900"
+                        title={product.title}
+                      >
                         {product.title}
                       </div>
                       {isLinked && (
@@ -127,11 +223,20 @@ export default function ProductTable({
                               : 'bg-cyan-50 text-cyan-700 ring-cyan-600/20'
                           }`}
                         >
-                          Synced: {linkedResource.title}
+                          Synced:{' '}
+                          <span
+                            className="max-w-xs truncate"
+                            title={linkedResource.title}
+                          >
+                            {linkedResource.title}
+                          </span>
                         </span>
                       )}
                     </td>
-                    <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                    <td
+                      className="max-w-xs truncate whitespace-nowrap px-6 py-4 text-sm text-gray-500"
+                      title={product.handle}
+                    >
                       {product.handle}
                     </td>
                     <td className="whitespace-nowrap px-6 py-4 text-right text-sm font-bold">
@@ -199,56 +304,30 @@ export default function ProductTable({
         </table>
       </div>
 
-      {totalPages > 1 && (
-        <div className="flex justify-center pt-4">
-          <Pagination.Root
-            count={totalResults}
-            pageSize={ITEMS_PER_PAGE}
-            page={currentPage}
-            onPageChange={(details) => handlePageChange(details.page)}
-          >
-            <Pagination.PrevTrigger className="mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+      {(cursorStack.length > 0 || data.pageInfo?.hasNextPage) &&
+        !isLoading &&
+        inputValue.length >= 3 &&
+        products.length > 0 && (
+          <div className="flex items-center justify-center space-x-4 pt-4">
+            <button
+              onClick={handlePrev}
+              disabled={cursorStack.length === 0}
+              className="flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-gray-700 transition-colors hover:text-cyan-600 disabled:opacity-30 disabled:hover:text-gray-700"
+            >
               <ChevronLeftIcon className="h-4 w-4" />
               Previous
-            </Pagination.PrevTrigger>
-
-            <div className="flex items-center gap-1">
-              <Pagination.Context>
-                {(pagination) =>
-                  pagination.pages.map((page, index) =>
-                    page.type === 'page' ? (
-                      <Pagination.Item
-                        key={index}
-                        type="page"
-                        value={page.value}
-                        className={`rounded px-3 py-2 text-sm font-bold transition-colors ${
-                          page.value === currentPage
-                            ? 'bg-myblue text-white'
-                            : 'text-mydarkgrey hover:text-myblue'
-                        }`}
-                      >
-                        {page.value}
-                      </Pagination.Item>
-                    ) : (
-                      <span
-                        key={index}
-                        className="px-2 text-sm text-mydarkgrey"
-                      >
-                        {page.type === 'ellipsis' ? '...' : ''}
-                      </span>
-                    )
-                  )
-                }
-              </Pagination.Context>
-            </div>
-
-            <Pagination.NextTrigger className="ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
+            </button>
+
+            <button
+              onClick={handleNext}
+              disabled={!data.pageInfo?.hasNextPage}
+              className="flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-gray-700 transition-colors hover:text-cyan-600 disabled:opacity-30 disabled:hover:text-gray-700"
+            >
               Next
               <ChevronRightIcon className="h-4 w-4" />
-            </Pagination.NextTrigger>
-          </Pagination.Root>
-        </div>
-      )}
+            </button>
+          </div>
+        )}
     </div>
   );
 }

package/templates/src/components/storykeep/controls/content/ResourceBulkIngest.tsx

@@ -7,6 +7,8 @@ interface ResourceBulkIngestProps {
   onClose: (saved: boolean) => void;
   onRefresh: () => void;
   fullContentMap: FullContentMapItem[];
+  /** When set, placeholder shows one example for this category only (validation still accepts all types). */
+  exampleCategorySlug?: string;
 }
 
 interface ParsedResource {
@@ -40,10 +42,63 @@ interface FieldDefinition {
   maxNumber?: number;
 }
 
+function buildExampleObjectForCategory(
+  categorySlug: string,
+  index: number,
+  knownResources: Record<string, Record<string, FieldDefinition>>,
+  categoryKeys: string[]
+): Record<string, unknown> {
+  const schema = knownResources[categorySlug];
+  const example: Record<string, unknown> = {
+    title: `Example ${categorySlug.charAt(0).toUpperCase() + categorySlug.slice(1)} ${index + 1}`,
+    slug: `${categorySlug}-example-${index + 1}`,
+    category: categorySlug,
+    oneliner: `A brief description of this ${categorySlug}`,
+  };
+
+  Object.entries(schema).forEach(([key, def]: [string, FieldDefinition]) => {
+    switch (def.type) {
+      case 'string':
+        if (
+          def.belongsToCategory &&
+          categoryKeys.includes(def.belongsToCategory)
+        ) {
+          example[key] = `${def.belongsToCategory}-example-slug`;
+        } else {
+          example[key] = def.defaultValue || `example ${key}`;
+        }
+        break;
+      case 'number':
+        example[key] = def.defaultValue ?? (def.minNumber || 0);
+        break;
+      case 'boolean':
+        example[key] = def.defaultValue ?? true;
+        break;
+      case 'multi':
+        example[key] = def.defaultValue || [
+          `example ${key} 1`,
+          `example ${key} 2`,
+        ];
+        break;
+      case 'date':
+        example[key] = new Date().toISOString();
+        break;
+      case 'image':
+        example[key] = 'file-id-placeholder';
+        break;
+      default:
+        example[key] = def.defaultValue || `example ${key}`;
+    }
+  });
+
+  return example;
+}
+
 export default function ResourceBulkIngest({
   onClose,
   onRefresh,
   fullContentMap,
+  exampleCategorySlug,
 }: ResourceBulkIngestProps) {
   const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
   const [loading, setLoading] = useState(false);
@@ -418,7 +473,7 @@ export default function ResourceBulkIngest({
     };
   }, [jsonInput, knownResources, fullContentMap]);
 
-  // Generate example JSON based on available categories - ENHANCED VERSION
+  // Placeholder JSON: one category when exampleCategorySlug is set, else one object per known category
   const exampleJson = useMemo(() => {
     const categories = Object.keys(knownResources);
     if (categories.length === 0) {
@@ -436,59 +491,32 @@ export default function ResourceBulkIngest({
       );
     }
 
-    // Create examples for ALL categories, not just the first one
-    const examples = categories.map((categorySlug, index) => {
-      const schema = knownResources[categorySlug];
-      const example: any = {
-        title: `Example ${categorySlug.charAt(0).toUpperCase() + categorySlug.slice(1)} ${index + 1}`,
-        slug: `${categorySlug}-example-${index + 1}`,
-        category: categorySlug,
-        oneliner: `A brief description of this ${categorySlug}`,
-      };
-
-      // Add example values for schema fields
-      Object.entries(schema).forEach(
-        ([key, def]: [string, FieldDefinition]) => {
-          switch (def.type) {
-            case 'string':
-              if (
-                def.belongsToCategory &&
-                categories.includes(def.belongsToCategory)
-              ) {
-                example[key] = `${def.belongsToCategory}-example-slug`;
-              } else {
-                example[key] = def.defaultValue || `example ${key}`;
-              }
-              break;
-            case 'number':
-              example[key] = def.defaultValue ?? (def.minNumber || 0);
-              break;
-            case 'boolean':
-              example[key] = def.defaultValue ?? true;
-              break;
-            case 'multi':
-              example[key] = def.defaultValue || [
-                `example ${key} 1`,
-                `example ${key} 2`,
-              ];
-              break;
-            case 'date':
-              example[key] = new Date().toISOString();
-              break;
-            case 'image':
-              example[key] = 'file-id-placeholder';
-              break;
-            default:
-              example[key] = def.defaultValue || `example ${key}`;
-          }
-        }
-      );
+    if (
+      exampleCategorySlug &&
+      knownResources[exampleCategorySlug] !== undefined
+    ) {
+      const examples = [
+        buildExampleObjectForCategory(
+          exampleCategorySlug,
+          0,
+          knownResources,
+          categories
+        ),
+      ];
+      return JSON.stringify(examples, null, 2);
+    }
 
-      return example;
-    });
+    const examples = categories.map((categorySlug, index) =>
+      buildExampleObjectForCategory(
+        categorySlug,
+        index,
+        knownResources,
+        categories
+      )
+    );
 
     return JSON.stringify(examples, null, 2);
-  }, [knownResources]);
+  }, [knownResources, exampleCategorySlug]);
 
   const handleSave = useCallback(async () => {
     if (validationResult.validResources.length === 0 || isProcessing) return;
@@ -595,7 +623,7 @@ export default function ResourceBulkIngest({
 
             {/* Status Display */}
             <div className="mb-6 rounded-md border border-gray-200 bg-gray-50 p-4">
-              <div className="mb-2 flex items-center justify-between">
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                 <span className="font-bold text-gray-900">
                   {validationResult.resources.length} resources found
                 </span>
@@ -638,7 +666,7 @@ export default function ResourceBulkIngest({
                     Validation Errors:
                   </p>
                   <div className="max-h-32 overflow-y-auto">
-                    <ul className="space-y-1 text-sm text-red-600">
+                    <ul className="space-y-1 break-words text-sm text-red-600">
                       {validationResult.errors
                         .slice(0, 10)
                         .map((error, idx) => (
@@ -648,8 +676,12 @@ export default function ResourceBulkIngest({
                                 ? `Item ${error.index + 1}:`
                                 : 'JSON:'}
                             </span>
-                            <span>
-                              {error.field} - {error.message}
+                            <span
+                              className="truncate"
+                              title={`${error.field} - ${error.message}`}
+                            >
+                              <span className="font-bold">{error.field}</span> -{' '}
+                              {error.message}
                             </span>
                           </li>
                         ))}
@@ -674,7 +706,7 @@ export default function ResourceBulkIngest({
             {/* Progress indicator */}
             {isProcessing && progress && (
               <div className="mb-6">
-                <div className="mb-2 flex items-center justify-between text-sm">
+                <div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-sm">
                   <span>
                     Processing resource {progress.current + 1} of{' '}
                     {progress.total}

package/templates/src/components/storykeep/controls/content/ResourceTable.tsx

@@ -117,7 +117,7 @@ export default function ResourceTable({
       </div>
 
       {/* Table */}
-      <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+      <div className="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
           <thead className="bg-gray-50">
             <tr>
@@ -153,13 +153,22 @@ export default function ResourceTable({
                   className="cursor-pointer hover:bg-gray-50"
                   onClick={() => onEdit(resource.id)}
                 >
-                  <td className="whitespace-nowrap px-6 py-4 text-sm font-bold text-gray-900">
+                  <td
+                    className="max-w-xs truncate whitespace-nowrap px-6 py-4 text-sm font-bold text-gray-900"
+                    title={resource.title}
+                  >
                     {resource.title}
                   </td>
-                  <td className="whitespace-nowrap px-6 py-4 text-sm text-gray-500">
+                  <td
+                    className="max-w-xs truncate whitespace-nowrap px-6 py-4 text-sm text-gray-500"
+                    title={resource.slug}
+                  >
                     {resource.slug}
                   </td>
-                  <td className="px-6 py-4 text-sm text-gray-500">
+                  <td
+                    className="max-w-xs truncate px-6 py-4 text-sm text-gray-500"
+                    title={(resource as any).oneliner || '-'}
+                  >
                     {(resource as any).oneliner || '-'}
                   </td>
                   <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-bold md:pr-6">
@@ -207,6 +216,7 @@ export default function ResourceTable({
       </div>
       {showBulkIngest && (
         <ResourceBulkIngest
+          exampleCategorySlug={categorySlug}
           fullContentMap={fullContentMap}
           onClose={(saved) => {
             setShowBulkIngest(false);