From 3b218d31eda4b9cb5b8f036a9efe0828d12583cf Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Fri, 6 Feb 2026 21:32:42 -0800
Subject: [PATCH] switch to menu component

---
 .../components/ai-menu/ai-menu.module.css     |  8 +++
 .../components/ai-menu/command-items.ts       | 10 ++--
 .../components/ai-menu/command-selector.tsx   | 59 +++++++++++--------
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/features/editor/components/ai-menu/ai-menu.module.css b/apps/client/src/features/editor/components/ai-menu/ai-menu.module.css
index 17b90a22..60c83292 100644
--- a/apps/client/src/features/editor/components/ai-menu/ai-menu.module.css
+++ b/apps/client/src/features/editor/components/ai-menu/ai-menu.module.css
@@ -4,6 +4,14 @@
   width: 100%;
   min-height: 2.25rem;
 }
+.menuItemSelected {
+  background-color: var(--mantine-color-gray-1);
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
 .resultPreviewWrapper {
   *:first-child {
     margin-top: 0;
diff --git a/apps/client/src/features/editor/components/ai-menu/command-items.ts b/apps/client/src/features/editor/components/ai-menu/command-items.ts
index 41b53579..060a2f13 100644
--- a/apps/client/src/features/editor/components/ai-menu/command-items.ts
+++ b/apps/client/src/features/editor/components/ai-menu/command-items.ts
@@ -14,6 +14,8 @@ import {
   IconCheck,
   IconArrowDownLeft,
   IconCopy,
+  IconTextPlus,
+  IconAlignJustified,
 } from "@tabler/icons-react";
 
 interface CommandItem {
@@ -43,13 +45,13 @@ const mainItems: CommandItem[] = [
   {
     id: "make-longer",
     name: "Make longer",
-    icon: IconArrowsMaximize,
+    icon: IconTextPlus,
     action: AiAction.MAKE_LONGER,
   },
   {
     id: "make-shorter",
     name: "Make shorter",
-    icon: IconArrowsMinimize,
+    icon: IconAlignJustified,
     action: AiAction.MAKE_SHORTER,
   },
   {
@@ -73,13 +75,13 @@ const mainItems: CommandItem[] = [
   },
   {
     id: "change-tone",
-    name: "Change tone...",
+    name: "Change tone",
     icon: IconMoodSmile,
     subCommandSet: "tone",
   },
   {
     id: "translate",
-    name: "Translate...",
+    name: "Translate",
     icon: IconLanguage,
     subCommandSet: "translate",
   },
diff --git a/apps/client/src/features/editor/components/ai-menu/command-selector.tsx b/apps/client/src/features/editor/components/ai-menu/command-selector.tsx
index baf7800c..81625992 100644
--- a/apps/client/src/features/editor/components/ai-menu/command-selector.tsx
+++ b/apps/client/src/features/editor/components/ai-menu/command-selector.tsx
@@ -1,6 +1,8 @@
-import { Button, Menu, ScrollArea } from "@mantine/core";
+import { Loader, Menu, ScrollArea } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
 import { ReactNode } from "react";
 import { CommandItem } from "./command-items";
+import classes from "./ai-menu.module.css";
 
 interface CommandSelectorProps {
   selectedIndex: number;
@@ -25,36 +27,41 @@ const CommandSelector = ({
       opened={!isLoading && currentItems.length > 0}
       position="bottom-start"
       offset={4}
-      width={300}
+      width={250}
       trapFocus={false}
+      shadow="lg"
     >
       <Menu.Target>{children}</Menu.Target>
       <Menu.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah={400}>
-          <Button.Group orientation="vertical" display="flex">
-            {currentItems.map((item, index) => {
-              const unselectedVariant =
-                item.id === "back" ? "subtle" : "default";
+        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
+          {currentItems.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            const showLoader =
+              isLoading && output === "" && !item.subCommandSet;
 
-              return (
-                <Button
-                  key={item.id}
-                  variant={
-                    selectedIndex === index ? "light" : unselectedVariant
-                  }
-                  leftSection={item.icon ? <item.icon size={16} /> : undefined}
-                  justify="left"
-                  fullWidth
-                  onClick={() => handleCommand(item)}
-                  style={{ border: "none" }}
-                  loading={isLoading && output === "" && !item.subCommandSet}
-                  disabled={isLoading}
-                >
-                  {item.name}
-                </Button>
-              );
-            })}
-          </Button.Group>
+            return (
+              <Menu.Item
+                key={item.id}
+                className={isSelected ? classes.menuItemSelected : undefined}
+                leftSection={
+                  showLoader ? (
+                    <Loader size={14} />
+                  ) : item.icon ? (
+                    <item.icon size={16} />
+                  ) : undefined
+                }
+                rightSection={
+                  item.subCommandSet ? (
+                    <IconChevronRight size={14} />
+                  ) : undefined
+                }
+                onClick={() => handleCommand(item)}
+                disabled={isLoading}
+              >
+                {item.name}
+              </Menu.Item>
+            );
+          })}
         </ScrollArea.Autosize>
       </Menu.Dropdown>
     </Menu>