Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure. (#3567)

* Refactor ScriptItem and Buttons components to enhance layout and integrate dropdown for links. Update InterFaces component for improved styling and structure.

* Add React Query integration and enhance component structure

- Introduced `@tanstack/react-query` for data fetching and state management.
- Added `QueryProvider` component to wrap the application with QueryClient.
- Refactored `ScriptItem` to utilize `useVersions` hook for fetching versions.
- Created `ResourceDisplay` and `VersionBadge` components for better resource representation.
- Improved layout and styling across various components, including `Alerts`, `Buttons`, and `DefaultPassword`.
- Updated `layout.tsx` to include the new `QueryProvider` for global state management.

* Remove bun.lock file to streamline dependency management and prevent potential conflicts.

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

- Removed `@vercel/analytics` from dependencies.
- Upgraded `vitest` and related packages to version `3.1.1`.
- Updated various packages to their latest versions for improved performance and compatibility.
- Adjusted Node.js engine requirements to support newer versions.

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

- Upgraded various Radix UI components to their latest versions for improved functionality and performance.
- Updated `chart.js`, `class-variance-authority`, `cmdk`, `framer-motion`, `fuse.js`, `nuqs`, `pocketbase`, and other packages to their latest versions.
- Enhanced TypeScript and ESLint packages for better type checking and linting capabilities.
- Updated Tailwind CSS and related plugins for improved styling and utility classes.
- Adjusted Node.js engine requirements in several packages to support newer versions.

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

@@ -0,0 +1,42 @@
+import { CPUIcon, HDDIcon, RAMIcon } from "@/components/icons/resource-icons";
+import { getDisplayValueFromRAM } from "@/lib/utils/resource-utils";
+
+interface ResourceDisplayProps {
+  title: string;
+  cpu: number | null;
+  ram: number | null;
+  hdd: number | null;
+}
+
+interface IconTextProps {
+  icon: React.ReactNode;
+  label: string;
+}
+
+function IconText({ icon, label }: IconTextProps) {
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-md bg-accent/20 px-2 py-1 text-sm">
+      {icon}
+      <span className="text-foreground/90">{label}</span>
+    </span>
+  );
+}
+
+export function ResourceDisplay({ title, cpu, ram, hdd }: ResourceDisplayProps) {
+  const hasCPU = typeof cpu === "number" && cpu > 0;
+  const hasRAM = typeof ram === "number" && ram > 0;
+  const hasHDD = typeof hdd === "number" && hdd > 0;
+
+  if (!hasCPU && !hasRAM && !hasHDD) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="text-sm font-medium text-muted-foreground">{title}</span>
+      <div className="flex flex-wrap gap-2">
+        {hasCPU && <IconText icon={<CPUIcon />} label={`${cpu} vCPU`} />}
+        {hasRAM && <IconText icon={<RAMIcon />} label={getDisplayValueFromRAM(ram!)} />}
+        {hasHDD && <IconText icon={<HDDIcon />} label={`${hdd} GB`} />}
+      </div>
+    </div>
+  );
+}