feat(textarea-sync): Enhance width customization options

- Implement "Sync Textarea with Chat Width" logic to synchronize prompt textarea width with chat bubbles
- Add "Reset All Widths" buttons to easily restore default width settings for chat bubbles and prompt textarea

Changes summary:
- Enhanced width customization options:
  - Introduced the ability to synchronize the prompt textarea width with the width of chat bubbles, providing a consistent user experience.
  - Added "Reset All Widths" buttons to allow users to conveniently restore the default width settings for both chat bubbles and the prompt textarea.

src/js/app/components/renderButtons.js

@@ -0,0 +1,7 @@
+export function renderButton({ name, className, id, content, disabled = false }) {
+	return `
+        <button id="${id}" class="btn block relative text-center ${className}" ${disabled ? 'disabled' : ''}>
+            ${content}
+        </button>
+	`
+}

src/js/app/components/renderFonts.js

@@ -91,11 +91,3 @@ export function renderFontBigCard({
 
 // 	return cardHtml
 // }
-
-export function renderButton({ name, className, id, content, disabled = false }) {
-	return `
-        <button id="${id}" class="btn block relative text-center ${className}" ${disabled ? 'disabled' : ''}>
-            ${content}
-        </button>
-	`
-}

src/js/app/mainAssets.js

@@ -1,16 +1,21 @@
 import browser from 'webextension-polyfill'
 import { renderSwitchOption, renderSmallCardOption } from './components/renderSwitch'
 import { icon_full_width } from './components/icons'
+import { renderButton } from './components/renderButtons'
 
 const removePercentAndRem = (str) => str.replace(/%|rem/g, '') // /%/g
 
+// Example keys to remove
+// Get the keys from FW_DEFAULTS object
+
 const FW_DEFAULTS = {
 	w_chat_user: 'initial',
 	w_chat_gpt: '48rem',
 	w_prompt_textarea: '48rem',
 	chat_user_edit_icon_right: '100%',
 	chat_user_edit_icon_top: '0',
 	chat_user_edit_icon_transform: 'unset',
+	isTextareaSync: false,
 }
 const FW_OPTIONS = {
 	w_chat_user: '100%',
@@ -21,14 +26,8 @@ const FW_OPTIONS = {
 	chat_user_edit_icon_transform: 'translateY(-1.25rem)',
 }
 
-// ${renderSwitchOption({
-// 	inputId: 'gpth-full-width',
-// 	isChecked: false,
-// 	icon: icon_full_width,
-// 	textTitle: 'Chat Full Width',
-// 	// textSubtitle: 'Maximize the chat layout and prompt field to fill the screen',
-// 	textSubtitle: "Expand chat and prompt field to screen's edge for wider conversation view",
-// })}
+const keysToRemove = Object.keys(FW_DEFAULTS)
+
 let assetsHtmlCode = `
     <section id="sectionAssets" class="gpth-assets">
 
@@ -63,7 +62,18 @@ let assetsHtmlCode = `
 				textTitle: 'Chat Full Width',
 				textSubtitle: "Expand chats to screen's edge for wider conversation view",
 			})}
+			${renderSwitchOption({
+				inputId: 'gpth-sync-textarea-chat-width',
+				isChecked: false,
+				icon: icon_full_width,
+				textTitle: 'Sync Width',
+				textSubtitle: 'Adjust prompt field to match the chat width for a more streamlined and consistent view',
+			})}
 		</div>
+
+		<footer class="grid mt-10">
+			${renderButton({ id: 'resetWidths', content: 'Reset All', disabled: false, className: 'btn-primary' })}
+		</footer>
     </section>
 `
 function whenFullWidth() {
@@ -111,10 +121,43 @@ function toggleChatFullWidth(e) {
 		whenDefaultWidth()
 	}
 }
+function toggleSyncTextareaWithChatWidth(e) {
+	console.log('toggleSyncTextareaWithChatWidth()', e.target.id)
+
+	if (e.target.checked) {
+		const wChatGpt = removePercentAndRem(
+			getComputedStyle(document.documentElement).getPropertyValue('--w_chat_gpt')
+		)
+
+		applySettings({
+			w_prompt_textarea: 'var(--w_chat_gpt)',
+		})
+		saveSettings({
+			w_prompt_textarea: wChatGpt,
+			isTextareaSync: true,
+		})
+		setRangeOutput('gpth-textarea-width-custom', wChatGpt)
+		setInputFieldValue('gpth-textarea-width-custom', wChatGpt)
+		setInputCheckedValue('gpth-sync-textarea-chat-width', true)
+	} else {
+		applySettings({
+			w_prompt_textarea: FW_DEFAULTS.w_prompt_textarea,
+		})
+		saveSettings({
+			w_prompt_textarea: FW_DEFAULTS.w_prompt_textarea,
+			isTextareaSync: false,
+		})
+		setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(FW_DEFAULTS.w_prompt_textarea))
+		setInputFieldValue('gpth-textarea-width-custom', removePercentAndRem(FW_DEFAULTS.w_prompt_textarea))
+		setInputCheckedValue('gpth-sync-textarea-chat-width', false)
+	}
+
+	// setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(FW_DEFAULTS.w_chat_gpt))
+	// setInputFieldValue('gpth-textarea-width-custom', removePercentAndRem(FW_DEFAULTS.w_chat_gpt))
+}
 function applySettings(settings) {
 	Object.entries(settings).forEach(([key, value]) => {
 		document.documentElement.style.setProperty(`--${key}`, value)
-
 		// console.log(key, getComputedStyle(document.documentElement).getPropertyValue(`--${key}`))
 	})
 }
@@ -148,16 +191,37 @@ async function loadSettings() {
 		applySettings(settings)
 		// Set the checked attribute based on the saved settings
 		setInputCheckedValue('gpth-full-width', settings.w_chat_gpt === '100%')
+		// Textarea sync
+		// setInputCheckedValue('gpth-sync-textarea-chat-width', settings.w_chat_gpt === settings.w_prompt_textarea)
+		setInputCheckedValue('gpth-sync-textarea-chat-width', settings.isTextareaSync)
+
 		setRangeOutput('gpth-full-width-custom', removePercentAndRem(settings.w_chat_gpt))
 		setInputFieldValue('gpth-full-width-custom', removePercentAndRem(settings.w_chat_gpt))
 
 		setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
 		setInputFieldValue('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
+
+		// setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
+		// setInputFieldValue('gpth-textarea-width-custom', removePercentAndRem(settings.w_prompt_textarea))
 	} catch (error) {
 		console.error('Failed to load settings:', error)
 	}
 }
 
+// Function to reset fonts to default
+function resetWidths() {
+	applySettings(FW_DEFAULTS)
+	saveSettings(FW_DEFAULTS)
+
+	setInputCheckedValue('gpth-full-width', false)
+	setInputCheckedValue('gpth-sync-textarea-chat-width', FW_DEFAULTS.isTextareaSync)
+
+	setInputFieldValue('gpth-full-width-custom', removePercentAndRem(FW_DEFAULTS.w_chat_gpt))
+	setRangeOutput('gpth-textarea-width-custom', removePercentAndRem(FW_DEFAULTS.w_prompt_textarea))
+
+	// removeSpecificStorageItems(keysToRemove)
+}
+
 function handleChatCustomWidth(e) {
 	console.log('handleChatCustomWidth()', e.target.id)
 	setRangeOutput('gpth-full-width-custom', e.target.value)
@@ -196,19 +260,47 @@ function handleAssetsListeners() {
 
 	const selectors = {
 		chatFullWidth: document.querySelector('.gpth-settings #gpth-full-width'),
+		syncTextareaWithChats: document.querySelector('.gpth-settings #gpth-sync-textarea-chat-width'),
 		chatCustomWidth: document.querySelector('.gpth-settings #gpth-full-width-custom'),
 		textareaCustomWidth: document.querySelector('.gpth-settings #gpth-textarea-width-custom'),
+		btnReset: document.querySelector('.gpth-settings #resetWidths'),
 	}
 
 	selectors.chatFullWidth.addEventListener('change', toggleChatFullWidth)
+	selectors.syncTextareaWithChats.addEventListener('change', toggleSyncTextareaWithChatWidth)
 	selectors.chatCustomWidth.addEventListener('change', handleChatCustomWidth)
 	selectors.textareaCustomWidth.addEventListener('change', handleTextareaCustomWidth)
+	selectors.btnReset.addEventListener('click', resetWidths)
 }
 
 // Load settings on page load
 function init() {
 	console.log('initAssets() called')
 	loadSettings()
+
+	getAllStorageItems()
+}
+
+// Function to get all storage items
+async function getAllStorageItems() {
+	try {
+		// Get all items from the local storage
+		const items = await browser.storage.sync.get(null)
+		console.log(items)
+		return items
+	} catch (error) {
+		console.error('Error getting storage items:', error)
+	}
+}
+// Function to remove specific named items from sync storage
+async function removeSpecificStorageItems(keys) {
+	try {
+		// Remove the items by keys from the sync storage
+		await browser.storage.sync.remove(keys)
+		console.log('Specified items removed from sync storage:', keys)
+	} catch (error) {
+		console.error('Error removing storage items:', error)
+	}
 }
 
 export { assetsHtmlCode, handleAssetsListeners, init }

src/js/app/mainFonts.js

@@ -1,6 +1,7 @@
 // main.js
 import browser from 'webextension-polyfill'
 import { renderFontSmallCard, renderFontBigCard, renderButton } from './components/renderFonts'
+import { renderButton } from './components/renderButtons'
 
 // Constants
 const DEFAULTS = {

src/sass/elements/_right--main.scss

@@ -423,7 +423,8 @@ main {
 
 	[data-testid^='conversation-turn-'] .mx-auto.flex.flex-1.text-base,
 	[data-testid^='conversation-turn-']:has([data-message-author-role='user']) [class*='bg-[#f4f4f4]'],
-	&:has(#prompt-textarea) [class*='lg:max-w-[40rem]'] {
+	&:has(#prompt-textarea) [class*='lg:max-w-[40rem]'],
+	&:has(#prompt-textarea) .px-3.text-base.m-auto .mx-auto.flex.flex-1.text-base:has(>form) {
 		transition: 0.3s ease-in-out;
 	}
 }

src/sass/gpthemes/theme-manager/components/_switch.scss

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 2rem;
+    margin-bottom: 0.5rem;
     cursor: pointer;
     font-size: 1rem;
     gap: 0.8rem;