Merge branch 'main' into fix-fe-409-editor-context-menu

TEN-framework · Dec 30, 2024 · c255cac · c255cac
2 parents 1c0ae99 + d6ff922
commit c255cac
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 29 deletions.
diff --git a/core/src/ten_manager/designer_frontend/src/components/Popup/EditorPopup.tsx b/core/src/ten_manager/designer_frontend/src/components/Popup/EditorPopup.tsx
@@ -123,6 +123,7 @@ const EditorPopup: React.FC<EditorPopupProps> = ({ data, onClose }) => {
         resizable={true}
         initialWidth={DEFAULT_WIDTH}
         initialHeight={DEFAULT_HEIGHT}
+        contentClassName="p-0"
       >
         <div className="p-0 box-border flex flex-col w-full h-full">
           <Editor

diff --git a/core/src/ten_manager/designer_frontend/src/components/Popup/Popup.tsx b/core/src/ten_manager/designer_frontend/src/components/Popup/Popup.tsx
@@ -31,12 +31,14 @@ interface PopupProps {
 
   onClose: () => void;
   onCollapseToggle?: (isCollapsed: boolean) => void;
+  contentClassName?: string;
 }
 
 const Popup: React.FC<PopupProps> = ({
   title,
   children,
   className,
+  contentClassName,
   resizable = false, // Default to non-resizable.
   preventFocusSteal = false,
   initialWidth,
@@ -230,8 +232,10 @@ const Popup: React.FC<PopupProps> = ({
   return (
     <div
       className={cn(
-        "fixed bg-background border border-border shadow-lg text-sm",
-        "text-foreground rounded focus:outline-none flex flex-col popup",
+        "fixed text-sm overflow-hidden",
+        "bg-background/80 backdrop-blur-sm border border-border/50 shadow-lg",
+        "text-foreground rounded-lg focus:outline-none flex flex-col popup",
+        "transition-opacity duration-200 ease-in-out",
         isVisible ? "opacity-100" : "opacity-0",
         isResizing && "select-none",
         isDragging && "select-none cursor-move",
@@ -258,36 +262,48 @@ const Popup: React.FC<PopupProps> = ({
       <div
         className={cn(
           "p-2.5 flex justify-between items-center cursor-move select-none",
-          "bg-muted border-b border-border"
+          "rounded-t-lg",
+          {
+            ["border-b border-border/50"]: !isCollapsed,
+          }
         )}
         onMouseDown={handleMouseDown}
         ref={headerRef}
       >
-        <span className="font-bold">{title}</span>
+        <span className="font-medium text-foreground/90 font-sans">
+          {title}
+        </span>
         <div className="flex items-center gap-1.5">
           <Button
             variant="ghost"
             size="sm"
-            className="h-auto p-1.5"
+            className="h-auto p-1.5 hover:bg-background/50 transition-colors"
             onClick={toggleCollapse}
           >
-            {isCollapsed ? <ChevronDown /> : <ChevronUp />}
+            {isCollapsed ? (
+              <ChevronDown className="opacity-70" />
+            ) : (
+              <ChevronUp className="opacity-70" />
+            )}
           </Button>
           <Button
             variant="ghost"
             size="sm"
-            className="h-auto p-1.5"
+            className="h-auto p-1.5 hover:bg-background/50 transition-colors"
             onClick={onClose}
           >
-            <X />
+            <X className="opacity-70" />
           </Button>
         </div>
       </div>
 
       <div
         className={cn(
           "p-2.5 overflow-hidden flex w-full h-full",
-          isCollapsed ? "invisible h-0 py-0" : "visible"
+          {
+            ["invisible h-0 py-0"]: isCollapsed,
+          },
+          contentClassName
         )}
       >
         {children}

diff --git a/core/src/ten_manager/designer_frontend/src/flow/ContextMenu/ContextMenu.tsx b/core/src/ten_manager/designer_frontend/src/flow/ContextMenu/ContextMenu.tsx
@@ -6,6 +6,7 @@
 //
 import React from "react";
 
+import { Button } from "@/components/ui/Button";
 import { cn } from "@/lib/utils";
 
 export interface ContextMenuItem {
@@ -29,7 +30,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ visible, x, y, items }) => {
     <div
       className={cn(
         "fixed p-1.5 z-[9999]",
-        "bg-white border border-gray-300 shadow-lg box-border"
+        "bg-popover border border-border rounded-md shadow-md box-border"
       )}
       style={{
         left: x,
@@ -39,25 +40,29 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ visible, x, y, items }) => {
     >
       {items.map((item, index) => (
         <React.Fragment key={index}>
-          {item.separator && <div className="h-px bg-gray-300 my-1.5"></div>}
+          {item.separator && <div className="h-px bg-border my-1"></div>}
           {!item.separator && (
-            <div
+            <Button
+              variant="ghost"
+              asChild
               className={cn(
-                "flex items-center px-2.5 py-1.5 whitespace-nowrap",
-                "box-border hover:bg-gray-100 cursor-pointer"
+                "flex w-full justify-start px-2.5 py-1.5 whitespace-nowrap",
+                "h-auto font-normal cursor-pointer"
               )}
               onClick={item.onClick}
             >
-              <span
-                className={cn(
-                  "flex items-center flex-shrink-0 justify-center",
-                  "mr-2 h-[1em] w-5"
-                )}
-              >
-                {item.icon || null}
-              </span>
-              <span className="flex-1 text-left">{item.label}</span>
-            </div>
+              <div>
+                <span
+                  className={cn(
+                    "flex items-center flex-shrink-0 justify-center",
+                    "mr-2 h-[1em] w-5"
+                  )}
+                >
+                  {item.icon || null}
+                </span>
+                <span className="flex-1 text-left">{item.label}</span>
+              </div>
+            </Button>
           )}
         </React.Fragment>
       ))}

diff --git a/core/src/ten_manager/designer_frontend/src/flow/ContextMenu/NodeContextMenu.tsx b/core/src/ten_manager/designer_frontend/src/flow/ContextMenu/NodeContextMenu.tsx
@@ -6,7 +6,7 @@
 //
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FaEdit, FaTrash, FaTerminal } from "react-icons/fa";
+import { FilePenLineIcon, TerminalIcon, Trash2Icon } from "lucide-react";
 
 import ContextMenu, { ContextMenuItem } from "@/flow/ContextMenu/ContextMenu";
 import { CustomNodeType } from "@/flow/CustomNode";
@@ -37,7 +37,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
   const items: ContextMenuItem[] = [
     {
       label: t("Edit manifest.json"),
-      icon: <FaEdit />,
+      icon: <FilePenLineIcon />,
       onClick: () => {
         onClose();
         if (node?.data.url)
@@ -50,7 +50,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     },
     {
       label: t("Edit property.json"),
-      icon: <FaEdit />,
+      icon: <FilePenLineIcon />,
       onClick: () => {
         onClose();
         if (node?.data.url)
@@ -66,7 +66,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     },
     {
       label: t("Launch terminal"),
-      icon: <FaTerminal />,
+      icon: <TerminalIcon />,
       onClick: () => {
         onClose();
         onLaunchTerminal({ title: node.data.name, url: node.data.url });
@@ -77,7 +77,7 @@ const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     },
     {
       label: t("Delete"),
-      icon: <FaTrash />,
+      icon: <Trash2Icon />,
       onClick: () => {
         onClose();
       },