Skip to content

ENG-949: Add query sections to the left sidebar#996

Open
sid597 wants to merge 3 commits intomainfrom
eng-949-add-query-and-query-results-in-the-left-sidebar
Open

ENG-949: Add query sections to the left sidebar#996
sid597 wants to merge 3 commits intomainfrom
eng-949-add-query-and-query-results-in-the-left-sidebar

Conversation

@sid597
Copy link
Copy Markdown
Collaborator

@sid597 sid597 commented May 3, 2026

https://www.loom.com/share/4981b1b58cfc4db1b70b766029858903

Summary by CodeRabbit

  • New Features
    • Query sections can now be added to the personal sidebar for executing saved queries on-demand.
    • Query results display as clickable items in the sidebar with customizable result limits.
    • Added refresh option and dedicated menu for managing query sections in the sidebar.
    • Query sections support alias names and configurable result limits via settings.

Users can paste a ((block-uid)) in the personal settings "Add section"
field to create a query section. Query sections auto-create settings
(Alias, Folded, Truncate-result, Result-limit) and render query results
as clickable children in the sidebar view.

Settings panel: inline alias input, block ref display, settings/trash
buttons. Settings dialog: Result-limit panel for all sections.

Sidebar view: QuerySectionItem with lazy query execution on first
expand, refresh via inline menu, go-to-query-block navigation, and
proper loading/error/empty states.
@linear-code
Copy link
Copy Markdown

linear-code Bot commented May 3, 2026

@supabase
Copy link
Copy Markdown

supabase Bot commented May 3, 2026

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@sid597
Copy link
Copy Markdown
Collaborator Author

sid597 commented May 3, 2026

@coderabbitai full review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 2026

✅ Actions performed

Full review triggered.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 3, 2026

📝 Walkthrough

Walkthrough

This PR extends the left sidebar to support query sections—personal sections containing Roam query syntax in double parentheses. Users can execute queries on-demand, set result limits, and alias sections; query results are rendered as clickable child items with optional truncation.

Changes

Query Sections: Type Definitions, Settings Persistence, and Rendering

Layer / File(s) Summary
Type Definitions & Helpers
apps/roam/src/utils/getLeftSidebarSettings.ts
Added isQuerySection(text: string) to detect ((...)) syntax. Extended LeftSidebarPersonalSectionSettings with optional alias: AliasSetting and resultLimit: IntSetting fields.
Settings Parsing
apps/roam/src/utils/getLeftSidebarSettings.ts
Updated getPersonalSectionSettings to parse "Alias" and "Result-limit" block nodes into settings shape, returning uid/value/valueUid structures.
Settings UI & Block Syncing
apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
Added inline InputGroup alias editor with debounced persistence via updateBlock/createBlock. Introduced PersonalNumberPanel for Result-limit with sync to block props. New section creation now generates Alias, Folded, Truncate-result?, and Result-limit backing blocks for query sections. Updated sectionsToBlockProps to write Alias and Result-limit props.
Query Execution & View Rendering
apps/roam/src/components/LeftSidebarView.tsx
Added QuerySectionItem component that executes queries via fireQuery(parseQuery(queryUid)), manages loading/error/result states, applies resultLimit truncation, renders results as clickable child items, and provides popover menu for refresh and navigation. Integrated QuerySectionItem into PersonalSections rendering via isQuerySection detection.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically describes the main change: adding query sections to the left sidebar, which matches the primary objective and core changes across all three modified files.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 60 minutes.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/roam/src/components/LeftSidebarView.tsx`:
- Around line 320-342: The runQuery function calls parseQuery(queryUid)
synchronously so any thrown parse errors bypass the promise .catch; update
runQuery to handle sync failures by either wrapping parseQuery in a try/catch
that sets setError("Query failed to run"), setIsLoading(false) and
setHasLoaded(true) on error, or convert to a promise chain (e.g.,
Promise.resolve().then(() => parseQuery(queryUid)).then(args =>
fireQuery(args)...)) so parse errors flow into the existing .catch; ensure you
reference runQuery, parseQuery, fireQuery, setError, setIsLoading and
setHasLoaded when applying the fix.

In `@apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx`:
- Line 944: Rename the setter callback parameter named `_keys` to a camelCase
identifier (e.g., `keys` or `selectedKeys`) in the setter prop passed in
LeftSidebarPersonalSettings (the arrow function `setter={(_keys, value) => { ...
}}`) to satisfy ESLint camelCase rules; update all references inside that
function body to the new name and ensure the function signature remains `(keys,
value) => { ... }` (or `(selectedKeys, value) => { ... }`) so no other behavior
changes.
- Around line 339-380: handleAliasChange is calling
syncAllSectionsToBlockProps(sectionsRef.current) while sections are not updated,
causing stale alias writes; fix by computing an updatedSections array (map over
previous sections and set the new alias.value and valueUid as appropriate) for
both the updateBlock and createBlock branches, immediately assign it to
sectionsRef.current and call setSections(updatedSections), then call
syncAllSectionsToBlockProps(updatedSections) (instead of sectionsRef.current)
before refreshAndNotify so the serialized settings reflect the new alias state;
reference handleAliasChange, alias.valueUid, updateBlock, createBlock,
setSections, sectionsRef, and syncAllSectionsToBlockProps.

In `@apps/roam/src/utils/getLeftSidebarSettings.ts`:
- Around line 22-23: isQuerySection currently treats any string wrapped in
((...)) as a query ref, allowing malformed refs like (()) or ((not-a-uid)) to
reach QuerySectionItem and parseQuery; update isQuerySection to extract the
inner text (e.g., const inner = text.slice(2, -2).trim()) and return true only
if inner is non-empty and passes a UID validation (prefer reusing an existing
isValidUid/isUid utility if available, otherwise validate against the Roam UID
pattern such as /^[A-Za-z0-9]{9}$/); this prevents invalid refs from being
classified as query sections and stops bad input from reaching
QuerySectionItem/parseQuery.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 9e3dab95-2fb3-4fea-9821-e85e93b2b71d

📥 Commits

Reviewing files that changed from the base of the PR and between fff0556 and 1de8531.

📒 Files selected for processing (3)
  • apps/roam/src/components/LeftSidebarView.tsx
  • apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
  • apps/roam/src/utils/getLeftSidebarSettings.ts

Comment thread apps/roam/src/components/LeftSidebarView.tsx Outdated
Comment thread apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
Comment thread apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
Comment thread apps/roam/src/utils/getLeftSidebarSettings.ts Outdated
sid597 added 2 commits May 3, 2026 21:59
- Reuse existing runQuery utility instead of inline parseQuery + fireQuery
- Apply resultLimit at render so limit changes take effect without refetch
- Validate block ref format in isQuerySection to reject malformed refs
- Wrap query call in try/catch so sync parseQuery throws don't bypass error state
- Persist alias edits to section state before syncing block props
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant