switch to menu component

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;

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",
   },

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">
+        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
           {currentItems.map((item, index) => {
-              const unselectedVariant =
-                item.id === "back" ? "subtle" : "default";
+            const isSelected = selectedIndex === index;
+            const showLoader =
+              isLoading && output === "" && !item.subCommandSet;
 
             return (
-                <Button
+              <Menu.Item
                 key={item.id}
-                  variant={
-                    selectedIndex === index ? "light" : unselectedVariant
+                className={isSelected ? classes.menuItemSelected : undefined}
+                leftSection={
+                  showLoader ? (
+                    <Loader size={14} />
+                  ) : item.icon ? (
+                    <item.icon size={16} />
+                  ) : undefined
+                }
+                rightSection={
+                  item.subCommandSet ? (
+                    <IconChevronRight size={14} />
+                  ) : undefined
                 }
-                  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>
+              </Menu.Item>
             );
           })}
-          </Button.Group>
         </ScrollArea.Autosize>
       </Menu.Dropdown>
     </Menu>