@alpaca-editor/core 1.0.3813 → 1.0.3817

package/src/components/ui/context-menu.tsx

@@ -0,0 +1,250 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/src/config/config.tsx

@@ -31,7 +31,6 @@ import {
   EditIcon,
   GraphQLIcon,
   JsonIcon,
-  NavigatorIcon,
   PageWizardIcon,
   WizardIcon,
 } from "../editor/ui/Icons";
@@ -51,7 +50,7 @@ import { ItemLanguageVersion } from "../editor/menubar/ItemLanguageVersion";
 import { ActiveUsers } from "../editor/menubar/ActiveUsers";
 import { Validation } from "../editor/sidebar/Validation";
 import { Separator } from "../editor/menubar/Separator";
-import { Field, FieldButton, FullItem } from "../editor/pageModel";
+import { FullItem } from "../editor/pageModel";
 import { LinkValue } from "../editor/fieldTypes";
 import {
   deleteItemCommand,
@@ -91,6 +90,7 @@ import { getWizards } from "../page-wizard/service";
 import { startPageWizardCommand } from "../page-wizard/startPageWizardCommand";
 import { ImageFieldEditor } from "../editor/field-types/ImageFieldEditor";
 import { FieldAction } from "./types";
+import { Layers } from "lucide-react";
 
 const defaultRichTextEditorProfile: RichTextEditorProfile = {
   toolbar: {
@@ -129,7 +129,7 @@ const pageEditorRightSidebar = {
   panels: [
     {
       name: "component-tree",
-      icon: <NavigatorIcon />,
+      icon: <Layers size={14} />,
       title: "Component Navigator",
       content: <ComponentTree />,
       initialSize: 20,
@@ -388,7 +388,7 @@ export const getConfiguration = (): EditorConfiguration => {
               {
                 name: "comments",
                 icon: "pi pi-comments",
-                title: "Comments",
+                title: "Comments & Suggestions",
                 content: <Comments />,
                 initialSize: 65,
                 noOverflow: true,

package/src/config/types.ts

@@ -85,10 +85,12 @@ export type ViewPanel = {
 
 export type MenuItem = {
   id: string;
-  label: string;
-  icon: ReactNode;
+  label?: string;
+  icon?: ReactNode;
   items?: MenuItem[];
   command?: (event: any) => Promise<void>;
+  disabled?: boolean;
+  separator?: boolean;
 };
 
 export type EditorConfiguration = {

package/src/editor/ComponentInfo.tsx

@@ -47,13 +47,11 @@ export function ComponentInfo({ component }: { component: Component | null }) {
 
   return (
     <div>
-      <h2 className="py-3 px-3 text-l font-bold my-2">
-        {component.name}
-      </h2>
+      <h2 className="text-l my-2 px-3 py-3 font-bold">{component.name}</h2>
       <Section title="Info">
-        <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs bg-gray-100">
+        <div className="grid grid-cols-[min-content_1fr] gap-3 bg-gray-100 text-xs">
           <div className="font-bold">ID:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {component.id} <CopyToClipboardButton text={component.id} />
           </div>
           <div className="font-bold">Template</div>

package/src/editor/ConfirmationDialog.tsx

@@ -11,7 +11,7 @@ export type ConfirmationProps = {
   header?: React.ReactNode;
   acceptLabel?: string;
   rejectLabel?: string;
-  icon?: string;
+  icon?: React.ReactNode;
   accept: () => void;
   reject?: () => void;
   showCancel?: boolean;

package/src/editor/ContextMenu.tsx

@@ -1,11 +1,16 @@
-import { MenuItem, MenuItemCommandEvent } from "primereact/menuitem";
-
 import { EditContextType } from "./client/editContext";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { ContextMenu } from "primereact/contextmenu";
 
 import { FieldDescriptor } from "../types";
 import { Component, FieldButton } from "./pageModel";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../components/ui/context-menu";
+import { MenuItem } from "../config/types";
 
 // export function getFieldContextMenu(
 //   field: Field,
@@ -64,11 +69,11 @@ export function showComponentContextMenu(
   components: Component[],
   editContext: EditContextType,
   field?: FieldDescriptor,
-  fieldButtons?: FieldButton[]
+  fieldButtons?: FieldButton[],
 ) {
   const componentCommandMenuItems = getComponentMenuItems(
     editContext,
-    components
+    components,
   );
 
   const menuItems = componentCommandMenuItems;
@@ -76,28 +81,29 @@ export function showComponentContextMenu(
   if (!editContext.readonly && field && fieldButtons?.length) {
     if (menuItems.length)
       menuItems.push({
+        id: "separator",
         separator: true,
       });
 
     fieldButtons.forEach((button) => {
       menuItems.push({
+        id: button.id,
         label: button.label,
-        command: () => {
+        command: async () => {
           editContext!.triggerFieldAction(field, button);
         },
-        icon: button.icon ? "pi " + button.icon : undefined,
+        icon: button.icon ? <img src={button.icon} width={16} /> : undefined,
       });
     });
   }
 
   return (e: any) => {
-    if (!e.shiftKey && !e.altKey) {      
-      if(menuItems.length) {
-
-//        editContext.select([component.id]);
+    if (!e.shiftKey && !e.altKey) {
+      if (menuItems.length) {
+        //        editContext.select([component.id]);
         editContext!.showContextMenu(e, menuItems);
       }
-      
+
       return true;
     }
     return false;
@@ -115,7 +121,8 @@ export const EditContextMenu = forwardRef<
   EditContextMenuRef,
   EditContextMenuProps
 >((props, ref) => {
-  const cm = useRef<ContextMenu>(null);
+  const canvasRef = useRef<HTMLSpanElement>(null);
+
   const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
   if (!props) return;
   useImperativeHandle(ref, () => ({
@@ -123,30 +130,72 @@ export const EditContextMenu = forwardRef<
       if (!e.ctrlKey && !e.shiftKey && !e.altKey) {
         setMenuItems(items);
         e.preventDefault();
-        cm.current?.show(e);
+        triggerRightClick(canvasRef.current!, {
+          position: { x: e.clientX, y: e.clientY },
+        });
       }
     },
     close: (event: any) => {
-      cm.current?.hide(event);
+      //  cm.current?.hide(event);
     },
   }));
 
-  return <ContextMenu model={menuItems} ref={cm} />;
+  const triggerRightClick = (
+    element: HTMLSpanElement,
+    { position }: { position: any },
+  ) => {
+    const event = new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: position.x,
+      clientY: position.y,
+    });
+    element.dispatchEvent(event);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <span id="contextmenu_canvas" ref={canvasRef}>
+          CM trigger
+        </span>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        {menuItems.map((item, index) =>
+          item.separator ? (
+            <ContextMenuSeparator />
+          ) : (
+            <ContextMenuItem
+              key={index}
+              onClick={item.command}
+              disabled={item.disabled}
+              className="cursor-pointer"
+            >
+              {item.icon}
+              {item.label}
+            </ContextMenuItem>
+          ),
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+  // return <ContextMenu model={menuItems} ref={cm} />;
 });
 function getComponentMenuItems(
   editContext: EditContextType,
-  components: Component[]
+  components: Component[],
 ): MenuItem[] {
   const componentCommands = editContext.getComponentCommands(components);
 
   const componentCommandMenuItems = componentCommands.map((x) => {
     return {
+      id: x.id,
       label: x.label,
       icon: x.icon,
-      command: (ev: MenuItemCommandEvent) =>
+      command: (ev: React.SyntheticEvent) =>
         editContext.executeCommand({
           command: x,
-          event: ev.originalEvent,
+          event: ev,
         }),
       disabled: editContext.isCommandDisabled({ command: x }),
     };

package/src/editor/EditorWarnings.tsx

@@ -11,7 +11,7 @@ export type EditorWarningProps = {
 
 export function EditorWarnings({ item }: { item?: FullItem }) {
   var context = useEditContext();
-  if (!context || context.previewMode) return;
+  if (!context || context.mode === "preview") return;
 
   if (!item) {
     item = context.page?.item;
@@ -26,7 +26,7 @@ export function EditorWarnings({ item }: { item?: FullItem }) {
           item,
           key: "warning" + i,
           editContext: context!,
-        })
+        }),
       )}
     </div>
   );

package/src/editor/FieldList.tsx

@@ -46,7 +46,7 @@ export function FieldList({
 
   return (
     <div>
-      <div className="sticky  bg-gray-50 top-0 z-10 flex gap-2 border-y border-gray-200 items-center p-2 tour-field-list">
+      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-y border-gray-200 bg-gray-50 p-2">
         <i className="pi pi-search" />
         <div className="text-xs">Filter</div>
         <InputText
@@ -69,7 +69,7 @@ export function FieldList({
               checked={showStandardFields}
               onChange={(e: any) => setShowStandardFields(e.checked)}
             />{" "}
-            <label htmlFor={uniqueId} className="text-xs cursor-pointer">
+            <label htmlFor={uniqueId} className="cursor-pointer text-xs">
               Show standard fields
             </label>
           </>
@@ -79,7 +79,7 @@ export function FieldList({
       {fields.map((itemFields, index) => (
         <Fragment key={index}>
           {itemFields.headline && (
-            <div className="text-sm mt-2 py-2 border-b flex items-center gap-1">
+            <div className="mt-2 flex items-center gap-1 border-b py-2 text-sm">
               <i className="pi pi-angle-right" /> {itemFields.headline}
             </div>
           )}
@@ -133,7 +133,7 @@ function FieldListForSingleItem({
     fieldsArray = fieldsArray.filter(
       (x) =>
         x.name?.toLowerCase().includes(searchFilterLower) ||
-        x.displayName?.toLowerCase().includes(searchFilterLower)
+        x.displayName?.toLowerCase().includes(searchFilterLower),
     );
   }
 
@@ -158,7 +158,7 @@ function FieldListForSingleItem({
   const sectionList: Field[][] = Object.values(sectionsGrouping);
   sectionList.sort(
     (a: Field[], b: Field[]) =>
-      (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0)
+      (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0),
   );
 
   function getSectionFields(fields: Field[]) {
@@ -185,6 +185,6 @@ function FieldListForSingleItem({
         <Section key={section} title={section!}>
           {getSectionFields(sectionsGrouping[section!])}
         </Section>
-      )
+      ),
     );
 }

package/src/editor/FieldListFieldWithFallbacks.tsx

@@ -50,17 +50,17 @@ export function FieldListFieldWithFallbacks({
   async function loadFallback() {
     if (!field?.fallbackChain || !editContext) return;
     await editContext.itemsRepository.getItems(
-      field.fallbackChain?.map((x) => x.item)
+      field.fallbackChain?.map((x) => x.item),
     );
 
     setFallbackChain(
       (
         await Promise.all(
           field.fallbackChain.map((x) =>
-            editContext.itemsRepository.getField(x)
-          )
+            editContext.itemsRepository.getField(x),
+          ),
         )
-      ).filter((x) => x) as Field[]
+      ).filter((x) => x) as Field[],
     );
     //const chain = await loadFallbackChain(field.descriptor);
 
@@ -142,12 +142,12 @@ export function FieldListFieldWithFallbacks({
 
   const showFallbackButton = field?.isFallback && (
     <button
-      className="text-xs p-0"
+      className="p-0 text-xs"
       onClick={() => setShowFallback(!showFallback)}
     >
       <i
         className={
-          "text-xs pi " + (showFallback ? "pi-check-square" : "pi-stop")
+          "pi text-xs " + (showFallback ? "pi-check-square" : "pi-stop")
         }
       />{" "}
       Fallback
@@ -163,7 +163,7 @@ export function FieldListFieldWithFallbacks({
       key={field.id}
       data-field-id={field.id}
       ref={ref}
-      className="[&:not(:first-child)]:mt-4"
+      className="px-2 [&:not(:first-child)]:mt-4"
       onClickCapture={() => {
         editContext.setFocusedField(field.descriptor, field.canWrite || false);
       }}
@@ -183,8 +183,8 @@ export function FieldListFieldWithFallbacks({
           {fallbackChain &&
             fallbackChain.map((x, i) => (
               <div className="ml-3" key={i}>
-                <div className="text-center mb-4">
-                  <i className="pi pi-arrow-up text-xl font-bold text-blue-300 fallback-arrow-animation relative top-3" />
+                <div className="mb-4 text-center">
+                  <i className="pi pi-arrow-up fallback-arrow-animation relative top-3 text-xl font-bold text-blue-300" />
                 </div>
                 <FieldListField
                   key={i}

package/src/editor/ImageEditor.tsx

@@ -11,7 +11,7 @@ export function ImageEditor({
   field: ImageField;
   style?: React.CSSProperties;
 }) {
-  const [showMenu, setShowMenu] = useState(false);
+  const [showMenu, setShowMenu] = useState(true);
   const editContext = useEditContext();
   const dialogContext = useDialog();
 
@@ -72,7 +72,7 @@ export function ImageEditor({
           />
         )}
         {showMenu && (
-          <div className="absolute inset-0 grid grid-cols-1 items-stretch justify-center gap-1.5 bg-black/50 p-3 text-sm">
+          <div className="absolute inset-0 grid grid-cols-1 items-center justify-center gap-1.5 bg-black/50 p-3 text-sm">
             <Btn
               label={getImageSrc() ? "Change Image" : "Select Image"}
               icon="pi pi-image"

package/src/editor/ItemInfo.tsx

@@ -20,7 +20,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
 
   return (
     <div>
-      <div className="flex items-center py-2 px-3 my-2">
+      <div className="my-2 flex items-center px-3 py-2">
         <img
           src={item.largeIcon}
           alt="Icon"
@@ -45,11 +45,11 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
       <Section title="Info">
         <div className="grid grid-cols-[min-content_1fr] gap-3 text-xs">
           <div className="font-bold">ID:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {item.id} <CopyToClipboardButton text={item.id} />
           </div>
           <div className="font-bold">Path:</div>
-          <div>
+          <div className="flex items-center gap-1">
             {item.path} <CopyToClipboardButton text={item.path} />
           </div>
           <div className="font-bold">Language:</div>
@@ -57,7 +57,7 @@ export function ItemInfo({ item }: { item: FullItem | null }) {
           <div className="font-bold">Version:</div>
           <div>{item.versions > 0 ? item.version : "No versions"}</div>
           <div className="font-bold">Template:</div>
-          <div>
+          <div className="flex items-center gap-1">
             <span
               className="cursor-pointer hover:underline"
               onClick={() => {