astro-tractstack 2.0.0-rc.0

package/templates/src/components/Header.astro

@@ -0,0 +1,458 @@
+---
+import Menu from './Menu';
+import { isAuthenticated, isAdmin, getUserRole } from '@/utils/auth';
+import ImpressionWrapper from '@/components/widgets/ImpressionWrapper';
+import type { MenuNode } from '@/types/tractstack';
+import type { ImpressionNode } from '@/types/compositorTypes';
+
+export interface Props {
+  title: string;
+  slug: string;
+  brandConfig: any;
+  isContext?: boolean;
+  isStoryKeep?: boolean;
+  isEditable?: boolean;
+  menu?: MenuNode | null;
+  sessionId?: string;
+  storyfragmentId?: string;
+  impressions?: ImpressionNode[];
+}
+
+const {
+  title,
+  slug,
+  brandConfig,
+  isContext = false,
+  isStoryKeep = false,
+  isEditable = false,
+  menu,
+  sessionId = '',
+  storyfragmentId = undefined,
+  impressions = [],
+} = Astro.props;
+
+const isHome = slug === brandConfig?.HOME_SLUG;
+
+const getAssetPath = (configPath: string, fallback: string) => {
+  // Always prioritize brandConfig values when they exist
+  if (configPath && configPath !== '') {
+    return configPath;
+  }
+  return fallback;
+};
+
+const logo = getAssetPath(brandConfig?.LOGO, '/brand/logo.svg');
+const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
+
+// Handle empty WORDMARK_MODE by defaulting to "default"
+const wordmarkMode =
+  brandConfig?.WORDMARK_MODE && brandConfig.WORDMARK_MODE !== ''
+    ? brandConfig.WORDMARK_MODE
+    : 'default';
+
+// Auth status
+const authStatus = {
+  isAuthenticated: isAuthenticated(Astro),
+  isAdmin: isAdmin(Astro),
+  userRole: getUserRole(Astro),
+};
+---
+
+<header class="relative shadow-inner">
+  <!-- TOP ROW: Logo/Wordmark + Menu + Auth Controls -->
+  <div
+    class="flex flex-row flex-nowrap items-center justify-between px-4 py-3 md:px-8"
+  >
+    <a href="/" title="Home page">
+      <div class="flex h-auto flex-row flex-nowrap items-center">
+        {
+          [`default`, `logo`].includes(wordmarkMode) ? (
+            <>
+              <img
+                src={logo}
+                alt="Logo"
+                class="pointer-events-none h-8 w-auto"
+              />
+              <span class="w-2" />
+            </>
+          ) : null
+        }
+        {
+          [`default`, `wordmark`].includes(wordmarkMode) ? (
+            <img
+              src={wordmark}
+              alt="Wordmark"
+              class="pointer-events-none h-14 w-auto max-w-48 md:max-w-72"
+            />
+          ) : null
+        }
+      </div>
+    </a>
+
+    {
+      !!menu ? (
+        <Menu
+          payload={menu}
+          slug={slug}
+          brandConfig={brandConfig}
+          isContext={isContext}
+          client:load
+        />
+      ) : null
+    }
+  </div>
+
+  <!-- BOTTOM ROW: Title + Action Icons -->
+  <div
+    class="bg-mywhite flex flex-row flex-nowrap justify-between px-4 pb-3 pt-4 shadow-inner md:px-8"
+  >
+    <h1 class="text-mydarkgrey truncate text-xl">{title}</h1>
+    <div class="flex flex-row flex-nowrap items-center gap-x-2">
+      {/* Home Icon */}
+      {
+        !isHome ? (
+          <a
+            href="/"
+            class="text-myblue/80 hover:text-myblue hover:rotate-6"
+            title="Go to home page"
+          >
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+              />
+            </svg>
+          </a>
+        ) : null
+      }
+
+      {/* StoryKeep Dashboard Icon */}
+      {
+        authStatus.isAdmin || authStatus.isAuthenticated ? (
+          <a
+            href="/storykeep"
+            class="hover:text-myblue hover:rotate-6"
+            title="Your Story Keep Dashboard"
+          >
+            <svg
+              class="text-myblue/80 h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25A1.125 1.125 0 0 1 2.625 18.375v-2.25Z"
+              />
+            </svg>
+          </a>
+        ) : null
+      }
+
+      {/* Edit Icon */}
+      {
+        isEditable ? (
+          <a
+            data-astro-reload
+            href={!isContext ? `/${slug}/edit` : `/context/${slug}/edit`}
+            class="text-myblue/80 hover:text-myblue hover:rotate-6"
+            title={!isContext ? 'Edit this story' : 'Edit this pane'}
+          >
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
+              />
+            </svg>
+          </a>
+        ) : null
+      }
+
+      {/* Remember Me Icon */}
+      <script is:inline define:vars={{ sessionId }}>
+        function initRememberMe() {
+          const consent = localStorage.getItem('tractstack_consent') === '1';
+          const hasProfile =
+            localStorage.getItem('tractstack_has_profile') === '1';
+
+          if (!sessionId) return;
+
+          const rememberMeContainer = document.getElementById(
+            'remember-me-container'
+          );
+          if (rememberMeContainer) {
+            const title =
+              consent || hasProfile
+                ? 'Configure your Session'
+                : 'Session and Profile options';
+            const iconSvg =
+              consent || hasProfile
+                ? '<svg class="h-6 w-6 text-myblue/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>'
+                : '<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>';
+
+            rememberMeContainer.innerHTML = `
+        <a href="/storykeep/profile" 
+           class="hover:text-myblue hover:rotate-6" 
+           title="${title}">
+          ${iconSvg}
+        </a>
+      `;
+          }
+        }
+
+        // Single event listener that handles DOMContentLoaded, view transitions, and HTMX
+        document.addEventListener('astro:page-load', initRememberMe);
+      </script>
+      {!isStoryKeep && <div id="remember-me-container" />}
+
+      {/* Admin Terminal Icon - Only for admins */}
+      {
+        authStatus.isAdmin ? (
+          <button
+            id="admin-heart-btn"
+            class="text-myblue/80 hover:rotate-6 hover:text-green-500"
+            title="Admin Terminal"
+          >
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+              />
+            </svg>
+          </button>
+        ) : null
+      }
+
+      {/* Logout Icon - Admin/Editor Only */}
+      {
+        authStatus.isAdmin || authStatus.userRole === 'editor' ? (
+          <a
+            id="logout-btn"
+            href="/storykeep/logout"
+            class="text-myblue/80 hover:rotate-6 hover:text-red-600"
+            title="Logout"
+          >
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15"
+              />
+            </svg>
+          </a>
+        ) : null
+      }
+
+      {
+        impressions?.length > 0 && (
+          <ImpressionWrapper
+            payload={impressions}
+            currentPage={{ id: storyfragmentId, slug, title }}
+            config={brandConfig}
+            client:load
+          />
+        )
+      }
+    </div>
+  </div>
+</header>
+
+{
+  authStatus.isAdmin && (
+    <div
+      id="admin-modal"
+      class="fixed inset-0 hidden bg-black bg-opacity-75"
+      style={{ zIndex: 9005 }}
+      aria-labelledby="admin-modal-title"
+      aria-hidden="true"
+    >
+      <div class="relative h-full w-full">
+        {/* Modal Header with Close Button */}
+        <div class="absolute right-4 top-4 z-10">
+          <button
+            id="admin-modal-close"
+            class="flex h-10 w-10 items-center justify-center rounded-full bg-white bg-opacity-90 shadow-lg transition-all duration-200 hover:bg-opacity-100"
+            title="Close Admin Panel"
+            aria-label="Close Admin Panel"
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-x"
+            >
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Iframe Container */}
+        <iframe
+          id="admin-sysop-iframe"
+          src={`${import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080'}/sysop`}
+          class="h-full w-full border-0"
+          title="Admin System Operations Panel"
+          sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+        />
+      </div>
+    </div>
+  )
+}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const logoutBtn = document.getElementById(
+      'logout-btn'
+    ) as HTMLButtonElement | null;
+
+    if (logoutBtn) {
+      logoutBtn.addEventListener('click', async function (e) {
+        e.preventDefault();
+
+        // Disable button during logout process
+        logoutBtn.disabled = true;
+
+        try {
+          // Call the logout API
+          const response = await fetch('/api/auth/logout', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          });
+
+          const result = await response.json();
+
+          if (result.success) {
+            console.log('StoryKeep: Logout successful');
+
+            // Clear any remaining TractStack user profile data
+            const tractStackKeys = [];
+            for (let i = 0; i < localStorage.length; i++) {
+              const key = localStorage.key(i);
+              if (key && key.startsWith('tractstack_')) {
+                tractStackKeys.push(key);
+              }
+            }
+            tractStackKeys.forEach((key) => localStorage.removeItem(key));
+
+            console.log('TractStack: Complete logout finished');
+
+            // Redirect to home page
+            window.location.href = '/';
+          } else {
+            console.error('StoryKeep: Logout failed:', result.error);
+            alert('Logout failed. Please try again.');
+
+            // Re-enable button
+            logoutBtn.disabled = false;
+            logoutBtn.textContent = 'Logout';
+          }
+        } catch (error) {
+          console.error('Logout error:', error);
+          alert('Logout failed due to network error. Please try again.');
+
+          // Re-enable button
+          logoutBtn.disabled = false;
+          logoutBtn.textContent = 'Logout';
+        }
+      });
+    }
+
+    // Admin Modal JavaScript - Only runs when admin elements exist
+    const heartBtn = document.getElementById('admin-heart-btn');
+    const modal = document.getElementById('admin-modal');
+    const closeBtn = document.getElementById('admin-modal-close');
+    const iframe = document.getElementById('admin-sysop-iframe');
+
+    if (heartBtn && modal && closeBtn && iframe) {
+      // Open modal when heart icon is clicked
+      heartBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        modal.classList.remove('hidden');
+        modal.setAttribute('aria-hidden', 'false');
+
+        // Focus management for accessibility
+        closeBtn.focus();
+
+        // Prevent body scroll when modal is open
+        document.body.style.overflow = 'hidden';
+      });
+
+      // Close modal when X button is clicked
+      closeBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        closeModal();
+      });
+
+      // Close modal when clicking outside the iframe
+      modal.addEventListener('click', function (e) {
+        if (e.target === modal) {
+          closeModal();
+        }
+      });
+
+      // Close modal with Escape key
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+          closeModal();
+        }
+      });
+
+      function closeModal() {
+        modal?.classList.add('hidden');
+        modal?.setAttribute('aria-hidden', 'true');
+
+        // Restore body scroll
+        document.body.style.overflow = '';
+
+        // Return focus to heart button for accessibility
+        heartBtn?.focus();
+      }
+
+      // Handle iframe load events for better UX
+      //iframe.addEventListener('load', function () {
+      //  console.log('Admin panel loaded successfully');
+      //});
+
+      iframe.addEventListener('error', function () {
+        console.error('Failed to load admin panel');
+      });
+    }
+  });
+</script>

package/templates/src/components/Menu.tsx

@@ -0,0 +1,196 @@
+import { Menu } from '@ark-ui/react';
+import { Portal } from '@ark-ui/react/portal';
+import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
+import { lispLexer } from '@/utils/actions/lispLexer';
+import { preParseAction } from '@/utils/actions//preParse_Action';
+
+// CSS to style the menu items with hover and selection states
+const menuStyles = `
+  .menu-content {
+    transition-property: opacity, transform;
+    transition-duration: 200ms;
+    z-index: 10050;
+  }
+
+  .menu-content[data-state="open"] {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .menu-content[data-state="closed"] {
+    opacity: 0;
+    transform: translateY(1px);
+  }
+
+  .menu-item[data-highlighted] {
+    background-color: #f3f4f6;
+  }
+
+  .menu-item:focus {
+    outline: 2px solid #0891b2;
+    outline-offset: -2px;
+  }
+`;
+
+interface MenuLink {
+  name: string;
+  description: string;
+  featured: boolean;
+  actionLisp: string;
+}
+
+interface MenuDatum {
+  id: string;
+  title: string;
+  theme: string;
+  optionsPayload: MenuLink[];
+}
+
+interface MenuLinkDatum extends MenuLink {
+  to: string;
+  internal: boolean;
+}
+
+interface MenuProps {
+  payload: MenuDatum;
+  slug: string;
+  isContext: boolean;
+  brandConfig: any;
+}
+
+const MenuComponent = (props: MenuProps) => {
+  const { payload, slug, isContext, brandConfig } = props;
+  const thisPayload = payload.optionsPayload;
+
+  // Process featured and additional links
+  const featuredLinks = thisPayload
+    .filter((e: MenuLink) => e.featured)
+    .map(processMenuLink);
+  const additionalLinks = thisPayload
+    .filter((e: MenuLink) => !e.featured)
+    .map(processMenuLink);
+
+  // Helper function to process menu links
+  function processMenuLink(e: MenuLink): MenuLinkDatum {
+    const item = { ...e } as MenuLinkDatum;
+    const thisPayload = lispLexer(e.actionLisp);
+    const to = preParseAction(thisPayload, slug, isContext, brandConfig);
+    if (typeof to === `string`) {
+      item.to = to;
+      item.internal = true;
+    } else if (typeof to === `object`) {
+      item.to = to[0];
+    }
+    return item;
+  }
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: menuStyles }} />
+
+      {/* Desktop Navigation */}
+      <nav className="font-action ml-6 hidden flex-wrap items-center justify-end space-x-3 md:flex md:space-x-6">
+        {featuredLinks.map((item: MenuLinkDatum) => (
+          <div key={item.name} className="relative py-1.5">
+            <a
+              href={item.to}
+              className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+              title={item.description}
+              aria-label={`${item.name} - ${item.description}`}
+            >
+              {item.name}
+            </a>
+          </div>
+        ))}
+      </nav>
+
+      {/* Mobile Navigation Menu */}
+      <div className="font-action md:hidden">
+        <Menu.Root>
+          <Menu.Trigger
+            className="text-myblue focus:ring-myblue inline-flex rounded-md px-3 py-2 text-xl font-bold hover:text-black focus:outline-none focus:ring-2"
+            aria-label="Open navigation menu"
+          >
+            <span>MENU</span>
+            <ChevronDownIcon className="ml-1 h-5 w-5" aria-hidden="true" />
+          </Menu.Trigger>
+
+          <Portal>
+            <Menu.Positioner>
+              <Menu.Content className="menu-content mt-5 flex">
+                <div className="w-screen">
+                  <div className="text-md ring-mydarkgrey/5 flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1">
+                    {/* Featured Links Section */}
+                    <div className="px-8">
+                      {featuredLinks.map((item: MenuLinkDatum) => (
+                        <Menu.Item
+                          key={item.name}
+                          value={item.name}
+                          className="menu-item hover:bg-mygreen/20 group relative flex gap-x-6 rounded-lg p-4"
+                        >
+                          <div>
+                            <a
+                              href={item.to}
+                              className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                              aria-label={`${item.name} - ${item.description}`}
+                            >
+                              {item.name}
+                              <span className="absolute inset-0" />
+                            </a>
+                            <p className="text-mydarkgrey mt-1">
+                              {item.description}
+                            </p>
+                          </div>
+                        </Menu.Item>
+                      ))}
+                    </div>
+
+                    {/* Additional Links Section */}
+                    {additionalLinks.length > 0 && (
+                      <div className="bg-slate-50 p-8">
+                        <div className="flex justify-between">
+                          <h3
+                            className="text-myblue mt-4 text-sm leading-6"
+                            id="additional-links-heading"
+                          >
+                            Additional Links
+                          </h3>
+                        </div>
+                        <ul
+                          role="list"
+                          className="mt-6 space-y-6"
+                          aria-labelledby="additional-links-heading"
+                        >
+                          {additionalLinks.map((item: MenuLinkDatum) => (
+                            <li key={item.name} className="relative">
+                              <Menu.Item
+                                value={item.name}
+                                className="menu-item block w-full text-left"
+                              >
+                                <a
+                                  href={item.to}
+                                  className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                  title={item.description}
+                                  aria-label={`${item.name} - ${item.description}`}
+                                >
+                                  {item.name}
+                                  <span className="absolute inset-0" />
+                                </a>
+                              </Menu.Item>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </Menu.Content>
+            </Menu.Positioner>
+          </Portal>
+        </Menu.Root>
+      </div>
+    </>
+  );
+};
+
+export default MenuComponent;