From e8db3339f256b24dc70a190fd47add6ee3763013 Mon Sep 17 00:00:00 2001
From: Sartoric <6607379+Sartoric@users.noreply.github.com>
Date: Fri, 17 Jul 2026 19:59:26 +0200
Subject: [PATCH 1/2] Refactor ProfileForms: Add utility profile toggle and
 extract reusable ProfileMainInformation component

- Extracted `ProfileMainInformation` into a new reusable component.
- Updated `ExtendedProfileForm` and `StandardProfileForm` to use `ProfileMainInformation`.
- Added utility profile toggle
---
 .../pages/ProfileEdit/ExtendedProfileForm.jsx | 111 ++++++++++--------
 .../ProfileEdit/ProfileMainInformation.jsx    |  72 ++++++++++++
 .../pages/ProfileEdit/StandardProfileForm.jsx |  59 ++--------
 3 files changed, 140 insertions(+), 102 deletions(-)
 create mode 100644 web/src/pages/ProfileEdit/ProfileMainInformation.jsx

diff --git a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
index 89da34ccd..ac6bff3f0 100644
--- a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
+++ b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
@@ -8,6 +8,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
+import { ProfileMainInformation } from './ProfileMainInformation.jsx';
 import { getProfilePhases, removePhaseAt, updatePhaseAt } from './profilePhases.js';
 
 export function ExtendedProfileForm(props) {
@@ -70,57 +71,65 @@ export function ExtendedProfileForm(props) {
       }}
     >
       <div className='grid grid-cols-1 gap-4 lg:grid-cols-10'>
-        <Card sm={10} title='Profile Information'>
-          <div className='form-control'>
-            <label htmlFor='label' className='mb-2 block text-sm font-medium'>
-              Title
-            </label>
-            <input
-              id='label'
-              name='label'
-              className='input input-bordered w-full'
-              value={data?.label}
-              onChange={e => onFieldChange('label', e.target.value)}
-              aria-label='Enter a name for this profile'
-              required
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='description' className='mb-2 block text-sm font-medium'>
-              Description
-            </label>
-            <input
-              id='description'
-              name='description'
-              className='input input-bordered w-full'
-              value={data?.description}
-              onChange={e => onFieldChange('description', e.target.value)}
-              aria-label='Optional description for this profile'
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
-              Temperature
-            </label>
-            <div className='input-group'>
-              <label htmlFor='temperature' className='input w-full'>
-                <input
-                  id='temperature'
-                  name='temperature'
-                  type='number'
-                  className='grow'
-                  value={data?.temperature}
-                  onChange={e => onFieldChange('temperature', e.target.value)}
-                  aria-label='Temperature in degrees Celsius'
-                  min='0'
-                  max='150'
-                  step='0.1'
-                />
-                <span aria-label='degrees Celsius'>°C</span>
-              </label>
-            </div>
-          </div>
-        </Card>
+        <ProfileMainInformation
+          data={data}
+          onChangeLabel={e => onFieldChange('label', e.target.value)}
+          onChangeDescription={e => onFieldChange('description', e.target.value)}
+          onChangeTemperature={e => onFieldChange('temperature', e.target.value)}
+          onChangeUtility={e => onFieldChange('utility', !!e.target.checked)}
+        />
+        {/*<Card sm={10} title='Profile Information'>*/}
+        {/*  <div className='form-control'>*/}
+        {/*    <label htmlFor='label' className='mb-2 block text-sm font-medium'>*/}
+        {/*      Title*/}
+        {/*    </label>*/}
+        {/*    <input*/}
+        {/*      id='label'*/}
+        {/*      name='label'*/}
+        {/*      className='input input-bordered w-full'*/}
+        {/*      value={data?.label}*/}
+        {/*      onChange={e => onFieldChange('label', e.target.value)}*/}
+        {/*      aria-label='Enter a name for this profile'*/}
+        {/*      required*/}
+        {/*    />*/}
+        {/*  </div>*/}
+        {/*  <div className='form-control'>*/}
+        {/*    <label htmlFor='description' className='mb-2 block text-sm font-medium'>*/}
+        {/*      Description*/}
+        {/*    </label>*/}
+        {/*    <textarea*/}
+        {/*      id='description'*/}
+        {/*      name='description'*/}
+        {/*      rows={2}*/}
+        {/*      className='input input-bordered w-full text-wrap'*/}
+        {/*      value={data?.description}*/}
+        {/*      onChange={e => onFieldChange('description', e.target.value)}*/}
+        {/*      aria-label='Optional description for this profile'*/}
+        {/*    />*/}
+        {/*  </div>*/}
+        {/*  <div className='form-control'>*/}
+        {/*    <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>*/}
+        {/*      Temperature*/}
+        {/*    </label>*/}
+        {/*    <div className='input-group'>*/}
+        {/*      <label htmlFor='temperature' className='input w-full'>*/}
+        {/*        <input*/}
+        {/*          id='temperature'*/}
+        {/*          name='temperature'*/}
+        {/*          type='number'*/}
+        {/*          className='grow'*/}
+        {/*          value={data?.temperature}*/}
+        {/*          onChange={e => onFieldChange('temperature', e.target.value)}*/}
+        {/*          aria-label='Temperature in degrees Celsius'*/}
+        {/*          min='0'*/}
+        {/*          max='150'*/}
+        {/*          step='0.1'*/}
+        {/*        />*/}
+        {/*        <span aria-label='degrees Celsius'>°C</span>*/}
+        {/*      </label>*/}
+        {/*    </div>*/}
+        {/*  </div>*/}
+        {/*</Card>*/}
         <Card sm={10}>
           <ExtendedProfileChart
             data={{ ...data, phases }}
diff --git a/web/src/pages/ProfileEdit/ProfileMainInformation.jsx b/web/src/pages/ProfileEdit/ProfileMainInformation.jsx
new file mode 100644
index 000000000..5296197ac
--- /dev/null
+++ b/web/src/pages/ProfileEdit/ProfileMainInformation.jsx
@@ -0,0 +1,72 @@
+import Card from '../../components/Card.jsx';
+
+export function ProfileMainInformation(props) {
+  console.log(props.data);
+  return (
+    <Card sm={10} title='Profile Information'>
+      <div className='form-control'>
+        <label htmlFor='label' className='mb-2 block text-sm font-medium'>
+          Title
+        </label>
+        <input
+          id='label'
+          name='label'
+          className='input input-bordered w-full'
+          value={props.data?.label}
+          onChange={props.onChangeLabel}
+          aria-label='Enter a name for this profile'
+          required
+        />
+      </div>
+      <div className='form-control'>
+        <label htmlFor='description' className='mb-2 block text-sm font-medium'>
+          Description
+        </label>
+        <textarea
+          id='description'
+          name='description'
+          rows={2}
+          className='textarea textarea-bordered w-full text-wrap'
+          value={props.data?.description}
+          onChange={props.onChangeDescription}
+          aria-label='Optional description for this profile'
+        />
+      </div>
+      <div className='form-control'>
+        <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
+          Temperature
+        </label>
+        <div className='input-group'>
+          <label htmlFor='temperature' className='input w-full'>
+            <input
+              id='temperature'
+              name='temperature'
+              type='number'
+              className='grow'
+              value={props.data?.temperature}
+              onChange={props.onChangeTemperature}
+              aria-label='Temperature in degrees Celsius'
+              min='0'
+              max='150'
+              step='0.1'
+            />
+            <span aria-label='degrees Celsius'>°C</span>
+          </label>
+        </div>
+      </div>
+      <div className='form-control'>
+        <label htmlFor='utility' className='mb-2 block text-sm font-medium' aria-label='Utility profile toggle'>
+          Utility profile
+        </label>
+        <input
+          id='utility'
+          name='utility'
+          type='checkbox'
+          className='toggle toggle-primary'
+          checked={!!props.data?.utility}
+          onChange={props.onChangeUtility}
+        />
+      </div>
+    </Card>
+  );
+}
diff --git a/web/src/pages/ProfileEdit/StandardProfileForm.jsx b/web/src/pages/ProfileEdit/StandardProfileForm.jsx
index 9813457e8..85febf936 100644
--- a/web/src/pages/ProfileEdit/StandardProfileForm.jsx
+++ b/web/src/pages/ProfileEdit/StandardProfileForm.jsx
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons/faTrashCan';
 import { Tooltip } from '../../components/Tooltip.jsx';
+import { ProfileMainInformation } from './ProfileMainInformation.jsx';
 import { getProfilePhases, removePhaseAt, updatePhaseAt } from './profilePhases.js';
 
 export function StandardProfileForm(props) {
@@ -58,57 +59,13 @@ export function StandardProfileForm(props) {
       }}
     >
       <div className='grid grid-cols-1 gap-4 lg:grid-cols-10'>
-        <Card sm={10} title='Profile Information'>
-          <div className='form-control'>
-            <label htmlFor='label' className='mb-2 block text-sm font-medium'>
-              Title
-            </label>
-            <input
-              id='label'
-              name='label'
-              className='input input-bordered w-full'
-              value={data?.label}
-              onChange={e => onFieldChange('label', e.target.value)}
-              aria-label='Enter a name for this profile'
-              required
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='description' className='mb-2 block text-sm font-medium'>
-              Description
-            </label>
-            <input
-              id='description'
-              name='description'
-              className='input input-bordered w-full'
-              value={data?.description}
-              onChange={e => onFieldChange('description', e.target.value)}
-              aria-label='Optional description for this profile'
-            />
-          </div>
-          <div className='form-control'>
-            <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>
-              Temperature
-            </label>
-            <div className='input-group'>
-              <label htmlFor='temperature' className='input w-full'>
-                <input
-                  id='temperature'
-                  name='temperature'
-                  type='number'
-                  className='grow'
-                  value={data?.temperature}
-                  onChange={e => onFieldChange('temperature', e.target.value)}
-                  aria-label='Temperature in degrees Celsius'
-                  min='0'
-                  max='150'
-                  step='0.1'
-                />
-                <span aria-label='degrees Celsius'>°C</span>
-              </label>
-            </div>
-          </div>
-        </Card>
+        <ProfileMainInformation
+          data={data}
+          onChangeLabel={e => onFieldChange('label', e.target.value)}
+          onChangeDescription={e => onFieldChange('description', e.target.value)}
+          onChangeTemperature={e => onFieldChange('temperature', e.target.value)}
+          onChangeUtility={e => onFieldChange('utility', !!e.target.checked)}
+        />
 
         <Card sm={10} title='Brew Phases'>
           <div className='space-y-4' role='group' aria-label='Brew phases configuration'>

From 705652c4c81ca980256ad7607fa9c08bf462aa82 Mon Sep 17 00:00:00 2001
From: Sartoric <6607379+Sartoric@users.noreply.github.com>
Date: Fri, 17 Jul 2026 20:01:45 +0200
Subject: [PATCH 2/2] removed comment

---
 .../pages/ProfileEdit/ExtendedProfileForm.jsx | 52 -------------------
 1 file changed, 52 deletions(-)

diff --git a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
index ac6bff3f0..a108cc4fb 100644
--- a/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
+++ b/web/src/pages/ProfileEdit/ExtendedProfileForm.jsx
@@ -78,58 +78,6 @@ export function ExtendedProfileForm(props) {
           onChangeTemperature={e => onFieldChange('temperature', e.target.value)}
           onChangeUtility={e => onFieldChange('utility', !!e.target.checked)}
         />
-        {/*<Card sm={10} title='Profile Information'>*/}
-        {/*  <div className='form-control'>*/}
-        {/*    <label htmlFor='label' className='mb-2 block text-sm font-medium'>*/}
-        {/*      Title*/}
-        {/*    </label>*/}
-        {/*    <input*/}
-        {/*      id='label'*/}
-        {/*      name='label'*/}
-        {/*      className='input input-bordered w-full'*/}
-        {/*      value={data?.label}*/}
-        {/*      onChange={e => onFieldChange('label', e.target.value)}*/}
-        {/*      aria-label='Enter a name for this profile'*/}
-        {/*      required*/}
-        {/*    />*/}
-        {/*  </div>*/}
-        {/*  <div className='form-control'>*/}
-        {/*    <label htmlFor='description' className='mb-2 block text-sm font-medium'>*/}
-        {/*      Description*/}
-        {/*    </label>*/}
-        {/*    <textarea*/}
-        {/*      id='description'*/}
-        {/*      name='description'*/}
-        {/*      rows={2}*/}
-        {/*      className='input input-bordered w-full text-wrap'*/}
-        {/*      value={data?.description}*/}
-        {/*      onChange={e => onFieldChange('description', e.target.value)}*/}
-        {/*      aria-label='Optional description for this profile'*/}
-        {/*    />*/}
-        {/*  </div>*/}
-        {/*  <div className='form-control'>*/}
-        {/*    <label htmlFor='temperature' className='mb-2 block text-sm font-medium'>*/}
-        {/*      Temperature*/}
-        {/*    </label>*/}
-        {/*    <div className='input-group'>*/}
-        {/*      <label htmlFor='temperature' className='input w-full'>*/}
-        {/*        <input*/}
-        {/*          id='temperature'*/}
-        {/*          name='temperature'*/}
-        {/*          type='number'*/}
-        {/*          className='grow'*/}
-        {/*          value={data?.temperature}*/}
-        {/*          onChange={e => onFieldChange('temperature', e.target.value)}*/}
-        {/*          aria-label='Temperature in degrees Celsius'*/}
-        {/*          min='0'*/}
-        {/*          max='150'*/}
-        {/*          step='0.1'*/}
-        {/*        />*/}
-        {/*        <span aria-label='degrees Celsius'>°C</span>*/}
-        {/*      </label>*/}
-        {/*    </div>*/}
-        {/*  </div>*/}
-        {/*</Card>*/}
         <Card sm={10}>
           <ExtendedProfileChart
             data={{ ...data, phases }}