Adopt shared WebUI layout primitives

webui/src/features/files/FileConnectorSettingsPanel.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Edit3, Plus, RefreshCw, Save, ShieldCheck, Trash2, UserRoundKey } from "lucide-react";
-import {
+import { FormGrid,
   Button,
   Card,
   ConnectionTree,
@@ -963,7 +963,7 @@ export default function FileConnectorSettingsPanel({
 
         <LoadingFrame loading={loading} label="i18n:govoplan-files.loading_connector_policy.f12ab285">
           <>
-            <div className="form-grid two">
+            <FormGrid columns={2} collapseAt="standard" className="">
               <FormField label="i18n:govoplan-files.allowed_connection_ids.0df854c8">
                 <ReferenceMultiSelect
                   values={lines(policyDraft.allowedConnectors)}
@@ -1042,7 +1042,7 @@ export default function FileConnectorSettingsPanel({
               <FormField label="i18n:govoplan-files.denied_endpoint_urls.1d8d4369">
                 <textarea value={policyDraft.deniedUrls} disabled={saving || !canWrite} onChange={(event) => patchPolicyDraft({ deniedUrls: event.target.value })} rows={3} placeholder={"http://*\n*://legacy.example.test/*"} />
               </FormField>
-            </div>
+            </FormGrid>
             {policyConflicts.length ? (
               <DismissibleAlert
                 tone="warning"
@@ -1075,11 +1075,11 @@ export default function FileConnectorSettingsPanel({
         </LoadingFrame>
       </Card>
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
           open={Boolean(credentialDraft)}
           title={editingCredentialId ? "i18n:govoplan-files.edit_file_credential.bc49d44f" : "i18n:govoplan-files.new_file_credential.4c061082"}
           onClose={closeCredentialDialog}
-          className="admin-dialog admin-dialog-wide file-connector-dialog adaptive-config-dialog"
+          className="file-connector-dialog adaptive-config-dialog"
           bodyClassName="adaptive-config-dialog-body"
           closeDisabled={saving}
           footer={credentialDraft ?
@@ -1098,7 +1098,7 @@ export default function FileConnectorSettingsPanel({
                 <h3>Credential</h3>
                 <p>Choose where this credential can be used and how it signs in.</p>
               </header>
-              <div className="form-grid two">
+              <FormGrid columns={2} collapseAt="standard" className="">
                 <FormField label="i18n:govoplan-files.credential_id.9432a6e1">
                   <input className={!editingCredentialId && !credentialDraft.id.trim() ? "field-input-missing" : undefined} aria-invalid={!editingCredentialId && !credentialDraft.id.trim() || undefined} value={credentialDraft.id} disabled={Boolean(editingCredentialId) || saving} onChange={(event) => patchCredentialDraft({ id: event.target.value })} placeholder={`${scopeType}-webdav-credentials`} />
                 </FormField>
@@ -1137,7 +1137,7 @@ export default function FileConnectorSettingsPanel({
                     <option value="secret_ref">i18n:govoplan-files.secret_reference.04ed2221</option>
                   </select>
                 </FormField>
-              </div>
+              </FormGrid>
               <div className="file-connector-settings-section">
                 <ToggleSwitch label="i18n:govoplan-files.enabled.df174a3f" checked={credentialDraft.enabled} disabled={saving} onChange={(enabled) => patchCredentialDraft({ enabled })} />
                 {editingCredentialId && <ToggleSwitch label="i18n:govoplan-files.clear_saved_password.7442260d" checked={credentialDraft.clearPassword} disabled={saving} onChange={(clearPassword) => patchCredentialDraft({ clearPassword })} />}
@@ -1176,11 +1176,11 @@ export default function FileConnectorSettingsPanel({
                     onChange={patchCredentialValues}
                     disabled={saving}
                     showPassword={false} />
-                  <div className="form-grid two">
+                  <FormGrid columns={2} collapseAt="standard" className="">
                     <FormField label="i18n:govoplan-files.secret_reference.04ed2221">
                       <input value={credentialDraft.secretRef} disabled={saving} onChange={(event) => patchCredentialDraft({ secretRef: event.target.value })} />
                     </FormField>
-                  </div>
+                  </FormGrid>
                 </>
                 }
                 {credentialDraft.credentialMode === "token" &&
@@ -1212,7 +1212,7 @@ export default function FileConnectorSettingsPanel({
                 <h3>Policy</h3>
                 <p>Limit where lower levels may use this credential.</p>
               </header>
-              <div className="form-grid two">
+              <FormGrid columns={2} collapseAt="standard" className="">
                 <FormField label="i18n:govoplan-files.policy.bb9cf141" documentation={CONNECTOR_DOCUMENTATION}>
                   <select value={credentialDraft.policyMode} disabled={saving} onChange={(event) => patchCredentialDraft({ policyMode: event.target.value as PolicyMode })}>
                     <option value="allow-provider">i18n:govoplan-files.can_use_this_credential.f4a41971</option>
@@ -1228,7 +1228,7 @@ export default function FileConnectorSettingsPanel({
                 <FormField label="i18n:govoplan-files.denied_paths.d25e4315">
                   <textarea value={credentialDraft.deniedPaths} disabled={saving} onChange={(event) => patchCredentialDraft({ deniedPaths: event.target.value })} rows={3} placeholder={"private\narchive/closed"} />
                 </FormField>
-              </div>
+              </FormGrid>
               <AdvancedOptionsPanel title="Credential metadata JSON" summary="For diagnostics or provider-specific compatibility flags. Normal setup should not need this.">
                 <FormField label="i18n:govoplan-files.metadata_json.b0e4c283" documentation={CONNECTOR_RECOVERY_DOCUMENTATION}>
                   <textarea value={credentialDraft.metadataJson} disabled={saving} onChange={(event) => patchCredentialDraft({ metadataJson: event.target.value })} rows={5} spellCheck={false} />
@@ -1239,11 +1239,11 @@ export default function FileConnectorSettingsPanel({
           }
       </Dialog>
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
           open={Boolean(draft)}
           title={editingProfileId ? "i18n:govoplan-files.edit_file_connection.78698154" : "i18n:govoplan-files.new_file_connection.2ec6eb56"}
           onClose={closeProfileDialog}
-          className="admin-dialog admin-dialog-wide file-connector-dialog adaptive-config-dialog"
+          className="file-connector-dialog adaptive-config-dialog"
           bodyClassName="adaptive-config-dialog-body"
           closeDisabled={saving}
           footer={draft ?
@@ -1262,7 +1262,7 @@ export default function FileConnectorSettingsPanel({
                 <h3>Connection</h3>
                 <p>Name the file server connection and choose the provider.</p>
               </header>
-              <div className="form-grid two">
+              <FormGrid columns={2} collapseAt="standard" className="">
                 <FormField label="i18n:govoplan-files.profile_id.25961d68">
                   <input className={!editingProfileId && !draft.id.trim() ? "field-input-missing" : undefined} aria-invalid={!editingProfileId && !draft.id.trim() || undefined} value={draft.id} disabled={Boolean(editingProfileId) || saving} onChange={(event) => patchDraft({ id: event.target.value })} placeholder={`${scopeType}-webdav`} />
                 </FormField>
@@ -1287,7 +1287,7 @@ export default function FileConnectorSettingsPanel({
                 <div className="field-block file-connector-settings-toggle-field">
                   <ToggleSwitch label="i18n:govoplan-files.enabled.df174a3f" checked={draft.enabled} disabled={saving} onChange={(enabled) => patchDraft({ enabled })} />
                 </div>
-              </div>
+              </FormGrid>
             </section>
 
             <section className="adaptive-config-section">
@@ -1295,7 +1295,7 @@ export default function FileConnectorSettingsPanel({
                 <h3>Location and credentials</h3>
                 <p>Only fields relevant for the selected provider and credential mode are shown.</p>
               </header>
-              <div className="form-grid two">
+              <FormGrid columns={2} collapseAt="standard" className="">
                 <FormField label="i18n:govoplan-files.endpoint_url.65aaaa45" documentation={CONNECTOR_DOCUMENTATION}>
                   <input value={draft.endpointUrl} disabled={saving} onChange={(event) => patchDraft({ endpointUrl: event.target.value })} placeholder={ENDPOINT_PLACEHOLDERS[draft.provider]} />
                 </FormField>
@@ -1317,7 +1317,7 @@ export default function FileConnectorSettingsPanel({
                     {profileCredentialOptions.map((credential) => <option key={credential.id} value={credential.id}>{credential.label}</option>)}
                   </select>
                 </FormField>
-              </div>
+              </FormGrid>
               <div className="button-row compact-actions">
                 <Button type="button" onClick={() => patchDraft({ endpointUrl: ENDPOINT_PLACEHOLDERS[draft.provider] })} disabled={saving} disabledReason={saving ? "Wait for the current connector change to finish." : undefined}>Use provider example</Button>
                 {canDiscoverProfileEndpoint &&
@@ -1332,7 +1332,7 @@ export default function FileConnectorSettingsPanel({
               </DismissibleAlert>
               }
               <AdvancedOptionsPanel title="Protocol and compatibility options" summary="Change these only when the provider or network requires an override.">
-                <div className="form-grid two">
+                <FormGrid columns={2} collapseAt="standard" className="">
                   <FormField label="i18n:govoplan-files.browse_protocol.d1f27c90">
                     <select value={draft.browseProtocol} disabled={saving} onChange={(event) => patchDraft({ browseProtocol: event.target.value })}>
                       <option value="">i18n:govoplan-files.native_default.ba32f7b6</option>
@@ -1352,7 +1352,7 @@ export default function FileConnectorSettingsPanel({
                       </div>
                     </>
                     }
-                </div>
+                </FormGrid>
               </AdvancedOptionsPanel>
             </section>
 
@@ -1366,7 +1366,7 @@ export default function FileConnectorSettingsPanel({
                 <ToggleSwitch label="i18n:govoplan-files.import.d6fbc9d2" checked={draft.canImport} disabled={saving} onChange={(canImport) => patchDraft({ canImport })} />
                 <ToggleSwitch label="i18n:govoplan-files.sync.905f6309" checked={draft.canSync} disabled={saving} onChange={(canSync) => patchDraft({ canSync })} />
               </div>
-              <div className="form-grid two">
+              <FormGrid columns={2} collapseAt="standard" className="">
                 <FormField label="i18n:govoplan-files.policy.bb9cf141" documentation={CONNECTOR_DOCUMENTATION}>
                   <select value={draft.policyMode} disabled={saving} onChange={(event) => patchDraft({ policyMode: event.target.value as PolicyMode })}>
                     <option value="allow-provider">i18n:govoplan-files.can_use_this_connection.5091a74c</option>
@@ -1382,7 +1382,7 @@ export default function FileConnectorSettingsPanel({
                 <FormField label="i18n:govoplan-files.denied_paths.d25e4315">
                   <textarea value={draft.deniedPaths} disabled={saving} onChange={(event) => patchDraft({ deniedPaths: event.target.value })} rows={3} placeholder={"private\narchive/closed"} />
                 </FormField>
-              </div>
+              </FormGrid>
               <AdvancedOptionsPanel title="Connection metadata JSON" summary="For diagnostics or provider-specific compatibility flags. Normal setup should not need this.">
                 <FormField label="i18n:govoplan-files.metadata_json.b0e4c283" documentation={CONNECTOR_RECOVERY_DOCUMENTATION}>
                   <textarea value={draft.metadataJson} disabled={saving} onChange={(event) => patchDraft({ metadataJson: event.target.value })} rows={5} spellCheck={false} />

webui/src/features/files/FilesPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState, type DragEvent as ReactDragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent } from "react";
 import { ArrowUp, ChevronRight, Copy, Download, File, Folder, Home, KeyRound, Link2, ListFilter, MoveRight, Plus, RefreshCw, Search, Share2, Trash2, UploadCloud } from "lucide-react";
-import {
+import { FormGrid, ActionToolbar,
   Button,
   ConfirmDialog,
   DocumentationHelpLink,
@@ -2089,7 +2089,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
   const syncBlocker = workingBlocker || (!activeSpace ? "Select a file space first." : "") || (!canUpload ? "File upload permission is required to import synchronized content." : "") || (activeSpaceIsConnector && connectorSpaceSelectedItem?.kind !== "file" ? "Select one remote file to synchronize." : "");
 
   const toolbar =
-  <div className="file-manager-toolbar" aria-label="i18n:govoplan-files.file_actions.9e1b94c5">
+  <ActionToolbar className="file-manager-toolbar" aria-label="i18n:govoplan-files.file_actions.9e1b94c5">
       <Button variant="primary" onClick={() => openDialog("upload", toolbarTarget())} disabled={Boolean(uploadBlocker)} disabledReason={uploadBlocker}><UploadCloud size={16} aria-hidden="true" /> i18n:govoplan-files.upload.8bdf057f</Button>
       <Button
       onClick={() => activeSpaceIsConnector ? void syncConnectorSpaceSelection() : void openConnectorSyncDialog(toolbarTarget())}
@@ -2115,7 +2115,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
         </Button>
     }
       <DocumentationHelpLink reference={FILES_WORKFLOW_DOCUMENTATION} />
-    </div>;
+    </ActionToolbar>;
 
 
   const uploadBusyLabel = uploadPhase === "unpacking" ? "i18n:govoplan-files.unpacking_zip_archive.698095f4" : "i18n:govoplan-files.uploading_files.6536791d";
@@ -2209,11 +2209,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
     return (
       <div className="connector-space-panel">
         <div className="connector-browser connector-space-browser">
-          <div className="connector-browser-toolbar">
+          <ActionToolbar className="connector-browser-toolbar">
             <Button onClick={browseConnectorSpaceParent} disabled={connectorSpaceParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
             <span className="connector-browser-path" title={connectorSpaceLocationLabel}>{connectorSpaceLocationLabel}</span>
             <Button onClick={() => void loadConnectorSpaceContents(activeSpace)} disabled={busy || connectorSpaceLoading}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
-          </div>
+          </ActionToolbar>
           {connectorSpaceError && <p className="field-error connector-browser-error">{connectorSpaceError}</p>}
           <div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_space_files.dbb0ab24">
             {connectorSpaceLoading &&
@@ -2595,7 +2595,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
               </FormField>
           }
 
-            <div className="archive-selection-toolbar">
+            <ActionToolbar className="archive-selection-toolbar">
               <label>
                 <input
                 type="checkbox"
@@ -2606,7 +2606,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
                 <span>Select all files</span>
               </label>
               <span>{selectedArchivePaths.size} of {archivePreview.file_count} selected</span>
-            </div>
+            </ActionToolbar>
 
             <div className="archive-entry-list" role="list" aria-label="Archive contents">
               {archivePreview.entries.map((entry) => {
@@ -2696,11 +2696,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
           </div>
 
           <div className="connector-browser">
-            <div className="connector-browser-toolbar">
+            <ActionToolbar className="connector-browser-toolbar">
               <Button onClick={browseConnectorParent} disabled={connectorParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
               <span className="connector-browser-path" title={connectorLocationLabel}>{connectorLocationLabel}</span>
               <Button onClick={() => connectorProfileId && void browseConnector(connectorProfileId, connectorPath, connectorLibraryId)} disabled={busy || connectorLoading || !connectorProfileId}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
-            </div>
+            </ActionToolbar>
             {connectorError && <p className="field-error connector-browser-error">{connectorError}</p>}
             <div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_files.8f351f5d">
               {connectorLoading &&
@@ -2776,11 +2776,11 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
           </div>
 
           <div className="connector-browser">
-            <div className="connector-browser-toolbar">
+            <ActionToolbar className="connector-browser-toolbar">
               <Button onClick={browseConnectorParent} disabled={connectorParentDisabled}><ArrowUp size={15} aria-hidden="true" /> i18n:govoplan-files.up.2038bdec</Button>
               <span className="connector-browser-path" title={connectorLocationLabel}>{connectorLocationLabel}</span>
               <Button onClick={() => connectorProfileId && void browseConnector(connectorProfileId, connectorPath, connectorLibraryId)} disabled={busy || connectorLoading || !connectorProfileId}><RefreshCw size={15} aria-hidden="true" /> i18n:govoplan-files.refresh.56e3badc</Button>
-            </div>
+            </ActionToolbar>
             {connectorError && <p className="field-error connector-browser-error">{connectorError}</p>}
             <div className="connector-browser-list" role="list" aria-label="i18n:govoplan-files.connector_folders.960cbb03">
               {connectorLoading &&
@@ -2854,7 +2854,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
       {dialog === "transfer" && transferDialogState &&
       <FileDialog title={`${transferMode === "copy" ? "i18n:govoplan-files.copy.af74f7c5" : "i18n:govoplan-files.move.76cdb950"} selection`} onClose={closeDialog}>
           <p className="muted">i18n:govoplan-files.choose_a_destination_space_and_folder_folders_ar.45158643</p>
-          <div className="form-grid two">
+          <FormGrid columns={2} collapseAt="standard" className="">
             <FormField label="i18n:govoplan-files.destination_space.92b63970" help="i18n:govoplan-files.select_the_space_that_will_receive_the_selected_.0a8bea8f">
               <select value={transferDialogState.targetSpaceId} onChange={(event) => setTransferDialogState((current) => current ? { ...current, targetSpaceId: event.target.value, targetFolder: "" } : current)}>
                 {spaces.filter((space) => !isConnectorSpace(space)).map((space) => <option key={space.id} value={space.id}>{space.label}</option>)}
@@ -2870,7 +2870,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
               onSelect={(folderPath) => setTransferDialogState((current) => current ? { ...current, targetFolder: folderPath } : current)} />
             
             </div>
-          </div>
+          </FormGrid>
           <div className="button-row compact-actions align-end">
             <Button onClick={closeDialog} disabled={busy}>i18n:govoplan-files.cancel.77dfd213</Button>
             <Button variant="primary" onClick={() => void handleTransferDialogSubmit()} disabled={busy}>{transferMode === "copy" ? "i18n:govoplan-files.copy.af74f7c5" : "i18n:govoplan-files.move.76cdb950"}</Button>
@@ -2893,7 +2893,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
       {dialog === "rename" &&
       <FileDialog title="i18n:govoplan-files.bulk_rename_selected_items.5e79d694" onClose={closeDialog}>
           <p className="muted">i18n:govoplan-files.bulk_rename_changes_managed_display_paths_only_i.8cf34a6b</p>
-          <div className="form-grid two">
+          <FormGrid columns={2} collapseAt="standard" className="">
             <FormField label="i18n:govoplan-files.mode.a7b93d21" help="i18n:govoplan-files.choose_how_the_selected_names_should_be_changed.0231854f">
               <select value={renameMode} onChange={(event) => setRenameMode(event.target.value as RenameMode)}>
                 <option value="prefix">i18n:govoplan-files.add_prefix.672452bc</option>
@@ -2904,7 +2904,7 @@ export default function FilesPage({ settings, auth }: {settings: ApiSettings;aut
             {renameMode === "prefix" && <FormField label="i18n:govoplan-files.prefix.90eceb01"><input value={renamePrefix} onChange={(event) => setRenamePrefix(event.target.value)} /></FormField>}
             {renameMode === "suffix" && <FormField label="i18n:govoplan-files.suffix.885db975"><input value={renameSuffix} onChange={(event) => setRenameSuffix(event.target.value)} /></FormField>}
             {renameMode === "replace" && <><FormField label="i18n:govoplan-files.find.df251b06"><input value={renameFind} onChange={(event) => setRenameFind(event.target.value)} /></FormField><FormField label="i18n:govoplan-files.replacement.c385e347"><input value={renameReplacement} onChange={(event) => setRenameReplacement(event.target.value)} /></FormField></>}
-          </div>
+          </FormGrid>
           {selectedFolderPaths.size > 0 &&
         <ToggleSwitch label="i18n:govoplan-files.apply_recursively_to_folder_contents.c7076984" checked={renameRecursive} onChange={setRenameRecursive} disabled={busy} />
         }

webui/src/features/files/components/FileShareDialog.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Trash2 } from "lucide-react";
-import {
+import { DialogSection,
   Button,
   ConfirmDialog,
   DataGrid,
@@ -193,7 +193,7 @@ export default function FileShareDialog({
   return (
     <>
       <FileDialog title={`Manage shares - ${file.filename}`} onClose={() => !busy && onClose()}>
-        <div className="file-share-dialog-content">
+        <DialogSection className="file-share-dialog-content">
           {error ? (
             <DismissibleAlert tone="danger" resetKey={error}>
               {error}
@@ -268,7 +268,7 @@ export default function FileShareDialog({
           <div className="button-row compact-actions align-end">
             <Button onClick={onClose} disabled={busy}>Close</Button>
           </div>
-        </div>
+        </DialogSection>
       </FileDialog>
       <ConfirmDialog
         open={Boolean(revokeTarget)}

webui/src/features/files/components/ManagedFileChooser.tsx

@@ -10,7 +10,7 @@ import {
   type FileSpace,
   type ManagedFile } from
 "../../../api/files";
-import {
+import { ActionToolbar,
   Button,
   ConfirmDialog,
   Dialog,
@@ -407,7 +407,7 @@ export default function ManagedFileChooser({
           </aside>
 
           <section className={`managed-file-chooser-browser ${mode === "folder" ? "folder-mode" : "attachment-mode"}`}>
-            <div className="managed-file-chooser-toolbar">
+            <ActionToolbar className="managed-file-chooser-toolbar">
               <div className="managed-file-breadcrumb" aria-label="i18n:govoplan-files.current_folder.5aeab2f0">
                 <button type="button" onClick={() => openFolder(effectiveRoot)} disabled={loading}>
                   <Home size={14} aria-hidden="true" /> {selectedSpace?.label || "i18n:govoplan-files.files.6ce6c512"}
@@ -419,7 +419,7 @@ export default function ManagedFileChooser({
                   </span>
               )}
               </div>
-            </div>
+            </ActionToolbar>
 
             {mode === "attachment" &&
           <ManagedPatternEditor