zudoku 0.0.0-f9d5b02 → 0.0.0-fabd0c1

package/src/lib/components/TopNavigation.tsx

@@ -1,8 +1,9 @@
 import { cx } from "class-variance-authority";
 import { Suspense } from "react";
-import { Link } from "react-router-dom";
-import { TopNavigationItem } from "../../config/validators/validate.js";
+import { NavLink, useNavigation } from "react-router";
+import { TopNavigationItem } from "../../config/validators/common.js";
 import { useAuth } from "../authentication/hook.js";
+import { ZudokuError } from "../util/invariant.js";
 import { joinPath } from "../util/joinPath.js";
 import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
 import { traverseSidebar } from "./navigation/utils.js";
@@ -42,10 +43,16 @@ export const TopNavigation = () => {
   );
 };
 
-const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
+export const TopNavItem = ({
+  id,
+  label,
+  default: defaultLink,
+}: TopNavigationItem) => {
   const { sidebars } = useZudoku();
-  const nav = useCurrentNavigation();
   const currentSidebar = sidebars[id];
+  const currentNav = useCurrentNavigation();
+  const isNavigating = Boolean(useNavigation().location);
+  const isActive = currentNav.topNavItem?.id === id && !isNavigating;
 
   // TODO: This is a bit of a hack to get the first link in the sidebar
   // We should really process this when we load the config so we can validate
@@ -60,25 +67,26 @@ const TopNavItem = ({ id, label, default: defaultLink }: TopNavigationItem) => {
       : joinPath(id));
 
   if (!first) {
-    throw new Error(
-      `No links found in top navigation for top navigation '${id}'. Check that the sidebar isn't empty or that a default link set.`,
-    );
+    throw new ZudokuError("Page not found.", {
+      developerHint: `No links found in top navigation for '${id}'. Check that the sidebar isn't empty or that a default link is set.`,
+    });
   }
 
-  // Manually set the active sidebar based on our logic of what is active
-  const isActive = nav.topNavItem?.id === id;
-
   return (
-    <Link
-      className={cx(
-        "block py-3.5 font-medium -mb-px border-b-2",
-        isActive
-          ? "border-primary text-foreground"
-          : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
-      )}
+    // We don't use isActive here because it has to be inside the sidebar,
+    // the top nav id doesn't necessarily start with the sidebar id
+    <NavLink
+      className={({ isPending }) =>
+        cx(
+          "block lg:py-3.5 font-medium -mb-px border-b-2",
+          isActive || isPending
+            ? "border-primary text-foreground"
+            : "border-transparent text-foreground/75 hover:text-foreground hover:border-accent-foreground/25",
+        )
+      }
       to={first}
     >
       {label}
-    </Link>
+    </NavLink>
   );
 };

package/src/lib/components/Zudoku.tsx

@@ -11,7 +11,7 @@ import {
   useState,
 } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { Outlet, useNavigation } from "react-router-dom";
+import { Outlet, useNavigation } from "react-router";
 import { hasHead, isMdxProviderPlugin } from "../core/plugins.js";
 import { ZudokuContext, ZudokuContextOptions } from "../core/ZudokuContext.js";
 import { TopLevelError } from "../errors/TopLevelError.js";

package/src/lib/components/context/ZudokuContext.ts

@@ -1,6 +1,6 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
-import { matchPath, useLocation } from "react-router-dom";
+import { matchPath, useLocation } from "react-router";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinPath } from "../../util/joinPath.js";
 import { traverseSidebar } from "../navigation/utils.js";

package/src/lib/components/index.ts

@@ -1,6 +1,6 @@
 import { useMDXComponents as useMDXComponentsImport } from "@mdx-js/react";
 import { Helmet } from "@zudoku/react-helmet-async";
-import { Link as LinkImport } from "react-router-dom";
+import { Link as LinkImport } from "react-router";
 import { useAuthState } from "../authentication/state.js";
 import { RouterError as RouterErrorImport } from "../errors/RouterError.js";
 import { ServerError as ServerErrorImport } from "../errors/ServerError.js";

package/src/lib/components/navigation/Sidebar.tsx

@@ -7,7 +7,11 @@ import { Slotlet } from "../SlotletProvider.js";
 import { SidebarItem } from "./SidebarItem.js";
 import { SidebarWrapper } from "./SidebarWrapper.js";
 
-export const Sidebar = () => {
+export const Sidebar = ({
+  onRequestClose,
+}: {
+  onRequestClose?: () => void;
+}) => {
   const navRef = useRef<HTMLDivElement | null>(null);
   const navigation = useCurrentNavigation();
 
@@ -24,15 +28,21 @@ export const Sidebar = () => {
         <Slotlet name="zudoku-after-navigation" />
       </SidebarWrapper>
       <DrawerContent
-        className="lg:hidden h-screen left-0 p-6 w-[320px] rounded-none overflow-auto"
+        className="lg:hidden h-[100dvh] left-0 w-[320px] rounded-none"
         aria-describedby={undefined}
       >
-        <VisuallyHidden>
-          <DrawerTitle>Sidebar</DrawerTitle>
-        </VisuallyHidden>
-        {navigation.sidebar.map((item) => (
-          <SidebarItem key={item.label} item={item} />
-        ))}
+        <div className="p-4 overflow-y-auto overscroll-none">
+          <VisuallyHidden>
+            <DrawerTitle>Sidebar</DrawerTitle>
+          </VisuallyHidden>
+          {navigation.sidebar.map((item) => (
+            <SidebarItem
+              key={item.label}
+              item={item}
+              onRequestClose={onRequestClose}
+            />
+          ))}
+        </div>
       </DrawerContent>
     </>
   );

package/src/lib/components/navigation/SidebarBadge.tsx

@@ -1,15 +1,5 @@
 import { cn } from "../../util/cn.js";
 
-export const TextColorMap = {
-  green: "text-green-600",
-  blue: "text-sky-600",
-  yellow: "text-yellow-600",
-  red: "text-red-600",
-  purple: "text-purple-600",
-  indigo: "text-indigo-600",
-  gray: "text-gray-600",
-};
-
 export const ColorMap = {
   green: "bg-green-400 dark:bg-green-800",
   blue: "bg-sky-400 dark:bg-sky-800",

package/src/lib/components/navigation/SidebarCategory.tsx

@@ -1,7 +1,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { ChevronRightIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-import { NavLink, useMatch } from "react-router-dom";
+import { NavLink, useMatch } from "react-router";
 import type { SidebarItemCategory } from "../../../config/validators/SidebarSchema.js";
 import { cn } from "../../util/cn.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -10,10 +10,10 @@ import { useIsCategoryOpen } from "./utils.js";
 
 export const SidebarCategory = ({
   category,
-  level,
+  onRequestClose,
 }: {
   category: SidebarItemCategory;
-  level: number;
+  onRequestClose?: () => void;
 }) => {
   const isCategoryOpen = useIsCategoryOpen(category);
   const [hasInteracted, setHasInteracted] = useState(false);
@@ -65,7 +65,6 @@ export const SidebarCategory = ({
           onClick={() => setHasInteracted(true)}
           className={navigationListItem({
             isActive: false,
-            isTopLevel: level === 0,
             className: [
               "text-start",
               isCollapsible
@@ -77,10 +76,7 @@ export const SidebarCategory = ({
           {category.icon && (
             <category.icon
               size={16}
-              className={cn(
-                "align-[-0.125em] -translate-x-1",
-                isActive && "text-primary",
-              )}
+              className={cn("align-[-0.125em] ", isActive && "text-primary")}
             />
           )}
           {category.link?.type === "doc" ? (
@@ -116,9 +112,14 @@ export const SidebarCategory = ({
         className={cn(
           // CollapsibleContent class is used to animate and it should only be applied when the user has triggered the toggle
           hasInteracted && "CollapsibleContent",
+          "ms-6 my-1",
         )}
       >
-        <ul className="mt-1 border-l ms-0.5">
+        <ul
+          className={
+            "relative after:absolute after:-left-[--padding-nav-item] after:translate-x-[1.5px] after:top-0 after:bottom-0 after:w-px after:bg-border"
+          }
+        >
           {category.items.map((item) => (
             <SidebarItem
               key={
@@ -126,7 +127,7 @@ export const SidebarCategory = ({
                 ("href" in item ? item.href : "") +
                 item.label
               }
-              level={level + 1}
+              onRequestClose={onRequestClose}
               item={item}
             />
           ))}

package/src/lib/components/navigation/SidebarItem.tsx

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { ExternalLinkIcon } from "lucide-react";
-import { NavLink, useSearchParams } from "react-router-dom";
+import { NavLink, useSearchParams } from "react-router";
 
 import type { SidebarItem as SidebarItemType } from "../../../config/validators/SidebarSchema.js";
 import { joinPath } from "../../util/joinPath.js";
@@ -13,10 +13,6 @@ export const navigationListItem = cva(
   "flex items-center gap-2 px-[--padding-nav-item] py-1.5 rounded-lg hover:bg-accent transition-colors duration-300",
   {
     variants: {
-      isTopLevel: {
-        true: "font-medium -mx-[--padding-nav-item]",
-        false: "-mr-[--padding-nav-item] ml-[--padding-nav-item]",
-      },
       isActive: {
         true: "text-primary font-medium",
         false: "text-foreground/80",
@@ -36,25 +32,25 @@ export const DATA_ANCHOR_ATTR = "data-anchor";
 
 export const SidebarItem = ({
   item,
-  level = 0,
+  onRequestClose,
 }: {
   item: SidebarItemType;
-  basePath?: string;
-  level?: number;
+  onRequestClose?: () => void;
 }) => {
   const { activeAnchor } = useViewportAnchor();
   const [searchParams] = useSearchParams();
 
   switch (item.type) {
     case "category":
-      return <SidebarCategory category={item} level={level} />;
+      return (
+        <SidebarCategory category={item} onRequestClose={onRequestClose} />
+      );
     case "doc":
       return (
         <NavLink
-          className={({ isActive }) =>
-            navigationListItem({ isActive, isTopLevel: level === 0 })
-          }
+          className={({ isActive }) => navigationListItem({ isActive })}
           to={joinPath(item.id)}
+          onClick={onRequestClose}
         >
           {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
           {item.badge ? (
@@ -76,9 +72,9 @@ export const SidebarItem = ({
           {...{ [DATA_ANCHOR_ATTR]: item.href.slice(1) }}
           className={navigationListItem({
             isActive: item.href.slice(1) === activeAnchor,
-            isTopLevel: level === 0,
             className: item.badge?.placement !== "start" && "justify-between",
           })}
+          onClick={onRequestClose}
         >
           {item.badge ? (
             <>
@@ -111,10 +107,11 @@ export const SidebarItem = ({
         </NavLink>
       ) : (
         <a
-          className={navigationListItem({ isTopLevel: level === 0 })}
+          className={navigationListItem()}
           href={item.href}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={onRequestClose}
         >
           <span className="whitespace-normal">{item.label}</span>
           {/* This prevents that the icon would be positioned in its own line if the text fills a line entirely */}

package/src/lib/components/navigation/SidebarWrapper.tsx

@@ -13,7 +13,7 @@ export const SidebarWrapper = forwardRef<
     data-navigation={String(pushMainContent)}
     className={cn(
       "scrollbar peer hidden lg:flex flex-col fixed text-sm overflow-y-auto shrink-0",
-      "px-[--padding-nav-item] -mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
+      "-mx-[--padding-nav-item] pb-20 mt-[--padding-content-top]",
       "w-[--side-nav-width] h-[calc(100%-var(--header-height))] scroll-pt-2 gap-2",
       className,
     )}

package/src/lib/components/navigation/utils.ts

@@ -1,4 +1,4 @@
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import type {
   SidebarItem,
   SidebarItemCategory,

package/src/lib/core/ZudokuContext.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
+import { TopNavigationItem } from "../../config/validators/common.js";
 import type { SidebarConfig } from "../../config/validators/SidebarSchema.js";
-import { TopNavigationItem } from "../../config/validators/validate.js";
 import { type AuthenticationProvider } from "../authentication/authentication.js";
 import type { ComponentsContextType } from "../components/context/ComponentsContext.js";
 import { Slotlets } from "../components/SlotletProvider.js";

package/src/lib/core/plugins.ts

@@ -1,5 +1,6 @@
+import type { LucideIcon } from "lucide-react";
 import { type ReactElement } from "react";
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import type { Sidebar } from "../../config/validators/SidebarSchema.js";
 import { MdxComponentsType } from "../util/MdxComponents.js";
 import { ZudokuContext, type ApiIdentity } from "./ZudokuContext.js";
@@ -36,7 +37,10 @@ export interface ProfileMenuPlugin {
 export type ProfileNavigationItem = {
   label: string;
   path?: string;
+  weight?: number;
+  category?: "top" | "middle" | "bottom";
   children?: ProfileNavigationItem[];
+  icon?: LucideIcon;
 };
 
 export interface CommonPlugin {

package/src/lib/errors/RouterError.tsx

@@ -1,4 +1,4 @@
-import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { isRouteErrorResponse, useRouteError } from "react-router";
 import { NotFoundPage } from "../components/NotFoundPage.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 

package/src/lib/oas/graphql/index.ts

@@ -390,6 +390,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
       resolve: (root) => root.info.description,
       nullable: true,
     }),
+    summary: t.string({
+      resolve: (root) => root.info.summary,
+      nullable: true,
+    }),
     paths: t.field({
       type: [PathItem],
       resolve: (root) =>
@@ -439,7 +443,6 @@ const SchemaSource = builder.enumType("SchemaType", {
 
 builder.queryType({
   fields: (t) => ({
-    // https://tan-cow-main-bce8a06.d2.zuplo.dev/openapi
     schema: t.field({
       type: Schema,
       args: {

package/src/lib/oas/parser/upgrade/index.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { type RecordAny, traverse } from "../../../util/traverse.js";
 import type { OpenAPIDocument } from "../index.js";
 /**
  * Upgrade from OpenAPI 3.0.x to 3.1.0
@@ -6,30 +7,8 @@ import type { OpenAPIDocument } from "../index.js";
  * Taken from https://github.com/scalar/openapi-parser/blob/main/packages/openapi-parser/src/utils/upgradeFromThreeToThreeOne.ts
  * https://www.openapis.org/blog/2021/02/16/migrating-from-openapi-3-0-to-3-1-0
  */
-export function traverse(
-  specification: Record<string, any>,
-  transform: (specification: Record<string, any>) => Record<string, any>,
-) {
-  const result: Record<string, any> = {};
 
-  for (const [key, value] of Object.entries(specification)) {
-    if (Array.isArray(value)) {
-      result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
-          ? traverse(item, transform)
-          : item,
-      );
-    } else if (typeof value === "object" && value !== null) {
-      result[key] = traverse(value, transform);
-    } else {
-      result[key] = value;
-    }
-  }
-
-  return transform(result);
-}
-
-export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
+export const upgradeSchema = (schema: RecordAny): OpenAPIDocument => {
   if (schema.openapi?.startsWith("3.0")) {
     schema.openapi = "3.1.0";
   }
@@ -64,9 +43,7 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
   schema = traverse(schema, (sub) => {
     if (sub.example !== undefined) {
       sub.examples = {
-        default: {
-          value: sub.example,
-        },
+        default: sub.example,
       };
       delete sub.example;
     }
@@ -77,7 +54,7 @@ export const upgradeSchema = (schema: Record<string, any>): OpenAPIDocument => {
   schema = traverse(schema, (sub) => {
     if (sub.type === "object" && sub.properties !== undefined) {
       for (const [, value] of Object.entries(sub.properties)) {
-        const v = (value ?? {}) as Record<string, any>;
+        const v = (value ?? {}) as RecordAny;
         if (v.type === "string" && v.format === "binary") {
           v.contentEncoding = "application/octet-stream";
           delete v.format;

package/src/lib/plugins/api-catalog/Catalog.tsx

@@ -0,0 +1,123 @@
+import slugify from "@sindresorhus/slugify";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useSearchParams } from "react-router";
+import { Head, Link } from "zudoku/components";
+import { useAuthState } from "../../authentication/state.js";
+import { Markdown } from "../../components/Markdown.js";
+import { cn } from "../../util/cn.js";
+import type { ApiCatalogPluginOptions } from "./index.js";
+
+const getKey = (category: string, tag: string) => slugify(`${category}-${tag}`);
+
+export const Catalog = ({
+  items,
+  filterCatalogItems = (items) => items,
+  categories,
+  label = "API Library",
+}: Omit<ApiCatalogPluginOptions, "navigationId">) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const activeCategory = searchParams.get("category");
+  const auth = useAuthState();
+
+  const catalogItems = useSuspenseQuery({
+    queryFn: () => filterCatalogItems(items, { auth }),
+    queryKey: ["catalogItems", auth],
+  });
+
+  return (
+    <section className="pt-[--padding-content-top] pb-[--padding-content-bottom]">
+      <Head>
+        <title>{label}</title>
+      </Head>
+      <div className="grid grid-cols-12 gap-12">
+        <div className="flex flex-col gap-4 col-span-3 not-prose sticky top-48">
+          <div className="max-w-[--side-nav-width] flex flex-col gap-4 justify-between">
+            {categories?.map((category, idx) => (
+              <div key={category.label}>
+                <div className="flex justify-between mb-2.5">
+                  <span className="font-medium text-sm">{category.label}</span>
+                  {idx === 0 && activeCategory && (
+                    <button
+                      type="button"
+                      className="text-end text-sm text-foreground/60 hover:text-foreground"
+                      onClick={() => setSearchParams({})}
+                    >
+                      Clear
+                    </button>
+                  )}
+                </div>
+                <ul className="space-y-1 [&>li]:py-2">
+                  {category.tags
+                    .map((tag) => ({
+                      tag,
+                      count: items.filter((api) =>
+                        api.categories.find((c) => c.tags.includes(tag)),
+                      ).length,
+                    }))
+                    .map(({ tag, count }) => {
+                      const slug = getKey(category.label, tag);
+                      const isActive = slug === activeCategory;
+
+                      return (
+                        <li
+                          key={slug}
+                          className={cn(
+                            "flex rounded-lg justify-between text-sm cursor-pointer hover:text-primary transition px-[--padding-nav-item] -mx-[--padding-nav-item]",
+                            isActive && "bg-border/30 rounded",
+                          )}
+                          onClick={() => setSearchParams({ category: slug })}
+                        >
+                          <span>{tag}</span>
+                          <span
+                            className={cn(
+                              "flex items-center justify-center border rounded-md w-8 text-xs font-semibold",
+                              isActive &&
+                                "bg-primary border-primary text-primary-foreground",
+                            )}
+                          >
+                            {count}
+                          </span>
+                        </li>
+                      );
+                    })}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="col-span-9">
+          <h3 className="mt-0 text-2xl font-bold mb-4">{label}</h3>
+
+          <div className="grid grid-cols-2 gap-4">
+            {catalogItems.data
+              .filter(
+                (api) =>
+                  !activeCategory ||
+                  api.categories.find((c) =>
+                    c.tags.find((t) => getKey(c.label, t) === activeCategory),
+                  ),
+              )
+              .map((api) => (
+                <Link
+                  to={{
+                    pathname: `/${api.path}`,
+                    search: activeCategory ? `category=${activeCategory}` : "",
+                  }}
+                  className="no-underline hover:!text-foreground"
+                  key={api.path}
+                >
+                  <div className="border h-full rounded p-4 flex flex-col gap-2 cursor-pointer hover:bg-border/20 font-normal">
+                    <span className="font-semibold">{api.label}</span>
+                    <Markdown
+                      className="text-sm whitespace-pre-wrap mb-6 line-clamp-2"
+                      content={api.description}
+                    />
+                  </div>
+                </Link>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

package/src/lib/plugins/api-catalog/index.tsx

@@ -0,0 +1,64 @@
+import type { AuthState } from "../../authentication/state.js";
+import type { ZudokuPlugin } from "../../core/plugins.js";
+import { Catalog } from "./Catalog.js";
+
+export type ApiCatalogItem = {
+  path: string;
+  label: string;
+  description: string;
+  categories: CatalogCategory[];
+};
+
+export type CatalogCategory = {
+  label: string;
+  tags: string[];
+};
+
+export type ApiCatalogPluginOptions = {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
+};
+
+export type CatalogContext<ProviderData = unknown> = {
+  auth: AuthState<ProviderData>;
+};
+
+export type filterCatalogItems<ProviderData = unknown> = (
+  items: ApiCatalogItem[],
+  { auth }: CatalogContext<ProviderData>,
+) => ApiCatalogItem[];
+
+export const apiCatalogPlugin = ({
+  navigationId,
+  items,
+  label,
+  categories,
+  filterCatalogItems,
+}: {
+  navigationId: string;
+  label: string;
+  categories?: CatalogCategory[];
+  items: ApiCatalogItem[];
+  filterCatalogItems?: filterCatalogItems;
+}): ZudokuPlugin => {
+  return {
+    getRoutes: () => {
+      return [
+        {
+          path: navigationId,
+          element: (
+            <Catalog
+              label={label}
+              items={items}
+              filterCatalogItems={filterCatalogItems}
+              categories={categories ?? []}
+            />
+          ),
+        },
+      ];
+    },
+  };
+};

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import {
   Select,
   SelectContent,

package/src/lib/plugins/api-keys/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { Button } from "../../ui/Button.js";

package/src/lib/plugins/api-keys/SettingsApiKeys.tsx

@@ -12,7 +12,7 @@ import {
   TrashIcon,
 } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slotlet } from "../../components/SlotletProvider.js";
 import { Button } from "../../ui/Button.js";

package/src/lib/plugins/api-keys/index.tsx

@@ -1,4 +1,5 @@
-import { type RouteObject } from "react-router-dom";
+import { FileKey2Icon } from "lucide-react";
+import { type RouteObject } from "react-router";
 import { ZudokuContext } from "../../core/ZudokuContext.js";
 import {
   type ApiIdentityPlugin,
@@ -105,6 +106,8 @@ export const apiKeyPlugin = (
       {
         label: "API Keys",
         path: "/settings/api-keys",
+        category: "middle",
+        icon: FileKey2Icon,
       },
     ],
     getIdentities: async (context) => {