feat(sidepanel): add fullscreen toggle functionality and improve layout responsiveness

[zhangmo8]

Summary by CodeRabbit

• New Features

  • Added fullscreen toggle button for the workspace panel with smooth animations.
  • Fullscreen state automatically clears when switching tabs or panels.

• UI Improvements

  • Enhanced text wrapping in diff display for better readability.

• Tests

  • Added test coverage for fullscreen toggle functionality.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2cd4f887-08b1-4d0d-b05e-3253fc0e4d9e

📥 Commits

Reviewing files that changed from the base of the PR and between 349a4e7 and d07d4e0.

📒 Files selected for processing (6)

• src/renderer/src/components/sidepanel/ChatSidePanel.vue
• src/renderer/src/components/sidepanel/WorkspacePanel.vue
• src/renderer/src/components/sidepanel/WorkspaceViewer.vue
• src/renderer/src/views/ChatTabView.vue
• test/renderer/components/ChatSidePanel.test.ts
• test/renderer/components/WorkspaceViewer.test.ts

---

📝 Walkthrough

Walkthrough

This PR adds a fullscreen toggle feature for the workspace panel in the sidepanel. ChatSidePanel manages fullscreen state with motion-driven animations, WorkspaceViewer displays a toggle button with maximize/minimize icons, and WorkspacePanel forwards state and events between them. Layout styling is refined for positioning and text wrapping.

Changes

Workspace Fullscreen Feature

Layer / File(s)	Summary
ChatSidePanel fullscreen state machine and lifecycle src/renderer/src/components/sidepanel/ChatSidePanel.vue	Introduces fullscreen state refs, motion timers, and computed values. toggleWorkspaceFullscreen() and resetWorkspaceFullscreen() manage state transitions with 180ms motion delays. Watchers reset fullscreen when the active tab leaves workspace, sessionId changes, or the panel closes. Unmount cleanup cancels pending timers.
ChatSidePanel template rendering and animations src/renderer/src/components/sidepanel/ChatSidePanel.vue	Template adds dynamic fullscreen positioning classes and test ID to the shell. Resize handle conditionally hides when fullscreen is active. WorkspacePanel receives :is-fullscreen prop and forwards @toggle-fullscreen event. Tab buttons use fixed Tailwind transition timing. CSS defines shell width and surface transform/opacity transitions with 180ms fullscreen enter/exit keyframe animations and reduced-motion support.
WorkspaceViewer fullscreen toggle button src/renderer/src/components/sidepanel/WorkspaceViewer.vue	Adds Icon import from @iconify/vue and fullscreen toggle button in header toolbar. Button icon switches between maximize and minimize based on isFullscreen prop, with computed fullscreenToggleLabel for accessibility. Click emits toggle-fullscreen event. Props and emits updated to declare fullscreen interface.
WorkspacePanel fullscreen prop and event forwarding src/renderer/src/components/sidepanel/WorkspacePanel.vue	Forwards optional isFullscreen prop to WorkspaceViewer and re-emits toggle-fullscreen event back to ChatSidePanel. Public API updated to declare fullscreen types.
Layout and text wrapping refinements src/renderer/src/views/ChatTabView.vue, src/renderer/src/components/sidepanel/WorkspaceViewer.vue	ChatTabView root container adds relative class for positioning. WorkspaceViewer git diff <pre> elements use whitespace-pre-wrap wrap-break-word for improved text wrapping.
Test coverage for fullscreen feature test/renderer/components/ChatSidePanel.test.ts, test/renderer/components/WorkspaceViewer.test.ts	ChatSidePanel tests refactored with centralized setup helper and new test verifying fullscreen toggle sets data-workspace-fullscreen and hides resize handle, with cleanup on tab switch. WorkspaceViewer tests add Icon and WorkspaceClient mocks with explicit default props, plus new tests verifying fullscreen button emits event and label switches between maximize/restore.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ThinkInAIXYZ/deepchat#1442: Modifies the same sidepanel components (ChatSidePanel.vue, WorkspacePanel.vue, WorkspaceViewer.vue) with layout sizing class adjustments, which complements the fullscreen feature's layout changes.
• ThinkInAIXYZ/deepchat#1542: Also modifies ChatSidePanel.vue, WorkspacePanel.vue, and related sidepanel components for layout and resize behavior updates.

Poem

🐰 A workspace now stretches full and wide,
With buttons that toggle fullscreen pride,
Icons that dance between states with ease,
Animations smooth at a hundred-eighty degrees—
The sidepanel blooms! What a sight to see! 🌟

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main changes: adding fullscreen toggle functionality to the sidepanel and improving layout responsiveness, which are demonstrated across all modified components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch workspace-panel

---

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