Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

feat: add Focus Mode for compact UI display#328

Merged
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
feat/zen-modebreaking-brake/cc-wf-studio:feat/zen-modeCopy head branch name to clipboard
Dec 29, 2025
Merged

feat: add Focus Mode for compact UI display#328
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
feat/zen-modebreaking-brake/cc-wf-studio:feat/zen-modeCopy head branch name to clipboard

Conversation

@breaking-brake
Copy link
Copy Markdown
Owner

@breaking-brake breaking-brake commented Dec 29, 2025

Summary

Add Focus Mode feature that forces compact UI display regardless of window width.

  • When Focus Mode is ON:
    • Toolbar shows icons only (no text labels)
    • Node Palette displays in compact width (100px)
    • AI Edit Panel displays in compact width (280px)
  • Toggle via More Actions dropdown menu with checkbox indicator
  • Setting persists in localStorage

Changes

State Management

  • workflow-store.ts: Added isFocusMode state and toggleFocusMode action with localStorage persistence

Responsive Hook

  • useWindowWidth.ts: Extended useIsCompactMode() to return true when Focus Mode is enabled

UI Components

  • MoreActionsDropdown.tsx: Added Focus Mode toggle menu item with Focus icon and checkmark
  • Toolbar.tsx: Connected Focus Mode state to dropdown props

Internationalization

  • Added toolbar.focusMode translation key for 5 languages (en, ja, ko, zh-CN, zh-TW)

Testing

  • Manual E2E testing completed
  • Focus Mode toggle switches UI to compact display
  • Setting persists after page reload
  • All 5 language translations display correctly

🤖 Generated with Claude Code

- Add isFocusMode state and toggleFocusMode action to workflow-store
- Extend useIsCompactMode() hook to support Focus Mode
- Add Focus Mode toggle to More Actions dropdown menu
- Persist Focus Mode setting in localStorage
- Add i18n translations for 5 languages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@breaking-brake breaking-brake changed the title feat: add Zen Mode for compact UI display feat: add Focus Mode for compact UI display Dec 29, 2025
@breaking-brake breaking-brake merged commit 16d03ca into main Dec 29, 2025
3 checks passed
@breaking-brake breaking-brake deleted the feat/zen-mode branch December 29, 2025 14:33
@breaking-brake breaking-brake mentioned this pull request Dec 29, 2025
braking-brake-semantic-release Bot pushed a commit that referenced this pull request Dec 29, 2025
## [3.10.0](v3.9.1...v3.10.0) (2025-12-29)

### Features

* add Focus Mode for compact UI display ([#328](#328)) ([16d03ca](16d03ca))

### Documentation

* add Star History chart and badges to README ([#327](#327)) ([e8c45bb](e8c45bb))
* update hero image with new workflow screenshot ([#325](#325)) ([81255b8](81255b8))
* update README demo GIFs with Edit with AI and Run Workflow demos ([#326](#326)) ([128e0be](128e0be))
@braking-brake-semantic-release
Copy link
Copy Markdown

🎉 This PR is included in version 3.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

braking-brake-semantic-release Bot pushed a commit that referenced this pull request Dec 29, 2025
## [3.10.0](v3.9.1...v3.10.0) (2025-12-29)

### Features

* add Focus Mode for compact UI display ([#328](#328)) ([16d03ca](16d03ca))

### Documentation

* add Star History chart and badges to README ([#327](#327)) ([e8c45bb](e8c45bb))
* update hero image with new workflow screenshot ([#325](#325)) ([81255b8](81255b8))
* update README demo GIFs with Edit with AI and Run Workflow demos ([#326](#326)) ([128e0be](128e0be))
@braking-brake-semantic-release
Copy link
Copy Markdown

🎉 This PR is included in version 3.10.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

tinnt-truman pushed a commit to tinnt-truman/cc-wf-studio that referenced this pull request Jan 15, 2026
## [3.10.0](breaking-brake/cc-wf-studio@v3.9.1...v3.10.0) (2025-12-29)

### Features

* add Focus Mode for compact UI display ([breaking-brake#328](breaking-brake#328)) ([16d03ca](breaking-brake@16d03ca))

### Documentation

* add Star History chart and badges to README ([breaking-brake#327](breaking-brake#327)) ([e8c45bb](breaking-brake@e8c45bb))
* update hero image with new workflow screenshot ([breaking-brake#325](breaking-brake#325)) ([81255b8](breaking-brake@81255b8))
* update README demo GIFs with Edit with AI and Run Workflow demos ([breaking-brake#326](breaking-brake#326)) ([128e0be](breaking-brake@128e0be))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Morty Proxy This is a proxified and sanitized view of the page, visit original site.