gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-09-03 14:37:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat): preserve detached overlay geometry

Browse Source
This commit is contained in:
KoalaDev
2026-07-15 07:31:27 +02:00
parent e9dc299fc9
commit 36c4c492d3
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/chat-overlay-contract.test.mjs
+3
View File
@@ -37,6 +37,9 @@ describe('chat overlay contract', () => {
it('supports all layout and theme combinations with bounded message DOM', () => { it('supports all layout and theme combinations with bounded message DOM', () => {
expect(overlaySource).toContain("['left', 'right', 'detached']"); expect(overlaySource).toContain("['left', 'right', 'detached']");
expect(overlaySource).toContain('!layout.detachedInitialized');
expect(overlaySource).toContain('const rect = panel.getBoundingClientRect()');
expect(overlaySource).not.toContain('contentRect');
expect(overlaySource).toContain("#app[data-palette=\"cyber\"][data-theme=\"light\"]"); expect(overlaySource).toContain("#app[data-palette=\"cyber\"][data-theme=\"light\"]");
expect(overlaySource).toContain("#app[data-palette=\"graphite\"][data-theme=\"light\"]"); expect(overlaySource).toContain("#app[data-palette=\"graphite\"][data-theme=\"light\"]");
expect(overlaySource).toContain('const MAX_MESSAGES = 200'); expect(overlaySource).toContain('const MAX_MESSAGES = 200');
extension/chat-overlay.js
+7 -4
View File
@@ -16,7 +16,7 @@
let destroyed = false; let destroyed = false;
let saveTimer = null; let saveTimer = null;
let applyingLayout = false; let applyingLayout = false;
let layout = { mode: 'right', x: 24, y: 72, width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT }; let layout = { mode: 'right', x: 24, y: 72, width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT, detachedInitialized: false };
let themeMode = 'system'; let themeMode = 'system';
let themePalette = 'eucalyptus'; let themePalette = 'eucalyptus';
@@ -265,9 +265,10 @@
function setMode(mode) { function setMode(mode) {
if (!['left', 'right', 'detached'].includes(mode)) return; if (!['left', 'right', 'detached'].includes(mode)) return;
if (mode === 'detached' && layout.mode !== 'detached') { if (mode === 'detached' && !layout.detachedInitialized) {
layout.x = Math.max(8, Math.round((window.innerWidth - DEFAULT_WIDTH) / 2)); layout.x = Math.max(8, Math.round((window.innerWidth - DEFAULT_WIDTH) / 2));
layout.y = Math.max(8, Math.round((window.innerHeight - DEFAULT_HEIGHT) / 2)); layout.y = Math.max(8, Math.round((window.innerHeight - DEFAULT_HEIGHT) / 2));
layout.detachedInitialized = true;
} }
layout.mode = mode; layout.mode = mode;
applyLayout(); applyLayout();
@@ -388,9 +389,9 @@
saveLayout(); saveLayout();
}); });
const resizeObserver = new globalThis.ResizeObserver(entries => { const resizeObserver = new globalThis.ResizeObserver(() => {
if (applyingLayout || layout.mode !== 'detached') return; if (applyingLayout || layout.mode !== 'detached') return;
const rect = entries[0]?.contentRect; const rect = panel.getBoundingClientRect();
if (!opened || !rect?.width || !rect.height) return; if (!opened || !rect?.width || !rect.height) return;
layout.width = rect.width; layout.width = rect.width;
layout.height = rect.height; layout.height = rect.height;
@@ -456,6 +457,8 @@
chrome.runtime.onMessage.addListener(handleRuntime); chrome.runtime.onMessage.addListener(handleRuntime);
chrome.storage.local.get([storageKey, 'themeMode', 'themePalette'], data => { chrome.storage.local.get([storageKey, 'themeMode', 'themePalette'], data => {
if (data[storageKey] && typeof data[storageKey] === 'object') layout = { ...layout, ...data[storageKey] }; if (data[storageKey] && typeof data[storageKey] === 'object') layout = { ...layout, ...data[storageKey] };
if (!['left', 'right', 'detached'].includes(layout.mode)) layout.mode = 'right';
if (layout.mode === 'detached') layout.detachedInitialized = true;
themeMode = data.themeMode || 'system'; themeMode = data.themeMode || 'system';
themePalette = data.themePalette || 'eucalyptus'; themePalette = data.themePalette || 'eucalyptus';
applyTheme(); applyTheme();