[OPIK-4444] [FE] Redesign API key submenu with split copy/manage actions

Author: andriidudar

apps/opik-frontend/src/components/pages-shared/llm/PromptModelSelect/PromptModelSelect.tsx

@@ -10,7 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ChevronRight, Search } from "lucide-react";
+import { ChevronRight, Search, Settings2 } from "lucide-react";
 import { ListAction } from "@/components/ui/list-action";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 import { Input } from "@/components/ui/input";
@@ -328,6 +328,7 @@ const PromptModelSelect = ({
                 setOpenConfigDialog(true);
               }}
             >
+              <Settings2 className="size-3.5 shrink-0" />
               Manage AI providers
             </ListAction>
           </div>

apps/opik-frontend/src/plugins/comet/UserMenu.tsx

@@ -10,13 +10,13 @@ import {
   KeyRound,
   LogOut,
   Settings,
+  Settings2,
   Shield,
   UserPlus,
   Zap,
 } from "lucide-react";
 
 import { useOpenQuickStartDialog } from "@/components/pages-shared/onboarding/QuickstartDialog/QuickstartDialog";
-import { ListAction } from "@/components/ui/list-action";
 import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
@@ -302,29 +302,34 @@ const UserMenu = () => {
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
                   <DropdownMenuSubContent className="w-60">
-                    <DropdownMenuItem
-                      className="cursor-pointer"
-                      onClick={() => {
-                        copy(user.apiKeys[0]);
-                        toast({ description: "Successfully copied API Key" });
-                      }}
-                    >
-                      <span className="truncate">
+                    <div className="flex h-10 items-center justify-between gap-2 px-4">
+                      <span className="comet-body-s truncate text-foreground">
                         {maskAPIKey(user.apiKeys[0])}
                       </span>
-                      <Copy className="ml-2 size-3 shrink-0" />
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator className="my-1" />
-                    <ListAction asChild>
-                      <a
-                        href={buildUrl(
-                          "account-settings/apiKeys",
-                          workspaceName,
-                        )}
-                      >
-                        Manage API keys
-                      </a>
-                    </ListAction>
+                      <div className="flex shrink-0 items-center gap-1 text-light-slate">
+                        <button
+                          className="cursor-pointer rounded p-0.5 hover:text-foreground"
+                          onClick={() => {
+                            copy(user.apiKeys[0]);
+                            toast({
+                              description: "Successfully copied API Key",
+                            });
+                          }}
+                        >
+                          <Copy className="size-3.5" />
+                        </button>
+                        <div className="mx-0.5 h-3.5 w-px bg-border" />
+                        <a
+                          className="cursor-pointer rounded p-0.5 hover:text-foreground"
+                          href={buildUrl(
+                            "account-settings/apiKeys",
+                            workspaceName,
+                          )}
+                        >
+                          <Settings2 className="size-3.5" />
+                        </a>
+                      </div>
+                    </div>
                   </DropdownMenuSubContent>
                 </DropdownMenuPortal>
               </DropdownMenuSub>