Remove npm legacy errors, created single source of truth for ESlint. updated analytics url. updated script background (#5498)

* Update ScriptAccordion and ScriptItem components for improved styling

* Add README.md for Proxmox VE Helper-Scripts Frontend

* Remove testing dependencies and related test files from the frontend project

* Update analytics URL in siteConfig to point to community-scripts.org

* Refactor ESLint configuration to have one source of truth and run "npm lint" to apply new changes

* Update lint script in package.json to remove npm

* Add 'next' option to ESLint configuration for improved compatibility

* Update package dependencies and versions in package.json and package-lock.json

* Refactor theme provider import and enhance calendar component for dynamic icon rendering

* rename sidebar, alerts and buttons

* rename description and interfaces files

* rename more files

* change folder name

* Refactor tooltip logic to improve updateable condition handling

* Enhance CommandMenu to prevent duplicate scripts across categories

* Remove test step from frontend CI/CD workflow

frontend/src/app/category-view/page.tsx

@@ -1,18 +1,20 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Category } from "@/lib/types";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import type { Category } from "@/lib/types";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 
 const defaultLogo = "/default-logo.png"; // Fallback logo path
 const MAX_DESCRIPTION_LENGTH = 100; // Set max length for description
 const MAX_LOGOS = 5; // Max logos to display at once
 
-const formattedBadge = (type: string) => {
+function formattedBadge(type: string) {
   switch (type) {
     case "vm":
       return <Badge className="text-blue-500/75 border-blue-500/75 badge">VM</Badge>;
@@ -24,9 +26,9 @@ const formattedBadge = (type: string) => {
       return <Badge className="text-green-500/75 border-green-500/75 badge">ADDON</Badge>;
   }
   return null;
-};
+}
 
-const CategoryView = () => {
+function CategoryView() {
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
   const [currentScripts, setCurrentScripts] = useState<any[]>([]);
@@ -36,6 +38,7 @@ const CategoryView = () => {
   useEffect(() => {
     const fetchCategories = async () => {
       try {
+        // eslint-disable-next-line node/no-process-env
         const basePath = process.env.NODE_ENV === "production" ? "/ProxmoxVE" : "";
         const response = await fetch(`${basePath}/api/categories`);
         if (!response.ok) {
@@ -50,7 +53,8 @@ const CategoryView = () => {
           initialLogoIndices[category.name] = 0;
         });
         setLogoIndices(initialLogoIndices);
-      } catch (error) {
+      }
+      catch (error) {
         console.error("Error fetching categories:", error);
       }
     };
@@ -74,8 +78,8 @@ const CategoryView = () => {
 
   const navigateCategory = (direction: "prev" | "next") => {
     if (selectedCategoryIndex !== null) {
-      const newIndex =
-        direction === "prev"
+      const newIndex
+        = direction === "prev"
           ? (selectedCategoryIndex - 1 + categories.length) % categories.length
           : (selectedCategoryIndex + 1) % categories.length;
       setSelectedCategoryIndex(newIndex);
@@ -86,12 +90,13 @@ const CategoryView = () => {
   const switchLogos = (categoryName: string, direction: "prev" | "next") => {
     setLogoIndices((prev) => {
       const currentIndex = prev[categoryName] || 0;
-      const category = categories.find((cat) => cat.name === categoryName);
-      if (!category || !category.scripts) return prev;
+      const category = categories.find(cat => cat.name === categoryName);
+      if (!category || !category.scripts)
+        return prev;
 
       const totalLogos = category.scripts.length;
-      const newIndex =
-        direction === "prev"
+      const newIndex
+        = direction === "prev"
           ? (currentIndex - MAX_LOGOS + totalLogos) % totalLogos
           : (currentIndex + MAX_LOGOS) % totalLogos;
 
@@ -109,35 +114,49 @@ const CategoryView = () => {
     const hdd = script.install_methods[0]?.resources.hdd;
 
     const resourceParts = [];
-    if (cpu)
+    if (cpu) {
       resourceParts.push(
         <span key="cpu">
-          <b>CPU:</b> {cpu}vCPU
+          <b>CPU:</b>
+          {" "}
+          {cpu}
+          vCPU
         </span>,
       );
-    if (ram)
+    }
+    if (ram) {
       resourceParts.push(
         <span key="ram">
-          <b>RAM:</b> {ram}MB
+          <b>RAM:</b>
+          {" "}
+          {ram}
+          MB
         </span>,
       );
-    if (hdd)
+    }
+    if (hdd) {
       resourceParts.push(
         <span key="hdd">
-          <b>HDD:</b> {hdd}GB
+          <b>HDD:</b>
+          {" "}
+          {hdd}
+          GB
         </span>,
       );
+    }
 
-    return resourceParts.length > 0 ? (
-      <div className="text-sm text-gray-400">
-        {resourceParts.map((part, index) => (
-          <React.Fragment key={index}>
-            {part}
-            {index < resourceParts.length - 1 && " | "}
-          </React.Fragment>
-        ))}
-      </div>
-    ) : null;
+    return resourceParts.length > 0
+      ? (
+          <div className="text-sm text-gray-400">
+            {resourceParts.map((part, index) => (
+              <React.Fragment key={index}>
+                {part}
+                {index < resourceParts.length - 1 && " | "}
+              </React.Fragment>
+            ))}
+          </div>
+        )
+      : null;
   };
 
   return (
@@ -145,145 +164,151 @@ const CategoryView = () => {
       {categories.length === 0 && (
         <p className="text-center text-gray-500">No categories available. Please check the API endpoint.</p>
       )}
-      {selectedCategoryIndex !== null ? (
-        <div>
-          {/* Header with Navigation */}
-          <div className="flex items-center justify-between mb-6">
-            <Button
-              variant="ghost"
-              onClick={() => navigateCategory("prev")}
-              className="p-2 transition-transform duration-300 hover:scale-105"
-            >
-              <ChevronLeft className="h-6 w-6" />
-            </Button>
-            <h2 className="text-3xl font-semibold transition-opacity duration-300 hover:opacity-90">
-              {categories[selectedCategoryIndex].name}
-            </h2>
-            <Button
-              variant="ghost"
-              onClick={() => navigateCategory("next")}
-              className="p-2 transition-transform duration-300 hover:scale-105"
-            >
-              <ChevronRight className="h-6 w-6" />
-            </Button>
-          </div>
-
-          {/* Scripts Grid */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
-            {currentScripts
-              .sort((a, b) => a.name.localeCompare(b.name))
-              .map((script) => (
-                <Card
-                  key={script.name}
-                  className="p-4 cursor-pointer hover:shadow-md transition-shadow duration-300"
-                  onClick={() => handleScriptClick(script.slug)}
+      {selectedCategoryIndex !== null
+        ? (
+            <div>
+              {/* Header with Navigation */}
+              <div className="flex items-center justify-between mb-6">
+                <Button
+                  variant="ghost"
+                  onClick={() => navigateCategory("prev")}
+                  className="p-2 transition-transform duration-300 hover:scale-105"
                 >
-                  <CardContent className="flex flex-col gap-4">
-                    <h3 className="text-lg font-bold script-text text-center hover:text-blue-600 transition-colors duration-300">
-                      {script.name}
-                    </h3>
-                    <img
-                      src={script.logo || defaultLogo}
-                      alt={script.name || "Script logo"}
-                      className="h-12 w-12 object-contain mx-auto"
-                    />
-                    <p className="text-sm text-gray-500 text-center">
-                      <b>Created at:</b> {script.date_created || "No date available"}
-                    </p>
-                    <p
-                      className="text-sm text-gray-700 hover:text-gray-900 text-center transition-colors duration-300"
-                      title={script.description || "No description available."}
-                    >
-                      {truncateDescription(script.description || "No description available.")}
-                    </p>
-                    {renderResources(script)}
-                  </CardContent>
-                </Card>
-              ))}
-          </div>
+                  <ChevronLeft className="h-6 w-6" />
+                </Button>
+                <h2 className="text-3xl font-semibold transition-opacity duration-300 hover:opacity-90">
+                  {categories[selectedCategoryIndex].name}
+                </h2>
+                <Button
+                  variant="ghost"
+                  onClick={() => navigateCategory("next")}
+                  className="p-2 transition-transform duration-300 hover:scale-105"
+                >
+                  <ChevronRight className="h-6 w-6" />
+                </Button>
+              </div>
 
-          {/* Back to Categories Button */}
-          <div className="mt-8 text-center">
-            <Button
-              variant="default"
-              onClick={handleBackClick}
-              className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
-            >
-              Back to Categories
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div>
-          {/* Categories Grid */}
-          <div className="flex justify-between items-center mb-8">
-            <h1 className="text-3xl font-semibold mb-4">Categories</h1>
-            <p className="text-sm text-gray-500">
-              {categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)} Total scripts
-            </p>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
-            {categories.map((category, index) => (
-              <Card
-                key={category.name}
-                onClick={() => handleCategoryClick(index)}
-                className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
-              >
-                <CardContent className="flex flex-col items-center">
-                  <h3 className="text-xl font-bold mb-4 category-title transition-colors duration-300 hover:text-blue-600">
-                    {category.name}
-                  </h3>
-                  <div className="flex justify-center items-center gap-2 mb-4">
-                    <Button
-                      variant="ghost"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        switchLogos(category.name, "prev");
-                      }}
-                      className="p-1 transition-transform duration-300 hover:scale-110"
+              {/* Scripts Grid */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                {currentScripts
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map(script => (
+                    <Card
+                      key={script.name}
+                      className="p-4 cursor-pointer hover:shadow-md transition-shadow duration-300"
+                      onClick={() => handleScriptClick(script.slug)}
                     >
-                      <ChevronLeft className="h-4 w-4" />
-                    </Button>
-                    {category.scripts &&
-                      category.scripts
-                        .slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
-                        .map((script, i) => (
-                          <div key={i} className="flex flex-col items-center">
-                            <img
-                              src={script.logo || defaultLogo}
-                              alt={script.name || "Script logo"}
-                              title={script.name}
-                              className="h-8 w-8 object-contain cursor-pointer"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleScriptClick(script.slug);
-                              }}
-                            />
-                            {formattedBadge(script.type)}
-                          </div>
-                        ))}
-                    <Button
-                      variant="ghost"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        switchLogos(category.name, "next");
-                      }}
-                      className="p-1 transition-transform duration-300 hover:scale-110"
-                    >
-                      <ChevronRight className="h-4 w-4" />
-                    </Button>
-                  </div>
-                  <p className="text-sm text-gray-400 text-center">
-                    {(category as any).description || "No description available."}
-                  </p>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </div>
-      )}
+                      <CardContent className="flex flex-col gap-4">
+                        <h3 className="text-lg font-bold script-text text-center hover:text-blue-600 transition-colors duration-300">
+                          {script.name}
+                        </h3>
+                        <img
+                          src={script.logo || defaultLogo}
+                          alt={script.name || "Script logo"}
+                          className="h-12 w-12 object-contain mx-auto"
+                        />
+                        <p className="text-sm text-gray-500 text-center">
+                          <b>Created at:</b>
+                          {" "}
+                          {script.date_created || "No date available"}
+                        </p>
+                        <p
+                          className="text-sm text-gray-700 hover:text-gray-900 text-center transition-colors duration-300"
+                          title={script.description || "No description available."}
+                        >
+                          {truncateDescription(script.description || "No description available.")}
+                        </p>
+                        {renderResources(script)}
+                      </CardContent>
+                    </Card>
+                  ))}
+              </div>
+
+              {/* Back to Categories Button */}
+              <div className="mt-8 text-center">
+                <Button
+                  variant="default"
+                  onClick={handleBackClick}
+                  className="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-md transition-transform duration-300 hover:scale-105"
+                >
+                  Back to Categories
+                </Button>
+              </div>
+            </div>
+          )
+        : (
+            <div>
+              {/* Categories Grid */}
+              <div className="flex justify-between items-center mb-8">
+                <h1 className="text-3xl font-semibold mb-4">Categories</h1>
+                <p className="text-sm text-gray-500">
+                  {categories.reduce((total, category) => total + (category.scripts?.length || 0), 0)}
+                  {" "}
+                  Total scripts
+                </p>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+                {categories.map((category, index) => (
+                  <Card
+                    key={category.name}
+                    onClick={() => handleCategoryClick(index)}
+                    className="cursor-pointer hover:shadow-lg flex flex-col items-center justify-center py-6 transition-shadow duration-300"
+                  >
+                    <CardContent className="flex flex-col items-center">
+                      <h3 className="text-xl font-bold mb-4 category-title transition-colors duration-300 hover:text-blue-600">
+                        {category.name}
+                      </h3>
+                      <div className="flex justify-center items-center gap-2 mb-4">
+                        <Button
+                          variant="ghost"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            switchLogos(category.name, "prev");
+                          }}
+                          className="p-1 transition-transform duration-300 hover:scale-110"
+                        >
+                          <ChevronLeft className="h-4 w-4" />
+                        </Button>
+                        {category.scripts
+                          && category.scripts
+                            .slice(logoIndices[category.name] || 0, (logoIndices[category.name] || 0) + MAX_LOGOS)
+                            .map((script, i) => (
+                              <div key={i} className="flex flex-col items-center">
+                                <img
+                                  src={script.logo || defaultLogo}
+                                  alt={script.name || "Script logo"}
+                                  title={script.name}
+                                  className="h-8 w-8 object-contain cursor-pointer"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleScriptClick(script.slug);
+                                  }}
+                                />
+                                {formattedBadge(script.type)}
+                              </div>
+                            ))}
+                        <Button
+                          variant="ghost"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            switchLogos(category.name, "next");
+                          }}
+                          className="p-1 transition-transform duration-300 hover:scale-110"
+                        >
+                          <ChevronRight className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      <p className="text-sm text-gray-400 text-center">
+                        {(category as any).description || "No description available."}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          )}
     </div>
   );
-};
+}
 
 export default CategoryView;