mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-09-16 23:27:14 +00:00
feat(ui): add global command palette (Ctrl+K) for fast navigation and search (#6352)
* feat(ui): add global command palette (Ctrl+K) for fast navigation and search * fix(ui): address review feedback for shortcut listener, i18n parity, and search deep links * fix(ui): resolve search routing, translation keys, and palette state reset * fix(ui): improve command palette styling and sidebar transitions * fix(ui): address review feedback for typecheck, codegen, debouncing, and state reset * fix(ui): resolve effect state update warning and debounce reset in command palette * fix(ui): address review feedback for stale client search results and theme action * style(ui): apply oxfmt formatting to command palette and tests * fix(deps): update js-yaml override to resolve audit advisory * docs(api): sync the docs OpenAPI copy with the new InboundOption fields Adding Network/Security to InboundOption regenerated frontend/public/openapi.json, but docs/public/openapi.json is a hand-kept copy of that file and nothing checks it: make verify never reaches docs/, and docs-ci.yml fires only on docs/**. The two files were byte-identical on main and had diverged here, so the published API reference described a response shape the panel no longer returns. Regenerating the MDX under docs/content/docs/en/reference/api/ produced no change — the schema is read from the JSON at render time. * fix(ui): unnest the command palette row control and label its shortcut The palette row was a <button> wrapping the copy-subscription <button>. Nested interactive content is invalid HTML and React 19 logs two errors for it on every client result. The row is now a role="button" div using activateOnKey, the pattern the rest of the panel already uses, with line-height pinned so dropping the UA button style does not grow every row. Its keydown handler ignores events bubbling from the nested button: activateOnKey preventDefaults Enter, which would otherwise cancel the browser's Enter-to-click on the copy button and navigate instead. The sidebar chip hardcoded the Mac glyph while the handler accepts Ctrl as well, so Linux and Windows operators were shown a key they do not have; it now picks the modifier from the platform. Also restores the comment on ClientsPage's debouncedSearch that the deep-link change removed — the code it explains is unchanged.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useLocation, useSearchParams } from 'react-router';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Badge,
|
||||
@@ -382,7 +383,12 @@ export default function ClientsPage() {
|
||||
>(null);
|
||||
|
||||
const initial = readFilterState();
|
||||
const [searchKey, setSearchKey] = useState(initial.searchKey);
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const searchParam = searchParams.get('search');
|
||||
const [searchKey, setSearchKey] = useState(
|
||||
searchParam !== null ? searchParam : initial.searchKey,
|
||||
);
|
||||
const [filters, setFilters] = useState<ClientFilters>(initial.filters);
|
||||
const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
|
||||
|
||||
@@ -405,6 +411,15 @@ export default function ClientsPage() {
|
||||
// debouncedSearch lags behind the input so we don't spam the server on every
|
||||
// keystroke; the search box still feels instant locally.
|
||||
const [debouncedSearch, setDebouncedSearch] = useState(searchKey);
|
||||
const [prevLocationKey, setPrevLocationKey] = useState(location.key);
|
||||
|
||||
if (location.key !== prevLocationKey) {
|
||||
setPrevLocationKey(location.key);
|
||||
if (searchParam !== null) {
|
||||
setSearchKey(searchParam);
|
||||
setDebouncedSearch(searchParam);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useCallback, useMemo, useState, type Key } from 'react';
|
||||
import { useLocation, useSearchParams } from 'react-router';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Button,
|
||||
@@ -58,7 +59,18 @@ export default function InboundList({
|
||||
// Node filter (#4997): 'all' shows everything, 0 is the local-panel
|
||||
// sentinel (inbounds without a nodeId), otherwise a node id. Session-only.
|
||||
const [nodeFilter, setNodeFilter] = useState<number | 'all'>('all');
|
||||
const [searchKey, setSearchKey] = useState('');
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const searchParam = searchParams.get('search');
|
||||
const [searchKey, setSearchKey] = useState(() => searchParam || '');
|
||||
const [prevLocationKey, setPrevLocationKey] = useState(location.key);
|
||||
|
||||
if (location.key !== prevLocationKey) {
|
||||
setPrevLocationKey(location.key);
|
||||
if (searchParam !== null) {
|
||||
setSearchKey(searchParam);
|
||||
}
|
||||
}
|
||||
|
||||
const showNodeFilter = useMemo(
|
||||
() => nodesById.size > 0 || dbInbounds.some((ib) => ib.nodeId != null),
|
||||
|
||||
Reference in New Issue
Block a user