@alpaca-editor/core 1.0.3956 → 1.0.3960

package/src/editor/menubar/PageViewerControls.tsx

@@ -1,9 +1,18 @@
-import { classNames } from "primereact/utils";
 import { useEditContext } from "../client/editContext";
 import { Separator } from "./Separator";
 import { CompareIcon, FormEditIcon } from "../ui/Icons";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Route, SquarePen, UserRoundPen, EyeIcon, Pencil } from "lucide-react";
+import {
+  EyeIcon,
+  MessagesSquare,
+  Pencil,
+  Monitor,
+  Smartphone,
+  Table,
+  Plus,
+  Layers,
+} from "lucide-react";
+import { EnterFullScreenIcon } from "@radix-ui/react-icons";
 
 export function PageViewerControls() {
   const editContext = useEditContext();
@@ -17,104 +26,143 @@ export function PageViewerControls() {
   const device = pageViewContext.device;
   const setDevice = pageViewContext.setDevice;
 
+  // Insert mode logic
+  const insertMode = editContext.insertMode;
+
+  const toggleInsertMode = () => {
+    editContext.setInsertMode(true);
+  };
+
+  // Calculate total count of comments and suggestions
+  const commentsCount =
+    editContext.comments?.filter((x) => !x.isResolved).length || 0;
+  const suggestionsCount =
+    editContext.suggestedEdits?.filter((x) => x.status === "pending").length ||
+    0;
+  const totalCount = commentsCount + suggestionsCount;
+
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center justify-between gap-2 border-b px-4 py-2">
       {hasLayout && (
         <>
-          {!editContext.user?.isLimitedPreviewUser && (
+          <div className="flex items-center gap-2">
+            {!editContext.user?.isLimitedPreviewUser && (
+              <SimpleIconButton
+                icon={<Pencil className="h-6 w-6 p-1" strokeWidth={1} />}
+                label="Edit"
+                size="large"
+                selected={editContext.mode === "edit"}
+                onClick={() => editContext.setMode("edit")}
+              />
+            )}
+
             <SimpleIconButton
-              icon={<Pencil className="h-6 w-6 p-1" />}
-              label="Edit"
-              dark={true}
+              icon={<EyeIcon className="h-6 w-6 p-1" strokeWidth={1} />}
+              label="Preview"
               size="large"
-              selected={editContext.mode === "edit"}
-              onClick={() => editContext.setMode("edit")}
+              selected={editContext.mode === "preview"}
+              onClick={() => editContext.setMode("preview")}
             />
-          )}
-
-          <SimpleIconButton
-            icon={<EyeIcon className="h-6 w-6 p-1" />}
-            label="Preview"
-            dark={true}
-            size="large"
-            selected={editContext.mode === "preview"}
-            onClick={() => editContext.setMode("preview")}
-          />
 
-          <SimpleIconButton
-            selected={editContext?.mode === "suggestions"}
-            icon={<UserRoundPen size={24} className="p-0.5" />}
-            label="Write suggestions"
-            dark={true}
-            size="large"
-            onClick={() => editContext?.setMode("suggestions")}
-          />
-          <Separator size="large" />
+            <div className="relative">
+              <SimpleIconButton
+                selected={editContext?.mode === "suggestions"}
+                icon={
+                  <MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />
+                }
+                label="Write suggestions"
+                size="large"
+                onClick={() => editContext?.setMode("suggestions")}
+              />
+              {totalCount > 0 && (
+                <div className="bg-theme-secondary text-3xs absolute -top-1 -right-1 flex h-[16px] min-w-[16px] items-center justify-center rounded-full px-1 text-white">
+                  {totalCount > 99 ? "99+" : totalCount}
+                </div>
+              )}
+            </div>
+            <Separator size="large" />
+            <SimpleIconButton
+              icon={<Plus className="h-6 w-6 p-1" strokeWidth={1} />}
+              label="Add Component"
+              size="large"
+              selected={insertMode}
+              onClick={toggleInsertMode}
+              disabled={
+                !editContext.page?.item.canWriteItem ||
+                editContext.mode !== "edit"
+              }
+            />
+          </div>
           {!editContext.isMobile && (
-            <>
-              <i
-                className={classNames(
-                  device === "desktop"
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "pi pi-desktop cursor-pointer rounded-full p-2",
-                )}
-                title="Desktop"
-                onClick={() => {
-                  setDevice("desktop");
-                }}
+            <div className="flex items-center gap-2">
+              <SimpleIconButton
+                icon={<Monitor className="h-6 w-6 p-1" strokeWidth={1} />}
+                label="Desktop"
+                size="large"
+                selected={device === "desktop"}
+                onClick={() => setDevice("desktop")}
               />
-              <i
-                className={classNames(
-                  device && device !== "desktop"
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "pi pi-mobile cursor-pointer rounded-full p-2",
-                )}
-                title="Mobile"
+              <SimpleIconButton
+                icon={<Smartphone className="h-6 w-6 p-1" strokeWidth={1} />}
+                label="Mobile"
+                size="large"
+                selected={Boolean(device && device !== "desktop")}
                 onClick={() => {
                   if (editContext.configuration.devices[0]) {
                     setDevice(editContext.configuration.devices[0].name);
                   }
                 }}
               />
-              <i
-                className={classNames(
-                  !device
-                    ? "bg-gray-200"
-                    : "text-gray-400 hover:bg-gray-200 hover:text-gray-800",
-                  "h-8 w-8 cursor-pointer rounded-full p-1",
-                )}
-                title="Form"
-                onClick={() => {
-                  setDevice("");
-                }}
-              >
-                <FormEditIcon />
-              </i>
+              <SimpleIconButton
+                icon={<Table className="h-6 w-6 p-1" strokeWidth={1} />}
+                label="Form"
+                size="large"
+                selected={!device}
+                onClick={() => setDevice("")}
+              />
               <Separator size="large" />
-            </>
+              {!editContext.isMobile && (
+                <SimpleIconButton
+                  icon={<CompareIcon className="h-6 w-6 p-1" />}
+                  label="Compare"
+                  size="large"
+                  className={
+                    editContext.compareMode
+                      ? "text-gray-600"
+                      : "hover:text-gray-600"
+                  }
+                  selected={editContext.compareMode}
+                  onClick={() =>
+                    editContext.setCompareMode(!editContext.compareMode)
+                  }
+                />
+              )}
+            </div>
           )}
-          <i
+          {/* <i
             className="pi pi-external-link cursor-pointer rounded-full p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-800"
             title="Fullscreen"
             onClick={() => pageViewContext.setFullscreen(true)}
-          />
+          /> */}
+          <div className="flex items-center gap-2">
+            <SimpleIconButton
+              icon={<EnterFullScreenIcon className="h-6 w-6 p-1" />}
+              label="Fullscreen"
+              size="large"
+              onClick={() => pageViewContext.setFullscreen(true)}
+            />
+            <SimpleIconButton
+              icon={<Layers className="h-6 w-6 p-1" strokeWidth={1} />}
+              label="Component Navigator"
+              size="large"
+              selected={editContext.showRightSidebar}
+              onClick={() =>
+                editContext.setShowRightSidebar(!editContext.showRightSidebar)
+              }
+            />
+          </div>
         </>
       )}
-      {!editContext.isMobile && (
-        <SimpleIconButton
-          icon={<CompareIcon className="h-6 w-6 p-1" />}
-          label="Compare"
-          size="large"
-          dark={true}
-          className={
-            editContext.compareMode ? "text-gray-600" : "hover:text-gray-600"
-          }
-          selected={editContext.compareMode}
-          onClick={() => editContext.setCompareMode(!editContext.compareMode)}
-        />
-      )}
     </div>
   );
 }

package/src/editor/menubar/PreviewSecondaryControls.tsx

@@ -1,6 +1,5 @@
 import { useEditContext } from "../client/editContext";
 import { PreviewInfo } from "../reviews/PreviewInfo";
-import { ActionsMenu } from "./ActionsMenu";
 
 export const PreviewSecondaryControls = () => {
   const editContext = useEditContext();
@@ -12,7 +11,6 @@ export const PreviewSecondaryControls = () => {
       }`}
     >
       <PreviewInfo />
-      <ActionsMenu isMobile={editContext.isMobile} />
     </div>
   );
 };

package/src/editor/menubar/User.tsx

@@ -17,11 +17,11 @@ export function User({ session }: { session: EditSession }) {
 
   return (
     <div
-      className="rounded-full w-8 h-8 grid items-center justify-center text-white"
+      className="grid h-7 w-7 items-center justify-center rounded-full text-xs font-normal text-white"
       style={{ background: session.color }}
       title={userName + " (" + session.user.email + ")"}
     >
-      {letter}
+      {letter?.toUpperCase()}
     </div>
   );
 }

package/src/editor/menubar/VersionSelector.tsx

@@ -1,13 +1,26 @@
 "use client";
 
-import { ArrowDownIcon } from "../ui/Icons";
-import { useRef } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { Button } from "primereact/button";
+import * as React from "react";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 import { useEditContext } from "../client/editContext";
 import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
 import { getDeleteVersionCommand } from "../commands/deleteVersionCommand";
 import { ItemDescriptor, Version } from "../pageModel";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../../components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 export function VersionSelector({
   itemDescriptor,
@@ -24,119 +37,131 @@ export function VersionSelector({
   darkMode?: boolean;
   versions: Version[];
 }) {
+  const [open, setOpen] = React.useState(false);
   const editContext = useEditContext();
-  const overlaypanel = useRef<OverlayPanel>(null);
 
   if (itemDescriptor == null) return;
 
   const getVersionLabel = () => {
     if (versions.length === 0) return "No versions";
     if (itemDescriptor.version === 0)
-      return "Latest" + (actualVersion ? " (" + actualVersion + ")" : "");
-    return itemDescriptor.version;
+      return (
+        "Latest version" + (actualVersion ? " (" + actualVersion + ")" : "")
+      );
+    return "Version (" + itemDescriptor.version + ")";
+  };
+
+  const selectVersion = async (version: number) => {
+    onVersionSelected(version);
+    setOpen(false);
+  };
+
+  const handleCreateVersion = async () => {
+    await editContext?.executeCommand({
+      command: getCreateAndSwitchToNewVersionCommand({}),
+      event: new Event("click") as any,
+    });
+    setOpen(false);
+    onVersionSelected(0);
+  };
+
+  const handleDeleteVersion = async () => {
+    await editContext?.executeCommand({
+      command: getDeleteVersionCommand({}),
+      event: new Event("click") as any,
+    });
+    setOpen(false);
+    onVersionSelected(0);
   };
 
   return (
-    <>
-      <div
-        data-testid="version-selector"
-        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
-          darkMode
-            ? "text-gray-500 hover:bg-gray-200"
-            : "text-gray-200 hover:bg-gray-500"
-        } a rounded-md`}
-        onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
-      >
-        <div className="flex gap-2">{getVersionLabel()}</div>
-        <div
-          className={`p-dropdown-trigger ${
-            darkMode ? "text-gray-500" : "text-gray-200"
-          }`}
-          role="button"
-          aria-haspopup="listbox"
-          aria-expanded="false"
-          aria-label="Select a version"
-          data-pc-section="trigger"
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "text-dark border-gray-3 flex h-8 w-auto min-w-[120px] cursor-pointer items-center justify-between gap-3 rounded-md border p-[7px] py-[11px] text-xs font-medium hover:bg-gray-50",
+          )}
+          data-testid="version-selector"
         >
-          <ArrowDownIcon />
-        </div>
-      </div>
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="flex max-h-[50vh] min-w-20 flex-col">
-          <div className="flex-1 overflow-auto">
-            <div className="flex flex-col text-sm">
-              {versions.length === 0 && <div className="p-2">No versions</div>}
+          <div className="flex gap-2">{getVersionLabel()}</div>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0" align="start">
+        <Command>
+          <CommandList className="max-h-[50vh]">
+            <CommandEmpty>No versions available</CommandEmpty>
+            <CommandGroup>
               {versions.length > 0 && (
-                <div
+                <CommandItem
                   key="latest"
-                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
-                  onClick={() => {
-                    onVersionSelected(0);
-                    overlaypanel.current?.hide();
-                  }}
+                  value="latest"
+                  onSelect={() => selectVersion(0)}
+                  className="flex items-center gap-2 px-2 py-2 text-xs"
                 >
-                  Latest
-                </div>
+                  <span className="flex-1">Latest</span>
+                  <Check
+                    className={cn(
+                      "h-4 w-4",
+                      itemDescriptor.version === 0
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
               )}
               {versions.map((x) => (
-                <div
+                <CommandItem
                   key={x.version}
-                  className="flex cursor-pointer gap-2 p-2 hover:bg-gray-200"
-                  onClick={() => {
-                    onVersionSelected(x.version);
-                    overlaypanel.current?.hide();
-                  }}
+                  value={x.version.toString()}
+                  onSelect={() => selectVersion(x.version)}
+                  className="flex items-center gap-2 px-2 py-2 text-xs"
                 >
-                  {itemDescriptor.version === x.version && (
-                    <i className="pi pi-check" style={{ fontSize: "1rem" }}></i>
-                  )}{" "}
-                  {x.version}
-                </div>
+                  <span className="flex-1">Version {x.version}</span>
+                  <Check
+                    className={cn(
+                      "h-4 w-4",
+                      itemDescriptor.version === x.version
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
               ))}
-            </div>
-          </div>
-        </div>
-        {!readOnly && (
-          <div className="flex flex-col border-t p-2">
-            <div className="mb-2 flex items-center gap-1 text-xs text-gray-500">
-              <ArrowDownIcon /> Actions
-            </div>
-            <div className="flex gap-2">
-              <Button
-                text
-                size="small"
-                icon="pi pi-plus"
-                label="Add Version"
-                onClick={async (ev) => {
-                  await editContext?.executeCommand({
-                    command: getCreateAndSwitchToNewVersionCommand({}),
-                    event: ev,
-                  });
-                  overlaypanel.current?.hide();
-                  onVersionSelected(0);
-                }}
-              />
-              <Button
-                text
-                size="small"
-                icon="pi pi-times"
-                label="Delete Version"
-                severity="danger"
-                disabled={versions.length === 0}
-                onClick={async (ev) => {
-                  editContext;
-                  await editContext?.executeCommand({
-                    command: getDeleteVersionCommand({}),
-                    event: ev,
-                  });
-                  overlaypanel.current?.hide();
-                  onVersionSelected(0);
-                }}
-              />{" "}
-            </div>
-          </div>
-        )}
-      </OverlayPanel>
-    </>
+            </CommandGroup>
+            {!readOnly && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={handleCreateVersion}
+                    className="flex items-center gap-2 px-2 py-2"
+                  >
+                    <Plus className="h-4 w-4" />
+                    <span>Add Version</span>
+                  </CommandItem>
+                  <CommandItem
+                    onSelect={handleDeleteVersion}
+                    disabled={versions.length === 0}
+                    className={cn(
+                      "flex items-center gap-2 px-2 py-2",
+                      versions.length === 0
+                        ? "cursor-not-allowed opacity-50"
+                        : "text-red-600 hover:text-red-700",
+                    )}
+                  >
+                    <X className="h-4 w-4" />
+                    <span>Delete Version</span>
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/editor/menubar/WorkflowButton.tsx

@@ -0,0 +1,115 @@
+import { useEditContext } from "../client/editContext";
+import { Button } from "../../components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu";
+
+export function WorkflowButton() {
+  const editContext = useEditContext();
+
+  if (!editContext?.currentItemDescriptor) return null;
+
+  // Find the current item in workboxItems to get its workflow commands
+  const currentWorkboxItem = editContext.workboxItems?.find(
+    (item) =>
+      item.item.id === editContext.currentItemDescriptor?.id &&
+      item.item.language === editContext.currentItemDescriptor?.language &&
+      item.item.version === editContext.currentItemDescriptor?.version,
+  );
+
+  const workflowCommands = currentWorkboxItem?.workflowCommands || [];
+
+  // If no workflow commands, show simple publish button
+  if (workflowCommands.length === 0) {
+    return (
+      <Button
+        size="sm"
+        onClick={() => {
+          const publishView = editContext?.configuration.editor.views.find(
+            (x) => x.name === "publish",
+          );
+
+          if (publishView) editContext?.switchView(publishView.name);
+        }}
+      >
+        Publish
+      </Button>
+    );
+  }
+
+  // If only one workflow command, show it as a simple button
+  if (workflowCommands.length === 1) {
+    const command = workflowCommands[0];
+    if (!command) return null;
+    return (
+      <Button
+        size="sm"
+        onClick={() => {
+          editContext.operations.executeWorkflowCommand(
+            editContext.currentItemDescriptor!,
+            command.id,
+          );
+        }}
+      >
+        {command.name}
+      </Button>
+    );
+  }
+
+  // Multiple workflow commands - show as dropdown
+  const firstCommand = workflowCommands[0];
+  if (!firstCommand) return null;
+
+  return (
+    <div className="flex">
+      <Button
+        size="sm"
+        onClick={() => {
+          editContext.operations.executeWorkflowCommand(
+            editContext.currentItemDescriptor!,
+            firstCommand.id,
+          );
+        }}
+      >
+        {firstCommand.name}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="ml-0.5 px-2">
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {workflowCommands.map((command) => (
+            <DropdownMenuItem
+              key={command.id}
+              onClick={() => {
+                editContext.operations.executeWorkflowCommand(
+                  editContext.currentItemDescriptor!,
+                  command.id,
+                );
+              }}
+            >
+              {command.name}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}