Fix: Improve visibility of autosaved state for comments

This commit addresses issue #7211 by enhancing the user experience for the autosaved comments feature. The changes ensure users can easily recognize autosave status without increasing widget height.
To test the fix, manually verify the autosave behavior by changing focus to another browser tab and checking that the comment remains editable with clear autosaved feedback.

Signed-off-by: Parth Raiyani <[email protected]>
Change-Id: I967fee3e4f696b8433a22602af759e1b758bb7b4

Author: rparth07

browser/css/cool.css

@@ -807,9 +807,13 @@ body {
 	font-size: var(--default-font-size);
 }
 
-.cool-annotation-autosavelabel {
-	font-size: var(--default-font-size);
-	opacity: 75%;
+.annotation-button-autosaved {
+	color: var(--color-primary-dark) !important;
+	background-color: #e1e8f9 !important;	
+}
+
+.annotation-button-delete {
+	color: var(--color-error) !important;
 }
 
 .cool-annotation-menubar {

browser/src/canvas/sections/CommentListSection.ts

@@ -1570,7 +1570,7 @@ export class CommentSection extends CanvasSectionObject {
 							app.definitions.CommentSection.needFocus = annotation;
 						}
 						annotation.sectionProperties.container.style.visibility = 'visible';
-						annotation.sectionProperties.autoSave.innerText = _('Autosaved');
+						annotation.focusLost();
 						if (app.map._docLayer._docType === 'spreadsheet')
 							annotation.show();
 						if (autoSavedComment.sectionProperties.data.id === 'new')
@@ -1644,7 +1644,7 @@ export class CommentSection extends CanvasSectionObject {
 				this.update();
 
 				if (CommentSection.autoSavedComment) {
-					CommentSection.autoSavedComment.sectionProperties.autoSave.innerText = _('Autosaved');
+					modified.focusLost();
 					if (app.map._docLayer._docType === 'spreadsheet')
 						modified.show();
 					modified.edit();

browser/src/canvas/sections/CommentSection.ts

@@ -158,6 +158,8 @@ export class Comment extends CanvasSectionObject {
 			return;
 
 		var button = L.DomUtil.create('div', 'annotation-btns-container', this.sectionProperties.nodeModify);
+		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'focus', this.onFocus, this);
+		L.DomEvent.on(this.sectionProperties.nodeReplyText, 'focus', this.onFocusReply, this);
 		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'input', this.textAreaInput, this);
 		L.DomEvent.on(this.sectionProperties.nodeReplyText, 'input', this.textAreaInput, this);
 		L.DomEvent.on(this.sectionProperties.nodeModifyText, 'keydown', this.textAreaKeyDown, this);
@@ -300,7 +302,6 @@ export class Comment extends CanvasSectionObject {
 		this.sectionProperties.authorAvatartdImg = tdImg;
 		this.sectionProperties.contentAuthor = L.DomUtil.create('div', 'cool-annotation-content-author', tdAuthor);
 		this.sectionProperties.contentDate = L.DomUtil.create('div', 'cool-annotation-date', tdAuthor);
-		this.sectionProperties.autoSave = L.DomUtil.create('div', 'cool-annotation-autosavelabel', tdAuthor);
 	}
 
 	private createMenu (): void {
@@ -423,8 +424,6 @@ export class Comment extends CanvasSectionObject {
 	}
 
 	private textAreaInput(ev: any): void {
-		this.sectionProperties.autoSave.innerText = '';
-
 		if (ev && app.map._docLayer._docType === 'text') {
 			// special handling for mentions
 			this.map?.mention.handleMentionInput(ev, this.isNewPara());
@@ -462,6 +461,14 @@ export class Comment extends CanvasSectionObject {
 		return '';
 	}
 
+	private onFocus() {
+		this.resetControl(this.getSaveButton(), _('Save'), 'annotation-button-autosaved');
+	}
+
+	private onFocusReply() {
+		this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
+	}
+
 	private updateContent (): void {
 		if(this.sectionProperties.data.html)
 			this.sectionProperties.contentText.innerHTML = this.sanitize(this.sectionProperties.data.html);
@@ -1101,7 +1108,6 @@ export class Comment extends CanvasSectionObject {
 
 	// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 	public onSaveComment (e: any): void {
-		this.sectionProperties.commentContainerRemoved = true;
 		L.DomEvent.stopPropagation(e);
 		this.removeLastBRTag(this.sectionProperties.nodeModifyText);
 		this.sectionProperties.data.text = this.sectionProperties.nodeModifyText.innerText;
@@ -1122,6 +1128,43 @@ export class Comment extends CanvasSectionObject {
 			brElements[brElements.length-1].remove();
 	}
 
+	private getSaveButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-save-"]');
+	}
+
+	private getCancelButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeModify.querySelector('input[type="button"][id^="annotation-cancel-"]');
+	}
+
+	private getReplyButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-reply-"]');
+	}
+
+	private getCancelReplyButton(): HTMLButtonElement | null {
+		return this.sectionProperties.nodeReply.querySelector('input[type="button"][id^="annotation-cancel-reply-"]');
+	}
+
+	private updateControl(
+		button: HTMLButtonElement | null,
+		label: string,
+		className: string
+	): void {
+		if (button) {
+		  button.value = label;
+		  button.classList.add(className);
+		}
+	}
+
+	private updateSaveControls() {
+		this.updateControl(this.getSaveButton(), _('Saved'), 'annotation-button-autosaved');
+		this.updateControl(this.getCancelButton(), _('Delete'), 'annotation-button-delete');
+	}
+
+	private updateReplyControls() {
+		this.updateControl(this.getReplyButton(), _('Saved'), 'annotation-button-autosaved');
+		this.updateControl(this.getCancelReplyButton(), _('Delete'), 'annotation-button-delete');
+	}
+
 	// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 	public onLostFocus (e: any): void {
 
@@ -1136,7 +1179,6 @@ export class Comment extends CanvasSectionObject {
 			return;
 		}
 		if (!this.sectionProperties.commentContainerRemoved) {
-			this.cachedIsEdit = false;
 			$(this.sectionProperties.container).removeClass('annotation-active reply-annotation-container modify-annotation-container');
 			this.removeLastBRTag(this.sectionProperties.nodeModifyText);
 			if (this.sectionProperties.contentText.origText !== this.sectionProperties.nodeModifyText.innerText ||
@@ -1183,6 +1225,27 @@ export class Comment extends CanvasSectionObject {
 		}
 	}
 
+	private resetControl(
+		button: HTMLButtonElement | null,
+		label: string,
+		className: string
+	): void {
+		if (button) {
+		  button.value = label;
+		  button.classList.remove(className);
+		}
+	}
+
+	private resetSaveControls(): void {
+		this.resetControl(this.getSaveButton(), _('Save'), 'annotation-button-autosaved');
+		this.resetControl(this.getCancelButton(), _('Cancel'), 'annotation-button-delete');
+	}
+
+	private resetReplyControls(): void {
+		this.resetControl(this.getReplyButton(), _('Reply'), 'annotation-button-autosaved');
+		this.resetControl(this.getCancelReplyButton(), _('Cancel'), 'annotation-button-delete');
+	}
+
 	public focus (): void {
 		this.sectionProperties.container.classList.add('annotation-active');
 		this.sectionProperties.nodeModifyText.focus({ focusVisible: true });
@@ -1198,6 +1261,13 @@ export class Comment extends CanvasSectionObject {
 			sel.addRange(range)
 		}
 
+		this.resetSaveControls();
+		this.resetReplyControls();
+	}
+
+	public focusLost (): void {
+		this.updateSaveControls();
+		this.updateReplyControls();
 	}
 
 	public reply (): Comment {