fix: developer to api (#5281)

studio/frontend/src/components/app-sidebar.tsx

@@ -37,12 +37,12 @@ import {
   Delete02Icon,
   Download03Icon,
   GemIcon,
+  Globe02Icon,
   Search01Icon,
   PowerIcon,
   PencilEdit02Icon,
   LayoutAlignLeftIcon,
   Settings02Icon,
-  SourceCodeSquareIcon,
   ZapIcon,
 } from "@hugeicons/core-free-icons";
 import {
@@ -548,8 +548,8 @@ export function AppSidebar() {
                   <DropdownMenuItem
                     onSelect={() => useSettingsDialogStore.getState().openDialog("api-keys")}
                   >
-                    <HugeiconsIcon icon={SourceCodeSquareIcon} strokeWidth={1.75} className="size-[18px]" />
-                    <span>Developer</span>
+                    <HugeiconsIcon icon={Globe02Icon} strokeWidth={1.75} className="size-[18px]" />
+                    <span>API</span>
                     <span className="ml-auto rounded-[6px] border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] leading-none font-semibold text-emerald-700 dark:text-emerald-300">
                       New
                     </span>

studio/frontend/src/features/settings/settings-dialog.tsx

@@ -10,10 +10,10 @@ import {
 import { cn } from "@/lib/utils";
 import {
   Cancel01Icon,
+  Globe02Icon,
   Message01Icon,
   PaintBrush02Icon,
   Settings02Icon,
-  SourceCodeSquareIcon,
   SparklesIcon,
   UserIcon,
 } from "@hugeicons/core-free-icons";
@@ -40,7 +40,7 @@ const TABS: TabDef[] = [
   { id: "profile", label: "Profile", icon: UserIcon },
   { id: "appearance", label: "Appearance", icon: PaintBrush02Icon },
   { id: "chat", label: "Chat", icon: Message01Icon },
-  { id: "api-keys", label: "Developer", icon: SourceCodeSquareIcon, badge: "New" },
+  { id: "api-keys", label: "API", icon: Globe02Icon, badge: "New" },
   { id: "about", label: "Help", icon: SparklesIcon },
 ];
 

studio/frontend/src/features/settings/tabs/api-keys-tab.tsx

@@ -63,7 +63,7 @@ export function ApiKeysTab() {
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-1">
-        <h1 className="text-lg font-semibold font-heading">Developer</h1>
+        <h1 className="text-lg font-semibold font-heading">API</h1>
         <p className="text-xs text-muted-foreground">
           Access Unsloth programmatically via the OpenAI-compatible API.{" "}
           <a