refactor: bottom toolbar

[Kitenite]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Refactor bottom toolbar by extracting terminal logic to a new TerminalArea component, simplifying BottomBar.

• Refactor:
  • Extract terminal-related logic from BottomBar in index.tsx to new TerminalArea component in terminal-area.tsx.
  • Simplifies BottomBar by removing terminal toggle logic and state management.
• Code Organization:
  • Adds 'use client'; directive to index.tsx and editor/index.ts for client-side rendering.
  • Removes unused imports and commented-out code in index.tsx.

^{This description was created by for 124c107. You can customize this summary. It will automatically update as commits are pushed.}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2025 6:07pm
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 22, 2025 6:07pm

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 124c107 in 50 seconds. Click for details.

• Reviewed 22 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx:1

• Draft comment:
  PR description mentions onboarding docs/framework updates, but this diff only refactors the bottom toolbar. Ensure the PR description and changes align.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is asking the PR author to update the PR description to align with the changes, which violates the rule against asking for PR description updates. It does not provide a specific code suggestion or ask for a test to be written.

2. apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx:56

• Draft comment:
  Remove the commented out Terminal component to keep the code clean.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

3. apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx:18

• Draft comment:
  Button styling is inconsistent: 'rounded-md' in collapsed state vs 'rounded-lg' in expanded state. Confirm if this is intentional.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

4. apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx:16

• Draft comment:
  Consider adding an 'aria-label' to the toggle button for improved accessibility.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_xpuHgKPxUuT8gwGO

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to 8827766 in 1 minute and 48 seconds. Click for details.

• Reviewed 259 lines of code in 3 files
• Skipped 0 files when reviewing.
• Skipped posting 2 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/web/client/src/app/project/[id]/_components/bottom-bar/index.tsx:53

• Draft comment:
  The drag preview and terminal toggle logic (including unused local state and drag handlers) have been removed in favor of using editorEngine.state.editorMode directly. Ensure that any required drag-and-drop functionality or terminal integration is now handled (e.g., via the new TerminalArea component) as intended.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50% None

2. apps/web/client/src/app/project/[id]/_components/bottom-bar/index.tsx:1

• Draft comment:
  The PR description mentions improvements to onboarding documentation, but the diff only refactors the bottom toolbar. Ensure that the intended documentation updates are provided if required.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is asking the PR author to ensure that the intended documentation updates are provided, which violates the rule against asking the author to ensure behavior is intended or to update the PR description. It does not provide a specific code suggestion or ask for a specific test to be written.

Workflow ID: wflow_hHxobhwUhyN02BDU

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

The mode state initialized from editorEngine.state.editorMode is never used in TerminalArea. Consider removing it to keep the component lean.

Suggested change

const [mode, setMode] = useState<EditorMode>(editorEngine.state.editorMode);