fix(verilog-terminal): add a hide button in the verilog terminal.

[Radhikaa-chauhan]

Fixes #835

Describe the changes you have made in this PR -

Added a Hide button to the Verilog Output compiler, allowing users to easily toggle its visibility. This improves UI clarity by giving users explicit control over when the compiler is shown or hidden, resulting in a cleaner and less cluttered interface.

Screenshots of the UI changes (If any) -

Before

After

CircuitVerse.and.8.more.pages.-.Personal.-.Microsoft_.Edge.2026-01-21.17-10-19.mp4

---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

Explain your implementation approach:

• Added a hide button to the Verilog Output compiler to allow users to control its visibility.
• Improved UI clarity by removing the compiler from the layout when it is hidden.
• Managed compiler visibility using shared state for consistent behavior.
• This results in a cleaner interface and better user experience.

---

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

---

Note: Please check Allow edits from maintainers if you would like us to assist in the PR.

Summary by CodeRabbit

• New Features
  • Added a toggle button to the Verilog terminal header, allowing users to hide the terminal panel for a cleaner workspace.

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

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	51ddabf
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/6970c5b3aa8e2400080d624d
😎 Deploy Preview	https://deploy-preview-837--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 44 (🟢 up 2 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This PR modifies the VerilogTerminal.vue component to add a terminal visibility toggle feature. A new button is added to the terminal header that calls verilogStore.hideTerminal() to hide the terminal. The watcher monitoring verilogStore.isTerminalVisible is updated to use an async callback that invokes await nextTick() before calling adjustCodeWindowHeight(). Styling is added for the toggle button and its hover state. No changes are made to exported or public API signatures.

Possibly related PRs

• PR #640: Continues work on the Verilog terminal component by adding header toggle button and watcher refinements that directly modify VerilogTerminal visibility behavior.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR implements a hide button for the Verilog terminal and updates the visibility watcher with async handling, partially addressing the layout reflow issue described in #835, but the implementation may not fully resolve layout problems when terminal visibility changes.	Verify that the async watcher update with nextTick() properly triggers layout recalculation and confirm the terminal is fully removed from DOM (not just visually hidden) when toggled.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a hide button to the Verilog terminal, which directly addresses the core functionality added in this PR.
Out of Scope Changes check	✅ Passed	All changes are scoped to the VerilogTerminal component and directly related to adding hide button functionality and improving visibility state handling as specified in issue #835.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[Radhikaa-chauhan]

@ThatDeparted2061 @tachyons Please have a look on this PR.

[Radhikaa-chauhan]

@ThatDeparted2061 @tachyons Please review this!!

[tachyons]

@coderabbitai ensure that bug fixes and small features should be applied to both src and v1 folder in the same PR

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check if v1 folder exists and find VerilogTerminal component in both src and v1
fd -t f "VerilogTerminal" --full-path

# Also check the overall structure of v1 folder if it exists
if [ -d "v1" ]; then
  echo "=== v1 folder exists ==="
  tree v1 -L 3 -d
fi

# Check for Verilog-related files in v1
fd -t f "verilog" v1 --ignore-case

Length of output: 1291

---

🏁 Script executed:

#!/bin/bash
# Read the VerilogEditorPanel in v1 to see if terminal is embedded there
cat v1/src/components/Panels/VerilogEditorPanel/VerilogEditorPanel.vue

# Also check if there are any terminal-related elements or hide/show functionality
rg -n "terminal|Terminal" v1/src/components/Panels/VerilogEditorPanel/ -A 2 -B 2

Length of output: 3256

---

🏁 Script executed:

#!/bin/bash
# Check if v1 has any store or state management for verilog terminal visibility
rg -n "verilogOutput|verilog.*visible|terminal.*visible" v1/src --type vue -A 2 -B 2

# Check v1's store for verilog-related state
fd -t f "store" v1/src/store --exec cat {}

# Look for any verilog state management in v1
rg -n "verilog" v1/src/store -i

Length of output: 16199

---

🏁 Script executed:

#!/bin/bash
# Check if v1 has a verilog store similar to src
fd -t f "verilog" v1/src/store --ignore-case

# Check what stores exist in src for comparison
fd -t f "verilog" src/stores --ignore-case

# Read the src verilog store to understand what needs to be replicated
cat src/stores/verilogStore.ts 2>/dev/null || cat src/stores/verilog.ts 2>/dev/null || echo "Verilog store not found in expected location"

# Search for verilog store in src
fd -t f "Store" src/stores | xargs grep -l "verilog" -i

Length of output: 240

---

🏁 Script executed:

#!/bin/bash
# Find the correct store location in src
fd -t d "store" src

# List all files in src/store
ls -la src/store/ 2>/dev/null || echo "No src/store directory"

# Find verilog-related store files
fd -t f "verilog" src --ignore-case | grep -i store

# Read the verilog store from src
find src -name "*verilog*" -path "*/store/*" -o -name "*verilog*Store*" | head -5 | xargs cat

Length of output: 1675

---

🏁 Script executed:

#!/bin/bash
# Check how verilogOutput is used in v1 - see if there's any show/hide logic
rg -n "verilogOutput" v1/src -A 3 -B 3

# Check the Verilog2CV.js to see how terminal output works in v1
rg -n "verilogOutput|terminal" v1/src/simulator/src/Verilog2CV.js -A 2 -B 2 | head -50

# Check if there's any terminal visibility logic in v1
rg -n "terminal.*show|terminal.*hide|terminal.*visible" v1/src -i

Length of output: 4727

---

@tachyons I've analyzed the codebase and found an architectural difference between src and v1:

Current Implementation:

src folder (new architecture):

• Has a separate VerilogTerminal.vue component with its own visibility controls
• Uses verilogStore.ts to manage terminal visibility state (isTerminalVisible)
• This PR adds a Hide button to toggle the terminal on/off

v1 folder (old architecture):

• Does NOT have a separate VerilogTerminal component
• The Verilog output is embedded as a simple <div id="verilogOutput"> inside VerilogEditorPanel.vue and VerilogEditorPanelMobile.vue
• The v1 output div just displays compiler messages without any hide/show functionality

To apply this fix to v1, I see two options:

1. Create a new VerilogTerminal.vue component in v1 (matching the src architecture) with hide/show controls
2. Add hide/show functionality directly to the verilogOutput div in v1's existing panels

Could you please clarify:

• Which approach would you prefer for v1?
• Should I help plan these changes to apply the fix to both folders?

---

✏️ Learnings added

Learnt from: tachyons
URL: https://github.com/CircuitVerse/cv-frontend-vue/pull/837

Timestamp: 2026-02-07T16:15:52.763Z
Learning: Bug fixes and small features should be applied to both src and v1 folders in the same PR in the CircuitVerse/cv-frontend-vue repository.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

---

🧠 Learnings used

Learnt from: 092vk
Repo: CircuitVerse/cv-frontend-vue PR: 640
File: src/components/Panels/VerilogEditorPanel/VerilogTerminal.vue:96-108
Timestamp: 2025-08-24T05:05:33.173Z
Learning: In the VerilogTerminal component (src/components/Panels/VerilogEditorPanel/VerilogTerminal.vue), the maintainer 092vk has decided not to implement message count limiting for the messages array at this time, preferring to keep the current implementation without the MAX_MESSAGES optimization.

[naman79820]

@Radhikaa-chauhan Can you also update v1 as well. Thankss

[Radhikaa-chauhan]

Sure @naman79820 , i will do that and i have also discussed about this in community meet as well.