mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-15 21:56:18 -08:00
ea51cae3db
* feat(settings): search settings from the header and the command palette The header search on the Settings page was shown but disabled. It now searches a shared index of all 56 settings rows by translated title, description and English synonyms, replaces the section page with ranked results, and opens a result by scrolling to, focusing and briefly highlighting its row. Enter opens the best match, and the section navigation shows per-section match counts. The command palette gains a "Settings" group that lists the best six matches for a non-empty query, so any setting is one Ctrl/Cmd+K away. Rows hidden by the current form state fall back to the control that reveals them; rows the runtime cannot render are never returned. The index ships through a new @iptvnator/workspace/shell/util/settings-search sub-entrypoint so it stays out of the eager bundle, and a registry spec keeps it in step with the section templates. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(settings): let search reveals win over pending input and gate embedded MPV rows - A reveal (result click, command palette, Enter) now cancels a search keystroke still waiting for its debounce, so its q navigation can no longer supersede the reveal and leave the results open. - Embedded MPV extra options and auto-reconnect require a lazily probed embedded MPV capability; frame copy also needs frameCopyAvailable, so search never offers a row the settings page cannot render. - Keyboard users keep a focus-visible ring on the revealed row after the highlight fades. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * fix(workspace): wait for palette probes without Promise.allSettled The web tsconfig lib predates Promise.allSettled; use Promise.all over rejection-safe probes instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: 4gray <fourgray@proton.me> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
122 lines
2.3 KiB
SCSS
122 lines
2.3 KiB
SCSS
:host {
|
|
display: block;
|
|
}
|
|
|
|
.settings-search-results__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-search-result {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
width: 100%;
|
|
min-height: 56px;
|
|
padding: 12px 10px;
|
|
border: 0;
|
|
border-top: 1px solid var(--settings-item-border);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: var(--app-hover-overlay);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--app-selection-color);
|
|
outline-offset: -2px;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
li:first-child .settings-search-result {
|
|
border-top: 0;
|
|
}
|
|
|
|
.settings-search-result__icon,
|
|
.settings-search-result__chevron {
|
|
flex-shrink: 0;
|
|
color: var(--settings-muted);
|
|
}
|
|
|
|
.settings-search-result__text {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.settings-search-result__label {
|
|
font-size: 0.95rem;
|
|
font-weight: 650;
|
|
letter-spacing: -0.01em;
|
|
color: var(--app-heading-color);
|
|
}
|
|
|
|
.settings-search-result__description {
|
|
overflow: hidden;
|
|
color: var(--settings-muted);
|
|
font-size: 0.84rem;
|
|
line-height: 1.45;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-search-result__section {
|
|
flex-shrink: 0;
|
|
padding: 2px 10px;
|
|
border: 1px solid var(--settings-item-border);
|
|
border-radius: 999px;
|
|
color: var(--settings-muted);
|
|
font-size: 0.78rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-search-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 40px 16px;
|
|
color: var(--settings-muted);
|
|
text-align: center;
|
|
|
|
mat-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 32px;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
max-width: 420px;
|
|
line-height: 1.45;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.settings-search-result {
|
|
flex-wrap: wrap;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.settings-search-result__description {
|
|
white-space: normal;
|
|
}
|
|
|
|
.settings-search-result__section {
|
|
margin-left: 38px;
|
|
}
|
|
|
|
.settings-search-result__chevron {
|
|
display: none;
|
|
}
|
|
}
|