feat: add ScriptLibraryPage shell

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-13 02:40:38 -04:00
parent 361ffabe57
commit a5d7d56199

View File

@@ -0,0 +1,50 @@
import { useState, useEffect } from 'react'
import { useScriptGeneratorStore } from '@/store/scriptGeneratorStore'
import { ScriptFilterBar } from '@/components/scripts/ScriptFilterBar'
import { ScriptTemplateList } from '@/components/scripts/ScriptTemplateList'
import { ScriptGeneratorPanel } from '@/components/scripts/ScriptGeneratorPanel'
export default function ScriptLibraryPage() {
// inputValue is owned here so ScriptFilterBar and ScriptTemplateList
// can coordinate clear-search without direct coupling.
const [inputValue, setInputValue] = useState('')
const loadCategories = useScriptGeneratorStore(s => s.loadCategories)
const loadTemplates = useScriptGeneratorStore(s => s.loadTemplates)
const setSearch = useScriptGeneratorStore(s => s.setSearch)
useEffect(() => {
// loadCategories must complete before loadTemplates can resolve slugs
loadCategories().then(() => loadTemplates())
}, [loadCategories, loadTemplates])
const onClearSearch = () => {
setInputValue('')
setSearch('')
}
return (
<div className="flex flex-col gap-4 p-6 h-full">
{/* Page header */}
<div>
<h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
<p className="text-sm text-muted-foreground mt-1">
Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
</p>
</div>
{/* Filter bar */}
<ScriptFilterBar inputValue={inputValue} setInputValue={setInputValue} />
{/* Two-column layout */}
<div className="grid grid-cols-[320px_1fr] gap-4 flex-1 min-h-0">
{/* Template list — scrollable */}
<div className="glass-card-static overflow-y-auto">
<ScriptTemplateList inputValue={inputValue} onClearSearch={onClearSearch} />
</div>
{/* Generator panel */}
<ScriptGeneratorPanel />
</div>
</div>
)
}