Merge pull request #34065 from overleaf/ds-move-toggle-to-right

[WEB] Move Code/Visual toggle to right-hand side and redesign

GitOrigin-RevId: efc1aa062fd44e20fdf719a6d4ecba9d8bb0e5e8

services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx

@@ -173,7 +173,6 @@ const Toolbar = memo(function Toolbar() {
           className="ol-cm-toolbar toolbar-editor"
           ref={elementRef}
         >
-          {!visualPreviewEnabled && <EditorSwitch />}
           {showActions && (
             <ToolbarItems
               state={state}
@@ -206,6 +205,7 @@ const Toolbar = memo(function Toolbar() {
             className="ol-cm-toolbar-button-group ol-cm-toolbar-end"
             ref={handleButtons}
           >
+            {!visualPreviewEnabled && <EditorSwitch />}
             {sourceEditorToolbarEndButtons.map(
               ({ import: { default: Component }, path }) => (
                 <Component key={path} />

services/web/frontend/js/features/source-editor/components/editor-switch.tsx

@@ -57,7 +57,7 @@ function EditorSwitch() {
             onChange={handleChange}
           />
           <label htmlFor={inputId} className="toggle-switch-label">
-            <span>{t('code_editor')}</span>
+            <span>{t('code')}</span>
           </label>
 
           <RichTextToggle
@@ -92,7 +92,7 @@ const RichTextToggle: FC<{
         disabled={disabled}
       />
       <label htmlFor={inputId} className="toggle-switch-label">
-        <span>{t('visual_editor')}</span>
+        <span>{t('visual')}</span>
       </label>
     </span>
   )