Staging

[galshubeli]

Summary by CodeRabbit

• New Features

  • Added draggable resize handles for the menu and schema side panels (mouse and touch).
  • Panels support dynamic widths with auto-collapse below a minimum size.
  • Default opening width adjusted for better desktop layout; graph resizes when schema panel changes.

• Style

  • Updated container sizing and added a left margin for improved layout.
  • Sidebar width behavior refined; handle visibility/hover states added and animations disabled during drag.
  • Repositioned schema controls to the bottom (0px).

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Adds draggable resize handles and supporting logic to adjust left and schema side panels. Updates CSS for container sizing and sidebar behavior, inserts handle elements into the chat template, initializes resize handling in app startup, and implements resize logic (with clamping, collapse, and graph resize triggers) in the UI module.

Changes

Cohort / File(s)	Summary of Changes
Container layout sizing app/public/css/layout.css	Switched #container dimensions to calc(100% - 40px) for width/height; added 40px left margin.
Sidebar/menu resizing styles app/public/css/menu.css	Added resizable sidebar styles: max-width, open width to 50%, resizing state (no transition), new .resize-handle with visibility/hover rules; adjusted #schema-controls bottom to 0px.
Template resize handles app/templates/chat.j2	Inserted two div.resize-handle elements targeting menu-container and schema-container.
UI initialization hook app/ts/app.ts	Imported and invoked setupResizeHandles() within setupUIComponents() after textarea auto-resize.
Resize logic and toggling behavior app/ts/modules/ui.ts	Added exported setupResizeHandles() to implement drag-to-resize for panels (mouse/touch), clamped 25–60%, collapse below 25%, clears inline widths on close, defaults to 50% on open (desktop), padding adjustments, and triggers resizeGraph for schema-container.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant H as ResizeHandle (.resize-handle)
  participant UI as UI Module (setupResizeHandles)
  participant P as Target Panel (menu/schema)
  participant G as Graph (schema)

  U->>H: mousedown/touchstart
  H->>UI: startResize(target=data-target)
  UI->>P: addClass(resizing), set cursor

  loop Drag
    U->>H: mousemove/touchmove
    H->>UI: onDrag(position)
    UI->>UI: compute width % (parent-based), clamp 25–60
    alt width < 25%
      UI->>P: removeClass(open), clear style.width
      UI->>UI: reset chat padding (desktop)
    else width ≥ 25%
      UI->>P: addClass(open), set style.width=%
      opt target is schema-container and open
        UI-->>G: debounce resizeGraph()
      end
    end
  end

  U->>H: mouseup/touchend
  H->>UI: endResize()
  UI->>P: removeClass(resizing), clear cursors

Loading

sequenceDiagram
  autonumber
  participant App as app.ts
  participant UI as modules/ui.ts
  participant DOM as Document

  App->>App: setupUIComponents()
  App->>UI: setupResizeHandles()
  UI->>DOM: bind events to .resize-handle (mouse & touch)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Move to Typescript #82 — Also modifies app/ts/modules/ui.ts, introducing the UI module and related exports; closely connected to the new resize initialization and toggle enhancements here.

Poem

A rabbit taps the sidebar’s edge—
slide, glide, a silky wedge.
Panels bloom from 25 to 60, neat,
handles shimmer where menus meet.
With gentle paws I nudge the graph,
resize, realign—then hop and laugh. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7e67cd5 and 2b42c0c.

📒 Files selected for processing (5)

• app/public/css/layout.css (1 hunks)
• app/public/css/menu.css (3 hunks)
• app/templates/chat.j2 (1 hunks)
• app/ts/app.ts (2 hunks)
• app/ts/modules/ui.ts (3 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch staging

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None