[Feat]: Notebooks: filter outline entries by their displayed text

Open Beginner friendly
#1,513 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, sql, typescript

Research direction

Start with packages/web-ui/src/components/notebook/NotebookOutline.tsx and packages/web-ui/src/utils/notebookOutline.ts; the issue says the component maps outline entries to navigation buttons and has no text filter. Read the existing helper tests in packages/web-ui/tests/utils/notebookOutline.test.ts first. Done means the displayed entries filter as specified, navigation targets and notebook state stay unchanged, and the listed cases are covered.

Written by the indexing model from the issue text.

Description

feature request good first issue
Prerequisites
  • I have written a descriptive issue title.
  • I have searched existing issues and open pull requests to avoid duplicating an existing feature request.
🚀 Feature Proposal

Add a small local search field to the notebook outline to filter its existing entries by displayed name, heading or fallback label.

Motivation

A notebook with many named cells and headings should be navigable without manually scrolling its full outline.

Example
Type revenue in the outline search field to show matching cell names and Markdown headings. Clear the field to restore the complete outline.
Acceptance criteria
  • Filter existing outline entries case-insensitively by their displayed text, trimming the search term and preserving original order and indentation.
  • Do not filter/hide notebook cells or renumber cell_N references; matching entries retain their existing target cell ids.
  • Provide an accessible label, clear action and localized no-matches state. Clearing restores the full list without changing the notebook.
  • Keep the query local to the outline session, outside persisted document/undo state, and update matches as cell names or headings change.
  • Test SQL names, Markdown headings, fallback labels, case/whitespace, no matches and unchanged navigation targets.
Where to start

Verified against main at 066e41c34001edbc6c869ed726aa3958d3ae7db5: NotebookOutline maps every extractOutline entry directly to a navigation button. There is no outline query or text filter.

Existing test references:

Scope: Displayed outline text only; full SQL-source search, regex search and result searching are outside this milestone.

Plugin behavior: UI-only filtering must work identically for every driver and without a live connection.

Good first issue scope: Local component state plus a small pure entry filter; no persistence, SQL parsing or execution changes.

Contributor notes
  • Follow AGENTS.md and the repository rules. Run upstream GitNexus impact analysis before editing existing symbols and report the blast radius; run change detection before committing.
  • Add new UI strings to every locale under packages/web-ui/src/i18n/locales/. Use design tokens, keyboard access, accessible labels and visible focus.
  • Keep pure frontend helpers under packages/web-ui/src/utils/ and tests under matching packages/web-ui/tests/ paths. Run focused tests, pnpm typecheck, pnpm lint and pnpm build; extend existing notebook tests for the behaviors above.
  • Preserve desktop and web behavior. Any necessary shared backend logic belongs in src-tauri/src/application/ or plain modules, with transport-specific code in the corresponding transport module. For backend changes, run relevant Rust tests and cargo check --no-default-features from src-tauri/.
  • Questions? Ask here or on Discord.
Dominant language
TypeScript
Stars
5.1k
Forks
335
Avg merge
1d 19h
Merged PRs (30d)
240

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TabularisDB/tabularis

All issues in TabularisDB/tabularis

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.