Refactor UI mode switching and add sidebar state management

Refactors the permission-based UI switching to use existing robust
methods (addClassicUI/addNotebookbarUI) and adds sidebar visibility
state management across mode switches.

UIManager:
- Refactored onUpdatePermission to use addClassicUI/addNotebookbarUI
- Added safety checks to prevent duplicate component creation
- Added sidebar visibility management (show in edit, hide in readonly)

SidebarBase:
- Added showSidebar() method to restore sidebar visibility client-side
- Complements existing closeSidebar() for clean state management

This ensures:
- Consistent UI initialization (fixes TopToolbar and style dropdowns)
- Sidebar state is preserved across mode switches
- Robust handling of duplicate calls and edge cases

Signed-off-by: Darshan-upadhyay1110 <[email protected]>
Change-Id: I61b71cc4c3a68cce77dc198631fb6600dbb6a0de

Author: Darshan-upadhyay1110

browser/src/control/Control.SidebarBase.ts

@@ -92,6 +92,15 @@ abstract class SidebarBase extends JSDialogComponent {
 		this.map.uiManager.setDocTypePref('Show' + upperCaseType, false);
 	}
 
+	showSidebar() {
+		$(`#${this.type}-dock-wrapper`).addClass('visible');
+		if (this.builder && (this.builder as any).windowId === WindowId.Sidebar)
+			$(`#${this.type}-dock-wrapper`).addClass('coreBased');
+
+		const upperCaseType = this.type[0].toUpperCase() + this.type.slice(1);
+		this.map.uiManager.setDocTypePref('Show' + upperCaseType, true);
+	}
+
 	protected onJSUpdate(e: FireEvent) {
 		// reduce unwanted warnings in console
 		if (e?.data?.control.id === 'addonimage') {

browser/src/control/Control.UIManager.ts

@@ -45,6 +45,9 @@ class UIManager extends window.L.Control {
 	hiddenCommands: { [key: string]: boolean } = {};
 	// Hidden Notebookbar tabs.
 	hiddenTabs: { [key: string]: boolean } = {};
+	permissionViewMode: any = null;
+	// Add a flag to track initialization
+	private isUIInitialized: boolean = false;
 
 	/**
 	 * Called when the UIManager control is added to the map.
@@ -357,21 +360,8 @@ class UIManager extends window.L.Control {
 		if (!isMobile && !enableNotebookbar)
 			this.map.topToolbar = JSDialog.TopToolbar(this.map);
 
-		// this will execute only when UI get initialized
-		if (!isMobile) {
-			this.topReadonlyBtn = document.getElementById('readonlyMode');
-			const label = this.topReadonlyBtn?.querySelector(
-				'.unolabel',
-			) as HTMLElement | null;
-			if (label) {
-				label.textContent = _('Read-only');
-				this.topReadonlyBtn.setAttribute('data-cooltip', _('Permission Mode'));
-				window.L.control.attachTooltipEventListener(
-					this.topReadonlyBtn,
-					this.map,
-				);
-			}
-		}
+		this.permissionViewMode = new PermissionViewMode(this.map);
+		this.permissionViewMode.init();
 	}
 
 	/**
@@ -1475,43 +1465,28 @@ class UIManager extends window.L.Control {
 		var enableNotebookbar = this.shouldUseNotebookbarMode();
 		if (enableNotebookbar && !window.mode.isMobile()) {
 			if (e.detail.perm === 'edit') {
-				if (this.map.menubar) {
-					this.map.removeControl(this.map.menubar);
-					this.map.menubar = null;
+				this.removeClassicUI();
+
+				if (!this.isUIInitialized) {
+					this.isUIInitialized = true;
 				}
-			} else if (e.detail.perm === 'readonly') {
-				if (!this.map.menubar) {
-					var menubar = new Menubar();
-					this.map.menubar = menubar;
-					this.map.addControl(menubar);
+				else {
+					this.makeSpaceForNotebookbar();
+					this.addNotebookbarUI();
 				}
-
-				if (this.notebookbar && $('#mobile-edit-button').is(':hidden')) {
-					this.notebookbar.onRemove();
+			} else if (e.detail.perm === 'readonly') {
+				if (this.map.sidebar && this.map.sidebar.isVisible()) {
+					this.map.sidebar.closeSidebar();
+					app.socket.sendMessage('uno .uno:SidebarHide');
 				}
+				this.removeNotebookbarUI();
+				this.addClassicUI();
 			} else {
 				app.socket.sendMessage('uno .uno:SidebarHide');
 			}
-			this.makeSpaceForNotebookbar();
 		}
-		this.updateReadonlyIndicator();
 	}
 
-	/**
-	 * Updates visibility of the Read-only badge/button in the top toolbar.
-	*/
-	updateReadonlyIndicator(): void {
-		app.layoutingService.appendLayoutingTask(() =>{
-			if (!this.topReadonlyBtn)
-				return;
-
-			if (app.isReadOnly()) {
-				this.topReadonlyBtn.classList.remove('hidden');
-			} else {
-				this.topReadonlyBtn.classList.add('hidden');
-			}
-		})
-	}
 
 	refreshTheme(): void {
 		if (typeof window.initializedUI === 'function') {