docs: sort API reference sidebar items and sections (#12032)

www/apps/api-reference/utils/get-tag-child-sidebar-items.tsx

@@ -1,9 +1,9 @@
-import type { OpenAPI } from "types"
+import type { OpenAPI, Sidebar } from "types"
 import dynamic from "next/dynamic"
 import type { MethodLabelProps } from "@/components/MethodLabel"
-import { Sidebar } from "types"
 import { getSectionId } from "docs-utils"
-
+import { SidebarItem } from "../types/global"
+import { compareOperations } from "./sort-operations-utils"
 const MethodLabel = dynamic<MethodLabelProps>(
   async () => import("../components/MethodLabel")
 ) as React.FC<MethodLabelProps>
@@ -11,7 +11,7 @@ const MethodLabel = dynamic<MethodLabelProps>(
 export default function getTagChildSidebarItems(
   paths: OpenAPI.PathsObject
 ): Sidebar.SidebarItem[] {
-  const items: Sidebar.SidebarItem[] = []
+  const items: SidebarItem[] = []
   Object.entries(paths).forEach(([, operations]) => {
     Object.entries(operations).map(([method, operation]) => {
       const definedOperation = operation as OpenAPI.Operation
@@ -30,9 +30,19 @@ export default function getTagChildSidebarItems(
           <MethodLabel method={definedMethod} className="h-fit" />
         ),
         loaded: true,
+        http_method: definedMethod,
       })
     })
   })
 
   return items
+    .sort((a, b) => {
+      return compareOperations({
+        httpMethodA: a.http_method || "",
+        httpMethodB: b.http_method || "",
+        summaryA: (a as Sidebar.SidebarItemLink).title,
+        summaryB: (b as Sidebar.SidebarItemLink).title,
+      })
+    })
+    .map(({ http_method, ...rest }) => rest)
 }

www/apps/api-reference/utils/sort-operations-utils.ts

@@ -0,0 +1,33 @@
+export const getMethodOrder = (method: string) => {
+  switch (method) {
+    case "get":
+      return 1
+    case "post":
+      return 2
+    case "delete":
+      return 3
+    default:
+      return 4
+  }
+}
+
+export const compareOperations = ({
+  httpMethodA,
+  httpMethodB,
+  summaryA,
+  summaryB,
+}: {
+  httpMethodA: string
+  httpMethodB: string
+  summaryA: string
+  summaryB: string
+}) => {
+  const aOrder = getMethodOrder(httpMethodA)
+  const bOrder = getMethodOrder(httpMethodB)
+
+  if (aOrder !== bOrder) {
+    return aOrder - bOrder
+  }
+
+  return summaryA.localeCompare(summaryB)
+}