Added a shortcut + toggle button hidden when less circuits #450
Conversation
WalkthroughThe changes update the TabsBar component. A new DOM reference ( Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant T as TabsBar Component
participant C as Circuit Scope Manager
U->>T: Press Alt+N
T->>T: Handle event (userClickArrowUp)
T->>C: Request new circuit scope
C-->>T: Circuit created (promise resolved)
T->>T: Call updateTabsBarHeight
T-->>U: UI updated with new height
sequenceDiagram
participant U as User
participant T as TabsBar Component
participant C as Circuit Scope Manager
U->>T: Click "New Circuit" button
T->>C: Initiate new circuit creation (promise chain)
C-->>T: Circuit created
T->>T: Call updateTabsBarHeight
T-->>U: UI updated with adjusted layout
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for circuitverse ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
v0/src/components/TabsBar/TabsBar.vue (3)
50-52: Consider using a more flexible threshold for toggle button visibility.The hardcoded 31px threshold might not be ideal across different screen sizes and DPI settings. Consider using a relative measure or making this configurable.
- <button v-if="tabsBarHeight>=31" class="tabsbar-toggle" @click="toggleHeight"> + <button v-if="tabsBarHeight >= getMinToggleHeight()" class="tabsbar-toggle" @click="toggleHeight">Add this helper function:
function getMinToggleHeight(): number { // Can be made configurable or calculated based on viewport return 31; }
102-106: Consider improving keyboard shortcut handling.The current implementation could be enhanced in several ways:
- Add a check for macOS Command key support
- Consider preventing the default browser behavior
- Add proper TypeScript types for the event parameter
-const userClickArrowUp = ({ code,altKey }) => { +const userClickArrowUp = (event: KeyboardEvent) => { + const { code, altKey, metaKey } = event; + // Support both Alt and Command (macOS) keys + if ((altKey || metaKey) && code === 'KeyN') { + event.preventDefault(); createNewCircuitScope().then(updateTabsBarHeight) } };
362-363: Consider documenting the height values.The height values are hardcoded. Consider adding a comment explaining why 32px was chosen or use CSS variables for better maintainability.
.maxHeightStyle { - height: 32px !important; - max-height: 32px !important; + /* Height increased to 32px to accommodate the circuit tabs and padding */ + --tabs-max-height: 32px; + height: var(--tabs-max-height) !important; + max-height: var(--tabs-max-height) !important; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
v0/src/components/TabsBar/TabsBar.vue(5 hunks)
🔇 Additional comments (5)
v0/src/components/TabsBar/TabsBar.vue (5)
4-4: LGTM!The addition of
tabsBarRefand class binding looks good.Also applies to: 6-6
47-49: LGTM!Good practice to update the height after creating a new circuit.
88-90: LGTM!Good initialization of state variables with proper TypeScript types.
96-100: LGTM!The height update function is simple and focused.
108-115: LGTM!Good practice to:
- Initialize height on mount
- Clean up event listeners on unmount
Fixes #
-Added a shortcut (Alt+n) to make a new circuit
-Hide the toggle button in the tabs-bar when circuits are less
Screenshots of the changes (If any) -
Closes #301
Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.
Summary by CodeRabbit
New Features
Style