Update view mode

src/components/collaboration-mode-picker.tsx

@@ -1,34 +1,32 @@
 import { Button, Popover, Icon } from '@wordpress/components';
+import {
+	store as coreDataStore,
+	type CoreDataActions,
+	type CoreDataSelectors,
+} from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { pencil, seen } from '@wordpress/icons';
-
-import {
-	store as collaborationModeStore,
-	type CollaborationModeStoreSelectors,
-	type CollaborationModeStoreActions,
-	CollaborationMode,
-} from '@/store/collaboration-mode-store';
+import { pencil, seen, chevronDown } from '@wordpress/icons';
 
 import '@/components/collaboration-mode-picker.scss';
 
 interface ModeOption {
-	value: CollaborationMode;
+	value: 'edit' | 'view';
 	label: string;
 	description: string;
 	icon: JSX.Element;
 }
 
 const MODES: ModeOption[] = [
 	{
-		value: CollaborationMode.EDIT,
+		value: 'edit',
 		label: __( 'Editing', 'vip-real-time-collaboration' ),
 		description: __( 'Edit document directly', 'vip-real-time-collaboration' ),
 		icon: pencil,
 	},
 	{
-		value: CollaborationMode.VIEW,
+		value: 'view',
 		label: __( 'Viewing', 'vip-real-time-collaboration' ),
 		description: __( 'Focus on content', 'vip-real-time-collaboration' ),
 		icon: seen,
@@ -43,17 +41,16 @@ export function CollaborationModePicker() {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >( null );
 
-	// Default value is Edit mode
-	const selectedMode = useSelect< CollaborationModeStoreSelectors, CollaborationMode >( select =>
-		select( collaborationModeStore ).getMode()
+	const selectedCollaborationEditorMode = useSelect< CoreDataSelectors, 'edit' | 'view' >( select =>
+		select( coreDataStore ).getCollaboratorMode()
 	);
 
-	const { setMode } = useDispatch< CollaborationModeStoreActions >( collaborationModeStore );
+	const { setCollaboratorMode } = useDispatch< CoreDataActions >( coreDataStore );
 
-	const currentMode = MODES.find( mode => mode.value === selectedMode );
+	const currentMode = MODES.find( mode => mode.value === selectedCollaborationEditorMode );
 
-	const handleModeSelect = ( mode: CollaborationMode ) => {
-		setMode( mode );
+	const handleModeSelect = ( mode: 'edit' | 'view' ) => {
+		setCollaboratorMode( mode );
 		setIsPopoverVisible( false );
 	};
 
@@ -68,7 +65,9 @@ export function CollaborationModePicker() {
 				ref={ setPopoverAnchor }
 				text={ currentMode?.label }
 				icon={ currentMode?.icon }
-			/>
+			>
+				<Icon icon={ chevronDown } />
+			</Button>
 			{ isPopoverVisible && (
 				<Popover
 					anchor={ popoverAnchor }
@@ -79,7 +78,7 @@ export function CollaborationModePicker() {
 				>
 					<div className="vip-collaboration-mode-menu">
 						{ MODES.map( ( { value, label, description, icon } ) => {
-							const isSelected = value === selectedMode;
+							const isSelected = value === selectedCollaborationEditorMode;
 							return (
 								<button
 									key={ value }

src/components/rtc-settings-panel.tsx

@@ -17,7 +17,7 @@ import {
 	SettingsStoreActions,
 	type SettingsStoreSelectors,
 } from '../store/settings-store';
-import { useModifyCodeEditor } from '@/hooks/use-modify-code-editor';
+import { useDisableSidebarInteraction } from '@/hooks/use-disable-sidebar-interaction';
 import { isDevelopment } from '@/utilities/config';
 import { CursorRegistry } from '@/utilities/cursor-registry';
 
@@ -70,8 +70,7 @@ export function RTCSettingsPanel() {
 	// RTCOverlay. A ref is used to persist the instance across re-renders.
 	const cursorRegistry = useRef< CursorRegistry >( new CursorRegistry() );
 
-	// Manage read-only state for the code editor.
-	useModifyCodeEditor();
+	useDisableSidebarInteraction();
 
 	return (
 		<>
@@ -128,14 +127,6 @@ export function RTCSettingsPanel() {
 								checked={ isDebugToolsEnabled }
 								onChange={ ( enabled: boolean ) => setSetting( Setting.DEBUG_TOOLS, enabled ) }
 							/>
-
-							<ToggleControl
-								label={ __( 'Enable collaboration modes', 'vip-real-time-collaboration' ) }
-								checked={ isCollaborationModePickerEnabled }
-								onChange={ ( enabled: boolean ) =>
-									setSetting( Setting.COLLABORATION_MODE_PICKER, enabled )
-								}
-							/>
 						</>
 					) }
 

src/hooks/use-disable-block-editing.ts

@@ -2,18 +2,14 @@
  * WordPress dependencies
  */
 import { useBlockEditingMode } from '@wordpress/block-editor';
+import { store as coreDataStore, type CoreDataSelectors } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { addFilter, removeFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import {
-	type CollaborationModeStoreSelectors,
-	store as CollaborationModeStore,
-	CollaborationMode,
-} from '@/store/collaboration-mode-store';
 import {
 	Setting,
 	store as rtcSettingsStore,
@@ -35,14 +31,13 @@ export function useDisableBlockEditing() {
 	);
 
 	// Get the current collaboration mode (view or edit).
-	const collaborationMode = useSelect< CollaborationModeStoreSelectors, CollaborationMode >(
-		select => select( CollaborationModeStore ).getMode()
+	const currentCollaborationEditorMode = useSelect< CoreDataSelectors, 'view' | 'edit' >( select =>
+		select( coreDataStore ).getCollaboratorMode()
 	);
 
 	// Determine if view-only mode should be active.
 	// TODO: Remove the Collaboration mode enabled check once we complete the feature.
-	const isViewOnlyActive =
-		isCollaborationModeEnabled && collaborationMode === CollaborationMode.VIEW;
+	const isViewOnlyActive = isCollaborationModeEnabled && currentCollaborationEditorMode === 'view';
 
 	// Set the block editing mode based on whether view-only is active.
 	// This hook must be called unconditionally to follow the Rules of Hooks.

src/hooks/use-disable-sidebar-interaction.ts

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreDataStore, type CoreDataSelectors } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Setting,
+	store as rtcSettingsStore,
+	type SettingsStoreSelectors,
+} from '@/store/settings-store';
+
+/**
+ * Custom hook that disables sidebar interaction when in view mode.
+ */
+export function useDisableSidebarInteraction() {
+	// Get the current collaboration mode (view or edit).
+	const currentCollaborationEditorMode = useSelect< CoreDataSelectors, 'view' | 'edit' >( select =>
+		select( coreDataStore ).getCollaboratorMode()
+	);
+
+	// Check if the Collaboration Mode Picker setting is enabled.
+	// TODO: Delete this once we complete the feature.
+	const isCollaborationModeEnabled = useSelect< SettingsStoreSelectors, boolean >( select =>
+		select( rtcSettingsStore ).getSetting( Setting.COLLABORATION_MODE_PICKER )
+	);
+
+	const shouldSidebarBeReadOnly =
+		isCollaborationModeEnabled && currentCollaborationEditorMode === 'view';
+
+	// Manage sidebar interaction.
+	useEffect( () => {
+		const sidebarElement = document.querySelector( '.editor-sidebar' );
+		const headerSettingsElement = document.querySelector( '.editor-header__settings' );
+
+		if (
+			sidebarElement instanceof HTMLDivElement &&
+			headerSettingsElement instanceof HTMLDivElement
+		) {
+			sidebarElement.style.pointerEvents = shouldSidebarBeReadOnly ? 'none' : 'auto';
+			headerSettingsElement.style.pointerEvents = shouldSidebarBeReadOnly ? 'none' : 'auto';
+		}
+	}, [ shouldSidebarBeReadOnly ] );
+}

src/store/settings-store.ts

@@ -36,7 +36,7 @@ const DEFAULT_STATE: SettingsState = {
 	[ Setting.POST_UPDATE_NOTIFICATION ]: true,
 	[ Setting.USER_ENTER_NOTIFICATION ]: true,
 	[ Setting.USER_EXIT_NOTIFICATION ]: false,
-	[ Setting.COLLABORATION_MODE_PICKER ]: false,
+	[ Setting.COLLABORATION_MODE_PICKER ]: isDevelopment() ? true : false,
 };
 
 // Settings that are only available in development mode

types/wordpress__core-data/index.d.ts

@@ -8,5 +8,9 @@ declare module '@wordpress/core-data' {
 
 	interface CoreDataSelectors {
 		getCurrentUser(): User;
+		getCollaboratorMode(): 'view' | 'edit';
+	}
+	interface CoreDataActions {
+		setCollaboratorMode: ( mode: 'view' | 'edit' ) => void;
 	}
 }