feat: add ScriptLibraryPage shell
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
50
frontend/src/pages/ScriptLibraryPage.tsx
Normal file
50
frontend/src/pages/ScriptLibraryPage.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user