astro-tractstack 2.0.0-rc.9 → 2.0.1

package/templates/src/components/search/SearchResults.tsx

@@ -0,0 +1,367 @@
+import { useState, useMemo } from 'react';
+import { Pagination } from '@ark-ui/react/pagination';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import type { CategorizedResults, FTSResult } from '@/types/tractstack';
+import type { FullContentMapItem } from '@/types/tractstack';
+import {
+  getResourceUrl,
+  getResourceImage,
+  getResourceDescription,
+} from '@/utils/customHelpers';
+
+const VERBOSE = false;
+
+interface SearchResultsProps {
+  results: CategorizedResults;
+  contentMap: FullContentMapItem[];
+  getTypeColor: (type: string) => string;
+}
+
+interface ResultItem {
+  id: string;
+  type: 'StoryFragment' | 'ContextPane' | 'Resource';
+  title: string;
+  slug: string;
+  description?: string;
+  topics?: string[];
+  changed?: string;
+  thumbSrc?: string;
+  categorySlug?: string;
+  url: string;
+  imageSrc: string;
+}
+
+const ITEMS_PER_PAGE = 10;
+
+export default function SearchResults({
+  results,
+  contentMap,
+  getTypeColor,
+}: SearchResultsProps) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const allResultItems = useMemo(() => {
+    const items: ResultItem[] = [];
+
+    if (VERBOSE)
+      console.log('DEBUG SearchResults: Processing results', {
+        storyFragmentResults: results.storyFragmentResults.length,
+        contextPaneResults: results.contextPaneResults.length,
+        resourceResults: results.resourceResults.length,
+        contentMapSize: contentMap.length,
+      });
+
+    // Process StoryFragment results
+    results.storyFragmentResults.forEach((ftsResult: FTSResult, index) => {
+      if (VERBOSE) console.log(`DEBUG StoryFragment ${index}:`, ftsResult);
+      const item = contentMap.find(
+        (item) => item.id === ftsResult.ID && item.type === 'StoryFragment'
+      );
+      if (item) {
+        if (VERBOSE)
+          console.log(
+            `DEBUG StoryFragment ${index}: Found in contentMap`,
+            item
+          );
+        items.push({
+          id: item.id,
+          type: 'StoryFragment',
+          title: item.title,
+          slug: item.slug,
+          description: item.description || undefined,
+          topics: item.topics || undefined,
+          changed: item.changed || undefined,
+          thumbSrc: item.thumbSrc || undefined,
+          url: `/${item.slug}`,
+          imageSrc: item.thumbSrc || '/static.jpg',
+        });
+      } else {
+        if (VERBOSE)
+          console.log(
+            `DEBUG StoryFragment ${index}: NOT found in contentMap for ID ${ftsResult.ID}`
+          );
+      }
+    });
+
+    // Process ContextPane results
+    results.contextPaneResults.forEach((ftsResult: FTSResult, index) => {
+      if (VERBOSE) console.log(`DEBUG ContextPane ${index}:`, ftsResult);
+      const item = contentMap.find(
+        (item) => item.id === ftsResult.ID && item.type === 'Pane'
+      );
+      if (item) {
+        if (VERBOSE)
+          console.log(`DEBUG ContextPane ${index}: Found in contentMap`, item);
+        items.push({
+          id: item.id,
+          type: 'ContextPane',
+          title: item.title,
+          slug: item.slug,
+          url: `/context/${item.slug}`,
+          imageSrc: '/static.jpg',
+        });
+      } else {
+        if (VERBOSE)
+          console.log(
+            `DEBUG ContextPane ${index}: NOT found in contentMap for ID ${ftsResult.ID}`
+          );
+      }
+    });
+
+    // Process Resource results
+    results.resourceResults.forEach((ftsResult: FTSResult, index) => {
+      if (VERBOSE) console.log(`DEBUG Resource ${index}:`, ftsResult);
+      const item = contentMap.find(
+        (item) => item.id === ftsResult.ID && item.type === 'Resource'
+      );
+      if (item) {
+        if (VERBOSE)
+          console.log(`DEBUG Resource ${index}: Found in contentMap`, item);
+
+        const resourceUrl = getResourceUrl(item.categorySlug || '', item.slug);
+        const resourceImage = getResourceImage(
+          item.id,
+          item.slug,
+          item.categorySlug || ''
+        );
+        const description = getResourceDescription(
+          item.id,
+          item.slug,
+          item.categorySlug || ''
+        );
+
+        if (VERBOSE)
+          console.log(`DEBUG Resource ${index}: Helper results`, {
+            resourceUrl,
+            resourceImage,
+            description,
+            categorySlug: item.categorySlug,
+            slug: item.slug,
+            id: item.id,
+          });
+
+        items.push({
+          id: item.id,
+          type: 'Resource',
+          title: item.title,
+          slug: item.slug,
+          description: description || undefined,
+          categorySlug: item.categorySlug || undefined,
+          url: resourceUrl,
+          imageSrc: resourceImage,
+        });
+      } else {
+        if (VERBOSE)
+          console.log(
+            `DEBUG Resource ${index}: NOT found in contentMap for ID ${ftsResult.ID}`
+          );
+        if (VERBOSE)
+          console.log(
+            'DEBUG: Available resource IDs in contentMap:',
+            contentMap
+              .filter((item) => item.type === 'Resource')
+              .map((item) => ({ id: item.id, title: item.title }))
+          );
+      }
+    });
+
+    if (VERBOSE) console.log('DEBUG SearchResults: Final items', items);
+
+    // Sort by whether they have real images
+    return items.sort((a, b) => {
+      const aHasRealImage = a.imageSrc !== '/static.jpg';
+      const bHasRealImage = b.imageSrc !== '/static.jpg';
+
+      if (aHasRealImage && !bHasRealImage) return -1;
+      if (!aHasRealImage && bHasRealImage) return 1;
+      return 0;
+    });
+  }, [results, contentMap]);
+
+  const totalResults = allResultItems.length;
+  const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedItems = allResultItems.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const getResultBadge = (type: string, categorySlug?: string) => {
+    let styleType = type;
+    let label = '';
+    switch (type) {
+      case 'StoryFragment':
+        label = 'Page';
+        break;
+      case 'ContextPane':
+        label = 'Context';
+        break;
+      case 'Resource':
+        styleType = 'COLLECTION';
+        label = categorySlug || 'Resource';
+        break;
+      default:
+        return null;
+    }
+
+    // Get the color classes but extract just the text and background colors for the inline style
+    const colorClasses = getTypeColor(styleType);
+
+    return (
+      <span className={`rounded px-2 py-1 text-xs ${colorClasses}`}>
+        {label}
+      </span>
+    );
+  };
+
+  if (totalResults === 0) {
+    return null;
+  }
+
+  return (
+    <div className="p-6">
+      <div className="mb-6">
+        <h2 className="text-mydarkgrey text-lg font-bold">
+          {totalResults} result{totalResults !== 1 ? 's' : ''} found
+        </h2>
+        <p className="mt-1 text-sm text-gray-600">
+          Showing {startIndex + 1}-
+          {Math.min(startIndex + ITEMS_PER_PAGE, totalResults)} of{' '}
+          {totalResults}
+        </p>
+      </div>
+
+      <div className="mb-8 space-y-4">
+        {paginatedItems.map((item) => (
+          <div
+            key={item.id}
+            className="rounded-lg border border-gray-200 p-4 transition-colors hover:bg-gray-100"
+          >
+            <a href={item.url} className="group block">
+              <div className="flex flex-col md:flex-row md:items-start md:gap-4">
+                {/* Mobile: Full width image without overlay badge */}
+                <div
+                  className="bg-mydarkgrey relative w-full overflow-hidden rounded-lg md:hidden"
+                  style={{ aspectRatio: '1200/630' }}
+                >
+                  <img
+                    src={item.imageSrc}
+                    alt={item.title}
+                    className="h-full w-full object-contain"
+                  />
+                </div>
+
+                {/* Desktop: Side image without overlay badge */}
+                <div
+                  className="bg-mydarkgrey relative hidden flex-shrink-0 overflow-hidden rounded-lg md:block"
+                  style={{ width: '240px', height: '135px' }}
+                >
+                  <img
+                    src={item.imageSrc}
+                    alt={item.title}
+                    className="h-full w-full object-contain"
+                  />
+                </div>
+
+                <div className="mt-3 min-w-0 flex-1 md:mt-0">
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="flex-1">
+                      <h3 className="text-mydarkgrey group-hover:text-myblue mb-2 text-lg font-bold transition-colors">
+                        {item.title}
+                      </h3>
+                      {item.description && (
+                        <p className="text-mydarkgrey mb-2 text-sm">
+                          {item.description}
+                        </p>
+                      )}
+
+                      {/* Category badge and topics in same row */}
+                      <div className="mb-2 flex flex-wrap gap-1">
+                        {/* Always show the category badge first */}
+                        {getResultBadge(item.type, item.categorySlug)}
+
+                        {/* Then show topics if they exist */}
+                        {item.topics && item.topics.length > 0 && (
+                          <>
+                            {item.topics.slice(0, 3).map((topic, idx) => (
+                              <span
+                                key={idx}
+                                className="bg-myoffwhite text-mydarkgrey rounded px-2 py-1 text-xs"
+                              >
+                                {topic}
+                              </span>
+                            ))}
+                            {item.topics.length > 3 && (
+                              <span className="text-mydarkgrey text-xs">
+                                +{item.topics.length - 3} more
+                              </span>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex justify-center">
+          <Pagination.Root
+            count={totalResults}
+            pageSize={ITEMS_PER_PAGE}
+            page={currentPage}
+            onPageChange={(details) => handlePageChange(details.page)}
+          >
+            <Pagination.PrevTrigger className="text-mydarkgrey hover:text-myblue mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
+              <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="text-mydarkgrey px-2 text-sm"
+                      >
+                        {page.type === 'ellipsis' ? '...' : ''}
+                      </span>
+                    )
+                  )
+                }
+              </Pagination.Context>
+            </div>
+
+            <Pagination.NextTrigger className="text-mydarkgrey hover:text-myblue ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
+              Next
+              <ChevronRightIcon className="h-4 w-4" />
+            </Pagination.NextTrigger>
+          </Pagination.Root>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/src/components/search/SearchWrapper.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { initSearch } from '@/utils/customHelpers';
+import SearchModal from './SearchModal';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+interface SearchWrapperProps {
+  contentMap: FullContentMapItem[];
+}
+
+export default function SearchWrapper({ contentMap }: SearchWrapperProps) {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+  const handleSearchOpen = () => {
+    setIsSearchOpen(true);
+  };
+
+  const handleSearchClose = () => {
+    setIsSearchOpen(false);
+  };
+
+  useEffect(() => {
+    initSearch();
+  }, []);
+
+  return (
+    <>
+      <button
+        onClick={handleSearchOpen}
+        className="text-myblue/80 hover:text-myblue hover:rotate-6"
+        title="Search content"
+        aria-label="Search content"
+      >
+        <MagnifyingGlassIcon className="h-6 w-6" />
+      </button>
+
+      {isSearchOpen && (
+        <SearchModal
+          isOpen={isSearchOpen}
+          onClose={handleSearchClose}
+          contentMap={contentMap}
+        />
+      )}
+    </>
+  );
+}

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -131,7 +131,7 @@ export default function StoryKeepDashboard_Advanced({
   };
 
   return (
-    <div className="space-y-8" style={{ paddingBottom: '112px' }}>
+    <div className="space-y-8">
       {initialize && (
         <div className="rounded-md border border-blue-200 bg-blue-50 p-4">
           <div className="flex">

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, Component } from 'react';
+import { useState, useEffect, useCallback, useMemo, Component } from 'react';
 import type { ReactNode } from 'react';
 import { useStore } from '@nanostores/react';
 import { epinetCustomFilters } from '@/stores/analytics';
@@ -238,7 +238,7 @@ export default function StoryKeepDashboard_Analytics({
       )}
 
       {/* Stats Cards Grid */}
-      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div className="mb-6 grid grid-cols-3 gap-4">
         {stats.map((item) => {
           const period = item.period;
           let firstTimeValue = 0,
@@ -261,11 +261,11 @@ export default function StoryKeepDashboard_Analytics({
           return (
             <div
               key={item.period}
-              className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100"
+              className="rounded-lg border border-gray-100 bg-white px-2 py-2.5 shadow-sm transition-colors hover:border-cyan-100 md:px-4 md:py-3"
             >
               <dt className="text-sm font-bold text-gray-800">{item.name}</dt>
 
-              <dd className="mt-2">
+              <dd className="mt-1 md:mt-2">
                 <div className="flex items-end justify-between">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">Events</div>
@@ -276,10 +276,11 @@ export default function StoryKeepDashboard_Analytics({
                 </div>
               </dd>
 
-              <hr className="my-3.5 border-gray-100" />
+              <hr className="my-1.5 border-gray-100 md:my-3.5" />
 
               <dd>
-                <div className="flex items-end justify-between">
+                {/* Desktop: side-by-side layout */}
+                <div className="hidden items-end justify-between md:flex">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">
                       Anonymous Visitors
@@ -299,13 +300,35 @@ export default function StoryKeepDashboard_Analytics({
                     </div>
                   </div>
                 </div>
+
+                {/* Mobile: stacked layout */}
+                <div className="md:hidden">
+                  <div className="mb-1.5">
+                    <div className="text-sm text-gray-600">
+                      Anonymous Visitors
+                    </div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {firstTimeValue === 0
+                        ? '-'
+                        : formatNumber(firstTimeValue)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="text-sm text-gray-600">Known Leads</div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {returningValue === 0
+                        ? '-'
+                        : formatNumber(returningValue)}
+                    </div>
+                  </div>
+                </div>
               </dd>
             </div>
           );
         })}
 
         {/* Total Leads Card */}
-        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100 md:col-span-3">
+        <div className="col-span-3 rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
           <div className="flex items-center justify-between">
             <dt className="text-sm font-bold text-gray-800">Total Leads</dt>
             <div className="flex items-center gap-2">
@@ -369,7 +392,7 @@ export default function StoryKeepDashboard_Analytics({
       </div>
 
       {/* User Journey Section */}
-      <div className="mb-6 overflow-hidden">
+      <div className="mb-6 overflow-visible">
         <h3 className="mb-4 text-lg font-bold text-gray-900">
           User Journey Analytics
         </h3>
@@ -416,6 +439,7 @@ export default function StoryKeepDashboard_Analytics({
                   isLoading={
                     analytics.isLoading || analytics.status === 'loading'
                   }
+                  hourlyNodeActivity={analytics.hourlyNodeActivity}
                 />
               </div>
             </ErrorBoundary>
@@ -430,6 +454,7 @@ export default function StoryKeepDashboard_Analytics({
                 isLoading={
                   analytics.isLoading || analytics.status === 'loading'
                 }
+                hourlyNodeActivity={analytics.hourlyNodeActivity}
               />
             </>
           )
@@ -442,6 +467,7 @@ export default function StoryKeepDashboard_Analytics({
             <EpinetDurationSelector
               fullContentMap={fullContentMap}
               isLoading={analytics.isLoading || analytics.status === 'loading'}
+              hourlyNodeActivity={analytics.hourlyNodeActivity}
             />
           </>
         )}

package/templates/src/components/storykeep/Dashboard_Branding.tsx

@@ -68,7 +68,7 @@ export default function StoryKeepDashboard_Branding({
   });
 
   return (
-    <div className="space-y-8" style={{ paddingBottom: '112px' }}>
+    <div className="space-y-8">
       <div className="border-b border-gray-200 pb-4">
         <h2 className="text-2xl font-bold text-gray-900">
           Brand Configuration

package/templates/src/components/storykeep/Dashboard_Content.tsx

@@ -64,6 +64,12 @@ const StoryKeepDashboard_Content = ({
     handleContentSubtabChange(tabId as any, setActiveContentTab);
   };
 
+  useEffect(() => {
+    if (createMenu) {
+      setActiveContentTab('manage');
+    }
+  }, [createMenu]);
+
   // Lightweight content summary fetch with retry logic
   useEffect(() => {
     let retryCount = 0;

package/templates/src/components/storykeep/StoryKeepBackdrop.astro

@@ -0,0 +1,87 @@
+---
+let MODE = 'logo'; // 'wordmark' | 'logo'
+
+interface Props {
+  brandConfig: {
+    LOGO?: string;
+    WORDMARK?: string;
+  };
+}
+
+const { brandConfig } = Astro.props;
+
+const getAssetPath = (
+  configPath: string | undefined,
+  fallback: string
+): string => {
+  if (configPath && configPath !== '') {
+    return configPath;
+  }
+  return fallback;
+};
+
+let assetUrl;
+if (MODE === `wordmark`)
+  assetUrl = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
+else assetUrl = getAssetPath(brandConfig?.LOGO, '/brand/logo.svg');
+
+// Generate positions programmatically for triple density
+const generatePositions = () => {
+  const positions = [];
+  const rows = 15; // More rows to extend beyond boundaries
+  const cols = 12; // More cols to extend beyond boundaries
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      // Skip some positions for natural spacing
+      if ((row + col) % 3 !== 0) continue;
+
+      // Allow logos to extend beyond container edges (no margins)
+      const top = (row / (rows - 1)) * 120 - 10; // Extend 10% beyond top/bottom
+      const left = (col / (cols - 1)) * 120 - 10; // Extend 10% beyond left/right
+      const rotation = -45 + Math.random() * 90;
+
+      positions.push({
+        top: `${top}%`,
+        left: `${left}%`,
+        rotation: `${rotation}deg`,
+      });
+    }
+  }
+
+  return positions;
+};
+
+const logoPositions = generatePositions();
+---
+
+{
+  assetUrl && (
+    <div
+      class="pointer-events-none absolute mr-6 overflow-hidden rounded-2xl p-1.5 md:p-3.5"
+      style={{
+        top: '2rem',
+        left: '64rem',
+        right: '0',
+        bottom: '3.5rem',
+        'mix-blend-mode': 'multiply',
+        opacity: '0.07',
+        border: '2px dashed rgba(0, 0, 0, 1)',
+      }}
+    >
+      {logoPositions.map((position) => (
+        <img
+          src={assetUrl}
+          style={{
+            position: 'absolute',
+            top: position.top,
+            left: position.left,
+            width: '120px',
+            height: 'auto',
+            transform: `rotate(${position.rotation})`,
+          }}
+        />
+      ))}
+    </div>
+  )
+}