@alpaca-editor/core 1.0.3956 → 1.0.3959

package/src/editor/PictureEditor.tsx

@@ -15,6 +15,12 @@ import {
   FieldActionsOverlay,
   FieldActionsOverlayRef,
 } from "./FieldActionsOverlay";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../components/ui/dropdown-menu";
 
 export function PictureEditor({
   field,
@@ -156,8 +162,6 @@ export function PictureEditor({
   return (
     <div
       className="absolute inset-0 flex items-center justify-center"
-      onMouseEnter={() => setShowMenu(true)}
-      onMouseLeave={() => setShowMenu(false)}
       onClick={() => {
         if (!isPageEditor) return;
         const itemId = field.descriptor.item?.id;
@@ -183,68 +187,93 @@ export function PictureEditor({
       style={style}
       data-testid="select-media"
     >
-      {showMenu && (
-        <div className="grid min-w-48 grid-cols-2 items-stretch justify-center gap-1.5 p-3 text-sm">
-          <Btn
-            label="Select"
-            icon="pi pi-image"
-            onClick={() => selectMedia("images")}
-            testId="select-media-button"
-            className="min-w-[80px]"
-          />
+      {/* Dropdown menu with button in bottom right corner */}
+      <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="absolute right-2 bottom-2 flex h-8 w-8 items-center justify-center rounded-full border bg-gray-500 text-white opacity-70 shadow-lg transition-opacity hover:opacity-85"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            data-testid="menu-toggle-button"
+          >
+            <i className="pi pi-ellipsis-v text-xs" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" side="top" sideOffset={8}>
+          <DropdownMenuItem
+            onClick={() => {
+              selectMedia("images");
+              setShowMenu(false);
+            }}
+          >
+            <i className="pi pi-image" />
+            Select
+          </DropdownMenuItem>
+
           {field.value?.allowVideos && (
-            <Btn
-              label="Video"
-              icon="pi pi-video"
-              onClick={() => selectVideo()}
-              testId="video-media-button"
-              className="min-w-[80px]"
-            />
+            <DropdownMenuItem
+              onClick={() => {
+                selectVideo();
+                setShowMenu(false);
+              }}
+            >
+              <i className="pi pi-video" />
+              Video
+            </DropdownMenuItem>
           )}
+
           {notEmpty && (
-            <Btn
-              label="Crop"
-              icon="pi pi-expand"
+            <DropdownMenuItem
               onClick={() => {
                 setShowCropper(true);
+                setShowMenu(false);
               }}
-              testId="crop-media-button"
-              className="min-w-[80px]"
-            />
+            >
+              <i className="pi pi-expand" />
+              Crop
+            </DropdownMenuItem>
           )}
+
           {rawVariant && (
-            <Btn
-              label="Reset"
-              icon="pi pi-times"
-              onClick={() => reset()}
-              testId="reset-media-button"
-              className="min-w-[80px]"
-            />
+            <DropdownMenuItem
+              onClick={() => {
+                reset();
+                setShowMenu(false);
+              }}
+            >
+              <i className="pi pi-times" />
+              Reset
+            </DropdownMenuItem>
           )}
+
           {fieldButtons.map((button) => (
-            <Btn
+            <DropdownMenuItem
               key={button.id}
-              label={button.label}
-              icon={
-                button.isGenerator
-                  ? "pi pi-cog"
-                  : button.icon && button.icon.trim() !== ""
-                    ? button.icon
-                    : "pi pi-bolt"
-              }
               onClick={(e) => {
                 if (button.parameters && button.parameters.length > 0) {
                   fieldActionsOverlay.current?.show(e, button);
                 } else {
                   handleActionClick(button);
                 }
+                setShowMenu(false);
               }}
-              testId={`field-action-${button.id}`}
-              className="min-w-[80px]"
-            />
+            >
+              <i
+                className={
+                  button.isGenerator
+                    ? "pi pi-cog"
+                    : button.icon && button.icon.trim() !== ""
+                      ? button.icon
+                      : "pi pi-bolt"
+                }
+              />
+              {button.label}
+            </DropdownMenuItem>
           ))}
-        </div>
-      )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
       {showCropper && (
         <PictureCropper
           field={field}

package/src/editor/Titlebar.tsx

@@ -3,6 +3,9 @@ import { useEditContext } from "./client/editContext";
 import { useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Logo } from "./ui/Icons";
+import { ActiveUsers } from "./menubar/ActiveUsers";
+import { ItemLanguageVersion } from "./menubar/ItemLanguageVersion";
+import { WorkflowButton } from "./menubar/WorkflowButton";
 
 export function Titlebar() {
   const editContext = useEditContext();
@@ -17,7 +20,7 @@ export function Titlebar() {
   // Get custom title from view's headerTitle function, or fall back to "workbench"
   const title = editContext.view.headerTitle
     ? editContext.view.headerTitle(editContext)
-    : "SiteMagician";
+    : "";
 
   useEffect(() => {
     setMenuOpen(false);
@@ -54,29 +57,15 @@ export function Titlebar() {
   }, [menuOpen]);
 
   return (
-    <div className="z-1 flex min-h-11 items-center justify-between gap-1 bg-gradient-to-r from-gray-900 from-10% to-indigo-950">
-      <div className="relative flex items-center justify-center gap-2 pl-2 font-bold text-white">
-        <a
-          //href="/sitecore/shell/sitecore/client/Applications/Launchpad"
-          onClick={() => {
-            editContext.switchView("splash-screen");
-          }}
-          className="glow-text flex cursor-pointer items-center"
-        >
-          <Logo className="h-6 w-6" />
-          <span className="ml-2 font-mono">{title}</span>
-        </a>
-      </div>
-      <div>{editContext?.view.primaryControls}</div>
+    <div className="z-1 flex h-12 items-center justify-between gap-1 border-b border-gray-200 bg-white px-4">
       {/* Desktop View */}
-      {!isMobile && (
-        <>
-          <div>{editContext?.view.secondaryControls}</div>
-        </>
-      )}
-
+      <ItemLanguageVersion />
+      <div className="flex items-center gap-3">
+        <ActiveUsers />
+        <WorkflowButton />
+      </div>
       {/* Mobile View - Burger Menu */}
-      {isMobile && editContext?.view.secondaryControls && (
+      {/* {isMobile && editContext?.view.secondaryControls && (
         <>
           <button
             ref={buttonRef}
@@ -97,8 +86,7 @@ export function Titlebar() {
               </div>,
               document.body,
             )}
-        </>
-      )}
+        </>     )}*/}
     </div>
   );
 }

package/src/editor/ai/GhostWriter.tsx

@@ -450,7 +450,7 @@ export function GhostWriter() {
 
       <div className="ai-thinking flex-1 overflow-auto text-sm">
         <label className="mb-2 block font-medium">AI Thinking</label>
-        <div className="max-h-[400px] min-h-[200px] overflow-y-auto rounded border bg-gray-50 p-3 text-xs">
+        <div className="max-h-[400px] min-h-[200px] overflow-y-auto rounded border p-3 text-xs">
           {messages.length > 0 ? (
             <AiResponseMessage
               messages={messages}

package/src/editor/client/EditorClient.tsx

@@ -85,6 +85,7 @@ import {
   Comment,
   SuggestedEdit,
   UserInfo,
+  UserPreferences,
 } from "../../types";
 
 import { post } from "../services/serviceHelper";
@@ -120,6 +121,8 @@ import { flushSync } from "react-dom";
 import { getSuggestedEdits } from "../services/suggestedEditsService";
 import { usePageWizard } from "../../page-wizard/usePageWizard";
 import { requestQuota } from "../services/aiService";
+import { saveUserPreferences } from "../services/systemService";
+import { Shrink } from "lucide-react";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -163,12 +166,16 @@ export function EditorClient({
   item: loadItemDescriptor,
   sessionId,
   userInfo,
+  userPreferences,
+  setUserPreferences,
 }: {
   configuration: EditorConfiguration;
   className?: string;
   item?: ItemDescriptor;
   sessionId: string;
   userInfo: UserInfo;
+  userPreferences: UserPreferences;
+  setUserPreferences: (preferences: Partial<UserPreferences>) => void;
 }) {
   const router = useRouter();
 
@@ -269,6 +276,7 @@ export function EditorClient({
   const [suggestedEdits, setSuggestedEdits] = useState<SuggestedEdit[]>([]);
   const [showSuggestedEdits, setShowSuggestedEdits] = useState(false);
   const [showSuggestedEditsDiff, setShowSuggestedEditsDiff] = useState(false);
+
   const [showComments, setShowComments] = useState<boolean>(() => {
     const savedShowComments =
       typeof window !== "undefined"
@@ -286,11 +294,21 @@ export function EditorClient({
   const [selectedComment, setSelectedComment] = useState<Comment>();
 
   const [browseHistory, setBrowseHistory] = useState<HistoryEntry[]>(() => {
-    const savedHistory =
-      typeof window !== "undefined"
-        ? localStorage.getItem("editor.browseHistory")
-        : null;
-    return savedHistory ? JSON.parse(savedHistory) : [];
+    // Convert UserBrowseHistoryEntry[] to HistoryEntry[]
+    if (!userInfo.browseHistory) return [];
+
+    return userInfo.browseHistory.map(
+      (entry): HistoryEntry => ({
+        name: entry.itemName,
+        path: entry.itemPath,
+        id: entry.itemId,
+        version: entry.itemVersion,
+        language: entry.itemLanguage,
+        hasLayout: false, // This will need to be determined from the item
+        templateName: "", // This will need to be determined from the item
+        icon: undefined,
+      }),
+    );
   });
 
   const [centerPanelView, setCenterPanelView] = useState<ReactNode>();
@@ -307,6 +325,9 @@ export function EditorClient({
   const [focusFieldComponentId, setFocusFieldComponentId] = useState<string>();
 
   const [enableCompletions, setEnableCompletions] = useState(false);
+  const [showRightSidebar, setShowRightSidebar] = useState(
+    userPreferences.showRightSidebar ?? true,
+  );
   const [quotaInfo, setQuotaInfo] = useState<QuotaInfo | null>(null);
   const pageWizard = usePageWizard();
 
@@ -414,6 +435,15 @@ export function EditorClient({
     setIsTourActive(true);
   };
 
+  const handleSetShowRightSidebar = (
+    value: boolean | ((prev: boolean) => boolean),
+  ) => {
+    const newValue =
+      typeof value === "function" ? value(showRightSidebar) : value;
+    setShowRightSidebar(newValue);
+    setUserPreferences({ showRightSidebar: newValue });
+  };
+
   const messageHandler = useCallback(
     async (event: any) => {
       if (!event.data.startsWith("{")) return;
@@ -1069,11 +1099,6 @@ export function EditorClient({
             .slice(0, 25),
         ];
 
-        localStorage.setItem(
-          "editor.browseHistory",
-          JSON.stringify(newHistory),
-        );
-
         return newHistory;
       });
     },
@@ -2050,6 +2075,8 @@ export function EditorClient({
       setShowSuggestedEditsDiff,
       enableCompletions,
       setEnableCompletions,
+      showRightSidebar,
+      setShowRightSidebar: handleSetShowRightSidebar,
       quotaInfo,
       isQuotaExceeded: isQuotaExceeded(),
       getQuotaWarningMessage,
@@ -2058,7 +2085,9 @@ export function EditorClient({
       pageWizard,
       webSocketMessages,
       clearWebSocketMessages: () => setWebSocketMessages([]),
-      userInfo,
+      userInfo: userInfo,
+      userPreferences,
+      setUserPreferences,
     };
   }, [
     operations,
@@ -2131,6 +2160,8 @@ export function EditorClient({
     setShowSuggestedEdits,
     showSuggestedEditsDiff,
     setShowSuggestedEditsDiff,
+    showRightSidebar,
+    handleSetShowRightSidebar,
     quotaInfo,
     isQuotaExceeded,
     getQuotaWarningMessage,
@@ -2138,7 +2169,6 @@ export function EditorClient({
     openDialog,
     pageWizard,
     webSocketMessages,
-    userInfo,
   ]);
 
   const modifiedFieldsContext = useMemo(() => {
@@ -2172,6 +2202,15 @@ export function EditorClient({
                     compareView={compareMode}
                     pageViewContext={pageViewContext}
                   />
+                  {/* Return to normal button in top right corner */}
+                  <button
+                    onClick={() => pageViewContext.setFullscreen(false)}
+                    className="fixed top-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
+                    aria-label="Exit fullscreen"
+                    title="Return to normal view"
+                  >
+                    <Shrink className="h-5 w-5" />
+                  </button>
                 </div>
                 {showFullscreenHint && (
                   <div
@@ -2198,11 +2237,14 @@ export function EditorClient({
                   view={currentView}
                   centerPanelView={centerPanelView}
                   rightSidebar={
-                    currentView.rightSidebar && (
+                    currentView.rightSidebar &&
+                    showRightSidebar && (
                       <SidebarView
                         sidebar={currentView.rightSidebar}
                         editContext={editContext}
                         active={true}
+                        detached={true}
+                        onClose={() => handleSetShowRightSidebar(false)}
                       />
                     )
                   }

package/src/editor/client/editContext.ts

@@ -35,6 +35,7 @@ import {
   AddComponentOperation,
   SuggestedEdit,
   UserInfo,
+  UserPreferences,
 } from "../../types";
 
 import { ConfirmationProps } from "../ConfirmationDialog";
@@ -322,6 +323,9 @@ export type EditContextType = {
   getQuotaWarningMessage: () => string | null;
   isMobile: boolean;
 
+  showRightSidebar: boolean;
+  setShowRightSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+
   openDialog: OpenDialog;
 
   pageWizard: {
@@ -354,6 +358,7 @@ export type EditContextType = {
   webSocketMessages: WebSocketMessage[];
   clearWebSocketMessages: () => void;
   userInfo: UserInfo;
+  setUserPreferences: (preferences: Partial<UserPreferences>) => void;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

package/src/editor/client/operations.ts

@@ -732,7 +732,7 @@ async function getOrMergeSuggestedEditOp(
       edit.itemId === item.id &&
       edit.fieldId === field.fieldId &&
       edit.author === (state.user?.name || "unknown") &&
-      edit.status === "Pending", // or any status that indicates it's open for further editing.
+      edit.status === "pending", // or any status that indicates it's open for further editing.
   );
 
   if (existing) {
@@ -758,7 +758,7 @@ async function getOrMergeSuggestedEditOp(
       fieldId: field.fieldId,
       oldValue: fieldItem.rawValue || "",
       newValue: newVal || "",
-      status: "Pending",
+      status: "pending",
       type: "FieldValue",
     };
 

package/src/editor/client/pageModelBuilder.ts

@@ -142,10 +142,7 @@ export function usePageModel(
           : undefined;
 
       const name =
-        skeleton.name ||
-        (datasourceItem?.name && skeleton.type
-          ? `${datasourceItem.name} (${skeleton.type})`
-          : datasourceItem?.name || skeleton.type || "unknown");
+        skeleton.name || datasourceItem?.name || skeleton.type || "unknown";
 
       const mapItem = (x: RenderedItemSkeleton): RenderedItem | null => {
         const item = getItem(x);
@@ -166,7 +163,7 @@ export function usePageModel(
         placeholders,
         isShared: !(datasourceItem?.path.startsWith(pageItem.path) || true),
         parentPlaceholder,
-        type: datasourceItem?.templateName || "", // TODO: We need the name for AI page wizard - we should not use the template name
+        type: datasourceItem?.templateName || name, // TODO: We need the name for AI page wizard - we should not use the template name
         typeId: skeleton.typeId || datasourceItem?.templateId || "",
         canBeMoved:
           !datasourceItem ||
@@ -178,7 +175,6 @@ export function usePageModel(
         const editable = options?.editable ?? false;
         const insOpts = options?.insertOptions ?? [];
 
-
         const placeholder: Placeholder = {
           ...x,
           components: [],
@@ -210,7 +206,7 @@ export function usePageModel(
       editRevision: pageSkeleton.editRevision,
     };
 
-    //console.log("Page model updated", performance.now() - start);
+    console.log("Page model updated", page);
     setPage(page);
   };