Skip to content

Commit 02680ae

Browse files
michelroegl-brunnermichelroegl-brunner
committed
Move status banner down in ScriptDetailModal
- Repositioned status banner from after action buttons to within content section - Creates better visual separation and spacing as shown in design - Maintains all functionality while improving layout hierarchy
1 parent 63459a6 commit 02680ae

File tree

1 file changed

+81
-81
lines changed

1 file changed

+81
-81
lines changed

‎src/app/_components/ScriptDetailModal.tsx‎

Lines changed: 81 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -359,91 +359,91 @@ export function ScriptDetailModal({
359359
})()}
360360
</div>
361361

362-
{/* Load Message */}
363-
{loadMessage && (
364-
<div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
365-
{loadMessage}
366-
</div>
367-
)}
368-
369-
{/* Script Files Status */}
370-
{(scriptFilesLoading || comparisonLoading) && (
371-
<div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
372-
<div className="flex items-center space-x-2">
373-
<div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
374-
<span>Loading script status...</span>
362+
{/* Content */}
363+
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
364+
{/* Script Files Status */}
365+
{(scriptFilesLoading || comparisonLoading) && (
366+
<div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
367+
<div className="flex items-center space-x-2">
368+
<div className="h-4 w-4 animate-spin rounded-full border-b-2 border-blue-600"></div>
369+
<span>Loading script status...</span>
370+
</div>
375371
</div>
376-
</div>
377-
)}
378-
379-
{scriptFilesData?.success &&
380-
!scriptFilesLoading &&
381-
(() => {
382-
// Determine script type from the first install method
383-
const firstScript = script?.install_methods?.[0]?.script;
384-
let scriptType = "Script";
385-
if (firstScript?.startsWith("ct/")) {
386-
scriptType = "CT Script";
387-
} else if (firstScript?.startsWith("tools/")) {
388-
scriptType = "Tools Script";
389-
} else if (firstScript?.startsWith("vm/")) {
390-
scriptType = "VM Script";
391-
} else if (firstScript?.startsWith("vw/")) {
392-
scriptType = "VW Script";
393-
}
394-
395-
return (
396-
<div className="mx-4 sm:mx-6 mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
397-
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
398-
<div className="flex items-center space-x-2">
399-
<div
400-
className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
401-
></div>
402-
<span>
403-
{scriptType}:{" "}
404-
{scriptFilesData.ctExists ? "Available" : "Not loaded"}
405-
</span>
406-
</div>
407-
<div className="flex items-center space-x-2">
408-
<div
409-
className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
410-
></div>
411-
<span>
412-
Install Script:{" "}
413-
{scriptFilesData.installExists
414-
? "Available"
415-
: "Not loaded"}
416-
</span>
372+
)}
373+
374+
{scriptFilesData?.success &&
375+
!scriptFilesLoading &&
376+
(() => {
377+
// Determine script type from the first install method
378+
const firstScript = script?.install_methods?.[0]?.script;
379+
let scriptType = "Script";
380+
if (firstScript?.startsWith("ct/")) {
381+
scriptType = "CT Script";
382+
} else if (firstScript?.startsWith("tools/")) {
383+
scriptType = "Tools Script";
384+
} else if (firstScript?.startsWith("vm/")) {
385+
scriptType = "VM Script";
386+
} else if (firstScript?.startsWith("vw/")) {
387+
scriptType = "VW Script";
388+
}
389+
390+
return (
391+
<div className="mb-4 rounded-lg bg-muted p-3 text-sm text-muted-foreground">
392+
<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
393+
<div className="flex items-center space-x-2">
394+
<div
395+
className={`h-2 w-2 rounded-full ${scriptFilesData.ctExists ? "bg-green-500" : "bg-muted"}`}
396+
></div>
397+
<span>
398+
{scriptType}:{" "}
399+
{scriptFilesData.ctExists ? "Available" : "Not loaded"}
400+
</span>
401+
</div>
402+
<div className="flex items-center space-x-2">
403+
<div
404+
className={`h-2 w-2 rounded-full ${scriptFilesData.installExists ? "bg-green-500" : "bg-muted"}`}
405+
></div>
406+
<span>
407+
Install Script:{" "}
408+
{scriptFilesData.installExists
409+
? "Available"
410+
: "Not loaded"}
411+
</span>
412+
</div>
413+
{scriptFilesData?.success &&
414+
(scriptFilesData.ctExists ||
415+
scriptFilesData.installExists) &&
416+
comparisonData?.success &&
417+
!comparisonLoading && (
418+
<div className="flex items-center space-x-2">
419+
<div
420+
className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
421+
></div>
422+
<span>
423+
Status:{" "}
424+
{comparisonData.hasDifferences
425+
? "Update available"
426+
: "Up to date"}
427+
</span>
428+
</div>
429+
)}
417430
</div>
418-
{scriptFilesData?.success &&
419-
(scriptFilesData.ctExists ||
420-
scriptFilesData.installExists) &&
421-
comparisonData?.success &&
422-
!comparisonLoading && (
423-
<div className="flex items-center space-x-2">
424-
<div
425-
className={`h-2 w-2 rounded-full ${comparisonData.hasDifferences ? "bg-orange-500" : "bg-green-500"}`}
426-
></div>
427-
<span>
428-
Status:{" "}
429-
{comparisonData.hasDifferences
430-
? "Update available"
431-
: "Up to date"}
432-
</span>
433-
</div>
434-
)}
431+
{scriptFilesData.files.length > 0 && (
432+
<div className="mt-2 text-xs text-muted-foreground break-words">
433+
Files: {scriptFilesData.files.join(", ")}
434+
</div>
435+
)}
435436
</div>
436-
{scriptFilesData.files.length > 0 && (
437-
<div className="mt-2 text-xs text-muted-foreground break-words">
438-
Files: {scriptFilesData.files.join(", ")}
439-
</div>
440-
)}
441-
</div>
442-
);
443-
})()}
437+
);
438+
})()}
439+
440+
{/* Load Message */}
441+
{loadMessage && (
442+
<div className="mb-4 rounded-lg bg-primary/10 p-3 text-sm text-primary">
443+
{loadMessage}
444+
</div>
445+
)}
444446

445-
{/* Content */}
446-
<div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
447447
{/* Description */}
448448
<div>
449449
<h3 className="mb-2 text-base sm:text-lg font-semibold text-foreground">

0 commit comments

Comments
 (0)