mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-07-26 12:08:15 +00:00
fix(chat): preserve detached overlay geometry
This commit is contained in:
@@ -37,6 +37,9 @@ describe('chat overlay contract', () => {
|
||||
|
||||
it('supports all layout and theme combinations with bounded message DOM', () => {
|
||||
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=\"graphite\"][data-theme=\"light\"]");
|
||||
expect(overlaySource).toContain('const MAX_MESSAGES = 200');
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
let destroyed = false;
|
||||
let saveTimer = null;
|
||||
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 themePalette = 'eucalyptus';
|
||||
|
||||
@@ -265,9 +265,10 @@
|
||||
|
||||
function setMode(mode) {
|
||||
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.y = Math.max(8, Math.round((window.innerHeight - DEFAULT_HEIGHT) / 2));
|
||||
layout.detachedInitialized = true;
|
||||
}
|
||||
layout.mode = mode;
|
||||
applyLayout();
|
||||
@@ -388,9 +389,9 @@
|
||||
saveLayout();
|
||||
});
|
||||
|
||||
const resizeObserver = new globalThis.ResizeObserver(entries => {
|
||||
const resizeObserver = new globalThis.ResizeObserver(() => {
|
||||
if (applyingLayout || layout.mode !== 'detached') return;
|
||||
const rect = entries[0]?.contentRect;
|
||||
const rect = panel.getBoundingClientRect();
|
||||
if (!opened || !rect?.width || !rect.height) return;
|
||||
layout.width = rect.width;
|
||||
layout.height = rect.height;
|
||||
@@ -456,6 +457,8 @@
|
||||
chrome.runtime.onMessage.addListener(handleRuntime);
|
||||
chrome.storage.local.get([storageKey, 'themeMode', 'themePalette'], data => {
|
||||
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';
|
||||
themePalette = data.themePalette || 'eucalyptus';
|
||||
applyTheme();
|
||||
|
||||
Reference in New Issue
Block a user