ENG-1183: Button to minimise clipboard

[sid597]

https://www.loom.com/share/d6539da17c7d46a893b13ffb3e13d2a5

Summary by CodeRabbit

New Features

• Added collapsible Clipboard panel with a toggle button, allowing users to minimize the panel when not actively working with it.
• The toggle button title dynamically reflects the current state for improved clarity.
• All existing page management functionality remains fully preserved and accessible when the panel is expanded.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-1183 Design ability to minimize clipboard

[supabase]

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]

• ENG-1183: Button to minimise clipboard #626 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Clipboard component was enhanced with a collapsible panel feature. A new isCollapsed state controls visibility of the panel's content. A toggle button allows users to expand or collapse the panel, showing or hiding the clipboard pages list, add page actions, and page sections.

Changes

Cohort / File(s)	Summary
UI Enhancement: Collapsible Clipboard Panel apps/roam/src/components/canvas/Clipboard.tsx	Added collapsed state management with a toggle button. Panel content (pages list, actions, sections) now conditionally renders based on the collapsed state.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the toggle button correctly flips the isCollapsed state
• Confirm conditional rendering logic properly hides/shows content based on state
• Check button title/label updates appropriately with state changes
• Ensure no functionality is broken when toggling collapse state

Pre-merge checks

✅ Passed checks (3 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 a button to minimize the clipboard panel, which matches the primary modification in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

apps/roam/src/components/canvas/Clipboard.tsx (2)

1079-1086: Consider using a dynamic icon that reflects the collapsed state.

The button's tooltip changes based on isCollapsed, but the icon remains static. This is inconsistent with the existing pattern in this file (line 889) where the chevron icon changes based on state. Using a dynamic icon would provide better visual feedback to users.

🔎 Suggested fix: Use conditional icon

 <Button
-  icon={<Icon icon="minus" />}
+  icon={<Icon icon={isCollapsed ? "plus" : "minus"} />}
   onClick={() => setIsCollapsed(!isCollapsed)}
   minimal
   small
   className="h-6 min-h-0 p-1"
   title={isCollapsed ? "Expand clipboard" : "Collapse clipboard"}
 />

Alternative option using chevrons (consistent with line 889):

 <Button
-  icon={<Icon icon="minus" />}
+  icon={<Icon icon={isCollapsed ? "chevron-up" : "chevron-down"} />}
   onClick={() => setIsCollapsed(!isCollapsed)}
   minimal
   small
   className="h-6 min-h-0 p-1"
   title={isCollapsed ? "Expand clipboard" : "Collapse clipboard"}
 />

---

1048-1048: Consider adding an explicit return type.

Per coding guidelines, functions should have explicit return types. While TypeScript correctly infers the return type for this component, adding it explicitly improves code documentation and catches potential type errors earlier.

🔎 Suggested fix

-export const ClipboardPanel = () => {
+export const ClipboardPanel = (): React.ReactElement | null => {

As per coding guidelines for **/*.{ts,tsx}: "Use explicit return types for functions"

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7b4cb58 and 12d70e8.

📒 Files selected for processing (1)

• apps/roam/src/components/canvas/Clipboard.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/roam/src/components/canvas/Clipboard.tsx

apps/roam/**/*.{js,ts,tsx,jsx,json}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Prefer existing dependencies from package.json when working on the Roam Research extension

Files:

• apps/roam/src/components/canvas/Clipboard.tsx

apps/roam/**/*.{ts,tsx,jsx,js,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Files:

• apps/roam/src/components/canvas/Clipboard.tsx

apps/roam/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{ts,tsx,js,jsx}: Use the roamAlphaApi docs from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when implementing Roam functionality
Use Roam Depot/Extension API docs from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when implementing extension functionality

Files:

• apps/roam/src/components/canvas/Clipboard.tsx

apps/roam/**

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Implement the Discourse Graph protocol in the Roam Research extension

Files:

• apps/roam/src/components/canvas/Clipboard.tsx

🧠 Learnings (2)

📚 Learning: 2025-11-25T00:52:41.934Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-11-25T00:52:41.934Z
Learning: Applies to apps/roam/**/*.{ts,tsx,js,jsx} : Use the roamAlphaApi docs from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when implementing Roam functionality

Applied to files:

• apps/roam/src/components/canvas/Clipboard.tsx

📚 Learning: 2025-11-25T00:52:41.934Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-11-25T00:52:41.934Z
Learning: Applies to apps/roam/**/*.{ts,tsx,jsx,js,css,scss} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Applied to files:

• apps/roam/src/components/canvas/Clipboard.tsx

🔇 Additional comments (2)

apps/roam/src/components/canvas/Clipboard.tsx (2)

1051-1051: LGTM! Clean state addition.

The isCollapsed state is properly initialized and the default expanded state provides a good initial user experience.

---

1097-1144: LGTM! Conditional rendering correctly implements the collapse functionality.

The content is properly hidden when collapsed and displayed when expanded. The use of fragments keeps the component structure clean.