mirror of
https://github.com/J3vb/OwnCord.git
synced 2026-09-03 03:50:00 +03:00
refactor: move Client/tauri-client to Client (pure move, no content change)
This commit is contained in:
Claude
@@ -0,0 +1,257 @@
|
||||
// Step 8.60 — Quick switcher modal (Ctrl+K) for fast channel navigation.
|
||||
// Uses @lib/dom helpers exclusively. Never sets innerHTML with user content.
|
||||
|
||||
import { applyDialogSemantics, focusDialog, trapFocus } from "@lib/a11y";
|
||||
import { createElement, setText, appendChildren, clearChildren } from "@lib/dom";
|
||||
import { createIcon } from "@lib/icons";
|
||||
import { channelsStore } from "@stores/channels.store";
|
||||
import type { Channel } from "@stores/channels.store";
|
||||
import type { MountableComponent } from "@lib/safe-render";
|
||||
|
||||
export interface QuickSwitcherOptions {
|
||||
readonly onSelectChannel: (channelId: number) => void;
|
||||
readonly onClose: () => void;
|
||||
}
|
||||
|
||||
export function createQuickSwitcher(options: QuickSwitcherOptions): MountableComponent {
|
||||
const ac = new AbortController();
|
||||
const signal = ac.signal;
|
||||
|
||||
let root: HTMLDivElement | null = null;
|
||||
let resultsDiv: HTMLDivElement;
|
||||
let input: HTMLInputElement;
|
||||
let activeIndex = 0;
|
||||
let filteredChannels: readonly Channel[] = [];
|
||||
let unsubscribe: (() => void) | null = null;
|
||||
let restoreFocus: (() => void) | null = null;
|
||||
|
||||
function getChannelIcon(ch: Channel): SVGSVGElement {
|
||||
return ch.type === "voice" ? createIcon("volume-2", 14) : createIcon("hash", 14);
|
||||
}
|
||||
|
||||
function getFilteredChannels(query: string): readonly Channel[] {
|
||||
const state = channelsStore.getState();
|
||||
// DM rows are synthesized into channelsStore once opened, but they have
|
||||
// their own sidebar path (full clearDmUnread/setSidebarMode handling) —
|
||||
// listing them here too would select via a bare setActiveChannel and
|
||||
// leave their unread/mention badge lit forever.
|
||||
const all = Array.from(state.channels.values()).filter((ch) => ch.type !== "dm");
|
||||
const sorted = [...all].toSorted((a, b) => a.position - b.position);
|
||||
|
||||
if (query.length === 0) return sorted;
|
||||
|
||||
const lower = query.toLowerCase();
|
||||
return sorted.filter((ch) => ch.name.toLowerCase().includes(lower));
|
||||
}
|
||||
|
||||
function renderResults(): void {
|
||||
clearChildren(resultsDiv);
|
||||
activeIndex = Math.min(activeIndex, Math.max(0, filteredChannels.length - 1));
|
||||
|
||||
for (let i = 0; i < filteredChannels.length; i++) {
|
||||
const ch = filteredChannels[i]!;
|
||||
const isActive = i === activeIndex;
|
||||
|
||||
const item = createElement("div", {
|
||||
class: isActive
|
||||
? "quick-switcher__item quick-switcher__item--active"
|
||||
: "quick-switcher__item",
|
||||
"data-channelid": String(ch.id),
|
||||
// Combobox option wiring: the id feeds aria-activedescendant so a
|
||||
// screen reader tracks the roving --active highlight without the
|
||||
// input ever losing DOM focus.
|
||||
id: `qs-option-${i}`,
|
||||
role: "option",
|
||||
"aria-selected": isActive ? "true" : "false",
|
||||
});
|
||||
|
||||
const icon = createElement("span", { class: "quick-switcher__icon" });
|
||||
icon.appendChild(getChannelIcon(ch));
|
||||
const name = createElement("span", { class: "quick-switcher__name" });
|
||||
setText(name, ch.name);
|
||||
|
||||
const parts: (Element | string)[] = [icon, name];
|
||||
|
||||
if (ch.category !== null) {
|
||||
const category = createElement("span", { class: "quick-switcher__category" });
|
||||
setText(category, ch.category);
|
||||
parts.push(category);
|
||||
}
|
||||
|
||||
appendChildren(item, ...parts);
|
||||
|
||||
resultsDiv.appendChild(item);
|
||||
}
|
||||
|
||||
// Re-point aria-activedescendant on every render — arrow keys, filtering
|
||||
// and store refreshes all funnel through here, so it can never go stale.
|
||||
// An empty result set clears it; pointing at a missing id is worse than
|
||||
// pointing at nothing.
|
||||
if (filteredChannels.length > 0) {
|
||||
input.setAttribute("aria-activedescendant", `qs-option-${activeIndex}`);
|
||||
} else {
|
||||
input.removeAttribute("aria-activedescendant");
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(): void {
|
||||
const query = input.value.trim();
|
||||
filteredChannels = getFilteredChannels(query);
|
||||
activeIndex = 0;
|
||||
renderResults();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent): void {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
options.onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
if (filteredChannels.length > 0) {
|
||||
activeIndex = (activeIndex + 1) % filteredChannels.length;
|
||||
renderResults();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
if (filteredChannels.length > 0) {
|
||||
activeIndex = (activeIndex - 1 + filteredChannels.length) % filteredChannels.length;
|
||||
renderResults();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
const selected = filteredChannels[activeIndex];
|
||||
if (selected !== undefined) {
|
||||
options.onSelectChannel(selected.id);
|
||||
options.onClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleBackdropClick(e: MouseEvent): void {
|
||||
if (e.target === root) {
|
||||
options.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
function handleGlobalKeydown(e: KeyboardEvent): void {
|
||||
// Same case-insensitive, altKey-excluding match as
|
||||
// OverlayManagers.ts's open handler (OC-0150) — otherwise this close
|
||||
// path goes dead under CapsLock and AltGr swallows a keystroke for
|
||||
// nothing.
|
||||
if (!(e.ctrlKey || e.metaKey) || e.altKey || e.key.toLowerCase() !== "k") return;
|
||||
e.preventDefault();
|
||||
if (root !== null && root.parentNode !== null) {
|
||||
options.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
function refreshFromStore(): void {
|
||||
const query = input?.value.trim() ?? "";
|
||||
filteredChannels = getFilteredChannels(query);
|
||||
renderResults();
|
||||
}
|
||||
|
||||
function mount(container: Element): void {
|
||||
// Overlay backdrop
|
||||
root = createElement("div", {
|
||||
class: "quick-switcher-overlay",
|
||||
style:
|
||||
"position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; justify-content: center; padding-top: 20vh;",
|
||||
});
|
||||
|
||||
// Modal container
|
||||
const modal = createElement("div", { class: "quick-switcher" });
|
||||
applyDialogSemantics(modal, { label: "Quick switcher" });
|
||||
trapFocus(modal, signal);
|
||||
|
||||
// Search input — combobox over the results listbox: the input keeps DOM
|
||||
// focus while aria-activedescendant (set in renderResults) names the row
|
||||
// the arrow keys have highlighted. The list is always rendered, so
|
||||
// aria-expanded is statically true.
|
||||
input = createElement("input", {
|
||||
class: "quick-switcher__input",
|
||||
type: "text",
|
||||
placeholder: "Where do you want to go?",
|
||||
role: "combobox",
|
||||
"aria-expanded": "true",
|
||||
"aria-autocomplete": "list",
|
||||
"aria-controls": "quick-switcher-results",
|
||||
});
|
||||
|
||||
// Results list
|
||||
resultsDiv = createElement("div", {
|
||||
class: "quick-switcher__results",
|
||||
id: "quick-switcher-results",
|
||||
role: "listbox",
|
||||
});
|
||||
|
||||
appendChildren(modal, input, resultsDiv);
|
||||
root.appendChild(modal);
|
||||
container.appendChild(root);
|
||||
|
||||
// Capture the opener before anything inside grabs focus — Ctrl+K comes
|
||||
// from the composer, and a keyboard user needs destroy() to land them
|
||||
// back there, not at the top of the document.
|
||||
restoreFocus = focusDialog(modal);
|
||||
|
||||
// Initial render
|
||||
filteredChannels = getFilteredChannels("");
|
||||
renderResults();
|
||||
|
||||
// Event listeners
|
||||
input.addEventListener("input", handleInput, { signal });
|
||||
input.addEventListener("keydown", handleKeydown, { signal });
|
||||
root.addEventListener("click", handleBackdropClick, { signal });
|
||||
document.addEventListener("keydown", handleGlobalKeydown, { signal });
|
||||
|
||||
// Delegated row click — renderResults() rebuilds every row from scratch
|
||||
// on each keystroke, arrow key, and store refresh, so a per-row listener
|
||||
// registered against this overlay-lifetime `signal` would never be freed
|
||||
// until the overlay closes (OC-0307). One listener on the (stable)
|
||||
// container instead, keyed off the data-channelid each row already
|
||||
// carries.
|
||||
resultsDiv.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
const row = (e.target as HTMLElement | null)?.closest<HTMLElement>(".quick-switcher__item");
|
||||
const id = row?.dataset.channelid;
|
||||
if (id !== undefined) {
|
||||
options.onSelectChannel(Number(id));
|
||||
options.onClose();
|
||||
}
|
||||
},
|
||||
{ signal },
|
||||
);
|
||||
|
||||
// Subscribe to store changes
|
||||
unsubscribe = channelsStore.subscribeSelector((s) => s.channels, refreshFromStore);
|
||||
|
||||
// Auto-focus
|
||||
requestAnimationFrame(() => input.focus());
|
||||
}
|
||||
|
||||
function destroy(): void {
|
||||
ac.abort();
|
||||
if (unsubscribe !== null) {
|
||||
unsubscribe();
|
||||
unsubscribe = null;
|
||||
}
|
||||
root?.remove();
|
||||
root = null;
|
||||
// Restore after the overlay is gone, so focus cannot land on a node the
|
||||
// removal is about to detach.
|
||||
restoreFocus?.();
|
||||
restoreFocus = null;
|
||||
}
|
||||
|
||||
return { mount, destroy };
|
||||
}
|
||||
Reference in New Issue
Block a user