') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Searchable/filterable settings navigation · Issue #39 · modelstudioai/openwork · GitHub
Skip to content

Searchable/filterable settings navigation #39

Closed
#40
Closed
Searchable/filterable settings navigation#39
#40
Labels
enhancementNew feature or requestloop-bot

Description

@DragonnZhang
DragonnZhang
opened on Jun 30, 2026

Problem or Motivation

The settings navigator (SettingsNavigator) renders a flat, ever-growing list
of settings sections (General, Appearance, App, AI, Input, Shortcuts, Memory,
MCP Servers, Hooks, Extensions, Permissions, Labels, Messaging, Server,
Workspace, Preferences — 16 sections today). There is no way to filter it.

Comparable desktop apps (Claude Code Desktop, VS Code, Codex desktop) all ship a
search box at the top of their settings so users can jump to a setting by
typing part of its name instead of scanning the whole list. OpenWork's session
list, sources list, model picker, and tools list already have search affordances
— settings is the conspicuous exception.

Proposed Solution

Add a search box at the top of SettingsNavigator that filters the section list
by title and description (case-insensitive, substring). It mirrors the
existing SessionSearchHeader styling (search icon, clear button, focus ring)
for visual consistency, shows a "No results found" empty state when nothing
matches, and supports Esc to clear.

This is a frontend-only change:

  • SettingsNavigator already has all section metadata (SETTINGS_ITEMS,
    resolved labels/descriptions) in the renderer. Filtering is pure client-side
    React state — no backend, no qwen-code change.
  • Reuses existing i18n keys (common.search, common.noResultsFound), so no
    new locale strings are introduced.

Alternatives Considered

  • Command-palette navigation already exists, but it is a separate global
    surface; users in the settings panel expect to filter the list they are
    looking at, the way every comparable app does.

Additional Context

Feasibility: frontend-only / doable. Verified against apps/electron and
packages/ui — the navigator is a pure renderer component and the data it
needs is already in memory.

Acceptance criteria (CDP e2e assertion)

A new e2e/assertions/settings-search.assert.ts drives the real built app over
CDP and asserts the full path:

  1. Open Settings from the sidebar; the search box renders and the section
    list shows more than one row.
  2. Typing the first section's title narrows the list to exactly the predicted
    matches, every visible row actually contains the query, and the list shrinks.
  3. A no-match query (zzqqxxnomatchzzqqxx) shows the empty state and hides every
    row.
  4. Clearing the query restores the full list.

Part of the autonomous desktop-feature loop (loop-bot).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestloop-bot

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions