astro-tractstack 2.3.1 → 2.3.2

package/templates/src/components/Menu.tsx

@@ -1,38 +1,12 @@
-import { Menu } from '@ark-ui/react';
+import { useState } from 'react';
+import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { lispLexer } from '@/utils/actions/lispLexer';
 import { preParseAction } from '@/utils/actions/preParse_Action';
 import type { LispToken } from '@/types/compositorTypes';
 
-// 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;
@@ -63,6 +37,7 @@ interface MenuProps {
 const MenuComponent = (props: MenuProps) => {
   const { payload, slug, isContext, brandConfig } = props;
   const thisPayload = payload.optionsPayload;
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   function processMenuLink(e: MenuLink): ProcessedMenuLinkDatum {
     const item = { ...e } as ProcessedMenuLinkDatum;
@@ -181,12 +156,112 @@ const MenuComponent = (props: MenuProps) => {
     );
   };
 
+  const MobileMenuItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="block w-full rounded-xl p-4 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+          onClick={() => setMobileOpen(false)}
+        >
+          <p className="text-xl font-bold leading-7 text-myblack">
+            {item.name}
+          </p>
+          <p className="mt-1 text-base leading-6 text-mydarkgrey">
+            {item.description}
+          </p>
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="block w-full rounded-xl p-4 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          aria-label={`${item.name} - ${item.description}`}
+          onClick={() => setMobileOpen(false)}
+        >
+          <p className="text-xl font-bold leading-7 text-myblack">
+            {item.name}
+          </p>
+          <p className="mt-1 text-base leading-6 text-mydarkgrey">
+            {item.description}
+          </p>
+        </a>
+      );
+    }
+
+    return (
+      <span
+        className="block w-full rounded-xl p-4 text-left opacity-60"
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        <p className="text-xl font-bold leading-7 text-myblack">{item.name}</p>
+        <p className="mt-1 text-base leading-6 text-mydarkgrey">
+          {item.description}
+        </p>
+      </span>
+    );
+  };
+
+  const MobileCompactItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="block w-full rounded-lg p-3 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+          onClick={() => setMobileOpen(false)}
+        >
+          <span className="block text-base font-bold leading-6 text-mydarkgrey">
+            {item.name}
+          </span>
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="block w-full rounded-lg p-3 text-left hover:bg-mygreen/20 focus:outline-none focus:ring-2 focus:ring-myblue"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          onClick={() => setMobileOpen(false)}
+        >
+          <span className="block text-base font-bold leading-6 text-mydarkgrey">
+            {item.name}
+          </span>
+        </a>
+      );
+    }
+
+    return (
+      <span
+        className="block w-full rounded-lg p-3 text-left opacity-60"
+        title={item.description}
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        <span className="block text-base font-bold leading-6 text-mydarkgrey">
+          {item.name}
+        </span>
+      </span>
+    );
+  };
+
   return (
     <>
-      <style dangerouslySetInnerHTML={{ __html: menuStyles }} />
-
       {/* Desktop Navigation */}
-      <nav className="ml-6 hidden flex-wrap items-center justify-end space-x-3 font-action md:flex md:space-x-6">
+      <nav className="ml-6 hidden min-w-0 max-w-full flex-wrap items-center justify-end space-x-3 font-action md:flex md:space-x-6">
         {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
           <div key={item.name} className="relative py-1.5">
             <InteractiveMenuItem item={item} />
@@ -196,134 +271,81 @@ const MenuComponent = (props: MenuProps) => {
 
       {/* Mobile Navigation Menu */}
       <div className="font-action md:hidden">
-        <Menu.Root>
-          <Menu.Trigger
+        <Dialog.Root
+          open={mobileOpen}
+          onOpenChange={(details) => setMobileOpen(details.open)}
+        >
+          <Dialog.Trigger
             className="inline-flex rounded-md px-3 py-2 text-xl font-bold text-myblue hover:text-black focus:outline-none focus:ring-2 focus:ring-myblue"
             aria-label="Open navigation menu"
           >
             <span>MENU</span>
             <ChevronDownIcon className="ml-1 h-5 w-5" aria-hidden="true" />
-          </Menu.Trigger>
+          </Dialog.Trigger>
 
           <Portal>
-            <Menu.Positioner>
-              <Menu.Content className="menu-content mt-5 flex">
-                <div className="w-screen">
-                  <div className="text-md flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1 ring-mydarkgrey/5">
-                    {/* Featured Links Section */}
-                    <div className="px-8">
+            <Dialog.Backdrop
+              className="fixed inset-0 bg-black/40"
+              style={{ zIndex: 10050 }}
+            />
+            <Dialog.Positioner
+              className="fixed inset-0"
+              style={{ zIndex: 10051 }}
+            >
+              <Dialog.Content className="h-full w-full overflow-hidden bg-white">
+                <div className="flex h-full flex-col overflow-hidden">
+                  <div className="border-b border-mylightgrey px-4 py-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <Dialog.Title className="text-lg font-bold text-myblack">
+                        Navigation Menu
+                      </Dialog.Title>
+                      <Dialog.CloseTrigger
+                        className="rounded-full p-2 text-mydarkgrey hover:bg-mylightgrey focus:outline-none focus:ring-2 focus:ring-myblue"
+                        aria-label="Close navigation menu"
+                      >
+                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                      </Dialog.CloseTrigger>
+                    </div>
+                  </div>
+
+                  <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-4 py-4">
+                    <ul role="list" className="space-y-3">
                       {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
-                        <Menu.Item
-                          key={item.name}
-                          value={item.name}
-                          className="menu-item group relative flex gap-x-6 rounded-lg p-4 hover:bg-mygreen/20"
-                        >
-                          <div>
-                            {item.renderAs === 'button' ? (
-                              <button
-                                type="button"
-                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
-                                aria-label={`${item.name} - ${item.description}`}
-                                hx-post="/api/v1/state"
-                                hx-swap="none"
-                                hx-vals={item.htmxVals}
-                              >
-                                {item.name}
-                                <span className="absolute inset-0" />
-                              </button>
-                            ) : item.renderAs === 'a' ? (
-                              <a
-                                href={item.href}
-                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
-                                aria-label={`${item.name} - ${item.description}`}
-                              >
-                                {item.name}
-                                <span className="absolute inset-0" />
-                              </a>
-                            ) : (
-                              <span
-                                className="font-action text-xl text-myblack opacity-50"
-                                aria-label={`${item.name} - ${item.description}`}
-                              >
-                                {item.name}
-                              </span>
-                            )}
-                            <p className="mt-1 text-mydarkgrey">
-                              {item.description}
-                            </p>
-                          </div>
-                        </Menu.Item>
+                        <li key={item.name} className="min-w-0">
+                          <MobileMenuItem item={item} />
+                        </li>
                       ))}
-                    </div>
+                    </ul>
 
-                    {/* Additional Links Section */}
                     {additionalLinks.length > 0 && (
-                      <div className="bg-slate-50 p-8">
-                        <div className="flex justify-between">
-                          <h3
-                            className="mt-4 text-sm leading-6 text-myblue"
-                            id="additional-links-heading"
-                          >
-                            Additional Links
-                          </h3>
-                        </div>
+                      <section className="mt-6 rounded-xl bg-slate-50 p-4">
+                        <h3
+                          className="text-sm font-bold leading-6 text-myblue"
+                          id="additional-links-heading"
+                        >
+                          Additional Links
+                        </h3>
                         <ul
                           role="list"
-                          className="mt-6 space-y-6"
+                          className="mt-3 space-y-2"
                           aria-labelledby="additional-links-heading"
                         >
                           {additionalLinks.map(
                             (item: ProcessedMenuLinkDatum) => (
-                              <li key={item.name} className="relative">
-                                <Menu.Item
-                                  value={item.name}
-                                  className="menu-item block w-full text-left"
-                                >
-                                  {item.renderAs === 'button' ? (
-                                    <button
-                                      type="button"
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey hover:text-black focus:text-black focus:underline focus:outline-none"
-                                      title={item.description}
-                                      aria-label={`${item.name} - ${item.description}`}
-                                      hx-post="/api/v1/state"
-                                      hx-swap="none"
-                                      hx-vals={item.htmxVals}
-                                    >
-                                      {item.name}
-                                      <span className="absolute inset-0" />
-                                    </button>
-                                  ) : item.renderAs === 'a' ? (
-                                    <a
-                                      href={item.href}
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey 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>
-                                  ) : (
-                                    <span
-                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey opacity-50"
-                                      title={item.description}
-                                      aria-label={`${item.name} - ${item.description}`}
-                                    >
-                                      {item.name}
-                                    </span>
-                                  )}
-                                </Menu.Item>
+                              <li key={item.name} className="min-w-0">
+                                <MobileCompactItem item={item} />
                               </li>
                             )
                           )}
                         </ul>
-                      </div>
+                      </section>
                     )}
                   </div>
                 </div>
-              </Menu.Content>
-            </Menu.Positioner>
+              </Dialog.Content>
+            </Dialog.Positioner>
           </Portal>
-        </Menu.Root>
+        </Dialog.Root>
       </div>
     </>
   );

package/templates/src/components/codehooks/BunnyVideoSetup.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, type FocusEvent } from 'react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
@@ -162,7 +162,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
   };
 
   const saveChanges = (
-    customChapters?: Chapter[] | React.FocusEvent<HTMLInputElement>
+    customChapters?: Chapter[] | FocusEvent<HTMLInputElement>
   ) => {
     if (!customChapters || 'target' in customChapters) {
       updatePaneNode();

package/templates/src/components/codehooks/EpinetDurationSelector.tsx

@@ -2,7 +2,10 @@ import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import { Select } from '@ark-ui/react/select';
-import { RadioGroup } from '@ark-ui/react/radio-group';
+import {
+  RadioGroup,
+  useRadioGroupItemContext,
+} from '@ark-ui/react/radio-group';
 import { Portal } from '@ark-ui/react/portal';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import CheckCircleIcon from '@heroicons/react/24/outline/CheckCircleIcon';
@@ -49,6 +52,15 @@ interface AvailableFilter {
   values: string[];
 }
 
+const VisitorTypeCheckIcon = () => {
+  const { checked } = useRadioGroupItemContext();
+  return (
+    <div className={`shrink-0 text-cyan-600 ${checked ? 'block' : 'hidden'}`}>
+      <CheckCircleIcon className="h-5 w-5" />
+    </div>
+  );
+};
+
 interface EpinetDurationSelectorProps {
   fullContentMap?: ContentMapItem[];
   isLoading?: boolean;
@@ -382,6 +394,16 @@ const EpinetDurationSelector = ({
     @media (min-width: 641px) { .radio-item { flex: 1 1 calc(33.333% - 0.5rem); } }
   `;
 
+  const epinetUserSelectItemStyles = `
+    .epinet-user-select-item[data-highlighted] {
+      background-color: #0891b2;
+      color: #fff;
+    }
+    .epinet-user-select-item[data-highlighted] .text-gray-500 {
+      color: rgb(229 231 235);
+    }
+  `;
+
   const getFilterStatusMessage = () => {
     const needsApply = hasLocalChanges;
     const prefix = needsApply ? 'Press Apply Filters to load' : 'Showing';
@@ -546,6 +568,7 @@ const EpinetDurationSelector = ({
               <div className="duration-selector-container flex flex-col space-y-4 md:space-y-0">
                 <div className="space-y-2">
                   <style>{radioGroupStyles}</style>
+                  <style>{epinetUserSelectItemStyles}</style>
                   <RadioGroup.Root
                     value={localFilters.visitorType}
                     onValueChange={({ value }) =>
@@ -579,9 +602,7 @@ const EpinetDurationSelector = ({
                                 </div>
                               </RadioGroup.ItemText>
                             </div>
-                            <div className="hidden shrink-0 text-cyan-600 data-[state=checked]:block">
-                              <CheckCircleIcon className="h-5 w-5" />
-                            </div>
+                            <VisitorTypeCheckIcon />
                           </div>
                           <RadioGroup.ItemHiddenInput />
                         </RadioGroup.Item>
@@ -817,7 +838,7 @@ const EpinetDurationSelector = ({
                                     <Select.Item
                                       key="empty"
                                       item={{ value: '', label: 'Select user' }}
-                                      className="cursor-pointer select-none p-2 text-sm text-gray-500 hover:bg-slate-100 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                                      className="epinet-user-select-item cursor-pointer select-none p-2 text-sm text-gray-500 hover:bg-slate-100"
                                     >
                                       <Select.ItemText>
                                         Select user
@@ -830,7 +851,7 @@ const EpinetDurationSelector = ({
                                           value: user.id,
                                           label: `${user.id} (${user.count} events)`,
                                         }}
-                                        className="cursor-pointer select-none p-2 text-sm text-gray-700 hover:bg-slate-100 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                                        className="epinet-user-select-item cursor-pointer select-none p-2 text-sm text-gray-700 hover:bg-slate-100"
                                       >
                                         <Select.ItemText>
                                           {user.id}{' '}