From 44a2441f7a8896fe3b4a7f12bc4a70c6a3747ffd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Wed, 14 May 2025 08:16:56 +0200
Subject: [PATCH 01/10] 2536 - add a new Note component

---
 client/.eslintrc                 |  2 ++
 client/src/components/Note.tsx   | 24 ++++++++++++++++++++++++
 client/src/styles/components.css |  2 ++
 client/tailwind.config.js        |  4 ++++
 4 files changed, 32 insertions(+)
 create mode 100644 client/src/components/Note.tsx

diff --git a/client/.eslintrc b/client/.eslintrc
index d9e5e72243..ff8c523e0d 100644
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -92,6 +92,8 @@
                     "bg-surface-neutral-secondary-hover",
                     "bg-surface-neutral-tertiary",
                     "bg-surface-popover-canvas",
+                    "bg-surface-warning-primary",
+                    "bg-surface-warning-secondary",
                     "border-accent",
                     "border-content-neutral-tertiary",
                     "border-input",
diff --git a/client/src/components/Note.tsx b/client/src/components/Note.tsx
new file mode 100644
index 0000000000..01017ff472
--- /dev/null
+++ b/client/src/components/Note.tsx
@@ -0,0 +1,24 @@
+import {XIcon} from 'lucide-react';
+import {ReactNode} from 'react';
+import {twMerge} from 'tailwind-merge';
+
+import {Button} from './ui/button';
+
+export const Note = ({content, icon}: {content: string; icon?: ReactNode}) => {
+    return (
+        <div
+            className={twMerge(
+                'relative flex items-center rounded-md bg-surface-warning-secondary p-4',
+                icon && 'gap-2'
+            )}
+        >
+            {icon && icon}
+
+            <p className="text-sm font-medium">{content}</p>
+
+            <Button className="absolute right-1 top-1 hover:bg-surface-warning-primary" size="icon" variant="ghost">
+                <XIcon className="size-4 text-content-neutral-secondary" />
+            </Button>
+        </div>
+    );
+};
diff --git a/client/src/styles/components.css b/client/src/styles/components.css
index c460ed4c71..f95ad9599c 100644
--- a/client/src/styles/components.css
+++ b/client/src/styles/components.css
@@ -53,6 +53,8 @@
         --surface-neutral-secondary-hover: 214 32% 91%;
         --surface-neutral-tertiary: 214 32% 91%;
         --surface-popover-canvas: 210 40% 98%;
+        --surface-warning-primary: 48, 96%, 53%;
+        --surface-warning-secondary: 55, 92%, 95%;
         --content-brand-primary: 217 91% 40%;
         --content-destructive: 0 74% 42%;
         --content-neutral-primary: 229 84% 5%;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 6bf9f394eb..a2ae49479f 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -134,6 +134,10 @@ module.exports = {
                     popover: {
                         canvas: 'hsl(var(--surface-popover-canvas))',
                     },
+                    warning: {
+                        primary: 'hsl(var(--surface-warning-primary))',
+                        secondary: 'hsl(var(--surface-warning-secondary))',
+                    },
                 },
             },
             height: {

From 2fe08d3755dc3f74f765e5deb95fb47550014101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Wed, 14 May 2025 08:17:18 +0200
Subject: [PATCH 02/10] 2536 - JSON Schema Builder - move small components
 around

---
 .../components/SchemaAddButton.tsx            | 22 ------------
 .../components/SchemaBox.tsx                  |  7 ----
 .../components/SchemaCheckbox.tsx             | 27 --------------
 .../components/SchemaCloseButton.tsx          | 19 ----------
 .../components/SchemaCollapseButton.tsx       | 20 -----------
 .../components/SchemaControls.tsx             | 35 ++++++++++++++++---
 .../components/SchemaCreator.tsx              | 10 ++++--
 .../components/SchemaMenu.tsx                 |  2 +-
 .../components/SchemaMenuButton.tsx           | 19 ----------
 .../components/SchemaMenuItem.tsx             | 25 ++++++++++++-
 .../PropertyJsonSchemaBuilderSheet.tsx        | 13 +++++--
 11 files changed, 73 insertions(+), 126 deletions(-)
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaAddButton.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaBox.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaCheckbox.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaCloseButton.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaCollapseButton.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenuButton.tsx

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaAddButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaAddButton.tsx
deleted file mode 100755
index b78a6af28d..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaAddButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import {PlusIcon} from 'lucide-react';
-
-import SchemaRoundedButton from './SchemaRoundedButton';
-
-interface AddButtonProps {
-    onClick?: () => void;
-    title?: string;
-}
-
-const SchemaAddButton = ({onClick = () => {}, title}: AddButtonProps) => {
-    return (
-        <SchemaRoundedButton
-            className="text-primary hover:bg-accent hover:text-accent-foreground"
-            onClick={onClick}
-            title={title}
-        >
-            <PlusIcon className="h-4" />
-        </SchemaRoundedButton>
-    );
-};
-
-export default SchemaAddButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaBox.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaBox.tsx
deleted file mode 100755
index 1e8b124e87..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaBox.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, {PropsWithChildren} from 'react';
-
-const SchemaBox = ({children}: PropsWithChildren) => {
-    return <div className="w-full rounded-bl border-b border-l border-blue-400 py-2 pl-2">{children}</div>;
-};
-
-export default SchemaBox;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCheckbox.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCheckbox.tsx
deleted file mode 100755
index 08cd9eb932..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCheckbox.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {Label} from '@/components/ui/label';
-import {Toggle} from '@/components/ui/toggle';
-import React from 'react';
-
-const handleChange = (handler: (value: boolean) => void) => {
-    return (event: React.FormEvent<HTMLElement>): void => {
-        handler((event.target as HTMLInputElement).checked);
-    };
-};
-
-interface SchemaCheckboxProps {
-    value: boolean;
-    onChange: (v: boolean) => void;
-    label?: string;
-}
-
-const SchemaCheckbox = ({label, onChange, value}: SchemaCheckboxProps) => {
-    return (
-        <div className="flex flex-row">
-            <Label>{label}</Label>
-
-            <Toggle className="ml-2" defaultChecked={value} onChange={handleChange(onChange)} />
-        </div>
-    );
-};
-
-export default SchemaCheckbox;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCloseButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCloseButton.tsx
deleted file mode 100755
index 4f3338ca28..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCloseButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {XIcon} from 'lucide-react';
-import React from 'react';
-
-import SchemaRoundedButton from './SchemaRoundedButton';
-
-interface CloseButtonProps {
-    onClick?: () => void;
-    title?: string;
-}
-
-const SchemaCloseButton = ({onClick = () => {}, title}: CloseButtonProps) => {
-    return (
-        <SchemaRoundedButton className="bg-white" onClick={onClick} title={title}>
-            <XIcon className="h-4" />
-        </SchemaRoundedButton>
-    );
-};
-
-export default SchemaCloseButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCollapseButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCollapseButton.tsx
deleted file mode 100755
index d6dfaeb6fe..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCollapseButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {ChevronRightIcon} from '@radix-ui/react-icons';
-import {ChevronDownIcon} from 'lucide-react';
-
-import SchemaRoundedButton from './SchemaRoundedButton';
-
-interface CollapseButtonProps {
-    onClick?: () => void;
-    isCollapsed?: boolean;
-    title?: string;
-}
-
-const SchemaCollapseButton = ({isCollapsed = false, onClick = () => {}, title}: CollapseButtonProps) => {
-    return (
-        <SchemaRoundedButton className="hover:bg-accent hover:text-accent-foreground" onClick={onClick} title={title}>
-            {isCollapsed ? <ChevronRightIcon className="h-4" /> : <ChevronDownIcon className="h-4" />}
-        </SchemaRoundedButton>
-    );
-};
-
-export default SchemaCollapseButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index 67e6f4eb67..abd742f70e 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -1,16 +1,15 @@
-import SchemaAddButton from '@/components/JsonSchemaBuilder/components/SchemaAddButton';
-import SchemaCollapseButton from '@/components/JsonSchemaBuilder/components/SchemaCollapseButton';
 import SchemaDeleteButton from '@/components/JsonSchemaBuilder/components/SchemaDeleteButton';
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
 import SchemaMenu from '@/components/JsonSchemaBuilder/components/SchemaMenu';
-import SchemaMenuButton from '@/components/JsonSchemaBuilder/components/SchemaMenuButton';
 import SchemaMenuModal from '@/components/JsonSchemaBuilder/components/SchemaMenuModal';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
-import React, {useState} from 'react';
+import {ChevronDownIcon, ChevronRightIcon, EllipsisVerticalIcon, PlusIcon} from 'lucide-react';
+import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
 
 import * as helpers from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
+import SchemaRoundedButton from './SchemaRoundedButton';
 
 interface SchemaControlsProps {
     schema: SchemaRecordType;
@@ -110,3 +109,31 @@ export const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayContro
         </div>
     );
 };
+
+const SchemaMenuButton = ({onClick = () => {}, title}: {onClick?: () => void; title?: string}) => (
+    <SchemaRoundedButton className="bg-white text-gray-800 hover:bg-gray-200" onClick={onClick} title={title}>
+        <EllipsisVerticalIcon className="h-4" />
+    </SchemaRoundedButton>
+);
+
+const SchemaAddButton = ({onClick = () => {}, title}: {onClick?: () => void; title?: string}) => (
+    <SchemaRoundedButton
+        className="text-primary hover:bg-accent hover:text-accent-foreground"
+        onClick={onClick}
+        title={title}
+    >
+        <PlusIcon className="h-4" />
+    </SchemaRoundedButton>
+);
+
+interface CollapseButtonProps {
+    onClick?: () => void;
+    isCollapsed?: boolean;
+    title?: string;
+}
+
+const SchemaCollapseButton = ({isCollapsed = false, onClick = () => {}, title}: CollapseButtonProps) => (
+    <SchemaRoundedButton className="hover:bg-accent hover:text-accent-foreground" onClick={onClick} title={title}>
+        {isCollapsed ? <ChevronRightIcon className="h-4" /> : <ChevronDownIcon className="h-4" />}
+    </SchemaRoundedButton>
+);
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index cd3b49483f..7db68f1943 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -1,6 +1,6 @@
-import SchemaBox from '@/components/JsonSchemaBuilder/components/SchemaBox';
 import {AsteriskIcon} from 'lucide-react';
-import React, {useState} from 'react';
+import {PropsWithChildren, useState} from 'react';
+import {twMerge} from 'tailwind-merge';
 
 import {
     addSchemaProperty,
@@ -56,7 +56,7 @@ const SchemaCreator = ({
                 />
             </div>
 
-            <div className={`${isCollapsed ? 'hidden' : 'block'}`}>
+            <div className={twMerge(isCollapsed ? 'hidden' : 'block')}>
                 {isSchemaObject(schema) && hasSchemaProperties(schema) && (
                     <SchemaBox>
                         <SchemaObjectProperties
@@ -145,3 +145,7 @@ const SchemaObjectProperties = ({onChange, onChangeKey, onDelete, schema}: Schem
 };
 
 export default SchemaCreator;
+
+const SchemaBox = ({children}: PropsWithChildren) => (
+    <div className="w-full rounded-bl border-b border-l border-blue-400 py-2 pl-2">{children}</div>
+);
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
index 64402f2e00..634226c462 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import {useMemo} from 'react';
 import {useTranslation} from 'react-i18next';
 import Select from 'react-select';
 
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuButton.tsx
deleted file mode 100755
index ea931cd3fe..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuButton.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {EllipsisVerticalIcon} from 'lucide-react';
-import React from 'react';
-
-import SchemaRoundedButton from './SchemaRoundedButton';
-
-interface MenuButtonProps {
-    onClick?: () => void;
-    title?: string;
-}
-
-const SchemaMenuButton = ({onClick = () => {}, title}: MenuButtonProps) => {
-    return (
-        <SchemaRoundedButton className="bg-white text-gray-800 hover:bg-gray-200" onClick={onClick} title={title}>
-            <EllipsisVerticalIcon className="h-4" />
-        </SchemaRoundedButton>
-    );
-};
-
-export default SchemaMenuButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
index 8031037bb2..8615b66b16 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
@@ -1,4 +1,3 @@
-import SchemaCheckbox from '@/components/JsonSchemaBuilder/components/SchemaCheckbox';
 import SchemaDeleteButton from '@/components/JsonSchemaBuilder/components/SchemaDeleteButton';
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
 import {Label} from '@/components/ui/label';
@@ -24,6 +23,8 @@ import {SchemaMenuOptionType, SchemaRecordType} from '../utils/types';
 
 import '../../CreatableSelect/CreatableSelect.css';
 
+import {Toggle} from '@/components/ui/toggle';
+
 interface ItemProps {
     onDelete: () => void;
     children: React.ReactNode;
@@ -182,3 +183,25 @@ export const RequiredMultiSelectItem: React.FunctionComponent<ItemTypeProps> = (
         </Item>
     );
 };
+
+interface SchemaCheckboxProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    label?: string;
+}
+
+const SchemaCheckbox = ({label, onChange, value}: SchemaCheckboxProps) => {
+    const handleChange =
+        (handler: (value: boolean) => void) =>
+        (event: React.FormEvent<HTMLElement>): void => {
+            handler((event.target as HTMLInputElement).checked);
+        };
+
+    return (
+        <div className="flex flex-row">
+            <Label>{label}</Label>
+
+            <Toggle className="ml-2" defaultChecked={value} onChange={handleChange(onChange)} />
+        </div>
+    );
+};
diff --git a/client/src/pages/platform/workflow-editor/components/properties/components/property-json-schema-builder/PropertyJsonSchemaBuilderSheet.tsx b/client/src/pages/platform/workflow-editor/components/properties/components/property-json-schema-builder/PropertyJsonSchemaBuilderSheet.tsx
index 196287eadf..8f15f420a1 100755
--- a/client/src/pages/platform/workflow-editor/components/properties/components/property-json-schema-builder/PropertyJsonSchemaBuilderSheet.tsx
+++ b/client/src/pages/platform/workflow-editor/components/properties/components/property-json-schema-builder/PropertyJsonSchemaBuilderSheet.tsx
@@ -1,9 +1,11 @@
 import JsonSchemaBuilder from '@/components/JsonSchemaBuilder/JsonSchemaBuilder';
 import {SchemaRecordType} from '@/components/JsonSchemaBuilder/utils/types';
+import {Note} from '@/components/Note';
 import {Sheet, SheetCloseButton, SheetContent, SheetDescription, SheetHeader, SheetTitle} from '@/components/ui/sheet';
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs';
 import {SPACE} from '@/shared/constants';
 import Editor from '@monaco-editor/react';
+import {MessageCircleQuestionIcon} from 'lucide-react';
 import React from 'react';
 
 interface PropertyJsonSchemaBuilderSheetProps {
@@ -24,7 +26,7 @@ const PropertyJsonSchemaBuilderSheet = ({locale, onChange, onClose, schema}: Pro
                 <Tabs className="flex size-full flex-col" defaultValue="designer">
                     <SheetHeader className="flex flex-row items-center justify-between space-y-0 p-3">
                         <div className="flex flex-col">
-                            <SheetTitle>JSON Schema Builder</SheetTitle>
+                            <SheetTitle>Response template</SheetTitle>
 
                             <SheetDescription>Define desired response format for the output</SheetDescription>
                         </div>
@@ -37,14 +39,19 @@ const PropertyJsonSchemaBuilderSheet = ({locale, onChange, onClose, schema}: Pro
                             <TabsList>
                                 <TabsTrigger value="designer">Designer</TabsTrigger>
 
-                                <TabsTrigger value="editor">Editor</TabsTrigger>
+                                <TabsTrigger value="editor">Code Editor</TabsTrigger>
                             </TabsList>
 
                             <SheetCloseButton />
                         </div>
                     </SheetHeader>
 
-                    <div className="flex-1 overflow-y-auto px-4">
+                    <div className="flex-1 space-y-4 overflow-y-auto px-4">
+                        <Note
+                            content="Set up how you want OpenAI to format its replies — like a template for the response."
+                            icon={<MessageCircleQuestionIcon />}
+                        />
+
                         <TabsContent value="designer">
                             <JsonSchemaBuilder locale={locale} onChange={onChange} schema={schema} />
                         </TabsContent>

From 78d44ec8abff0c6dbbbf393b5ae54630b206e6c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Wed, 14 May 2025 14:40:30 +0200
Subject: [PATCH 03/10] 2536 - JSON Schema Builder - SF

---
 .../components/SchemaControls.tsx             | 136 ++++++++---------
 .../components/SchemaDeleteButton.tsx         |  18 ---
 .../components/SchemaInput.tsx                |   1 +
 .../components/SchemaMenu.tsx                 |  14 +-
 .../components/SchemaMenuDialog.tsx           |  35 +++++
 .../components/SchemaMenuItem.tsx             | 137 ++++++++----------
 .../components/SchemaMenuList.tsx             |  16 +-
 .../components/SchemaMenuModal.tsx            |  37 -----
 .../components/SchemaRoundedButton.tsx        |  26 ----
 .../components/SchemaTypesSelect.tsx          |  59 ++++----
 .../JsonSchemaBuilder/utils/constants.ts      |  12 +-
 11 files changed, 218 insertions(+), 273 deletions(-)
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaDeleteButton.tsx
 create mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenuModal.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaRoundedButton.tsx

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index abd742f70e..9cfcda8b06 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -1,15 +1,13 @@
-import SchemaDeleteButton from '@/components/JsonSchemaBuilder/components/SchemaDeleteButton';
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
 import SchemaMenu from '@/components/JsonSchemaBuilder/components/SchemaMenu';
-import SchemaMenuModal from '@/components/JsonSchemaBuilder/components/SchemaMenuModal';
+import SchemaMenuDialog from '@/components/JsonSchemaBuilder/components/SchemaMenuDialog';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
-import {ChevronDownIcon, ChevronRightIcon, EllipsisVerticalIcon, PlusIcon} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {ChevronDownIcon, ChevronRightIcon, CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
 import {useState} from 'react';
-import {useTranslation} from 'react-i18next';
 
 import * as helpers from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
-import SchemaRoundedButton from './SchemaRoundedButton';
 
 interface SchemaControlsProps {
     schema: SchemaRecordType;
@@ -34,44 +32,71 @@ export const SchemaControls = ({
 }: SchemaControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
-    const {t} = useTranslation();
-
     return (
-        <div className="flex flex-row items-end">
-            <div className="mr-2 grid grid-flow-col gap-2">
+        <div className="flex w-full flex-row items-end">
+            <div className="grid grid-flow-col gap-2">
                 <SchemaInput
-                    label={t('title')}
+                    label="Title"
                     onChange={(title) => onChange(helpers.setSchemaTitle(title, schema))}
-                    placeholder={t('title')}
+                    placeholder="Title"
                     value={helpers.getSchemaTitle(schema)}
                 />
 
                 <SchemaTypesSelect
-                    onChange={(t) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(t, schema))}
+                    onChange={(translation) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(translation, schema))}
                     type={helpers.getSchemaType(schema)}
                 />
 
-                {typeof onChangeKey === 'function' ? (
-                    <SchemaInput label={t('key')} onChange={onChangeKey} placeholder={t('key')} value={schemakey} />
-                ) : null}
+                {typeof onChangeKey === 'function' && (
+                    <SchemaInput label="Key" onChange={onChangeKey} placeholder="Key" value={schemakey} />
+                )}
             </div>
 
-            <div className="mb-0.5 grid grid-flow-col items-center gap-1">
-                {typeof onCollapse === 'function' ? (
-                    <SchemaCollapseButton isCollapsed={isCollapsed} onClick={onCollapse} title={t('collapse')} />
-                ) : null}
-
-                <SchemaMenuButton onClick={() => setIsMenuOpen((o) => !o)} title={t('extraOptions')} />
-
-                {typeof onDelete === 'function' ? <SchemaDeleteButton onClick={onDelete} title={t('delete')} /> : null}
-
-                {typeof onAdd === 'function' ? <SchemaAddButton onClick={onAdd} title={t('add')} /> : null}
+            <div className="ml-auto grid grid-flow-col items-center gap-1">
+                {typeof onCollapse === 'function' && (
+                    <Button
+                        className="hover:bg-accent hover:text-accent-foreground"
+                        onClick={onCollapse}
+                        size="icon"
+                        title="Collapse"
+                        variant="ghost"
+                    >
+                        {isCollapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
+                    </Button>
+                )}
+
+                <Button
+                    onClick={() => setIsMenuOpen((open) => !open)}
+                    size="icon"
+                    title="Extra options"
+                    variant="ghost"
+                >
+                    <CircleEllipsisIcon />
+                </Button>
+
+                {typeof onDelete === 'function' && (
+                    <Button
+                        className="text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
+                        onClick={onDelete}
+                        size="icon"
+                        title="Delete"
+                        variant="ghost"
+                    >
+                        <TrashIcon />
+                    </Button>
+                )}
+
+                {typeof onAdd === 'function' && (
+                    <Button onClick={onAdd} size="icon" title="Add" variant="ghost">
+                        <PlusIcon />
+                    </Button>
+                )}
             </div>
 
             {isMenuOpen && (
-                <SchemaMenuModal onClose={() => setIsMenuOpen(false)} title={t('extraFields')}>
+                <SchemaMenuDialog onClose={() => setIsMenuOpen(false)} title="Extra fields">
                     <SchemaMenu onChange={onChange} schema={schema} />
-                </SchemaMenuModal>
+                </SchemaMenuDialog>
             )}
         </div>
     );
@@ -86,54 +111,35 @@ interface SchemaArrayControlsProps {
 export const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
-    const {t} = useTranslation();
-
     return (
         <div className="flex items-end">
             <SchemaTypesSelect
-                onChange={(t) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(t, schema))}
+                onChange={(value) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(value, schema))}
                 type={helpers.getSchemaType(schema)}
             />
 
             <div className="mb-0.5 ml-2 grid grid-flow-col gap-1">
-                <SchemaMenuButton onClick={() => setIsMenuOpen((o) => !o)} title={t('extraOptions')} />
-
-                {typeof onAdd === 'function' ? <SchemaAddButton onClick={onAdd} title={t('add')} /> : null}
+                <Button
+                    onClick={() => setIsMenuOpen((open) => !open)}
+                    size="icon"
+                    title="Extra options"
+                    variant="ghost"
+                >
+                    <CircleEllipsisIcon />
+                </Button>
+
+                {typeof onAdd === 'function' && (
+                    <Button onClick={onAdd} size="icon" title="Add" variant="ghost">
+                        <PlusIcon />
+                    </Button>
+                )}
             </div>
 
-            {isMenuOpen ? (
-                <SchemaMenuModal onClose={() => setIsMenuOpen(false)} title={t('extraFields')}>
+            {isMenuOpen && (
+                <SchemaMenuDialog onClose={() => setIsMenuOpen(false)} title="Extra fields">
                     <SchemaMenu onChange={onChange} schema={schema} />
-                </SchemaMenuModal>
-            ) : null}
+                </SchemaMenuDialog>
+            )}
         </div>
     );
 };
-
-const SchemaMenuButton = ({onClick = () => {}, title}: {onClick?: () => void; title?: string}) => (
-    <SchemaRoundedButton className="bg-white text-gray-800 hover:bg-gray-200" onClick={onClick} title={title}>
-        <EllipsisVerticalIcon className="h-4" />
-    </SchemaRoundedButton>
-);
-
-const SchemaAddButton = ({onClick = () => {}, title}: {onClick?: () => void; title?: string}) => (
-    <SchemaRoundedButton
-        className="text-primary hover:bg-accent hover:text-accent-foreground"
-        onClick={onClick}
-        title={title}
-    >
-        <PlusIcon className="h-4" />
-    </SchemaRoundedButton>
-);
-
-interface CollapseButtonProps {
-    onClick?: () => void;
-    isCollapsed?: boolean;
-    title?: string;
-}
-
-const SchemaCollapseButton = ({isCollapsed = false, onClick = () => {}, title}: CollapseButtonProps) => (
-    <SchemaRoundedButton className="hover:bg-accent hover:text-accent-foreground" onClick={onClick} title={title}>
-        {isCollapsed ? <ChevronRightIcon className="h-4" /> : <ChevronDownIcon className="h-4" />}
-    </SchemaRoundedButton>
-);
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaDeleteButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaDeleteButton.tsx
deleted file mode 100755
index f3c47afab1..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaDeleteButton.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {TrashIcon} from 'lucide-react';
-
-import SchemaRoundedButton from './SchemaRoundedButton';
-
-interface DeleteButtonProps {
-    onClick?: () => void;
-    title?: string;
-}
-
-const SchemaDeleteButton = ({onClick = () => {}, title}: DeleteButtonProps) => {
-    return (
-        <SchemaRoundedButton className="text-destructive hover:bg-accent" onClick={onClick} title={title}>
-            <TrashIcon className="h-4" />
-        </SchemaRoundedButton>
-    );
-};
-
-export default SchemaDeleteButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
index 7b70e19b5d..dfdd59f095 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
@@ -38,6 +38,7 @@ const SchemaInput = ({label, onChange, placeholder, type = 'text', value = ''}:
             <Label>{label}</Label>
 
             <Input
+                className="bg-white"
                 onBlur={onChangeValue}
                 onChange={(e) => setLocalVal(e.target.value)}
                 onKeyPress={handleEnterPress(onChangeValue)}
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
index 634226c462..26e541f594 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
@@ -14,10 +14,13 @@ interface SchemaMenuProps {
 }
 
 const SchemaMenu = ({onChange, schema}: SchemaMenuProps) => {
-    const {t} = useTranslation();
+    const {t: translation} = useTranslation();
 
     const type = helpers.getSchemaType(schema);
-    const allOptions = useMemo(() => helpers.translateLabels(t, helpers.getSchemaMenuOptions(type)), [type, t]);
+    const allOptions = useMemo(
+        () => helpers.translateLabels(translation, helpers.getSchemaMenuOptions(type)),
+        [type, translation]
+    );
 
     const fields = helpers.getAllSchemaKeys(schema);
 
@@ -29,12 +32,11 @@ const SchemaMenu = ({onChange, schema}: SchemaMenuProps) => {
 
             <Select
                 className="w-full min-w-48"
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onChange={(option: any) =>
-                    onChange(helpers.setSchemaField((option as SchemaMenuOptionType).value, undefined, schema))
+                onChange={(option: SchemaMenuOptionType) =>
+                    onChange(helpers.setSchemaField(option.value, undefined, schema))
                 }
                 options={allOptions.filter((option) => !displayFields.some((field) => field.value === option.value))}
-                placeholder={t('addFields')}
+                placeholder={translation('addFields')}
                 value={null}
             />
         </div>
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
new file mode 100755
index 0000000000..dd95cb8bfa
--- /dev/null
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
@@ -0,0 +1,35 @@
+import {
+    Dialog,
+    DialogCloseButton,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import React from 'react';
+
+interface SchemaMenuModalProps {
+    onClose: () => void;
+    children?: React.ReactNode;
+    title?: string | React.ReactNode;
+}
+
+const SchemaMenuDialog = ({children, onClose, title}: SchemaMenuModalProps) => (
+    <Dialog onOpenChange={onClose} open={true}>
+        <DialogContent>
+            <DialogHeader className="flex flex-row items-center justify-between space-y-0">
+                <div className="flex flex-col space-y-1">
+                    <DialogTitle>{title}</DialogTitle>
+
+                    <DialogDescription>Define additional fields</DialogDescription>
+                </div>
+
+                <DialogCloseButton />
+            </DialogHeader>
+
+            {children}
+        </DialogContent>
+    </Dialog>
+);
+
+export default SchemaMenuDialog;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
index 8615b66b16..2ee732a3c4 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
@@ -1,4 +1,3 @@
-import SchemaDeleteButton from '@/components/JsonSchemaBuilder/components/SchemaDeleteButton';
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
 import {Label} from '@/components/ui/label';
 import React, {useMemo} from 'react';
@@ -23,24 +22,27 @@ import {SchemaMenuOptionType, SchemaRecordType} from '../utils/types';
 
 import '../../CreatableSelect/CreatableSelect.css';
 
+import {Button} from '@/components/ui/button';
 import {Toggle} from '@/components/ui/toggle';
+import {TrashIcon} from 'lucide-react';
 
 interface ItemProps {
     onDelete: () => void;
     children: React.ReactNode;
 }
 
-const Item = ({children, onDelete}: ItemProps) => {
-    return (
-        <div className="flex items-end justify-between">
-            {children}
+const Item = ({children, onDelete}: ItemProps) => (
+    <div className="flex items-end justify-between">
+        {children}
 
-            <div className="ml-2">
-                <SchemaDeleteButton onClick={onDelete} />
-            </div>
-        </div>
-    );
-};
+        <Button
+            className="ml-2 text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
+            onClick={onDelete}
+        >
+            <TrashIcon />
+        </Button>
+    </div>
+);
 
 interface ItemTypeProps {
     field: SchemaMenuOptionType;
@@ -48,50 +50,38 @@ interface ItemTypeProps {
     onChange: (schema: SchemaRecordType) => void;
 }
 
-export const TextItem = ({field, onChange, schema}: ItemTypeProps) => {
-    const {t} = useTranslation();
-
-    return (
-        <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
-            <SchemaInput
-                label={t(field.label)}
-                onChange={(text) => onChange(setSchemaField(field.value, text, schema))}
-                value={getSchemaField(schema, field.value) as string}
-            />
-        </Item>
-    );
-};
-
-export const NumberItem = ({field, onChange, schema}: ItemTypeProps) => {
-    const {t} = useTranslation();
-
-    return (
-        <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
-            <SchemaInput
-                label={t(field.label)}
-                onChange={(text) => onChange(setSchemaField(field.value, parseInt(text, 10), schema))}
-                type={'number'}
-                value={getSchemaField(schema, field.value) as string}
-            />
-        </Item>
-    );
-};
-
-export const BoolItem = ({field, onChange, schema}: ItemTypeProps) => {
-    const {t} = useTranslation();
-    return (
-        <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
-            <SchemaCheckbox
-                label={t(field.label)}
-                onChange={(text) => onChange(setSchemaField(field.value, text, schema))}
-                value={getSchemaField(schema, field.value) as boolean}
-            />
-        </Item>
-    );
-};
+export const TextItem = ({field, onChange, schema}: ItemTypeProps) => (
+    <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
+        <SchemaInput
+            label={field.label}
+            onChange={(text) => onChange(setSchemaField(field.value, text, schema))}
+            value={getSchemaField(schema, field.value) as string}
+        />
+    </Item>
+);
+
+export const NumberItem = ({field, onChange, schema}: ItemTypeProps) => (
+    <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
+        <SchemaInput
+            label={field.label}
+            onChange={(text) => onChange(setSchemaField(field.value, parseInt(text, 10), schema))}
+            type={'number'}
+            value={getSchemaField(schema, field.value) as string}
+        />
+    </Item>
+);
+
+export const BoolItem = ({field, onChange, schema}: ItemTypeProps) => (
+    <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
+        <SchemaCheckbox
+            label={field.label}
+            onChange={(text) => onChange(setSchemaField(field.value, text, schema))}
+            value={getSchemaField(schema, field.value) as boolean}
+        />
+    </Item>
+);
 
 export const CreatableMultiSelectItem = ({field, onChange, schema}: ItemTypeProps) => {
-    const {t} = useTranslation();
     const selected = getSchemaField(schema, field.value);
 
     const allOptions = useMemo(() => stringsToOptions(selected as string[]), [selected]);
@@ -99,19 +89,18 @@ export const CreatableMultiSelectItem = ({field, onChange, schema}: ItemTypeProp
     return (
         <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
             <div className="w-full">
-                <Label>{t(field.label)}</Label>
+                <Label>{field.label}</Label>
 
                 <CreatableSelect
                     className="w-full min-w-48"
                     classNamePrefix="react-select"
                     isMulti
-                    noOptionsMessage={() => t('noOptions')}
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange={(options: any) => {
-                        onChange(setSchemaField(field.value, optionsToStrings(options), schema));
-                    }}
+                    noOptionsMessage="No Options"
+                    onChange={(options: {value: string}[]) =>
+                        onChange(setSchemaField(field.value, optionsToStrings(options), schema))
+                    }
                     options={allOptions}
-                    placeholder={t('options')}
+                    placeholder="Options"
                     value={allOptions}
                 />
             </div>
@@ -120,26 +109,29 @@ export const CreatableMultiSelectItem = ({field, onChange, schema}: ItemTypeProp
 };
 
 export const SelectItem = ({field, onChange, schema}: ItemTypeProps) => {
-    const {t} = useTranslation();
-    const options = useMemo(() => translateLabels(t, field.optionList), [field.optionList, t]);
+    const {t: translation} = useTranslation();
+
+    const options = useMemo(() => translateLabels(translation, field.optionList), [field.optionList, translation]);
+
     const option = getSchemaField(schema, field.value);
+
     const selected = React.useMemo(() => findOption(option as string)(options), [options, option]);
 
     return (
         <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
             <div className="w-full">
-                <Label>{t(field.label)}</Label>
+                <Label>{translation(field.label)}</Label>
 
                 <Select
                     className="w-full min-w-48"
                     classNamePrefix="react-select"
-                    noOptionsMessage={() => t('noOptions')}
+                    noOptionsMessage="No options"
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     onChange={(option: any) => {
                         onChange(setSchemaField(field.value, option.value, schema));
                     }}
                     options={options}
-                    placeholder={t('options')}
+                    placeholder="Options"
                     value={selected}
                 />
             </div>
@@ -152,8 +144,6 @@ export const RequiredMultiSelectItem: React.FunctionComponent<ItemTypeProps> = (
     onChange,
     schema,
 }: ItemTypeProps) => {
-    const {t} = useTranslation();
-
     if (!isSchemaObject(schema) || !hasSchemaProperties(schema)) {
         return null;
     }
@@ -164,19 +154,18 @@ export const RequiredMultiSelectItem: React.FunctionComponent<ItemTypeProps> = (
     return (
         <Item onDelete={() => onChange(deleteSchemaField(field.value, schema))}>
             <div className="w-full">
-                <Label>{t(field.label)}</Label>
+                <Label>{field.label}</Label>
 
                 <Select
                     className="w-full min-w-48"
                     classNamePrefix="react-select"
                     isMulti
-                    noOptionsMessage={() => t('noOptions')}
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    onChange={(options: any) => {
-                        onChange(setSchemaField(field.value, optionsToStrings(options), schema));
-                    }}
+                    noOptionsMessage="No option"
+                    onChange={(options: {value: string}[]) =>
+                        onChange(setSchemaField(field.value, optionsToStrings(options), schema))
+                    }
                     options={allOptions}
-                    placeholder={t('options')}
+                    placeholder="Options"
                     value={requiredOptions}
                 />
             </div>
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuList.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuList.tsx
index 2438d333bb..5811ddef87 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuList.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuList.tsx
@@ -26,14 +26,12 @@ interface SchemaMenuListProps {
     schema: SchemaRecordType;
 }
 
-const SchemaMenuList = ({fields, onChange, schema}: SchemaMenuListProps) => {
-    return (
-        <ul className="mb-4 grid gap-2">
-            {fields.map((field) => (
-                <li key={field.value}>{typeToItem[field.type]({field, onChange, schema})}</li>
-            ))}
-        </ul>
-    );
-};
+const SchemaMenuList = ({fields, onChange, schema}: SchemaMenuListProps) => (
+    <ul className="mb-4 grid gap-2">
+        {fields.map((field) => (
+            <li key={field.value}>{typeToItem[field.type]({field, onChange, schema})}</li>
+        ))}
+    </ul>
+);
 
 export default SchemaMenuList;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuModal.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuModal.tsx
deleted file mode 100755
index d5733edf00..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuModal.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-    Dialog,
-    DialogCloseButton,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import React from 'react';
-
-interface SchemaMenuModalProps {
-    onClose: () => void;
-    children?: React.ReactNode;
-    title?: string | React.ReactNode;
-}
-
-const SchemaMenuModal = ({children, onClose, title}: SchemaMenuModalProps) => {
-    return (
-        <Dialog onOpenChange={onClose} open={true}>
-            <DialogContent>
-                <DialogHeader className="flex flex-row items-center justify-between space-y-0">
-                    <div className="flex flex-col space-y-1">
-                        <DialogTitle>{title}</DialogTitle>
-
-                        <DialogDescription>Define additional fields</DialogDescription>
-                    </div>
-
-                    <DialogCloseButton />
-                </DialogHeader>
-
-                {children}
-            </DialogContent>
-        </Dialog>
-    );
-};
-
-export default SchemaMenuModal;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaRoundedButton.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaRoundedButton.tsx
deleted file mode 100755
index c4e0581119..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaRoundedButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {twMerge} from 'tailwind-merge';
-
-interface RoundedButtonProps {
-    onClick?: () => void;
-    className?: string;
-    title?: string;
-    children: React.ReactNode;
-}
-
-const SchemaRoundedButton = ({children, className = '', onClick = () => {}, title}: RoundedButtonProps) => {
-    return (
-        <button
-            className={twMerge(
-                `flex size-8 items-center justify-center rounded-full border text-sm focus:outline-none`,
-                className
-            )}
-            onClick={onClick}
-            title={title}
-        >
-            {children}
-        </button>
-    );
-};
-
-export default SchemaRoundedButton;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
index 27ad7a3a21..5dc9e759fe 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
@@ -1,6 +1,4 @@
 import {Label} from '@/components/ui/label';
-import React from 'react';
-import {useTranslation} from 'react-i18next';
 
 import {SCHEMA_TYPES} from '../utils/constants';
 import * as helpers from '../utils/helpers';
@@ -9,41 +7,38 @@ import {SchemaType} from '../utils/types';
 import '../../CreatableSelect/CreatableSelect.css';
 
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {TYPE_ICONS} from '@/shared/typeIcons';
 
 interface SchemaTypesSelectProps {
     type: SchemaType;
     onChange: (type: SchemaType) => void;
 }
 
-const SchemaTypesSelect = ({onChange, type}: SchemaTypesSelectProps) => {
-    const {t} = useTranslation();
-
-    const options = React.useMemo(() => helpers.translateLabels(t, SCHEMA_TYPES), [t]);
-
-    return (
-        <div>
-            <Label>{t('type')}</Label>
-
-            <Select
-                onValueChange={(option: SchemaType) => {
-                    onChange(option);
-                }}
-                value={helpers.findOption(type)(options)?.value}
-            >
-                <SelectTrigger className="w-full min-w-48">
-                    <SelectValue placeholder={t('type')} />
-                </SelectTrigger>
-
-                <SelectContent>
-                    {options.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                            {option.label}
-                        </SelectItem>
-                    ))}
-                </SelectContent>
-            </Select>
-        </div>
-    );
-};
+const SchemaTypesSelect = ({onChange, type}: SchemaTypesSelectProps) => (
+    <div>
+        <Label>Type</Label>
+
+        <Select
+            onValueChange={(option: SchemaType) => onChange(option)}
+            value={helpers.findOption(type)(SCHEMA_TYPES)?.value}
+        >
+            <SelectTrigger className="flex w-full min-w-48">
+                <SelectValue className="flex" placeholder="Type" />
+            </SelectTrigger>
+
+            <SelectContent>
+                {SCHEMA_TYPES.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                        <div className="flex w-full items-center space-x-2">
+                            <span>{TYPE_ICONS[option.value.toUpperCase() as keyof typeof TYPE_ICONS]}</span>
+
+                            <span>{option.label}</span>
+                        </div>
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    </div>
+);
 
 export default SchemaTypesSelect;
diff --git a/client/src/components/JsonSchemaBuilder/utils/constants.ts b/client/src/components/JsonSchemaBuilder/utils/constants.ts
index 3575c7ba4d..1920b2fa23 100755
--- a/client/src/components/JsonSchemaBuilder/utils/constants.ts
+++ b/client/src/components/JsonSchemaBuilder/utils/constants.ts
@@ -20,27 +20,27 @@ import {
 
 export const SCHEMA_TYPES: SchemaTypeOptionType[] = [
     {
-        label: 'schemaTypes.text',
+        label: 'Text',
         value: 'string',
     },
     {
-        label: 'schemaTypes.integer',
+        label: 'Integer',
         value: 'integer',
     },
     {
-        label: 'schemaTypes.decimal',
+        label: 'Number',
         value: 'number',
     },
     {
-        label: 'schemaTypes.boolean',
+        label: 'Boolean',
         value: 'boolean',
     },
     {
-        label: 'schemaTypes.object',
+        label: 'Object',
         value: 'object',
     },
     {
-        label: 'schemaTypes.array',
+        label: 'Array',
         value: 'array',
     },
 ];

From 337591400ded0b46155784202467e78986516a3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 07:21:11 +0200
Subject: [PATCH 04/10] 2536 - JSON Schema Builder - move collapse trigger

---
 .../components/SchemaControls.tsx             |  25 +--
 .../components/SchemaCreator.tsx              | 173 +++++++++---------
 2 files changed, 93 insertions(+), 105 deletions(-)

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index 9cfcda8b06..f554b6fdc8 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -3,7 +3,7 @@ import SchemaMenu from '@/components/JsonSchemaBuilder/components/SchemaMenu';
 import SchemaMenuDialog from '@/components/JsonSchemaBuilder/components/SchemaMenuDialog';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
 import {Button} from '@/components/ui/button';
-import {ChevronDownIcon, ChevronRightIcon, CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
+import {CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
 import {useState} from 'react';
 
 import * as helpers from '../utils/helpers';
@@ -20,16 +20,7 @@ interface SchemaControlsProps {
     onChange: (schema: SchemaRecordType) => void;
 }
 
-export const SchemaControls = ({
-    isCollapsed,
-    onAdd,
-    onChange,
-    onChangeKey,
-    onCollapse,
-    onDelete,
-    schema,
-    schemakey,
-}: SchemaControlsProps) => {
+export const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemakey}: SchemaControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
     return (
@@ -53,18 +44,6 @@ export const SchemaControls = ({
             </div>
 
             <div className="ml-auto grid grid-flow-col items-center gap-1">
-                {typeof onCollapse === 'function' && (
-                    <Button
-                        className="hover:bg-accent hover:text-accent-foreground"
-                        onClick={onCollapse}
-                        size="icon"
-                        title="Collapse"
-                        variant="ghost"
-                    >
-                        {isCollapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
-                    </Button>
-                )}
-
                 <Button
                     onClick={() => setIsMenuOpen((open) => !open)}
                     size="icon"
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index 7db68f1943..59cf87b23f 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -1,4 +1,5 @@
-import {AsteriskIcon} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {AsteriskIcon, ChevronDownIcon} from 'lucide-react';
 import {PropsWithChildren, useState} from 'react';
 import {twMerge} from 'tailwind-merge';
 
@@ -19,12 +20,12 @@ import {SchemaRecordType} from '../utils/types';
 import {SchemaArrayControls, SchemaControls} from './SchemaControls';
 
 interface SchemaCreatorProps {
-    schema: SchemaRecordType;
-    schemakey?: string;
     isRequired?: boolean;
     onChangeKey?: (key: string) => void;
-    onDelete?: (key: string) => void;
     onChange?: (schema: SchemaRecordType) => void;
+    onDelete?: (key: string) => void;
+    schema: SchemaRecordType;
+    schemakey?: string;
 }
 
 const SchemaCreator = ({
@@ -34,76 +35,31 @@ const SchemaCreator = ({
     onDelete = () => {},
     schema,
     schemakey = '__root__',
-}: SchemaCreatorProps) => {
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+}: SchemaCreatorProps) => (
+    <div className="size-full">
+        <div className="flex items-end">
+            {isRequired && <AsteriskIcon className="mb-3 mr-1 h-4 text-xs" />}
 
-    return (
-        <div className="h-full">
-            <div className="flex items-end">
-                {isRequired && <AsteriskIcon className="mb-3 mr-1 h-4 text-xs" />}
-
-                <SchemaControls
-                    isCollapsed={isCollapsed}
-                    onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
-                    onChange={onChange}
-                    onChangeKey={schemakey !== '__root__' ? onChangeKey : undefined}
-                    onCollapse={
-                        isSchemaObject(schema) || isSchemaArray(schema) ? () => setIsCollapsed((c) => !c) : undefined
-                    }
-                    onDelete={schemakey !== '__root__' ? () => onDelete(schemakey) : undefined}
-                    schema={schema}
-                    schemakey={schemakey}
-                />
-            </div>
-
-            <div className={twMerge(isCollapsed ? 'hidden' : 'block')}>
-                {isSchemaObject(schema) && hasSchemaProperties(schema) && (
-                    <SchemaBox>
-                        <SchemaObjectProperties
-                            onChange={(key, s) => onChange(setSchemaProperty(key, s, schema))}
-                            onChangeKey={(oldkey, newkey) => onChange(renameSchemaProperty(oldkey, newkey, schema))}
-                            onDelete={(key) => onChange(deleteSchemaProperty(key, schema))}
-                            schema={schema}
-                        />
-                    </SchemaBox>
-                )}
-
-                {isSchemaArray(schema) && (
-                    <SchemaBox>
-                        <SchemaArrayItems
-                            onChange={(s) => onChange(setSchemaItems(s, schema))}
-                            schema={getSchemaItems(schema)}
-                        />
-                    </SchemaBox>
-                )}
-            </div>
-        </div>
-    );
-};
-
-interface SchemaArrayItemsProps {
-    schema: SchemaRecordType;
-    onChange: (schema: SchemaRecordType) => void;
-}
-
-const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => {
-    return (
-        <div>
-            <SchemaArrayControls
+            <SchemaControls
                 onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
                 onChange={onChange}
+                onChangeKey={schemakey !== '__root__' ? onChangeKey : undefined}
+                onDelete={schemakey !== '__root__' ? () => onDelete(schemakey) : undefined}
                 schema={schema}
+                schemakey={schemakey}
             />
+        </div>
 
+        <div className="block">
             {isSchemaObject(schema) && hasSchemaProperties(schema) && (
-                <div className="mt-2">
+                <SchemaBox>
                     <SchemaObjectProperties
                         onChange={(key, s) => onChange(setSchemaProperty(key, s, schema))}
                         onChangeKey={(oldkey, newkey) => onChange(renameSchemaProperty(oldkey, newkey, schema))}
                         onDelete={(key) => onChange(deleteSchemaProperty(key, schema))}
                         schema={schema}
                     />
-                </div>
+                </SchemaBox>
             )}
 
             {isSchemaArray(schema) && (
@@ -115,8 +71,43 @@ const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => {
                 </SchemaBox>
             )}
         </div>
-    );
-};
+    </div>
+);
+
+interface SchemaArrayItemsProps {
+    schema: SchemaRecordType;
+    onChange: (schema: SchemaRecordType) => void;
+}
+
+const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => (
+    <div>
+        <SchemaArrayControls
+            onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
+            onChange={onChange}
+            schema={schema}
+        />
+
+        {isSchemaObject(schema) && hasSchemaProperties(schema) && (
+            <div className="mt-2">
+                <SchemaObjectProperties
+                    onChange={(key, s) => onChange(setSchemaProperty(key, s, schema))}
+                    onChangeKey={(oldkey, newkey) => onChange(renameSchemaProperty(oldkey, newkey, schema))}
+                    onDelete={(key) => onChange(deleteSchemaProperty(key, schema))}
+                    schema={schema}
+                />
+            </div>
+        )}
+
+        {isSchemaArray(schema) && (
+            <SchemaBox>
+                <SchemaArrayItems
+                    onChange={(s) => onChange(setSchemaItems(s, schema))}
+                    schema={getSchemaItems(schema)}
+                />
+            </SchemaBox>
+        )}
+    </div>
+);
 
 interface SchemaObjectPropertiesProps {
     schema: SchemaRecordType;
@@ -125,27 +116,45 @@ interface SchemaObjectPropertiesProps {
     onChange: (key: string, schema: SchemaRecordType) => void;
 }
 
-const SchemaObjectProperties = ({onChange, onChangeKey, onDelete, schema}: SchemaObjectPropertiesProps) => {
+const SchemaObjectProperties = ({onChange, onChangeKey, onDelete, schema}: SchemaObjectPropertiesProps) => (
+    <ul className="grid gap-2">
+        {Object.entries(getSchemaProperties(schema)).map(([key, s]) => (
+            <li key={key}>
+                <SchemaCreator
+                    isRequired={isFieldRequired(key, schema)}
+                    onChange={(newSchema) => onChange(key, newSchema)}
+                    onChangeKey={(newKey) => onChangeKey(key, newKey)}
+                    onDelete={onDelete}
+                    schema={s as SchemaRecordType}
+                    schemakey={key}
+                />
+            </li>
+        ))}
+    </ul>
+);
+
+const SchemaBox = ({children}: PropsWithChildren) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
     return (
-        <ul className="grid gap-2">
-            {Object.entries(getSchemaProperties(schema)).map(([key, s]) => (
-                <li key={key}>
-                    <SchemaCreator
-                        isRequired={isFieldRequired(key, schema)}
-                        onChange={(newSchema) => onChange(key, newSchema)}
-                        onChangeKey={(newKey) => onChangeKey(key, newKey)}
-                        onDelete={onDelete}
-                        schema={s as SchemaRecordType}
-                        schemakey={key}
-                    />
-                </li>
-            ))}
-        </ul>
+        <div
+            className={twMerge(
+                'relative my-4 ml-4 w-full border-l-2 border-stroke-neutral-secondary pl-6',
+                isCollapsed && 'h-2'
+            )}
+        >
+            <Button
+                className="absolute -left-3 top-0 size-6"
+                onClick={() => setIsCollapsed((prev) => !prev)}
+                size="icon"
+                variant="outline"
+            >
+                <ChevronDownIcon className={twMerge(isCollapsed && 'rotate-180')} />
+            </Button>
+
+            <div className={twMerge(isCollapsed ? 'hidden' : 'block')}>{children}</div>
+        </div>
     );
 };
 
 export default SchemaCreator;
-
-const SchemaBox = ({children}: PropsWithChildren) => (
-    <div className="w-full rounded-bl border-b border-l border-blue-400 py-2 pl-2">{children}</div>
-);

From 4d0a9fa935afedc093caf9853d06c7d7c15166af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 16:14:48 +0200
Subject: [PATCH 05/10] 2536 - improve Note component

---
 client/src/components/Note.tsx | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Note.tsx b/client/src/components/Note.tsx
index 01017ff472..7ea0994afc 100644
--- a/client/src/components/Note.tsx
+++ b/client/src/components/Note.tsx
@@ -4,21 +4,14 @@ import {twMerge} from 'tailwind-merge';
 
 import {Button} from './ui/button';
 
-export const Note = ({content, icon}: {content: string; icon?: ReactNode}) => {
-    return (
-        <div
-            className={twMerge(
-                'relative flex items-center rounded-md bg-surface-warning-secondary p-4',
-                icon && 'gap-2'
-            )}
-        >
-            {icon && icon}
+export const Note = ({content, icon}: {content: string; icon?: ReactNode}) => (
+    <div className={twMerge('bg-surface-warning-secondary relative flex items-center rounded-md p-4', icon && 'gap-2')}>
+        {icon && icon}
 
-            <p className="text-sm font-medium">{content}</p>
+        <p className="text-sm font-medium">{content}</p>
 
-            <Button className="absolute right-1 top-1 hover:bg-surface-warning-primary" size="icon" variant="ghost">
-                <XIcon className="size-4 text-content-neutral-secondary" />
-            </Button>
-        </div>
-    );
-};
+        <Button className="group absolute right-0 top-0 hover:bg-transparent" size="icon" variant="ghost">
+            <XIcon className="size-4 text-content-neutral-secondary group-hover:text-content-destructive" />
+        </Button>
+    </div>
+);

From cb76607d654dccf2e48b0b59e9b83e5360cdc01c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 16:31:36 +0200
Subject: [PATCH 06/10] 2536 - JSON Schema Builder - set default values and
 change labels

---
 .../components/SchemaControls.tsx             | 87 +++++++++++-------
 .../components/SchemaCreator.tsx              | 90 +++++++++++--------
 .../components/SchemaInput.tsx                |  6 +-
 .../components/SchemaMenu.tsx                 | 15 ++--
 .../components/SchemaMenuDialog.tsx           | 10 ++-
 .../components/SchemaTypesSelect.tsx          |  7 +-
 .../JsonSchemaBuilder/utils/constants.ts      |  2 +-
 7 files changed, 128 insertions(+), 89 deletions(-)

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index f554b6fdc8..ecb6a93664 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -1,12 +1,17 @@
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
-import SchemaMenu from '@/components/JsonSchemaBuilder/components/SchemaMenu';
 import SchemaMenuDialog from '@/components/JsonSchemaBuilder/components/SchemaMenuDialog';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
 import {Button} from '@/components/ui/button';
 import {CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
-import {useState} from 'react';
-
-import * as helpers from '../utils/helpers';
+import {useEffect, useState} from 'react';
+
+import {
+    addSchemaProperty,
+    getSchemaTitle,
+    getSchemaType,
+    setSchemaTitle,
+    setSchemaTypeAndRemoveWrongFields,
+} from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
 
 interface SchemaControlsProps {
@@ -20,26 +25,34 @@ interface SchemaControlsProps {
     onChange: (schema: SchemaRecordType) => void;
 }
 
-export const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemakey}: SchemaControlsProps) => {
+const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemakey}: SchemaControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
+    const isObjectSchema = getSchemaType(schema) === 'object';
+
+    useEffect(() => {
+        if (!schema.type || !getSchemaType(schema)) {
+            onChange(setSchemaTypeAndRemoveWrongFields('object', schema));
+        }
+    }, [schema, onChange]);
+
     return (
-        <div className="flex w-full flex-row items-end">
+        <div className="flex w-full flex-row">
             <div className="grid grid-flow-col gap-2">
-                <SchemaInput
-                    label="Title"
-                    onChange={(title) => onChange(helpers.setSchemaTitle(title, schema))}
-                    placeholder="Title"
-                    value={helpers.getSchemaTitle(schema)}
+                <SchemaTypesSelect
+                    onChange={(translation) => onChange(setSchemaTypeAndRemoveWrongFields(translation, schema))}
+                    type={getSchemaType(schema)}
                 />
 
-                <SchemaTypesSelect
-                    onChange={(translation) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(translation, schema))}
-                    type={helpers.getSchemaType(schema)}
+                <SchemaInput
+                    label="Pill Title"
+                    onChange={(title) => onChange(setSchemaTitle(title, schema))}
+                    placeholder="Untitled Pill"
+                    value={getSchemaTitle(schema)}
                 />
 
                 {typeof onChangeKey === 'function' && (
-                    <SchemaInput label="Key" onChange={onChangeKey} placeholder="Key" value={schemakey} />
+                    <SchemaInput label="Pill Key" onChange={onChangeKey} placeholder="Pill Key" value={schemakey} />
                 )}
             </div>
 
@@ -65,39 +78,48 @@ export const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema,
                     </Button>
                 )}
 
-                {typeof onAdd === 'function' && (
-                    <Button onClick={onAdd} size="icon" title="Add" variant="ghost">
+                {(typeof onAdd === 'function' || isObjectSchema) && (
+                    <Button
+                        disabled={!isObjectSchema}
+                        onClick={onAdd || (() => onChange(addSchemaProperty(schema)))}
+                        size="icon"
+                        title="Add Property"
+                        variant="ghost"
+                    >
                         <PlusIcon />
                     </Button>
                 )}
             </div>
 
             {isMenuOpen && (
-                <SchemaMenuDialog onClose={() => setIsMenuOpen(false)} title="Extra fields">
-                    <SchemaMenu onChange={onChange} schema={schema} />
-                </SchemaMenuDialog>
+                <SchemaMenuDialog
+                    onChange={onChange}
+                    onClose={() => setIsMenuOpen(false)}
+                    schema={schema}
+                    title="Extra fields"
+                />
             )}
         </div>
     );
 };
 
 interface SchemaArrayControlsProps {
-    schema: SchemaRecordType;
-    onChange: (schema: SchemaRecordType) => void;
     onAdd?: () => void;
+    onChange: (schema: SchemaRecordType) => void;
+    schema: SchemaRecordType;
 }
 
-export const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps) => {
+const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
     return (
-        <div className="flex items-end">
+        <div className="flex w-full items-center">
             <SchemaTypesSelect
-                onChange={(value) => onChange(helpers.setSchemaTypeAndRemoveWrongFields(value, schema))}
-                type={helpers.getSchemaType(schema)}
+                onChange={(value) => onChange(setSchemaTypeAndRemoveWrongFields(value, schema))}
+                type={getSchemaType(schema)}
             />
 
-            <div className="mb-0.5 ml-2 grid grid-flow-col gap-1">
+            <div className="ml-auto flex space-x-1">
                 <Button
                     onClick={() => setIsMenuOpen((open) => !open)}
                     size="icon"
@@ -115,10 +137,15 @@ export const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayContro
             </div>
 
             {isMenuOpen && (
-                <SchemaMenuDialog onClose={() => setIsMenuOpen(false)} title="Extra fields">
-                    <SchemaMenu onChange={onChange} schema={schema} />
-                </SchemaMenuDialog>
+                <SchemaMenuDialog
+                    onChange={onChange}
+                    onClose={() => setIsMenuOpen(false)}
+                    schema={schema}
+                    title="Extra fields"
+                />
             )}
         </div>
     );
 };
+
+export {SchemaControls, SchemaArrayControls};
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index 59cf87b23f..4113d5a160 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -18,6 +18,7 @@ import {
 } from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
 import {SchemaArrayControls, SchemaControls} from './SchemaControls';
+import {Badge} from '@/components/ui/badge';
 
 interface SchemaCreatorProps {
     isRequired?: boolean;
@@ -35,44 +36,49 @@ const SchemaCreator = ({
     onDelete = () => {},
     schema,
     schemakey = '__root__',
-}: SchemaCreatorProps) => (
-    <div className="size-full">
-        <div className="flex items-end">
-            {isRequired && <AsteriskIcon className="mb-3 mr-1 h-4 text-xs" />}
-
-            <SchemaControls
-                onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
-                onChange={onChange}
-                onChangeKey={schemakey !== '__root__' ? onChangeKey : undefined}
-                onDelete={schemakey !== '__root__' ? () => onDelete(schemakey) : undefined}
-                schema={schema}
-                schemakey={schemakey}
-            />
-        </div>
+}: SchemaCreatorProps) => {
+    const objectPropertiesCount =
+        isSchemaObject(schema) && getSchemaProperties(schema) ? Object.keys(getSchemaProperties(schema)).length : 0;
 
-        <div className="block">
-            {isSchemaObject(schema) && hasSchemaProperties(schema) && (
-                <SchemaBox>
-                    <SchemaObjectProperties
-                        onChange={(key, s) => onChange(setSchemaProperty(key, s, schema))}
-                        onChangeKey={(oldkey, newkey) => onChange(renameSchemaProperty(oldkey, newkey, schema))}
-                        onDelete={(key) => onChange(deleteSchemaProperty(key, schema))}
-                        schema={schema}
-                    />
-                </SchemaBox>
-            )}
+    return (
+        <div className="size-full">
+            <div className="flex items-end">
+                {isRequired && <AsteriskIcon className="mb-3 mr-1 h-4 text-xs" />}
+
+                <SchemaControls
+                    onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
+                    onChange={onChange}
+                    onChangeKey={schemakey !== '__root__' ? onChangeKey : undefined}
+                    onDelete={schemakey !== '__root__' ? () => onDelete(schemakey) : undefined}
+                    schema={schema}
+                    schemakey={schemakey}
+                />
+            </div>
 
-            {isSchemaArray(schema) && (
-                <SchemaBox>
-                    <SchemaArrayItems
-                        onChange={(s) => onChange(setSchemaItems(s, schema))}
-                        schema={getSchemaItems(schema)}
-                    />
-                </SchemaBox>
-            )}
+            <div className="block">
+                {isSchemaObject(schema) && hasSchemaProperties(schema) && (
+                    <SchemaBox itemCount={objectPropertiesCount}>
+                        <SchemaObjectProperties
+                            onChange={(key, s) => onChange(setSchemaProperty(key, s, schema))}
+                            onChangeKey={(oldkey, newkey) => onChange(renameSchemaProperty(oldkey, newkey, schema))}
+                            onDelete={(key) => onChange(deleteSchemaProperty(key, schema))}
+                            schema={schema}
+                        />
+                    </SchemaBox>
+                )}
+
+                {isSchemaArray(schema) && (
+                    <SchemaBox>
+                        <SchemaArrayItems
+                            onChange={(s) => onChange(setSchemaItems(s, schema))}
+                            schema={getSchemaItems(schema)}
+                        />
+                    </SchemaBox>
+                )}
+            </div>
         </div>
-    </div>
-);
+    );
+};
 
 interface SchemaArrayItemsProps {
     schema: SchemaRecordType;
@@ -80,7 +86,7 @@ interface SchemaArrayItemsProps {
 }
 
 const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => (
-    <div>
+    <>
         <SchemaArrayControls
             onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
             onChange={onChange}
@@ -106,7 +112,7 @@ const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => (
                 />
             </SchemaBox>
         )}
-    </div>
+    </>
 );
 
 interface SchemaObjectPropertiesProps {
@@ -133,7 +139,7 @@ const SchemaObjectProperties = ({onChange, onChangeKey, onDelete, schema}: Schem
     </ul>
 );
 
-const SchemaBox = ({children}: PropsWithChildren) => {
+const SchemaBox = ({children, itemCount}: {itemCount?: number} & PropsWithChildren) => {
     const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
 
     return (
@@ -152,7 +158,13 @@ const SchemaBox = ({children}: PropsWithChildren) => {
                 <ChevronDownIcon className={twMerge(isCollapsed && 'rotate-180')} />
             </Button>
 
-            <div className={twMerge(isCollapsed ? 'hidden' : 'block')}>{children}</div>
+            {isCollapsed ? (
+                <Badge className="border-0 bg-surface-neutral-secondary px-2.5 py-1 font-normal leading-4 text-content-neutral-primary shadow-none hover:bg-surface-neutral-secondary">
+                    {itemCount} items nested
+                </Badge>
+            ) : (
+                <div>{children}</div>
+            )}
         </div>
     );
 };
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
index dfdd59f095..4d1547b9df 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
@@ -18,7 +18,7 @@ interface SchemaInputProps {
     type?: string;
 }
 
-const SchemaInput = ({label, onChange, placeholder, type = 'text', value = ''}: SchemaInputProps) => {
+const SchemaInput = ({label, onChange, placeholder, type = 'text', value = 'Untitled Pill'}: SchemaInputProps) => {
     const [localVal, setLocalVal] = useState<string>(value);
 
     useEffect(() => {
@@ -34,7 +34,7 @@ const SchemaInput = ({label, onChange, placeholder, type = 'text', value = ''}:
     };
 
     return (
-        <div className="w-full">
+        <fieldset className="space-y-1">
             <Label>{label}</Label>
 
             <Input
@@ -46,7 +46,7 @@ const SchemaInput = ({label, onChange, placeholder, type = 'text', value = ''}:
                 type={type}
                 value={localVal}
             />
-        </div>
+        </fieldset>
     );
 };
 
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
index 26e541f594..d7c2e2df5b 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
@@ -2,7 +2,7 @@ import {useMemo} from 'react';
 import {useTranslation} from 'react-i18next';
 import Select from 'react-select';
 
-import * as helpers from '../utils/helpers';
+import {getAllSchemaKeys, getSchemaMenuOptions, getSchemaType, setSchemaField, translateLabels} from '../utils/helpers';
 import {SchemaMenuOptionType, SchemaRecordType} from '../utils/types';
 import SchemaMenuList from './SchemaMenuList';
 
@@ -16,13 +16,10 @@ interface SchemaMenuProps {
 const SchemaMenu = ({onChange, schema}: SchemaMenuProps) => {
     const {t: translation} = useTranslation();
 
-    const type = helpers.getSchemaType(schema);
-    const allOptions = useMemo(
-        () => helpers.translateLabels(translation, helpers.getSchemaMenuOptions(type)),
-        [type, translation]
-    );
+    const type = getSchemaType(schema);
+    const fields = getAllSchemaKeys(schema);
 
-    const fields = helpers.getAllSchemaKeys(schema);
+    const allOptions = useMemo(() => translateLabels(translation, getSchemaMenuOptions(type)), [type, translation]);
 
     const displayFields = useMemo(() => allOptions.filter((item) => fields.includes(item.value)), [allOptions, fields]);
 
@@ -32,9 +29,7 @@ const SchemaMenu = ({onChange, schema}: SchemaMenuProps) => {
 
             <Select
                 className="w-full min-w-48"
-                onChange={(option: SchemaMenuOptionType) =>
-                    onChange(helpers.setSchemaField(option.value, undefined, schema))
-                }
+                onChange={(option: SchemaMenuOptionType) => onChange(setSchemaField(option.value, undefined, schema))}
                 options={allOptions.filter((option) => !displayFields.some((field) => field.value === option.value))}
                 placeholder={translation('addFields')}
                 value={null}
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
index dd95cb8bfa..f7c6e8bbdd 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
@@ -8,13 +8,17 @@ import {
 } from '@/components/ui/dialog';
 import React from 'react';
 
+import {SchemaRecordType} from '../utils/types';
+import SchemaMenu from './SchemaMenu';
+
 interface SchemaMenuModalProps {
+    onChange: (schema: SchemaRecordType) => void;
     onClose: () => void;
-    children?: React.ReactNode;
+    schema: SchemaRecordType;
     title?: string | React.ReactNode;
 }
 
-const SchemaMenuDialog = ({children, onClose, title}: SchemaMenuModalProps) => (
+const SchemaMenuDialog = ({onChange, onClose, schema, title}: SchemaMenuModalProps) => (
     <Dialog onOpenChange={onClose} open={true}>
         <DialogContent>
             <DialogHeader className="flex flex-row items-center justify-between space-y-0">
@@ -27,7 +31,7 @@ const SchemaMenuDialog = ({children, onClose, title}: SchemaMenuModalProps) => (
                 <DialogCloseButton />
             </DialogHeader>
 
-            {children}
+            <SchemaMenu onChange={onChange} schema={schema} />
         </DialogContent>
     </Dialog>
 );
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
index 5dc9e759fe..426ee4a7cb 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaTypesSelect.tsx
@@ -15,10 +15,11 @@ interface SchemaTypesSelectProps {
 }
 
 const SchemaTypesSelect = ({onChange, type}: SchemaTypesSelectProps) => (
-    <div>
-        <Label>Type</Label>
+    <fieldset className="space-y-1">
+        <Label>Pill Type</Label>
 
         <Select
+            defaultValue="object"
             onValueChange={(option: SchemaType) => onChange(option)}
             value={helpers.findOption(type)(SCHEMA_TYPES)?.value}
         >
@@ -38,7 +39,7 @@ const SchemaTypesSelect = ({onChange, type}: SchemaTypesSelectProps) => (
                 ))}
             </SelectContent>
         </Select>
-    </div>
+    </fieldset>
 );
 
 export default SchemaTypesSelect;
diff --git a/client/src/components/JsonSchemaBuilder/utils/constants.ts b/client/src/components/JsonSchemaBuilder/utils/constants.ts
index 1920b2fa23..15074a9536 100755
--- a/client/src/components/JsonSchemaBuilder/utils/constants.ts
+++ b/client/src/components/JsonSchemaBuilder/utils/constants.ts
@@ -20,7 +20,7 @@ import {
 
 export const SCHEMA_TYPES: SchemaTypeOptionType[] = [
     {
-        label: 'Text',
+        label: 'String',
         value: 'string',
     },
     {

From 7d97caca53a6812b2be34a6966af74354321ea93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 16:42:30 +0200
Subject: [PATCH 07/10] 2536 - JSON Schema Builder - prevent children from
 exceeding parent's width

---
 .../JsonSchemaBuilder/components/SchemaControls.tsx       | 4 ++--
 .../JsonSchemaBuilder/components/SchemaCreator.tsx        | 8 ++++----
 .../JsonSchemaBuilder/components/SchemaInput.tsx          | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index ecb6a93664..77a1fd56fb 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -38,7 +38,7 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
 
     return (
         <div className="flex w-full flex-row">
-            <div className="grid grid-flow-col gap-2">
+            <div className="flex flex-1 gap-2">
                 <SchemaTypesSelect
                     onChange={(translation) => onChange(setSchemaTypeAndRemoveWrongFields(translation, schema))}
                     type={getSchemaType(schema)}
@@ -56,7 +56,7 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
                 )}
             </div>
 
-            <div className="ml-auto grid grid-flow-col items-center gap-1">
+            <div className="ml-auto grid flex-shrink-0 grid-flow-col items-center gap-1">
                 <Button
                     onClick={() => setIsMenuOpen((open) => !open)}
                     size="icon"
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index 4113d5a160..a78868cd0e 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -41,7 +41,7 @@ const SchemaCreator = ({
         isSchemaObject(schema) && getSchemaProperties(schema) ? Object.keys(getSchemaProperties(schema)).length : 0;
 
     return (
-        <div className="size-full">
+        <div className="w-full min-w-0 overflow-hidden">
             <div className="flex items-end">
                 {isRequired && <AsteriskIcon className="mb-3 mr-1 h-4 text-xs" />}
 
@@ -123,7 +123,7 @@ interface SchemaObjectPropertiesProps {
 }
 
 const SchemaObjectProperties = ({onChange, onChangeKey, onDelete, schema}: SchemaObjectPropertiesProps) => (
-    <ul className="grid gap-2">
+    <ul className="grid w-full gap-2">
         {Object.entries(getSchemaProperties(schema)).map(([key, s]) => (
             <li key={key}>
                 <SchemaCreator
@@ -145,7 +145,7 @@ const SchemaBox = ({children, itemCount}: {itemCount?: number} & PropsWithChildr
     return (
         <div
             className={twMerge(
-                'relative my-4 ml-4 w-full border-l-2 border-stroke-neutral-secondary pl-6',
+                'relative my-4 ml-4 border-l-2 border-stroke-neutral-secondary pl-6',
                 isCollapsed && 'h-2'
             )}
         >
@@ -155,7 +155,7 @@ const SchemaBox = ({children, itemCount}: {itemCount?: number} & PropsWithChildr
                 size="icon"
                 variant="outline"
             >
-                <ChevronDownIcon className={twMerge(isCollapsed && 'rotate-180')} />
+                <ChevronDownIcon className={twMerge('transition-all duration-200', isCollapsed && 'rotate-180')} />
             </Button>
 
             {isCollapsed ? (
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
index 4d1547b9df..f05a651fa5 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
@@ -34,11 +34,11 @@ const SchemaInput = ({label, onChange, placeholder, type = 'text', value = 'Unti
     };
 
     return (
-        <fieldset className="space-y-1">
+        <fieldset className="space-y-1 overflow-hidden">
             <Label>{label}</Label>
 
             <Input
-                className="bg-white"
+                className="text-ellipsis"
                 onBlur={onChangeValue}
                 onChange={(e) => setLocalVal(e.target.value)}
                 onKeyPress={handleEnterPress(onChangeValue)}

From 0e2bce787cd1b5e5fe3d5fcd3af21491c3f843f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 18:23:15 +0200
Subject: [PATCH 08/10] 2536 - JSON Schema Builder - change extra fields dialog
 into popover

---
 .../components/SchemaControls.tsx             | 94 ++++++++++++-------
 .../components/SchemaCreator.tsx              |  8 +-
 .../components/SchemaInput.tsx                | 20 ++--
 .../components/SchemaMenu.tsx                 | 41 --------
 .../components/SchemaMenuDialog.tsx           | 39 --------
 .../components/SchemaMenuItem.tsx             |  8 +-
 .../components/SchemaMenuPopover.tsx          | 83 ++++++++++++++++
 7 files changed, 159 insertions(+), 134 deletions(-)
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
 delete mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
 create mode 100755 client/src/components/JsonSchemaBuilder/components/SchemaMenuPopover.tsx

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index 77a1fd56fb..c577abbaba 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -1,5 +1,5 @@
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
-import SchemaMenuDialog from '@/components/JsonSchemaBuilder/components/SchemaMenuDialog';
+import SchemaMenuPopover from '@/components/JsonSchemaBuilder/components/SchemaMenuPopover';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
 import {Button} from '@/components/ui/button';
 import {CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
@@ -13,6 +13,8 @@ import {
     setSchemaTypeAndRemoveWrongFields,
 } from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
+import {Badge} from '@/components/ui/badge';
+import {twMerge} from 'tailwind-merge';
 
 interface SchemaControlsProps {
     schema: SchemaRecordType;
@@ -30,6 +32,8 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
 
     const isObjectSchema = getSchemaType(schema) === 'object';
 
+    const extraFields = Object.keys(schema).filter((key) => key !== 'type' && key !== 'items' && key !== 'properties');
+
     useEffect(() => {
         if (!schema.type || !getSchemaType(schema)) {
             onChange(setSchemaTypeAndRemoveWrongFields('object', schema));
@@ -56,15 +60,34 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
                 )}
             </div>
 
-            <div className="ml-auto grid flex-shrink-0 grid-flow-col items-center gap-1">
-                <Button
-                    onClick={() => setIsMenuOpen((open) => !open)}
-                    size="icon"
-                    title="Extra options"
-                    variant="ghost"
+            <div className="ml-auto grid shrink-0 grid-flow-col items-center gap-1">
+                <SchemaMenuPopover
+                    onChange={onChange}
+                    onClose={() => setIsMenuOpen(false)}
+                    open={isMenuOpen}
+                    schema={schema}
                 >
-                    <CircleEllipsisIcon />
-                </Button>
+                    <Button
+                        className={twMerge('group px-2.5', isMenuOpen && 'bg-surface-brand-secondary')}
+                        onClick={() => setIsMenuOpen((open) => !open)}
+                        title="Extra options"
+                        variant="ghost"
+                    >
+                        <CircleEllipsisIcon className={twMerge(isMenuOpen && 'text-content-brand-primary')} />
+
+                        {extraFields.length > 0 && (
+                            <Badge
+                                className={twMerge(
+                                    'group-hover:bg-surface-neutral-secondary-hover',
+                                    isMenuOpen && 'bg-surface-brand-primary text-white'
+                                )}
+                                variant="secondary"
+                            >
+                                {extraFields.length}
+                            </Badge>
+                        )}
+                    </Button>
+                </SchemaMenuPopover>
 
                 {typeof onDelete === 'function' && (
                     <Button
@@ -90,15 +113,6 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
                     </Button>
                 )}
             </div>
-
-            {isMenuOpen && (
-                <SchemaMenuDialog
-                    onChange={onChange}
-                    onClose={() => setIsMenuOpen(false)}
-                    schema={schema}
-                    title="Extra fields"
-                />
-            )}
         </div>
     );
 };
@@ -112,6 +126,8 @@ interface SchemaArrayControlsProps {
 const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
+    const extraFields = Object.keys(schema).filter((key) => key !== 'type' && key !== 'items' && key !== 'properties');
+
     return (
         <div className="flex w-full items-center">
             <SchemaTypesSelect
@@ -120,14 +136,33 @@ const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps
             />
 
             <div className="ml-auto flex space-x-1">
-                <Button
-                    onClick={() => setIsMenuOpen((open) => !open)}
-                    size="icon"
-                    title="Extra options"
-                    variant="ghost"
+                <SchemaMenuPopover
+                    onChange={onChange}
+                    onClose={() => setIsMenuOpen(false)}
+                    open={isMenuOpen}
+                    schema={schema}
                 >
-                    <CircleEllipsisIcon />
-                </Button>
+                    <Button
+                        className={twMerge('group px-2.5', isMenuOpen && 'bg-surface-brand-secondary')}
+                        onClick={() => setIsMenuOpen((open) => !open)}
+                        title="Extra options"
+                        variant="ghost"
+                    >
+                        <CircleEllipsisIcon className={twMerge(isMenuOpen && 'text-content-brand-primary')} />
+
+                        {extraFields.length > 0 && (
+                            <Badge
+                                className={twMerge(
+                                    'group-hover:bg-surface-neutral-secondary-hover',
+                                    isMenuOpen && 'bg-surface-brand-primary text-white'
+                                )}
+                                variant="secondary"
+                            >
+                                {extraFields.length}
+                            </Badge>
+                        )}
+                    </Button>
+                </SchemaMenuPopover>
 
                 {typeof onAdd === 'function' && (
                     <Button onClick={onAdd} size="icon" title="Add" variant="ghost">
@@ -135,15 +170,6 @@ const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps
                     </Button>
                 )}
             </div>
-
-            {isMenuOpen && (
-                <SchemaMenuDialog
-                    onChange={onChange}
-                    onClose={() => setIsMenuOpen(false)}
-                    schema={schema}
-                    title="Extra fields"
-                />
-            )}
         </div>
     );
 };
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index a78868cd0e..76fe0d6299 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -158,13 +158,7 @@ const SchemaBox = ({children, itemCount}: {itemCount?: number} & PropsWithChildr
                 <ChevronDownIcon className={twMerge('transition-all duration-200', isCollapsed && 'rotate-180')} />
             </Button>
 
-            {isCollapsed ? (
-                <Badge className="border-0 bg-surface-neutral-secondary px-2.5 py-1 font-normal leading-4 text-content-neutral-primary shadow-none hover:bg-surface-neutral-secondary">
-                    {itemCount} items nested
-                </Badge>
-            ) : (
-                <div>{children}</div>
-            )}
+            {isCollapsed ? <Badge variant="secondary">{itemCount} items nested</Badge> : <div>{children}</div>}
         </div>
     );
 };
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
index f05a651fa5..f91ccf8858 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaInput.tsx
@@ -18,21 +18,21 @@ interface SchemaInputProps {
     type?: string;
 }
 
-const SchemaInput = ({label, onChange, placeholder, type = 'text', value = 'Untitled Pill'}: SchemaInputProps) => {
-    const [localVal, setLocalVal] = useState<string>(value);
-
-    useEffect(() => {
-        setLocalVal(value);
-    }, [value]);
+const SchemaInput = ({label, onChange, placeholder, type = 'text', value = 'Untitled'}: SchemaInputProps) => {
+    const [localValue, setLocalValue] = useState<string>(value);
 
     const onChangeValue = () => {
-        if (localVal === value) {
+        if (localValue === value) {
             return;
         }
 
-        onChange(localVal);
+        onChange(localValue);
     };
 
+    useEffect(() => {
+        setLocalValue(value);
+    }, [value]);
+
     return (
         <fieldset className="space-y-1 overflow-hidden">
             <Label>{label}</Label>
@@ -40,11 +40,11 @@ const SchemaInput = ({label, onChange, placeholder, type = 'text', value = 'Unti
             <Input
                 className="text-ellipsis"
                 onBlur={onChangeValue}
-                onChange={(e) => setLocalVal(e.target.value)}
+                onChange={(e) => setLocalValue(e.target.value)}
                 onKeyPress={handleEnterPress(onChangeValue)}
                 placeholder={placeholder}
                 type={type}
-                value={localVal}
+                value={localValue}
             />
         </fieldset>
     );
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
deleted file mode 100755
index d7c2e2df5b..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenu.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {useMemo} from 'react';
-import {useTranslation} from 'react-i18next';
-import Select from 'react-select';
-
-import {getAllSchemaKeys, getSchemaMenuOptions, getSchemaType, setSchemaField, translateLabels} from '../utils/helpers';
-import {SchemaMenuOptionType, SchemaRecordType} from '../utils/types';
-import SchemaMenuList from './SchemaMenuList';
-
-import '../../CreatableSelect/CreatableSelect.css';
-
-interface SchemaMenuProps {
-    schema: SchemaRecordType;
-    onChange: (schema: SchemaRecordType) => void;
-}
-
-const SchemaMenu = ({onChange, schema}: SchemaMenuProps) => {
-    const {t: translation} = useTranslation();
-
-    const type = getSchemaType(schema);
-    const fields = getAllSchemaKeys(schema);
-
-    const allOptions = useMemo(() => translateLabels(translation, getSchemaMenuOptions(type)), [type, translation]);
-
-    const displayFields = useMemo(() => allOptions.filter((item) => fields.includes(item.value)), [allOptions, fields]);
-
-    return (
-        <div className="min-w-72 text-sm">
-            <SchemaMenuList fields={displayFields} onChange={onChange} schema={schema} />
-
-            <Select
-                className="w-full min-w-48"
-                onChange={(option: SchemaMenuOptionType) => onChange(setSchemaField(option.value, undefined, schema))}
-                options={allOptions.filter((option) => !displayFields.some((field) => field.value === option.value))}
-                placeholder={translation('addFields')}
-                value={null}
-            />
-        </div>
-    );
-};
-
-export default SchemaMenu;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
deleted file mode 100755
index f7c6e8bbdd..0000000000
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuDialog.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {
-    Dialog,
-    DialogCloseButton,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
-import React from 'react';
-
-import {SchemaRecordType} from '../utils/types';
-import SchemaMenu from './SchemaMenu';
-
-interface SchemaMenuModalProps {
-    onChange: (schema: SchemaRecordType) => void;
-    onClose: () => void;
-    schema: SchemaRecordType;
-    title?: string | React.ReactNode;
-}
-
-const SchemaMenuDialog = ({onChange, onClose, schema, title}: SchemaMenuModalProps) => (
-    <Dialog onOpenChange={onClose} open={true}>
-        <DialogContent>
-            <DialogHeader className="flex flex-row items-center justify-between space-y-0">
-                <div className="flex flex-col space-y-1">
-                    <DialogTitle>{title}</DialogTitle>
-
-                    <DialogDescription>Define additional fields</DialogDescription>
-                </div>
-
-                <DialogCloseButton />
-            </DialogHeader>
-
-            <SchemaMenu onChange={onChange} schema={schema} />
-        </DialogContent>
-    </Dialog>
-);
-
-export default SchemaMenuDialog;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
index 2ee732a3c4..7dcafd3313 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
@@ -32,12 +32,14 @@ interface ItemProps {
 }
 
 const Item = ({children, onDelete}: ItemProps) => (
-    <div className="flex items-end justify-between">
-        {children}
+    <div className="flex w-full items-end justify-between gap-2">
+        <div className="min-w-0 flex-1">{children}</div>
 
         <Button
-            className="ml-2 text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
+            className="flex-shrink-0 text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
             onClick={onDelete}
+            size="icon"
+            variant="ghost"
         >
             <TrashIcon />
         </Button>
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuPopover.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuPopover.tsx
new file mode 100755
index 0000000000..57bbb6c355
--- /dev/null
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuPopover.tsx
@@ -0,0 +1,83 @@
+import {Button} from '@/components/ui/button';
+import {Label} from '@/components/ui/label';
+import {Popover, PopoverContent, PopoverTrigger} from '@/components/ui/popover';
+import {X as CloseIcon} from 'lucide-react';
+import {ReactNode, useMemo, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import Select from 'react-select';
+
+import {getAllSchemaKeys, getSchemaMenuOptions, getSchemaType, setSchemaField, translateLabels} from '../utils/helpers';
+import {SchemaMenuOptionType, SchemaRecordType} from '../utils/types';
+import SchemaMenuList from './SchemaMenuList';
+
+interface SchemaMenuPopoverProps {
+    onChange: (schema: SchemaRecordType) => void;
+    onClose: () => void;
+    schema: SchemaRecordType;
+    children?: ReactNode;
+    open?: boolean;
+}
+
+const SchemaMenuPopover = ({children, onChange, onClose, open: controlledOpen, schema}: SchemaMenuPopoverProps) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+    const {t: translation} = useTranslation();
+
+    const type = getSchemaType(schema);
+    const fields = getAllSchemaKeys(schema);
+
+    const allOptions = useMemo(() => translateLabels(translation, getSchemaMenuOptions(type)), [type, translation]);
+
+    const displayFields = useMemo(() => allOptions.filter((item) => fields.includes(item.value)), [allOptions, fields]);
+
+    const handleOpenChange = (open: boolean) => {
+        if (!open) {
+            onClose();
+        }
+        if (controlledOpen === undefined) {
+            setInternalOpen(open);
+        }
+    };
+
+    return (
+        <Popover onOpenChange={handleOpenChange} open={isOpen}>
+            <PopoverTrigger asChild>{children}</PopoverTrigger>
+
+            <PopoverContent align="end" className="w-80 p-0">
+                <div className="space-y-2 p-4">
+                    <fieldset className="space-y-1">
+                        <Label>Add a field</Label>
+
+                        <Select
+                            className="w-full min-w-48 text-sm"
+                            onChange={(option: SchemaMenuOptionType) =>
+                                onChange(setSchemaField(option.value, undefined, schema))
+                            }
+                            options={allOptions.filter(
+                                (option) => !displayFields.some((field) => field.value === option.value)
+                            )}
+                            placeholder="Description, Required, etc."
+                            value={undefined}
+                        />
+                    </fieldset>
+
+                    <Button
+                        className="absolute right-1 top-1 size-8 p-0 hover:bg-transparent hover:text-content-destructive"
+                        onClick={() => handleOpenChange(false)}
+                        size="icon"
+                        variant="ghost"
+                    >
+                        <CloseIcon className="size-4" />
+
+                        <span className="sr-only">Close</span>
+                    </Button>
+
+                    <SchemaMenuList fields={displayFields} onChange={onChange} schema={schema} />
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+};
+
+export default SchemaMenuPopover;

From 24ab18ff0d0a52466e7349ed7b728ea6951cde5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Thu, 15 May 2025 18:31:20 +0200
Subject: [PATCH 09/10] 2536 - JSON Schema Builder - SF

---
 .../JsonSchemaBuilder/components/SchemaControls.tsx           | 4 ++--
 .../components/JsonSchemaBuilder/components/SchemaCreator.tsx | 2 +-
 .../JsonSchemaBuilder/components/SchemaMenuItem.tsx           | 2 +-
 client/src/components/Note.tsx                                | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index c577abbaba..ba8c9c1910 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -1,9 +1,11 @@
 import SchemaInput from '@/components/JsonSchemaBuilder/components/SchemaInput';
 import SchemaMenuPopover from '@/components/JsonSchemaBuilder/components/SchemaMenuPopover';
 import SchemaTypesSelect from '@/components/JsonSchemaBuilder/components/SchemaTypesSelect';
+import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {CircleEllipsisIcon, PlusIcon, TrashIcon} from 'lucide-react';
 import {useEffect, useState} from 'react';
+import {twMerge} from 'tailwind-merge';
 
 import {
     addSchemaProperty,
@@ -13,8 +15,6 @@ import {
     setSchemaTypeAndRemoveWrongFields,
 } from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
-import {Badge} from '@/components/ui/badge';
-import {twMerge} from 'tailwind-merge';
 
 interface SchemaControlsProps {
     schema: SchemaRecordType;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index 76fe0d6299..63ed5e85aa 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -1,3 +1,4 @@
+import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {AsteriskIcon, ChevronDownIcon} from 'lucide-react';
 import {PropsWithChildren, useState} from 'react';
@@ -18,7 +19,6 @@ import {
 } from '../utils/helpers';
 import {SchemaRecordType} from '../utils/types';
 import {SchemaArrayControls, SchemaControls} from './SchemaControls';
-import {Badge} from '@/components/ui/badge';
 
 interface SchemaCreatorProps {
     isRequired?: boolean;
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
index 7dcafd3313..20b4ef854a 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaMenuItem.tsx
@@ -36,7 +36,7 @@ const Item = ({children, onDelete}: ItemProps) => (
         <div className="min-w-0 flex-1">{children}</div>
 
         <Button
-            className="flex-shrink-0 text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
+            className="shrink-0 text-content-destructive/50 hover:bg-surface-destructive-secondary hover:text-content-destructive"
             onClick={onDelete}
             size="icon"
             variant="ghost"
diff --git a/client/src/components/Note.tsx b/client/src/components/Note.tsx
index 7ea0994afc..bebb81e438 100644
--- a/client/src/components/Note.tsx
+++ b/client/src/components/Note.tsx
@@ -5,7 +5,7 @@ import {twMerge} from 'tailwind-merge';
 import {Button} from './ui/button';
 
 export const Note = ({content, icon}: {content: string; icon?: ReactNode}) => (
-    <div className={twMerge('bg-surface-warning-secondary relative flex items-center rounded-md p-4', icon && 'gap-2')}>
+    <div className={twMerge('relative flex items-center rounded-md bg-surface-warning-secondary p-4', icon && 'gap-2')}>
         {icon && icon}
 
         <p className="text-sm font-medium">{content}</p>

From b1c5d3370a57bb5058c1019ac49cb3da7189b199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Fri, 16 May 2025 07:47:24 +0200
Subject: [PATCH 10/10] 2536 - JSON Schema Builder - Differentiate root element
 from the rest

---
 .../JsonSchemaBuilder/JsonSchemaBuilder.tsx   |  1 +
 .../components/SchemaControls.tsx             | 42 +++++++++++++------
 .../components/SchemaCreator.tsx              |  9 +++-
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/client/src/components/JsonSchemaBuilder/JsonSchemaBuilder.tsx b/client/src/components/JsonSchemaBuilder/JsonSchemaBuilder.tsx
index 40c3800365..a4ce75bec3 100644
--- a/client/src/components/JsonSchemaBuilder/JsonSchemaBuilder.tsx
+++ b/client/src/components/JsonSchemaBuilder/JsonSchemaBuilder.tsx
@@ -54,6 +54,7 @@ const JsonSchemaBuilder = ({locale = 'en', onChange, schema}: JsonSchemaBuilderP
                     ...schema,
                 });
             }}
+            root
             schema={curSchema}
         />
     );
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
index ba8c9c1910..4b65eb5198 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaControls.tsx
@@ -17,17 +17,18 @@ import {
 import {SchemaRecordType} from '../utils/types';
 
 interface SchemaControlsProps {
-    schema: SchemaRecordType;
-    schemakey: string;
     isCollapsed?: boolean;
-    onDelete?: () => void;
     onAdd?: () => void;
-    onCollapse?: () => void;
     onChangeKey?: (key: string) => void;
     onChange: (schema: SchemaRecordType) => void;
+    onCollapse?: () => void;
+    onDelete?: () => void;
+    root?: boolean;
+    schema: SchemaRecordType;
+    schemakey: string;
 }
 
-const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemakey}: SchemaControlsProps) => {
+const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, root, schema, schemakey}: SchemaControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
     const isObjectSchema = getSchemaType(schema) === 'object';
@@ -41,8 +42,8 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
     }, [schema, onChange]);
 
     return (
-        <div className="flex w-full flex-row">
-            <div className="flex flex-1 gap-2">
+        <div className="flex w-full items-end">
+            <div className={twMerge('flex gap-2', root ? 'mr-1' : 'flex-1')}>
                 <SchemaTypesSelect
                     onChange={(translation) => onChange(setSchemaTypeAndRemoveWrongFields(translation, schema))}
                     type={getSchemaType(schema)}
@@ -60,7 +61,12 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
                 )}
             </div>
 
-            <div className="ml-auto grid shrink-0 grid-flow-col items-center gap-1">
+            <div
+                className={twMerge(
+                    'ml-auto grid shrink-0 grid-flow-col items-center gap-1',
+                    root && 'ml-0 flex-1 justify-between'
+                )}
+            >
                 <SchemaMenuPopover
                     onChange={onChange}
                     onClose={() => setIsMenuOpen(false)}
@@ -70,11 +76,13 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
                     <Button
                         className={twMerge('group px-2.5', isMenuOpen && 'bg-surface-brand-secondary')}
                         onClick={() => setIsMenuOpen((open) => !open)}
-                        title="Extra options"
+                        title="Extra fields"
                         variant="ghost"
                     >
                         <CircleEllipsisIcon className={twMerge(isMenuOpen && 'text-content-brand-primary')} />
 
+                        {root && <span>Extra fields</span>}
+
                         {extraFields.length > 0 && (
                             <Badge
                                 className={twMerge(
@@ -103,13 +111,18 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
 
                 {(typeof onAdd === 'function' || isObjectSchema) && (
                     <Button
+                        className={twMerge(
+                            root && 'ml-auto bg-surface-brand-primary hover:bg-surface-brand-primary-hover'
+                        )}
                         disabled={!isObjectSchema}
                         onClick={onAdd || (() => onChange(addSchemaProperty(schema)))}
-                        size="icon"
+                        size={root ? 'default' : 'icon'}
                         title="Add Property"
-                        variant="ghost"
+                        variant={root ? 'default' : 'ghost'}
                     >
                         <PlusIcon />
+
+                        {root && <span>Add a pill</span>}
                     </Button>
                 )}
             </div>
@@ -120,10 +133,11 @@ const SchemaControls = ({onAdd, onChange, onChangeKey, onDelete, schema, schemak
 interface SchemaArrayControlsProps {
     onAdd?: () => void;
     onChange: (schema: SchemaRecordType) => void;
+    root?: boolean;
     schema: SchemaRecordType;
 }
 
-const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps) => {
+const SchemaArrayControls = ({onAdd, onChange, root, schema}: SchemaArrayControlsProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
 
     const extraFields = Object.keys(schema).filter((key) => key !== 'type' && key !== 'items' && key !== 'properties');
@@ -145,11 +159,13 @@ const SchemaArrayControls = ({onAdd, onChange, schema}: SchemaArrayControlsProps
                     <Button
                         className={twMerge('group px-2.5', isMenuOpen && 'bg-surface-brand-secondary')}
                         onClick={() => setIsMenuOpen((open) => !open)}
-                        title="Extra options"
+                        title="Extra fields"
                         variant="ghost"
                     >
                         <CircleEllipsisIcon className={twMerge(isMenuOpen && 'text-content-brand-primary')} />
 
+                        {root && <span>Extra fields</span>}
+
                         {extraFields.length > 0 && (
                             <Badge
                                 className={twMerge(
diff --git a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
index 63ed5e85aa..948c65e63d 100755
--- a/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
+++ b/client/src/components/JsonSchemaBuilder/components/SchemaCreator.tsx
@@ -25,6 +25,7 @@ interface SchemaCreatorProps {
     onChangeKey?: (key: string) => void;
     onChange?: (schema: SchemaRecordType) => void;
     onDelete?: (key: string) => void;
+    root?: boolean;
     schema: SchemaRecordType;
     schemakey?: string;
 }
@@ -34,6 +35,7 @@ const SchemaCreator = ({
     onChange = () => {},
     onChangeKey = () => {},
     onDelete = () => {},
+    root = false,
     schema,
     schemakey = '__root__',
 }: SchemaCreatorProps) => {
@@ -50,6 +52,7 @@ const SchemaCreator = ({
                     onChange={onChange}
                     onChangeKey={schemakey !== '__root__' ? onChangeKey : undefined}
                     onDelete={schemakey !== '__root__' ? () => onDelete(schemakey) : undefined}
+                    root={root}
                     schema={schema}
                     schemakey={schemakey}
                 />
@@ -71,6 +74,7 @@ const SchemaCreator = ({
                     <SchemaBox>
                         <SchemaArrayItems
                             onChange={(s) => onChange(setSchemaItems(s, schema))}
+                            root={schemakey === '__root__'}
                             schema={getSchemaItems(schema)}
                         />
                     </SchemaBox>
@@ -82,14 +86,16 @@ const SchemaCreator = ({
 
 interface SchemaArrayItemsProps {
     schema: SchemaRecordType;
+    root?: boolean;
     onChange: (schema: SchemaRecordType) => void;
 }
 
-const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => (
+const SchemaArrayItems = ({onChange, root, schema}: SchemaArrayItemsProps) => (
     <>
         <SchemaArrayControls
             onAdd={isSchemaObject(schema) ? () => onChange(addSchemaProperty(schema)) : undefined}
             onChange={onChange}
+            root={root}
             schema={schema}
         />
 
@@ -108,6 +114,7 @@ const SchemaArrayItems = ({onChange, schema}: SchemaArrayItemsProps) => (
             <SchemaBox>
                 <SchemaArrayItems
                     onChange={(s) => onChange(setSchemaItems(s, schema))}
+                    root={root}
                     schema={getSchemaItems(schema)}
                 />
             </SchemaBox>