add missing 2

.github/workflows/frontend-cicd.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Install dependencies
         run: npm ci --prefer-offline --legacy-peer-deps
 
+      - name: Run tests
+        run: npm run test
+
       - name: Configure Next.js for pages
         uses: actions/configure-pages@v5
         with:

.github/workflows/push-to-gitea.yaml

@@ -1,48 +0,0 @@
-name: Sync to Gitea
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  sync:
-    if: github.repository == 'community-scripts/ProxmoxVE'
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout source repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Change all links to git.community-scripts.org
-        run: |
-          echo "Searching for files containing raw.githubusercontent.com URLs..."
-
-          # Find all files containing GitHub raw URLs, excluding certain directories
-          files_with_github_urls=$(grep -r "https://raw.githubusercontent.com/community-scripts/ProxmoxVE" . --exclude-dir=.git --exclude-dir=node_modules --exclude-dir=.github/workflows --files-with-matches || true)
-
-          if [ -n "$files_with_github_urls" ]; then
-            echo "$files_with_github_urls" | while read file; do
-              if [ -f "$file" ]; then
-                sed -i 's|https://raw\.githubusercontent\.com/community-scripts/ProxmoxVE/|https://git.community-scripts.org/community-scripts/ProxmoxVE/raw/branch/|g' "$file"
-              fi
-            done         
-          else
-            echo "No files found containing GitHub raw URLs"
-          fi
-
-          
-
-      - name: Push to Gitea
-        run: |
-          git config --global user.name "Push From Github"
-          git config --global user.email "actions@github.com"
-          git remote add gitea https://$GITEA_USER:$GITEA_TOKEN@git.community-scripts.org/community-scripts/ProxmoxVE.git
-          git add .
-          git commit -m "Sync to Gitea"
-          git push gitea --all --force
-        env:
-          GITEA_USER: ${{ secrets.GITEA_USERNAME }}
-          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}

CHANGELOG.md

@@ -14,92 +14,8 @@ Exercise vigilance regarding copycat or coat-tailing sites that seek to exploit
 All LXC instances created using this repository come pre-installed with Midnight Commander, which is a command-line tool (`mc`) that offers a user-friendly file and directory management interface for the terminal environment.
 
 
-## 2025-06-28
-
-### 🚀 Updated Scripts
-
-  - #### 🐞 Bug Fixes
-
-    - Ollama: Clean up old Ollama files before running update [@tremor021](https://github.com/tremor021) ([#5534](https://github.com/community-scripts/ProxmoxVE/pull/5534))
-    - ONLYOFFICE: Update install script to manually create RabbitMQ user [@tremor021](https://github.com/tremor021) ([#5535](https://github.com/community-scripts/ProxmoxVE/pull/5535))
-
-### 🌐 Website
-
-  - #### 📝 Script Information
-
-    - Booklore: Correct documentation and website  [@pieman3000](https://github.com/pieman3000) ([#5528](https://github.com/community-scripts/ProxmoxVE/pull/5528))
-
-## 2025-06-27
-
-### 🆕 New Scripts
-
-  - BookLore ([#5524](https://github.com/community-scripts/ProxmoxVE/pull/5524))
-
-### 🚀 Updated Scripts
-
-  - #### 🐞 Bug Fixes
-
-    - wizarr: remove unneeded tmp file [@MickLesk](https://github.com/MickLesk) ([#5517](https://github.com/community-scripts/ProxmoxVE/pull/5517))
-
-### 🧰 Maintenance
-
-  - #### 🐞 Bug Fixes
-
-    - Remove npm legacy errors, created single source of truth for ESlint. updated analytics url. updated script background [@BramSuurdje](https://github.com/BramSuurdje) ([#5498](https://github.com/community-scripts/ProxmoxVE/pull/5498))
-
-  - #### 📂 Github
-
-    - New workflow to push to gitea and change links to gitea [@michelroegl-brunner](https://github.com/michelroegl-brunner) ([#5510](https://github.com/community-scripts/ProxmoxVE/pull/5510))
-
-### 🌐 Website
-
-  - #### 📝 Script Information
-
-    - Wireguard, Update Link to Documentation. [@michelroegl-brunner](https://github.com/michelroegl-brunner) ([#5514](https://github.com/community-scripts/ProxmoxVE/pull/5514))
-
-## 2025-06-26
-
-### 🆕 New Scripts
-
-  - ConvertX ([#5484](https://github.com/community-scripts/ProxmoxVE/pull/5484))
-
-### 🚀 Updated Scripts
-
-  - [tools] Update setup_nodejs function [@tremor021](https://github.com/tremor021) ([#5488](https://github.com/community-scripts/ProxmoxVE/pull/5488))
-- [tools] Fix setup_mongodb function [@tremor021](https://github.com/tremor021) ([#5486](https://github.com/community-scripts/ProxmoxVE/pull/5486))
-
 ## 2025-06-25
 
-### 🚀 Updated Scripts
-
-  - #### 🐞 Bug Fixes
-
-    - Docmost: Increase resources [@tremor021](https://github.com/tremor021) ([#5458](https://github.com/community-scripts/ProxmoxVE/pull/5458))
-
-  - #### ✨ New Features
-
-    - tools.func: new helper for imagemagick [@MickLesk](https://github.com/MickLesk) ([#5452](https://github.com/community-scripts/ProxmoxVE/pull/5452))
-    - YunoHost: add Update-Function [@MickLesk](https://github.com/MickLesk) ([#5450](https://github.com/community-scripts/ProxmoxVE/pull/5450))
-
-  - #### 🔧 Refactor
-
-    - Refactor: Tailscale  [@MickLesk](https://github.com/MickLesk) ([#5454](https://github.com/community-scripts/ProxmoxVE/pull/5454))
-
-### 🌐 Website
-
-  - #### 🐞 Bug Fixes
-
-    - Update Tooltips component to conditionally display updateable status based on item type [@BramSuurdje](https://github.com/BramSuurdje) ([#5461](https://github.com/community-scripts/ProxmoxVE/pull/5461))
-    - Refactor CommandMenu to prevent duplicate scripts across categories [@BramSuurdje](https://github.com/BramSuurdje) ([#5463](https://github.com/community-scripts/ProxmoxVE/pull/5463))
-
-  - #### ✨ New Features
-
-    - Enhance InstallCommand component to support Gitea as an alternative source for installation scripts. [@BramSuurdje](https://github.com/BramSuurdje) ([#5464](https://github.com/community-scripts/ProxmoxVE/pull/5464))
-
-  - #### 📝 Script Information
-
-    - Website: mark VM's and "OS"-LXC's as updatable [@MickLesk](https://github.com/MickLesk) ([#5453](https://github.com/community-scripts/ProxmoxVE/pull/5453))
-
 ## 2025-06-24
 
 ### 🆕 New Scripts

ct/booklore.sh

@@ -1,79 +0,0 @@
-#!/usr/bin/env bash
-source <(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/misc/build.func)
-# Copyright (c) 2021-2025 community-scripts ORG
-# Author: MickLesk (CanbiZ)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://github.com/adityachandelgit/BookLore
-
-APP="BookLore"
-var_tags="${var_tags:-books;library}"
-var_cpu="${var_cpu:-3}"
-var_ram="${var_ram:-2048}"
-var_disk="${var_disk:-7}"
-var_os="${var_os:-debian}"
-var_version="${var_version:-12}"
-var_unprivileged="${var_unprivileged:-1}"
-
-header_info "$APP"
-variables
-color
-catch_errors
-
-function update_script() {
-  header_info
-  check_container_storage
-  check_container_resources
-
-  if [[ ! -d /opt/booklore ]]; then
-    msg_error "No ${APP} Installation Found!"
-    exit
-  fi
-
-  RELEASE=$(curl -fsSL https://api.github.com/repos/adityachandelgit/BookLore/releases/latest | yq '.tag_name' | sed 's/^v//')
-  if [[ "${RELEASE}" != "$(cat ~/.booklore 2>/dev/null)" ]] || [[ ! -f ~/.booklore ]]; then
-    msg_info "Stopping $APP"
-    systemctl stop booklore
-    msg_ok "Stopped $APP"
-
-    fetch_and_deploy_gh_release "booklore" "adityachandelgit/BookLore"
-
-    msg_info "Building Frontend"
-    cd /opt/booklore/booklore-ui
-    $STD npm install --force
-    $STD npm run build --configuration=production
-    msg_ok "Built Frontend"
-
-    msg_info "Building Backend"
-    cd /opt/booklore/booklore-api
-    APP_VERSION=$(curl -fsSL https://api.github.com/repos/adityachandelgit/BookLore/releases/latest | yq '.tag_name' | sed 's/^v//')
-    yq eval ".app.version = \"${APP_VERSION}\"" -i src/main/resources/application.yaml
-    $STD ./gradlew clean build --no-daemon
-    mkdir -p /opt/booklore/dist
-    JAR_PATH=$(find /opt/booklore/booklore-api/build/libs -maxdepth 1 -type f -name "booklore-api-*.jar" ! -name "*plain*" | head -n1)
-    if [[ -z "$JAR_PATH" ]]; then
-      msg_error "Backend JAR not found"
-      exit 1
-    fi
-    cp "$JAR_PATH" /opt/booklore/dist/app.jar
-    msg_ok "Built Backend"
-
-    msg_info "Starting $APP"
-    systemctl start booklore
-    systemctl reload nginx
-    msg_ok "Started $APP"
-
-    msg_ok "Update Successful"
-  else
-    msg_ok "No update required. ${APP} is already at v${RELEASE}"
-  fi
-  exit
-}
-
-start
-build_container
-description
-
-msg_ok "Completed Successfully!\n"
-echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"
-echo -e "${INFO}${YW} Access it using the following URL:${CL}"
-echo -e "${TAB}${GATEWAY}${BGN}http://${IP}:6060${CL}"

ct/convertx.sh

@@ -1,70 +0,0 @@
-#!/usr/bin/env bash
-source <(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/misc/build.func)
-# Copyright (c) 2021-2025 community-scripts ORG
-# Author: Omar Minaya | MickLesk (CanbiZ)
-# License: MIT | https://github.com/community-scripts/ProxmoxVE/raw/main/LICENSE
-# Source: https://github.com/C4illin/ConvertX
-
-APP="ConvertX"
-var_tags="${var_tags:-converter}"
-var_cpu="${var_cpu:-2}"
-var_ram="${var_ram:-4096}"
-var_disk="${var_disk:-20}"
-var_os="${var_os:-debian}"
-var_version="${var_version:-12}"
-var_unprivileged="${var_unprivileged:-1}"
-
-header_info "$APP"
-variables
-color
-catch_errors
-
-function update_script() {
-  header_info
-  check_container_storage
-  check_container_resources
-  if [[ ! -d /var ]]; then
-    msg_error "No ${APP} Installation Found!"
-    exit
-  fi
-  RELEASE=$(curl -fsSL https://api.github.com/repos/C4illin/ConvertX/releases/latest | grep "tag_name" | awk '{print substr($2, 2, length($2)-3) }')
-  if [[ "${RELEASE}" != "$(cat ~/.convertx 2>/dev/null)" ]] || [[ ! -f ~/.convertx ]]; then
-    msg_info "Stopping $APP"
-    systemctl stop convertx
-    msg_ok "Stopped $APP"
-
-    msg_info "Move data-Folder"
-    if [[ -d /opt/convertx/data ]]; then
-      mv /opt/convertx/data /opt/data
-    fi
-    msg_ok "Moved data-Folder"
-
-    fetch_and_deploy_gh_release "ConvertX" "C4illin/ConvertX" "tarball" "latest" "/opt/convertx"
-
-    msg_info "Updating $APP to v${RELEASE}"
-    if [[ -d /opt/data ]]; then
-      mv /opt/data /opt/convertx/data
-    fi
-    cd /opt/convertx
-    $STD bun install
-    msg_ok "Updated $APP to v${RELEASE}"
-
-    msg_info "Starting $APP"
-    systemctl start convertx
-    msg_ok "Started $APP"
-
-    msg_ok "Update Successful"
-  else
-    msg_ok "No update required. ${APP} is already at v${RELEASE}"
-  fi
-  exit
-}
-
-start
-build_container
-description
-
-msg_ok "Completed Successfully!\n"
-echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"
-echo -e "${INFO}${YW} Access it using the following URL:${CL}"
-echo -e "${TAB}${GATEWAY}${BGN}http://${IP}:3000${CL}"

ct/docmost.sh

@@ -8,8 +8,8 @@ source <(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxV
 APP="Docmost"
 var_tags="${var_tags:-documents}"
 var_cpu="${var_cpu:-3}"
-var_ram="${var_ram:-4096}"
-var_disk="${var_disk:-8}"
+var_ram="${var_ram:-3072}"
+var_disk="${var_disk:-7}"
 var_os="${var_os:-debian}"
 var_version="${var_version:-12}"
 

ct/headers/booklore

@@ -1,6 +0,0 @@
-    ____              __   __                  
-   / __ )____  ____  / /__/ /   ____  ________ 
-  / __  / __ \/ __ \/ //_/ /   / __ \/ ___/ _ \
- / /_/ / /_/ / /_/ / ,< / /___/ /_/ / /  /  __/
-/_____/\____/\____/_/|_/_____/\____/_/   \___/ 
-                                               

ct/headers/convertx

@@ -1,6 +0,0 @@
-   ______                           __ _  __
-  / ____/___  ____ _   _____  _____/ /| |/ /
- / /   / __ \/ __ \ | / / _ \/ ___/ __/   / 
-/ /___/ /_/ / / / / |/ /  __/ /  / /_/   |  
-\____/\____/_/ /_/|___/\___/_/   \__/_/|_|  
-                                            

ct/jellyseerr.sh

@@ -70,7 +70,6 @@ function update_script() {
     systemctl stop jellyseerr
     rm -rf dist .next node_modules
     export CYPRESS_INSTALL_BINARY=0
-    cd /opt/jellyseerr
     $STD pnpm install --frozen-lockfile
     export NODE_OPTIONS="--max-old-space-size=3072"
     $STD pnpm build

ct/ollama.sh

@@ -38,8 +38,6 @@ function update_script() {
     TMP_TAR=$(mktemp --suffix=.tgz)
     curl -fL# -o "${TMP_TAR}" "https://github.com/ollama/ollama/releases/download/${RELEASE}/ollama-linux-amd64.tgz"
     msg_info "Updating Ollama to ${RELEASE}"
-    rm -rf /usr/local/lib/ollama
-    rm -rf /usr/local/bin/ollama
     tar -xzf "${TMP_TAR}" -C /usr/local/lib/ollama
     ln -sf /usr/local/lib/ollama/bin/ollama /usr/local/bin/ollama
     echo "${RELEASE}" >/opt/Ollama_version.txt

ct/openwebui.sh

@@ -30,8 +30,6 @@ function update_script() {
 
   if [ -x "/usr/bin/ollama" ]; then
     msg_info "Updating Ollama"
-    rm -rf /usr/lib/ollama
-    rm -rf /usr/bin/ollama
     OLLAMA_VERSION=$(ollama -v | awk '{print $NF}')
     RELEASE=$(curl -s https://api.github.com/repos/ollama/ollama/releases/latest | grep "tag_name" | awk '{print substr($2, 3, length($2)-4)}')
     if [ "$OLLAMA_VERSION" != "$RELEASE" ]; then

ct/wizarr.sh

@@ -60,6 +60,7 @@ function update_script() {
 
     msg_info "Cleaning Up"
     rm -rf "$BACKUP_FILE"
+    rm /tmp/"$RELEASE".zip
     msg_ok "Cleanup Completed"
     msg_ok "Update Successful"
   else

ct/yunohost.sh

@@ -20,24 +20,18 @@ color
 catch_errors
 
 function update_script() {
-  header_info
-  check_container_storage
-  check_container_resources
-  if [[ ! -f /etc/apt/trusted.gpg.d/php.gpg ]]; then
-    msg_error "No ${APP} Installation Found!"
+    header_info
+    check_container_storage
+    check_container_resources
+    if [[ ! -f /etc/apt/trusted.gpg.d/php.gpg ]]; then
+        msg_error "No ${APP} Installation Found!"
+        exit
+    fi
+    msg_info "Updating $APP LXC"
+    $STD apt-get update
+    $STD apt-get -y upgrade
+    msg_ok "Updated $APP LXC"
     exit
-  fi
-  msg_info "Updating OS"
-  $STD apt-get update
-  $STD apt-get -y upgrade
-  msg_ok "Updated OS"
-
-  msg_info "Updating $APP LXC"
-  $STD yunohost tools update
-  $STD yunohost tools upgrade system
-  $STD yunohost tools upgrade apps
-  msg_ok "Updated $APP LXC"
-  exit
 }
 
 start
@@ -47,4 +41,4 @@ description
 msg_ok "Completed Successfully!\n"
 echo -e "${CREATING}${GN}${APP} setup has been successfully initialized!${CL}"
 echo -e "${INFO}${YW} Access it using the following URL:${CL}"
-echo -e "${TAB}${GATEWAY}${BGN}http://${IP}${CL}"
+echo -e "${TAB}${GATEWAY}${BGN}http://${IP}${CL}"

frontend/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"]
+}

frontend/.vscode/settings.json

@@ -1,51 +0,0 @@
-{
-  // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
-
-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never"
-  },
-
-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off", "fixable": true },
-    { "rule": "format/*", "severity": "off", "fixable": true },
-    { "rule": "*-indent", "severity": "off", "fixable": true },
-    { "rule": "*-spacing", "severity": "off", "fixable": true },
-    { "rule": "*-spaces", "severity": "off", "fixable": true },
-    { "rule": "*-order", "severity": "off", "fixable": true },
-    { "rule": "*-dangle", "severity": "off", "fixable": true },
-    { "rule": "*-newline", "severity": "off", "fixable": true },
-    { "rule": "*quotes", "severity": "off", "fixable": true },
-    { "rule": "*semi", "severity": "off", "fixable": true }
-  ],
-
-  // Enable eslint for all supported languages
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "json5",
-    "jsonc",
-    "yaml",
-    "toml",
-    "xml",
-    "gql",
-    "graphql",
-    "astro",
-    "svelte",
-    "css",
-    "less",
-    "scss",
-    "pcss",
-    "postcss"
-  ]
-}

frontend/README.md

@@ -1,281 +0,0 @@
-# Proxmox VE Helper-Scripts Frontend
-
-> 🚀 **Modern frontend for the Community-Scripts Proxmox VE Helper-Scripts repository**
-
-A comprehensive, user-friendly interface built with Next.js that provides access to 300+ automation scripts for Proxmox Virtual Environment management. This frontend serves as the official website for the Community-Scripts organization's Proxmox VE Helper-Scripts repository.
-
-![Next.js](https://img.shields.io/badge/Next.js-15.2.4-black?style=flat-square&logo=next.js)
-![React](https://img.shields.io/badge/React-19.0.0-blue?style=flat-square&logo=react)
-![TypeScript](https://img.shields.io/badge/TypeScript-5.8.2-blue?style=flat-square&logo=typescript)
-![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4.17-06B6D4?style=flat-square&logo=tailwindcss)
-![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)
-
-## 🌟 Features
-
-### Core Functionality
-
-- **📜 Script Management**: Browse, search, and filter 300+ Proxmox VE scripts
-- **📱 Responsive Design**: Mobile-first approach with modern UI/UX
-- **🔍 Advanced Search**: Fuzzy search with category filtering
-- **📊 Analytics Integration**: Built-in analytics for usage tracking
-- **🌙 Dark/Light Mode**: Theme switching with system preference detection
-- **⚡ Performance Optimized**: Static site generation for lightning-fast loading
-
-### Technical Features
-
-- **🎨 Modern UI Components**: Built with Radix UI and shadcn/ui
-- **📈 Data Visualization**: Charts and metrics using Chart.js
-- **🔄 State Management**: React Query for efficient data fetching
-- **📝 Type Safety**: Full TypeScript implementation
-- **🚀 Static Export**: Optimized for GitHub Pages deployment
-
-## 🛠️ Tech Stack
-
-### Frontend Framework
-
-- **[Next.js 15.2.4](https://nextjs.org/)** - React framework with App Router
-- **[React 19.0.0](https://react.dev/)** - Latest React with concurrent features
-- **[TypeScript 5.8.2](https://www.typescriptlang.org/)** - Type-safe JavaScript
-
-### Styling & UI
-
-- **[Tailwind CSS 3.4.17](https://tailwindcss.com/)** - Utility-first CSS framework
-- **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible UI components
-- **[shadcn/ui](https://ui.shadcn.com/)** - Re-usable components built on Radix UI
-- **[Framer Motion](https://www.framer.com/motion/)** - Animation library
-- **[Lucide React](https://lucide.dev/)** - Icon library
-
-### Data & State Management
-
-- **[TanStack Query 5.71.1](https://tanstack.com/query)** - Powerful data synchronization
-- **[Zod 3.24.2](https://zod.dev/)** - TypeScript-first schema validation
-- **[nuqs 2.4.1](https://nuqs.47ng.com/)** - Type-safe search params state manager
-
-### Development Tools
-
-- **[Vitest 3.1.1](https://vitest.dev/)** - Fast unit testing framework
-- **[React Testing Library](https://testing-library.com/react)** - Simple testing utilities
-- **[ESLint](https://eslint.org/)** - Code linting and formatting
-- **[Prettier](https://prettier.io/)** - Code formatting
-
-### Additional Libraries
-
-- **[Chart.js](https://www.chartjs.org/)** - Data visualization
-- **[Fuse.js](https://fusejs.io/)** - Fuzzy search
-- **[date-fns](https://date-fns.org/)** - Date utility library
-- **[Next Themes](https://github.com/pacocoursey/next-themes)** - Theme management
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-- **Node.js 18+** (recommend using the latest LTS version)
-- **npm**, **yarn**, **pnpm**, or **bun** package manager
-- **Git** for version control
-
-### Installation
-
-1. **Clone the repository**
-
-   ```bash
-   git clone https://github.com/community-scripts/ProxmoxVE.git
-   cd ProxmoxVE/frontend
-   ```
-
-2. **Install dependencies**
-
-   ```bash
-   # Using npm
-   npm install
-
-   # Using yarn
-   yarn install
-
-   # Using pnpm
-   pnpm install
-
-   # Using bun
-   bun install
-   ```
-
-3. **Start the development server**
-
-   ```bash
-   npm run dev
-   # or
-   yarn dev
-   # or
-   pnpm dev
-   # or
-   bun dev
-   ```
-
-4. **Open your browser**
-
-   Navigate to [http://localhost:3000](http://localhost:3000) to see the application running.
-
-### Environment Configuration
-
-The application uses the following environment variables:
-
-- `BASE_PATH`: Set to "ProxmoxVE" for GitHub Pages deployment
-- Analytics configuration is handled in `src/config/siteConfig.tsx`
-
-## 🧪 Development
-
-### Available Scripts
-
-```bash
-# Development
-npm run dev          # Start development server with Turbopack
-npm run build        # Build for production
-npm run start        # Start production server (after build)
-
-# Code Quality
-npm run lint         # Run ESLint
-npm run typecheck    # Run TypeScript type checking
-npm run format:write # Format code with Prettier
-npm run format:check # Check code formatting
-
-# Deployment
-npm run deploy       # Build and deploy to GitHub Pages
-```
-
-### Development Workflow
-
-1. **Feature Development**
-
-   - Create a new branch for your feature
-   - Follow the established TypeScript and React patterns
-   - Use the existing component library (shadcn/ui)
-   - Ensure responsive design principles
-
-2. **Code Standards**
-
-   - Follow TypeScript strict mode
-   - Use functional components with hooks
-   - Implement proper error boundaries
-   - Write descriptive variable and function names
-   - Use early returns for better readability
-
-3. **Styling Guidelines**
-
-   - Use Tailwind CSS utility classes
-   - Follow mobile-first responsive design
-   - Implement dark/light mode considerations
-   - Use CSS variables from the design system
-
-4. **Testing**
-   - Write unit tests for utility functions
-   - Test React components with React Testing Library
-   - Ensure accessibility standards are met
-   - Run tests before committing
-
-### Component Development
-
-The project uses a component-driven development approach:
-
-```typescript
-// Example component structure
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-interface ComponentProps {
-  title: string;
-  className?: string;
-}
-
-export const Component = ({ title, className }: ComponentProps) => {
-  return (
-    <div className={cn("default-classes", className)}>
-      <Button>{title}</Button>
-    </div>
-  );
-};
-```
-
-### Configuration for Static Export
-
-The application is configured for static export in `next.config.mjs`:
-
-```javascript
-const nextConfig = {
-  output: "export",
-  basePath: `/ProxmoxVE`,
-  images: {
-    unoptimized: true // Required for static export
-  }
-};
-```
-
-## 🤝 Contributing
-
-We welcome contributions from the community! Here's how you can help:
-
-### Getting Started
-
-1. **Fork the repository** on GitHub
-2. **Clone your fork** locally
-3. **Create a new branch** for your feature or bugfix
-4. **Make your changes** following our coding standards
-5. **Submit a pull request** with a clear description
-
-### Contribution Guidelines
-
-#### Code Style
-
-- Follow the existing TypeScript and React patterns
-- Use descriptive variable and function names
-- Implement proper error handling
-- Write self-documenting code with appropriate comments
-
-#### Component Guidelines
-
-- Use functional components with hooks
-- Implement proper TypeScript types
-- Follow accessibility best practices
-- Ensure responsive design
-- Use the existing design system components
-
-#### Pull Request Process
-
-1. Update documentation if needed
-2. Update the README if you've added new features
-3. Request review from maintainers
-
-### Areas for Contribution
-
-- **🐛 Bug fixes**: Report and fix issues
-- **✨ New features**: Enhance functionality
-- **📚 Documentation**: Improve guides and examples
-- **🎨 UI/UX**: Improve design and user experience
-- **♿ Accessibility**: Enhance accessibility features
-- **🚀 Performance**: Optimize loading and runtime performance
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🙏 Acknowledgments
-
-- **[tteck](https://github.com/tteck)** - Original creator of the Proxmox VE Helper-Scripts
-- **[Community-Scripts Organization](https://github.com/community-scripts)** - Maintaining and expanding the project
-- **[Proxmox Community](https://forum.proxmox.com/)** - For continuous feedback and support
-- **All Contributors** - Thank you for your valuable contributions!
-
-## 📚 Additional Resources
-
-- **[Proxmox VE Documentation](https://pve.proxmox.com/pve-docs/)**
-- **[Community Scripts Repository](https://github.com/community-scripts/ProxmoxVE)**
-- **[Discord Community](https://discord.gg/2wvnMDgdnU)**
-- **[GitHub Discussions](https://github.com/community-scripts/ProxmoxVE/discussions)**
-
-## 🔗 Links
-
-- **🌐 Live Website**: [https://community-scripts.github.io/ProxmoxVE/](https://community-scripts.github.io/ProxmoxVE/)
-- **💬 Discord Server**: [https://discord.gg/2wvnMDgdnU](https://discord.gg/2wvnMDgdnU)
-- **📝 Change Log**: [https://github.com/community-scripts/ProxmoxVE/blob/main/CHANGELOG.md](https://github.com/community-scripts/ProxmoxVE/blob/main/CHANGELOG.md)
-
----
-
-**Made with ❤️ by the Community-Scripts team and contributors**

frontend/eslint.config.mjs

@@ -1,41 +0,0 @@
-import antfu from "@antfu/eslint-config";
-
-export default antfu(
-  {
-    type: "app",
-    typescript: true,
-    formatters: true,
-    next: true,
-    stylistic: {
-      indent: 2,
-      semi: true,
-      quotes: "double",
-    },
-    ignores: ["src/components/ui/**", "README.md", "public/json/**"],
-  },
-  {
-    rules: {
-      "ts/no-redeclare": "off",
-      "ts/consistent-type-definitions": ["error", "type"],
-      "no-console": ["warn"],
-      "antfu/no-top-level-await": ["off"],
-      "node/prefer-global/process": ["off"],
-      "node/no-process-env": ["error"],
-      "perfectionist/sort-imports": [
-        "error",
-        {
-          type: "line-length",
-          order: "desc",
-        },
-      ],
-
-      "unicorn/filename-case": [
-        "error",
-        {
-          case: "kebabCase",
-          ignore: ["README.md"],
-        },
-      ],
-    },
-  },
-);

frontend/package.json

@@ -1,18 +1,22 @@
 {
   "name": "proxmox-helper-scripts-website",
-  "type": "module",
   "version": "1.0.0",
+  "license": "MIT",
   "private": true,
   "author": {
     "name": "Bram Suurd",
     "url": "https://github.com/community-scripts"
   },
-  "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . --fix",
+    "lint": "next lint",
+    "test": "vitest",
+    "deploy": "next build && touch out/.nojekyll && git add out/ && git commit -m \"Deploy\" && git subtree push --prefix out origin gh-pages",
+    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -41,7 +45,7 @@
     "lucide-react": "^0.453.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.2.4",
-    "next-themes": "^0.4.4",
+    "next-themes": "^0.3.0",
     "nuqs": "^2.4.1",
     "pocketbase": "^0.21.5",
     "prettier-plugin-organize-imports": "^4.1.0",
@@ -49,7 +53,7 @@
     "react-chartjs-2": "^5.3.0",
     "react-code-blocks": "^0.1.6",
     "react-datepicker": "^7.6.0",
-    "react-day-picker": "^9.4.3",
+    "react-day-picker": "8.10.1",
     "react-dom": "19.0.0",
     "react-icons": "^5.5.0",
     "react-simple-typewriter": "^5.0.1",
@@ -60,10 +64,9 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.16.1",
-    "@eslint-react/eslint-plugin": "^1.52.2",
-    "@next/eslint-plugin-next": "^15.3.4",
     "@tanstack/eslint-plugin-query": "^5.68.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.16",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
@@ -72,9 +75,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.23.0",
     "eslint-config-next": "15.0.2",
-    "eslint-plugin-format": "^1.0.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
     "jsdom": "^25.0.1",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
@@ -83,13 +83,11 @@
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.1.2",
     "typescript": "^5.8.2",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.1.1"
   },
   "overrides": {
     "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
-    "date-fns": "^4.1.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
   }
 }

frontend/public/json/add-tailscale-lxc.json

@@ -32,6 +32,10 @@
     "password": null
   },
   "notes": [
+    {
+      "text": "Only supported on Debian 12 LXCs",
+      "type": "warning"
+    },
     {
       "text": "After the script finishes, reboot the LXC then run `tailscale up` in the LXC console",
       "type": "info"

frontend/public/json/booklore.json

@@ -1,35 +0,0 @@
-{
-  "name": "BookLore",
-  "slug": "booklore",
-  "categories": [
-    13
-  ],
-  "date_created": "2025-06-27",
-  "type": "ct",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": 6060,
-  "documentation": "https://github.com/adityachandelgit/BookLore",
-  "website": "https://github.com/adityachandelgit/BookLore",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/booklore.webp",
-  "config_path": "/opt/booklore_storage/.env",
-  "description": "BookLore is a self-hosted digital library for managing and reading books, offering a beautiful interface and support for metadata management. Built with a modern tech stack, it provides support for importing, organizing, and reading EPUBs and PDFs, while also managing cover images and book metadata.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "ct/booklore.sh",
-      "resources": {
-        "cpu": 3,
-        "ram": 2048,
-        "hdd": 7,
-        "os": "debian",
-        "version": "12"
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": []
-}

frontend/public/json/convertx.json

@@ -1,40 +0,0 @@
-{
-  "name": "ConvertX",
-  "slug": "convertx",
-  "categories": [
-    9
-  ],
-  "date_created": "2025-06-26",
-  "type": "ct",
-  "updateable": true,
-  "privileged": false,
-  "config_path": "/opt/convertx/.env",
-  "interface_port": 3000,
-  "documentation": "https://github.com/C4illin/ConvertX",
-  "website": "https://github.com/C4illin/ConvertX",
-  "logo": "https://raw.githubusercontent.com/selfhst/icons/refs/heads/main/svg/convertx.svg",
-  "description": "ConvertX is a self-hosted online file converter supporting over 1000 formats, including images, audio, video, documents, and more, powered by FFmpeg, GraphicsMagick, and other libraries.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "ct/convertx.sh",
-      "resources": {
-        "cpu": 2,
-        "ram": 4096,
-        "hdd": 20,
-        "os": "Debian",
-        "version": "12"
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": [
-    {
-      "text": "Complete setup via the web interface at http://<container-ip>:3000. Create and secure the admin account immediately.",
-      "type": "info"
-    }
-  ]
-}

frontend/public/json/docmost.json

@@ -20,8 +20,8 @@
       "script": "ct/docmost.sh",
       "resources": {
         "cpu": 3,
-        "ram": 4096,
-        "hdd": 8,
+        "ram": 3072,
+        "hdd": 7,
         "os": "debian",
         "version": "12"
       }

frontend/public/json/versions.json

@@ -1,229 +1,19 @@
 [
-  {
-    "name": "Jackett/Jackett",
-    "version": "v0.22.2075",
-    "date": "2025-06-28T10:16:17Z"
-  },
-  {
-    "name": "Luligu/matterbridge",
-    "version": "3.1.0",
-    "date": "2025-06-28T09:02:38Z"
-  },
-  {
-    "name": "firefly-iii/firefly-iii",
-    "version": "v6.2.19",
-    "date": "2025-06-28T06:53:45Z"
-  },
-  {
-    "name": "esphome/esphome",
-    "version": "2025.6.2",
-    "date": "2025-06-28T03:47:16Z"
-  },
-  {
-    "name": "plexguide/Huntarr.io",
-    "version": "8.1.11",
-    "date": "2025-06-28T03:42:46Z"
-  },
-  {
-    "name": "tobychui/zoraxy",
-    "version": "v3.2.4",
-    "date": "2025-06-28T02:47:31Z"
-  },
-  {
-    "name": "pocket-id/pocket-id",
-    "version": "v1.5.0",
-    "date": "2025-06-27T22:04:32Z"
-  },
-  {
-    "name": "linkwarden/linkwarden",
-    "version": "v2.11.1",
-    "date": "2025-06-27T21:21:59Z"
-  },
-  {
-    "name": "homarr-labs/homarr",
-    "version": "v1.26.0",
-    "date": "2025-06-27T19:15:24Z"
-  },
-  {
-    "name": "ollama/ollama",
-    "version": "v0.9.4-rc1",
-    "date": "2025-06-27T18:45:33Z"
-  },
-  {
-    "name": "home-assistant/core",
-    "version": "2025.6.3",
-    "date": "2025-06-24T13:00:12Z"
-  },
-  {
-    "name": "mattermost/mattermost",
-    "version": "preview-v0.1",
-    "date": "2025-06-27T14:35:47Z"
-  },
-  {
-    "name": "goauthentik/authentik",
-    "version": "version/2025.6.3",
-    "date": "2025-06-27T14:01:06Z"
-  },
-  {
-    "name": "keycloak/keycloak",
-    "version": "26.2.5",
-    "date": "2025-05-28T06:49:43Z"
-  },
-  {
-    "name": "rclone/rclone",
-    "version": "v1.70.2",
-    "date": "2025-06-27T13:21:17Z"
-  },
-  {
-    "name": "documenso/documenso",
-    "version": "v1.12.0-rc.7",
-    "date": "2025-06-27T12:17:45Z"
-  },
-  {
-    "name": "sabnzbd/sabnzbd",
-    "version": "4.5.1",
-    "date": "2025-04-11T09:57:47Z"
-  },
-  {
-    "name": "FlowiseAI/Flowise",
-    "version": "flowise@3.0.3",
-    "date": "2025-06-27T09:53:57Z"
-  },
-  {
-    "name": "nzbgetcom/nzbget",
-    "version": "v25.1",
-    "date": "2025-06-27T09:14:14Z"
-  },
-  {
-    "name": "cockpit-project/cockpit",
-    "version": "341.1",
-    "date": "2025-06-27T08:50:16Z"
-  },
-  {
-    "name": "zabbix/zabbix",
-    "version": "7.2.10",
-    "date": "2025-06-27T06:40:00Z"
-  },
-  {
-    "name": "MediaBrowser/Emby.Releases",
-    "version": "4.9.1.2",
-    "date": "2025-06-26T22:08:00Z"
-  },
-  {
-    "name": "prometheus/prometheus",
-    "version": "v3.4.2",
-    "date": "2025-06-26T21:45:21Z"
-  },
-  {
-    "name": "home-assistant/operating-system",
-    "version": "15.2",
-    "date": "2025-04-14T15:37:12Z"
-  },
-  {
-    "name": "netbox-community/netbox",
-    "version": "v4.3.3",
-    "date": "2025-06-26T18:42:56Z"
-  },
-  {
-    "name": "apache/tika",
-    "version": "3.2.1-rc2",
-    "date": "2025-06-26T17:10:25Z"
-  },
-  {
-    "name": "tailscale/tailscale",
-    "version": "v1.84.3",
-    "date": "2025-06-26T16:31:57Z"
-  },
-  {
-    "name": "fuma-nama/fumadocs",
-    "version": "fumadocs-ui@15.5.5",
-    "date": "2025-06-26T15:54:17Z"
-  },
-  {
-    "name": "traefik/traefik",
-    "version": "v3.5.0-rc1",
-    "date": "2025-06-26T15:08:43Z"
-  },
-  {
-    "name": "meilisearch/meilisearch",
-    "version": "prototype-no-simd-x86-arroy-0",
-    "date": "2025-06-26T14:54:18Z"
-  },
-  {
-    "name": "AdguardTeam/AdGuardHome",
-    "version": "v0.107.63",
-    "date": "2025-06-26T14:34:19Z"
-  },
-  {
-    "name": "node-red/node-red",
-    "version": "4.1.0-beta.2",
-    "date": "2025-06-26T14:23:26Z"
-  },
-  {
-    "name": "Dolibarr/dolibarr",
-    "version": "18.0.7",
-    "date": "2025-06-26T09:16:33Z"
-  },
-  {
-    "name": "mongodb/mongo",
-    "version": "r8.1.2-rc1",
-    "date": "2025-06-25T22:42:04Z"
-  },
-  {
-    "name": "rcourtman/Pulse",
-    "version": "v3.32.0",
-    "date": "2025-06-25T22:27:01Z"
-  },
-  {
-    "name": "gristlabs/grist-core",
-    "version": "v1.6.1",
-    "date": "2025-06-25T21:19:25Z"
-  },
-  {
-    "name": "coder/code-server",
-    "version": "v4.101.2",
-    "date": "2025-06-25T21:18:52Z"
-  },
-  {
-    "name": "msgbyte/tianji",
-    "version": "v1.22.4",
-    "date": "2025-06-25T20:46:20Z"
-  },
-  {
-    "name": "influxdata/influxdb",
-    "version": "v3.2.0",
-    "date": "2025-06-25T17:31:48Z"
-  },
-  {
-    "name": "wavelog/wavelog",
-    "version": "2.0.5",
-    "date": "2025-06-25T14:53:31Z"
-  },
-  {
-    "name": "jenkinsci/jenkins",
-    "version": "jenkins-2.504.3",
-    "date": "2025-06-25T14:43:01Z"
-  },
-  {
-    "name": "bunkerity/bunkerweb",
-    "version": "testing",
-    "date": "2025-06-16T18:10:42Z"
-  },
-  {
-    "name": "n8n-io/n8n",
-    "version": "n8n@1.100.0",
-    "date": "2025-06-23T12:48:35Z"
-  },
-  {
-    "name": "moghtech/komodo",
-    "version": "v1.18.4",
-    "date": "2025-06-25T00:06:56Z"
-  },
   {
     "name": "duplicati/duplicati",
     "version": "v2.1.0.120-2.1.0.120_canary_2025-06-24",
     "date": "2025-06-24T22:39:50Z"
   },
+  {
+    "name": "jenkinsci/jenkins",
+    "version": "jenkins-2.516",
+    "date": "2025-06-24T21:06:15Z"
+  },
+  {
+    "name": "ollama/ollama",
+    "version": "v0.9.3-rc1",
+    "date": "2025-06-24T20:26:55Z"
+  },
   {
     "name": "evcc-io/evcc",
     "version": "0.204.5",
@@ -249,26 +39,61 @@
     "version": "v2.37.3",
     "date": "2025-06-24T14:05:33Z"
   },
+  {
+    "name": "influxdata/influxdb",
+    "version": "v3.2.0",
+    "date": "2025-06-24T13:20:53Z"
+  },
   {
     "name": "Checkmk/checkmk",
     "version": "v2.4.0p5",
     "date": "2025-06-24T13:06:53Z"
   },
+  {
+    "name": "home-assistant/core",
+    "version": "2025.6.3",
+    "date": "2025-06-24T13:00:12Z"
+  },
+  {
+    "name": "rcourtman/Pulse",
+    "version": "v3.31.2",
+    "date": "2025-06-24T09:45:34Z"
+  },
   {
     "name": "fallenbagel/jellyseerr",
     "version": "preview-fix-proxy-axios",
     "date": "2025-06-24T08:50:22Z"
   },
+  {
+    "name": "Jackett/Jackett",
+    "version": "v0.22.2052",
+    "date": "2025-06-24T05:59:30Z"
+  },
   {
     "name": "wazuh/wazuh",
     "version": "coverity-w26-4.13.0",
     "date": "2025-06-24T02:02:34Z"
   },
+  {
+    "name": "meilisearch/meilisearch",
+    "version": "prototype-incremental-vector-store-1",
+    "date": "2025-06-23T21:37:47Z"
+  },
   {
     "name": "minio/minio",
     "version": "RELEASE.2025-06-13T11-33-47Z",
     "date": "2025-06-23T20:58:42Z"
   },
+  {
+    "name": "keycloak/keycloak",
+    "version": "26.2.5",
+    "date": "2025-05-28T06:49:43Z"
+  },
+  {
+    "name": "esphome/esphome",
+    "version": "2025.6.1",
+    "date": "2025-06-23T19:28:09Z"
+  },
   {
     "name": "runtipi/runtipi",
     "version": "v4.2.1",
@@ -279,16 +104,36 @@
     "version": "pmm-6401-v1.120.0",
     "date": "2025-06-23T15:12:12Z"
   },
+  {
+    "name": "n8n-io/n8n",
+    "version": "n8n@1.98.2",
+    "date": "2025-06-18T18:20:16Z"
+  },
   {
     "name": "Graylog2/graylog2-server",
     "version": "6.3.0-rc.2",
     "date": "2025-06-23T11:31:38Z"
   },
+  {
+    "name": "mattermost/mattermost",
+    "version": "v9.11.17",
+    "date": "2025-06-18T08:12:05Z"
+  },
+  {
+    "name": "firefly-iii/firefly-iii",
+    "version": "v6.2.18",
+    "date": "2025-06-20T04:45:37Z"
+  },
   {
     "name": "gotson/komga",
     "version": "1.22.0",
     "date": "2025-06-23T03:11:37Z"
   },
+  {
+    "name": "plexguide/Huntarr.io",
+    "version": "8.1.8",
+    "date": "2025-06-23T00:21:30Z"
+  },
   {
     "name": "OliveTin/OliveTin",
     "version": "2025.6.22",
@@ -299,11 +144,26 @@
     "version": "release-5.1.1",
     "date": "2025-06-22T21:41:17Z"
   },
+  {
+    "name": "pocket-id/pocket-id",
+    "version": "v1.4.1",
+    "date": "2025-06-22T19:38:08Z"
+  },
+  {
+    "name": "msgbyte/tianji",
+    "version": "v1.22.3",
+    "date": "2025-06-22T18:29:00Z"
+  },
   {
     "name": "clusterzx/paperless-ai",
     "version": "v3.0.7",
     "date": "2025-06-22T17:49:29Z"
   },
+  {
+    "name": "fuma-nama/fumadocs",
+    "version": "create-fumadocs-app@15.5.4",
+    "date": "2025-06-22T13:12:24Z"
+  },
   {
     "name": "TandoorRecipes/recipes",
     "version": "1.5.35",
@@ -324,6 +184,11 @@
     "version": "v2.0.114",
     "date": "2025-06-21T11:20:21Z"
   },
+  {
+    "name": "Luligu/matterbridge",
+    "version": "3.0.7",
+    "date": "2025-06-21T09:24:21Z"
+  },
   {
     "name": "theonedev/onedev",
     "version": "v11.11.1",
@@ -339,6 +204,11 @@
     "version": "0.50.4",
     "date": "2025-06-21T07:47:02Z"
   },
+  {
+    "name": "coder/code-server",
+    "version": "v4.101.1",
+    "date": "2025-06-21T02:47:08Z"
+  },
   {
     "name": "go-gitea/gitea",
     "version": "v1.24.2",
@@ -349,11 +219,41 @@
     "version": "v1.135.3",
     "date": "2025-06-20T20:19:20Z"
   },
+  {
+    "name": "apache/tika",
+    "version": "3.2.1-rc1",
+    "date": "2025-06-20T19:41:10Z"
+  },
+  {
+    "name": "homarr-labs/homarr",
+    "version": "v1.25.0",
+    "date": "2025-06-20T19:15:43Z"
+  },
+  {
+    "name": "mongodb/mongo",
+    "version": "r8.1.2-rc0",
+    "date": "2025-06-20T17:35:38Z"
+  },
+  {
+    "name": "nzbgetcom/nzbget",
+    "version": "v25.0",
+    "date": "2025-05-12T09:12:04Z"
+  },
   {
     "name": "Sonarr/Sonarr",
     "version": "v4.0.15.2941",
     "date": "2025-06-20T17:20:54Z"
   },
+  {
+    "name": "bunkerity/bunkerweb",
+    "version": "testing",
+    "date": "2025-06-16T18:10:42Z"
+  },
+  {
+    "name": "zabbix/zabbix",
+    "version": "7.2.9",
+    "date": "2025-06-20T10:58:45Z"
+  },
   {
     "name": "syncthing/syncthing",
     "version": "2.0.0-rc.19",
@@ -369,6 +269,11 @@
     "version": "v2.17.1",
     "date": "2025-06-19T19:35:01Z"
   },
+  {
+    "name": "rclone/rclone",
+    "version": "v1.70.1",
+    "date": "2025-06-19T13:19:02Z"
+  },
   {
     "name": "icereed/paperless-gpt",
     "version": "v0.21.0",
@@ -459,6 +364,11 @@
     "version": "2025.6.1",
     "date": "2025-06-17T12:45:39Z"
   },
+  {
+    "name": "sabnzbd/sabnzbd",
+    "version": "4.5.1",
+    "date": "2025-04-11T09:57:47Z"
+  },
   {
     "name": "crowdsecurity/crowdsec",
     "version": "v1.6.9",
@@ -489,6 +399,11 @@
     "version": "2.36.1",
     "date": "2025-06-16T19:20:54Z"
   },
+  {
+    "name": "goauthentik/authentik",
+    "version": "version/2025.6.2",
+    "date": "2025-06-16T17:54:39Z"
+  },
   {
     "name": "emqx/emqx",
     "version": "e5.9.1-alpha.1",
@@ -504,6 +419,16 @@
     "version": "v8.1.16",
     "date": "2025-06-16T13:49:37Z"
   },
+  {
+    "name": "home-assistant/operating-system",
+    "version": "15.2",
+    "date": "2025-04-14T15:37:12Z"
+  },
+  {
+    "name": "moghtech/komodo",
+    "version": "v1.18.3",
+    "date": "2025-06-16T07:03:46Z"
+  },
   {
     "name": "jellyfin/jellyfin",
     "version": "v10.10.7",
@@ -524,6 +449,11 @@
     "version": "cli/v0.25.0",
     "date": "2025-06-15T17:48:29Z"
   },
+  {
+    "name": "tobychui/zoraxy",
+    "version": "v3.1.9",
+    "date": "2025-03-01T02:24:33Z"
+  },
   {
     "name": "Prowlarr/Prowlarr",
     "version": "v1.37.0.5076",
@@ -569,6 +499,11 @@
     "version": "v3.3.25",
     "date": "2025-06-14T02:52:44Z"
   },
+  {
+    "name": "FlowiseAI/Flowise",
+    "version": "flowise@3.0.2",
+    "date": "2025-06-12T22:48:11Z"
+  },
   {
     "name": "leiweibau/Pi.Alert",
     "version": "v2025-06-12",
@@ -579,6 +514,16 @@
     "version": "v3.3.0",
     "date": "2025-06-12T06:54:48Z"
   },
+  {
+    "name": "documenso/documenso",
+    "version": "v1.12.0-rc.4",
+    "date": "2025-06-12T00:27:41Z"
+  },
+  {
+    "name": "MediaBrowser/Emby.Releases",
+    "version": "4.8.11.0",
+    "date": "2025-03-10T06:39:11Z"
+  },
   {
     "name": "autobrr/autobrr",
     "version": "v1.63.1",
@@ -594,6 +539,16 @@
     "version": "v0.15.0-rc2",
     "date": "2025-06-11T04:29:22Z"
   },
+  {
+    "name": "node-red/node-red",
+    "version": "4.1.0-beta.1",
+    "date": "2025-06-10T15:47:59Z"
+  },
+  {
+    "name": "AdguardTeam/AdGuardHome",
+    "version": "v0.107.62",
+    "date": "2025-05-27T12:10:19Z"
+  },
   {
     "name": "OctoPrint/OctoPrint",
     "version": "1.11.2",
@@ -604,6 +559,11 @@
     "version": "v0.8.4",
     "date": "2025-06-10T07:57:14Z"
   },
+  {
+    "name": "tailscale/tailscale",
+    "version": "v1.84.2",
+    "date": "2025-06-09T23:43:27Z"
+  },
   {
     "name": "Brandawg93/PeaNUT",
     "version": "v5.8.0",
@@ -659,6 +619,11 @@
     "version": "10.1.42",
     "date": "2025-06-05T22:39:40Z"
   },
+  {
+    "name": "netbox-community/netbox",
+    "version": "v4.3.2",
+    "date": "2025-06-05T19:57:01Z"
+  },
   {
     "name": "benjaminjonard/koillection",
     "version": "1.6.14",
@@ -684,6 +649,11 @@
     "version": "v4.1.1",
     "date": "2025-06-04T19:10:05Z"
   },
+  {
+    "name": "cockpit-project/cockpit",
+    "version": "340",
+    "date": "2025-06-04T16:41:44Z"
+  },
   {
     "name": "intri-in/manage-my-damn-life-nextjs",
     "version": "v0.7.1",
@@ -724,6 +694,11 @@
     "version": "v5.18.1",
     "date": "2025-05-31T23:06:08Z"
   },
+  {
+    "name": "prometheus/prometheus",
+    "version": "v3.4.1",
+    "date": "2025-05-31T13:45:40Z"
+  },
   {
     "name": "blakeblackshear/frigate",
     "version": "v0.14.1",
@@ -739,6 +714,11 @@
     "version": "0.26.3",
     "date": "2025-05-29T21:18:15Z"
   },
+  {
+    "name": "gristlabs/grist-core",
+    "version": "v1.6.0",
+    "date": "2025-05-29T19:11:21Z"
+  },
   {
     "name": "navidrome/navidrome",
     "version": "v0.56.1",
@@ -769,6 +749,11 @@
     "version": "1.2.34",
     "date": "2025-05-27T18:18:00Z"
   },
+  {
+    "name": "traefik/traefik",
+    "version": "v3.4.1",
+    "date": "2025-05-27T12:53:58Z"
+  },
   {
     "name": "dani-garcia/vaultwarden",
     "version": "1.34.1",
@@ -839,6 +824,16 @@
     "version": "v1.1.1",
     "date": "2025-05-17T10:10:36Z"
   },
+  {
+    "name": "wavelog/wavelog",
+    "version": "2.0.4",
+    "date": "2025-05-16T15:09:53Z"
+  },
+  {
+    "name": "Dolibarr/dolibarr",
+    "version": "18.0.7",
+    "date": "2025-05-15T08:24:30Z"
+  },
   {
     "name": "Ombi-app/Ombi",
     "version": "v4.47.1",
@@ -899,6 +894,11 @@
     "version": "v1.8.1",
     "date": "2025-05-06T04:27:00Z"
   },
+  {
+    "name": "linkwarden/linkwarden",
+    "version": "v2.10.2",
+    "date": "2025-05-06T03:12:53Z"
+  },
   {
     "name": "postgres/postgres",
     "version": "REL_13_21",

frontend/public/json/wireguard.json

@@ -44,7 +44,7 @@
   },
   "notes": [
     {
-      "text": "Wireguard and WGDashboard are not the same. More info: `https://docs.wgdashboard.dev/what-is-wireguard-what-is-wgdashboard.html`",
+      "text": "Wireguard and WGDashboard are not the same. More info: `https://donaldzou.github.io/WGDashboard-Documentation/what-is-wireguard-what-is-wgdashboard.html`",
       "type": "info"
     }
   ]

frontend/public/json/yunohost.json

@@ -1,40 +1,40 @@
 {
-  "name": "YunoHost",
-  "slug": "yunohost",
-  "categories": [
-    2
-  ],
-  "date_created": "2024-05-02",
-  "type": "ct",
-  "updateable": true,
-  "privileged": false,
-  "interface_port": 80,
-  "documentation": null,
-  "website": "https://yunohost.org/",
-  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/yunohost.webp",
-  "config_path": "",
-  "description": "YunoHost is an operating system aiming for the simplest administration of a server, and therefore democratize self-hosting, while making sure it stays reliable, secure, ethical and lightweight.",
-  "install_methods": [
-    {
-      "type": "default",
-      "script": "ct/yunohost.sh",
-      "resources": {
-        "cpu": 2,
-        "ram": 2048,
-        "hdd": 20,
-        "os": "debian",
-        "version": "12"
-      }
-    }
-  ],
-  "default_credentials": {
-    "username": null,
-    "password": null
-  },
-  "notes": [
-    {
-      "text": "WARNING: Installation sources scripts outside of Community Scripts repo. Please check the source before installing.",
-      "type": "warning"
-    }
-  ]
+    "name": "YunoHost",
+    "slug": "yunohost",
+    "categories": [
+        2
+    ],
+    "date_created": "2024-05-02",
+    "type": "ct",
+    "updateable": false,
+    "privileged": false,
+    "interface_port": 80,
+    "documentation": null,
+    "website": "https://yunohost.org/",
+    "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/yunohost.webp",
+    "config_path": "",
+    "description": "YunoHost is an operating system aiming for the simplest administration of a server, and therefore democratize self-hosting, while making sure it stays reliable, secure, ethical and lightweight.",
+    "install_methods": [
+        {
+            "type": "default",
+            "script": "ct/yunohost.sh",
+            "resources": {
+                "cpu": 2,
+                "ram": 2048,
+                "hdd": 20,
+                "os": "debian",
+                "version": "12"
+            }
+        }
+    ],
+    "default_credentials": {
+        "username": null,
+        "password": null
+    },
+    "notes": [
+        {
+            "text": "WARNING: Installation sources scripts outside of Community Scripts repo. Please check the source before installing.",
+            "type": "warning"
+        }
+    ]
 }

frontend/src/__tests__/app/page.test.tsx

@@ -0,0 +1,11 @@
+import { screen } from "@testing-library/dom";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import Page from "@/app/page";
+
+describe("Page", () => {
+  it("should show button to view scripts", () => {
+    render(<Page />);
+    expect(screen.getByRole("button", { name: "View Scripts" })).toBeDefined();
+  });
+});

frontend/src/__tests__/public/validate-json.test.ts

@@ -0,0 +1,56 @@
+import { describe, it, assert, beforeAll } from "vitest";
+import { promises as fs } from "fs";
+import path from "path";
+import { ScriptSchema, type Script } from "@/app/json-editor/_schemas/schemas";
+import { Metadata } from "@/lib/types";
+console.log('Current directory: ' + process.cwd());
+const jsonDir = "public/json";
+const metadataFileName = "metadata.json";
+const versionsFileName = "versions.json";
+const encoding = "utf-8";
+
+const fileNames = (await fs.readdir(jsonDir))
+  .filter((fileName) => fileName !== metadataFileName && fileName !== versionsFileName);
+
+describe.each(fileNames)("%s", async (fileName) => {
+  let script: Script;
+
+  beforeAll(async () => {
+    const filePath =  path.resolve(jsonDir, fileName);
+    const fileContent = await fs.readFile(filePath, encoding)
+    script = JSON.parse(fileContent);
+  })
+
+
+  it("should have valid json according to script schema", () => {
+    ScriptSchema.parse(script);
+  });
+
+  it("should have a corresponding script file", () => {
+    script.install_methods.forEach((method) => {
+      const scriptPath = path.resolve("..", method.script)
+      //FIXME: Dose note account for new dir structure and files in /script/tools
+
+      assert(fs.stat(scriptPath), `Script file not found: ${scriptPath}`)
+    })
+  });
+})
+
+describe(`${metadataFileName}`, async () => {
+  let metadata: Metadata;
+
+  beforeAll(async () => {
+    const filePath =  path.resolve(jsonDir, metadataFileName);
+    const fileContent = await fs.readFile(filePath, encoding)
+    metadata = JSON.parse(fileContent);
+  })
+  it("should have valid json according to metadata schema", () => {
+    // TODO: create zod schema for metadata. Move zod schemas to /lib/types.ts
+    assert(metadata.categories.length > 0);
+    metadata.categories.forEach((category) => {
+        assert.isString(category.name)
+        assert.isNumber(category.id)
+        assert.isNumber(category.sort_order)
+    });
+  });
+})

frontend/src/__tests__/setupTests.ts

@@ -0,0 +1,4 @@
+import { vi } from "vitest";
+
+// Mock canvas getContext
+HTMLCanvasElement.prototype.getContext = vi.fn();

frontend/src/app/api/categories/route.ts

@@ -1,8 +1,7 @@
+import { Metadata, Script } from "@/lib/types";
+import { promises as fs } from "fs";
 import { NextResponse } from "next/server";
-import { promises as fs } from "node:fs";
-import path from "node:path";
-
-import type { Metadata, Script } from "@/lib/types";
+import path from "path";
 
 export const dynamic = "force-static";
 
@@ -11,21 +10,21 @@ const metadataFileName = "metadata.json";
 const versionFileName = "version.json";
 const encoding = "utf-8";
 
-async function getMetadata() {
+const getMetadata = async () => {
   const filePath = path.resolve(jsonDir, metadataFileName);
   const fileContent = await fs.readFile(filePath, encoding);
   const metadata: Metadata = JSON.parse(fileContent);
   return metadata;
-}
+};
 
-async function getScripts() {
+const getScripts = async () => {
   const filePaths = (await fs.readdir(jsonDir))
-    .filter(fileName =>
-      fileName.endsWith(".json")
-      && fileName !== metadataFileName
-      && fileName !== versionFileName,
+    .filter((fileName) => 
+      fileName.endsWith(".json") && 
+      fileName !== metadataFileName && 
+      fileName !== versionFileName
     )
-    .map(fileName => path.resolve(jsonDir, fileName));
+    .map((fileName) => path.resolve(jsonDir, fileName));
 
   const scripts = await Promise.all(
     filePaths.map(async (filePath) => {
@@ -35,7 +34,7 @@ async function getScripts() {
     }),
   );
   return scripts;
-}
+};
 
 export async function GET() {
   try {
@@ -44,7 +43,7 @@ export async function GET() {
 
     const categories = metadata.categories
       .map((category) => {
-        category.scripts = scripts.filter(script =>
+        category.scripts = scripts.filter((script) =>
           script.categories?.includes(category.id),
         );
         return category;
@@ -52,8 +51,7 @@ export async function GET() {
       .sort((a, b) => a.sort_order - b.sort_order);
 
     return NextResponse.json(categories);
-  }
-  catch (error) {
+  } catch (error) {
     console.error(error as Error);
     return NextResponse.json(
       { error: "Failed to fetch categories" },

frontend/src/app/api/versions/route.ts

@@ -1,9 +1,9 @@
+import { AppVersion } from "@/lib/types";
+import { error } from "console";
+import { promises as fs } from "fs";
 // import Error from "next/error";
 import { NextResponse } from "next/server";
-import { promises as fs } from "node:fs";
-import path from "node:path";
-
-import type { AppVersion } from "@/lib/types";
+import path from "path";
 
 export const dynamic = "force-static";
 
@@ -11,32 +11,33 @@ const jsonDir = "public/json";
 const versionsFileName = "versions.json";
 const encoding = "utf-8";
 
-async function getVersions() {
+const getVersions = async () => {
   const filePath = path.resolve(jsonDir, versionsFileName);
   const fileContent = await fs.readFile(filePath, encoding);
   const versions: AppVersion[] = JSON.parse(fileContent);
 
-  const modifiedVersions = versions.map((version) => {
+  const modifiedVersions = versions.map(version => {
     let newName = version.name;
-    newName = newName.toLowerCase().replace(/[^a-z0-9/]/g, "");
+    newName = newName.toLowerCase().replace(/[^a-z0-9/]/g, '');
     return { ...version, name: newName, date: new Date(version.date) };
   });
 
   return modifiedVersions;
-}
+};
 
 export async function GET() {
   try {
+
     const versions = await getVersions();
     return NextResponse.json(versions);
-  }
-  catch (error) {
+
+  } catch (error) {
     console.error(error);
     const err = error as globalThis.Error;
     return NextResponse.json({
       name: err.name,
       message: err.message || "An unexpected error occurred",
-      version: "No version found - Error",
+      version: "No version found - Error"
     }, {
       status: 500,
     });

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

@@ -1,20 +1,18 @@
 "use client";
 
-import { ChevronLeft, ChevronRight } from "lucide-react";
-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";
+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";
 
 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
 
-function formattedBadge(type: string) {
+const formattedBadge = (type: string) => {
   switch (type) {
     case "vm":
       return <Badge className="text-blue-500/75 border-blue-500/75 badge">VM</Badge>;
@@ -26,9 +24,9 @@ function formattedBadge(type: string) {
       return <Badge className="text-green-500/75 border-green-500/75 badge">ADDON</Badge>;
   }
   return null;
-}
+};
 
-function CategoryView() {
+const CategoryView = () => {
   const [categories, setCategories] = useState<Category[]>([]);
   const [selectedCategoryIndex, setSelectedCategoryIndex] = useState<number | null>(null);
   const [currentScripts, setCurrentScripts] = useState<any[]>([]);
@@ -38,7 +36,6 @@ function 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) {
@@ -53,8 +50,7 @@ function CategoryView() {
           initialLogoIndices[category.name] = 0;
         });
         setLogoIndices(initialLogoIndices);
-      }
-      catch (error) {
+      } catch (error) {
         console.error("Error fetching categories:", error);
       }
     };
@@ -78,8 +74,8 @@ function 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);
@@ -90,13 +86,12 @@ function 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;
 
@@ -114,49 +109,35 @@ function 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 (
@@ -164,151 +145,145 @@ function 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>
+      {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)}
+          {/* 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)}
+                >
+                  <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."}
                     >
-                      <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>
+                      {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>
-          )}
+          {/* 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;

frontend/src/app/data/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import "react-datepicker/dist/react-datepicker.css";
+import React, { JSX, useEffect, useState } from "react";
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import ApplicationChart from "../../components/ApplicationChart";
 
-import ApplicationChart from "../../components/application-chart";
-
-type DataModel = {
+interface DataModel {
   id: number;
   ct_type: number;
   disk_size: number;
@@ -22,13 +22,13 @@ type DataModel = {
   error: string;
   type: string;
   [key: string]: any;
-};
+}
 
-type SummaryData = {
+interface SummaryData {
   total_entries: number;
   status_count: Record<string, number>;
   nsapp_count: Record<string, number>;
-};
+}
 
 const DataFetcher: React.FC = () => {
   const [data, setData] = useState<DataModel[]>([]);
@@ -37,18 +37,16 @@ const DataFetcher: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(25);
-  const [sortConfig, setSortConfig] = useState<{ key: string; direction: "ascending" | "descending" } | null>(null);
+  const [sortConfig, setSortConfig] = useState<{ key: string; direction: 'ascending' | 'descending' } | null>(null);
 
   useEffect(() => {
     const fetchSummary = async () => {
       try {
         const response = await fetch("https://api.htl-braunau.at/data/summary");
-        if (!response.ok)
-          throw new Error(`Failed to fetch summary: ${response.statusText}`);
+        if (!response.ok) throw new Error(`Failed to fetch summary: ${response.statusText}`);
         const result: SummaryData = await response.json();
         setSummary(result);
-      }
-      catch (err) {
+      } catch (err) {
         setError((err as Error).message);
       }
     };
@@ -60,16 +58,13 @@ const DataFetcher: React.FC = () => {
     const fetchPaginatedData = async () => {
       setLoading(true);
       try {
-        const response = await fetch(`https://api.htl-braunau.at/data/paginated?page=${currentPage}&limit=${itemsPerPage === 0 ? "" : itemsPerPage}`);
-        if (!response.ok)
-          throw new Error(`Failed to fetch data: ${response.statusText}`);
+        const response = await fetch(`https://api.htl-braunau.at/data/paginated?page=${currentPage}&limit=${itemsPerPage === 0 ? '' : itemsPerPage}`);
+        if (!response.ok) throw new Error(`Failed to fetch data: ${response.statusText}`);
         const result: DataModel[] = await response.json();
         setData(result);
-      }
-      catch (err) {
+      } catch (err) {
         setError((err as Error).message);
-      }
-      finally {
+      } finally {
         setLoading(false);
       }
     };
@@ -78,35 +73,26 @@ const DataFetcher: React.FC = () => {
   }, [currentPage, itemsPerPage]);
 
   const sortedData = React.useMemo(() => {
-    if (!sortConfig)
-      return data;
+    if (!sortConfig) return data;
     const sorted = [...data].sort((a, b) => {
       if (a[sortConfig.key] < b[sortConfig.key]) {
-        return sortConfig.direction === "ascending" ? -1 : 1;
+        return sortConfig.direction === 'ascending' ? -1 : 1;
       }
       if (a[sortConfig.key] > b[sortConfig.key]) {
-        return sortConfig.direction === "ascending" ? 1 : -1;
+        return sortConfig.direction === 'ascending' ? 1 : -1;
       }
       return 0;
     });
     return sorted;
   }, [data, sortConfig]);
 
-  if (loading)
-    return <p>Loading...</p>;
-  if (error) {
-    return (
-      <p>
-        Error:
-        {error}
-      </p>
-    );
-  }
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
 
   const requestSort = (key: string) => {
-    let direction: "ascending" | "descending" = "ascending";
-    if (sortConfig && sortConfig.key === key && sortConfig.direction === "ascending") {
-      direction = "descending";
+    let direction: 'ascending' | 'descending' = 'ascending';
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === 'ascending') {
+      direction = 'descending';
     }
     setSortConfig({ key, direction });
   };
@@ -116,8 +102,8 @@ const DataFetcher: React.FC = () => {
     const year = date.getFullYear();
     const month = date.getMonth() + 1;
     const day = date.getDate();
-    const hours = String(date.getHours()).padStart(2, "0");
-    const minutes = String(date.getMinutes()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
     const timezoneOffset = dateString.slice(-6);
     return `${day}.${month}.${year} ${hours}:${minutes} ${timezoneOffset} GMT`;
   };
@@ -128,76 +114,49 @@ const DataFetcher: React.FC = () => {
       <ApplicationChart data={summary} />
       <p className="text-lg font-bold mt-4"> </p>
       <div className="mb-4 flex justify-between items-center">
-        <p className="text-lg font-bold">
-          {summary?.total_entries}
-          {" "}
-          results found
-        </p>
-        <p className="text-lg font">
-          Status Legend: 🔄 installing
-          {summary?.status_count.installing ?? 0}
-          {" "}
-          | ✔️ completed
-          {summary?.status_count.done ?? 0}
-          {" "}
-          | ❌ failed
-          {summary?.status_count.failed ?? 0}
-          {" "}
-          | ❓ unknown
-        </p>
-      </div>
+        <p className="text-lg font-bold">{summary?.total_entries} results found</p>
+        <p className="text-lg font">Status Legend: 🔄 installing {summary?.status_count["installing"] ?? 0} | ✔️ completed {summary?.status_count["done"] ?? 0} | ❌ failed {summary?.status_count["failed"] ?? 0} | ❓ unknown</p>
+      </div>      
       <div className="overflow-x-auto">
         <div className="overflow-y-auto lg:overflow-y-visible">
           <table className="min-w-full table-auto border-collapse">
             <thead>
               <tr>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("status")}>Status</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("type")}>Type</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("nsapp")}>Application</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("os_type")}>OS</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("os_version")}>OS Version</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("disk_size")}>Disk Size</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("core_count")}>Core Count</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("ram_size")}>RAM Size</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("method")}>Method</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("pve_version")}>PVE Version</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("error")}>Error Message</th>
-                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort("created_at")}>Created At</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('status')}>Status</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('type')}>Type</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('nsapp')}>Application</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_type')}>OS</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('os_version')}>OS Version</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('disk_size')}>Disk Size</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('core_count')}>Core Count</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('ram_size')}>RAM Size</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('method')}>Method</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('pve_version')}>PVE Version</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('error')}>Error Message</th>
+                <th className="px-4 py-2 border-b cursor-pointer" onClick={() => requestSort('created_at')}>Created At</th>
               </tr>
             </thead>
             <tbody>
               {sortedData.map((item, index) => (
                 <tr key={index}>
                   <td className="px-4 py-2 border-b">
-                    {item.status === "done"
-                      ? (
-                          "✔️"
-                        )
-                      : item.status === "failed"
-                        ? (
-                            "❌"
-                          )
-                        : item.status === "installing"
-                          ? (
-                              "🔄"
-                            )
-                          : (
-                              item.status
-                            )}
-                  </td>
-                  <td className="px-4 py-2 border-b">
-                    {item.type === "lxc"
-                      ? (
-                          "📦"
-                        )
-                      : item.type === "vm"
-                        ? (
-                            "🖥️"
-                          )
-                        : (
-                            item.type
-                          )}
+                    {item.status === "done" ? (
+                      "✔️"
+                    ) : item.status === "failed" ? (
+                      "❌"
+                    ) : item.status === "installing" ? (
+                      "🔄"
+                    ) : (
+                      item.status
+                    )}
                   </td>
+                  <td className="px-4 py-2 border-b">{item.type === "lxc" ? (
+                    "📦"
+                  ) : item.type === "vm" ? (
+                    "🖥️"
+                  ) : (
+                    item.type
+                  )}</td>
                   <td className="px-4 py-2 border-b">{item.nsapp}</td>
                   <td className="px-4 py-2 border-b">{item.os_type}</td>
                   <td className="px-4 py-2 border-b">{item.os_version}</td>
@@ -216,14 +175,11 @@ const DataFetcher: React.FC = () => {
       </div>
       <div className="mt-4 flex justify-between items-center">
         <button onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} disabled={currentPage === 1} className="p-2 border">Previous</button>
-        <span>
-          Page
-          {currentPage}
-        </span>
+        <span>Page {currentPage}</span>
         <button onClick={() => setCurrentPage(prev => prev + 1)} className="p-2 border">Next</button>
         <select
           value={itemsPerPage}
-          onChange={e => setItemsPerPage(Number(e.target.value))}
+          onChange={(e) => setItemsPerPage(Number(e.target.value))}
           className="p-2 border"
         >
           <option value={10}>10</option>

frontend/src/app/json-editor/_components/Categories.tsx

@@ -1,9 +1,4 @@
-import type { z } from "zod";
-
-import { memo } from "react";
-
-import type { Category } from "@/lib/types";
-
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -11,10 +6,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
+import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
-
-import type { Script } from "../_schemas/schemas";
+import { z } from "zod";
+import { type Script } from "../_schemas/schemas";
+import { memo } from "react";
 
 type CategoryProps = {
   script: Script;
@@ -24,10 +20,10 @@ type CategoryProps = {
   categories: Category[];
 };
 
-const CategoryTag = memo(({
-  category,
-  onRemove,
-}: {
+const CategoryTag = memo(({ 
+  category, 
+  onRemove 
+}: { 
   category: Category;
   onRemove: () => void;
 }) => (
@@ -57,7 +53,7 @@ const CategoryTag = memo(({
   </span>
 ));
 
-CategoryTag.displayName = "CategoryTag";
+CategoryTag.displayName = 'CategoryTag';
 
 function Categories({
   script,
@@ -83,16 +79,14 @@ function Categories({
   return (
     <div>
       <Label>
-        Category
-        {" "}
-        <span className="text-red-500">*</span>
+        Category <span className="text-red-500">*</span>
       </Label>
-      <Select onValueChange={value => addCategory(Number(value))}>
+      <Select onValueChange={(value) => addCategory(Number(value))}>
         <SelectTrigger>
           <SelectValue placeholder="Select a category" />
         </SelectTrigger>
         <SelectContent>
-          {categories.map(category => (
+          {categories.map((category) => (
             <SelectItem key={category.id} value={category.id.toString()}>
               {category.name}
             </SelectItem>
@@ -107,15 +101,13 @@ function Categories({
       >
         {script.categories.map((categoryId) => {
           const category = categoryMap.get(categoryId);
-          return category
-            ? (
-                <CategoryTag
-                  key={categoryId}
-                  category={category}
-                  onRemove={() => removeCategory(categoryId)}
-                />
-              )
-            : null;
+          return category ? (
+            <CategoryTag
+              key={categoryId}
+              category={category}
+              onRemove={() => removeCategory(categoryId)}
+            />
+          ) : null;
         })}
       </div>
     </div>

frontend/src/app/json-editor/_components/InstallMethod.tsx

@@ -1,16 +1,11 @@
-import type { z } from "zod";
-
-import { PlusCircle, Trash2 } from "lucide-react";
-import { memo, useCallback, useRef } from "react";
-
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { OperatingSystems } from "@/config/site-config";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-
-import type { Script } from "../_schemas/schemas";
-
-import { InstallMethodSchema, ScriptSchema } from "../_schemas/schemas";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { OperatingSystems } from "@/config/siteConfig";
+import { PlusCircle, Trash2 } from "lucide-react";
+import { memo, useCallback, useRef } from "react";
+import { z } from "zod";
+import { InstallMethodSchema, ScriptSchema, type Script } from "../_schemas/schemas";
 
 type InstallMethodProps = {
   script: Script;
@@ -33,11 +28,9 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
 
       if (type === "pve") {
         scriptPath = `tools/pve/${slug}.sh`;
-      }
-      else if (type === "addon") {
+      } else if (type === "addon") {
         scriptPath = `tools/addon/${slug}.sh`;
-      }
-      else {
+      } else {
         scriptPath = `${type}/${slug}.sh`;
       }
 
@@ -72,8 +65,8 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             const updatedMethod = { ...method, [key]: value };
 
             if (key === "type") {
-              updatedMethod.script
-                = value === "alpine" ? `${prev.type}/alpine-${prev.slug}.sh` : `${prev.type}/${prev.slug}.sh`;
+              updatedMethod.script =
+                value === "alpine" ? `${prev.type}/alpine-${prev.slug}.sh` : `${prev.type}/${prev.slug}.sh`;
 
               // Set OS to Alpine and reset version if type is alpine
               if (value === "alpine") {
@@ -96,8 +89,7 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
         setIsValid(result.success);
         if (!result.success) {
           setZodErrors(result.error);
-        }
-        else {
+        } else {
           setZodErrors(null);
         }
         return updated;
@@ -108,7 +100,7 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
 
   const removeInstallMethod = useCallback(
     (index: number) => {
-      setScript(prev => ({
+      setScript((prev) => ({
         ...prev,
         install_methods: prev.install_methods.filter((_, i) => i !== index),
       }));
@@ -121,7 +113,7 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
       <h3 className="text-xl font-semibold">Install Methods</h3>
       {script.install_methods.map((method, index) => (
         <div key={index} className="space-y-2 border p-4 rounded">
-          <Select value={method.type} onValueChange={value => updateInstallMethod(index, "type", value)}>
+          <Select value={method.type} onValueChange={(value) => updateInstallMethod(index, "type", value)}>
             <SelectTrigger>
               <SelectValue placeholder="Type" />
             </SelectTrigger>
@@ -138,11 +130,12 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="CPU in Cores"
               type="number"
               value={method.resources.cpu || ""}
-              onChange={e =>
+              onChange={(e) =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   cpu: e.target.value ? Number(e.target.value) : null,
-                })}
+                })
+              }
             />
             <Input
               ref={(el) => {
@@ -151,11 +144,12 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="RAM in MB"
               type="number"
               value={method.resources.ram || ""}
-              onChange={e =>
+              onChange={(e) =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   ram: e.target.value ? Number(e.target.value) : null,
-                })}
+                })
+              }
             />
             <Input
               ref={(el) => {
@@ -164,29 +158,31 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
               placeholder="HDD in GB"
               type="number"
               value={method.resources.hdd || ""}
-              onChange={e =>
+              onChange={(e) =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   hdd: e.target.value ? Number(e.target.value) : null,
-                })}
+                })
+              }
             />
           </div>
           <div className="flex gap-2">
             <Select
               value={method.resources.os || undefined}
-              onValueChange={value =>
+              onValueChange={(value) =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   os: value || null,
                   version: null, // Reset version when OS changes
-                })}
+                })
+              }
               disabled={method.type === "alpine"}
             >
               <SelectTrigger>
                 <SelectValue placeholder="OS" />
               </SelectTrigger>
               <SelectContent>
-                {OperatingSystems.map(os => (
+                {OperatingSystems.map((os) => (
                   <SelectItem key={os.name} value={os.name}>
                     {os.name}
                   </SelectItem>
@@ -195,18 +191,19 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             </Select>
             <Select
               value={method.resources.version || undefined}
-              onValueChange={value =>
+              onValueChange={(value) =>
                 updateInstallMethod(index, "resources", {
                   ...method.resources,
                   version: value || null,
-                })}
+                })
+              }
               disabled={method.type === "alpine"}
             >
               <SelectTrigger>
                 <SelectValue placeholder="Version" />
               </SelectTrigger>
               <SelectContent>
-                {OperatingSystems.find(os => os.name === method.resources.os)?.versions.map(version => (
+                {OperatingSystems.find((os) => os.name === method.resources.os)?.versions.map((version) => (
                   <SelectItem key={version.slug} value={version.name}>
                     {version.name}
                   </SelectItem>
@@ -215,16 +212,12 @@ function InstallMethod({ script, setScript, setIsValid, setZodErrors }: InstallM
             </Select>
           </div>
           <Button variant="destructive" size="sm" type="button" onClick={() => removeInstallMethod(index)}>
-            <Trash2 className="mr-2 h-4 w-4" />
-            {" "}
-            Remove Install Method
+            <Trash2 className="mr-2 h-4 w-4" /> Remove Install Method
           </Button>
         </div>
       ))}
       <Button type="button" size="sm" disabled={script.install_methods.length >= 2} onClick={addInstallMethod}>
-        <PlusCircle className="mr-2 h-4 w-4" />
-        {" "}
-        Add Install Method
+        <PlusCircle className="mr-2 h-4 w-4" /> Add Install Method
       </Button>
     </>
   );

frontend/src/app/json-editor/_components/Note.tsx

@@ -0,0 +1,150 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { AlertColors } from "@/config/siteConfig";
+import { cn } from "@/lib/utils";
+import { PlusCircle, Trash2 } from "lucide-react";
+import { z } from "zod";
+import { ScriptSchema, type Script } from "../_schemas/schemas";
+import { memo, useCallback, useRef } from "react";
+
+type NoteProps = {
+    script: Script;
+    setScript: (script: Script) => void;
+    setIsValid: (isValid: boolean) => void;
+    setZodErrors: (zodErrors: z.ZodError | null) => void;
+};
+
+function Note({
+    script,
+    setScript,
+    setIsValid,
+    setZodErrors,
+}: NoteProps) {
+    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+
+    const addNote = useCallback(() => {
+        setScript({
+            ...script,
+            notes: [...script.notes, { text: "", type: "" }],
+        });
+    }, [script, setScript]);
+
+    const updateNote = useCallback((
+        index: number,
+        key: keyof Script["notes"][number],
+        value: string,
+    ) => {
+        const updated: Script = {
+            ...script,
+            notes: script.notes.map((note, i) =>
+                i === index ? { ...note, [key]: value } : note,
+            ),
+        };
+        const result = ScriptSchema.safeParse(updated);
+        setIsValid(result.success);
+        setZodErrors(result.success ? null : result.error);
+        setScript(updated);
+        // Restore focus after state update
+        if (key === "text") {
+            setTimeout(() => {
+                inputRefs.current[index]?.focus();
+            }, 0);
+        }
+    }, [script, setScript, setIsValid, setZodErrors]);
+
+    const removeNote = useCallback((index: number) => {
+        setScript({
+            ...script,
+            notes: script.notes.filter((_, i) => i !== index),
+        });
+    }, [script, setScript]);
+
+    return (
+        <>
+            <h3 className="text-xl font-semibold">Notes</h3>
+            {script.notes.map((note, index) => (
+                <NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
+            ))}
+            <Button type="button" size="sm" onClick={addNote}>
+                <PlusCircle className="mr-2 h-4 w-4" /> Add Note
+            </Button>
+        </>
+    );
+}
+
+const NoteItem = memo(
+    ({
+        note,
+        index,
+        updateNote,
+        removeNote,
+    }: {
+        note: Script["notes"][number];
+        index: number;
+        updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
+        removeNote: (index: number) => void;
+    }) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+            updateNote(index, "text", e.target.value);
+            setTimeout(() => {
+                inputRef.current?.focus();
+            }, 0);
+        }, [index, updateNote]);
+
+        return (
+            <div className="space-y-2 border p-4 rounded">
+                <Input
+                    placeholder="Note Text"
+                    value={note.text}
+                    onChange={handleTextChange}
+                    ref={inputRef}
+                />
+                <Select
+                    value={note.type}
+                    onValueChange={(value) => updateNote(index, "type", value)}
+                >
+                    <SelectTrigger className="flex-1">
+                        <SelectValue placeholder="Type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {Object.keys(AlertColors).map((type) => (
+                            <SelectItem key={type} value={type}>
+                                <span className="flex items-center gap-2">
+                                    {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
+                                    <div
+                                        className={cn(
+                                            "size-4 rounded-full border",
+                                            AlertColors[type as keyof typeof AlertColors],
+                                        )}
+                                    />
+                                </span>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Button
+                    size="sm"
+                    variant="destructive"
+                    type="button"
+                    onClick={() => removeNote(index)}
+                >
+                    <Trash2 className="mr-2 h-4 w-4" /> Remove Note
+                </Button>
+            </div>
+        );
+    }
+);
+
+NoteItem.displayName = 'NoteItem';
+
+
+export default memo(Note);

frontend/src/app/json-editor/_components/note.tsx

@@ -1,159 +0,0 @@
-import type { z } from "zod";
-
-import { PlusCircle, Trash2 } from "lucide-react";
-import { memo, useCallback, useRef } from "react";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { AlertColors } from "@/config/site-config";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-
-import type { Script } from "../_schemas/schemas";
-
-import { ScriptSchema } from "../_schemas/schemas";
-
-const NoteItem = memo(
-  ({
-    note,
-    index,
-    updateNote,
-    removeNote,
-  }: {
-    note: Script["notes"][number];
-    index: number;
-    updateNote: (index: number, key: keyof Script["notes"][number], value: string) => void;
-    removeNote: (index: number) => void;
-  }) => {
-    const inputRef = useRef<HTMLInputElement | null>(null);
-
-    const handleTextChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-      updateNote(index, "text", e.target.value);
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 0);
-    }, [index, updateNote]);
-
-    return (
-      <div className="space-y-2 border p-4 rounded">
-        <Input
-          placeholder="Note Text"
-          value={note.text}
-          onChange={handleTextChange}
-          ref={inputRef}
-        />
-        <Select
-          value={note.type}
-          onValueChange={value => updateNote(index, "type", value)}
-        >
-          <SelectTrigger className="flex-1">
-            <SelectValue placeholder="Type" />
-          </SelectTrigger>
-          <SelectContent>
-            {Object.keys(AlertColors).map(type => (
-              <SelectItem key={type} value={type}>
-                <span className="flex items-center gap-2">
-                  {type.charAt(0).toUpperCase() + type.slice(1)}
-                  {" "}
-                  <div
-                    className={cn(
-                      "size-4 rounded-full border",
-                      AlertColors[type as keyof typeof AlertColors],
-                    )}
-                  />
-                </span>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Button
-          size="sm"
-          variant="destructive"
-          type="button"
-          onClick={() => removeNote(index)}
-        >
-          <Trash2 className="mr-2 h-4 w-4" />
-          {" "}
-          Remove Note
-        </Button>
-      </div>
-    );
-  },
-);
-
-type NoteProps = {
-  script: Script;
-  setScript: (script: Script) => void;
-  setIsValid: (isValid: boolean) => void;
-  setZodErrors: (zodErrors: z.ZodError | null) => void;
-};
-
-function Note({
-  script,
-  setScript,
-  setIsValid,
-  setZodErrors,
-}: NoteProps) {
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  const addNote = useCallback(() => {
-    setScript({
-      ...script,
-      notes: [...script.notes, { text: "", type: "" }],
-    });
-  }, [script, setScript]);
-
-  const updateNote = useCallback((
-    index: number,
-    key: keyof Script["notes"][number],
-    value: string,
-  ) => {
-    const updated: Script = {
-      ...script,
-      notes: script.notes.map((note, i) =>
-        i === index ? { ...note, [key]: value } : note,
-      ),
-    };
-    const result = ScriptSchema.safeParse(updated);
-    setIsValid(result.success);
-    setZodErrors(result.success ? null : result.error);
-    setScript(updated);
-    // Restore focus after state update
-    if (key === "text") {
-      setTimeout(() => {
-        inputRefs.current[index]?.focus();
-      }, 0);
-    }
-  }, [script, setScript, setIsValid, setZodErrors]);
-
-  const removeNote = useCallback((index: number) => {
-    setScript({
-      ...script,
-      notes: script.notes.filter((_, i) => i !== index),
-    });
-  }, [script, setScript]);
-
-  return (
-    <>
-      <h3 className="text-xl font-semibold">Notes</h3>
-      {script.notes.map((note, index) => (
-        <NoteItem key={index} note={note} index={index} updateNote={updateNote} removeNote={removeNote} />
-      ))}
-      <Button type="button" size="sm" onClick={addNote}>
-        <PlusCircle className="mr-2 h-4 w-4" />
-        {" "}
-        Add Note
-      </Button>
-    </>
-  );
-}
-
-NoteItem.displayName = "NoteItem";
-
-export default memo(Note);

frontend/src/app/json-editor/_schemas/schemas.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 export const InstallMethodSchema = z.object({
   type: z.enum(["default", "alpine"], {
-    errorMap: () => ({ message: "Type must be either 'default' or 'alpine'" }),
+    errorMap: () => ({ message: "Type must be either 'default' or 'alpine'" })
   }),
   script: z.string().min(1, "Script content cannot be empty"),
   resources: z.object({
@@ -25,7 +25,7 @@ export const ScriptSchema = z.object({
   categories: z.array(z.number()),
   date_created: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Date must be in YYYY-MM-DD format").min(1, "Date is required"),
   type: z.enum(["vm", "ct", "pve", "addon", "turnkey"], {
-    errorMap: () => ({ message: "Type must be either 'vm', 'ct', 'pve', 'addon' or 'turnkey'" }),
+    errorMap: () => ({ message: "Type must be either 'vm', 'ct', 'pve', 'addon' or 'turnkey'" })
   }),
   updateable: z.boolean(),
   privileged: z.boolean(),

frontend/src/app/json-editor/page.tsx

@@ -1,32 +1,26 @@
 "use client";
 
-import type { z } from "zod";
-
-import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { format } from "date-fns";
-import { toast } from "sonner";
-
-import type { Category } from "@/lib/types";
-
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Calendar } from "@/components/ui/calendar";
-import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
+import { Calendar } from "@/components/ui/calendar";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
 import { fetchCategories } from "@/lib/data";
+import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
-
-import type { Script } from "./_schemas/schemas";
-
-import InstallMethod from "./_components/install-method";
-import { ScriptSchema } from "./_schemas/schemas";
-import Categories from "./_components/categories";
-import Note from "./_components/note";
+import { format } from "date-fns";
+import { CalendarIcon, Check, Clipboard, Download } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { z } from "zod";
+import Categories from "./_components/Categories";
+import InstallMethod from "./_components/InstallMethod";
+import Note from "./_components/Note";
+import { ScriptSchema, type Script } from "./_schemas/schemas";
 
 const initialScript: Script = {
   name: "",
@@ -60,7 +54,7 @@ export default function JSONGenerator() {
   useEffect(() => {
     fetchCategories()
       .then(setCategories)
-      .catch(error => console.error("Error fetching categories:", error));
+      .catch((error) => console.error("Error fetching categories:", error));
   }, []);
 
   const updateScript = useCallback((key: keyof Script, value: Script[keyof Script]) => {
@@ -73,14 +67,11 @@ export default function JSONGenerator() {
 
           if (updated.type === "pve") {
             scriptPath = `tools/pve/${updated.slug}.sh`;
-          }
-          else if (updated.type === "addon") {
+          } else if (updated.type === "addon") {
             scriptPath = `tools/addon/${updated.slug}.sh`;
-          }
-          else if (method.type === "alpine") {
+          } else if (method.type === "alpine") {
             scriptPath = `${updated.type}/alpine-${updated.slug}.sh`;
-          }
-          else {
+          } else {
             scriptPath = `${updated.type}/${updated.slug}.sh`;
           }
 
@@ -145,10 +136,7 @@ export default function JSONGenerator() {
           <div className="mt-2 space-y-1">
             {zodErrors.errors.map((error, index) => (
               <AlertDescription key={index} className="p-1 text-red-500">
-                {error.path.join(".")}
-                {" "}
-                -
-                {error.message}
+                {error.path.join(".")} - {error.message}
               </AlertDescription>
             ))}
           </div>
@@ -166,31 +154,25 @@ export default function JSONGenerator() {
           <div className="grid grid-cols-2 gap-4">
             <div>
               <Label>
-                Name
-                {" "}
-                <span className="text-red-500">*</span>
+                Name <span className="text-red-500">*</span>
               </Label>
-              <Input placeholder="Example" value={script.name} onChange={e => updateScript("name", e.target.value)} />
+              <Input placeholder="Example" value={script.name} onChange={(e) => updateScript("name", e.target.value)} />
             </div>
             <div>
               <Label>
-                Slug
-                {" "}
-                <span className="text-red-500">*</span>
+                Slug <span className="text-red-500">*</span>
               </Label>
-              <Input placeholder="example" value={script.slug} onChange={e => updateScript("slug", e.target.value)} />
+              <Input placeholder="example" value={script.slug} onChange={(e) => updateScript("slug", e.target.value)} />
             </div>
           </div>
           <div>
             <Label>
-              Logo
-              {" "}
-              <span className="text-red-500">*</span>
+              Logo <span className="text-red-500">*</span>
             </Label>
             <Input
               placeholder="Full logo URL"
               value={script.logo || ""}
-              onChange={e => updateScript("logo", e.target.value || null)}
+              onChange={(e) => updateScript("logo", e.target.value || null)}
             />
           </div>
           <div>
@@ -198,19 +180,17 @@ export default function JSONGenerator() {
             <Input
               placeholder="Path to config file"
               value={script.config_path || ""}
-              onChange={e => updateScript("config_path", e.target.value || null)}
+              onChange={(e) => updateScript("config_path", e.target.value || null)}
             />
           </div>
           <div>
             <Label>
-              Description
-              {" "}
-              <span className="text-red-500">*</span>
+              Description <span className="text-red-500">*</span>
             </Label>
             <Textarea
               placeholder="Example"
               value={script.description}
-              onChange={e => updateScript("description", e.target.value)}
+              onChange={(e) => updateScript("description", e.target.value)}
             />
           </div>
           <Categories script={script} setScript={setScript} categories={categories} />
@@ -220,7 +200,7 @@ export default function JSONGenerator() {
               <Popover>
                 <PopoverTrigger asChild className="flex-1">
                   <Button
-                    variant="outline"
+                    variant={"outline"}
                     className={cn("pl-3 text-left font-normal w-full", !script.date_created && "text-muted-foreground")}
                   >
                     {formattedDate || <span>Pick a date</span>}
@@ -239,7 +219,7 @@ export default function JSONGenerator() {
             </div>
             <div className="flex flex-col gap-2 w-full">
               <Label>Type</Label>
-              <Select value={script.type} onValueChange={value => updateScript("type", value)}>
+              <Select value={script.type} onValueChange={(value) => updateScript("type", value)}>
                 <SelectTrigger className="flex-1">
                   <SelectValue placeholder="Type" />
                 </SelectTrigger>
@@ -254,11 +234,11 @@ export default function JSONGenerator() {
           </div>
           <div className="w-full flex gap-5">
             <div className="flex items-center space-x-2">
-              <Switch checked={script.updateable} onCheckedChange={checked => updateScript("updateable", checked)} />
+              <Switch checked={script.updateable} onCheckedChange={(checked) => updateScript("updateable", checked)} />
               <label>Updateable</label>
             </div>
             <div className="flex items-center space-x-2">
-              <Switch checked={script.privileged} onCheckedChange={checked => updateScript("privileged", checked)} />
+              <Switch checked={script.privileged} onCheckedChange={(checked) => updateScript("privileged", checked)} />
               <label>Privileged</label>
             </div>
           </div>
@@ -266,18 +246,18 @@ export default function JSONGenerator() {
             placeholder="Interface Port"
             type="number"
             value={script.interface_port || ""}
-            onChange={e => updateScript("interface_port", e.target.value ? Number(e.target.value) : null)}
+            onChange={(e) => updateScript("interface_port", e.target.value ? Number(e.target.value) : null)}
           />
           <div className="flex gap-2">
             <Input
               placeholder="Website URL"
               value={script.website || ""}
-              onChange={e => updateScript("website", e.target.value || null)}
+              onChange={(e) => updateScript("website", e.target.value || null)}
             />
             <Input
               placeholder="Documentation URL"
               value={script.documentation || ""}
-              onChange={e => updateScript("documentation", e.target.value || null)}
+              onChange={(e) => updateScript("documentation", e.target.value || null)}
             />
           </div>
           <InstallMethod script={script} setScript={setScript} setIsValid={setIsValid} setZodErrors={setZodErrors} />
@@ -285,20 +265,22 @@ export default function JSONGenerator() {
           <Input
             placeholder="Username"
             value={script.default_credentials.username || ""}
-            onChange={e =>
+            onChange={(e) =>
               updateScript("default_credentials", {
                 ...script.default_credentials,
                 username: e.target.value || null,
-              })}
+              })
+            }
           />
           <Input
             placeholder="Password"
             value={script.default_credentials.password || ""}
-            onChange={e =>
+            onChange={(e) =>
               updateScript("default_credentials", {
                 ...script.default_credentials,
                 password: e.target.value || null,
-              })}
+              })
+            }
           />
           <Note script={script} setScript={setScript} setIsValid={setIsValid} setZodErrors={setZodErrors} />
         </form>

frontend/src/app/layout.tsx

@@ -1,20 +1,18 @@
-import type { Metadata } from "next";
-
-import { NuqsAdapter } from "nuqs/adapters/next/app";
-import { Inter } from "next/font/google";
-import React from "react";
-
-import { ThemeProvider } from "@/components/theme-provider";
-import { analytics, basePath } from "@/config/site-config";
-import "@/styles/globals.css";
+import Footer from "@/components/Footer";
+import Navbar from "@/components/Navbar";
 import QueryProvider from "@/components/query-provider";
+import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
-import Footer from "@/components/footer";
-import Navbar from "@/components/navbar";
+import { analytics, basePath } from "@/config/siteConfig";
+import "@/styles/globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import React from "react";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
+export const metadata : Metadata = {
   title: "Proxmox VE Helper-Scripts",
   description:
     "The official website for the Proxmox VE Helper-Scripts (Community) Repository. Featuring over 300+ scripts to help you manage your Proxmox VE environment.",

frontend/src/app/manifest.ts

@@ -1,10 +1,9 @@
+import { basePath } from "@/config/siteConfig";
 import type { MetadataRoute } from "next";
 
-import { basePath } from "@/config/site-config";
-
-export function generateStaticParams() {
+export const generateStaticParams = () => {
   return [];
-}
+};
 
 export default function manifest(): MetadataRoute.Manifest {
   return {

frontend/src/app/page.tsx

@@ -1,10 +1,8 @@
 "use client";
-import { ArrowRightIcon, ExternalLink } from "lucide-react";
-import { useEffect, useState } from "react";
-import { FaGithub } from "react-icons/fa";
-import { useTheme } from "next-themes";
-import Link from "next/link";
-
+import FAQ from "@/components/FAQ";
+import AnimatedGradientText from "@/components/ui/animated-gradient-text";
+import { Button } from "@/components/ui/button";
+import { CardFooter } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -13,14 +11,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import AnimatedGradientText from "@/components/ui/animated-gradient-text";
-import { Separator } from "@/components/ui/separator";
-import { CardFooter } from "@/components/ui/card";
 import Particles from "@/components/ui/particles";
-import { Button } from "@/components/ui/button";
-import { basePath } from "@/config/site-config";
-import FAQ from "@/components/faq";
+import { Separator } from "@/components/ui/separator";
+import { basePath } from "@/config/siteConfig";
 import { cn } from "@/lib/utils";
+import { ArrowRightIcon, ExternalLink } from "lucide-react";
+import { useTheme } from "next-themes";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { FaGithub } from "react-icons/fa";
 
 function CustomArrowRightIcon() {
   return <ArrowRightIcon className="h-4 w-4" width={1} />;
@@ -51,9 +50,7 @@ export default function Page() {
                         `p-px ![mask-composite:subtract]`,
                       )}
                     />
-                    ❤️
-                    {" "}
-                    <Separator className="mx-2 h-4" orientation="vertical" />
+                    ❤️ <Separator className="mx-2 h-4" orientation="vertical" />
                     <span
                       className={cn(
                         `animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
@@ -81,9 +78,7 @@ export default function Page() {
                       rel="noopener noreferrer"
                       className="flex items-center justify-center"
                     >
-                      <FaGithub className="mr-2 h-4 w-4" />
-                      {" "}
-                      Tteck&apos;s GitHub
+                      <FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub
                     </a>
                   </Button>
                   <Button className="w-full" asChild>
@@ -93,9 +88,7 @@ export default function Page() {
                       rel="noopener noreferrer"
                       className="flex items-center justify-center"
                     >
-                      <ExternalLink className="mr-2 h-4 w-4" />
-                      {" "}
-                      Proxmox Helper Scripts
+                      <ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper Scripts
                     </a>
                   </Button>
                 </CardFooter>
@@ -111,10 +104,7 @@ export default function Page() {
                   We are a community-driven initiative that simplifies the setup of Proxmox Virtual Environment (VE).
                 </p>
                 <p>
-                  With 300+ scripts to help you manage your
-                  {" "}
-                  <b>Proxmox VE environment</b>
-                  . Whether you&#39;re a seasoned
+                  With 300+ scripts to help you manage your <b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
                   user or a newcomer, we&#39;ve got you covered.
                 </p>
               </div>

frontend/src/app/robots.ts

@@ -1,7 +1,6 @@
+import { basePath } from "@/config/siteConfig";
 import type { MetadataRoute } from "next";
 
-import { basePath } from "@/config/site-config";
-
 export const dynamic = "force-static";
 
 export default function robots(): MetadataRoute.Robots {

frontend/src/app/scripts/_components/ResourceDisplay.tsx

@@ -1,17 +1,17 @@
 import { CPUIcon, HDDIcon, RAMIcon } from "@/components/icons/resource-icons";
 import { getDisplayValueFromRAM } from "@/lib/utils/resource-utils";
 
-type ResourceDisplayProps = {
+interface ResourceDisplayProps {
   title: string;
   cpu: number | null;
   ram: number | null;
   hdd: number | null;
-};
+}
 
-type IconTextProps = {
+interface IconTextProps {
   icon: React.ReactNode;
   label: string;
-};
+}
 
 function IconText({ icon, label }: IconTextProps) {
   return (
@@ -27,8 +27,7 @@ export function ResourceDisplay({ title, cpu, ram, hdd }: ResourceDisplayProps)
   const hasRAM = typeof ram === "number" && ram > 0;
   const hasHDD = typeof hdd === "number" && hdd > 0;
 
-  if (!hasCPU && !hasRAM && !hasHDD)
-    return null;
+  if (!hasCPU && !hasRAM && !hasHDD) return null;
 
   return (
     <div className="flex flex-wrap items-center gap-2">

frontend/src/app/scripts/_components/ScriptAccordion.tsx

@@ -1,18 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-
-import type { Category } from "@/lib/types";
+import { useCallback, useEffect, useRef } from "react";
 
+import { formattedBadge } from "@/components/CommandMenu";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { formattedBadge } from "@/components/command-menu";
-import { basePath } from "@/config/site-config";
+import { Category } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { basePath } from "@/config/siteConfig";
 
 export default function ScriptAccordion({
   items,
@@ -41,8 +41,8 @@ export default function ScriptAccordion({
 
   useEffect(() => {
     if (selectedScript) {
-      const category = items.find(category =>
-        category.scripts.some(script => script.slug === selectedScript),
+      const category = items.find((category) =>
+        category.scripts.some((script) => script.slug === selectedScript),
       );
       if (category) {
         setExpandedItem(category.name);
@@ -58,11 +58,11 @@ export default function ScriptAccordion({
       collapsible
       className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2"
     >
-      {items.map(category => (
+      {items.map((category) => (
         <AccordionItem
-          key={`${category.id}:category`}
+          key={category.id + ":category"}
           value={category.name}
-          className={cn("sm:text-sm flex flex-col border-none", {
+          className={cn("sm:text-md flex flex-col border-none", {
             "rounded-lg bg-accent/30": expandedItem === category.name,
           })}
         >
@@ -72,15 +72,11 @@ export default function ScriptAccordion({
             )}
           >
             <div className="mr-2 flex w-full items-center justify-between">
-              <span className="pl-2 text-left">
-                {category.name}
-                {" "}
-              </span>
+              <span className="pl-2 text-left">{category.name} </span>
               <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
                 {category.scripts.length}
               </span>
-            </div>
-            {" "}
+            </div>{" "}
           </AccordionTrigger>
           <AccordionContent
             data-state={expandedItem === category.name ? "open" : "closed"}
@@ -113,9 +109,10 @@ export default function ScriptAccordion({
                         height={16}
                         width={16}
                         unoptimized
-                        onError={e =>
-                          ((e.currentTarget as HTMLImageElement).src
-                            = `/${basePath}/logo.png`)}
+                        onError={(e) =>
+                          ((e.currentTarget as HTMLImageElement).src =
+                            `/${basePath}/logo.png`)
+                        }
                         alt={script.name}
                         className="mr-1 w-4 h-4 rounded-full"
                       />

frontend/src/app/scripts/_components/ScriptInfoBlocks.tsx

@@ -1,18 +1,16 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { basePath, mostPopularScripts } from "@/config/siteConfig";
+import { extractDate } from "@/lib/time";
+import { Category, Script } from "@/lib/types";
 import { CalendarPlus } from "lucide-react";
-import { useMemo, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-
-import type { Category, Script } from "@/lib/types";
-
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { basePath, mostPopularScripts } from "@/config/site-config";
-import { Button } from "@/components/ui/button";
-import { extractDate } from "@/lib/time";
+import { useMemo, useState } from "react";
 
 const ITEMS_PER_PAGE = 3;
 
-export function getDisplayValueFromType(type: string) {
+export const getDisplayValueFromType = (type: string) => {
   switch (type) {
     case "ct":
       return "LXC";
@@ -24,16 +22,15 @@ export function getDisplayValueFromType(type: string) {
     default:
       return "";
   }
-}
+};
 
 export function LatestScripts({ items }: { items: Category[] }) {
   const [page, setPage] = useState(1);
 
   const latestScripts = useMemo(() => {
-    if (!items)
-      return [];
+    if (!items) return [];
 
-    const scripts = items.flatMap(category => category.scripts || []);
+    const scripts = items.flatMap((category) => category.scripts || []);
 
     // Filter out duplicates by slug
     const uniqueScriptsMap = new Map<string, Script>();
@@ -49,11 +46,11 @@ export function LatestScripts({ items }: { items: Category[] }) {
   }, [items]);
 
   const goToNextPage = () => {
-    setPage(prevPage => prevPage + 1);
+    setPage((prevPage) => prevPage + 1);
   };
 
   const goToPreviousPage = () => {
-    setPage(prevPage => prevPage - 1);
+    setPage((prevPage) => prevPage - 1);
   };
 
   const startIndex = (page - 1) * ITEMS_PER_PAGE;
@@ -83,7 +80,7 @@ export function LatestScripts({ items }: { items: Category[] }) {
         </div>
       )}
       <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {latestScripts.slice(startIndex, endIndex).map(script => (
+        {latestScripts.slice(startIndex, endIndex).map((script) => (
           <Card key={script.slug} className="min-w-[250px] flex-1 flex-grow bg-accent/30">
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
@@ -94,15 +91,13 @@ export function LatestScripts({ items }: { items: Category[] }) {
                     height={64}
                     width={64}
                     alt=""
-                    onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                    onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
                     className="h-11 w-11 object-contain"
                   />
                 </div>
                 <div className="flex flex-col">
                   <p className="text-lg line-clamp-1">
-                    {script.name}
-                    {" "}
-                    {getDisplayValueFromType(script.type)}
+                    {script.name} {getDisplayValueFromType(script.type)}
                   </p>
                   <p className="text-sm text-muted-foreground flex items-center gap-1">
                     <CalendarPlus className="h-4 w-4" />
@@ -135,7 +130,7 @@ export function LatestScripts({ items }: { items: Category[] }) {
 
 export function MostViewedScripts({ items }: { items: Category[] }) {
   const mostViewedScripts = items.reduce((acc: Script[], category) => {
-    const foundScripts = category.scripts.filter(script => mostPopularScripts.includes(script.slug));
+    const foundScripts = category.scripts.filter((script) => mostPopularScripts.includes(script.slug));
     return acc.concat(foundScripts);
   }, []);
 
@@ -147,7 +142,7 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
         </>
       )}
       <div className="min-w flex w-full flex-row flex-wrap gap-4">
-        {mostViewedScripts.map(script => (
+        {mostViewedScripts.map((script) => (
           <Card key={script.slug} className="min-w-[250px] flex-1 flex-grow bg-accent/30">
             <CardHeader>
               <CardTitle className="flex items-center gap-3">
@@ -158,15 +153,13 @@ export function MostViewedScripts({ items }: { items: Category[] }) {
                     height={64}
                     width={64}
                     alt=""
-                    onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                    onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
                     className="h-11 w-11 object-contain"
                   />
                 </div>
                 <div className="flex flex-col">
                   <p className="line-clamp-1 text-lg">
-                    {script.name}
-                    {" "}
-                    {getDisplayValueFromType(script.type)}
+                    {script.name} {getDisplayValueFromType(script.type)}
                   </p>
                   <p className="flex items-center gap-1 text-sm text-muted-foreground">
                     <CalendarPlus className="h-4 w-4" />

frontend/src/app/scripts/_components/ScriptItem.tsx

@@ -1,32 +1,31 @@
 "use client";
 
+import { extractDate } from "@/lib/time";
+import { AppVersion, Script } from "@/lib/types";
+
 import { X } from "lucide-react";
-import { Suspense } from "react";
 import Image from "next/image";
 
-import type { AppVersion, Script } from "@/lib/types";
-
-import { cleanSlug } from "@/lib/utils/resource-utils";
 import { Separator } from "@/components/ui/separator";
-import { useVersions } from "@/hooks/use-versions";
-import { basePath } from "@/config/site-config";
-import { extractDate } from "@/lib/time";
+import { basePath } from "@/config/siteConfig";
+import { useVersions } from "@/hooks/useVersions";
+import { cleanSlug } from "@/lib/utils/resource-utils";
+import { Suspense } from "react";
+import { ResourceDisplay } from "./ResourceDisplay";
+import { getDisplayValueFromType } from "./ScriptInfoBlocks";
+import Alerts from "./ScriptItems/Alerts";
+import Buttons from "./ScriptItems/Buttons";
+import ConfigFile from "./ScriptItems/ConfigFile";
+import DefaultPassword from "./ScriptItems/DefaultPassword";
+import Description from "./ScriptItems/Description";
+import InstallCommand from "./ScriptItems/InstallCommand";
+import InterFaces from "./ScriptItems/InterFaces";
+import Tooltips from "./ScriptItems/Tooltips";
 
-import { getDisplayValueFromType } from "./script-info-blocks";
-import DefaultPassword from "./script-items/default-password";
-import InstallCommand from "./script-items/install-command";
-import { ResourceDisplay } from "./resource-display";
-import Description from "./script-items/description";
-import ConfigFile from "./script-items/config-file";
-import InterFaces from "./script-items/interfaces";
-import Tooltips from "./script-items/tool-tips";
-import Buttons from "./script-items/buttons";
-import Alerts from "./script-items/alerts";
-
-type ScriptItemProps = {
+interface ScriptItemProps {
   item: Script;
   setSelectedScript: (script: string | null) => void;
-};
+}
 
 function ScriptHeader({ item }: { item: Script }) {
   const defaultInstallMethod = item.install_methods?.[0];
@@ -41,7 +40,7 @@ function ScriptHeader({ item }: { item: Script }) {
             className="h-32 w-32 rounded-xl bg-gradient-to-br from-accent/40 to-accent/60 object-contain p-3 shadow-lg transition-transform hover:scale-105"
             src={item.logo || `/${basePath}/logo.png`}
             width={400}
-            onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+            onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
             height={400}
             alt={item.name}
             unoptimized
@@ -59,15 +58,10 @@ function ScriptHeader({ item }: { item: Script }) {
                   </span>
                 </h1>
                 <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
-                  <span>
-                    Added
-                    {extractDate(item.date_created)}
-                  </span>
+                  <span>Added {extractDate(item.date_created)}</span>
                   <span>•</span>
                   <span className=" capitalize">
-                    {os}
-                    {" "}
-                    {version}
+                    {os} {version}
                   </span>
                 </div>
               </div>
@@ -82,10 +76,10 @@ function ScriptHeader({ item }: { item: Script }) {
                   hdd={defaultInstallMethod.resources.hdd}
                 />
               )}
-              {item.install_methods.find(method => method.type === "alpine")?.resources && (
+              {item.install_methods.find((method) => method.type === "alpine")?.resources && (
                 <ResourceDisplay
                   title="Alpine"
-                  {...item.install_methods.find(method => method.type === "alpine")!.resources!}
+                  {...item.install_methods.find((method) => method.type === "alpine")!.resources!}
                 />
               )}
             </div>
@@ -114,8 +108,7 @@ function VersionInfo({ item }: { item: Script }) {
     return cleanName === cleanSlug(item.slug) || cleanName.includes(cleanSlug(item.slug));
   });
 
-  if (!matchedVersion)
-    return null;
+  if (!matchedVersion) return null;
 
   return <span className="font-medium text-sm">{matchedVersion.version}</span>;
 }
@@ -139,7 +132,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
           </button>
         </div>
 
-        <div className="rounded-xl border border-border bg-accent/30 backdrop-blur-sm shadow-sm">
+        <div className="rounded-xl border border-border bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
           <div className="p-6 space-y-6">
             <Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
               <ScriptHeader item={item} />
@@ -151,9 +144,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
             <div className="mt-4 rounded-lg border shadow-sm">
               <div className="flex gap-3 px-4 py-2 bg-accent/25">
                 <h2 className="text-lg font-semibold">
-                  How to
-                  {" "}
-                  {item.type === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
+                  How to {item.type === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
                 </h2>
                 <Tooltips item={item} />
               </div>

frontend/src/app/scripts/_components/ScriptItems/Alerts.tsx

@@ -1,21 +1,19 @@
-import { AlertCircle, NotepadText } from "lucide-react";
-
-import type { Script } from "@/lib/types";
-
-import TextCopyBlock from "@/components/text-copy-block";
-import { AlertColors } from "@/config/site-config";
+import TextCopyBlock from "@/components/TextCopyBlock";
+import { AlertColors } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import { AlertCircle, NotepadText } from "lucide-react";
 
 type NoteProps = {
   text: string;
   type: keyof typeof AlertColors;
-};
+}
 
 export default function Alerts({ item }: { item: Script }) {
   return (
     <>
-      {item?.notes?.length > 0
-        && item.notes.map((note: NoteProps, index: number) => (
+      {item?.notes?.length > 0 &&
+        item.notes.map((note: NoteProps, index: number) => (
           <div key={index} className="mt-4 flex flex-col shadow-sm gap-2">
             <p
               className={cn(
@@ -23,13 +21,11 @@ export default function Alerts({ item }: { item: Script }) {
                 AlertColors[note.type],
               )}
             >
-              {note.type === "info"
-                ? (
-                    <NotepadText className="h-4 min-h-4 w-4 min-w-4" />
-                  )
-                : (
-                    <AlertCircle className="h-4 min-h-4 w-4 min-w-4" />
-                  )}
+              {note.type == "info" ? (
+                <NotepadText className="h-4 min-h-4 w-4 min-w-4" />
+              ) : (
+                <AlertCircle className="h-4 min-h-4 w-4 min-w-4" />
+              )}
               <span>{TextCopyBlock(note.text)}</span>
             </p>
           </div>

frontend/src/app/scripts/_components/ScriptItems/Buttons.tsx

@@ -1,22 +1,20 @@
-import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
-
-import type { Script } from "@/lib/types";
-
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { basePath } from "@/config/site-config";
+import { basePath } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
+import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
 
-function generateInstallSourceUrl(slug: string) {
+const generateInstallSourceUrl = (slug: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
   return `${baseUrl}/install/${slug}-install.sh`;
-}
+};
 
-function generateSourceUrl(slug: string, type: string) {
+const generateSourceUrl = (slug: string, type: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
 
   switch (type) {
@@ -31,18 +29,18 @@ function generateSourceUrl(slug: string, type: string) {
     default:
       return `${baseUrl}/ct/${slug}.sh`; // fallback for "ct"
   }
-}
+};
 
-function generateUpdateUrl(slug: string) {
+const generateUpdateUrl = (slug: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
   return `${baseUrl}/ct/${slug}.sh`;
-}
+};
 
-type LinkItem = {
+interface LinkItem {
   href: string;
   icon: React.ReactNode;
   text: string;
-};
+}
 
 export default function Buttons({ item }: { item: Script }) {
   const isCtOrDefault = ["ct"].includes(item.type);
@@ -78,8 +76,7 @@ export default function Buttons({ item }: { item: Script }) {
     },
   ].filter(Boolean) as LinkItem[];
 
-  if (links.length === 0)
-    return null;
+  if (links.length === 0) return null;
 
   return (
     <DropdownMenu>

frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx

@@ -1,15 +1,13 @@
-import type { Script } from "@/lib/types";
-
-import { Separator } from "@/components/ui/separator";
-import handleCopy from "@/components/handle-copy";
+import handleCopy from "@/components/handleCopy";
 import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Script } from "@/lib/types";
 
 export default function DefaultPassword({ item }: { item: Script }) {
   const { username, password } = item.default_credentials;
   const hasDefaultLogin = username || password;
 
-  if (!hasDefaultLogin)
-    return null;
+  if (!hasDefaultLogin) return null;
 
   const copyCredential = (type: "username" | "password") => {
     handleCopy(type, item.default_credentials[type] ?? "");
@@ -23,27 +21,18 @@ export default function DefaultPassword({ item }: { item: Script }) {
       <Separator className="w-full" />
       <div className="flex flex-col gap-2 p-4">
         <p className="mb-2 text-sm">
-          You can use the following credentials to login to the
-          {" "}
-          {item.name}
-          {" "}
-          {item.type}
-          .
+          You can use the following credentials to login to the {item.name} {item.type}.
         </p>
         {["username", "password"].map((type) => {
           const value = item.default_credentials[type as "username" | "password"];
-          return value && value.trim() !== ""
-            ? (
-                <div key={type} className="text-sm">
-                  {type.charAt(0).toUpperCase() + type.slice(1)}
-                  :
-                  {" "}
-                  <Button variant="secondary" size="null" onClick={() => copyCredential(type as "username" | "password")}>
-                    {value}
-                  </Button>
-                </div>
-              )
-            : null;
+          return value && value.trim() !== "" ? (
+            <div key={type} className="text-sm">
+              {type.charAt(0).toUpperCase() + type.slice(1)}:{" "}
+              <Button variant="secondary" size="null" onClick={() => copyCredential(type as "username" | "password")}>
+                {value}
+              </Button>
+            </div>
+          ) : null;
         })}
       </div>
     </div>

frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx

@@ -1,4 +1,4 @@
-import type { Script } from "@/lib/types";
+import { Script } from "@/lib/types";
 
 export default function DefaultSettings({ item }: { item: Script }) {
   const getDisplayValueFromRAM = (ram: number) => (ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`);
@@ -8,26 +8,15 @@ export default function DefaultSettings({ item }: { item: Script }) {
     return (
       <div>
         <h2 className="text-md font-semibold">{title}</h2>
-        <p className="text-sm text-muted-foreground">
-          CPU:
-          {cpu}
-          vCPU
-        </p>
-        <p className="text-sm text-muted-foreground">
-          RAM:
-          {getDisplayValueFromRAM(ram ?? 0)}
-        </p>
-        <p className="text-sm text-muted-foreground">
-          HDD:
-          {hdd}
-          GB
-        </p>
+        <p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
+        <p className="text-sm text-muted-foreground">RAM: {getDisplayValueFromRAM(ram ?? 0)}</p>
+        <p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
       </div>
     );
   };
 
-  const defaultSettings = item.install_methods.find(method => method.type === "default");
-  const defaultAlpineSettings = item.install_methods.find(method => method.type === "alpine");
+  const defaultSettings = item.install_methods.find((method) => method.type === "default");
+  const defaultAlpineSettings = item.install_methods.find((method) => method.type === "alpine");
 
   const hasDefaultSettings = defaultSettings?.resources && Object.values(defaultSettings.resources).some(Boolean);
 

frontend/src/app/scripts/_components/ScriptItems/Description.tsx

@@ -1,6 +1,5 @@
-import type { Script } from "@/lib/types";
-
-import TextCopyBlock from "@/components/text-copy-block";
+import TextCopyBlock from "@/components/TextCopyBlock";
+import { Script } from "@/lib/types";
 
 export default function Description({ item }: { item: Script }) {
   return (

frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx

@@ -0,0 +1,77 @@
+import CodeCopyButton from "@/components/ui/code-copy-button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { basePath } from "@/config/siteConfig";
+import { Script } from "@/lib/types";
+import { getDisplayValueFromType } from "../ScriptInfoBlocks";
+
+const getInstallCommand = (scriptPath = "", isAlpine = false) => {
+  const url = `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${scriptPath}`;
+  return isAlpine ? `bash -c "$(curl -fsSL ${url})"` : `bash -c "$(curl -fsSL ${url})"`;
+};
+
+export default function InstallCommand({ item }: { item: Script }) {
+  const alpineScript = item.install_methods.find((method) => method.type === "alpine");
+
+  const defaultScript = item.install_methods.find((method) => method.type === "default");
+
+  const renderInstructions = (isAlpine = false) => (
+    <>
+      <p className="text-sm mt-2">
+        {isAlpine ? (
+          <>
+            As an alternative option, you can use Alpine Linux and the {item.name} package to create a {item.name}{" "}
+            {getDisplayValueFromType(item.type)} container with faster creation time and minimal system resource usage.
+            You are also obliged to adhere to updates provided by the package maintainer.
+          </>
+        ) : item.type === "pve" ? (
+          <>
+            To use the {item.name} script, run the command below **only** in the Proxmox VE Shell. This script is
+            intended for managing or enhancing the host system directly.
+          </>
+        ) : item.type === "addon" ? (
+          <>
+            This script enhances an existing setup. You can use it inside a running LXC container or directly on the
+            Proxmox VE host to extend functionality with {item.name}.
+          </>
+        ) : (
+          <>
+            To create a new Proxmox VE {item.name} {getDisplayValueFromType(item.type)}, run the command below in the
+            Proxmox VE Shell.
+          </>
+        )}
+      </p>
+      {isAlpine && (
+        <p className="mt-2 text-sm">
+          To create a new Proxmox VE Alpine-{item.name} {getDisplayValueFromType(item.type)}, run the command below in
+          the Proxmox VE Shell.
+        </p>
+      )}
+    </>
+  );
+
+  return (
+    <div className="p-4">
+      {alpineScript ? (
+        <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
+          <TabsList>
+            <TabsTrigger value="default">Default</TabsTrigger>
+            <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
+          </TabsList>
+          <TabsContent value="default">
+            {renderInstructions()}
+            <CodeCopyButton>{getInstallCommand(defaultScript?.script)}</CodeCopyButton>
+          </TabsContent>
+          <TabsContent value="alpine">
+            {renderInstructions(true)}
+            <CodeCopyButton>{getInstallCommand(alpineScript.script, true)}</CodeCopyButton>
+          </TabsContent>
+        </Tabs>
+      ) : defaultScript?.script ? (
+        <>
+          {renderInstructions()}
+          <CodeCopyButton>{getInstallCommand(defaultScript.script)}</CodeCopyButton>
+        </>
+      ) : null}
+    </div>
+  );
+}

frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx

@@ -0,0 +1,21 @@
+import handleCopy from "@/components/handleCopy";
+import { buttonVariants } from "@/components/ui/button";
+import { Script } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { ClipboardIcon } from "lucide-react";
+
+export default function InterFaces({ item }: { item: Script }) {
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      {item.interface_port !== null ? (
+        <div className="flex items-center justify-end">
+          <h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
+          <span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
+            {item.interface_port}
+            <ClipboardIcon onClick={() => handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
+          </span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

frontend/src/app/scripts/_components/ScriptItems/Tooltips.tsx

@@ -1,27 +1,22 @@
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Script } from "@/lib/types";
+import { cn } from "@/lib/utils";
 import { CircleHelp } from "lucide-react";
 import React from "react";
 
-import type { BadgeProps } from "@/components/ui/badge";
-import type { Script } from "@/lib/types";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-type TooltipProps = {
+interface TooltipProps {
   variant: BadgeProps["variant"];
   label: string;
   content?: string;
-};
+}
 
 const TooltipBadge: React.FC<TooltipProps> = ({ variant, label, content }) => (
   <TooltipProvider>
     <Tooltip delayDuration={100}>
       <TooltipTrigger className={cn("flex items-center", !content && "cursor-default")}>
         <Badge variant={variant} className="flex items-center gap-1">
-          {label}
-          {" "}
-          {content && <CircleHelp className="size-3" />}
+          {label} {content && <CircleHelp className="size-3" />}
         </Badge>
       </TooltipTrigger>
       {content && (
@@ -39,14 +34,14 @@ export default function Tooltips({ item }: { item: Script }) {
       {item.privileged && (
         <TooltipBadge variant="warning" label="Privileged" content="This script will be run in a privileged LXC" />
       )}
-      {(item.updateable || item.type !== "pve") && (
+      {item.updateable && (
         <TooltipBadge
           variant="success"
           label="Updateable"
           content={`To Update ${item.name}, run the command below (or type update) in the LXC Console.`}
         />
       )}
-      {!item.updateable && item.type !== "pve" && <TooltipBadge variant="failure" label="Not Updateable" />}
+      {!item.updateable && <TooltipBadge variant="failure" label="Not Updateable" />}
     </div>
   );
 }

frontend/src/app/scripts/_components/ScriptItems/install-command.tsx

@@ -1,148 +0,0 @@
-import { Info } from "lucide-react";
-
-import type { Script } from "@/lib/types";
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import CodeCopyButton from "@/components/ui/code-copy-button";
-import { basePath } from "@/config/site-config";
-
-import { getDisplayValueFromType } from "../script-info-blocks";
-
-function getInstallCommand(scriptPath = "", isAlpine = false, useGitea = false) {
-  const githubUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${scriptPath}`;
-  const giteaUrl = `https://git.community-scripts.org/community-scripts/${basePath}/raw/branch/main/${scriptPath}`;
-  const url = useGitea ? giteaUrl : githubUrl;
-  return isAlpine ? `bash -c "$(curl -fsSL ${url})"` : `bash -c "$(curl -fsSL ${url})"`;
-}
-export default function InstallCommand({ item }: { item: Script }) {
-  const alpineScript = item.install_methods.find(method => method.type === "alpine");
-  const defaultScript = item.install_methods.find(method => method.type === "default");
-
-  const renderInstructions = (isAlpine = false) => (
-    <>
-      <p className="text-sm mt-2">
-        {isAlpine
-          ? (
-              <>
-                As an alternative option, you can use Alpine Linux and the
-                {" "}
-                {item.name}
-                {" "}
-                package to create a
-                {" "}
-                {item.name}
-                {" "}
-                {getDisplayValueFromType(item.type)}
-                {" "}
-                container with faster creation time and minimal system resource usage.
-                You are also obliged to adhere to updates provided by the package maintainer.
-              </>
-            )
-          : item.type === "pve"
-            ? (
-                <>
-                  To use the
-                  {" "}
-                  {item.name}
-                  {" "}
-                  script, run the command below **only** in the Proxmox VE Shell. This script is
-                  intended for managing or enhancing the host system directly.
-                </>
-              )
-            : item.type === "addon"
-              ? (
-                  <>
-                    This script enhances an existing setup. You can use it inside a running LXC container or directly on the
-                    Proxmox VE host to extend functionality with
-                    {" "}
-                    {item.name}
-                    .
-                  </>
-                )
-              : (
-                  <>
-                    To create a new Proxmox VE
-                    {" "}
-                    {item.name}
-                    {" "}
-                    {getDisplayValueFromType(item.type)}
-                    , run the command below in the
-                    Proxmox VE Shell.
-                  </>
-                )}
-      </p>
-      {isAlpine && (
-        <p className="mt-2 text-sm">
-          To create a new Proxmox VE Alpine-
-          {item.name}
-          {" "}
-          {getDisplayValueFromType(item.type)}
-          , run the command below in
-          the Proxmox VE Shell.
-        </p>
-      )}
-    </>
-  );
-
-  const renderGiteaInfo = () => (
-    <Alert className="mt-3 mb-3">
-      <Info className="h-4 w-4" />
-      <AlertDescription className="text-sm">
-        <strong>When to use Gitea:</strong>
-        {" "}
-        GitHub may have issues including slow connections, delayed updates after bug
-        fixes, no IPv6 support, API rate limits (60/hour). Use our Gitea mirror as a reliable alternative when
-        experiencing these issues.
-      </AlertDescription>
-    </Alert>
-  );
-
-  const renderScriptTabs = (useGitea = false) => {
-    if (alpineScript) {
-      return (
-        <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
-          <TabsList>
-            <TabsTrigger value="default">Default</TabsTrigger>
-            <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
-          </TabsList>
-          <TabsContent value="default">
-            {renderInstructions()}
-            <CodeCopyButton>{getInstallCommand(defaultScript?.script, false, useGitea)}</CodeCopyButton>
-          </TabsContent>
-          <TabsContent value="alpine">
-            {renderInstructions(true)}
-            <CodeCopyButton>{getInstallCommand(alpineScript.script, true, useGitea)}</CodeCopyButton>
-          </TabsContent>
-        </Tabs>
-      );
-    }
-    else if (defaultScript?.script) {
-      return (
-        <>
-          {renderInstructions()}
-          <CodeCopyButton>{getInstallCommand(defaultScript.script, false, useGitea)}</CodeCopyButton>
-        </>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div className="p-4">
-      <Tabs defaultValue="github" className="w-full max-w-4xl">
-        <TabsList>
-          <TabsTrigger value="github">GitHub</TabsTrigger>
-          <TabsTrigger value="gitea">Gitea</TabsTrigger>
-        </TabsList>
-        <TabsContent value="github">
-          {renderScriptTabs(false)}
-        </TabsContent>
-        <TabsContent value="gitea">
-          {renderGiteaInfo()}
-          {renderScriptTabs(true)}
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

frontend/src/app/scripts/_components/Sidebar.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { Category, Script } from "@/lib/types";
+import ScriptAccordion from "./ScriptAccordion";
+
+const Sidebar = ({
+	items,
+	selectedScript,
+	setSelectedScript,
+}: {
+	items: Category[];
+	selectedScript: string | null;
+	setSelectedScript: (script: string | null) => void;
+}) => {
+	const uniqueScripts = items.reduce((acc, category) => {
+		for (const script of category.scripts) {
+			if (!acc.some((s) => s.name === script.name)) {
+				acc.push(script);
+			}
+		}
+		return acc;
+	}, [] as Script[]);
+
+	return (
+		<div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
+			<div className="flex items-end justify-between pb-4">
+				<h1 className="text-xl font-bold">Categories</h1>
+				<p className="text-xs italic text-muted-foreground">
+					{uniqueScripts.length} Total scripts
+				</p>
+			</div>
+			<div className="rounded-lg">
+				<ScriptAccordion
+					items={items}
+					selectedScript={selectedScript}
+					setSelectedScript={setSelectedScript}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default Sidebar;

frontend/src/app/scripts/_components/VersionBadge.tsx

@@ -1,8 +1,8 @@
-import type { AppVersion } from "@/lib/types";
+import { AppVersion } from "@/lib/types";
 
-type VersionBadgeProps = {
+interface VersionBadgeProps {
   version: AppVersion;
-};
+}
 
 export function VersionBadge({ version }: VersionBadgeProps) {
   return (

frontend/src/app/scripts/_components/script-items/install-command.tsx

@@ -1,149 +0,0 @@
-import { Info } from "lucide-react";
-
-import type { Script } from "@/lib/types";
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import CodeCopyButton from "@/components/ui/code-copy-button";
-import { basePath } from "@/config/site-config";
-
-import { getDisplayValueFromType } from "../script-info-blocks";
-
-function getInstallCommand(scriptPath = "", isAlpine = false, useGitea = false) {
-  const githubUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main/${scriptPath}`;
-  const giteaUrl = `https://git.community-scripts.org/community-scripts/${basePath}/raw/branch/main/${scriptPath}`;
-  const url = useGitea ? giteaUrl : githubUrl;
-  return isAlpine ? `bash -c "$(curl -fsSL ${url})"` : `bash -c "$(curl -fsSL ${url})"`;
-}
-
-export default function InstallCommand({ item }: { item: Script }) {
-  const alpineScript = item.install_methods.find(method => method.type === "alpine");
-  const defaultScript = item.install_methods.find(method => method.type === "default");
-
-  const renderInstructions = (isAlpine = false) => (
-    <>
-      <p className="text-sm mt-2">
-        {isAlpine
-          ? (
-              <>
-                As an alternative option, you can use Alpine Linux and the
-                {" "}
-                {item.name}
-                {" "}
-                package to create a
-                {" "}
-                {item.name}
-                {" "}
-                {getDisplayValueFromType(item.type)}
-                {" "}
-                container with faster creation time and minimal system resource usage.
-                You are also obliged to adhere to updates provided by the package maintainer.
-              </>
-            )
-          : item.type === "pve"
-            ? (
-                <>
-                  To use the
-                  {" "}
-                  {item.name}
-                  {" "}
-                  script, run the command below **only** in the Proxmox VE Shell. This script is
-                  intended for managing or enhancing the host system directly.
-                </>
-              )
-            : item.type === "addon"
-              ? (
-                  <>
-                    This script enhances an existing setup. You can use it inside a running LXC container or directly on the
-                    Proxmox VE host to extend functionality with
-                    {" "}
-                    {item.name}
-                    .
-                  </>
-                )
-              : (
-                  <>
-                    To create a new Proxmox VE
-                    {" "}
-                    {item.name}
-                    {" "}
-                    {getDisplayValueFromType(item.type)}
-                    , run the command below in the
-                    Proxmox VE Shell.
-                  </>
-                )}
-      </p>
-      {isAlpine && (
-        <p className="mt-2 text-sm">
-          To create a new Proxmox VE Alpine-
-          {item.name}
-          {" "}
-          {getDisplayValueFromType(item.type)}
-          , run the command below in
-          the Proxmox VE Shell.
-        </p>
-      )}
-    </>
-  );
-
-  const renderGiteaInfo = () => (
-    <Alert className="mt-3 mb-3">
-      <Info className="h-4 w-4" />
-      <AlertDescription className="text-sm">
-        <strong>When to use Gitea:</strong>
-        {" "}
-        GitHub may have issues including slow connections, delayed updates after bug
-        fixes, no IPv6 support, API rate limits (60/hour). Use our Gitea mirror as a reliable alternative when
-        experiencing these issues.
-      </AlertDescription>
-    </Alert>
-  );
-
-  const renderScriptTabs = (useGitea = false) => {
-    if (alpineScript) {
-      return (
-        <Tabs defaultValue="default" className="mt-2 w-full max-w-4xl">
-          <TabsList>
-            <TabsTrigger value="default">Default</TabsTrigger>
-            <TabsTrigger value="alpine">Alpine Linux</TabsTrigger>
-          </TabsList>
-          <TabsContent value="default">
-            {renderInstructions()}
-            <CodeCopyButton>{getInstallCommand(defaultScript?.script, false, useGitea)}</CodeCopyButton>
-          </TabsContent>
-          <TabsContent value="alpine">
-            {renderInstructions(true)}
-            <CodeCopyButton>{getInstallCommand(alpineScript.script, true, useGitea)}</CodeCopyButton>
-          </TabsContent>
-        </Tabs>
-      );
-    }
-    else if (defaultScript?.script) {
-      return (
-        <>
-          {renderInstructions()}
-          <CodeCopyButton>{getInstallCommand(defaultScript.script, false, useGitea)}</CodeCopyButton>
-        </>
-      );
-    }
-    return null;
-  };
-
-  return (
-    <div className="p-4">
-      <Tabs defaultValue="github" className="w-full max-w-4xl">
-        <TabsList>
-          <TabsTrigger value="github">GitHub</TabsTrigger>
-          <TabsTrigger value="gitea">Gitea</TabsTrigger>
-        </TabsList>
-        <TabsContent value="github">
-          {renderScriptTabs(false)}
-        </TabsContent>
-        <TabsContent value="gitea">
-          {renderGiteaInfo()}
-          {renderScriptTabs(true)}
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

frontend/src/app/scripts/_components/script-items/interfaces.tsx

@@ -1,25 +0,0 @@
-import { ClipboardIcon } from "lucide-react";
-
-import type { Script } from "@/lib/types";
-
-import { buttonVariants } from "@/components/ui/button";
-import handleCopy from "@/components/handle-copy";
-import { cn } from "@/lib/utils";
-
-export default function InterFaces({ item }: { item: Script }) {
-  return (
-    <div className="flex flex-col gap-2 w-full">
-      {item.interface_port !== null
-        ? (
-            <div className="flex items-center justify-end">
-              <h2 className="mr-2 text-end text-lg font-semibold">Default Interface:</h2>
-              <span className={cn(buttonVariants({ size: "sm", variant: "outline" }), "flex items-center gap-2")}>
-                {item.interface_port}
-                <ClipboardIcon onClick={() => handleCopy("default interface", String(item.interface_port))} className="size-4 cursor-pointer" />
-              </span>
-            </div>
-          )
-        : null}
-    </div>
-  );
-}

frontend/src/app/scripts/_components/sidebar.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import type { Category, Script } from "@/lib/types";
-
-import ScriptAccordion from "./script-accordion";
-
-function Sidebar({
-  items,
-  selectedScript,
-  setSelectedScript,
-}: {
-  items: Category[];
-  selectedScript: string | null;
-  setSelectedScript: (script: string | null) => void;
-}) {
-  const uniqueScripts = items.reduce((acc, category) => {
-    for (const script of category.scripts) {
-      if (!acc.some(s => s.name === script.name)) {
-        acc.push(script);
-      }
-    }
-    return acc;
-  }, [] as Script[]);
-
-  return (
-    <div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
-      <div className="flex items-end justify-between pb-4">
-        <h1 className="text-xl font-bold">Categories</h1>
-        <p className="text-xs italic text-muted-foreground">
-          {uniqueScripts.length}
-          {" "}
-          Total scripts
-        </p>
-      </div>
-      <div className="rounded-lg">
-        <ScriptAccordion
-          items={items}
-          selectedScript={selectedScript}
-          setSelectedScript={setSelectedScript}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default Sidebar;

frontend/src/app/scripts/page.tsx

@@ -1,20 +1,18 @@
 "use client";
-import { Suspense, useEffect, useState } from "react";
+
+export const dynamic = "force-static";
+
+import { ScriptItem } from "@/app/scripts/_components/ScriptItem";
+import { fetchCategories } from "@/lib/data";
+import { Category, Script } from "@/lib/types";
 import { Loader2 } from "lucide-react";
 import { useQueryState } from "nuqs";
-
-import type { Category, Script } from "@/lib/types";
-
-import { ScriptItem } from "@/app/scripts/_components/script-item";
-import { fetchCategories } from "@/lib/data";
-
+import { Suspense, useEffect, useState } from "react";
 import {
   LatestScripts,
   MostViewedScripts,
-} from "./_components/script-info-blocks";
-import Sidebar from "./_components/sidebar";
-
-export const dynamic = "force-static";
+} from "./_components/ScriptInfoBlocks";
+import Sidebar from "./_components/Sidebar";
 
 function ScriptContent() {
   const [selectedScript, setSelectedScript] = useQueryState("id");
@@ -24,9 +22,9 @@ function ScriptContent() {
   useEffect(() => {
     if (selectedScript && links.length > 0) {
       const script = links
-        .map(category => category.scripts)
+        .map((category) => category.scripts)
         .flat()
-        .find(script => script.slug === selectedScript);
+        .find((script) => script.slug === selectedScript);
       setItem(script);
     }
   }, [selectedScript, links]);
@@ -36,7 +34,7 @@ function ScriptContent() {
       .then((categories) => {
         setLinks(categories);
       })
-      .catch(error => console.error(error));
+      .catch((error) => console.error(error));
   }, []);
 
   return (
@@ -50,16 +48,14 @@ function ScriptContent() {
           />
         </div>
         <div className="mx-4 w-full sm:mx-0 sm:ml-4">
-          {selectedScript && item
-            ? (
-                <ScriptItem item={item} setSelectedScript={setSelectedScript} />
-              )
-            : (
-                <div className="flex w-full flex-col gap-5">
-                  <LatestScripts items={links} />
-                  <MostViewedScripts items={links} />
-                </div>
-              )}
+          {selectedScript && item ? (
+            <ScriptItem item={item} setSelectedScript={setSelectedScript} />
+          ) : (
+            <div className="flex w-full flex-col gap-5">
+              <LatestScripts items={links} />
+              <MostViewedScripts items={links} />
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -69,13 +65,13 @@ function ScriptContent() {
 export default function Page() {
   return (
     <Suspense
-      fallback={(
+      fallback={
         <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
           <div className="space-y-2 text-center">
             <Loader2 className="h-10 w-10 animate-spin" />
           </div>
         </div>
-      )}
+      }
     >
       <ScriptContent />
     </Suspense>

frontend/src/app/sitemap.ts

@@ -1,12 +1,11 @@
+import { basePath } from "@/config/siteConfig";
 import type { MetadataRoute } from "next";
 
-import { basePath } from "@/config/site-config";
-
 export const dynamic = "force-static";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const domain = "community-scripts.github.io";
-  const protocol = "https";
+  let domain = "community-scripts.github.io";
+  let protocol = "https";
   return [
     {
       url: `${protocol}://${domain}/${basePath}`,
@@ -19,6 +18,6 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     {
       url: `${protocol}://${domain}/${basePath}/json-editor`,
       lastModified: new Date(),
-    },
+    }
   ];
 }

frontend/src/components/ApplicationChart.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { ArcElement, Chart as ChartJS, Tooltip as ChartTooltip, Legend } from "chart.js";
-import ChartDataLabels from "chartjs-plugin-datalabels";
-import { BarChart3, PieChart } from "lucide-react";
-import React, { useState } from "react";
-import { Pie } from "react-chartjs-2";
-
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -20,23 +21,21 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+import { Chart as ChartJS, ArcElement, Tooltip as ChartTooltip, Legend } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { BarChart3, PieChart } from "lucide-react";
+import React, { useState } from "react";
+import { Pie, Bar } from "react-chartjs-2";
 
 ChartJS.register(ArcElement, ChartTooltip, Legend, ChartDataLabels);
 
-type SummaryData = {
+interface SummaryData {
   nsapp_count: Record<string, number>;
-};
+}
 
-type ApplicationChartProps = {
+interface ApplicationChartProps {
   data: SummaryData | null;
-};
+}
 
 const ITEMS_PER_PAGE = 20;
 const CHART_COLORS = [
@@ -62,15 +61,14 @@ export default function ApplicationChart({ data }: ApplicationChartProps) {
   const [chartStartIndex, setChartStartIndex] = useState(0);
   const [tableLimit, setTableLimit] = useState(ITEMS_PER_PAGE);
 
-  if (!data)
-    return null;
+  if (!data) return null;
 
   const sortedApps = Object.entries(data.nsapp_count)
     .sort(([, a], [, b]) => b - a);
 
   const chartApps = sortedApps.slice(
     chartStartIndex,
-    chartStartIndex + ITEMS_PER_PAGE,
+    chartStartIndex + ITEMS_PER_PAGE
   );
 
   const chartData = {
@@ -143,18 +141,14 @@ export default function ApplicationChart({ data }: ApplicationChartProps) {
               onClick={() => setChartStartIndex(Math.max(0, chartStartIndex - ITEMS_PER_PAGE))}
               disabled={chartStartIndex === 0}
             >
-              Previous
-              {" "}
-              {ITEMS_PER_PAGE}
+              Previous {ITEMS_PER_PAGE}
             </Button>
             <Button
               variant="outline"
               onClick={() => setChartStartIndex(chartStartIndex + ITEMS_PER_PAGE)}
               disabled={chartStartIndex + ITEMS_PER_PAGE >= sortedApps.length}
             >
-              Next
-              {" "}
-              {ITEMS_PER_PAGE}
+              Next {ITEMS_PER_PAGE}
             </Button>
           </div>
         </DialogContent>
@@ -196,4 +190,4 @@ export default function ApplicationChart({ data }: ApplicationChartProps) {
       </Dialog>
     </div>
   );
-}
+}

frontend/src/components/CommandMenu.tsx

@@ -1,10 +1,3 @@
-import { useRouter } from "next/navigation";
-import { Sparkles } from "lucide-react";
-import Image from "next/image";
-import React from "react";
-
-import type { Category, Script } from "@/lib/types";
-
 import {
   CommandDialog,
   CommandEmpty,
@@ -13,16 +6,22 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { basePath } from "@/config/site-config";
+import { basePath } from "@/config/siteConfig";
 import { fetchCategories } from "@/lib/data";
+import { Category, Script } from "@/lib/types";
 import { cn } from "@/lib/utils";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import { DialogTitle } from "./ui/dialog";
-import { Button } from "./ui/button";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React from "react";
 import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { DialogTitle } from "./ui/dialog";
+import { Sparkles } from "lucide-react";
+import { TooltipContent, TooltipProvider } from "./ui/tooltip";
+import { TooltipTrigger } from "./ui/tooltip";
+import { Tooltip } from "./ui/tooltip";
 
-export function formattedBadge(type: string) {
+export const formattedBadge = (type: string) => {
   switch (type) {
     case "vm":
       return <Badge className="text-blue-500/75 border-blue-500/75">VM</Badge>;
@@ -34,13 +33,12 @@ export function formattedBadge(type: string) {
       return <Badge className="text-green-500/75 border-green-500/75">ADDON</Badge>;
   }
   return null;
-}
+};
 
 // random Script
 function getRandomScript(categories: Category[]): Script | null {
-  const allScripts = categories.flatMap(cat => cat.scripts || []);
-  if (allScripts.length === 0)
-    return null;
+  const allScripts = categories.flatMap((cat) => cat.scripts || []);
+  if (allScripts.length === 0) return null;
   const idx = Math.floor(Math.random() * allScripts.length);
   return allScripts[idx];
 }
@@ -51,6 +49,18 @@ export default function CommandMenu() {
   const [isLoading, setIsLoading] = React.useState(false);
   const router = useRouter();
 
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        fetchSortedCategories();
+        setOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", down);
+    return () => document.removeEventListener("keydown", down);
+  }, []);
+
   const fetchSortedCategories = () => {
     setIsLoading(true);
     fetchCategories()
@@ -64,18 +74,6 @@ export default function CommandMenu() {
       });
   };
 
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        fetchSortedCategories();
-        setOpen(open => !open);
-      }
-    };
-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
-  }, []);
-
   const openRandomScript = async () => {
     if (links.length === 0) {
       setIsLoading(true);
@@ -86,12 +84,10 @@ export default function CommandMenu() {
         if (randomScript) {
           router.push(`/scripts?id=${randomScript.slug}`);
         }
-      }
-      finally {
+      } finally {
         setIsLoading(false);
       }
-    }
-    else {
+    } else {
       const randomScript = getRandomScript(links);
       if (randomScript) {
         router.push(`/scripts?id=${randomScript.slug}`);
@@ -114,8 +110,7 @@ export default function CommandMenu() {
         >
           <span className="inline-flex">Search scripts...</span>
           <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.45rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-            <span className="text-xs">⌘</span>
-            K
+            <span className="text-xs">⌘</span>K
           </kbd>
         </Button>
 
@@ -139,9 +134,9 @@ export default function CommandMenu() {
         <CommandInput placeholder="Search for a script..." />
         <CommandList>
           <CommandEmpty>{isLoading ? "Loading..." : "No scripts found."}</CommandEmpty>
-          {links.map(category => (
+          {links.map((category) => (
             <CommandGroup key={`category:${category.name}`} heading={category.name}>
-              {category.scripts.map(script => (
+              {category.scripts.map((script) => (
                 <CommandItem
                   key={`script:${script.slug}`}
                   value={`${script.slug}-${script.name}`}
@@ -153,7 +148,7 @@ export default function CommandMenu() {
                   <div className="flex gap-2" onClick={() => setOpen(false)}>
                     <Image
                       src={script.logo || `/${basePath}/logo.png`}
-                      onError={e => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
+                      onError={(e) => ((e.currentTarget as HTMLImageElement).src = `/${basePath}/logo.png`)}
                       unoptimized
                       width={16}
                       height={16}

frontend/src/components/FAQ.tsx

@@ -1,8 +1,7 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { Plus } from "lucide-react";
-
+import { FAQ_Items } from "../config/faqConfig";
 import { Accordion, AccordionContent, AccordionItem } from "./ui/accordion";
-import { FAQ_Items } from "../config/faq-config";
 
 export default function FAQ() {
   return (

frontend/src/components/Footer.tsx

@@ -1,10 +1,8 @@
-import { FileJson, Server } from "lucide-react";
+import { basePath } from "@/config/siteConfig";
 import Link from "next/link";
-
-import { basePath } from "@/config/site-config";
-import { cn } from "@/lib/utils";
-
+import { FileJson, Server, ExternalLink } from "lucide-react";
 import { buttonVariants } from "./ui/button";
+import { cn } from "@/lib/utils";
 
 export default function Footer() {
   return (
@@ -12,8 +10,7 @@ export default function Footer() {
       <div className="mx-6 w-full flex justify-between text-xs sm:text-sm text-muted-foreground">
         <div className="flex items-center">
           <p>
-            Website built by the community. The source code is available on
-            {" "}
+            Website built by the community. The source code is available on{" "}
             <Link
               href={`https://github.com/community-scripts/${basePath}/tree/main/frontend`}
               target="_blank"
@@ -31,17 +28,13 @@ export default function Footer() {
             href="/json-editor"
             className={cn(buttonVariants({ variant: "link" }), "text-muted-foreground flex items-center gap-2")}
           >
-            <FileJson className="h-4 w-4" />
-            {" "}
-            JSON Editor
+            <FileJson className="h-4 w-4" /> JSON Editor
           </Link>
           <Link
             href="/data"
             className={cn(buttonVariants({ variant: "link" }), "text-muted-foreground flex items-center gap-2")}
           >
-            <Server className="h-4 w-4" />
-            {" "}
-            API Data
+            <Server className="h-4 w-4" /> API Data
           </Link>
         </div>
       </div>

frontend/src/components/Modal.tsx

@@ -2,15 +2,14 @@
 
 import React from "react";
 
-type ModalProps = {
+interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
-};
+}
 
 const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
-  if (!isOpen)
-    return null;
+  if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">

frontend/src/components/Navbar.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { navbarLinks } from "@/config/siteConfig";
+
+import CommandMenu from "./CommandMenu";
+import StarOnGithubButton from "./ui/star-on-github-button";
+import { ThemeToggle } from "./ui/theme-toggle";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
+
+export const dynamic = "force-dynamic";
+
+function Navbar() {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return (
+			<>
+				<div
+					className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${
+						isScrolled ? "glass border-b bg-background/50" : ""
+					}`}
+				>
+					<div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
+						<Link
+							href={"/"}
+							className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
+						>
+							<Image
+								height={18}
+								unoptimized
+								width={18}
+								alt="logo"
+								src="/ProxmoxVE/logo.png"
+								className=""
+							/>
+							<span className="hidden md:block">Proxmox VE Helper-Scripts</span>
+						</Link>
+						<div className="flex gap-2">
+							<CommandMenu />
+							<StarOnGithubButton />
+							{navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
+								<TooltipProvider key={event}>
+									<Tooltip delayDuration={100}>
+										<TooltipTrigger
+											className={mobileHidden ? "hidden lg:block" : ""}
+										>
+											<Button variant="ghost" size={"icon"} asChild>
+												<Link
+													target="_blank"
+													href={href}
+													data-umami-event={event}
+												>
+													{icon}
+													<span className="sr-only">{text}</span>
+												</Link>
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent side="bottom" className="text-xs">
+											{text}
+										</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							))}
+							<ThemeToggle />
+						</div>
+					</div>
+				</div>
+			</>
+		);
+}
+
+export default Navbar;

frontend/src/components/TextCopyBlock.tsx

@@ -1,6 +1,5 @@
 import { ClipboardIcon } from "lucide-react";
-
-import handleCopy from "./handle-copy";
+import handleCopy from "./handleCopy";
 
 export default function TextCopyBlock(description: string) {
   const pattern = /`([^`]*)`/g;
@@ -20,8 +19,7 @@ export default function TextCopyBlock(description: string) {
           />
         </span>
       );
-    }
-    else {
+    } else {
       return part;
     }
   });

frontend/src/components/navbar.tsx

@@ -1,86 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-
-import { navbarLinks } from "@/config/site-config";
-import { Button } from "@/components/ui/button";
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-import StarOnGithubButton from "./ui/star-on-github-button";
-import { ThemeToggle } from "./ui/theme-toggle";
-import CommandMenu from "./command-menu";
-
-export const dynamic = "force-dynamic";
-
-function Navbar() {
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 0);
-    };
-
-    window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
-  return (
-    <>
-      <div
-        className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${
-          isScrolled ? "glass border-b bg-background/50" : ""
-        }`}
-      >
-        <div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
-          <Link
-            href="/"
-            className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
-          >
-            <Image
-              height={18}
-              unoptimized
-              width={18}
-              alt="logo"
-              src="/ProxmoxVE/logo.png"
-              className=""
-            />
-            <span className="hidden md:block">Proxmox VE Helper-Scripts</span>
-          </Link>
-          <div className="flex gap-2">
-            <CommandMenu />
-            <StarOnGithubButton />
-            {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
-              <TooltipProvider key={event}>
-                <Tooltip delayDuration={100}>
-                  <TooltipTrigger
-                    className={mobileHidden ? "hidden lg:block" : ""}
-                  >
-                    <Button variant="ghost" size="icon" asChild>
-                      <Link
-                        target="_blank"
-                        href={href}
-                        data-umami-event={event}
-                      >
-                        {icon}
-                        <span className="sr-only">{text}</span>
-                      </Link>
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" className="text-xs">
-                    {text}
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            ))}
-            <ThemeToggle />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export default Navbar;

frontend/src/components/theme-provider.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import type { ThemeProviderProps } from "next-themes";
-
 import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

frontend/src/components/ui/alert.tsx

@@ -1,9 +1,7 @@
-import type { VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -18,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -31,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-));
-Alert.displayName = "Alert";
+))
+Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -43,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-));
-AlertTitle.displayName = "AlertTitle";
+))
+AlertTitle.displayName = "AlertTitle"
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -55,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-));
-AlertDescription.displayName = "AlertDescription";
+))
+AlertDescription.displayName = "AlertDescription"
 
-export { Alert, AlertDescription, AlertTitle };
+export { Alert, AlertTitle, AlertDescription }

frontend/src/components/ui/animated-gradient-text.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -17,7 +17,7 @@ export default function AnimatedGradientText({
       )}
     >
       <div
-        className="absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] [border-radius:inherit] ![mask-composite:subtract] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]"
+        className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] [border-radius:inherit] ![mask-composite:subtract] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
       />
 
       {children}

frontend/src/components/ui/badge.tsx

@@ -1,6 +1,4 @@
-import type { VariantProps } from "class-variance-authority";
-
-import { cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -28,7 +26,9 @@ const badgeVariants = cva(
   },
 );
 
-export type BadgeProps = {} & React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (

frontend/src/components/ui/button.tsx

@@ -1,10 +1,7 @@
-import type { VariantProps } from "class-variance-authority";
-
-import { Slot, Slottable } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-
 import { cn } from "@/lib/utils";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -50,19 +47,21 @@ const buttonVariants = cva(
   },
 );
 
-type IconProps = {
+interface IconProps {
   Icon: React.ElementType;
   iconPlacement: "left" | "right";
-};
+}
 
-type IconRefProps = {
+interface IconRefProps {
   Icon?: never;
   iconPlacement?: undefined;
-};
+}
 
-export type ButtonProps = {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+}
 
 export type ButtonIconProps = IconProps | IconRefProps;
 

frontend/src/components/ui/calendar.tsx

@@ -1,13 +1,13 @@
-"use client";
+"use client"
 
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
-import * as React from "react";
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 function Calendar({
   className,
@@ -27,7 +27,7 @@ function Calendar({
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -39,7 +39,7 @@ function Calendar({
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
         ),
         day_range_end: "day-range-end",
         day_selected:
@@ -54,17 +54,13 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        Chevron: ({ ...props }) => {
-          if (props.orientation === "left") {
-            return <ChevronLeft className="h-4 w-4" />;
-          }
-          return <ChevronRight className="h-4 w-4" />;
-        },
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
       }}
       {...props}
     />
-  );
+  )
 }
-Calendar.displayName = "Calendar";
+Calendar.displayName = "Calendar"
 
-export { Calendar };
+export { Calendar }

frontend/src/components/ui/code-copy-button.tsx

@@ -1,10 +1,8 @@
 "use client";
+import { cn } from "@/lib/utils";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-
-import { cn } from "@/lib/utils";
-
 import { Card } from "./card";
 
 export default function CodeCopyButton({
@@ -28,7 +26,7 @@ export default function CodeCopyButton({
 
     setHasCopied(true);
 
-    const warning = localStorage.getItem("warning");
+    let warning = localStorage.getItem("warning");
 
     if (warning === null) {
       localStorage.setItem("warning", "1");
@@ -52,13 +50,11 @@ export default function CodeCopyButton({
           className={cn("bg-muted px-3 py-4")}
           title="Copy"
         >
-          {hasCopied
-            ? (
-                <CheckIcon className="h-4 w-4" />
-              )
-            : (
-                <ClipboardIcon className="h-4 w-4" />
-              )}
+          {hasCopied ? (
+            <CheckIcon className="h-4 w-4" />
+          ) : (
+            <ClipboardIcon className="h-4 w-4" />
+          )}
         </button>
       </Card>
     </div>

frontend/src/components/ui/codeblock.tsx

@@ -1,18 +1,14 @@
 "use client";
 
-import type { VariantProps } from "class-variance-authority";
-
-import { cva } from "class-variance-authority";
+import { basePath } from "@/config/siteConfig";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Clipboard, Copy } from "lucide-react";
+import Link from "next/link";
 import * as React from "react";
 import { toast } from "sonner";
-import Link from "next/link";
-
-import { basePath } from "@/config/site-config";
-import { cn } from "@/lib/utils";
-
-import { Separator } from "./separator";
 import { Button } from "./button";
+import { Separator } from "./separator";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -44,24 +40,23 @@ const buttonVariants = cva(
   },
 );
 
-function handleCopy(type: string, value: string) {
+const handleCopy = (type: string, value: string) => {
   navigator.clipboard.writeText(value);
 
   let amountOfScriptsCopied = localStorage.getItem("amountOfScriptsCopied");
 
   if (amountOfScriptsCopied === null) {
     localStorage.setItem("amountOfScriptsCopied", "1");
-  }
-  else {
-    amountOfScriptsCopied = (Number.parseInt(amountOfScriptsCopied) + 1).toString();
+  } else {
+    amountOfScriptsCopied = (parseInt(amountOfScriptsCopied) + 1).toString();
     localStorage.setItem("amountOfScriptsCopied", amountOfScriptsCopied);
 
     if (
-      Number.parseInt(amountOfScriptsCopied) === 3
-      || Number.parseInt(amountOfScriptsCopied) === 10
-      || Number.parseInt(amountOfScriptsCopied) === 25
-      || Number.parseInt(amountOfScriptsCopied) === 50
-      || Number.parseInt(amountOfScriptsCopied) === 100
+      parseInt(amountOfScriptsCopied) === 3 ||
+      parseInt(amountOfScriptsCopied) === 10 ||
+      parseInt(amountOfScriptsCopied) === 25 ||
+      parseInt(amountOfScriptsCopied) === 50 ||
+      parseInt(amountOfScriptsCopied) === 100
     ) {
       setTimeout(() => {
         toast.info(
@@ -91,20 +86,17 @@ function handleCopy(type: string, value: string) {
   toast.success(
     <div className="flex items-center gap-2">
       <Clipboard className="h-4 w-4" />
-      <span>
-        Copied
-        {type}
-        {" "}
-        to clipboard
-      </span>
+      <span>Copied {type} to clipboard</span>
     </div>,
   );
-}
+};
 
-export type CodeBlockProps = {
+export interface CodeBlockProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   code: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
+}
 
 const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
   ({ className, variant, size, asChild = false, code }, ref) => {
@@ -129,10 +121,7 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
           )}
         >
           <p className="flex items-center gap-2">
-            {code}
-            {" "}
-            <Separator orientation="vertical" />
-            {" "}
+            {code} <Separator orientation="vertical" />{" "}
             <Copy
               className="cursor-pointer"
               size={16}

frontend/src/components/ui/command.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import type { DialogProps } from "@radix-ui/react-dialog";
-
+import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import * as React from "react";
@@ -24,9 +23,9 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = {} & DialogProps;
+interface CommandDialogProps extends DialogProps {}
 
-function CommandDialog({ children, ...props }: CommandDialogProps) {
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
@@ -36,7 +35,7 @@ function CommandDialog({ children, ...props }: CommandDialogProps) {
       </DialogContent>
     </Dialog>
   );
-}
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -127,10 +126,10 @@ const CommandItem = React.forwardRef<
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-function CommandShortcut({
+const CommandShortcut = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
       className={cn(
@@ -140,7 +139,7 @@ function CommandShortcut({
       {...props}
     />
   );
-}
+};
 CommandShortcut.displayName = "CommandShortcut";
 
 export {

frontend/src/components/ui/config-copy-button.tsx

@@ -1,9 +1,8 @@
 "use client";
+import { cn } from "@/lib/utils";
 import { CheckIcon, ClipboardIcon } from "lucide-react";
 import { useEffect, useState } from "react";
-
-import { cn } from "@/lib/utils";
-
+import { toast } from "sonner";
 import { Card } from "./card";
 
 export default function CodeCopyButton({
@@ -27,6 +26,7 @@ export default function CodeCopyButton({
 
     setHasCopied(true);
 
+
     // toast.success(`copied ${type} to clipboard`, {
     //   icon: <ClipboardCheck className="h-4 w-4" />,
     // });
@@ -42,13 +42,11 @@ export default function CodeCopyButton({
           className={cn(" right-0 cursor-pointer bg-muted px-3 py-4")}
           onClick={() => handleCopy("install command", children)}
         >
-          {hasCopied
-            ? (
-                <CheckIcon className="h-4 w-4" />
-              )
-            : (
-                <ClipboardIcon className="h-4 w-4" />
-              )}
+          {hasCopied ? (
+            <CheckIcon className="h-4 w-4" />
+          ) : (
+            <ClipboardIcon className="h-4 w-4" />
+          )}
           <span className="sr-only">Copy</span>
         </div>
       </Card>

frontend/src/components/ui/dialog.tsx

@@ -53,36 +53,32 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-function DialogHeader({
+const DialogHeader = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col space-y-1.5 text-center sm:text-left",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
 DialogHeader.displayName = "DialogHeader";
 
-function DialogFooter({
+const DialogFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
 DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<

frontend/src/components/ui/dropdown-menu.tsx

@@ -37,8 +37,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
-DropdownMenuSubTrigger.displayName
-  = DropdownMenuPrimitive.SubTrigger.displayName;
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -53,8 +53,8 @@ const DropdownMenuSubContent = React.forwardRef<
     {...props}
   />
 ));
-DropdownMenuSubContent.displayName
-  = DropdownMenuPrimitive.SubContent.displayName;
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -113,8 +113,8 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ));
-DropdownMenuCheckboxItem.displayName
-  = DropdownMenuPrimitive.CheckboxItem.displayName;
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -168,17 +168,17 @@ const DropdownMenuSeparator = React.forwardRef<
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-function DropdownMenuShortcut({
+const DropdownMenuShortcut = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   );
-}
+};
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {

frontend/src/components/ui/input.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export type InputProps = {} & React.InputHTMLAttributes<HTMLInputElement>;
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

frontend/src/components/ui/label.tsx

@@ -1,28 +1,26 @@
-"use client";
+"use client"
 
-import type { VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-);
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
-  & VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={cn(labelVariants(), className)}
     {...props}
   />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+))
+Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label };
+export { Label }

frontend/src/components/ui/navigation-menu.tsx

@@ -53,8 +53,7 @@ const NavigationMenuTrigger = React.forwardRef<
     className={cn(navigationMenuTriggerStyle(), "group", className)}
     {...props}
   >
-    {children}
-    {" "}
+    {children}{" "}
     <ChevronDown
       className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
       aria-hidden="true"
@@ -95,8 +94,8 @@ const NavigationMenuViewport = React.forwardRef<
     />
   </div>
 ));
-NavigationMenuViewport.displayName
-  = NavigationMenuPrimitive.Viewport.displayName;
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -113,8 +112,8 @@ const NavigationMenuIndicator = React.forwardRef<
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
-NavigationMenuIndicator.displayName
-  = NavigationMenuPrimitive.Indicator.displayName;
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   NavigationMenu,

frontend/src/components/ui/number-ticker.tsx

@@ -30,10 +30,10 @@ export default function NumberTicker({
   });
 
   useEffect(() => {
-    isInView
-    && setTimeout(() => {
-      motionValue.set(direction === "down" ? 0 : value);
-    }, delay * 1000);
+    isInView &&
+      setTimeout(() => {
+        motionValue.set(direction === "down" ? 0 : value);
+      }, delay * 1000);
   }, [motionValue, isInView, delay, value, direction]);
 
   useEffect(

frontend/src/components/ui/particles.tsx

@@ -1,13 +1,12 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import React, { useEffect, useRef, useState } from "react";
 
-import { cn } from "@/lib/utils";
-
-type MousePosition = {
+interface MousePosition {
   x: number;
   y: number;
-};
+}
 
 function MousePosition(): MousePosition {
   const [mousePosition, setMousePosition] = useState<MousePosition>({
@@ -30,7 +29,7 @@ function MousePosition(): MousePosition {
   return mousePosition;
 }
 
-type ParticlesProps = {
+interface ParticlesProps {
   className?: string;
   quantity?: number;
   staticity?: number;
@@ -40,18 +39,18 @@ type ParticlesProps = {
   color?: string;
   vx?: number;
   vy?: number;
-};
+}
 function hexToRgb(hex: string): number[] {
   hex = hex.replace("#", "");
 
   if (hex.length === 3) {
     hex = hex
       .split("")
-      .map(char => char + char)
+      .map((char) => char + char)
       .join("");
   }
 
-  const hexInt = Number.parseInt(hex, 16);
+  const hexInt = parseInt(hex, 16);
   const red = (hexInt >> 16) & 255;
   const green = (hexInt >> 8) & 255;
   const blue = hexInt & 255;
@@ -151,7 +150,7 @@ const Particles: React.FC<ParticlesProps> = ({
     const translateY = 0;
     const pSize = Math.floor(Math.random() * 2) + size;
     const alpha = 0;
-    const targetAlpha = Number.parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+    const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
     const dx = (Math.random() - 0.5) * 0.1;
     const dy = (Math.random() - 0.5) * 0.1;
     const magnetism = 0.1 + Math.random() * 4;
@@ -214,8 +213,8 @@ const Particles: React.FC<ParticlesProps> = ({
     start2: number,
     end2: number,
   ): number => {
-    const remapped
-      = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+    const remapped =
+      ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
     return remapped > 0 ? remapped : 0;
   };
 
@@ -230,7 +229,7 @@ const Particles: React.FC<ParticlesProps> = ({
         canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
       ];
       const closestEdge = edge.reduce((a, b) => Math.min(a, b));
-      const remapClosestEdge = Number.parseFloat(
+      const remapClosestEdge = parseFloat(
         remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
       );
       if (remapClosestEdge > 1) {
@@ -238,27 +237,26 @@ const Particles: React.FC<ParticlesProps> = ({
         if (circle.alpha > circle.targetAlpha) {
           circle.alpha = circle.targetAlpha;
         }
-      }
-      else {
+      } else {
         circle.alpha = circle.targetAlpha * remapClosestEdge;
       }
       circle.x += circle.dx + vx;
       circle.y += circle.dy + vy;
-      circle.translateX
-        += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)
-          / ease;
-      circle.translateY
-        += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)
-          / ease;
+      circle.translateX +=
+        (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
+        ease;
+      circle.translateY +=
+        (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
+        ease;
 
       drawCircle(circle, true);
 
       // circle gets out of the canvas
       if (
-        circle.x < -circle.size
-        || circle.x > canvasSize.current.w + circle.size
-        || circle.y < -circle.size
-        || circle.y > canvasSize.current.h + circle.size
+        circle.x < -circle.size ||
+        circle.x > canvasSize.current.w + circle.size ||
+        circle.y < -circle.size ||
+        circle.y > canvasSize.current.h + circle.size
       ) {
         // remove the circle from the array
         circles.current.splice(i, 1);

frontend/src/components/ui/popover.tsx

@@ -1,13 +1,13 @@
-"use client";
+"use client"
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const Popover = PopoverPrimitive.Root;
+const Popover = PopoverPrimitive.Root
 
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -20,12 +20,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
+        className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverContent, PopoverTrigger };
+export { Popover, PopoverTrigger, PopoverContent }

frontend/src/components/ui/select.tsx

@@ -1,16 +1,16 @@
-"use client";
+"use client"
 
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import * as React from "react";
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const Select = SelectPrimitive.Root;
+const Select = SelectPrimitive.Root
 
-const SelectGroup = SelectPrimitive.Group;
+const SelectGroup = SelectPrimitive.Group
 
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
+      className
     )}
     {...props}
   >
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -40,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className,
+      className
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -57,15 +57,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className,
+      className
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName
-  = SelectPrimitive.ScrollDownButton.displayName;
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -76,9 +76,9 @@ const SelectContent = React.forwardRef<
       ref={ref}
       className={cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper"
-        && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
       )}
       position={position}
       {...props}
@@ -87,8 +87,8 @@ const SelectContent = React.forwardRef<
       <SelectPrimitive.Viewport
         className={cn(
           "p-1",
-          position === "popper"
-          && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -96,8 +96,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -108,8 +108,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     {...props}
   >
@@ -131,8 +131,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -143,18 +143,18 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
-  SelectContent,
   SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
   SelectValue,
-};
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

frontend/src/components/ui/sheet.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import type { VariantProps } from "class-variance-authority";
-
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import * as React from "react";
 
@@ -51,7 +49,9 @@ const sheetVariants = cva(
   },
 );
 
-type SheetContentProps = {} & React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants>;
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -74,36 +74,32 @@ const SheetContent = React.forwardRef<
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-function SheetHeader({
+const SheetHeader = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col space-y-2 text-center sm:text-left",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
 SheetHeader.displayName = "SheetHeader";
 
-function SheetFooter({
+const SheetFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
 SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<

frontend/src/components/ui/sonner.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Toaster as Sonner } from "sonner";
 import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
-function Toaster({ ...props }: ToasterProps) {
+const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
@@ -26,6 +26,6 @@ function Toaster({ ...props }: ToasterProps) {
       {...props}
     />
   );
-}
+};
 
 export { Toaster };

frontend/src/components/ui/star-on-github-button.tsx

@@ -1,12 +1,10 @@
-import { FaGithub, FaStar } from "react-icons/fa";
-import { useEffect, useState } from "react";
-import Link from "next/link";
-
-import { basePath } from "@/config/site-config";
+import { basePath } from "@/config/siteConfig";
 import { cn } from "@/lib/utils";
-
-import NumberTicker from "./number-ticker";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { FaGithub, FaStar } from "react-icons/fa";
 import { buttonVariants } from "./button";
+import NumberTicker from "./number-ticker";
 
 export default function StarOnGithubButton() {
   const [stars, setStars] = useState(0);
@@ -25,8 +23,7 @@ export default function StarOnGithubButton() {
           const data = await res.json();
           setStars(data.stargazers_count || stars);
         }
-      }
-      catch (error) {
+      } catch (error) {
         console.error("Error fetching stars:", error);
       }
     };
@@ -46,8 +43,7 @@ export default function StarOnGithubButton() {
       <span className="absolute right-0 -mt-12 h-32 translate-x-12 rotate-12 bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40" />
       <div className="flex items-center">
         <FaGithub className="size-4" />
-        <span className="ml-1">Star on GitHub</span>
-        {" "}
+        <span className="ml-1">Star on GitHub</span>{" "}
       </div>
       <div className="ml-2 flex items-center gap-1 text-sm md:flex">
         <FaStar className="size-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300" />

frontend/src/components/ui/switch.tsx

@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -12,18 +12,18 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className,
+      className
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch };
+export { Switch }

frontend/src/components/ui/table.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-));
-Table.displayName = "Table";
+))
+Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-));
-TableHeader.displayName = "TableHeader";
+))
+TableHeader.displayName = "TableHeader"
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-));
-TableBody.displayName = "TableBody";
+))
+TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableFooter.displayName = "TableFooter";
+))
+TableFooter.displayName = "TableFooter"
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -59,12 +59,12 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableRow.displayName = "TableRow";
+))
+TableRow.displayName = "TableRow"
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -74,12 +74,12 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableHead.displayName = "TableHead";
+))
+TableHead.displayName = "TableHead"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -89,12 +89,12 @@ const TableCell = React.forwardRef<
     ref={ref}
     className={cn(
       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
+      className
     )}
     {...props}
   />
-));
-TableCell.displayName = "TableCell";
+))
+TableCell.displayName = "TableCell"
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -105,16 +105,16 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-));
-TableCaption.displayName = "TableCaption";
+))
+TableCaption.displayName = "TableCaption"
 
 export {
   Table,
+  TableHeader,
   TableBody,
-  TableCaption,
-  TableCell,
   TableFooter,
   TableHead,
-  TableHeader,
   TableRow,
-};
+  TableCell,
+  TableCaption,
+}

frontend/src/components/ui/textarea.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,
@@ -10,13 +10,13 @@ const Textarea = React.forwardRef<
     <textarea
       className={cn(
         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className,
+        className
       )}
       ref={ref}
       {...props}
     />
-  );
-});
-Textarea.displayName = "Textarea";
+  )
+})
+Textarea.displayName = "Textarea"
 
-export { Textarea };
+export { Textarea }

frontend/src/components/ui/theme-toggle.tsx

@@ -2,24 +2,21 @@
 
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
-
+import { Button } from "./button";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "./tooltip";
-import { Button } from "./button";
 
 export function ThemeToggle() {
   const { setTheme, theme: currentTheme } = useTheme();
 
   const handleChangeTheme = (theme: "light" | "dark") => {
-    if (theme === currentTheme)
-      return;
+    if (theme === currentTheme) return;
 
-    if (!document.startViewTransition)
-      return setTheme(theme);
+    if (!document.startViewTransition) return setTheme(theme);
     document.startViewTransition(() => setTheme(theme));
   };
 
@@ -34,7 +31,8 @@ export function ThemeToggle() {
             className="px-2"
             aria-label="Toggle theme"
             onClick={() =>
-              handleChangeTheme(currentTheme === "dark" ? "light" : "dark")}
+              handleChangeTheme(currentTheme === "dark" ? "light" : "dark")
+            }
           >
             <SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
             <MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />

frontend/src/components/ui/tooltip.tsx

@@ -1,15 +1,15 @@
-"use client";
+"use client"
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -20,11 +20,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-      className,
+      className
     )}
     {...props}
   />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }