feat(react/widgets): set up form group

apps/client/src/widgets/dialogs/add_link.tsx

@@ -12,6 +12,7 @@ import { useEffect } from "react";
 import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
 import type { default as TextTypeWidget } from "../type_widgets/editable_text.js";
 import { logError } from "../../services/ws";
+import FormGroup from "../react/FormGroup.js";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
@@ -100,9 +101,7 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
             onShown={onShown}
             onHidden={() => setSuggestion(null)}
         >
-            <div className="form-group">
-                <label htmlFor="add-link-note-autocomplete">{t("add_link.note")}</label>
-
+            <FormGroup label={t("add_link.note")}>
                 <NoteAutocomplete
                     inputRef={autocompleteRef}
                     text={text}
@@ -112,7 +111,7 @@ function AddLinkDialogComponent({ text: _text, textTypeWidget }: AddLinkDialogPr
                         allowCreatingNotes: true
                     }}
                 />
-            </div>
+            </FormGroup>
 
             {!hasSelection && (
                 <div className="add-link-title-settings">

apps/client/src/widgets/dialogs/branch_prefix.tsx

@@ -10,6 +10,7 @@ import froca from "../../services/froca.js";
 import tree from "../../services/tree.js";
 import FBranch from "../../entities/fbranch.js";
 import Button from "../react/Button.jsx";
+import FormGroup from "../react/FormGroup.js";
 
 interface BranchPrefixDialogProps {
     branch?: FBranch;
@@ -38,15 +39,13 @@ function BranchPrefixDialogComponent({ branch }: BranchPrefixDialogProps) {
             helpPageId="TBwsyfadTA18"
             footer={<Button text={t("branch_prefix.save")} />}
         >
-            <div class="form-group">
-                <label for="branch-prefix-input">{t("branch_prefix.prefix")}</label> &nbsp;
-
+            <FormGroup label={t("branch_prefix.prefix")}>
                 <div class="input-group">
                     <input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
                         onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />
                     <div class="branch-prefix-note-title input-group-text"> - {branch && branch.getNoteFromCache().title}</div>
                 </div>
-            </div>
+            </FormGroup>
         </Modal>
     );
 }

apps/client/src/widgets/react/FormGroup.tsx

@@ -0,0 +1,17 @@
+import { ComponentChildren } from "preact";
+
+interface FormGroupProps {
+    label: string;
+    children: ComponentChildren;
+}
+
+export default function FormGroup({ label, children }: FormGroupProps) {
+    return (
+        <div className="form-group">
+            <label style={{ width: "100%" }}>
+                {label}
+                {children}
+            </label>
+        </div>
+    );
+}