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/ScriptItems/Buttons.tsx

@@ -1,8 +1,13 @@
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { basePath } from "@/config/siteConfig";
 import { Script } from "@/lib/types";
-import { BookOpenText, Code, Globe, RefreshCcw } from "lucide-react";
-import Link from "next/link";
+import { BookOpenText, Code, Globe, LinkIcon, RefreshCcw } from "lucide-react";
 
 const generateInstallSourceUrl = (slug: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
@@ -12,7 +17,6 @@ const generateInstallSourceUrl = (slug: string) => {
 const generateSourceUrl = (slug: string, type: string) => {
   const baseUrl = `https://raw.githubusercontent.com/community-scripts/${basePath}/main`;
   return type === "vm" ? `${baseUrl}/vm/${slug}.sh` : `${baseUrl}/misc/${slug}.sh`;
-  return `${baseUrl}/misc/${slug}.sh`;
 };
 
 const generateUpdateUrl = (slug: string) => {
@@ -20,62 +24,66 @@ const generateUpdateUrl = (slug: string) => {
   return `${baseUrl}/ct/${slug}.sh`;
 };
 
-interface ButtonLinkProps {
+interface LinkItem {
   href: string;
   icon: React.ReactNode;
   text: string;
 }
 
-const ButtonLink = ({ href, icon, text }: ButtonLinkProps) => (
-  <Button variant="secondary" asChild>
-    <Link target="_blank" href={href}>
-      <span className="flex items-center gap-2">
-        {icon}
-        {text}
-      </span>
-    </Link>
-  </Button>
-);
-
 export default function Buttons({ item }: { item: Script }) {
   const isCtOrDefault = ["ct"].includes(item.type);
   const installSourceUrl = isCtOrDefault ? generateInstallSourceUrl(item.slug) : null;
   const updateSourceUrl = isCtOrDefault ? generateUpdateUrl(item.slug) : null;
   const sourceUrl = !isCtOrDefault ? generateSourceUrl(item.slug, item.type) : null;
 
-  const buttons = [
+  const links = [
     item.website && {
       href: item.website,
-      icon: <Globe className="h-4 w-4" />, 
+      icon: <Globe className="h-4 w-4" />,
       text: "Website",
     },
     item.documentation && {
       href: item.documentation,
-      icon: <BookOpenText className="h-4 w-4" />, 
+      icon: <BookOpenText className="h-4 w-4" />,
       text: "Documentation",
     },
     installSourceUrl && {
       href: installSourceUrl,
-      icon: <Code className="h-4 w-4" />, 
-      text: "Install-Source",
+      icon: <Code className="h-4 w-4" />,
+      text: "Install Source",
     },
     updateSourceUrl && {
       href: updateSourceUrl,
-      icon: <RefreshCcw className="h-4 w-4" />, 
-      text: "Update-Source",
+      icon: <RefreshCcw className="h-4 w-4" />,
+      text: "Update Source",
     },
     sourceUrl && {
       href: sourceUrl,
-      icon: <Code className="h-4 w-4" />, 
+      icon: <Code className="h-4 w-4" />,
       text: "Source Code",
     },
-  ].filter(Boolean) as ButtonLinkProps[];
+  ].filter(Boolean) as LinkItem[];
+
+  if (links.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap justify-end gap-2">
-      {buttons.map((props, index) => (
-        <ButtonLink key={index} {...props} />
-      ))}
-    </div>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <LinkIcon className="size-4" />
+          Links
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {links.map((link, index) => (
+          <DropdownMenuItem key={index} asChild>
+            <a href={link.href} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2">
+              <span className="text-muted-foreground size-4">{link.icon}</span>
+              <span>{link.text}</span>
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }