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