Fix : fixed TabsBar dropdown toggle issue #608
Conversation
✅ Deploy Preview for circuitverse ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThe TabsBar component was refactored to improve its structure, remove unused dialog logic, and update its styling and layout using flexbox and horizontal scrolling. The toggle button’s icon logic was corrected, and the tab items were restructured for better interaction and clarity. No changes were made to exported or public entity declarations. Changes
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes were found. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
blazethunderstorm
changed the title
|
@ThatDeparted2061 pls review the pr , thanks |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/components/TabsBar/TabsBar.vue (2)
59-60: Unused importshowMessage
showMessageis imported but never referenced, causing an ESLint/TypeScript error during CI. Remove it to keep the file clean.-import { showMessage, truncateString } from '#/simulator/src/utils' +import { truncateString } from '#/simulator/src/utils'
133-143: Duplicate.tabs-contentrules
.tabs-contentis declared twice with partly overlapping declarations.
Collapsing them into a single rule avoids future divergence and simplifies maintenance.Also applies to: 175-181
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/TabsBar/TabsBar.vue(1 hunks)
🔇 Additional comments (1)
src/components/TabsBar/TabsBar.vue (1)
126-131: Potential height clamp
.tabs-containerhasmax-height: 30px;while#tabsBarexpands tomax-height: 100px;.
When expanded, the inner bar may be clipped by the outer container, depending on content and parent styles.
Confirm in the browser and, if needed, raise the container’smax-heightor remove it.Also applies to: 113-118
| name: !drag ? 'flip-list' : null, | ||
| tag: 'div', | ||
| type: 'transition-group', | ||
| name: !drag ? 'flip-list' : null, | ||
| }" | ||
| v-bind="dragOptions" |
There was a problem hiding this comment.
dragOptions is a function but is bound as an object
v-bind="dragOptions" passes the function itself, not its return value – Vue will treat it as an empty object.
Call the function or expose a computed that returns the options object.
- v-bind="dragOptions"
+ v-bind="dragOptions()"(or)
const dragOptions = computed(() => ({
animation: 200,
group: 'description',
disabled: false,
ghostClass: 'ghost',
}))Without this fix the intended animation, group and ghostClass settings are silently ignored.
Also applies to: 79-86
🤖 Prompt for AI Agents
In src/components/TabsBar/TabsBar.vue at lines 20 and 79-86, dragOptions is
currently a function but is being bound directly with v-bind="dragOptions",
which passes the function itself instead of its return value. To fix this,
either call the dragOptions function in the template like v-bind="dragOptions()"
or convert dragOptions into a computed property that returns the options object,
then bind it as v-bind="dragOptions". This ensures the animation, group, and
ghostClass settings are correctly applied.
| :key="updateCount" | ||
| :item-key="updateCount.toString()" | ||
| v-model="SimulatorState.circuit_list" |
There was a problem hiding this comment.
Incorrect item-key value breaks drag-and-drop tracking
item-key must be the name of the property that uniquely identifies each element (e.g. "id").
Passing updateCount.toString() always yields the literal string "0", so VueDraggable cannot distinguish rows and will malfunction (re-ordering glitches, lost focus state, console warnings).
- :item-key="updateCount.toString()"
+ item-key="id"You can also drop the now-redundant updateCount ref unless it is reused elsewhere.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| :key="updateCount" | |
| :item-key="updateCount.toString()" | |
| v-model="SimulatorState.circuit_list" | |
| :key="updateCount" | |
| item-key="id" | |
| v-model="SimulatorState.circuit_list" |
🤖 Prompt for AI Agents
In src/components/TabsBar/TabsBar.vue around lines 10 to 12, the item-key is
incorrectly set to updateCount.toString(), which is a static string and breaks
VueDraggable's ability to track items uniquely. Change item-key to the name of
the unique property for each element, such as "id", to enable proper
drag-and-drop tracking. Also, remove the updateCount ref if it is no longer used
elsewhere in the component.
|
address the coderabbit suggestions |
|
Fixes #607
Describe the changes you have made in this PR
Fixed the TabsBar dropdown toggle button that wasn't working properly. The button was supposed to show and hide the circuit tabs when clicked, but it got stuck and wouldn't respond. I updated the code to make sure the button works correctly every time you click it, whether you're dragging circuits around or just using the interface normally. Now when you click the little arrow button, it properly collapses and expands the tabs area like it should.
Screenshots of the changes (If any) -
Before ---
Screencast.from.2025-06-16.02-34-59.mp4
After --
Screencast.from.2025-06-16.02-33-46.mp4
Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.
Summary by CodeRabbit
Refactor
Style