refactor(chat-custom-width/window-resizing): Optimize responsive widt…

…h adjustment

- Improve the responsive width adjustment logic:
  - The resize event listener is now added only when chat width settings differ from defaults.
  - Full-width behavior on resize applies only if chat width settings have been modified.
  - If the user resets the widths, the resize listener is removed.
  - The code automatically detects changes to chat width settings by comparing with default values, eliminating the need for manual flags.

Changes summary:
- Optimized the responsive width adjustment logic:
  - Reduced unnecessary event listeners by adding the resize listener only when chat width settings deviate from defaults.
  - Ensured full-width behavior on resize is triggered only when chat width settings have been intentionally modified by the user.
  - Removed the resize listener when the user resets the widths, reducing redundant code execution.
  - Implemented automatic detection of changes to chat width settings by comparing with default values, simplifying the logic and improving performanc

src/js/app/mainAssetsResize.js

@@ -29,7 +29,7 @@ const FW_OPTIONS = {
 
 let currentSettings = { ...FW_DEFAULTS }
 let isSyncEnabled = false
-let userHasResized = false
+const isChatWidthModified = (settings) => settings.w_chat_gpt !== FW_DEFAULTS.w_chat_gpt
 const RESIZING_BREAKPOINT = '768' // tablet 1024 | mob 768
 
 // const assetsStorageKeys = Object.keys(FW_DEFAULTS) // ? DEV ONLY var - Get the keys from FW_DEFAULTS object
@@ -84,7 +84,7 @@ let assetsHtmlCode = `
 `
 
 const applySettings = (settings) => {
-	if (userHasResized && window.innerWidth <= RESIZING_BREAKPOINT) {
+	if (isChatWidthModified(settings) && window.innerWidth <= RESIZING_BREAKPOINT) {
 		Object.entries(FW_OPTIONS).forEach(([key, value]) => {
 			document.documentElement.style.setProperty(`--${key}`, value)
 		})
@@ -117,6 +117,16 @@ const saveSettings = async (settings) => {
 	}
 }
 
+const addResizeListener = () => {
+	if (!window.resizeListenerAdded) {
+		window.resizeListener = debounce(() => {
+			applySettings(currentSettings)
+		}, 250)
+		window.addEventListener('resize', window.resizeListener)
+		window.resizeListenerAdded = true
+	}
+}
+
 const debouncedSaveSettings = debounce(saveSettings, 300)
 
 const loadSettings = async () => {
@@ -125,6 +135,10 @@ const loadSettings = async () => {
 		currentSettings = { ...FW_DEFAULTS, ...settings }
 		isSyncEnabled = currentSettings.w_chat_gpt === currentSettings.w_prompt_textarea
 
+		if (isChatWidthModified(currentSettings)) {
+			addResizeListener()
+		}
+
 		applySettings(currentSettings)
 		updateUI(currentSettings)
 	} catch (error) {
@@ -191,8 +205,6 @@ const updateEditIconPosition = (chatWidth) => {
 const toggleChatFullWidth = (e) => {
 	const isFullWidth = e.target.checked
 	let widthGpt, widthUser, maxWidthUser
-	// const width = isFullWidth ? '100%' : FW_DEFAULTS.w_chat_gpt
-	// const widthUser = isFullWidth ? '100%' : FW_DEFAULTS.w_chat_user
 
 	if (isFullWidth) {
 		widthGpt = '100%'
@@ -211,11 +223,18 @@ const toggleChatFullWidth = (e) => {
 		w_prompt_textarea: isSyncEnabled ? widthGpt : currentSettings.w_prompt_textarea,
 	})
 
+	if (isChatWidthModified(currentSettings)) {
+		addResizeListener()
+	} else if (window.resizeListenerAdded) {
+		window.removeEventListener('resize', window.resizeListener)
+		window.resizeListenerAdded = false
+	}
+
 	applySettings(currentSettings)
 	debouncedSaveSettings(currentSettings)
 	updateUI(currentSettings)
 
-	// console.log('toggleChatFullWidth', currentSettings)
+	console.log('toggleChatFullWidth', currentSettings)
 }
 
 const toggleSyncTextareaWithChatWidth = (e) => {
@@ -229,9 +248,8 @@ const toggleSyncTextareaWithChatWidth = (e) => {
 	updateUI(currentSettings)
 }
 
-// function handleChatCustomWidth(e) {
 const handleWidthChange = (key, e) => {
-	const value = `${ensureValidPercentage(e.target.value)}%`
+	const value = `${ensureValidPercentage(e.target.value)}${e.target.dataset.unit || '%'}`
 	currentSettings[key] = value
 
 	if (key === 'w_chat_gpt') {
@@ -246,18 +264,24 @@ const handleWidthChange = (key, e) => {
 		setElementProperty('.gpth-settings #gpth-sync-textarea-chat-width', 'checked', false)
 	}
 
-	setElementProperty(`.gpth-settings #unit-${key}`, 'textContent', '%')
+	setElementProperty(`.gpth-settings #unit-${e.target.id}`, 'textContent', e.target.dataset.unit || '%')
+
+	if (isChatWidthModified(currentSettings)) {
+		addResizeListener()
+	}
 
 	applySettings(currentSettings)
 	debouncedSaveSettings(currentSettings)
 	updateUI(currentSettings)
-
-	// console.log('handleWidthChange', currentSettings)
 }
 
 const resetWidths = () => {
 	currentSettings = { ...FW_DEFAULTS }
 	isSyncEnabled = false
+	if (window.resizeListenerAdded) {
+		window.removeEventListener('resize', window.resizeListener)
+		window.resizeListenerAdded = false
+	}
 	applySettings(currentSettings)
 	debouncedSaveSettings(currentSettings)
 	updateUI(currentSettings)
@@ -283,15 +307,6 @@ const handleAssetsListeners = () => {
 
 const init = () => {
 	loadSettings()
-
-	let resizeTimer
-	window.addEventListener('resize', () => {
-		clearTimeout(resizeTimer)
-		resizeTimer = setTimeout(() => {
-			userHasResized = true
-			applySettings(currentSettings)
-		}, 250)
-	})
 }
 
 export { assetsHtmlCode, handleAssetsListeners, init }