Skip to content

Commit 0e95c12

Browse files
michelroegl-brunnermichelroegl-brunner
authored
Merge pull request #162 from community-scripts/fix/ui
UI Fixes: Modal Layout and Filter Message Positioning
2 parents 63459a6 + fa2cb45 commit 0e95c12

File tree

2 files changed

+105
-104
lines changed

2 files changed

+105
-104
lines changed

‎src/app/_components/FilterBar.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,6 @@ export function FilterBar({
9393
</div>
9494
)}
9595

96-
{/* Filter Persistence Status */}
97-
{!isLoadingFilters && saveFiltersEnabled && (
98-
<div className="mb-4 flex items-center justify-center py-1">
99-
<div className="flex items-center space-x-2 text-xs text-green-600">
100-
<svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
101-
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
102-
</svg>
103-
<span>Filters are being saved automatically</span>
104-
</div>
105-
</div>
106-
)}
10796

10897
{/* Filter Header */}
10998
{!isLoadingFilters && (
@@ -391,18 +380,30 @@ export function FilterBar({
391380

392381
{/* Filter Summary and Clear All */}
393382
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
394-
<div className="text-sm text-muted-foreground">
395-
{filteredCount === totalScripts ? (
396-
<span>Showing all {totalScripts} scripts</span>
397-
) : (
398-
<span>
399-
{filteredCount} of {totalScripts} scripts{" "}
400-
{hasActiveFilters && (
401-
<span className="font-medium text-blue-600">
402-
(filtered)
403-
</span>
404-
)}
405-
</span>
383+
<div className="flex items-center gap-4">
384+
<div className="text-sm text-muted-foreground">
385+
{filteredCount === totalScripts ? (
386+
<span>Showing all {totalScripts} scripts</span>
387+
) : (
388+
<span>
389+
{filteredCount} of {totalScripts} scripts{" "}
390+
{hasActiveFilters && (
391+
<span className="font-medium text-blue-600">
392+
(filtered)
393+
</span>
394+
)}
395+
</span>
396+
)}
397+
</div>
398+
399+
{/* Filter Persistence Status */}
400+
{!isLoadingFilters && saveFiltersEnabled && (
401+
<div className="flex items-center space-x-1 text-xs text-green-600">
402+
<svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
403+
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
404+
</svg>
405+
<span>Filters are being saved automatically</span>
406+
</div>
406407
)}
407408
</div>
408409

‎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)