[113] Add custom scroll down button alignment

package.json

@@ -89,5 +89,6 @@
 		"svgo": "^3.3.2",
 		"webextension-polyfill": "^0.12.0"
 	},
-	"browserslist": "> 1%, last 2 versions, not dead"
+	"browserslist": "> 1%, last 2 versions, not dead",
+	"packageManager": "pnpm@10.6.5+sha512.cdf928fca20832cd59ec53826492b7dc25dc524d4370b6b4adbf65803d32efaa6c1c88147c0ae4e8d579a6c9eec715757b50d4fa35eea179d868eada4ed043af"
 }

src/js/app/components/renderUtils.js

@@ -0,0 +1,3 @@
+const renderSeparator = `<div role="separator" aria-orientation="horizontal" class="my-6 mx-5 h-px bg-token-border-light"></div>`
+
+export { renderSeparator }

src/js/app/mainWidths.js

@@ -2,6 +2,8 @@ import browser from 'webextension-polyfill'
 import { renderSwitchOption, renderSmallCardOption } from './components/renderSwitch'
 import { icon_full_width, icon_sync } from './components/icons'
 import { renderButton } from './components/renderButtons'
+import { renderSeparator } from './components/renderUtils'
+import { renderCustomScrollDown } from './scrolldown'
 
 // Configuration object
 const CONFIG = {
@@ -333,6 +335,9 @@ const renderWidthsTab = `
 			})}
     </div>
 
+	${renderSeparator}
+	${renderCustomScrollDown()}
+
     <footer class="flex justify-center mt-8">
       ${renderButton({ id: 'resetWidths', content: 'Reset Widths', disabled: false, className: 'btn-primary' })}
     </footer>

src/js/app/scrolldown.js

@@ -0,0 +1,130 @@
+import browser from 'webextension-polyfill'
+import { icon_align_left, icon_align_center, icon_align_right } from './components/icons'
+
+// Configuration object - single source of truth
+const POSITION_CONFIG = {
+	left: {
+		label: 'Left',
+		icon: icon_align_left,
+		cssVars: {
+			scrollBtnLeft: '0%',
+			scrollBtnRight: 'unset',
+		},
+	},
+	center: {
+		label: 'Center',
+		icon: icon_align_center,
+		cssVars: {
+			scrollBtnLeft: 'unset',
+			scrollBtnRight: '50%',
+		},
+	},
+	right: {
+		label: 'Right',
+		icon: icon_align_right,
+		cssVars: {
+			scrollBtnLeft: 'unset',
+			// scrollBtnRight: '1.5rem',
+			scrollBtnRight: '2rem',
+		},
+	},
+}
+
+const DEFAULT_POSITION = 'center'
+
+function generateScrollDownHTML() {
+	const positionBtns = Object.entries(POSITION_CONFIG)
+		.map(([position, config]) => {
+			const isActive = position === DEFAULT_POSITION ? 'active' : ''
+
+			return `
+                <button 
+                    id="scroll-btn-${position}" 
+                    class="gpth-scrolldown__tab flex items-center justify-center gap-1 ${isActive}" 
+                    data-position="${position}"
+                >
+                    ${config.icon} ${config.label}
+                </button>
+            `
+		})
+		.join('')
+
+	return `
+        <section class="gpth-scrolldown">
+            <h4 class="mb-3 ml-2">Scrolldown Button Align</h4>
+            <div class="gpth-scrolldown__tabs flex justify-center rounded-full">
+                ${positionBtns}
+            </div>
+        </section>
+    `
+}
+
+function setCssVars(cssVars) {
+	const root = document.documentElement
+
+	Object.entries(cssVars).forEach(([key, value]) => {
+		root.style.setProperty(`--${key}`, value)
+	})
+}
+async function savePositionPreference(position) {
+	try {
+		await browser.storage.sync.set({ scrollButtonPosition: position })
+	} catch (error) {
+		console.error('Failed to save position preference:', error)
+	}
+}
+
+function applyPosition(position = DEFAULT_POSITION, btnContainer) {
+	if (!POSITION_CONFIG[position]) {
+		position = DEFAULT_POSITION
+	}
+
+	// 1. Update active button
+	const btns = btnContainer.querySelectorAll('.gpth-scrolldown__tab')
+	btns.forEach((btn) => {
+		btn.classList.toggle('active', btn.dataset.position === position)
+	})
+
+	// 2. Apply CSS variables
+	setCssVars(POSITION_CONFIG[position].cssVars)
+
+	// 3. Save preference in storage
+	savePositionPreference(position)
+}
+
+async function loadPositionPreference() {
+	try {
+		const result = await browser.storage.sync.get('scrollButtonPosition')
+		return result.scrollButtonPosition || DEFAULT_POSITION
+	} catch (error) {
+		console.error('Failed to load position preference:', error)
+		return DEFAULT_POSITION
+	}
+}
+
+function addScrollDownListeners() {
+	const btnContainer = document.querySelector('.gpth-scrolldown__tabs')
+	if (!btnContainer) return
+
+	// Use event delegation for better performance
+	btnContainer.addEventListener('click', (e) => {
+		const btn = e.target.closest('.gpth-scrolldown__tab')
+		if (!btn) return
+
+		const position = btn.dataset.position
+
+		// console.log('position: ', position)
+		applyPosition(position, btnContainer)
+	})
+
+	// Load and apply saved preferences
+	loadPositionPreference().then((position) => {
+		applyPosition(position, btnContainer)
+	})
+}
+
+function init() {
+	addScrollDownListeners()
+}
+
+export { generateScrollDownHTML as renderCustomScrollDown, init }

src/js/app/settingsManager.js

@@ -23,7 +23,7 @@ async function createSettings() {
         <div class="tab-buttons p-1 font-semibold mb-5">
           <button class="tab-button py-2 px-4 focus:outline-none text-center active">Color</button>
           <button class="tab-button py-2 px-4 focus:outline-none text-center">Font</button>
-          <button class="tab-button py-2 px-4 focus:outline-none text-center">Width</button>
+          <button class="tab-button py-2 px-4 focus:outline-none text-center">Layout</button>
         </div>
         <div class="tab-content">
           <div class="tab-pane active" id="tab-colors">${renderColorsTab}</div>

src/js/content.js

@@ -1,11 +1,13 @@
-import { init as initThemes } from "./app/themeManager";
-import { init as initFloating } from "./app/floatingBtn";
-import { init as initColors } from "./app/mainColors";
-import { init as initFonts } from "./app/mainFonts";
-import { init as initWidths } from "./app/mainWidths";
+import { init as initThemes } from './app/themeManager'
+import { init as initFloating } from './app/floatingBtn'
+import { init as initColors } from './app/mainColors'
+import { init as initFonts } from './app/mainFonts'
+import { init as initWidths } from './app/mainWidths'
+import { init as initScrolldown } from './app/scrolldown'
 
-initThemes();
-initFloating();
-initColors();
-initFonts();
-initWidths();
+initThemes()
+initFloating()
+initColors()
+initFonts()
+initWidths()
+initScrolldown()

src/sass/abstract/_custom-settings-vars.scss

@@ -0,0 +1,33 @@
+:root {
+    /* ! === CUSTOM FONTS === */
+    --fontFamilyDefault: ui-sans-serif,
+        -apple-system,
+        system-ui,
+        Segoe UI,
+        Roboto,
+        Ubuntu,
+        Cantarell,
+        Noto Sans,
+        sans-serif,
+        Helvetica,
+        Apple Color Emoji,
+        Arial,
+        Segoe UI Emoji,
+        Segoe UI Symbol;
+    --fontFamily: var(--fontFamilyDefault);
+    --fontSize: inherit;
+    --letterSpacing: none;
+    --lineHeight: 28;
+
+    /* ! === CUSTOM SCROLLDOWN POSITION === */
+    --scrollBtnLeft: unset;
+    --scrollBtnRight: 50%;
+
+    /* ! === CUSTOM WIDTH === */
+    // --max-w-chat-bubble: 48rem;
+    --w_chat_user: max-content;
+    --max_w_chat_user: 70%; // 70%
+    --w_chat_gpt: 49rem;
+    // --w_prompt_textarea: var(--w_chat_gpt);
+    --w_prompt_textarea: 48rem;
+}

src/sass/abstract/_vars.scss

@@ -1,27 +1,10 @@
 :root {
-	/* ? --- Fonts --- */
-	// --f-fm: 'Inter', sans-serif, Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
-	// 	Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
-	// 	Noto Color Emoji;
 	--fsz-error-404: 3rem;
-	--fontFamilyDefault: ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol;
-	--fontFamily: var(--fontFamilyDefault);
-	--fontSize: inherit;
-	--letterSpacing: none;
-	--lineHeight: 28;
-
-	--loader_timeout: 300;
 
 	/* ? --- Widths and Heights --- */
 	--min-w-btn: 5.5rem;
 	--h-header: 60px;
 	--w-scrollbar: 0.365rem;
-	// --max-w-chat-bubble: 48rem;
-	--w_chat_user: max-content;
-	--max_w_chat_user: 70%; // 70%
-	--w_chat_gpt: 49rem;
-	// --w_prompt_textarea: var(--w_chat_gpt);
-	--w_prompt_textarea: 48rem;
 
 	/* ? --- Border-radius --- */
 	--br: 1rem;

src/sass/elements/_btn.scss

@@ -59,17 +59,6 @@
 	}
 }
 
-/* === MAIN RIGHT - Scroll Down arrow but and Close button for uploaded attachments in prompt textarea */
-main [role='presentation'] button.absolute.rounded-full.w-8.h-8.bottom-5 {
-	background-color: var(--c-accent) !important;
-	box-shadow: var(--box-shadow-contextmenu);
-
-	/* RIGHT - Scroll Down arrow SVG Color === */
-	svg {
-		color: var(--c-on-accent) !important;
-	}
-}
-
 /* === All the .btn inside dialogs not having svg icon inside */
 [role='dialog'] {
 	.btn:not(.btn:has(svg)) {

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

@@ -0,0 +1,26 @@
+/* === MAIN RIGHT - Scroll Down arrow but and Close button for uploaded attachments in prompt textarea */
+[role="presentation"].composer-parent div[style*="opacity: 1;"]>button[class*="right-1/2 translate-x-1/2"].absolute.rounded-full.w-8.h-8.z-10 {
+
+    /* 
+- .bottom-5 is when no element above textarea prompt
+- [style*="bottom:"] is when element above textarea prompt */
+    &.bottom-5,
+    &[style*="bottom:"] {
+        will-change: right, left;
+        left: var(--scrollBtnLeft, unset) !important;
+        right: var(--scrollBtnRight, 50%) !important;
+        background-color: var(--c-accent) !important;
+        transition: opacity 0.25s ease, scale 0.25s ease;
+
+        &:hover {
+            scale: 1.05;
+            opacity: 0.8;
+        }
+
+
+        /* RIGHT - Scroll Down arrow SVG Color === */
+        svg {
+            color: var(--c-on-accent) !important;
+        }
+    }
+}

src/sass/elements/_transitions.scss

@@ -90,14 +90,14 @@ button[role='switch'] {
 
 /* ___ Scroll down button 
 [class*='-translate-y-1/2'] je btn ❌ u attached image */
-main [role='presentation'] button.absolute.rounded-full:not([class*='-translate-y-1/2']) {
+/* main [role='presentation'] button.absolute.rounded-full:not([class*='-translate-y-1/2']) {
 	transition: translate 0.4s $easeOutBack, opacity 0.3s ease-in-out;
 
 	&:hover {
 		translate: 0 10%;
 		opacity: 1 !important;
 	}
-}
+} */
 
 /* ___ Table "Archived Chats" or "Shared Links" */
 [role='dialog'] table {

src/sass/global/_colors-bgs.scss

@@ -309,4 +309,11 @@ This content may violate our Terms of Use or usage policies. is bg-orange-400 no
 	background-color: hsla(var(--accent-hsl) / 0.15) !important;
 	color: var(--c-accent) !important;
 	box-shadow: inset 0px 0px 0px 1px hsla(var(--accent-hsl) / 0.15) !important;
+}
+
+/* E.g. btn close ("Remove file") of attached file */
+.text-white.bg-black.dark\:bg-white.dark\:text-black {
+	background-color: var(--c-accent) !important;
+	color: var(--c-on-accent) !important;
+	border: none !important;
 }