Finished wired changes

src/components/wired/common/GetWiredActionLayout.tsx

@@ -25,7 +25,7 @@ import { WiredActionTeleportView } from '../views/actions/WiredActionTeleportVie
 import { WiredActionToggleFurniStateView } from '../views/actions/WiredActionToggleFurniStateView';
 import { WiredActionLayout } from './WiredActionLayoutCode';
 
-export function GetWiredActionLayout(code: number): JSX.Element
+export const GetWiredActionLayout = (code: number) =>
 {
     switch(code)
     {

src/components/wired/common/GetWiredConditionLayout.tsx

@@ -15,7 +15,7 @@ import { WiredConditionTimeElapsedMoreView } from '../views/conditions/WiredCond
 import { WiredConditionUserCountInRoomView } from '../views/conditions/WiredConditionUserCountInRoomView';
 import { WiredConditionlayout } from './WiredConditionLayoutCode';
 
-export function GetWiredConditionLayout(code: number): JSX.Element
+export const GetWiredConditionLayout = (code: number) =>
 {
     switch(code)
     {

src/components/wired/common/GetWiredLayout.tsx

@@ -3,7 +3,7 @@ import { GetWiredActionLayout } from './GetWiredActionLayout';
 import { GetWiredConditionLayout } from './GetWiredConditionLayout';
 import { GetWiredTriggerLayout } from './GetWiredTriggerLayout';
 
-export function GetWiredLayout(trigger: Triggerable): JSX.Element
+export const GetWiredLayout = (trigger: Triggerable) =>
 {
     if(trigger instanceof WiredActionDefinition) return GetWiredActionLayout(trigger.code);
 

src/components/wired/common/GetWiredTimeLocale.ts

@@ -1,4 +1,4 @@
-export function GetWiredTimeLocale(value: number): string
+export const GetWiredTimeLocale = (value: number) =>
 {
     const time = Math.floor((value / 2));
 

src/components/wired/common/GetWiredTriggerLayout.tsx

@@ -14,7 +14,7 @@ import { WiredTriggeScoreAchievedView } from '../views/triggers/WiredTriggerScor
 import { WiredTriggerToggleFurniView } from '../views/triggers/WiredTriggerToggleFurniView';
 import { WiredTriggerLayout } from './WiredTriggerLayoutCode';
 
-export function GetWiredTriggerLayout(code: number): JSX.Element
+export const GetWiredTriggerLayout = (code: number) =>
 {
     switch(code)
     {

src/components/wired/views/WiredBaseView.tsx

@@ -5,6 +5,7 @@ import { Column } from '../../../common/Column';
 import { Flex } from '../../../common/Flex';
 import { Text } from '../../../common/Text';
 import { WiredEvent } from '../../../events';
+import { BatchUpdates } from '../../../hooks';
 import { dispatchUiEvent } from '../../../hooks/events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../layout';
 import { WiredFurniType } from '../common/WiredFurniType';
@@ -27,14 +28,29 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
     const [ wiredDescription, setWiredDescription ] = useState<string>(null);
     const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null } = useWiredContext();
 
+    const onSave = useCallback(() =>
+    {
+        if(validate && !validate()) return;
+
+        if(save) save();
+
+        setTimeout(() => dispatchUiEvent(new WiredEvent(WiredEvent.SAVE_WIRED)), 1);
+    }, [ save, validate ]);
+
+    const close = useCallback(() =>
+    {
+        setTrigger(null);
+    }, [ setTrigger ]);
+
     useEffect(() =>
     {
         if(!trigger) return;
 
         const spriteId = (trigger.spriteId || -1);
-
         const furniData = GetSessionDataManager().getFloorItemData(spriteId);
 
+        BatchUpdates(() =>
+        {
             if(!furniData)
             {
                 setWiredName(('NAME: ' + spriteId));
@@ -61,22 +77,9 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
 
                     return [];
                 });
+        });
     }, [ trigger, setIntParams, setStringParam, setFurniIds ]);
 
-    const onSave = useCallback(() =>
-    {
-        if(validate && !validate()) return;
-
-        if(save) save();
-
-        setTimeout(() => dispatchUiEvent(new WiredEvent(WiredEvent.SAVE_WIRED)), 1);
-    }, [ save, validate ]);
-
-    const close = useCallback(() =>
-    {
-        setTrigger(null);
-    }, [ setTrigger ]);
-
     return (
         <NitroCardView uniqueKey="nitro-wired" className="nitro-wired" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ close } />
@@ -88,14 +91,14 @@ export const WiredBaseView: FC<WiredBaseViewProps> = props =>
                     </Flex>
                     <Text small>{ wiredDescription }</Text>
                 </Column>
-                { (children !== null) && <hr className="m-0 bg-dark" /> }
+                { !!children && <hr className="m-0 bg-dark" /> }
                 { children }
                 { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
                     <>
                         <hr className="m-0 bg-dark" />
                         <WiredFurniSelectorView />
                     </> }
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
                     <Button fullWidth variant="secondary" onClick={ close }>{ LocalizeText('cancel') }</Button>
                 </Flex>

src/components/wired/views/actions/WiredActionBaseView.tsx

@@ -2,6 +2,8 @@ import { WiredActionDefinition } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { GetWiredTimeLocale } from '../../common/GetWiredTimeLocale';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
@@ -33,19 +35,17 @@ export const WiredActionBaseView: FC<WiredActionBaseViewProps> = props =>
 
     return (
         <WiredBaseView wiredType="action" requiresFurni={ requiresFurni } save={ onSave }>
-            { !children ? null : <>
             { children }
-                <hr className="my-1 mb-2 bg-dark" />
+            { !!children && <hr className="m-0 bg-dark" /> }
-            </> }
+            <Column>
-            <div className="form-group">
+                <Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(delay) ]) }</Text>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(delay) ]) }</label>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 0 }
                     max={ 20 }
                     value={ delay }
                     onChange={ event => setDelay(event) } />
-            </div>
+            </Column>
         </WiredBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx

@@ -1,5 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
@@ -14,14 +19,6 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
     const [ figure, setFigure ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
-
-        if(data.length > 0) setBotName(data[0]);
-        if(data.length > 1) setFigure(data[1].length > 0 ? data[1] : DEFAULT_FIGURE);
-    }, [ trigger ]);
-
     const copyLooks = useCallback(() =>
     {
         setFigure(GetSessionDataManager().figure);
@@ -32,16 +29,27 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
         setStringParam((botName + WIRED_STRING_DELIMETER + figure));
     }, [ botName, figure, setStringParam ]);
 
+    useEffect(() =>
+    {
+        const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
+
+        BatchUpdates(() =>
+        {
+            if(data.length > 0) setBotName(data[0]);
+            if(data.length > 1) setFigure(data[1].length > 0 ? data[1] : DEFAULT_FIGURE);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
-            <div className="d-flex align-items-center justify-content-center">
+            <Flex center>
                 <AvatarImageView figure={ figure } direction={ 4 } />
-                <button type="button" className="btn btn-primary" onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</button>
+                <Button onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</Button>
-            </div>
+            </Flex>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -10,38 +14,40 @@ export const WiredActionBotFollowAvatarView: FC<{}> = props =>
     const [ followMode, setFollowMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-        setFollowMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
         {
             setStringParam(botName);
             setIntParams([followMode]);
+        });
     }, [ followMode, botName, setStringParam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setBotName(trigger.stringData);
+            setFollowMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
                 <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="followMode" id="followMode1" checked={ (followMode === 1) } onChange={ event => setFollowMode(1) } />
-                    <label className="form-check-label" htmlFor="followMode1">
+                    <Text>{ LocalizeText('wiredfurni.params.start.following') }</Text>
-                        { LocalizeText('wiredfurni.params.start.following') }
+                </Flex>
-                    </label>
+                <Flex alignItems="center" gap={ 1 }>
-                </div>
-                <div className="form-check">
                     <input className="form-check-input" type="radio" name="followMode" id="followMode2" checked={ (followMode === 0) } onChange={ event => setFollowMode(0) } />
-                    <label className="form-check-label" htmlFor="followMode2">
+                    <Text>{ LocalizeText('wiredfurni.params.stop.following') }</Text>
-                        { LocalizeText('wiredfurni.params.stop.following') }
+                </Flex>
-                    </label>
+            </Column>
-                </div>
-            </div>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx

@@ -1,10 +1,13 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
 
-const allowedHanditemIds: number[] = [2, 5, 7, 8, 9, 10, 27];
+const ALLOWED_HAND_ITEM_IDS: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
 
 export const WiredActionBotGiveHandItemView: FC<{}> = props =>
 {
@@ -12,34 +15,40 @@ export const WiredActionBotGiveHandItemView: FC<{}> = props =>
     const [ handItemId, setHandItemId ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-        setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
         {
             setStringParam(botName);
             setIntParams([ handItemId ]);
+        });
     }, [ handItemId, botName, setStringParam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setBotName(trigger.stringData);
+            setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.handitem') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.handitem') }</Text>
                 <select className="form-select form-select-sm" value={ handItemId } onChange={ event => setHandItemId(parseInt(event.target.value)) }>
                     <option value="0">------</option>
-                    { allowedHanditemIds.map(value =>
+                    { ALLOWED_HAND_ITEM_IDS.map(value =>
                         {
                             return <option key={ value } value={ value }>{ LocalizeText(`handitem${ value }`) }</option>
                         }) }
                 </select>
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotMoveView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionBotMoveView: FC<{}> = props =>
     const [ botName, setBotName ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(botName);
     }, [ botName, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setBotName(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
 import { useWiredContext } from '../../context/WiredContext';
@@ -12,42 +16,48 @@ export const WiredActionBotTalkToAvatarView: FC<{}> = props =>
     const [ talkMode, setTalkMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStringParam(botName + WIRED_STRING_DELIMETER + message);
+            setIntParams([ talkMode ]);
+        });
+    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
+
     useEffect(() =>
     {
         const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
         
+        BatchUpdates(() =>
+        {
             if(data.length > 0) setBotName(data[0]);
             if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
     
             setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setStringParam(botName + WIRED_STRING_DELIMETER + message);
-        setIntParams([ talkMode ]);
-    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode1" checked={ (talkMode === 0) } onChange={ event => setTalkMode(0) } />
-                    <label className="form-check-label" htmlFor="talkMode1">{ LocalizeText('wiredfurni.params.talk') }</label>
+                    <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
-                </div>
+                </Flex>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode2" checked={ (talkMode === 1) } onChange={ event => setTalkMode(1) } />
-                    <label className="form-check-label" htmlFor="talkMode2">{ LocalizeText('wiredfurni.params.whisper') }</label>
+                    <Text>{ LocalizeText('wiredfurni.params.whisper') }</Text>
-                </div>
+                </Flex>
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotTalkView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
 import { useWiredContext } from '../../context/WiredContext';
@@ -12,42 +16,48 @@ export const WiredActionBotTalkView: FC<{}> = props =>
     const [ talkMode, setTalkMode ] = useState(-1);
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStringParam(botName + WIRED_STRING_DELIMETER + message);
+            setIntParams([ talkMode ]);
+        });
+    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
+
     useEffect(() =>
     {
         const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
         
+        BatchUpdates(() =>
+        {
             if(data.length > 0) setBotName(data[0]);
             if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
     
             setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setStringParam(botName + WIRED_STRING_DELIMETER + message);
-        setIntParams([ talkMode ]);
-    }, [ botName, message, talkMode, setStringParam, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ message } onChange={ event => setMessage(event.target.value) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode1" checked={ (talkMode === 0) } onChange={ event => setTalkMode(0) } />
-                    <label className="form-check-label" htmlFor="talkMode1">{ LocalizeText('wiredfurni.params.talk') }</label>
+                    <Text>{ LocalizeText('wiredfurni.params.talk') }</Text>
-                </div>
+                </Flex>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="talkMode" id="talkMode2" checked={ (talkMode === 1) } onChange={ event => setTalkMode(1) } />
-                    <label className="form-check-label" htmlFor="talkMode2">{ LocalizeText('wiredfurni.params.shout') }</label>
+                    <Text>{ LocalizeText('wiredfurni.params.shout') }</Text>
-                </div>
+                </Flex>
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionBotTeleportView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionBotTeleportView: FC<{}> = props =>
     const [ botName, setBotName ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setBotName(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(botName);
     }, [ botName, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setBotName(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.bot.name') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.bot.name') }</Text>
                 <input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionChatView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionChatView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(message);
     }, [ message, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setMessage(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionGiveRewardView.tsx

@@ -1,6 +1,12 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -13,41 +19,8 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
     const [ rewardsLimit, setRewardsLimit ] = useState(1);
     const [ limitationInterval, setLimitationInterval ] = useState(1);
     const [ rewards, setRewards ] = useState<{ isBadge: boolean, itemCode: string, probability: number }[]>([]);
-
     const { trigger = null, setIntParams = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setRewardTime(trigger.intData.length > 0 ? trigger.intData[0] : 0);
-        setUniqueRewards(trigger.intData.length > 1 ? trigger.intData[1] === 1 : false);
-        setRewardsLimit(trigger.intData.length > 2 ? trigger.intData[2] : 0);
-        setLimitationInterval(trigger.intData.length > 3 ? trigger.intData[3] : 0);
-        setLimitEnabled(trigger.intData.length > 3 ? trigger.intData[3] > 0 : false);
-
-        const readRewards: { isBadge: boolean, itemCode: string, probability: number }[] = [];
-
-        if(trigger.stringData.length > 0 && trigger.stringData.includes(';'))
-        {
-            const splittedRewards = trigger.stringData.split(';');
-
-            for(const rawReward of splittedRewards)
-            {
-                const reward = rawReward.split(',');
-
-                if(reward.length !== 3) continue;
-
-                readRewards.push({ isBadge: reward[0] === '0', itemCode: reward[1], probability: Number(reward[2]) });
-            }
-        }
-
-        if(readRewards.length === 0)
-        {
-            readRewards.push({ isBadge: false, itemCode: '', probability: null });
-        }
-
-        setRewards(readRewards);
-    }, [ trigger ]);
-
     const addReward = useCallback(() =>
     {
         setRewards(rewards => [...rewards, { isBadge: false, itemCode: '', probability: null }]);
@@ -55,11 +28,15 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
 
     const removeReward = useCallback((index: number) =>
     {
-        const rewardsClone = Array.from(rewards);
+        setRewards(prevValue =>
-        rewardsClone.splice(index, 1);
+            {
+                const newValues = Array.from(prevValue);
 
-        setRewards(rewardsClone);
+                newValues.splice(index, 1);
-    }, [ rewards, setRewards ]);
+
+                return newValues;
+            });
+    }, [ setRewards ]);
 
     const updateReward = useCallback((index: number, isBadge: boolean, itemCode: string, probability: number) =>
     {
@@ -88,23 +65,56 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
         }
 
         if(stringRewards.length > 0)
+        {
+            BatchUpdates(() =>
             {
                 setStringParam(stringRewards.join(';'));
                 setIntParams([rewardTime, uniqueRewards ? 1 : 0, rewardsLimit, limitationInterval]);
+            });
         }
     }, [ rewardTime, uniqueRewards, rewardsLimit, limitationInterval, rewards, setIntParams, setStringParam ]);
 
+    useEffect(() =>
+    {
+        const readRewards: { isBadge: boolean, itemCode: string, probability: number }[] = [];
+
+        if(trigger.stringData.length > 0 && trigger.stringData.includes(';'))
+        {
+            const splittedRewards = trigger.stringData.split(';');
+
+            for(const rawReward of splittedRewards)
+            {
+                const reward = rawReward.split(',');
+
+                if(reward.length !== 3) continue;
+
+                readRewards.push({ isBadge: reward[0] === '0', itemCode: reward[1], probability: Number(reward[2]) });
+            }
+        }
+
+        if(readRewards.length === 0) readRewards.push({ isBadge: false, itemCode: '', probability: null });
+
+        BatchUpdates(() =>
+        {
+            setRewardTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+            setUniqueRewards((trigger.intData.length > 1) ? (trigger.intData[1] === 1) : false);
+            setRewardsLimit((trigger.intData.length > 2) ? trigger.intData[2] : 0);
+            setLimitationInterval((trigger.intData.length > 3) ? trigger.intData[3] : 0);
+            setLimitEnabled((trigger.intData.length > 3) ? trigger.intData[3] > 0 : false);
+            setRewards(readRewards);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-check">
+            <Flex alignItems="center" gap={ 1 }>
-                <input className="form-check-input" type="checkbox" id="limitEnabled" onChange={(e) => setLimitEnabled(e.target.checked)} />
+                <input className="form-check-input" type="checkbox" id="limitEnabled" onChange={ event => setLimitEnabled(event.target.checked)} />
-                <label className="form-check-label" htmlFor="uniqueRewards">
+                <Text>{ LocalizeText('wiredfurni.params.prizelimit', ['amount'], [limitEnabled ? rewardsLimit.toString() : '']) }</Text>
-                    { LocalizeText('wiredfurni.params.prizelimit', ['amount'], [limitEnabled ? rewardsLimit.toString() : '']) }
+            </Flex>
-                </label>
+            { !limitEnabled &&
-            </div>
+                <Text center small className="bg-muted rounded p-1">
-            { !limitEnabled && <div className="bg-muted rounded small text-black p-1 text-center">
                     Reward limit not set. Make sure rewards are badges or non-tradeable items.
-                </div> }
+                </Text> }
             { limitEnabled &&
                 <ReactSlider
                     className={ 'nitro-slider' }
@@ -112,61 +122,53 @@ export const WiredActionGiveRewardView: FC<{}> = props =>
                     max={ 1000 }
                     value={ rewardsLimit }
                     onChange={ event => setRewardsLimit(event) } /> }
-            <hr className="my-1 mb-2 bg-dark" />
+            <hr className="m-0 bg-dark" />
-            <div className="fw-bold">How ofter can a user be rewarded?</div>
+            <Column gap={ 1 }>
-            <div className="d-flex">
+                <Text bold>How often can a user be rewarded?</Text>
+                <Flex gap={ 1 }>
                     <select className="form-select form-select-sm w-100" value={ rewardTime } onChange={ (e) => setRewardTime(Number(e.target.value)) }>
                         <option value="0">Once</option>
                         <option value="3">Once every { limitationInterval } minutes</option>
                         <option value="2">Once every { limitationInterval } hours</option>
                         <option value="1">Once every { limitationInterval } days</option>
                     </select>
-                { rewardTime > 0 && <input type="number" className="ms-2 form-control form-control-sm" value={ limitationInterval } onChange={ event => setLimitationInterval(Number(event.target.value)) } /> }
+                    { (rewardTime > 0) && <input type="number" className="form-control form-control-sm" value={ limitationInterval } onChange={ event => setLimitationInterval(Number(event.target.value)) } /> }
-            </div>
+                </Flex>
-            <hr className="my-1 mb-2 bg-dark" />
+            </Column>
-            <div className="form-check">
+            <hr className="m-0 bg-dark" />
+            <Flex alignItems="center" gap={ 1 }>
                 <input className="form-check-input" type="checkbox" id="uniqueRewards" checked={ uniqueRewards } onChange={(e) => setUniqueRewards(e.target.checked)} />
-                <label className="form-check-label" htmlFor="uniqueRewards">
+                <Text>Unique rewards</Text>
-                    Unique rewards
+            </Flex>
-                </label>
+            <Text center small className="bg-muted rounded p-1">
-            </div>
+                If checked each reward will be given once to each user. This will disable the probabilities option.
-            <div className="bg-muted rounded small text-black p-1 text-center">If checked each reward will be given once to each user. This will disable the probabilities option.</div>
+            </Text>
-            <hr className="my-1 mb-2 bg-dark" />
+            <hr className="m-0 bg-dark" />
-            <div className="d-flex justify-content-between align-items-center">
+            <Flex justifyContent="between" alignItems="center">
-                <div className="fw-bold">Rewards</div>
+                <Text bold>Rewards</Text>
-                <div className="btn btn-sm btn-success" onClick={ addReward }><i className="fas fa-plus" /></div>
+                <Button variant="success" onClick={ addReward }>
-            </div>
+                    <FontAwesomeIcon icon="plus" />
-            <table className="table-sm">
+                </Button>
-                <thead>
+            </Flex>
-                    <tr>
+            <Column gap={ 1 }>
-                        <td>Badge?</td>
-                        <td>Item Code</td>
-                        <td>Probability</td>
-                        <td></td>
-                    </tr>
-                </thead>
-                <tbody>
                 { rewards && rewards.map((reward, index) =>
                     {
                         return (
-                                <tr key={ index }>
+                            <Flex key={ index } gap={ 1 }>
-                                    <td className="d-flex align-items-center justify-content-center">
+                                <Flex alignItems="center" gap={ 1 }>
                                     <input className="form-check-input" type="checkbox" checked={ reward.isBadge } onChange={(e) => updateReward(index, e.target.checked, reward.itemCode, reward.probability)} />
-                                    </td>
+                                    <Text small>Badge?</Text>
-                                    <td>
+                                </Flex>
-                                        <input type="text" className="form-control form-control-sm" value={ reward.itemCode } onChange={ e => updateReward(index, reward.isBadge, e.target.value, reward.probability) } />
+                                <input type="text" className="form-control form-control-sm" value={ reward.itemCode } onChange={ e => updateReward(index, reward.isBadge, e.target.value, reward.probability) } placeholder="Item Code" />
-                                    </td>
+                                <input type="number" className="form-control form-control-sm" value={ reward.probability } onChange={ e => updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } placeholder="Probability" />
-                                    <td>
+                                { (index > 0) &&
-                                        <input type="number" className="form-control form-control-sm" value={ reward.probability } onChange={ e => updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } />
+                                    <Button variant="danger" onClick={ event => removeReward(index) }>
-                                    </td>
+                                        <FontAwesomeIcon icon="trash" />
-                                    <td>
+                                    </Button> }
-                                        { index > 0 && <button className="btn btn-sm btn-danger" onClick={() => removeReward(index) }><i className="fas fa-trash" /></button> }
+                            </Flex>
-                                    </td>
-                                </tr>
                         )
                     }) }
-                </tbody>
+            </Column>
-            </table>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx

@@ -1,6 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -12,7 +16,14 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
     const [ selectedTeam, setSelectedTeam ] = useState(1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ points, time, selectedTeam ]);
+    }, [ points, time, selectedTeam, setIntParams ]);
+
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -26,47 +37,41 @@ export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
                 setTime(1);
                 setSelectedTeam(1);
             }
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setIntParams([ points, time, selectedTeam ]);
-    }, [ points, time, selectedTeam, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </div>
+            </Column>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [1, 2, 3, 4].map(value =>
                     {
                         return (
-                            <div key={ value } className="form-check">
+                            <Flex key={ value } gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ value }` } checked={ (selectedTeam === value) } onChange={ event => setSelectedTeam(value) } />
-                                <label className="form-check-label" htmlFor={'selectedTeam' + value}>
+                                <Text>{ LocalizeText('wiredfurni.params.team.' + value) }</Text>
-                                    { LocalizeText('wiredfurni.params.team.' + value) }
+                            </Flex>
-                                </label>
-                            </div>
                         );
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionGiveScoreView.tsx

@@ -1,6 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,7 +14,14 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
     const [ time, setTime ] = useState(1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ points, time ]);
+    }, [ points, time, setIntParams ]);
+
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -23,33 +33,29 @@ export const WiredActionGiveScoreView: FC<{}> = props =>
                 setPoints(1);
                 setTime(1);
             }
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setIntParams([ points, time ]);
-    }, [ points, time, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 100 }
                     value={ points }
                     onChange={ event => setPoints(event) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionJoinTeamView.tsx

@@ -1,5 +1,8 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,32 +12,30 @@ export const WiredActionJoinTeamView: FC<{}> = props =>
     const [ selectedTeam, setSelectedTeam ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ selectedTeam ]);
     }, [ selectedTeam, setIntParams ]);
 
+    useEffect(() =>
+    {
+        setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.team') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.team') }</Text>
                 { [1, 2, 3, 4].map(team =>
                     {
                         return (
-                            <div key={ team } className="form-check">
+                            <Flex key={ team } gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="selectedTeam" id={ `selectedTeam${ team }` } checked={ (selectedTeam === team) } onChange={ event => setSelectedTeam(team) } />
-                                <label className="form-check-label" htmlFor={ `selectedTeam${ team }` }>
+                                <Text>{ LocalizeText(`wiredfurni.params.team.${ team }`) }</Text>
-                                    { LocalizeText(`wiredfurni.params.team.${ team }`) }
+                            </Flex>
-                                </label>
-                            </div>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionKickFromRoomView.tsx

@@ -1,5 +1,7 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -9,22 +11,22 @@ export const WiredActionKickFromRoomView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setStringParam(message);
     }, [ message, setStringParam ]);
 
+    useEffect(() =>
+    {
+        setMessage(trigger.stringData);
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionMoveAndRotateFurniView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -31,7 +35,14 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
     const [ rotation, setRotation ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ movement, rotation ]);
+    }, [ movement, rotation, setIntParams ]);
+
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -43,47 +54,39 @@ export const WiredActionMoveAndRotateFurniView: FC<{}> = props =>
                 setMovement(-1);
                 setRotation(-1);
             }
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setIntParams([ movement, rotation ]);
-    }, [ movement, rotation, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.startdir') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
-                <div className="row row-col-4">
+                <Flex gap={ 1 }>
                     { directionOptions.map(option =>
                         {
                             return (
-                                <div key={ option.value } className="col">
+                                <Flex alignItems="center" gap={ 1 }>
-                                    <div className="form-check">
                                     <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ option.value }` }>
+                                    <Text>
                                         <i className={ `icon icon-${ option.icon }` } />
-                                        </label>
+                                    </Text>
-                                    </div>
+                                </Flex>
-                                </div>
                             )
                         }) }
-                </div>
+                </Flex>
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.turn') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.turn') }</Text>
                 { rotationOptions.map(option =>
                     {
                         return (
-                            <div key={ option } className="form-check">
+                            <Flex alignItems="center" gap={ 1 }>
                                 <input className="form-check-input" type="radio" name="rotation" id={ `rotation${ option }` } checked={ (rotation === option) } onChange={ event => setRotation(option) } />
-                                <label className="form-check-label" htmlFor={ `rotation${ option }` }>
+                                <Text>{ LocalizeText(`wiredfurni.params.turn.${ option }`) }</Text>
-                                    { LocalizeText(`wiredfurni.params.turn.${ option }`) }
+                            </Flex>
-                                </label>
-                            </div>
                         )
                     }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionMoveFurniToView.tsx

@@ -1,6 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -30,7 +34,14 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
     const [ movement, setMovement ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ movement, spacing ]);
+    }, [ movement, spacing, setIntParams ]);
+
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -42,42 +53,34 @@ export const WiredActionMoveFurniToView: FC<{}> = props =>
                 setSpacing(-1);
                 setMovement(-1);
             }
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setIntParams([ movement, spacing ]);
-    }, [ movement, spacing, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 5 }
                     value={ spacing }
                     onChange={ event => setSpacing(event) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.startdir') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.startdir') }</Text>
-                <div className="row row-cold-4">
+                <Flex gap={ 1 }>
                     { directionOptions.map(value =>
                         {
                             return (
-                                <div key={ value.value } className="col">
+                                <Flex key={ value.value } alignItems="center" gap={ 1 }>
-                                    <div className="form-check">
                                     <input className="form-check-input" type="radio" name="movement" id={ `movement${ value.value }` } checked={ (movement === value.value) } onChange={ event => setMovement(value.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ value.value }` }>
+                                    <Text><i className={ `icon icon-${ value.icon }` } /></Text>
-                                            <i className={ `icon icon-${ value.icon }` } />
+                                </Flex>
-                                        </label>
-                                    </div>
-                                </div>
                             )
                         }) }
-                </div>
+                </Flex>
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionMoveFurniView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -43,7 +47,14 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
     const [ rotation, setRotation ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
+    const save = useCallback(() =>
+    {
+        setIntParams([ movement, rotation ]);
+    }, [ movement, rotation, setIntParams ]);
+
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -55,55 +66,45 @@ export const WiredActionMoveFurniView: FC<{}> = props =>
                 setMovement(-1);
                 setRotation(-1);
             }
+        });
     }, [ trigger ]);
 
-    const save = useCallback(() =>
-    {
-        setIntParams([ movement, rotation ]);
-    }, [ movement, rotation, setIntParams ]);
-
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.movefurni') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.movefurni') }</Text>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="radio" name="selectedTeam" id="movement0" checked={ (movement === 0) } onChange={ event => setMovement(0) } />
-                    <label className="form-check-label" htmlFor="movement0">
+                    <Text>{ LocalizeText('wiredfurni.params.movefurni.0') }</Text>
-                        { LocalizeText('wiredfurni.params.movefurni.0') }
+                </Flex>
-                    </label>
+                <Flex gap={ 1 }>
-                </div>
-                <div className="row row-col-4">
                     { directionOptions.map(option =>
                         {
                             return (
-                                <div key={ option.value } className="col">
+                                <Flex alignItems="center" key={ option.value } gap={ 1 }>
-                                    <div className="form-check">
                                     <input className="form-check-input" type="radio" name="movement" id={ `movement${ option.value }` } checked={ (movement === option.value) } onChange={ event => setMovement(option.value) } />
-                                        <label className="form-check-label" htmlFor={ `movement${ option.value }` }>
                                     <i className={ `icon icon-${ option.icon }` } />
-                                        </label>
+                                </Flex>
-                                    </div>
-                                </div>
                             )
                         }) }
                     <div className="col" />
-                </div>
+                </Flex>
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.rotatefurni') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.rotatefurni') }</Text>
                 { rotationOptions.map(option =>
                         {
                             return (
-                                <div key={ option } className="form-check">
+                                <Flex alignItems="center" key={ option } gap={ 1 }>
                                     <input className="form-check-input" type="radio" name="rotation" id={ `rotation${ option }` } checked={ (rotation === option) } onChange={ event => setRotation(option) } />
-                                    <label className="form-check-label" htmlFor={'rotation' + option}>
+                                    <Text>
                                         { [1, 2].includes(option) && <i className={ `icon icon-rot-${ option }` } /> }
                                         { LocalizeText(`wiredfurni.params.rotatefurni.${ option }`) }
-                                    </label>
+                                    </Text>
-                                </div>
+                                </Flex>
                             )
                         }) }
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionMuteUserView.tsx

@@ -1,6 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,33 +14,39 @@ export const WiredActionMuteUserView: FC<{}> = props =>
     const [ message, setMessage ] = useState('');
     const { trigger = null, setIntParams = null, setStringParam = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
-        setMessage(trigger.stringData);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
         {
             setIntParams([ time ]);
             setStringParam(message);
+        });
     }, [ time, message, setIntParams, setStringParam ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+            setMessage(trigger.stringData);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
-            <div className="form-group mb-2">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.length.minutes', ['minutes'], [ time.toString() ]) }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.length.minutes', ['minutes'], [ time.toString() ]) }</Text>
                 <ReactSlider
                     className={ 'nitro-slider' }
                     min={ 1 }
                     max={ 10 }
                     value={ time }
                     onChange={ event => setTime(event) } />
-            </div>
+            </Column>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.message') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.message') }</Text>
                 <input type="text" className="form-control form-control-sm" value={ message } onChange={ event => setMessage(event.target.value) } maxLength={ 100 } />
-            </div>
+            </Column>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/actions/WiredActionSetFurniStateToView.tsx

@@ -1,5 +1,9 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredActionBaseView } from './WiredActionBaseView';
@@ -11,41 +15,38 @@ export const WiredActionSetFurniStateToView: FC<{}> = props =>
     const [ positionFlag, setPositionFlag ] = useState(-1);
     const { trigger = null, setIntParams = null } = useWiredContext();
 
-    useEffect(() =>
-    {
-        setStateFlag(trigger.getBoolean(0) ? 1 : 0);
-        setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
-        setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
-    }, [ trigger ]);
-
     const save = useCallback(() =>
     {
         setIntParams([ stateFlag, directionFlag, positionFlag ]);
     }, [ directionFlag, positionFlag, stateFlag, setIntParams ]);
 
+    useEffect(() =>
+    {
+        BatchUpdates(() =>
+        {
+            setStateFlag(trigger.getBoolean(0) ? 1 : 0);
+            setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
+            setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+        });
+    }, [ trigger ]);
+
     return (
         <WiredActionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
-            <div className="form-group">
+            <Column gap={ 1 }>
-                <label className="fw-bold">{ LocalizeText('wiredfurni.params.conditions') }</label>
+                <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <div className="form-check">
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="stateFlag" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="stateFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.state') }
+                </Flex>
-                    </label>
+                <Flex alignItems="center" gap={ 1 }>
-                </div>
-                <div className="form-check">
                     <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="directionFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.direction') }
+                </Flex>
-                    </label>
+                <Flex alignItems="center" gap={ 1 }>
-                </div>
-                <div className="form-check">
                     <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
-                    <label className="form-check-label" htmlFor="positionFlag">
+                    <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
-                        { LocalizeText('wiredfurni.params.condition.position') }
+                </Flex>
-                    </label>
+            </Column>
-                </div>
-            </div>
         </WiredActionBaseView>
     );
 }

src/components/wired/views/conditions/WiredConditionFurniHasFurniOnView.tsx

@@ -29,7 +29,7 @@ export const WiredConditionFurniHasFurniOnView: FC<{}> = props =>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <Flex gap={ 1 } key={ value }>
+                            <Flex alignItems="center" gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
                                 <Text>{ LocalizeText('wiredfurni.params.requireall.' + value) }</Text>
                             </Flex>

src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx

@@ -29,7 +29,7 @@ export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
                 { [0, 1].map(value =>
                     {
                         return (
-                            <Flex gap={ 1 } key={ value }>
+                            <Flex alignItems="center" gap={ 1 } key={ value }>
                                 <input className="form-check-input" type="radio" name="requireAll" id={ `requireAll${ value }` } checked={ (requireAll === value) } onChange={ event => setRequireAll(value) } />
                                 <Text>{ LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }</Text>
                             </Flex>

src/components/wired/views/conditions/WiredConditionFurniMatchesSnapshotView.tsx

@@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -20,25 +21,28 @@ export const WiredConditionFurniMatchesSnapshotView: FC<{}> = props =>
     }, [ directionFlag, positionFlag, stateFlag, setIntParams ]);
 
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             setStateFlag(trigger.getBoolean(0) ? 1 : 0);
             setDirectionFlag(trigger.getBoolean(1) ? 1 : 0);
             setPositionFlag(trigger.getBoolean(2) ? 1 : 0);
+        });
     }, [ trigger ]);
     
     return (
         <WiredConditionBaseView requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID } save={ save }>
             <Column gap={ 1 }>
                 <Text bold>{ LocalizeText('wiredfurni.params.conditions') }</Text>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="stateFlag" onChange={ event => setStateFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.state') }</Text>
                 </Flex>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="directionFlag" onChange={ event => setDirectionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.direction') }</Text>
                 </Flex>
-                <Flex gap={ 1 }>
+                <Flex alignItems="center" gap={ 1 }>
                     <input className="form-check-input" type="checkbox" id="positionFlag" onChange={ event => setPositionFlag(event.target.checked ? 1 : 0) } />
                     <Text>{ LocalizeText('wiredfurni.params.condition.position') }</Text>
                 </Flex>

src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx

@@ -3,6 +3,7 @@ import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredConditionBaseView } from './WiredConditionBaseView';
@@ -19,6 +20,8 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
     }, [ min, max, setIntParams ]);
 
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             if(trigger.intData.length >= 2)
             {
@@ -30,6 +33,7 @@ export const WiredConditionUserCountInRoomView: FC<{}> = props =>
                 setMin(1);
                 setMax(1);
             }
+        });
     }, [ trigger ]);
     
     return (

src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx

@@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@@ -20,9 +21,12 @@ export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
     }, [ username, avatarMode, setStringParam ]);
 
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             setUsername(trigger.stringData);
-        setAvatarMode(trigger.stringData ? 1 : 0)
+            setAvatarMode(trigger.stringData ? 1 : 0);
+        });
     }, [ trigger ]);
 
     return (

src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx

@@ -3,6 +3,7 @@ import { GetSessionDataManager, LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { WiredFurniType } from '../../common/WiredFurniType';
 import { useWiredContext } from '../../context/WiredContext';
 import { WiredTriggerBaseView } from './WiredTriggerBaseView';
@@ -14,15 +15,21 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
     const { trigger = null, setStringParam = null, setIntParams = null } = useWiredContext();
 
     const save = useCallback(() =>
+    {
+        BatchUpdates(() =>
         {
             setStringParam(message);
             setIntParams([ triggererAvatar ]);
+        });
     }, [ message, triggererAvatar, setStringParam, setIntParams ]);
 
     useEffect(() =>
+    {
+        BatchUpdates(() =>
         {
             setMessage(trigger.stringData);
             setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+        });
     }, [ trigger ]);
     
     return (