Release govoplan-templates v0.1.22: bound rendering and improve dialog layout

webui/src/features/templates/TemplatesPage.tsx

@@ -9,13 +9,14 @@ import {
   X
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { DialogSection, ActionToolbar,
+import { FormGrid, ActionToolbar,
   ApiError,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
   ContentSection,
   Dialog,
+  DialogSection,
   DocumentationHelpLink,
   DismissibleAlert,
   FilterBar,
@@ -302,6 +303,14 @@ export default function TemplatesPage({ settings, auth }: Props) {
 
   return (
     <WorkspaceFrame as="main" height="viewport" surface="plain" className="templates-page" label="Template workspace">
+      <WorkspaceActionBar
+        scope="workspace"
+        variant="collection"
+        refreshable
+        reloadAction={{ onReload: () => void reload(selectedId), loading: loading || busy }}
+        contextActions={<strong>Template library</strong>}
+        createAction={<IconButton label="Add template" icon={<Plus size={17} />} variant="primary" disabled={!canWrite} disabledReason={!canWrite ? TEMPLATES_I18N.writeReason : undefined} onClick={() => requestDiscard(() => setCreateOpen(true))} />}
+      />
       <WorkspaceLayout
         variant="split"
         primarySize="compact"
@@ -312,14 +321,6 @@ export default function TemplatesPage({ settings, auth }: Props) {
         contentLabel="Template workspace"
         contentClassName="templates-workspace"
         primary={<>
-          <WorkspaceActionBar
-            scope="collection-pane"
-            variant="collection"
-            refreshable
-            reloadAction={{ onReload: () => void reload(selectedId), loading: loading || busy }}
-            contextActions={<strong>Template library</strong>}
-            createAction={<IconButton label="Add template" icon={<Plus size={17} />} variant="primary" disabled={!canWrite} disabledReason={!canWrite ? TEMPLATES_I18N.writeReason : undefined} onClick={() => requestDiscard(() => setCreateOpen(true))} />}
-          />
           <FilterBar surface="panel"><input value={search} onChange={(event) => setSearch(event.target.value)} placeholder="Search templates" /></FilterBar>
           <SelectionList variant="navigation" label="Templates">
             {visibleItems.map((item) => (
@@ -418,9 +419,11 @@ export default function TemplatesPage({ settings, auth }: Props) {
       </WorkspaceLayout>
 
       <Dialog open={createOpen} title="Add template" onClose={closeCreate} closeDisabled={busy} footer={<><Button onClick={closeCreate} disabled={busy} disabledReason={busy ? TEMPLATES_I18N.busy : undefined}>Cancel</Button><Button variant="primary" disabled={!createName.trim() || busy} disabledReason={busy ? TEMPLATES_I18N.busy : !createName.trim() ? TEMPLATES_I18N.incomplete : undefined} onClick={() => void create()}>Create</Button></>}>
-        <DialogSection className="templates-dialog-form">
-          <FormField label="Name" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input autoFocus value={createName} onChange={(event) => setCreateName(event.target.value)} /></FormField>
-          <FormField label="Type" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><select value={createType} onChange={(event) => setCreateType(event.target.value as TemplateType)}>{TEMPLATE_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></FormField>
+        <DialogSection>
+          <FormGrid columns={2} collapseAt="standard">
+            <FormField label="Name" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><input autoFocus value={createName} onChange={(event) => setCreateName(event.target.value)} /></FormField>
+            <FormField label="Type" documentation={TEMPLATE_FIELDS_DOCUMENTATION}><select value={createType} onChange={(event) => setCreateType(event.target.value as TemplateType)}>{TEMPLATE_TYPES.map((item) => <option key={item.value} value={item.value}>{item.label}</option>)}</select></FormField>
+          </FormGrid>
         </DialogSection>
       </Dialog>
       <ConfirmDialog open={publishOpen} title="i18n:govoplan-templates.publish_title" message="i18n:govoplan-templates.publish_message" confirmLabel="Publish" busy={busy} onCancel={() => setPublishOpen(false)} onConfirm={() => void publish()} />