CT's: fix missing variable declaration (actualBudget, openziti, umlautadaptarr)

Co-authored-by: GitHub Actions[bot] <github-actions[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -12,6 +12,30 @@ Exercise vigilance regarding copycat or coat-tailing sites that seek to exploit
 
 ## 2025-09-08
 
+### 🚀 Updated Scripts
+
+  - #### 🐞 Bug Fixes
+
+    - Update searxng-install.sh [@sebguy](https://github.com/sebguy) ([#7469](https://github.com/community-scripts/ProxmoxVE/pull/7469))
+
+  - #### ✨ New Features
+
+    - [core]: switch all base_settings to variables [@MickLesk](https://github.com/MickLesk) ([#7479](https://github.com/community-scripts/ProxmoxVE/pull/7479))
+
+  - #### 💥 Breaking Changes
+
+    - RustDesk Server: Update the credentials info [@tremor021](https://github.com/tremor021) ([#7473](https://github.com/community-scripts/ProxmoxVE/pull/7473))
+
+### 🌐 Website
+
+  - #### 🐞 Bug Fixes
+
+    - Format numerical values in DataFetcher component for better readability [@BramSuurdje](https://github.com/BramSuurdje) ([#7477](https://github.com/community-scripts/ProxmoxVE/pull/7477))
+
+  - #### ✨ New Features
+
+    - feat: enhance github stars button to be better looking and more compact [@BramSuurdje](https://github.com/BramSuurdje) ([#7464](https://github.com/community-scripts/ProxmoxVE/pull/7464))
+
 ## 2025-09-07
 
 ### 🚀 Updated Scripts

ct/actualbudget.sh

@@ -6,13 +6,13 @@ source <(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxV
 # Source: https://actualbudget.org/
 
 APP="Actual Budget"
-var_tags="finance"
-var_cpu="2"
-var_ram="2048"
-var_disk="4"
-var_os="debian"
-var_version="12"
-var_unprivileged="1"
+var_tags="${var_tags:-finance}"
+var_cpu="${var_cpu:-2}"
+var_ram="${var_ram:-2048}"
+var_disk="${var_disk:-4}"
+var_os="${var_os:-debian}"
+var_version="${var_version:-12}"
+var_unprivileged="${var_unprivileged:-1}"
 
 header_info "$APP"
 variables

ct/openziti-controller.sh

@@ -6,13 +6,13 @@ source <(curl -s https://raw.githubusercontent.com/community-scripts/ProxmoxVE/m
 # Source: https://github.com/openziti/ziti
 
 APP="openziti-controller"
-var_tags="network;openziti-controller"
-var_cpu="2"
-var_ram="1024"
-var_disk="8"
-var_os="debian"
-var_version="12"
-var_unprivileged="1"
+var_tags="${var_tags:-network;openziti-controller}"
+var_cpu="${var_cpu:-2}"
+var_ram="${var_ram:-1024}"
+var_disk="${var_disk:-8}"
+var_os="${var_os:-debian}"
+var_version="${var_version:-12}"
+var_unprivileged="${var_unprivileged:-1}"
 
 header_info "$APP"
 variables
@@ -20,18 +20,18 @@ color
 catch_errors
 
 function update_script() {
-   header_info
-   check_container_storage
-   check_container_resources
-   if [[ ! -d /opt/openziti ]]; 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
+  header_info
+  check_container_storage
+  check_container_resources
+  if [[ ! -d /opt/openziti ]]; 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
 }
 
 start
@@ -41,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}https://${IP}:<port>/zac${CL}"
+echo -e "${TAB}${GATEWAY}${BGN}https://${IP}:<port>/zac${CL}"

ct/umlautadaptarr.sh

@@ -6,13 +6,13 @@ source <(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxV
 # Source: https://github.com/PCJones/UmlautAdaptarr
 
 APP="UmlautAdaptarr"
-var_tags="arr"
-var_cpu="1"
-var_ram="512"
-var_disk="4"
-var_os="debian"
-var_version="12"
-var_unprivileged="1"
+var_tags="${var_tags:-arr}"
+var_cpu="${var_cpu:-1}"
+var_ram="${var_ram:-512}"
+var_disk="${var_disk:-4}"
+var_os="${var_os:-debian}"
+var_version="${var_version:-12}"
+var_unprivileged="${var_unprivileged:-1}"
 
 header_info "$APP"
 variables
@@ -20,33 +20,33 @@ color
 catch_errors
 
 function update_script() {
-    header_info
-    check_container_storage
-    check_container_resources
-    if [[ ! -d /opt/UmlautAdaptarr ]]; then
-        msg_error "No ${APP} Installation Found!"
-        exit
-    fi
-    RELEASE=$(curl -fsSL https://api.github.com/repos/PCJones/Umlautadaptarr/releases/latest | grep "tag_name" | awk '{print substr($2, 2, length($2)-3)}')
-    if [[ ! -f /opt/UmlautAdaptarr_version.txt ]] || [[ "${RELEASE}" != "$(cat /opt/UmlautAdaptarr_version.txt)" ]]; then
-        msg_info "Stopping Service"
-        systemctl stop umlautadaptarr
-        msg_ok "Stopped Service"
-
-        msg_info "Updating ${APP}"
-        temp_file=$(mktemp)
-        curl -fsSL "https://github.com/PCJones/Umlautadaptarr/releases/download/${RELEASE}/linux-x64.zip" -o $temp_file
-        $STD unzip -u $temp_file '*/**' -d /opt/UmlautAdaptarr
-        msg_ok "Updated ${APP}"
-
-        msg_info "Starting Service"
-        systemctl start umlautadaptarr
-        msg_ok "Started Service"
-        msg_ok "$APP has been updated to ${RELEASE}."
-    else
-        msg_ok "No update required. ${APP} is already at ${RELEASE}"
-    fi
+  header_info
+  check_container_storage
+  check_container_resources
+  if [[ ! -d /opt/UmlautAdaptarr ]]; then
+    msg_error "No ${APP} Installation Found!"
     exit
+  fi
+  RELEASE=$(curl -fsSL https://api.github.com/repos/PCJones/Umlautadaptarr/releases/latest | grep "tag_name" | awk '{print substr($2, 2, length($2)-3)}')
+  if [[ ! -f /opt/UmlautAdaptarr_version.txt ]] || [[ "${RELEASE}" != "$(cat /opt/UmlautAdaptarr_version.txt)" ]]; then
+    msg_info "Stopping Service"
+    systemctl stop umlautadaptarr
+    msg_ok "Stopped Service"
+
+    msg_info "Updating ${APP}"
+    temp_file=$(mktemp)
+    curl -fsSL "https://github.com/PCJones/Umlautadaptarr/releases/download/${RELEASE}/linux-x64.zip" -o $temp_file
+    $STD unzip -u $temp_file '*/**' -d /opt/UmlautAdaptarr
+    msg_ok "Updated ${APP}"
+
+    msg_info "Starting Service"
+    systemctl start umlautadaptarr
+    msg_ok "Started Service"
+    msg_ok "$APP has been updated to ${RELEASE}."
+  else
+    msg_ok "No update required. ${APP} is already at ${RELEASE}"
+  fi
+  exit
 }
 start
 build_container

frontend/components.json

@@ -13,5 +13,8 @@
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils"
+  },
+  "registries": {
+    "@animate-ui": "https://animate-ui.com/r/{name}.json"
   }
 }

frontend/package-lock.json

@@ -31,8 +31,9 @@
         "date-fns": "^4.1.0",
         "framer-motion": "^11.18.2",
         "fuse.js": "^7.1.0",
-        "lucide-react": "^0.453.0",
+        "lucide-react": "^0.542.0",
         "mini-svg-data-uri": "^1.4.4",
+        "motion": "^12.23.12",
         "next": "15.5.2",
         "next-themes": "^0.4.4",
         "nuqs": "^2.4.1",
@@ -46,6 +47,7 @@
         "react-dom": "19.0.0",
         "react-icons": "^5.5.0",
         "react-simple-typewriter": "^5.0.1",
+        "react-use-measure": "^2.1.7",
         "sharp": "^0.33.5",
         "simple-icons": "^13.21.0",
         "sonner": "^1.7.4",
@@ -9293,12 +9295,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.453.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
-      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "version": "0.542.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz",
+      "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
       "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/magic-string": {
@@ -10339,6 +10341,32 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.12",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
       "version": "11.18.1",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -10354,6 +10382,48 @@
       "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
       "license": "MIT"
     },
+    "node_modules/motion/node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion/node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion/node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -11990,6 +12060,21 @@
         "react": ">= 0.14.0"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

frontend/package.json

@@ -38,8 +38,9 @@
     "date-fns": "^4.1.0",
     "framer-motion": "^11.18.2",
     "fuse.js": "^7.1.0",
-    "lucide-react": "^0.453.0",
+    "lucide-react": "^0.542.0",
     "mini-svg-data-uri": "^1.4.4",
+    "motion": "^12.23.12",
     "next": "15.5.2",
     "next-themes": "^0.4.4",
     "nuqs": "^2.4.1",
@@ -53,6 +54,7 @@
     "react-dom": "19.0.0",
     "react-icons": "^5.5.0",
     "react-simple-typewriter": "^5.0.1",
+    "react-use-measure": "^2.1.7",
     "sharp": "^0.33.5",
     "simple-icons": "^13.21.0",
     "sonner": "^1.7.4",

frontend/public/json/rustdeskserver.json

@@ -48,7 +48,11 @@
       "type": "info"
     },
     {
-      "text": "Login credentials: `cat ~/rustdesk.creds`",
+      "text": "To set admin password on Debian, type `cd /var/lib/rustdesk-api && rustdesk-api reset-admin-pwd <yournewpasswordhere>` inside LXC.",
+      "type": "info"
+    },
+    {
+      "text": "To see admin password on Alpine, type `cat ~/rustdesk.creds` inside LXC.",
       "type": "info"
     }
   ]

frontend/public/json/versions.json

@@ -1,14 +1,64 @@
 [
   {
-    "name": "9001/copyparty",
-    "version": "v1.19.8",
-    "date": "2025-09-07T23:36:42Z"
+    "name": "autobrr/autobrr",
+    "version": "v1.66.1",
+    "date": "2025-09-08T10:49:03Z"
+  },
+  {
+    "name": "meilisearch/meilisearch",
+    "version": "latest",
+    "date": "2025-09-08T10:03:11Z"
+  },
+  {
+    "name": "syncthing/syncthing",
+    "version": "v2.0.8",
+    "date": "2025-09-08T08:07:18Z"
+  },
+  {
+    "name": "nzbgetcom/nzbget",
+    "version": "v25.3",
+    "date": "2025-09-01T09:47:06Z"
+  },
+  {
+    "name": "TandoorRecipes/recipes",
+    "version": "2.1.1",
+    "date": "2025-09-08T06:39:30Z"
+  },
+  {
+    "name": "firefly-iii/firefly-iii",
+    "version": "v6.3.2",
+    "date": "2025-08-19T04:08:36Z"
+  },
+  {
+    "name": "Jackett/Jackett",
+    "version": "v0.22.2441",
+    "date": "2025-09-08T06:01:57Z"
+  },
+  {
+    "name": "webmin/webmin",
+    "version": "2.501",
+    "date": "2025-09-08T04:50:25Z"
+  },
+  {
+    "name": "jeedom/core",
+    "version": "4.4.19",
+    "date": "2025-09-08T00:27:05Z"
+  },
+  {
+    "name": "steveiliop56/tinyauth",
+    "version": "v3.6.2",
+    "date": "2025-07-17T12:08:03Z"
   },
   {
     "name": "paperless-ngx/paperless-ngx",
     "version": "v2.18.4",
     "date": "2025-09-07T23:57:32Z"
   },
+  {
+    "name": "9001/copyparty",
+    "version": "v1.19.8",
+    "date": "2025-09-07T23:36:42Z"
+  },
   {
     "name": "Part-DB/Part-DB-server",
     "version": "v2.1.1",
@@ -39,26 +89,16 @@
     "version": "v6.13.2",
     "date": "2025-08-19T18:18:40Z"
   },
-  {
-    "name": "firefly-iii/firefly-iii",
-    "version": "v6.3.2",
-    "date": "2025-08-19T04:08:36Z"
-  },
   {
     "name": "runtipi/runtipi",
-    "version": "nightly",
-    "date": "2025-09-07T12:16:33Z"
+    "version": "v4.4.0",
+    "date": "2025-09-02T19:26:18Z"
   },
   {
     "name": "semaphoreui/semaphore",
     "version": "v2.17.0-beta1",
     "date": "2025-09-07T08:56:50Z"
   },
-  {
-    "name": "Jackett/Jackett",
-    "version": "v0.22.2438",
-    "date": "2025-09-07T06:00:21Z"
-  },
   {
     "name": "Radarr/Radarr",
     "version": "v5.27.5.10198",
@@ -79,16 +119,6 @@
     "version": "v2.13.3.4711",
     "date": "2025-08-28T20:06:24Z"
   },
-  {
-    "name": "jeedom/core",
-    "version": "4.4.19",
-    "date": "2025-09-07T00:27:07Z"
-  },
-  {
-    "name": "steveiliop56/tinyauth",
-    "version": "v3.6.2",
-    "date": "2025-07-17T12:08:03Z"
-  },
   {
     "name": "rcourtman/Pulse",
     "version": "v4.14.0",
@@ -99,11 +129,6 @@
     "version": "v1.6.4",
     "date": "2025-08-18T20:22:07Z"
   },
-  {
-    "name": "autobrr/autobrr",
-    "version": "v1.66.0",
-    "date": "2025-09-06T15:07:16Z"
-  },
   {
     "name": "fuma-nama/fumadocs",
     "version": "create-fumadocs-app@15.7.10",
@@ -194,11 +219,6 @@
     "version": "2025.9.1",
     "date": "2025-09-05T11:15:21Z"
   },
-  {
-    "name": "syncthing/syncthing",
-    "version": "v2.0.7",
-    "date": "2025-09-05T10:18:24Z"
-  },
   {
     "name": "zitadel/zitadel",
     "version": "v4.1.2",
@@ -234,11 +254,6 @@
     "version": "v1.0.0-beta17",
     "date": "2025-09-04T21:30:14Z"
   },
-  {
-    "name": "TandoorRecipes/recipes",
-    "version": "2.1.0",
-    "date": "2025-09-04T20:24:47Z"
-  },
   {
     "name": "mongodb/mongo",
     "version": "r7.0.24",
@@ -259,11 +274,6 @@
     "version": "v0.107.65",
     "date": "2025-08-20T14:02:28Z"
   },
-  {
-    "name": "webmin/webmin",
-    "version": "2.500",
-    "date": "2025-09-04T17:44:27Z"
-  },
   {
     "name": "ollama/ollama",
     "version": "v0.11.10",
@@ -454,11 +464,6 @@
     "version": "preview-issue-description",
     "date": "2025-09-01T12:21:58Z"
   },
-  {
-    "name": "nzbgetcom/nzbget",
-    "version": "v25.3",
-    "date": "2025-09-01T09:47:06Z"
-  },
   {
     "name": "grokability/snipe-it",
     "version": "v8.3.1",
@@ -574,11 +579,6 @@
     "version": "v3.5.1",
     "date": "2025-08-27T09:21:19Z"
   },
-  {
-    "name": "meilisearch/meilisearch",
-    "version": "latest",
-    "date": "2025-08-26T14:14:42Z"
-  },
   {
     "name": "evcc-io/evcc",
     "version": "0.207.5",

frontend/src/app/data/page.tsx

@@ -38,6 +38,7 @@ const DataFetcher: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(25);
   const [sortConfig, setSortConfig] = useState<{ key: string; direction: "ascending" | "descending" } | null>(null);
+  const nf = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
 
   useEffect(() => {
     const fetchSummary = async () => {
@@ -129,19 +130,24 @@ const DataFetcher: React.FC = () => {
       <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}
+          {nf.format(
+            summary?.total_entries ?? 0,
+          )}
           {" "}
           results found
         </p>
         <p className="text-lg font">
           Status Legend: 🔄 installing
-          {summary?.status_count.installing ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.installing ?? 0)}
           {" "}
           | ✔️ completed
-          {summary?.status_count.done ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.done ?? 0)}
           {" "}
           | ❌ failed
-          {summary?.status_count.failed ?? 0}
+          {" "}
+          {nf.format(summary?.status_count.failed ?? 0)}
           {" "}
           | ❓ unknown
         </p>

frontend/src/components/animate-ui/components/buttons/button.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+import type { ButtonProps as ButtonPrimitiveProps } from "@/components/animate-ui/primitives/buttons/button";
+
+import {
+  Button as ButtonPrimitive,
+
+} from "@/components/animate-ui/primitives/buttons/button";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8 rounded-md",
+        "icon-lg": "size-10 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = ButtonPrimitiveProps & VariantProps<typeof buttonVariants>;
+
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <ButtonPrimitive
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, type ButtonProps, buttonVariants };

frontend/src/components/animate-ui/components/buttons/github-stars.tsx

@@ -0,0 +1,101 @@
+import type { VariantProps } from "class-variance-authority";
+
+import { cva } from "class-variance-authority";
+import { StarIcon } from "lucide-react";
+
+import type { ButtonProps as ButtonPrimitiveProps } from "@/components/animate-ui/primitives/buttons/button";
+import type { GithubStarsProps } from "@/components/animate-ui/primitives/animate/github-stars";
+
+import {
+  GithubStars,
+  GithubStarsIcon,
+  GithubStarsLogo,
+  GithubStarsNumber,
+  GithubStarsParticles,
+} from "@/components/animate-ui/primitives/animate/github-stars";
+import { Button as ButtonPrimitive } from "@/components/animate-ui/primitives/buttons/button";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[box-shadow,_color,_background-color,_border-color,_outline-color,_text-decoration-color,_fill,_stroke] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        accent: "bg-accent text-accent-foreground shadow-xs hover:bg-accent/90",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const buttonStarVariants = cva("", {
+  variants: {
+    variant: {
+      default: "fill-neutral-700 stroke-neutral-700 dark:fill-neutral-300 dark:stroke-neutral-300",
+      accent: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
+      outline: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
+      ghost: "fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type GitHubStarsButtonProps = Omit<ButtonPrimitiveProps & GithubStarsProps, "asChild" | "children">
+  & VariantProps<typeof buttonVariants>;
+
+function GitHubStarsButton({
+  className,
+  username,
+  repo,
+  value,
+  delay,
+  inView,
+  inViewMargin,
+  inViewOnce,
+  variant,
+  size,
+  ...props
+}: GitHubStarsButtonProps) {
+  return (
+    <GithubStars
+      asChild
+      username={username}
+      repo={repo}
+      value={value}
+      delay={delay}
+      inView={inView}
+      inViewMargin={inViewMargin}
+      inViewOnce={inViewOnce}
+    >
+      <ButtonPrimitive className={cn(buttonVariants({ variant, size, className }))} {...props}>
+        <GithubStarsLogo />
+        <GithubStarsNumber />
+        <GithubStarsParticles className="text-yellow-500">
+          <GithubStarsIcon
+            icon={StarIcon}
+            data-variant={variant}
+            className={cn(buttonStarVariants({ variant }))}
+            activeClassName="text-yellow-500"
+            size={18}
+          />
+        </GithubStarsParticles>
+      </ButtonPrimitive>
+    </GithubStars>
+  );
+}
+
+export { GitHubStarsButton, type GitHubStarsButtonProps };

frontend/src/components/animate-ui/primitives/animate/github-stars.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import type { HTMLMotionProps } from "motion/react";
+
+import { motion } from "motion/react";
+import * as React from "react";
+
+import type { SlidingNumberProps } from "@/components/animate-ui/primitives/texts/sliding-number";
+import type { ParticlesEffectProps } from "@/components/animate-ui/primitives/effects/particles";
+import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
+import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
+
+import { Particles, ParticlesEffect } from "@/components/animate-ui/primitives/effects/particles";
+import { SlidingNumber } from "@/components/animate-ui/primitives/texts/sliding-number";
+import { Slot } from "@/components/animate-ui/primitives/animate/slot";
+import { getStrictContext } from "@/lib/get-strict-context";
+import { useIsInView } from "@/hooks/use-is-in-view";
+import { cn } from "@/lib/utils";
+
+type GithubStarsContextType = {
+  stars: number;
+  setStars: (stars: number) => void;
+  currentStars: number;
+  setCurrentStars: (stars: number) => void;
+  isCompleted: boolean;
+  isLoading: boolean;
+};
+
+const [GithubStarsProvider, useGithubStars] = getStrictContext<GithubStarsContextType>("GithubStarsContext");
+
+type GithubStarsProps = WithAsChild<
+  {
+    children: React.ReactNode;
+    username?: string;
+    repo?: string;
+    value?: number;
+    delay?: number;
+  } & UseIsInViewOptions
+  & HTMLMotionProps<"div">
+>;
+
+function GithubStars({
+  ref,
+  children,
+  username,
+  repo,
+  value,
+  delay = 0,
+  inView = false,
+  inViewMargin = "0px",
+  inViewOnce = true,
+  asChild = false,
+  ...props
+}: GithubStarsProps) {
+  const { ref: localRef, isInView } = useIsInView(ref as React.Ref<HTMLDivElement>, {
+    inView,
+    inViewOnce,
+    inViewMargin,
+  });
+
+  const [stars, setStars] = React.useState(value ?? 0);
+  const [currentStars, setCurrentStars] = React.useState(0);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const isCompleted = React.useMemo(() => currentStars === stars, [currentStars, stars]);
+
+  const Component = asChild ? Slot : motion.div;
+
+  React.useEffect(() => {
+    if (value !== undefined && username && repo)
+      return;
+    if (!isInView) {
+      setStars(0);
+      setIsLoading(true);
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      fetch(`https://api.github.com/repos/${username}/${repo}`)
+        .then(response => response.json())
+        .then((data) => {
+          if (data && typeof data.stargazers_count === "number") {
+            setStars(data.stargazers_count);
+          }
+        })
+        .catch(console.error)
+        .finally(() => setIsLoading(false));
+    }, delay);
+
+    return () => clearTimeout(timeout);
+  }, [username, repo, value, isInView, delay]);
+
+  return (
+    <GithubStarsProvider
+      value={{
+        stars,
+        currentStars,
+        isCompleted,
+        isLoading,
+        setStars,
+        setCurrentStars,
+      }}
+    >
+      {!isLoading && (
+        <Component ref={localRef} {...props}>
+          {children}
+        </Component>
+      )}
+    </GithubStarsProvider>
+  );
+}
+
+type GithubStarsNumberProps = Omit<SlidingNumberProps, "number" | "fromNumber">;
+
+function GithubStarsNumber({ padStart = true, ...props }: GithubStarsNumberProps) {
+  const { stars, setCurrentStars } = useGithubStars();
+
+  return (
+    <SlidingNumber number={stars} fromNumber={0} onNumberChange={setCurrentStars} padStart={padStart} {...props} />
+  );
+}
+
+type GithubStarsIconProps<T extends React.ElementType> = {
+  icon: React.ReactElement<T>;
+  color?: string;
+  activeClassName?: string;
+} & React.ComponentProps<T>;
+
+function GithubStarsIcon<T extends React.ElementType>({
+  icon: Icon,
+  color = "currentColor",
+  activeClassName,
+  className,
+  ...props
+}: GithubStarsIconProps<T>) {
+  const { stars, currentStars, isCompleted } = useGithubStars();
+  const fillPercentage = (currentStars / stars) * 100;
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Icon aria-hidden="true" className={cn(className)} {...props} />
+      <Icon
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          fill: color,
+          stroke: color,
+          clipPath: `inset(${100 - (isCompleted ? fillPercentage : fillPercentage - 10)}% 0 0 0)`,
+        }}
+        className={cn(className, activeClassName)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+type GithubStarsParticlesProps = ParticlesEffectProps & {
+  children: React.ReactElement;
+  size?: number;
+};
+
+function GithubStarsParticles({ children, size = 4, style, ...props }: GithubStarsParticlesProps) {
+  const { isCompleted } = useGithubStars();
+
+  return (
+    <Particles animate={isCompleted}>
+      {children}
+      <ParticlesEffect
+        style={{
+          backgroundColor: "currentcolor",
+          borderRadius: "50%",
+          width: size,
+          height: size,
+          ...style,
+        }}
+        {...props}
+      />
+    </Particles>
+  );
+}
+
+type GithubStarsLogoProps = React.SVGProps<SVGSVGElement>;
+
+function GithubStarsLogo(props: GithubStarsLogoProps) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" aria-label="GitHub" {...props}>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+    </svg>
+  );
+}
+
+export {
+  GithubStars,
+  type GithubStarsContextType,
+  GithubStarsIcon,
+  type GithubStarsIconProps,
+  GithubStarsLogo,
+  type GithubStarsLogoProps,
+  GithubStarsNumber,
+  type GithubStarsNumberProps,
+  GithubStarsParticles,
+  type GithubStarsParticlesProps,
+  type GithubStarsProps,
+  useGithubStars,
+};

frontend/src/components/animate-ui/primitives/animate/slot.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import type { HTMLMotionProps } from "motion/react";
+
+import { isMotionComponent, motion } from "motion/react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type AnyProps = Record<string, unknown>;
+
+type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
+  HTMLMotionProps<keyof HTMLElementTagNameMap>,
+  "ref"
+> & { ref?: React.Ref<T> };
+
+type WithAsChild<Base extends object>
+  = | (Base & { asChild: true; children: React.ReactElement })
+    | (Base & { asChild?: false | undefined });
+
+type SlotProps<T extends HTMLElement = HTMLElement> = {
+  children?: any;
+} & DOMMotionProps<T>;
+
+function mergeRefs<T>(
+  ...refs: (React.Ref<T> | undefined)[]
+): React.RefCallback<T> {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref)
+        return;
+      if (typeof ref === "function") {
+        ref(node);
+      }
+      else {
+        (ref as React.RefObject<T | null>).current = node;
+      }
+    });
+  };
+}
+
+function mergeProps<T extends HTMLElement>(
+  childProps: AnyProps,
+  slotProps: DOMMotionProps<T>,
+): AnyProps {
+  const merged: AnyProps = { ...childProps, ...slotProps };
+
+  if (childProps.className || slotProps.className) {
+    merged.className = cn(
+      childProps.className as string,
+      slotProps.className as string,
+    );
+  }
+
+  if (childProps.style || slotProps.style) {
+    merged.style = {
+      ...(childProps.style as React.CSSProperties),
+      ...(slotProps.style as React.CSSProperties),
+    };
+  }
+
+  return merged;
+}
+
+function Slot<T extends HTMLElement = HTMLElement>({
+  children,
+  ref,
+  ...props
+}: SlotProps<T>) {
+  const isAlreadyMotion
+    = typeof children.type === "object"
+      && children.type !== null
+      && isMotionComponent(children.type);
+
+  const Base = React.useMemo(
+    () =>
+      isAlreadyMotion
+        ? (children.type as React.ElementType)
+        : motion.create(children.type as React.ElementType),
+    [isAlreadyMotion, children.type],
+  );
+
+  if (!React.isValidElement(children))
+    return null;
+
+  const { ref: childRef, ...childProps } = children.props as AnyProps;
+
+  const mergedProps = mergeProps(childProps, props);
+
+  return (
+    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
+  );
+}
+
+export {
+  type AnyProps,
+  type DOMMotionProps,
+  Slot,
+  type SlotProps,
+  type WithAsChild,
+};

frontend/src/components/animate-ui/primitives/buttons/button.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import type { HTMLMotionProps } from "motion/react";
+
+import { motion } from "motion/react";
+import * as React from "react";
+
+import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
+
+import { Slot } from "@/components/animate-ui/primitives/animate/slot";
+
+type ButtonProps = WithAsChild<
+  HTMLMotionProps<"button"> & {
+    hoverScale?: number;
+    tapScale?: number;
+  }
+>;
+
+function Button({
+  hoverScale = 1.05,
+  tapScale = 0.95,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Component = asChild ? Slot : motion.button;
+
+  return (
+    <Component
+      whileTap={{ scale: tapScale }}
+      whileHover={{ scale: hoverScale }}
+      {...props}
+    />
+  );
+}
+
+export { Button, type ButtonProps };

frontend/src/components/animate-ui/primitives/effects/particles.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import type { HTMLMotionProps } from "motion/react";
+
+import { AnimatePresence, motion } from "motion/react";
+import * as React from "react";
+
+import type { WithAsChild } from "@/components/animate-ui/primitives/animate/slot";
+import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
+
+import { Slot } from "@/components/animate-ui/primitives/animate/slot";
+import { getStrictContext } from "@/lib/get-strict-context";
+import {
+  useIsInView,
+
+} from "@/hooks/use-is-in-view";
+
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+
+type ParticlesContextType = {
+  animate: boolean;
+  isInView: boolean;
+};
+
+const [ParticlesProvider, useParticles]
+  = getStrictContext<ParticlesContextType>("ParticlesContext");
+
+type ParticlesProps = WithAsChild<
+  Omit<HTMLMotionProps<"div">, "children"> & {
+    animate?: boolean;
+    children: React.ReactNode;
+  } & UseIsInViewOptions
+>;
+
+function Particles({
+  ref,
+  animate = true,
+  asChild = false,
+  inView = false,
+  inViewMargin = "0px",
+  inViewOnce = true,
+  children,
+  style,
+  ...props
+}: ParticlesProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLDivElement>,
+    { inView, inViewOnce, inViewMargin },
+  );
+
+  const Component = asChild ? Slot : motion.div;
+
+  return (
+    <ParticlesProvider value={{ animate, isInView }}>
+      <Component
+        ref={localRef}
+        style={{ position: "relative", ...style }}
+        {...props}
+      >
+        {children}
+      </Component>
+    </ParticlesProvider>
+  );
+}
+
+type ParticlesEffectProps = Omit<HTMLMotionProps<"div">, "children"> & {
+  side?: Side;
+  align?: Align;
+  count?: number;
+  radius?: number;
+  spread?: number;
+  duration?: number;
+  holdDelay?: number;
+  sideOffset?: number;
+  alignOffset?: number;
+  delay?: number;
+};
+
+function ParticlesEffect({
+  side = "top",
+  align = "center",
+  count = 6,
+  radius = 30,
+  spread = 360,
+  duration = 0.8,
+  holdDelay = 0.05,
+  sideOffset = 0,
+  alignOffset = 0,
+  delay = 0,
+  transition,
+  style,
+  ...props
+}: ParticlesEffectProps) {
+  const { animate, isInView } = useParticles();
+
+  const isVertical = side === "top" || side === "bottom";
+  const alignPct = align === "start" ? "0%" : align === "end" ? "100%" : "50%";
+
+  const top = isVertical
+    ? side === "top"
+      ? `calc(0% - ${sideOffset}px)`
+      : `calc(100% + ${sideOffset}px)`
+    : `calc(${alignPct} + ${alignOffset}px)`;
+
+  const left = isVertical
+    ? `calc(${alignPct} + ${alignOffset}px)`
+    : side === "left"
+      ? `calc(0% - ${sideOffset}px)`
+      : `calc(100% + ${sideOffset}px)`;
+
+  const containerStyle: React.CSSProperties = {
+    position: "absolute",
+    top,
+    left,
+    transform: "translate(-50%, -50%)",
+  };
+
+  const angleStep = (spread * (Math.PI / 180)) / Math.max(1, count - 1);
+
+  return (
+    <AnimatePresence>
+      {animate
+        && isInView
+        && Array.from({ length: count }).map((_, i) => {
+          const angle = i * angleStep;
+          const x = Math.cos(angle) * radius;
+          const y = Math.sin(angle) * radius;
+
+          return (
+            <motion.div
+              key={i}
+              style={{ ...containerStyle, ...style }}
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{
+                x: `${x}px`,
+                y: `${y}px`,
+                scale: [0, 1, 0],
+                opacity: [0, 1, 0],
+              }}
+              transition={{
+                duration,
+                delay: delay + i * holdDelay,
+                ease: "easeOut",
+                ...transition,
+              }}
+              {...props}
+            />
+          );
+        })}
+    </AnimatePresence>
+  );
+}
+
+export {
+  Particles,
+  ParticlesEffect,
+  type ParticlesEffectProps,
+  type ParticlesProps,
+};

frontend/src/components/animate-ui/primitives/texts/sliding-number.tsx

@@ -0,0 +1,338 @@
+"use client";
+
+import type { MotionValue, SpringOptions } from "motion/react";
+
+import {
+  motion,
+
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "motion/react";
+import useMeasure from "react-use-measure";
+import * as React from "react";
+
+import type { UseIsInViewOptions } from "@/hooks/use-is-in-view";
+
+import {
+  useIsInView,
+
+} from "@/hooks/use-is-in-view";
+
+type SlidingNumberRollerProps = {
+  prevValue: number;
+  value: number;
+  place: number;
+  transition: SpringOptions;
+  delay?: number;
+};
+
+function SlidingNumberRoller({
+  prevValue,
+  value,
+  place,
+  transition,
+  delay = 0,
+}: SlidingNumberRollerProps) {
+  const startNumber = Math.floor(prevValue / place) % 10;
+  const targetNumber = Math.floor(value / place) % 10;
+  const animatedValue = useSpring(startNumber, transition);
+
+  React.useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      animatedValue.set(targetNumber);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [targetNumber, animatedValue, delay]);
+
+  const [measureRef, { height }] = useMeasure();
+
+  return (
+    <span
+      ref={measureRef}
+      data-slot="sliding-number-roller"
+      style={{
+        position: "relative",
+        display: "inline-block",
+        width: "1ch",
+        overflowX: "visible",
+        overflowY: "clip",
+        lineHeight: 1,
+        fontVariantNumeric: "tabular-nums",
+      }}
+    >
+      <span style={{ visibility: "hidden" }}>0</span>
+      {Array.from({ length: 10 }, (_, i) => (
+        <SlidingNumberDisplay
+          key={i}
+          motionValue={animatedValue}
+          number={i}
+          height={height}
+          transition={transition}
+        />
+      ))}
+    </span>
+  );
+}
+
+type SlidingNumberDisplayProps = {
+  motionValue: MotionValue<number>;
+  number: number;
+  height: number;
+  transition: SpringOptions;
+};
+
+function SlidingNumberDisplay({
+  motionValue,
+  number,
+  height,
+  transition,
+}: SlidingNumberDisplayProps) {
+  const y = useTransform(motionValue, (latest) => {
+    if (!height)
+      return 0;
+    const currentNumber = latest % 10;
+    const offset = (10 + number - currentNumber) % 10;
+    let translateY = offset * height;
+    if (offset > 5)
+      translateY -= 10 * height;
+    return translateY;
+  });
+
+  if (!height) {
+    return (
+      <span style={{ visibility: "hidden", position: "absolute" }}>
+        {number}
+      </span>
+    );
+  }
+
+  return (
+    <motion.span
+      data-slot="sliding-number-display"
+      style={{
+        y,
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      transition={{ ...transition, type: "spring" }}
+    >
+      {number}
+    </motion.span>
+  );
+}
+
+type SlidingNumberProps = Omit<React.ComponentProps<"span">, "children"> & {
+  number: number;
+  fromNumber?: number;
+  onNumberChange?: (number: number) => void;
+  padStart?: boolean;
+  decimalSeparator?: string;
+  decimalPlaces?: number;
+  thousandSeparator?: string;
+  transition?: SpringOptions;
+  delay?: number;
+} & UseIsInViewOptions;
+
+function SlidingNumber({
+  ref,
+  number,
+  fromNumber,
+  onNumberChange,
+  inView = false,
+  inViewMargin = "0px",
+  inViewOnce = true,
+  padStart = false,
+  decimalSeparator = ".",
+  decimalPlaces = 0,
+  thousandSeparator,
+  transition = { stiffness: 200, damping: 20, mass: 0.4 },
+  delay = 0,
+  ...props
+}: SlidingNumberProps) {
+  const { ref: localRef, isInView } = useIsInView(
+    ref as React.Ref<HTMLElement>,
+    {
+      inView,
+      inViewOnce,
+      inViewMargin,
+    },
+  );
+
+  const prevNumberRef = React.useRef<number>(0);
+
+  const hasAnimated = fromNumber !== undefined;
+  const motionVal = useMotionValue(fromNumber ?? 0);
+  const springVal = useSpring(motionVal, { stiffness: 90, damping: 50 });
+
+  React.useEffect(() => {
+    if (!hasAnimated)
+      return;
+    const timeoutId = setTimeout(() => {
+      if (isInView)
+        motionVal.set(number);
+    }, delay);
+    return () => clearTimeout(timeoutId);
+  }, [hasAnimated, isInView, number, motionVal, delay]);
+
+  const [effectiveNumber, setEffectiveNumber] = React.useState(0);
+
+  React.useEffect(() => {
+    if (hasAnimated) {
+      const inferredDecimals
+        = typeof decimalPlaces === "number" && decimalPlaces >= 0
+          ? decimalPlaces
+          : (() => {
+              const s = String(number);
+              const idx = s.indexOf(".");
+              return idx >= 0 ? s.length - idx - 1 : 0;
+            })();
+
+      const factor = 10 ** inferredDecimals;
+
+      const unsubscribe = springVal.on("change", (latest: number) => {
+        const newValue
+          = inferredDecimals > 0
+            ? Math.round(latest * factor) / factor
+            : Math.round(latest);
+
+        if (effectiveNumber !== newValue) {
+          setEffectiveNumber(newValue);
+          onNumberChange?.(newValue);
+        }
+      });
+      return () => unsubscribe();
+    }
+    else {
+      setEffectiveNumber(!isInView ? 0 : Math.abs(Number(number)));
+    }
+  }, [
+    hasAnimated,
+    springVal,
+    isInView,
+    number,
+    decimalPlaces,
+    onNumberChange,
+    effectiveNumber,
+  ]);
+
+  const formatNumber = React.useCallback(
+    (num: number) =>
+      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
+    [decimalPlaces],
+  );
+
+  const numberStr = formatNumber(effectiveNumber);
+  const [newIntStrRaw, newDecStrRaw = ""] = numberStr.split(".");
+
+  const finalIntLength = padStart
+    ? Math.max(
+        Math.floor(Math.abs(number)).toString().length,
+        newIntStrRaw.length,
+      )
+    : newIntStrRaw.length;
+
+  const newIntStr = padStart
+    ? newIntStrRaw.padStart(finalIntLength, "0")
+    : newIntStrRaw;
+
+  const prevFormatted = formatNumber(prevNumberRef.current);
+  const [prevIntStrRaw = "", prevDecStrRaw = ""] = prevFormatted.split(".");
+  const prevIntStr = padStart
+    ? prevIntStrRaw.padStart(finalIntLength, "0")
+    : prevIntStrRaw;
+
+  const adjustedPrevInt = React.useMemo(() => {
+    return prevIntStr.length > finalIntLength
+      ? prevIntStr.slice(-finalIntLength)
+      : prevIntStr.padStart(finalIntLength, "0");
+  }, [prevIntStr, finalIntLength]);
+
+  const adjustedPrevDec = React.useMemo(() => {
+    if (!newDecStrRaw)
+      return "";
+    return prevDecStrRaw.length > newDecStrRaw.length
+      ? prevDecStrRaw.slice(0, newDecStrRaw.length)
+      : prevDecStrRaw.padEnd(newDecStrRaw.length, "0");
+  }, [prevDecStrRaw, newDecStrRaw]);
+
+  React.useEffect(() => {
+    if (isInView)
+      prevNumberRef.current = effectiveNumber;
+  }, [effectiveNumber, isInView]);
+
+  const intPlaces = React.useMemo(
+    () =>
+      Array.from({ length: finalIntLength }, (_, i) =>
+        10 ** (finalIntLength - i - 1)),
+    [finalIntLength],
+  );
+  const decPlaces = React.useMemo(
+    () =>
+      newDecStrRaw
+        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>
+            10 ** (newDecStrRaw.length - i - 1))
+        : [],
+    [newDecStrRaw],
+  );
+
+  const newDecValue = newDecStrRaw ? Number.parseInt(newDecStrRaw, 10) : 0;
+  const prevDecValue = adjustedPrevDec ? Number.parseInt(adjustedPrevDec, 10) : 0;
+
+  return (
+    <span
+      ref={localRef}
+      data-slot="sliding-number"
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+      }}
+      {...props}
+    >
+      {isInView && Number(number) < 0 && (
+        <span style={{ marginRight: "0.25rem" }}>-</span>
+      )}
+
+      {intPlaces.map((place, idx) => {
+        const digitsToRight = intPlaces.length - idx - 1;
+        const isSeparatorPosition
+          = typeof thousandSeparator !== "undefined"
+            && digitsToRight > 0
+            && digitsToRight % 3 === 0;
+
+        return (
+          <React.Fragment key={`int-${place}`}>
+            <SlidingNumberRoller
+              prevValue={Number.parseInt(adjustedPrevInt, 10)}
+              value={Number.parseInt(newIntStr ?? "0", 10)}
+              place={place}
+              transition={transition}
+            />
+            {isSeparatorPosition && <span>{thousandSeparator}</span>}
+          </React.Fragment>
+        );
+      })}
+
+      {newDecStrRaw && (
+        <>
+          <span>{decimalSeparator}</span>
+          {decPlaces.map(place => (
+            <SlidingNumberRoller
+              key={`dec-${place}`}
+              prevValue={prevDecValue}
+              value={newDecValue}
+              place={place}
+              transition={transition}
+              delay={delay}
+            />
+          ))}
+        </>
+      )}
+    </span>
+  );
+}
+
+export { SlidingNumber, type SlidingNumberProps };

frontend/src/components/navbar.tsx

@@ -4,10 +4,10 @@ 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 { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars";
+import { Button } from "./animate-ui/components/buttons/button";
 import { ThemeToggle } from "./ui/theme-toggle";
 import CommandMenu from "./command-menu";
 
@@ -39,31 +39,18 @@ function Navbar() {
             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=""
-            />
+            <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 />
+            <GitHubStarsButton username="community-scripts" repo="ProxmoxVE" />
             {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
               <TooltipProvider key={event}>
                 <Tooltip delayDuration={100}>
-                  <TooltipTrigger
-                    className={mobileHidden ? "hidden lg:block" : ""}
-                  >
+                  <TooltipTrigger className={mobileHidden ? "hidden lg:block" : ""}>
                     <Button variant="ghost" size="icon" asChild>
-                      <Link
-                        target="_blank"
-                        href={href}
-                        data-umami-event={event}
-                      >
+                      <Link target="_blank" href={href} data-umami-event={event}>
                         {icon}
                         <span className="sr-only">{text}</span>
                       </Link>

frontend/src/hooks/use-is-in-view.tsx

@@ -0,0 +1,27 @@
+import type { UseInViewOptions } from "motion/react";
+
+import { useInView } from "motion/react";
+import * as React from "react";
+
+type UseIsInViewOptions = {
+  inView?: boolean;
+  inViewOnce?: boolean;
+  inViewMargin?: UseInViewOptions["margin"];
+};
+
+function useIsInView<T extends HTMLElement = HTMLElement>(
+  ref: React.Ref<T>,
+  options: UseIsInViewOptions = {},
+) {
+  const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
+  const localRef = React.useRef<T>(null);
+  React.useImperativeHandle(ref, () => localRef.current as T);
+  const inViewResult = useInView(localRef, {
+    once: inViewOnce,
+    margin: inViewMargin,
+  });
+  const isInView = !inView || inViewResult;
+  return { ref: localRef, isInView };
+}
+
+export { useIsInView, type UseIsInViewOptions };

frontend/src/lib/get-strict-context.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+function getStrictContext<T>(
+  name?: string,
+): readonly [
+    ({
+      value,
+      children,
+    }: {
+      value: T;
+      children?: React.ReactNode;
+    }) => React.JSX.Element,
+    () => T,
+  ] {
+  const Context = React.createContext<T | undefined>(undefined);
+
+  const Provider = ({
+    value,
+    children,
+  }: {
+    value: T;
+    children?: React.ReactNode;
+  }) => <Context.Provider value={value}>{children}</Context.Provider>;
+
+  const useSafeContext = () => {
+    const ctx = React.useContext(Context);
+    if (ctx === undefined) {
+      throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
+    }
+    return ctx;
+  };
+
+  return [Provider, useSafeContext] as const;
+}
+
+export { getStrictContext };

install/rustdeskserver-install.sh

@@ -18,18 +18,6 @@ fetch_and_deploy_gh_release "rustdesk-hbbs" "rustdesk/rustdesk-server" "binary"
 fetch_and_deploy_gh_release "rustdesk-utils" "rustdesk/rustdesk-server" "binary" "latest" "/opt/rustdesk" "rustdesk-server-utils*amd64.deb"
 fetch_and_deploy_gh_release "rustdesk-api" "lejianwen/rustdesk-api" "binary" "latest" "/opt/rustdesk" "rustdesk-api-server*amd64.deb"
 
-msg_info "Configuring RustDesk Server"
-ADMINPASS=$(openssl rand -base64 18 | tr -dc 'a-zA-Z0-9' | head -c13)
-cd /var/lib/rustdesk-api
-$STD rustdesk-api reset-admin-pwd $ADMINPASS
-{
-  echo "RustDesk WebUI"
-  echo ""
-  echo "Username: admin"
-  echo "Password: $ADMINPASS"
-} >>~/rustdesk.creds
-msg_ok "Configured RustDesk Server"
-
 motd_ssh
 customize
 

install/searxng-install.sh

@@ -36,7 +36,7 @@ msg_info "Creating Python virtual environment"
 sudo -H -u searxng bash -c '
   python3 -m venv /usr/local/searxng/searx-pyenv &&
   . /usr/local/searxng/searx-pyenv/bin/activate &&
-  pip install -U pip setuptools wheel pyyaml &&
+  pip install -U pip setuptools wheel pyyaml lxml &&
   pip install --use-pep517 --no-build-isolation -e /usr/local/searxng/searxng-src
 '
 msg_ok "Python environment ready"

misc/build.func

@@ -26,7 +26,7 @@ elif command -v wget >/dev/null 2>&1; then
 fi
 # This function enables error handling in the script by setting options and defining a trap for the ERR signal.
 catch_errors() {
-  set -Eeuo pipefail
+  set -Eeo pipefail
   trap 'error_handler $LINENO "$BASH_COMMAND"' ERR
 }
 
@@ -200,41 +200,32 @@ ssh_check() {
 
 base_settings() {
   # Default Settings
-  CT_TYPE="1"
-  DISK_SIZE="4"
-  CORE_COUNT="1"
-  RAM_SIZE="1024"
-  VERBOSE="${1:-no}"
-  PW=""
-  CT_ID=$NEXTID
-  HN=$NSAPP
-  BRG="vmbr0"
-  NET="dhcp"
-  IPV6_METHOD="none"
-  IPV6_STATIC=""
-  GATE=""
-  APT_CACHER=""
-  APT_CACHER_IP=""
-  MTU=""
-  SD=""
-  NS=""
-  MAC=""
-  VLAN=""
-  SSH="no"
-  SSH_AUTHORIZED_KEY=""
-  TAGS="community-script;"
-  ENABLE_FUSE="${1:-no}"
-  ENABLE_TUN="${1:-no}"
-
-  # Override default settings with variables from ct script
-  CT_TYPE=${var_unprivileged:-$CT_TYPE}
-  DISK_SIZE=${var_disk:-$DISK_SIZE}
-  CORE_COUNT=${var_cpu:-$CORE_COUNT}
-  RAM_SIZE=${var_ram:-$RAM_SIZE}
-  VERB=${var_verbose:-$VERBOSE}
-  TAGS="${TAGS}${var_tags:-}"
-  ENABLE_FUSE="${var_fuse:-$ENABLE_FUSE}"
-  ENABLE_TUN="${var_tun:-$ENABLE_TUN}"
+  CT_TYPE=${var_unprivileged:-"1"}
+  DISK_SIZE=${var_disk:-"4"}
+  CORE_COUNT=${var_cpu:-"1"}
+  RAM_SIZE=${var_ram:-"1024"}
+  VERBOSE=${var_verbose:-"${1:-no}"}
+  PW=${var_pw:-""}
+  CT_ID=${var_ctid:-$NEXTID}
+  HN=${var_hostname:-$NSAPP}
+  BRG=${var_brg:-"vmbr0"}
+  NET=${var_net:-"dhcp"}
+  IPV6_METHOD=${var_ipv6_method:-"none"}
+  IPV6_STATIC=${var_ipv6_static:-""}
+  GATE=${var_gateway:-""}
+  APT_CACHER=${var_apt_cacher:-""}
+  APT_CACHER_IP=${var_apt_cacher_ip:-""}
+  MTU=${var_mtu:-""}
+  SD=${var_storage:-""}
+  NS=${var_ns:-""}
+  MAC=${var_mac:-""}
+  VLAN=${var_vlan:-""}
+  SSH=${var_ssh:-"no"}
+  SSH_AUTHORIZED_KEY=${var_ssh_authorized_key:-""}
+  UDHCPC_FIX=${var_udhcpc_fix:-""}
+  TAGS="community-script;${var_tags:-}"
+  ENABLE_FUSE=${var_fuse:-"${1:-no}"}
+  ENABLE_TUN=${var_tun:-"${1:-no}"}
 
   # Since these 2 are only defined outside of default_settings function, we add a temporary fallback. TODO: To align everything, we should add these as constant variables (e.g. OSTYPE and OSVERSION), but that would currently require updating the default_settings function for all existing scripts
   if [ -z "$var_os" ]; then
@@ -244,6 +235,7 @@ base_settings() {
     var_version="12"
   fi
 }
+
 write_config() {
   mkdir -p /opt/community-scripts
   # This function writes the configuration to a file.
@@ -354,7 +346,7 @@ echo_default() {
   echo -e "${DISKSIZE}${BOLD}${DGN}Disk Size: ${BGN}${DISK_SIZE} GB${CL}"
   echo -e "${CPUCORE}${BOLD}${DGN}CPU Cores: ${BGN}${CORE_COUNT}${CL}"
   echo -e "${RAMSIZE}${BOLD}${DGN}RAM Size: ${BGN}${RAM_SIZE} MiB${CL}"
-  if [ "$VERB" == "yes" ]; then
+  if [ "$VERBOSE" == "yes" ]; then
     echo -e "${SEARCH}${BOLD}${DGN}Verbose Mode: ${BGN}Enabled${CL}"
   fi
   echo -e "${CREATING}${BOLD}${BL}Creating a ${APP} LXC using the above default settings${CL}"