feat(frontend): preview tab (#11475)

frontend/src/app/scripts/_components/script-item.tsx

@@ -4,7 +4,8 @@ import { X, HelpCircle } from "lucide-react";
 import { Suspense } from "react";
 import Image from "next/image";
 
-import type { AppVersion, Script } from "@/lib/types";
+import type { AppVersion } from "@/lib/types";
+import type { Script } from "@/app/json-editor/_schemas/schemas";
 
 import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -26,7 +27,6 @@ import Alerts from "./script-items/alerts";
 
 type ScriptItemProps = {
   item: Script;
-  setSelectedScript: (script: string | null) => void;
 };
 
 function ScriptHeader({ item }: { item: Script }) {
@@ -135,25 +135,10 @@ function VersionInfo({ item }: { item: Script }) {
   );
 }
 
-export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
-  const closeScript = () => {
-    window.history.pushState({}, document.title, window.location.pathname);
-    setSelectedScript(null);
-  };
-
+export function ScriptItem({ item }: ScriptItemProps) {
   return (
     <div className="w-full mx-auto">
       <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>
-
         <div className="rounded-xl border border-border bg-accent/30 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" />}>
@@ -162,7 +147,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
 
             {item.disable && item.disable_description && (
               <DisableDescription item={item} />
-            ) }
+            )}
 
             {!item.disable && (
               <>

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">