feat(frontend): preview tab (#11475)

frontend/src/app/scripts/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Suspense, useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, X } from "lucide-react";
 import { useQueryState } from "nuqs";
 
 import type { Category, Script } from "@/lib/types";
@@ -20,6 +20,11 @@ function ScriptContent() {
   const [item, setItem] = useState<Script>();
   const [latestPage, setLatestPage] = useState(1);
 
+  const closeScript = () => {
+    window.history.pushState({}, document.title, window.location.pathname);
+    setSelectedScript(null);
+  };
+
   useEffect(() => {
     if (selectedScript && links.length > 0) {
       const script = links
@@ -53,7 +58,18 @@ function ScriptContent() {
         <div className="px-4 w-full sm:max-w-[calc(100%-350px-16px)]">
           {selectedScript && item
             ? (
-                <ScriptItem item={item} setSelectedScript={setSelectedScript} />
+                <div className="flex w-full flex-col">
+                  <div className="mb-3 flex items-center justify-between">
+                    <h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
+                    <button
+                      onClick={closeScript}
+                      className="rounded-full p-2 text-muted-foreground hover:bg-card/50 transition-colors"
+                    >
+                      <X className="h-5 w-5" />
+                    </button>
+                  </div>
+                  <ScriptItem item={item} />
+                </div>
               )
             : (
                 <div className="flex w-full flex-col gap-5">