@alpaca-editor/core 1.0.3955 → 1.0.3959

package/src/editor/menubar/ItemLanguageVersion.tsx

@@ -7,6 +7,7 @@ import { VersionSelector } from "./VersionSelector";
 import { NavButtons } from "./NavButtons";
 import { getItemDescriptor } from "../utils";
 import { confirmCreateVersion } from "../utils/itemutils";
+import { ItemActionsMenu } from "./ItemActionsMenu";
 
 export function ItemLanguageVersion() {
   const editContext = useEditContext();
@@ -63,14 +64,15 @@ export function ItemLanguageVersion() {
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-3">
       <PageSelector itemDescriptor={item} />
-      <Separator />
+      <ItemActionsMenu isMobile={false} />
+
       {languageSelector}
-      <Separator />
       {versionSelector}
-      <Separator />
-      <NavButtons />
+
+      {/* <Separator /> */}
+      {/* <NavButtons /> */}
     </div>
   );
 }

package/src/editor/menubar/LanguageSelector.tsx

@@ -1,32 +1,45 @@
 "use client";
 
-import { ArrowDownIcon } from "../ui/Icons";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { useRef, useState } from "react";
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
 import { InputSwitch } from "primereact/inputswitch";
 import { useEditContext } from "../client/editContext";
-
 import { Language } from "../pageModel";
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+import { Switch } from "../../components/ui/switch";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 export function LanguageSelector({
   selectedLanguage,
-  darkMode,
   onLanguageSelected,
   showAllLanguagesSwitch,
   showAllLanguages = false,
   disabled = false,
 }: {
   selectedLanguage: string | undefined;
-  darkMode?: boolean;
   onLanguageSelected: (language: Language) => void;
   showAllLanguagesSwitch?: boolean;
   showAllLanguages?: boolean;
   disabled?: boolean;
 }) {
-  const overlaypanel = useRef<OverlayPanel>(null);
+  const [open, setOpen] = React.useState(false);
   const [showAllLanguagesInternal, setShowAllLanguagesInternal] =
-    useState(showAllLanguages);
-  const [filterText, setFilterText] = useState("");
+    React.useState(showAllLanguages);
+  const [filterText, setFilterText] = React.useState("");
   const editContext = useEditContext();
 
   const allLanguages = editContext?.itemLanguages || [];
@@ -50,20 +63,18 @@ export function LanguageSelector({
 
   const selectLanguage = async (language: Language) => {
     onLanguageSelected(language);
-    overlaypanel.current?.hide();
+    setOpen(false);
     // Reset filter when language is selected
     setFilterText("");
     return;
   };
 
-  const handlePanelShow = () => {
-    // Reset filter when panel opens
-    setFilterText("");
-  };
-
-  const handlePanelHide = () => {
-    // Reset filter when panel closes
-    setFilterText("");
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (!open) {
+      // Reset filter when popover closes
+      setFilterText("");
+    }
   };
 
   // Function to highlight matching characters
@@ -84,49 +95,37 @@ export function LanguageSelector({
   };
 
   return (
-    <>
-      <div
-        className={`flex cursor-pointer items-center gap-3 p-[7px] py-[5px] text-sm ${
-          darkMode
-            ? "text-gray-500 hover:bg-gray-300"
-            : "text-gray-200 hover:bg-gray-500"
-        } rounded-md ${disabled ? "opacity-50" : ""}`}
-        data-testid="language-selector"
-        onClick={(ev) => {
-          if (disabled) return;
-          overlaypanel.current?.toggle(ev, ev.currentTarget);
-        }}
-      >
-        <div className="flex gap-2">
-          {currentLanguage && (
-            <>
-              <img src={currentLanguage.icon} className="h-5" />{" "}
-              {currentLanguage.name}
-            </>
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "text-dark border-gray-3 text-2xs roundedborder flex h-8 w-auto min-w-[120px] cursor-pointer items-center justify-between gap-3 p-[7px] font-medium hover:bg-gray-50",
+            disabled ? "cursor-not-allowed opacity-50" : "",
           )}
-          {!currentLanguage && <div>Select language</div>}
-        </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 language"
-          data-pc-section="trigger"
+          data-testid="language-selector"
+          disabled={disabled}
         >
-          <ArrowDownIcon />
-        </div>
-      </div>
-      <OverlayPanel
-        dismissable={true}
-        ref={overlaypanel}
-        closeOnEscape
-        onShow={handlePanelShow}
-        onHide={handlePanelHide}
-      >
-        <div className="flex max-h-[50vh] min-w-64 flex-col">
+          <div className="flex items-center gap-2">
+            {currentLanguage && (
+              <>
+                <img
+                  src={currentLanguage.icon}
+                  className="h-5"
+                  alt={currentLanguage.name}
+                />
+                {currentLanguage.name}
+              </>
+            )}
+            {!currentLanguage && <div>Select language</div>}
+          </div>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0" align="start">
+        <Command>
           {showAllLanguagesSwitch && (
             <div className="flex items-center justify-center gap-2 p-2 text-xs">
               <span
@@ -135,9 +134,12 @@ export function LanguageSelector({
               >
                 Item languages
               </span>
-              <InputSwitch
+
+              <Switch
                 checked={showAllLanguagesInternal}
-                onChange={(e) => setShowAllLanguagesInternal(e.value)}
+                onCheckedChange={(checked) =>
+                  setShowAllLanguagesInternal(checked)
+                }
               />
               <span
                 className="cursor-pointer"
@@ -147,80 +149,49 @@ export function LanguageSelector({
               </span>
             </div>
           )}
-
-          {/* Language filter input */}
-          <div className="border-b px-2 pt-2 pb-1">
-            <div className="relative flex items-center">
-              <input
-                type="text"
-                placeholder="Filter..."
-                value={filterText}
-                onChange={(e) => setFilterText(e.target.value)}
-                className="w-full rounded border border-gray-300 px-2 py-1 pr-6 text-xs focus:border-blue-400 focus:ring-1 focus:ring-blue-400 focus:outline-none"
-                autoFocus
-              />
-              {!filterText && (
-                <i className="pi pi-search absolute right-2 text-xs text-gray-400" />
-              )}
-              {filterText && (
-                <i
-                  className="pi pi-times absolute right-2 cursor-pointer text-xs text-gray-400 hover:text-gray-600"
-                  onClick={() => setFilterText("")}
-                />
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1 overflow-y-auto">
-            <div className="flex flex-col text-sm">
-              {languages.map((x) => (
-                <div
-                  key={x.languageCode}
-                  className="flex cursor-pointer items-center p-2 hover:bg-gray-200"
-                  onClick={() => selectLanguage(x)}
+          <CommandInput
+            placeholder="Filter languages..."
+            value={filterText}
+            onValueChange={setFilterText}
+            className="my-2"
+          />
+          <CommandList className="max-h-[50vh]">
+            <CommandEmpty>
+              {filterText.trim()
+                ? `No languages found matching "${filterText}"`
+                : "This item has no languages"}
+            </CommandEmpty>
+            <CommandGroup>
+              {languages.map((language) => (
+                <CommandItem
+                  key={language.languageCode}
+                  value={language.languageCode}
+                  onSelect={() => selectLanguage(language)}
+                  className="flex items-center gap-2 px-2 py-2 text-xs"
                 >
-                  <img src={x.icon} className="mr-2 h-5" />
-                  {highlightMatch(x.name, filterText)} ({x.versions})
-                </div>
+                  <img
+                    src={language.icon}
+                    className="h-5 w-5 shrink-0"
+                    alt={language.name}
+                  />
+                  <span className="flex-1">
+                    {highlightMatch(language.name, filterText)} (
+                    {language.versions})
+                  </span>
+                  <Check
+                    className={cn(
+                      "h-4 w-4",
+                      selectedLanguage === language.languageCode
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                </CommandItem>
               ))}
-            </div>
-            {languages.length === 0 && filterText.trim() && (
-              <div className="p-2 text-xs text-gray-500">
-                No languages found matching "{filterText}"
-              </div>
-            )}
-            {languages.length === 0 && !filterText.trim() && (
-              <div className="p-2 text-gray-500">
-                This item has no languages
-              </div>
-            )}
-          </div>
-        </div>
-        {/* {!readOnly && (
-          <div className="border-t p-2 flex flex-col">
-            <div className="text-xs text-gray-500 mb-2 flex items-center gap-1">
-              <ArrowDownIcon /> Actions
-            </div>
-            <div className="flex gap-2">
-              <Button
-                size="small"
-                icon="pi pi-globe"
-                label="Localize"
-                onClick={(event) => {
-                  if (!editContext?.contentEditorItem) return;
-                  editContext?.executeCommand({
-                    command: editContext.configuration.commands.localizeItem,
-                    data: {
-                      items: [editContext.contentEditorItem],
-                    },
-                    event,
-                  });
-                }}
-              ></Button>
-            </div>
-          </div>
-        )} */}
-      </OverlayPanel>
-    </>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/editor/menubar/PageSelector.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
 import { useEditContext } from "../client/editContext";
-import { BrowseHistory } from "./BrowseHistory";
-import { ArrowDownIcon } from "../ui/Icons";
+
 import { InputText } from "primereact/inputtext";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { useDebouncedCallback } from "use-debounce";
@@ -15,13 +13,18 @@ import { ItemTreeNodeData } from "../services/contentService";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { executeSearch } from "../services/aiService";
 import { ItemList } from "../ui/ItemList";
+import { DotsVerticalIcon } from "@radix-ui/react-icons";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../components/ui/popover";
 
 export function PageSelector({
   itemDescriptor,
 }: {
   itemDescriptor: ItemDescriptor;
 }) {
-  const overlaypanel = useRef<OverlayPanel>(null);
   const editContext = useEditContext();
   const [item, setItem] = useState<FullItem | undefined>();
   const [showHistory, setShowHistory] = useState(false);
@@ -30,6 +33,7 @@ export function PageSelector({
   const [searchResults, setSearchResults] = useState<ResultItem[]>([]);
   const [historyResults, setHistoryResults] = useState<ResultItem[]>([]);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const loadItem = (
@@ -48,7 +52,7 @@ export function PageSelector({
       language: itemDescriptor.language,
       version: itemDescriptor.version || 0,
     });
-    overlaypanel.current?.hide();
+    setOpen(false);
   };
 
   const handleSearch = useDebouncedCallback(async (searchPrompt: string) => {
@@ -165,10 +169,10 @@ export function PageSelector({
   }, [itemDescriptor]);
 
   useEffect(() => {
-    if (inputRef.current) {
+    if (inputRef.current && open) {
       inputRef.current.focus();
     }
-  }, [showHistory]);
+  }, [open, showHistory]);
 
   if (!editContext) return null;
 
@@ -176,27 +180,21 @@ export function PageSelector({
   const hasResults = currentResults.length > 0;
 
   return (
-    <>
-      <div
-        id="page-selector-button"
-        className="flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[5px] text-sm text-gray-200 hover:bg-gray-500"
-        onClick={(ev) => overlaypanel.current?.toggle(ev, ev.currentTarget)}
-        data-testid="page-selector-button"
-      >
-        {item?.name || "unknown"}
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
         <div
-          className="p-dropdown-trigger"
-          role="button"
-          aria-haspopup="listbox"
-          aria-expanded="false"
-          aria-label="Select a page"
-          data-pc-section="trigger"
+          id="page-selector-button"
+          className="text-dark text-sm0 flex cursor-pointer items-center gap-3 rounded-md p-[7px] py-[9px]"
+          data-testid="page-selector-button"
         >
-          <ArrowDownIcon />
+          <div className="flex flex-col">
+            <div className="text-sm font-medium">{item?.name || "unknown"}</div>
+            <div className="text-xs text-gray-500">{item?.path}</div>
+          </div>
         </div>
-      </div>
-      <OverlayPanel dismissable={true} ref={overlaypanel} closeOnEscape>
-        <div className="flex h-[75vh] max-w-96 min-w-96 flex-col overflow-hidden">
+      </PopoverTrigger>
+      <PopoverContent className="w-96 p-0" align="start">
+        <div className="flex h-[75vh] max-h-[600px] max-w-96 min-w-96 flex-col overflow-hidden">
           {/* Search/Filter bar with view toggle buttons */}
           <div className="flex gap-2 border-b border-gray-200 p-2">
             <div className="relative flex-1">
@@ -272,7 +270,7 @@ export function PageSelector({
             </div>
           </div>
         </div>
-      </OverlayPanel>
-    </>
+      </PopoverContent>
+    </Popover>
   );
 }