From 18eb704b816d24cafb2ec15cbe8cc44881bbf6ce Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 4 Aug 2025 20:34:47 +0300
Subject: [PATCH] feat(react/widgets): set up form group

---
 apps/client/src/widgets/dialogs/add_link.tsx    |  7 +++----
 .../src/widgets/dialogs/branch_prefix.tsx       |  7 +++----
 apps/client/src/widgets/react/FormGroup.tsx     | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 apps/client/src/widgets/react/FormGroup.tsx

diff --git a/apps/client/src/widgets/dialogs/add_link.tsx b/apps/client/src/widgets/dialogs/add_link.tsx
index bca86460a..538c16683 100644
--- a/apps/client/src/widgets/dialogs/add_link.tsx
+++ b/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">
diff --git a/apps/client/src/widgets/dialogs/branch_prefix.tsx b/apps/client/src/widgets/dialogs/branch_prefix.tsx
index d16ae339b..e4b7d3e59 100644
--- a/apps/client/src/widgets/dialogs/branch_prefix.tsx
+++ b/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>
     );
 }
diff --git a/apps/client/src/widgets/react/FormGroup.tsx b/apps/client/src/widgets/react/FormGroup.tsx
new file mode 100644
index 000000000..406515331
--- /dev/null
+++ b/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>
+    );
+}
\ No newline at end of file