mirror of
https://github.com/ksyasuda/SubMiner.git
synced 2026-08-06 07:21:33 -07:00
feat(overlay): add in-app changelog modal
- Add a changelog modal opened from tray "View Changelog" or the update notification's "What's New" button; renders in-player or in its own window like the help modal - Fetch changelog from the newest published release so newer-than-installed notes are visible, falling back to the bundled CHANGELOG.md on failure - Group versions by minor line (current expanded, older folded), badge the installed version, tag newer ones "New" - Support J/K/arrow navigation, Enter to fold/unfold, R to refetch, Esc to close - Add changelog parsing/semver-compare utils and changelog IPC channel/runtime; bundle CHANGELOG.md into packaged builds - Replace release/release-notes.md with changes/changelog-modal.md changeset entry
This commit is contained in:
@@ -456,6 +456,7 @@ function createKeyboardHandlerHarness() {
|
||||
let openControllerSelectCount = 0;
|
||||
let openControllerDebugCount = 0;
|
||||
let playlistBrowserKeydownCount = 0;
|
||||
let changelogKeydownCount = 0;
|
||||
|
||||
const createWordNode = (left: number) => ({
|
||||
classList: createClassList(),
|
||||
@@ -504,6 +505,10 @@ function createKeyboardHandlerHarness() {
|
||||
return true;
|
||||
},
|
||||
handleSessionHelpKeydown: () => false,
|
||||
handleChangelogKeydown: () => {
|
||||
changelogKeydownCount += 1;
|
||||
return true;
|
||||
},
|
||||
openSessionHelpModal: () => {},
|
||||
openControllerSelectModal: () => {
|
||||
openControllerSelectCount += 1;
|
||||
@@ -522,6 +527,7 @@ function createKeyboardHandlerHarness() {
|
||||
openControllerSelectCount: () => openControllerSelectCount,
|
||||
openControllerDebugCount: () => openControllerDebugCount,
|
||||
playlistBrowserKeydownCount: () => playlistBrowserKeydownCount,
|
||||
changelogKeydownCount: () => changelogKeydownCount,
|
||||
setWordCount: (count: number) => {
|
||||
wordNodes = Array.from({ length: count }, (_, index) => createWordNode(10 + index * 70));
|
||||
},
|
||||
@@ -1404,6 +1410,50 @@ test('keyboard mode: playlist browser modal handles h before lookup controls', a
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard mode: changelog modal handles h/l fold keys before lookup controls', async () => {
|
||||
const { ctx, testGlobals, handlers, changelogKeydownCount } = createKeyboardHandlerHarness();
|
||||
|
||||
try {
|
||||
await handlers.setupMpvInputForwarding();
|
||||
handlers.handleKeyboardModeToggleRequested();
|
||||
ctx.state.changelogModalOpen = true;
|
||||
ctx.state.keyboardSelectedWordIndex = 2;
|
||||
|
||||
// H and L fold/unfold changelog entries; they must not move the subtitle
|
||||
// word selection or seek mpv behind the open modal.
|
||||
testGlobals.dispatchKeydown({ key: 'h', code: 'KeyH' });
|
||||
testGlobals.dispatchKeydown({ key: 'l', code: 'KeyL' });
|
||||
|
||||
assert.equal(changelogKeydownCount(), 2);
|
||||
assert.equal(ctx.state.keyboardSelectedWordIndex, 2);
|
||||
} finally {
|
||||
testGlobals.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard mode: changelog modal handles arrow keys before yomitan popup', async () => {
|
||||
const { ctx, testGlobals, handlers, changelogKeydownCount } = createKeyboardHandlerHarness();
|
||||
|
||||
try {
|
||||
await handlers.setupMpvInputForwarding();
|
||||
ctx.state.changelogModalOpen = true;
|
||||
ctx.state.yomitanPopupVisible = true;
|
||||
testGlobals.setPopupVisible(true);
|
||||
|
||||
testGlobals.dispatchKeydown({ key: 'ArrowDown', code: 'ArrowDown' });
|
||||
|
||||
assert.equal(changelogKeydownCount(), 1);
|
||||
assert.equal(
|
||||
testGlobals.commandEvents.some(
|
||||
(event) => event.type === 'forwardKeyDown' && event.code === 'ArrowDown',
|
||||
),
|
||||
false,
|
||||
);
|
||||
} finally {
|
||||
testGlobals.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard mode: configured stats toggle works even while popup is open', async () => {
|
||||
const { handlers, testGlobals } = createKeyboardHandlerHarness();
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ export function createKeyboardHandlers(
|
||||
handleControllerSelectKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleControllerDebugKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleSessionHelpKeydown: (e: KeyboardEvent) => boolean;
|
||||
handleChangelogKeydown: (e: KeyboardEvent) => boolean;
|
||||
openSessionHelpModal: (opening: {
|
||||
bindingKey: 'KeyH' | 'KeyK';
|
||||
fallbackUsed: boolean;
|
||||
@@ -1095,6 +1096,14 @@ export function createKeyboardHandlers(
|
||||
}
|
||||
}
|
||||
|
||||
// Ahead of the keyboard-driven lookup controls: the changelog modal binds
|
||||
// arrows/H/L for folding, and those would otherwise move the subtitle word
|
||||
// selection (and seek mpv) behind the open modal.
|
||||
if (ctx.state.changelogModalOpen) {
|
||||
options.handleChangelogKeydown(e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (handleKeyboardDrivenModeLookupControls(e)) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
|
||||
@@ -467,6 +467,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="changelogModal" class="modal hidden" aria-hidden="true">
|
||||
<div class="modal-content changelog-content">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">Changelog</div>
|
||||
<div class="changelog-header-actions">
|
||||
<button id="changelogRefresh" class="changelog-refresh" type="button">Refresh</button>
|
||||
<button id="changelogClose" class="modal-close" type="button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="changelog-meta">
|
||||
<span id="changelogInstalled" class="changelog-installed"></span>
|
||||
<span id="changelogSource" class="changelog-source"></span>
|
||||
</div>
|
||||
<div id="changelogWarning" class="changelog-warning"></div>
|
||||
<div id="changelogStatus" class="changelog-status"></div>
|
||||
<div id="changelogList" class="changelog-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="playlistBrowserModal" class="modal hidden" aria-hidden="true">
|
||||
<div class="modal-content playlist-browser-content">
|
||||
<div class="modal-header">
|
||||
|
||||
@@ -0,0 +1,212 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import type { ChangelogEntry, ChangelogSnapshot } from '../../types/changelog';
|
||||
import {
|
||||
createChangelogEntryNode,
|
||||
describeChangelogSource,
|
||||
resolveEntryBadge,
|
||||
shouldEntryStartExpanded,
|
||||
tokenizeInlineMarkdown,
|
||||
} from './changelog-render';
|
||||
|
||||
type FakeNode = {
|
||||
tagName: string;
|
||||
className: string;
|
||||
title: string;
|
||||
open: boolean;
|
||||
tabIndex: number;
|
||||
dataset: Record<string, string>;
|
||||
children: FakeNode[];
|
||||
textContent: string;
|
||||
};
|
||||
|
||||
function createFakeNode(tagName: string): FakeNode {
|
||||
const node: FakeNode = {
|
||||
tagName: tagName.toLowerCase(),
|
||||
className: '',
|
||||
title: '',
|
||||
open: false,
|
||||
tabIndex: 0,
|
||||
dataset: {},
|
||||
children: [],
|
||||
textContent: '',
|
||||
};
|
||||
return Object.assign(node, {
|
||||
appendChild: (child: FakeNode) => {
|
||||
node.children.push(child);
|
||||
return child;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function withFakeDocument<T>(run: () => T): T {
|
||||
const previous = Object.getOwnPropertyDescriptor(globalThis, 'document');
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: {
|
||||
createElement: (tagName: string) => createFakeNode(tagName),
|
||||
createTextNode: (value: string) => ({
|
||||
tagName: '#text',
|
||||
textContent: value,
|
||||
children: [],
|
||||
}),
|
||||
},
|
||||
});
|
||||
try {
|
||||
return run();
|
||||
} finally {
|
||||
if (previous) {
|
||||
Object.defineProperty(globalThis, 'document', previous);
|
||||
} else {
|
||||
delete (globalThis as { document?: unknown }).document;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function flatten(node: FakeNode): FakeNode[] {
|
||||
return [node, ...(node.children ?? []).flatMap((child) => flatten(child as FakeNode))];
|
||||
}
|
||||
|
||||
const ENTRY: ChangelogEntry = {
|
||||
version: '0.19.2',
|
||||
date: '2026-08-04',
|
||||
groupKey: '0.19',
|
||||
sections: [
|
||||
{
|
||||
heading: 'Fixed',
|
||||
items: [
|
||||
{
|
||||
text: '**Overlay:**',
|
||||
children: [
|
||||
{ text: 'Fixed `something`.', children: [] },
|
||||
{ text: 'Fixed another thing.', children: [] },
|
||||
],
|
||||
},
|
||||
{ text: 'Standalone fix.', children: [] },
|
||||
],
|
||||
internal: false,
|
||||
},
|
||||
{
|
||||
heading: 'Internal',
|
||||
items: [{ text: 'Patched deps.', children: [] }],
|
||||
internal: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
test('inline markdown tokenizer splits code, bold, and links', () => {
|
||||
assert.deepEqual(tokenizeInlineMarkdown('Patched `undici` and **brace**.'), [
|
||||
{ kind: 'text', value: 'Patched ' },
|
||||
{ kind: 'code', value: 'undici' },
|
||||
{ kind: 'text', value: ' and ' },
|
||||
{ kind: 'strong', value: 'brace' },
|
||||
{ kind: 'text', value: '.' },
|
||||
]);
|
||||
assert.deepEqual(tokenizeInlineMarkdown('See [docs](https://example.com).'), [
|
||||
{ kind: 'text', value: 'See ' },
|
||||
{ kind: 'link', value: 'docs', href: 'https://example.com' },
|
||||
{ kind: 'text', value: '.' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('inline markdown tokenizer leaves plain text untouched', () => {
|
||||
assert.deepEqual(tokenizeInlineMarkdown('No markup here'), [
|
||||
{ kind: 'text', value: 'No markup here' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('entry badges mark the installed version and newer releases', () => {
|
||||
assert.equal(resolveEntryBadge('0.19.2', '0.19.2'), 'installed');
|
||||
assert.equal(resolveEntryBadge('0.20.0', '0.19.2'), 'newer');
|
||||
assert.equal(resolveEntryBadge('0.19.1', '0.19.2'), null);
|
||||
});
|
||||
|
||||
test('only entries in the newest major.minor line start expanded', () => {
|
||||
const snapshot = { expandedGroupKey: '0.19' } as Pick<ChangelogSnapshot, 'expandedGroupKey'>;
|
||||
|
||||
assert.equal(shouldEntryStartExpanded(ENTRY, snapshot), true);
|
||||
assert.equal(shouldEntryStartExpanded({ ...ENTRY, groupKey: '0.18' }, snapshot), false);
|
||||
assert.equal(shouldEntryStartExpanded(ENTRY, { expandedGroupKey: null }), false);
|
||||
});
|
||||
|
||||
test('entry node renders a collapsible section with badge and internal block', () => {
|
||||
const node = withFakeDocument(() =>
|
||||
createChangelogEntryNode(ENTRY, { expanded: true, badge: 'installed', index: 0 }),
|
||||
) as unknown as FakeNode;
|
||||
|
||||
assert.equal(node.tagName, 'details');
|
||||
assert.equal(node.open, true);
|
||||
assert.equal(node.dataset.changelogVersion, '0.19.2');
|
||||
|
||||
const nodes = flatten(node);
|
||||
const summary = nodes.find((child) => child.className === 'changelog-entry-summary');
|
||||
assert.ok(summary);
|
||||
assert.equal(summary?.dataset.changelogIndex, '0');
|
||||
assert.equal(
|
||||
nodes.find((child) => child.className === 'changelog-entry-version')?.textContent,
|
||||
'v0.19.2',
|
||||
);
|
||||
assert.equal(
|
||||
nodes.find((child) => child.className?.includes('changelog-entry-badge-installed'))
|
||||
?.textContent,
|
||||
'Installed',
|
||||
);
|
||||
assert.equal(
|
||||
nodes.filter((child) => child.className === 'changelog-internal').length,
|
||||
1,
|
||||
'internal sections stay behind their own fold',
|
||||
);
|
||||
});
|
||||
|
||||
test('entry node renders sub-bullets as a nested list under their lead bullet', () => {
|
||||
const node = withFakeDocument(() =>
|
||||
createChangelogEntryNode(ENTRY, { expanded: true, badge: null, index: 0 }),
|
||||
) as unknown as FakeNode;
|
||||
|
||||
const lists = flatten(node).filter((child) => child.className?.startsWith('changelog-items'));
|
||||
const topLevel = lists.find((list) => list.className === 'changelog-items');
|
||||
const nested = lists.filter((list) => list.className?.includes('changelog-items-nested'));
|
||||
|
||||
assert.ok(topLevel);
|
||||
assert.equal(topLevel?.children.length, 2, 'lead bullet and standalone fix stay siblings');
|
||||
assert.equal(nested.length, 1, 'children render in exactly one nested list');
|
||||
assert.equal(nested[0]?.children.length, 2);
|
||||
|
||||
// The nested list hangs off its parent <li>, not off the section.
|
||||
const leadItem = topLevel?.children[0];
|
||||
assert.equal(
|
||||
leadItem?.children.some((child) => child.className?.includes('changelog-items-nested')),
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
test('entry node renders collapsed when it is outside the current line', () => {
|
||||
const node = withFakeDocument(() =>
|
||||
createChangelogEntryNode(ENTRY, { expanded: false, badge: null, index: 3 }),
|
||||
) as unknown as FakeNode;
|
||||
|
||||
assert.equal(node.open, false);
|
||||
assert.equal(
|
||||
flatten(node).some((child) => child.className?.startsWith('changelog-entry-badge')),
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
test('source description names the release the changelog came from', () => {
|
||||
const base: ChangelogSnapshot = {
|
||||
entries: [],
|
||||
installedVersion: '0.19.2',
|
||||
latestVersion: null,
|
||||
expandedGroupKey: null,
|
||||
source: 'remote',
|
||||
};
|
||||
|
||||
assert.equal(
|
||||
describeChangelogSource({ ...base, releaseTag: 'v0.20.0' }),
|
||||
'Latest release v0.20.0',
|
||||
);
|
||||
assert.equal(describeChangelogSource(base), 'Latest published changelog');
|
||||
assert.equal(describeChangelogSource({ ...base, source: 'bundled' }), 'Bundled changelog');
|
||||
});
|
||||
@@ -0,0 +1,220 @@
|
||||
import type {
|
||||
ChangelogEntry,
|
||||
ChangelogItem,
|
||||
ChangelogSection,
|
||||
ChangelogSnapshot,
|
||||
} from '../../types/changelog';
|
||||
import { compareSemverLike } from '../../core/utils/semver-compare';
|
||||
|
||||
const SECTION_ICON: Record<string, string> = {
|
||||
Added: '✦',
|
||||
Changed: '⟲',
|
||||
Fixed: '✔',
|
||||
Docs: '▤',
|
||||
Internal: '⚙',
|
||||
'Breaking Changes': '⚠',
|
||||
Changes: '•',
|
||||
};
|
||||
|
||||
export type ChangelogEntryBadge = 'installed' | 'newer' | null;
|
||||
|
||||
export function resolveEntryBadge(
|
||||
entryVersion: string,
|
||||
installedVersion: string,
|
||||
): ChangelogEntryBadge {
|
||||
const comparison = compareSemverLike(entryVersion, installedVersion);
|
||||
if (comparison === 0) return 'installed';
|
||||
if (comparison > 0) return 'newer';
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Version entries in the newest major.minor line start expanded, mirroring the
|
||||
* docs-site changelog where older lines sit behind "Previous Versions".
|
||||
*/
|
||||
export function shouldEntryStartExpanded(
|
||||
entry: ChangelogEntry,
|
||||
snapshot: Pick<ChangelogSnapshot, 'expandedGroupKey'>,
|
||||
): boolean {
|
||||
if (!snapshot.expandedGroupKey) return false;
|
||||
return entry.groupKey === snapshot.expandedGroupKey;
|
||||
}
|
||||
|
||||
type InlineToken =
|
||||
| { kind: 'text'; value: string }
|
||||
| { kind: 'code'; value: string }
|
||||
| { kind: 'strong'; value: string }
|
||||
| { kind: 'link'; value: string; href: string };
|
||||
|
||||
/**
|
||||
* Minimal inline-markdown tokenizer for changelog bullets: backtick code,
|
||||
* bold, and links. Anything else stays literal text.
|
||||
*/
|
||||
export function tokenizeInlineMarkdown(text: string): InlineToken[] {
|
||||
const tokens: InlineToken[] = [];
|
||||
const pattern = /`([^`]+)`|\*\*([^*]+)\*\*|\[([^\]]+)\]\(([^)\s]+)\)/g;
|
||||
let lastIndex = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
|
||||
while ((match = pattern.exec(text)) !== null) {
|
||||
if (match.index > lastIndex) {
|
||||
tokens.push({ kind: 'text', value: text.slice(lastIndex, match.index) });
|
||||
}
|
||||
if (match[1] !== undefined) {
|
||||
tokens.push({ kind: 'code', value: match[1] });
|
||||
} else if (match[2] !== undefined) {
|
||||
tokens.push({ kind: 'strong', value: match[2] });
|
||||
} else if (match[3] !== undefined && match[4] !== undefined) {
|
||||
tokens.push({ kind: 'link', value: match[3], href: match[4] });
|
||||
}
|
||||
lastIndex = match.index + match[0].length;
|
||||
}
|
||||
|
||||
if (lastIndex < text.length) {
|
||||
tokens.push({ kind: 'text', value: text.slice(lastIndex) });
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
|
||||
function appendInlineMarkdown(target: HTMLElement, text: string): void {
|
||||
for (const token of tokenizeInlineMarkdown(text)) {
|
||||
if (token.kind === 'text') {
|
||||
target.appendChild(document.createTextNode(token.value));
|
||||
continue;
|
||||
}
|
||||
if (token.kind === 'code') {
|
||||
const code = document.createElement('code');
|
||||
code.className = 'changelog-code';
|
||||
code.textContent = token.value;
|
||||
target.appendChild(code);
|
||||
continue;
|
||||
}
|
||||
if (token.kind === 'strong') {
|
||||
const strong = document.createElement('strong');
|
||||
strong.textContent = token.value;
|
||||
target.appendChild(strong);
|
||||
continue;
|
||||
}
|
||||
// Links stay inert: the overlay has nowhere to navigate to.
|
||||
const link = document.createElement('span');
|
||||
link.className = 'changelog-link';
|
||||
link.textContent = token.value;
|
||||
link.title = token.href;
|
||||
target.appendChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
function createItemList(items: ChangelogItem[], depth: number): HTMLUListElement {
|
||||
const list = document.createElement('ul');
|
||||
list.className = depth === 0 ? 'changelog-items' : 'changelog-items changelog-items-nested';
|
||||
|
||||
for (const item of items) {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.className = 'changelog-item';
|
||||
|
||||
const text = document.createElement('span');
|
||||
text.className = 'changelog-item-text';
|
||||
appendInlineMarkdown(text, item.text);
|
||||
listItem.appendChild(text);
|
||||
|
||||
if (item.children.length > 0) {
|
||||
listItem.appendChild(createItemList(item.children, depth + 1));
|
||||
}
|
||||
list.appendChild(listItem);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
function createSectionNode(section: ChangelogSection): HTMLElement {
|
||||
const node = document.createElement('section');
|
||||
node.className = 'changelog-section';
|
||||
|
||||
const title = document.createElement('h4');
|
||||
title.className = 'changelog-section-title';
|
||||
title.textContent = `${SECTION_ICON[section.heading] ?? '•'} ${section.heading}`;
|
||||
node.appendChild(title);
|
||||
|
||||
node.appendChild(createItemList(section.items, 0));
|
||||
return node;
|
||||
}
|
||||
|
||||
function createInternalNode(sections: ChangelogSection[]): HTMLElement {
|
||||
const details = document.createElement('details');
|
||||
details.className = 'changelog-internal';
|
||||
|
||||
const summary = document.createElement('summary');
|
||||
summary.className = 'changelog-internal-summary';
|
||||
summary.textContent = 'Internal changes';
|
||||
details.appendChild(summary);
|
||||
|
||||
for (const section of sections) {
|
||||
details.appendChild(createSectionNode(section));
|
||||
}
|
||||
return details;
|
||||
}
|
||||
|
||||
export function createChangelogEntryNode(
|
||||
entry: ChangelogEntry,
|
||||
options: { expanded: boolean; badge: ChangelogEntryBadge; index: number },
|
||||
): HTMLDetailsElement {
|
||||
const details = document.createElement('details');
|
||||
details.className = 'changelog-entry';
|
||||
details.open = options.expanded;
|
||||
details.dataset.changelogVersion = entry.version;
|
||||
|
||||
const summary = document.createElement('summary');
|
||||
summary.className = 'changelog-entry-summary';
|
||||
summary.dataset.changelogIndex = String(options.index);
|
||||
summary.tabIndex = -1;
|
||||
|
||||
const version = document.createElement('span');
|
||||
version.className = 'changelog-entry-version';
|
||||
version.textContent = `v${entry.version}`;
|
||||
summary.appendChild(version);
|
||||
|
||||
if (entry.date) {
|
||||
const date = document.createElement('span');
|
||||
date.className = 'changelog-entry-date';
|
||||
date.textContent = entry.date;
|
||||
summary.appendChild(date);
|
||||
}
|
||||
|
||||
if (options.badge) {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = `changelog-entry-badge changelog-entry-badge-${options.badge}`;
|
||||
badge.textContent = options.badge === 'installed' ? 'Installed' : 'New';
|
||||
summary.appendChild(badge);
|
||||
}
|
||||
|
||||
details.appendChild(summary);
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'changelog-entry-body';
|
||||
const publicSections = entry.sections.filter((section) => !section.internal);
|
||||
const internalSections = entry.sections.filter((section) => section.internal);
|
||||
|
||||
for (const section of publicSections) {
|
||||
body.appendChild(createSectionNode(section));
|
||||
}
|
||||
if (internalSections.length > 0) {
|
||||
body.appendChild(createInternalNode(internalSections));
|
||||
}
|
||||
if (publicSections.length === 0 && internalSections.length === 0) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'changelog-empty-entry';
|
||||
empty.textContent = 'No release notes recorded for this version.';
|
||||
body.appendChild(empty);
|
||||
}
|
||||
|
||||
details.appendChild(body);
|
||||
return details;
|
||||
}
|
||||
|
||||
export function describeChangelogSource(snapshot: ChangelogSnapshot): string {
|
||||
if (snapshot.source === 'remote') {
|
||||
return snapshot.releaseTag
|
||||
? `Latest release ${snapshot.releaseTag}`
|
||||
: 'Latest published changelog';
|
||||
}
|
||||
return 'Bundled changelog';
|
||||
}
|
||||
@@ -0,0 +1,345 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import type { ChangelogSnapshot } from '../../types/changelog';
|
||||
import { createRendererState } from '../state.js';
|
||||
import { createChangelogModal } from './changelog.js';
|
||||
|
||||
function createClassList(initialTokens: string[] = []) {
|
||||
const tokens = new Set(initialTokens);
|
||||
return {
|
||||
add: (...entries: string[]) => {
|
||||
for (const entry of entries) tokens.add(entry);
|
||||
},
|
||||
remove: (...entries: string[]) => {
|
||||
for (const entry of entries) tokens.delete(entry);
|
||||
},
|
||||
contains: (entry: string) => tokens.has(entry),
|
||||
toggle: (entry: string, force?: boolean) => {
|
||||
if (force === true) tokens.add(entry);
|
||||
else if (force === false) tokens.delete(entry);
|
||||
else if (tokens.has(entry)) tokens.delete(entry);
|
||||
else tokens.add(entry);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function createElementStub() {
|
||||
return {
|
||||
value: '',
|
||||
textContent: '',
|
||||
innerHTML: '',
|
||||
classList: createClassList(['hidden']),
|
||||
contains: () => false,
|
||||
setAttribute: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
appendChild: () => {},
|
||||
querySelectorAll: () => [],
|
||||
focus: () => {},
|
||||
};
|
||||
}
|
||||
|
||||
const SNAPSHOT: ChangelogSnapshot = {
|
||||
entries: [],
|
||||
installedVersion: '0.19.2',
|
||||
latestVersion: '0.19.2',
|
||||
expandedGroupKey: '0.19',
|
||||
source: 'remote',
|
||||
releaseTag: 'v0.19.2',
|
||||
};
|
||||
|
||||
type Harness = {
|
||||
modal: ReturnType<typeof createChangelogModal>;
|
||||
dom: Record<string, ReturnType<typeof createElementStub>>;
|
||||
snapshotRequests: Array<{ refresh?: boolean } | undefined>;
|
||||
modalClosedNotifications: string[];
|
||||
restore: () => void;
|
||||
};
|
||||
|
||||
function createHarness(
|
||||
options: {
|
||||
getChangelogSnapshot?: (request?: { refresh?: boolean }) => Promise<ChangelogSnapshot>;
|
||||
} = {},
|
||||
): Harness {
|
||||
const previousWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
|
||||
const previousDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
|
||||
const previousHTMLElement = Object.getOwnPropertyDescriptor(globalThis, 'HTMLElement');
|
||||
const previousElement = Object.getOwnPropertyDescriptor(globalThis, 'Element');
|
||||
|
||||
const snapshotRequests: Array<{ refresh?: boolean } | undefined> = [];
|
||||
const modalClosedNotifications: string[] = [];
|
||||
|
||||
class TestElement {}
|
||||
for (const name of ['HTMLElement', 'Element'] as const) {
|
||||
Object.defineProperty(globalThis, name, {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: TestElement,
|
||||
});
|
||||
}
|
||||
Object.defineProperty(globalThis, 'window', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: {
|
||||
electronAPI: {
|
||||
focusMainWindow: async () => {},
|
||||
setIgnoreMouseEvents: () => {},
|
||||
notifyOverlayModalClosed: (modal: string) => {
|
||||
modalClosedNotifications.push(modal);
|
||||
},
|
||||
getChangelogSnapshot: async (request?: { refresh?: boolean }) => {
|
||||
snapshotRequests.push(request);
|
||||
return options.getChangelogSnapshot
|
||||
? await options.getChangelogSnapshot(request)
|
||||
: SNAPSHOT;
|
||||
},
|
||||
},
|
||||
focus: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
setTimeout: (callback: () => void) => setTimeout(callback, 0),
|
||||
},
|
||||
});
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: {
|
||||
activeElement: null,
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const dom = {
|
||||
overlay: createElementStub(),
|
||||
changelogModal: createElementStub(),
|
||||
changelogClose: createElementStub(),
|
||||
changelogRefresh: createElementStub(),
|
||||
changelogInstalled: createElementStub(),
|
||||
changelogSource: createElementStub(),
|
||||
changelogWarning: createElementStub(),
|
||||
changelogStatus: createElementStub(),
|
||||
changelogList: createElementStub(),
|
||||
};
|
||||
|
||||
const modal = createChangelogModal(
|
||||
{
|
||||
state: createRendererState(),
|
||||
platform: {
|
||||
overlayLayer: 'modal',
|
||||
isModalLayer: true,
|
||||
isLinuxPlatform: false,
|
||||
isMacOSPlatform: false,
|
||||
isWindowsPlatform: true,
|
||||
shouldToggleMouseIgnore: false,
|
||||
},
|
||||
dom,
|
||||
} as never,
|
||||
{
|
||||
modalStateReader: { isAnyModalOpen: () => false },
|
||||
syncSettingsModalSubtitleSuppression: () => {},
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
modal,
|
||||
dom,
|
||||
snapshotRequests,
|
||||
modalClosedNotifications,
|
||||
restore: () => {
|
||||
for (const [name, descriptor] of [
|
||||
['window', previousWindow],
|
||||
['document', previousDocument],
|
||||
['HTMLElement', previousHTMLElement],
|
||||
['Element', previousElement],
|
||||
] as const) {
|
||||
if (descriptor) {
|
||||
Object.defineProperty(globalThis, name, descriptor);
|
||||
} else {
|
||||
delete (globalThis as Record<string, unknown>)[name];
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
test('changelog modal loads a snapshot on open and shows the installed version', async () => {
|
||||
const harness = createHarness();
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
assert.deepEqual(harness.snapshotRequests, [undefined]);
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, 'Installed v0.19.2');
|
||||
assert.equal(harness.dom.changelogSource?.textContent, 'Latest release v0.19.2');
|
||||
assert.equal(harness.dom.changelogModal?.classList.contains('hidden'), false);
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal surfaces the bundled-fallback warning', async () => {
|
||||
const harness = createHarness({
|
||||
getChangelogSnapshot: async () => ({
|
||||
...SNAPSHOT,
|
||||
source: 'bundled',
|
||||
releaseTag: undefined,
|
||||
warning: 'Showing the bundled changelog: offline',
|
||||
}),
|
||||
});
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
assert.equal(
|
||||
harness.dom.changelogWarning?.textContent,
|
||||
'Showing the bundled changelog: offline',
|
||||
);
|
||||
assert.equal(harness.dom.changelogSource?.textContent, 'Bundled changelog');
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal reports a load failure instead of hanging on the spinner text', async () => {
|
||||
const harness = createHarness({
|
||||
getChangelogSnapshot: async () => {
|
||||
throw new Error('ipc down');
|
||||
},
|
||||
});
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
assert.match(
|
||||
harness.dom.changelogList?.textContent ?? '',
|
||||
/Changelog failed to load: ipc down/,
|
||||
);
|
||||
assert.equal(harness.dom.changelogStatus?.textContent, 'Press Esc to close.');
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal clears stale metadata when a later open fails to load', async () => {
|
||||
let shouldFail = false;
|
||||
const harness = createHarness({
|
||||
getChangelogSnapshot: async () => {
|
||||
if (shouldFail) throw new Error('offline');
|
||||
return SNAPSHOT;
|
||||
},
|
||||
});
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, 'Installed v0.19.2');
|
||||
harness.modal.closeChangelogModal();
|
||||
|
||||
shouldFail = true;
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
// The previous session's values must not linger behind the error message.
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, '');
|
||||
assert.equal(harness.dom.changelogSource?.textContent, '');
|
||||
assert.match(harness.dom.changelogList?.textContent ?? '', /Changelog failed to load: offline/);
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal clears stale metadata when a refresh fails', async () => {
|
||||
let shouldFail = false;
|
||||
const harness = createHarness({
|
||||
getChangelogSnapshot: async () => {
|
||||
if (shouldFail) throw new Error('refresh offline');
|
||||
return { ...SNAPSHOT, warning: 'Showing the bundled changelog: earlier failure' };
|
||||
},
|
||||
});
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, 'Installed v0.19.2');
|
||||
|
||||
shouldFail = true;
|
||||
harness.modal.handleChangelogKeydown({
|
||||
key: 'r',
|
||||
preventDefault: () => {},
|
||||
} as KeyboardEvent);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
// The rendered snapshot is gone, so nothing may still describe it.
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, '');
|
||||
assert.equal(harness.dom.changelogSource?.textContent, '');
|
||||
assert.equal(harness.dom.changelogWarning?.textContent, '');
|
||||
assert.match(
|
||||
harness.dom.changelogList?.textContent ?? '',
|
||||
/Changelog failed to load: refresh offline/,
|
||||
);
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal closes on Escape and notifies the main process', async () => {
|
||||
const harness = createHarness();
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
const handled = harness.modal.handleChangelogKeydown({
|
||||
key: 'Escape',
|
||||
preventDefault: () => {},
|
||||
} as KeyboardEvent);
|
||||
|
||||
assert.equal(handled, true);
|
||||
assert.deepEqual(harness.modalClosedNotifications, ['changelog']);
|
||||
assert.equal(harness.dom.changelogModal?.classList.contains('hidden'), true);
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal refetches on R and ignores keys while closed', async () => {
|
||||
const harness = createHarness();
|
||||
try {
|
||||
assert.equal(
|
||||
harness.modal.handleChangelogKeydown({ key: 'r', preventDefault: () => {} } as KeyboardEvent),
|
||||
false,
|
||||
);
|
||||
|
||||
harness.modal.openChangelogModal();
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
harness.modal.handleChangelogKeydown({
|
||||
key: 'r',
|
||||
preventDefault: () => {},
|
||||
} as KeyboardEvent);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
assert.deepEqual(harness.snapshotRequests, [undefined, { refresh: true }]);
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
|
||||
test('changelog modal drops a late in-flight load after close', async () => {
|
||||
const pending: Array<(snapshot: ChangelogSnapshot) => void> = [];
|
||||
const harness = createHarness({
|
||||
getChangelogSnapshot: () =>
|
||||
new Promise<ChangelogSnapshot>((resolve) => {
|
||||
pending.push(resolve);
|
||||
}),
|
||||
});
|
||||
try {
|
||||
harness.modal.openChangelogModal();
|
||||
harness.modal.closeChangelogModal();
|
||||
pending[0]?.(SNAPSHOT);
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
assert.equal(harness.dom.changelogInstalled?.textContent, '');
|
||||
} finally {
|
||||
harness.restore();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,351 @@
|
||||
import type { ChangelogSnapshot } from '../../types/changelog';
|
||||
import type { ModalStateReader, RendererContext } from '../context';
|
||||
import {
|
||||
createChangelogEntryNode,
|
||||
describeChangelogSource,
|
||||
resolveEntryBadge,
|
||||
shouldEntryStartExpanded,
|
||||
} from './changelog-render';
|
||||
|
||||
export function createChangelogModal(
|
||||
ctx: RendererContext,
|
||||
options: {
|
||||
modalStateReader: Pick<ModalStateReader, 'isAnyModalOpen'>;
|
||||
syncSettingsModalSubtitleSuppression: () => void;
|
||||
},
|
||||
) {
|
||||
let priorFocus: Element | null = null;
|
||||
let focusGuard: ((event: FocusEvent) => void) | null = null;
|
||||
let windowFocusGuard: (() => void) | null = null;
|
||||
let modalPointerFocusGuard: ((event: Event) => void) | null = null;
|
||||
let isRecoveringModalFocus = false;
|
||||
let lastFocusRecoveryAt = 0;
|
||||
let loadToken = 0;
|
||||
|
||||
function getSummaries(): HTMLElement[] {
|
||||
return Array.from(
|
||||
ctx.dom.changelogList.querySelectorAll('.changelog-entry-summary'),
|
||||
) as HTMLElement[];
|
||||
}
|
||||
|
||||
function setSelected(index: number): void {
|
||||
const summaries = getSummaries();
|
||||
if (summaries.length === 0) return;
|
||||
|
||||
const wrapped = index % summaries.length;
|
||||
const next = wrapped < 0 ? wrapped + summaries.length : wrapped;
|
||||
ctx.state.changelogSelectedIndex = next;
|
||||
|
||||
summaries.forEach((summary, idx) => {
|
||||
summary.classList.toggle('active', idx === next);
|
||||
summary.tabIndex = idx === next ? 0 : -1;
|
||||
});
|
||||
const active = summaries[next];
|
||||
if (!active) return;
|
||||
active.focus({ preventScroll: true });
|
||||
active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
||||
}
|
||||
|
||||
function getSelectedEntry(): HTMLDetailsElement | null {
|
||||
const summary = getSummaries()[ctx.state.changelogSelectedIndex];
|
||||
const entry = summary?.parentElement;
|
||||
return entry instanceof HTMLDetailsElement ? entry : null;
|
||||
}
|
||||
|
||||
function isChangelogModalFocusTarget(target: EventTarget | null): boolean {
|
||||
return target instanceof Element && ctx.dom.changelogModal.contains(target);
|
||||
}
|
||||
|
||||
function focusFallbackTarget(): boolean {
|
||||
if (!ctx.platform.isModalLayer) {
|
||||
void window.electronAPI.focusMainWindow();
|
||||
}
|
||||
const firstSummary = getSummaries().find((summary) => summary.offsetParent !== null);
|
||||
if (firstSummary) {
|
||||
firstSummary.focus({ preventScroll: true });
|
||||
return document.activeElement === firstSummary;
|
||||
}
|
||||
if (ctx.dom.changelogClose instanceof HTMLElement) {
|
||||
ctx.dom.changelogClose.focus({ preventScroll: true });
|
||||
return document.activeElement === ctx.dom.changelogClose;
|
||||
}
|
||||
window.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
function enforceModalFocus(): void {
|
||||
if (!ctx.state.changelogModalOpen) return;
|
||||
if (isChangelogModalFocusTarget(document.activeElement)) return;
|
||||
if (isRecoveringModalFocus) return;
|
||||
|
||||
const now = Date.now();
|
||||
if (now - lastFocusRecoveryAt < 120) return;
|
||||
|
||||
isRecoveringModalFocus = true;
|
||||
lastFocusRecoveryAt = now;
|
||||
focusFallbackTarget();
|
||||
window.setTimeout(() => {
|
||||
isRecoveringModalFocus = false;
|
||||
}, 120);
|
||||
}
|
||||
|
||||
function requestOverlayFocus(): void {
|
||||
if (!ctx.platform.isModalLayer) {
|
||||
void window.electronAPI.focusMainWindow();
|
||||
}
|
||||
}
|
||||
|
||||
function addPointerFocusListener(): void {
|
||||
if (modalPointerFocusGuard) return;
|
||||
modalPointerFocusGuard = () => {
|
||||
requestOverlayFocus();
|
||||
enforceModalFocus();
|
||||
};
|
||||
ctx.dom.changelogModal.addEventListener('pointerdown', modalPointerFocusGuard);
|
||||
ctx.dom.changelogModal.addEventListener('click', modalPointerFocusGuard);
|
||||
}
|
||||
|
||||
function removePointerFocusListener(): void {
|
||||
if (!modalPointerFocusGuard) return;
|
||||
ctx.dom.changelogModal.removeEventListener('pointerdown', modalPointerFocusGuard);
|
||||
ctx.dom.changelogModal.removeEventListener('click', modalPointerFocusGuard);
|
||||
modalPointerFocusGuard = null;
|
||||
}
|
||||
|
||||
function startFocusRecoveryGuards(): void {
|
||||
if (windowFocusGuard) return;
|
||||
windowFocusGuard = () => {
|
||||
requestOverlayFocus();
|
||||
enforceModalFocus();
|
||||
};
|
||||
window.addEventListener('blur', windowFocusGuard);
|
||||
window.addEventListener('focus', windowFocusGuard);
|
||||
}
|
||||
|
||||
function stopFocusRecoveryGuards(): void {
|
||||
if (!windowFocusGuard) return;
|
||||
window.removeEventListener('blur', windowFocusGuard);
|
||||
window.removeEventListener('focus', windowFocusGuard);
|
||||
windowFocusGuard = null;
|
||||
}
|
||||
|
||||
function renderSnapshot(snapshot: ChangelogSnapshot): void {
|
||||
ctx.dom.changelogList.innerHTML = '';
|
||||
ctx.dom.changelogList.classList.remove('changelog-list-empty');
|
||||
|
||||
ctx.dom.changelogInstalled.textContent = `Installed v${snapshot.installedVersion}`;
|
||||
ctx.dom.changelogSource.textContent = describeChangelogSource(snapshot);
|
||||
ctx.dom.changelogWarning.textContent = snapshot.warning ?? '';
|
||||
|
||||
if (snapshot.entries.length === 0) {
|
||||
ctx.dom.changelogList.classList.add('changelog-list-empty');
|
||||
ctx.dom.changelogList.textContent =
|
||||
snapshot.error ?? 'No changelog entries are available right now.';
|
||||
ctx.state.changelogSelectedIndex = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
snapshot.entries.forEach((entry, index) => {
|
||||
ctx.dom.changelogList.appendChild(
|
||||
createChangelogEntryNode(entry, {
|
||||
expanded: shouldEntryStartExpanded(entry, snapshot),
|
||||
badge: resolveEntryBadge(entry.version, snapshot.installedVersion),
|
||||
index,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
setSelected(0);
|
||||
}
|
||||
|
||||
async function load(options?: { refresh?: boolean }): Promise<void> {
|
||||
const token = ++loadToken;
|
||||
ctx.dom.changelogStatus.textContent = options?.refresh
|
||||
? 'Refreshing changelog...'
|
||||
: 'Loading changelog...';
|
||||
|
||||
try {
|
||||
const snapshot = await window.electronAPI.getChangelogSnapshot(options);
|
||||
if (token !== loadToken || !ctx.state.changelogModalOpen) return;
|
||||
renderSnapshot(snapshot);
|
||||
ctx.dom.changelogStatus.textContent =
|
||||
'J/K or arrows to move, Enter to fold, R to refresh, Esc closes.';
|
||||
} catch (error) {
|
||||
if (token !== loadToken || !ctx.state.changelogModalOpen) return;
|
||||
const message = error instanceof Error ? error.message : 'Unknown error.';
|
||||
ctx.dom.changelogList.innerHTML = '';
|
||||
ctx.dom.changelogList.classList.add('changelog-list-empty');
|
||||
// A failed refresh replaces an already-rendered snapshot, so the metadata
|
||||
// line has to be cleared here too or it keeps describing stale entries.
|
||||
ctx.dom.changelogInstalled.textContent = '';
|
||||
ctx.dom.changelogSource.textContent = '';
|
||||
ctx.dom.changelogWarning.textContent = '';
|
||||
ctx.dom.changelogList.textContent = `Changelog failed to load: ${message}`;
|
||||
ctx.dom.changelogStatus.textContent = 'Press Esc to close.';
|
||||
}
|
||||
}
|
||||
|
||||
function openChangelogModal(): void {
|
||||
if (ctx.state.changelogModalOpen) return;
|
||||
priorFocus = document.activeElement;
|
||||
|
||||
ctx.state.changelogModalOpen = true;
|
||||
ctx.state.changelogSelectedIndex = 0;
|
||||
options.syncSettingsModalSubtitleSuppression();
|
||||
ctx.dom.overlay.classList.add('interactive');
|
||||
ctx.dom.changelogModal.classList.remove('hidden');
|
||||
ctx.dom.changelogModal.setAttribute('aria-hidden', 'false');
|
||||
ctx.dom.changelogModal.setAttribute('tabindex', '-1');
|
||||
ctx.dom.changelogList.innerHTML = '';
|
||||
ctx.dom.changelogWarning.textContent = '';
|
||||
// Reset the metadata line too, so a failed load can't leave the previous
|
||||
// session's installed/source values on screen.
|
||||
ctx.dom.changelogInstalled.textContent = '';
|
||||
ctx.dom.changelogSource.textContent = '';
|
||||
if (ctx.platform.shouldToggleMouseIgnore) {
|
||||
window.electronAPI.setIgnoreMouseEvents(false);
|
||||
}
|
||||
|
||||
if (focusGuard === null) {
|
||||
focusGuard = (event: FocusEvent) => {
|
||||
if (!ctx.state.changelogModalOpen) return;
|
||||
if (!isChangelogModalFocusTarget(event.target)) {
|
||||
event.preventDefault();
|
||||
enforceModalFocus();
|
||||
}
|
||||
};
|
||||
document.addEventListener('focusin', focusGuard);
|
||||
}
|
||||
|
||||
addPointerFocusListener();
|
||||
startFocusRecoveryGuards();
|
||||
requestOverlayFocus();
|
||||
window.focus();
|
||||
enforceModalFocus();
|
||||
|
||||
void load();
|
||||
}
|
||||
|
||||
function closeChangelogModal(): void {
|
||||
if (!ctx.state.changelogModalOpen) return;
|
||||
|
||||
ctx.state.changelogModalOpen = false;
|
||||
loadToken += 1;
|
||||
options.syncSettingsModalSubtitleSuppression();
|
||||
ctx.dom.changelogModal.classList.add('hidden');
|
||||
ctx.dom.changelogModal.setAttribute('aria-hidden', 'true');
|
||||
window.electronAPI.notifyOverlayModalClosed('changelog');
|
||||
if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
|
||||
ctx.dom.overlay.classList.remove('interactive');
|
||||
}
|
||||
|
||||
if (focusGuard) {
|
||||
document.removeEventListener('focusin', focusGuard);
|
||||
focusGuard = null;
|
||||
}
|
||||
removePointerFocusListener();
|
||||
stopFocusRecoveryGuards();
|
||||
|
||||
if (priorFocus instanceof HTMLElement && priorFocus.isConnected) {
|
||||
priorFocus.focus({ preventScroll: true });
|
||||
} else if (ctx.dom.overlay instanceof HTMLElement) {
|
||||
ctx.dom.overlay.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
if (ctx.platform.shouldToggleMouseIgnore) {
|
||||
if (!ctx.state.isOverSubtitle && !options.modalStateReader.isAnyModalOpen()) {
|
||||
window.electronAPI.setIgnoreMouseEvents(true, { forward: true });
|
||||
} else {
|
||||
window.electronAPI.setIgnoreMouseEvents(false);
|
||||
}
|
||||
}
|
||||
window.focus();
|
||||
}
|
||||
|
||||
function handleChangelogKeydown(e: KeyboardEvent): boolean {
|
||||
if (!ctx.state.changelogModalOpen) return false;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
closeChangelogModal();
|
||||
return true;
|
||||
}
|
||||
|
||||
const key = e.key.toLowerCase();
|
||||
|
||||
if (key === 'r' && !e.ctrlKey && !e.metaKey && !e.altKey) {
|
||||
e.preventDefault();
|
||||
void load({ refresh: true });
|
||||
return true;
|
||||
}
|
||||
|
||||
const summaries = getSummaries();
|
||||
if (summaries.length === 0) return true;
|
||||
|
||||
if (key === 'arrowdown' || key === 'j') {
|
||||
e.preventDefault();
|
||||
setSelected(ctx.state.changelogSelectedIndex + 1);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (key === 'arrowup' || key === 'k') {
|
||||
e.preventDefault();
|
||||
setSelected(ctx.state.changelogSelectedIndex - 1);
|
||||
return true;
|
||||
}
|
||||
|
||||
if (key === 'enter' || key === ' ') {
|
||||
e.preventDefault();
|
||||
const entry = getSelectedEntry();
|
||||
if (entry) entry.open = !entry.open;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (key === 'arrowleft' || key === 'h') {
|
||||
e.preventDefault();
|
||||
const entry = getSelectedEntry();
|
||||
if (entry) entry.open = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (key === 'arrowright' || key === 'l') {
|
||||
e.preventDefault();
|
||||
const entry = getSelectedEntry();
|
||||
if (entry) entry.open = true;
|
||||
return true;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function wireDomEvents(): void {
|
||||
ctx.dom.changelogClose.addEventListener('click', () => {
|
||||
closeChangelogModal();
|
||||
});
|
||||
|
||||
ctx.dom.changelogRefresh.addEventListener('click', () => {
|
||||
void load({ refresh: true });
|
||||
});
|
||||
|
||||
ctx.dom.changelogList.addEventListener('click', (event: MouseEvent) => {
|
||||
const target = event.target;
|
||||
if (!(target instanceof Element)) return;
|
||||
const summary = target.closest('.changelog-entry-summary') as HTMLElement | null;
|
||||
if (!summary) return;
|
||||
const index = Number.parseInt(summary.dataset.changelogIndex ?? '', 10);
|
||||
if (!Number.isFinite(index)) return;
|
||||
ctx.state.changelogSelectedIndex = index;
|
||||
getSummaries().forEach((item, idx) => {
|
||||
item.classList.toggle('active', idx === index);
|
||||
item.tabIndex = idx === index ? 0 : -1;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
closeChangelogModal,
|
||||
handleChangelogKeydown,
|
||||
openChangelogModal,
|
||||
wireDomEvents,
|
||||
};
|
||||
}
|
||||
@@ -297,6 +297,88 @@ test('overlay notification action buttons send action ids', () => {
|
||||
}
|
||||
});
|
||||
|
||||
test('overlay notification keepOpen actions leave the card on screen', () => {
|
||||
const originalDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
|
||||
const originalWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
|
||||
const stack = createFakeElement();
|
||||
const sentActions: string[] = [];
|
||||
|
||||
Object.defineProperty(globalThis, 'document', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: {
|
||||
createElement: (tagName: string) => createFakeElement(tagName),
|
||||
},
|
||||
});
|
||||
Object.defineProperty(globalThis, 'window', {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: {
|
||||
clearTimeout: () => undefined,
|
||||
setTimeout: () => 1,
|
||||
electronAPI: {
|
||||
sendOverlayNotificationAction: (_notificationId: string, actionId: string) => {
|
||||
sentActions.push(actionId);
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const renderer = createOverlayNotificationRenderer({
|
||||
dom: {
|
||||
overlayNotificationStack: stack,
|
||||
},
|
||||
state: {
|
||||
isOverOverlayNotification: false,
|
||||
},
|
||||
} as never);
|
||||
|
||||
renderer.show({
|
||||
id: 'subminer-update-available',
|
||||
title: 'SubMiner update available',
|
||||
body: 'SubMiner v0.15.0 is available',
|
||||
persistent: true,
|
||||
actions: [
|
||||
{ id: 'install-update', label: 'Update' },
|
||||
{ id: 'view-changelog', label: "What's New", keepOpen: true },
|
||||
],
|
||||
});
|
||||
|
||||
const card = stack.children[0];
|
||||
if (!card) {
|
||||
assert.fail('Expected overlay notification card.');
|
||||
}
|
||||
const buttons: typeof card.children = [];
|
||||
const collect = (node: typeof card): void => {
|
||||
if (node.className === 'overlay-notification-action') buttons.push(node);
|
||||
for (const child of node.children) collect(child);
|
||||
};
|
||||
collect(card);
|
||||
assert.equal(buttons.length, 2);
|
||||
|
||||
// "What's New" opens the changelog but must not drop the Update affordance.
|
||||
buttons[1]?.dispatchEventType('click');
|
||||
assert.deepEqual(sentActions, ['view-changelog']);
|
||||
assert.equal(card.classList.contains('leaving'), false);
|
||||
|
||||
buttons[0]?.dispatchEventType('click');
|
||||
assert.deepEqual(sentActions, ['view-changelog', 'install-update']);
|
||||
assert.equal(card.classList.contains('leaving'), true);
|
||||
} finally {
|
||||
if (originalDocument) {
|
||||
Object.defineProperty(globalThis, 'document', originalDocument);
|
||||
} else {
|
||||
delete (globalThis as { document?: unknown }).document;
|
||||
}
|
||||
if (originalWindow) {
|
||||
Object.defineProperty(globalThis, 'window', originalWindow);
|
||||
} else {
|
||||
delete (globalThis as { window?: unknown }).window;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('overlay notification renderer updates same-id progress without replacing the spinner', () => {
|
||||
const originalDocument = Object.getOwnPropertyDescriptor(globalThis, 'document');
|
||||
const originalWindow = Object.getOwnPropertyDescriptor(globalThis, 'window');
|
||||
|
||||
@@ -293,7 +293,9 @@ export function createOverlayNotificationRenderer(
|
||||
window.electronAPI.sendOverlayNotificationAction?.(entry.id, action.id, {
|
||||
noteId: action.noteId,
|
||||
});
|
||||
remove(entry.id);
|
||||
if (action.keepOpen !== true) {
|
||||
remove(entry.id);
|
||||
}
|
||||
});
|
||||
actions.append(button);
|
||||
}
|
||||
|
||||
@@ -38,6 +38,7 @@ import { createKikuModal } from './modals/kiku.js';
|
||||
import { prepareForKikuFieldGroupingOpen } from './kiku-open.js';
|
||||
import { createPlaylistBrowserModal } from './modals/playlist-browser.js';
|
||||
import { createSessionHelpModal } from './modals/session-help.js';
|
||||
import { createChangelogModal } from './modals/changelog.js';
|
||||
import { createSubtitleSidebarModal } from './modals/subtitle-sidebar.js';
|
||||
import { isControllerInteractionBlocked } from './controller-interaction-blocking.js';
|
||||
import { createCharacterDictionaryModal } from './modals/character-dictionary.js';
|
||||
@@ -149,6 +150,12 @@ const modalDescriptors = [
|
||||
close: () => sessionHelpModal.closeSessionHelpModal(),
|
||||
suppressesSubtitles: true,
|
||||
},
|
||||
{
|
||||
id: 'changelog',
|
||||
isOpen: () => ctx.state.changelogModalOpen,
|
||||
close: () => changelogModal.closeChangelogModal(),
|
||||
suppressesSubtitles: true,
|
||||
},
|
||||
] satisfies readonly ModalDescriptor<OverlayHostedModal>[];
|
||||
|
||||
const modalRegistry = createModalRegistry(modalDescriptors);
|
||||
@@ -213,6 +220,10 @@ const sessionHelpModal = createSessionHelpModal(ctx, {
|
||||
modalStateReader: { isAnyModalOpen },
|
||||
syncSettingsModalSubtitleSuppression,
|
||||
});
|
||||
const changelogModal = createChangelogModal(ctx, {
|
||||
modalStateReader: { isAnyModalOpen },
|
||||
syncSettingsModalSubtitleSuppression,
|
||||
});
|
||||
const subtitleSidebarModal = createSubtitleSidebarModal(ctx, {
|
||||
modalStateReader: { isAnyModalOpen },
|
||||
shouldRestoreOpenOnStartup: async () =>
|
||||
@@ -266,6 +277,7 @@ const keyboardHandlers = createKeyboardHandlers(ctx, {
|
||||
handleControllerSelectKeydown: controllerSelectModal.handleControllerSelectKeydown,
|
||||
handleControllerDebugKeydown: controllerDebugModal.handleControllerDebugKeydown,
|
||||
handleSessionHelpKeydown: sessionHelpModal.handleSessionHelpKeydown,
|
||||
handleChangelogKeydown: changelogModal.handleChangelogKeydown,
|
||||
openSessionHelpModal: sessionHelpModal.openSessionHelpModal,
|
||||
openControllerSelectModal: () => {
|
||||
if (controllerSelectModal.openControllerSelectModal()) {
|
||||
@@ -525,6 +537,12 @@ function registerModalOpenHandlers(): void {
|
||||
window.electronAPI.notifyOverlayModalOpened('session-help');
|
||||
});
|
||||
});
|
||||
window.electronAPI.onOpenChangelog(() => {
|
||||
runGuarded('changelog:open', () => {
|
||||
changelogModal.openChangelogModal();
|
||||
window.electronAPI.notifyOverlayModalOpened('changelog');
|
||||
});
|
||||
});
|
||||
window.electronAPI.onOpenControllerSelect(() => {
|
||||
runGuarded('controller-select:open', () => {
|
||||
if (controllerSelectModal.openControllerSelectModal()) {
|
||||
@@ -794,6 +812,7 @@ async function init(): Promise<void> {
|
||||
controllerSelectModal.wireDomEvents();
|
||||
controllerDebugModal.wireDomEvents();
|
||||
sessionHelpModal.wireDomEvents();
|
||||
changelogModal.wireDomEvents();
|
||||
subtitleSidebarModal.wireDomEvents();
|
||||
characterDictionaryModal.wireDomEvents();
|
||||
window.addEventListener('beforeunload', () => {
|
||||
|
||||
@@ -100,6 +100,8 @@ export type RendererState = {
|
||||
|
||||
sessionHelpModalOpen: boolean;
|
||||
sessionHelpSelectedIndex: number;
|
||||
changelogModalOpen: boolean;
|
||||
changelogSelectedIndex: number;
|
||||
playlistBrowserModalOpen: boolean;
|
||||
playlistBrowserSnapshot: PlaylistBrowserSnapshot | null;
|
||||
playlistBrowserStatus: string;
|
||||
@@ -228,6 +230,8 @@ export function createRendererState(): RendererState {
|
||||
|
||||
sessionHelpModalOpen: false,
|
||||
sessionHelpSelectedIndex: 0,
|
||||
changelogModalOpen: false,
|
||||
changelogSelectedIndex: 0,
|
||||
playlistBrowserModalOpen: false,
|
||||
playlistBrowserSnapshot: null,
|
||||
playlistBrowserStatus: '',
|
||||
|
||||
@@ -3182,3 +3182,267 @@ body.subtitle-sidebar-embedded-open #subtitleSidebarContent {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Changelog modal */
|
||||
.changelog-content {
|
||||
width: min(820px, 94%);
|
||||
max-height: 86%;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.changelog-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.changelog-refresh {
|
||||
min-height: 28px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid rgba(110, 115, 141, 0.3);
|
||||
background: rgba(49, 50, 68, 0.76);
|
||||
color: var(--ctp-subtext1);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.changelog-refresh:hover,
|
||||
.changelog-refresh:focus-visible {
|
||||
border-color: rgba(138, 173, 244, 0.5);
|
||||
color: var(--ctp-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.changelog-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.changelog-installed {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(166, 218, 149, 0.45);
|
||||
background: rgba(166, 218, 149, 0.14);
|
||||
color: var(--ctp-green);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.changelog-source {
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.changelog-warning {
|
||||
min-height: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
color: var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.changelog-warning:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-status {
|
||||
min-height: 18px;
|
||||
font-size: 12px;
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.changelog-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: calc(86vh - 190px);
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.changelog-list-empty {
|
||||
color: var(--ctp-subtext0);
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.changelog-entry {
|
||||
/* Flex children shrink by default, which crushes expanded entries inside the
|
||||
scrolling list; pin them to their content height instead. */
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid rgba(110, 115, 141, 0.18);
|
||||
border-radius: 10px;
|
||||
background: rgba(54, 58, 79, 0.16);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.changelog-entry[open] {
|
||||
border-color: rgba(138, 173, 244, 0.28);
|
||||
background: rgba(54, 58, 79, 0.26);
|
||||
}
|
||||
|
||||
.changelog-entry-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.changelog-entry-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.changelog-entry-summary::before {
|
||||
content: '▸';
|
||||
color: var(--ctp-overlay1);
|
||||
font-size: 11px;
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
|
||||
.changelog-entry[open] > .changelog-entry-summary::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.changelog-entry-summary:hover,
|
||||
.changelog-entry-summary:focus-visible,
|
||||
.changelog-entry-summary.active {
|
||||
background: rgba(138, 173, 244, 0.12);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.changelog-entry-summary.active {
|
||||
box-shadow: inset 3px 0 0 var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.changelog-entry-version {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.changelog-entry-date {
|
||||
font-size: 12px;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.changelog-entry-badge {
|
||||
margin-left: auto;
|
||||
padding: 2px 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.changelog-entry-badge-installed {
|
||||
border: 1px solid rgba(166, 218, 149, 0.5);
|
||||
background: rgba(166, 218, 149, 0.16);
|
||||
color: var(--ctp-green);
|
||||
}
|
||||
|
||||
.changelog-entry-badge-newer {
|
||||
border: 1px solid rgba(238, 212, 159, 0.55);
|
||||
background: rgba(238, 212, 159, 0.16);
|
||||
color: var(--ctp-yellow);
|
||||
}
|
||||
|
||||
.changelog-entry-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 4px 14px 14px;
|
||||
}
|
||||
|
||||
.changelog-section-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: var(--ctp-blue);
|
||||
}
|
||||
|
||||
.changelog-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.changelog-items-nested {
|
||||
gap: 5px;
|
||||
margin-top: 6px;
|
||||
padding-left: 16px;
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.changelog-item {
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
color: var(--ctp-subtext1);
|
||||
}
|
||||
|
||||
.changelog-item::marker {
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.changelog-items-nested > .changelog-item {
|
||||
font-size: 12.5px;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
.changelog-item strong {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.changelog-code {
|
||||
padding: 1px 5px;
|
||||
border-radius: 5px;
|
||||
background: rgba(24, 25, 38, 0.85);
|
||||
color: var(--ctp-peach);
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.changelog-link {
|
||||
color: var(--ctp-blue);
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
.changelog-internal {
|
||||
border-top: 1px dashed rgba(110, 115, 141, 0.25);
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.changelog-internal-summary {
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.changelog-empty-entry {
|
||||
font-size: 12px;
|
||||
color: var(--ctp-subtext0);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.changelog-list {
|
||||
max-height: calc(86vh - 200px);
|
||||
}
|
||||
|
||||
.changelog-entry-badge {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,6 +120,15 @@ export type RendererDom = {
|
||||
subtitleSidebarStatus: HTMLDivElement;
|
||||
subtitleSidebarList: HTMLUListElement;
|
||||
|
||||
changelogModal: HTMLDivElement;
|
||||
changelogClose: HTMLButtonElement;
|
||||
changelogRefresh: HTMLButtonElement;
|
||||
changelogInstalled: HTMLSpanElement;
|
||||
changelogSource: HTMLSpanElement;
|
||||
changelogWarning: HTMLDivElement;
|
||||
changelogStatus: HTMLDivElement;
|
||||
changelogList: HTMLDivElement;
|
||||
|
||||
sessionHelpModal: HTMLDivElement;
|
||||
sessionHelpClose: HTMLButtonElement;
|
||||
sessionHelpShortcut: HTMLDivElement;
|
||||
@@ -289,6 +298,14 @@ export function resolveRendererDom(): RendererDom {
|
||||
subtitleSidebarStatus: getRequiredElement<HTMLDivElement>('subtitleSidebarStatus'),
|
||||
subtitleSidebarList: getRequiredElement<HTMLUListElement>('subtitleSidebarList'),
|
||||
|
||||
changelogModal: getRequiredElement<HTMLDivElement>('changelogModal'),
|
||||
changelogClose: getRequiredElement<HTMLButtonElement>('changelogClose'),
|
||||
changelogRefresh: getRequiredElement<HTMLButtonElement>('changelogRefresh'),
|
||||
changelogInstalled: getRequiredElement<HTMLSpanElement>('changelogInstalled'),
|
||||
changelogSource: getRequiredElement<HTMLSpanElement>('changelogSource'),
|
||||
changelogWarning: getRequiredElement<HTMLDivElement>('changelogWarning'),
|
||||
changelogStatus: getRequiredElement<HTMLDivElement>('changelogStatus'),
|
||||
changelogList: getRequiredElement<HTMLDivElement>('changelogList'),
|
||||
sessionHelpModal: getRequiredElement<HTMLDivElement>('sessionHelpModal'),
|
||||
sessionHelpClose: getRequiredElement<HTMLButtonElement>('sessionHelpClose'),
|
||||
sessionHelpShortcut: getRequiredElement<HTMLDivElement>('sessionHelpShortcut'),
|
||||
|
||||
Reference in New Issue
Block a user