Refactor category fetching in ScriptContent and CommandMenu to utilize centralized fetchCategories for improved maintainability

frontend/src/app/scripts/page.tsx

@@ -12,6 +12,7 @@ import {
   LatestScripts,
   // MostViewedScripts,
 } from "./_components/ScriptInfoBlocks";
+import { fetchCategories } from "@/lib/pocketbase";
 
 function ScriptContent() {
   const [selectedScript, setSelectedScript] = useQueryState("id");
@@ -29,10 +30,7 @@ function ScriptContent() {
   }, [selectedScript, links]);
 
   useEffect(() => {
-      fetch(
+    fetchCategories()
-        `api/categories`,
-      )
-        .then((response) => response.json())
       .then((categories) => {
         setLinks(categories);
       })

frontend/src/components/CommandMenu.tsx

@@ -6,11 +6,12 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { fetchCategories } from "@/lib/pocketbase";
 import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import React, { useEffect } from "react";
+import React from "react";
 import { Button } from "./ui/button";
 import { DialogTitle } from "./ui/dialog";
 
@@ -32,12 +33,9 @@ export default function CommandMenu() {
     return () => document.removeEventListener("keydown", down);
   }, []);
 
-  const fetchCategories = async () => {
+  const fetchSortedCategories = () => {
     setIsLoading(true);
-      fetch(
+    fetchCategories()
-        `api/categories?_=${process.env.NEXT_PUBLIC_BUILD_TIME || Date.now()}`,
-      )
-        .then((response) => response.json())
       .then((categories) => {
         setLinks(categories);
         setIsLoading(false);
@@ -56,7 +54,7 @@ export default function CommandMenu() {
           "relative h-9 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64",
         )}
         onClick={() => {
-          fetchCategories();
+          fetchSortedCategories();
           setOpen(true)
         }}
       >

frontend/src/lib/pocketbase.ts

@@ -1,4 +1,5 @@
 import PocketBase from "pocketbase";
+import { Category } from "./types";
 
 export const pb = new PocketBase(process.env.NEXT_PUBLIC_POCKETBASE_URL);
 export const pbBackup = new PocketBase(
@@ -8,3 +9,26 @@ export const pbBackup = new PocketBase(
 export const getImageURL = (recordId: string, fileName: string) => {
   return `${process.env.NEXT_PUBLIC_POCKETBASE_URL}/${recordId}/${fileName}`;
 };
+
+const sortCategories = (categories: Category[]) => {
+  const sortedCategories = categories.sort((a, b) => {
+    if (a.name === "Proxmox VE Tools") {
+      return -1;
+    } else if (b.name === "Proxmox VE Tools") {
+      return 1;
+    } else if (a.name === "Miscellaneous") {
+      return 1;
+    } else if (b.name === "Miscellaneous") {
+      return -1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  });
+
+  return sortedCategories;
+};
+
+export const fetchCategories = async () => {
+  const categories = await fetch(`api/categories`).then((response) => response.json());
+  return sortCategories(categories)
+}