[WebUI 2.2.5] Unified Canvas Alternate UI Beta (#1951)

* Fix Prompt Placeholder Text Color

* Display Model Desc as tooltip in SiteHeader

This'll allow the user to quickly access info like activation token for that model if they set it in the description.

* Unified Canvas UI Beta

* Initial Test Build

* Make Snap Grid Hotkey Accessible Always

frontend/src/features/system/components/ModelSelect.tsx

@@ -23,8 +23,9 @@ const selector = createSelector(
       },
       ''
     );
+    const activeDesc = model_list[activeModel].description;
 
-    return { models, activeModel, isProcessing };
+    return { models, activeModel, isProcessing, activeDesc };
   },
   {
     memoizeOptions: {
@@ -35,7 +36,8 @@ const selector = createSelector(
 
 const ModelSelect = () => {
   const dispatch = useAppDispatch();
-  const { models, activeModel, isProcessing } = useAppSelector(selector);
+  const { models, activeModel, isProcessing, activeDesc } =
+    useAppSelector(selector);
   const handleChangeModel = (e: ChangeEvent<HTMLSelectElement>) => {
     dispatch(requestModelChange(e.target.value));
   };
@@ -48,6 +50,7 @@ const ModelSelect = () => {
     >
       <IAISelect
         style={{ fontSize: '0.8rem' }}
+        tooltip={activeDesc}
         isDisabled={isProcessing}
         value={activeModel}
         validValues={models}

frontend/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -32,10 +32,11 @@ import IAISelect from 'common/components/IAISelect';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { optionsSelector } from 'features/options/store/optionsSelectors';
+import { setShouldUseCanvasBetaLayout } from 'features/options/store/optionsSlice';
 
 const selector = createSelector(
   [systemSelector, optionsSelector],
-  (system) => {
+  (system, options) => {
     const {
       shouldDisplayInProgressType,
       shouldConfirmOnDelete,
@@ -45,6 +46,8 @@ const selector = createSelector(
       enableImageDebugging,
     } = system;
 
+    const { shouldUseCanvasBetaLayout } = options;
+
     return {
       shouldDisplayInProgressType,
       shouldConfirmOnDelete,
@@ -52,6 +55,7 @@ const selector = createSelector(
       models: _.map(model_list, (_model, key) => key),
       saveIntermediatesInterval,
       enableImageDebugging,
+      shouldUseCanvasBetaLayout,
     };
   },
   {
@@ -93,6 +97,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     shouldDisplayGuides,
     saveIntermediatesInterval,
     enableImageDebugging,
+    shouldUseCanvasBetaLayout,
   } = useAppSelector(selector);
 
   /**
@@ -173,6 +178,14 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                   dispatch(setShouldDisplayGuides(e.target.checked))
                 }
               />
+              <IAISwitch
+                styleClass="settings-modal-item"
+                label={'Use Canvas Beta Layout'}
+                isChecked={shouldUseCanvasBetaLayout}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
+                }
+              />
             </div>
 
             <div className="settings-modal-items">