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,14 +30,11 @@ function ScriptContent() {
   }, [selectedScript, links]);
 
   useEffect(() => {
-      fetch(
+    fetchCategories()
-        `api/categories`,
+      .then((categories) => {
-      )
+        setLinks(categories);
-        .then((response) => response.json())
+      })
-        .then((categories) => {
+      .catch((error) => console.error(error));
-          setLinks(categories);
-        })
-        .catch((error) => console.error(error));
   }, []);
 
   return (

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,20 +33,17 @@ 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((categories) => {
-      )
+        setLinks(categories);
-        .then((response) => response.json())
+        setIsLoading(false);
-        .then((categories) => {
+      })
-          setLinks(categories);
+      .catch((error) => {
-          setIsLoading(false);
+        setIsLoading(false);
-        })
+        console.error(error);
-        .catch((error) => {
+      });
-          setIsLoading(false);
-          console.error(error);
-        });
   };
 
   return (
@@ -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)
+}