refactor(ui/tree-view): rename and create new items using context menu#276
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughFour components receive updates: three landing page files consolidate Tailwind spacing and typography utilities; tree-view refactors item creation to accept explicit target IDs, moves create actions from toolbar to context menu, adds a custom render path for renaming, and updates cache invalidation to refresh the full workspace tree. ChangesLanding Page Styling Updates
Tree View Item Creation Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR refactors the tree view in the UI package so that creating new items (notes/folders) is initiated from the per-item context menu rather than from dedicated buttons in the toolbar, and adjusts the rename UX. It also adds a small render branch to show a different layout while an item is being renamed, ensures the parent folder is auto-expanded when creating a child item, and invalidates the workspace tree cache after rename mutations so the tree reflects the new name. Some unrelated Tailwind class adjustments are also bundled in landing-page components.
Changes:
- Replace toolbar "New Note"/"New Folder" buttons with
ContextMenuItementries (plus a separator before "Move to Trash");handleCreateItemnow takes an explicittargetId,getTargetParentIdis rewritten to derive the parent from a target id, and the parent is auto-expanded on creation. - Add an
isRenamingbranch inrenderItemand invalidate the workspace tree query after a successful rename so the UI updates; also calltree.current?.focusTree()on focus. - Unrelated stylistic refactors of Tailwind utility classes in
landing-hero.tsx,landing-footer.tsx, andlanding-navigation-bar.tsx(e.g.,h-x w-x→size-x,bg-gradient-to-br→bg-linear-to-br,leading-relaxed→text-*/relaxed), with some stray double/trailing spaces introduced in className strings.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/ui/src/components/tree-view.tsx | Move create-item actions into the context menu, refactor getTargetParentId/handleCreateItem to take a target id, auto-expand parent on create, invalidate tree on rename, render renaming state, and focus tree on focus events. |
| packages/ui/src/components/landing-hero.tsx | Tailwind class refactors (size utilities, leading shorthands, bg-linear-to-br); introduces some extra whitespace in class strings. |
| packages/ui/src/components/landing-footer.tsx | Replace px-6 py-6 with p-6 (with a stray double space). |
| packages/ui/src/components/landing-navigation-bar.tsx | Replace h-4 w-4 with size-4 (with a trailing space). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="flex flex-1 flex-col justify-center gap-6"> | ||
| <div className="flex flex-col gap-3"> | ||
| <h1 className="text-foreground text-4xl leading-tight font-semibold tracking-tight sm:text-5xl lg:text-[52px]"> | ||
| <h1 className="text-foreground text-4xl/tight font-semibold tracking-tight sm:text-5xl lg:text-[52px]"> |
| <div className="flex shrink-0 items-center gap-2"> | ||
| <Button variant="outline" size="icon" className="rounded-lg" aria-label="GitHub"> | ||
| <Icons.Github className="h-4 w-4" /> | ||
| <Icons.Github className="size-4 " /> |
Comment on lines
23
to
+54
| @@ -48,10 +48,10 @@ export default function LandingHero() { | |||
| </div> | |||
| </div> | |||
|
|
|||
| <div className="from-muted to-muted/40 flex flex-1 flex-col items-center justify-center gap-6 rounded-2xl bg-gradient-to-br p-10"> | |||
| <div className="from-muted to-muted/40 flex flex-1 flex-col items-center justify-center gap-6 rounded-2xl bg-linear-to-br p-10"> | |||
| <div className="flex flex-col gap-3 text-center"> | |||
| <h2 className="text-foreground text-2xl font-semibold">Visualize Your Knowledge</h2> | |||
| <p className="text-muted-foreground text-sm leading-relaxed"> | |||
| <p className="text-muted-foreground text-sm/relaxed "> | |||
| return ( | ||
| <footer className="border-t"> | ||
| <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 py-6 md:flex-row"> | ||
| <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 p-6 md:flex-row"> |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/components/tree-view.tsx (1)
240-268:⚠️ Potential issue | 🟠 Major | ⚡ Quick winRefresh the controlled tree after folder renames as well.
Line 245 fixes note renames, but folder renames still never update
items, so the folder title can stay stale until some unrelated refetch happens. This component renders labels from the controlleditemsmap, souseRenameFolderMutationneeds the same success-path refresh or a localsetItemsupdate.Proposed fix
const { mutate: renameFolder } = useRenameFolderMutation({ + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: getWorkspaceTreeOptions({ + path: { workspaceId: currentWorkspaceId }, + }).queryKey, + }); + }, onError: (error) => { showAlert({ type: 'error', title: 'Rename Folder Failed', message: `${error instanceof Error ? error.message : 'Unknown error'}`,🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/components/tree-view.tsx` around lines 240 - 268, The folder rename path doesn't refresh the controlled tree items so folder labels stay stale; update the useRenameFolderMutation success path (renameFolder) to mirror renameNote by invalidating the workspace-tree query (getWorkspaceTreeOptions with path: { workspaceId: currentWorkspaceId }) or alternatively call the component's setItems to update the single renamed entry; modify the mutate options for renameFolder to add an onSuccess handler that invalidates the same queryKey used for the tree refresh (getWorkspaceTreeOptions) so the controlled items map is updated after a folder rename.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/ui/src/components/tree-view.tsx`:
- Around line 240-268: The folder rename path doesn't refresh the controlled
tree items so folder labels stay stale; update the useRenameFolderMutation
success path (renameFolder) to mirror renameNote by invalidating the
workspace-tree query (getWorkspaceTreeOptions with path: { workspaceId:
currentWorkspaceId }) or alternatively call the component's setItems to update
the single renamed entry; modify the mutate options for renameFolder to add an
onSuccess handler that invalidates the same queryKey used for the tree refresh
(getWorkspaceTreeOptions) so the controlled items map is updated after a folder
rename.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: f3ba660f-8464-4747-8e56-e299b0fcbebd
📒 Files selected for processing (4)
packages/ui/src/components/landing-footer.tsxpackages/ui/src/components/landing-hero.tsxpackages/ui/src/components/landing-navigation-bar.tsxpackages/ui/src/components/tree-view.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
Release Notes
Style
Refactor