Skip to content

feat(ui): improve UX with Pin mode, scrollable alerts, and sparkline enhancements#70

Merged
Sitoi merged 3 commits into
Sitoi:devfrom
TakahashiMinato:fix/uiforclashbar
May 19, 2026
Merged

feat(ui): improve UX with Pin mode, scrollable alerts, and sparkline enhancements#70
Sitoi merged 3 commits into
Sitoi:devfrom
TakahashiMinato:fix/uiforclashbar

Conversation

@TakahashiMinato
Copy link
Copy Markdown

Description

This PR introduces several UI/UX improvements to ClashBar, porting and adapting fixes from the fix/ui branch to the current codebase structure.

1. Pin Mode (Window Stickiness)

Introduces a "Pin" functionality to keep the main application window visible even when clicking outside or switching spaces.

  • Toggle Button: Added a pin icon in the MenuBar header with dynamic states (pin / unpin).
  • Window Behavior: When pinned, the panel adjusts its collectionBehavior to .canJoinAllSpaces and disables hidesOnDeactivate.
  • Event Handling: Prevents the window from closing on external mouse clicks when the pin mode is active.

2. Scrollable NSAlerts

Improves the presentation of long text in system alerts (e.g., configuration validation errors or remote import logs).

  • Custom Extension: Added NSAlert+Scrollable to wrap informative text in a dynamically sized NSScrollView.
  • UX Fix: Prevents alert windows from growing taller than the screen height, ensuring "OK" buttons remain accessible.
  • Applications: Applied to core failure alerts, config validation, and subscription import results.

3. Traffic Sparkline Optimization

Refines the real-time traffic chart for better visual consistency.

  • Fixed Window: Enforces a consistent 60-point sliding window (X-axis).
  • Visual Alignment: Charts now align to the right, naturally filling up as data accumulates.
  • Path Correction: Fixed area filling logic to ensure gradients are correctly bounded regardless of data points count.

4. Localization

  • Added ui.action.pin and ui.action.unpin strings for both English and Simplified Chinese.
image

Changes

  • Core: Added NSAlert+Scrollable.swift extension.
  • ViewModels: Updated AppViewModel for state management and AppViewModel+Alerts for modal logic.
  • Views: Modified MenuBarHeaderView, TrafficSparklineView, and StatusItemController.
  • Resources: Updated Localizable.strings for multiple languages.

Verification Results

  • Build successful via make build.
  • Verified Pin mode stays active across space switches.
  • Verified long error messages are scrollable in NSAlerts.
  • Verified Traffic Sparkline correctly renders from right-to-left.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 16, 2026

@TakahashiMinato is attempting to deploy a commit to the Sitoi Team on Vercel.

A member of the Team first needs to authorize it.

@TakahashiMinato TakahashiMinato changed the title Fix/uiforclashbar feat(ui): improve UX with Pin mode, scrollable alerts, and sparkline enhancements May 16, 2026
@Sitoi Sitoi merged commit 1c61f51 into Sitoi:dev May 19, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants