Skip to content

Conversation

steipete
Copy link
Collaborator

Summary

  • Replaced the bell icon with a settings (gear) icon in the notification-status component
  • Updated tooltips to clarify that the button opens general settings, not just notifications

Why

The bell icon was misleading since clicking it opens a unified settings dialog that contains much more than just notification preferences:

  • Notification settings
  • General app preferences (keyboard mode, log link visibility, repository base path)

A settings/gear icon better represents the button's actual functionality.

Changes

  • Changed the SVG from a bell to a standard gear/cog icon
  • Updated tooltips to say "Settings (Notifications enabled/disabled)" instead of just "Notifications enabled/disabled"
  • Maintained the color-coding: green when notifications are enabled, red when disabled

Test Plan

  • Verified the settings icon appears correctly in both light and dark modes
  • Confirmed the icon changes color based on notification status (green/red)
  • Tested that clicking the icon opens the unified settings dialog
  • Checked that tooltips display correctly on hover

Fixes #364

steipete added 2 commits July 16, 2025 03:16
The bell icon was misleading since clicking it opens a unified settings dialog containing:
- Notification preferences
- General app settings (keyboard mode, log links, repository path)

Changed to a gear/cog icon which better represents the button's purpose while maintaining the color-coded notification status (green when enabled, red when disabled).

Fixes #364
Changed the settings icon to use the default muted color (instead of red) when notifications are disabled. Only shows green when notifications are actively enabled. This provides a less alarming appearance while still indicating notification status.
Copy link

github-actions bot commented Jul 16, 2025

🔍 Code Quality Report

This comment is automatically updated with linting results from CI.

Node.js Biome Formatting ✅ Status: Passed

Node.js Biome Linting ✅ Status: Passed

Node.js Test Coverage ✅ Status: Passed

Client Coverage:
• Lines: 37.44%
• Functions: 50.39%
• Branches: 71.03%
• Statements: 37.44%

Server Coverage:
• Lines: 13.24%
• Functions: 35.43%
• Branches: 75.48%
• Statements: 13.24%

Mac Formatting (SwiftFormat) ❌ Status: Failed

Click to see details
Running SwiftFormat...
(lint mode - no files will be changed.)
Reading config file at /Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/.swiftformat
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Constants/RemoteAccessConstants.swift:5:1: error: (numberFormatting) Use consistent grouping for numeric literals. Groups will be separated by _ delimiters to improve readability. For each numeric type you can specify a group size (the number of digits in each group) and a threshold (the minimum number of digits in a number before grouping is applied).
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Constants/RemoteAccessConstants.swift:10:1: error: (linebreakAtEndOfFile) Add empty blank line at end of file.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:20:1: error: (wrap) Wrap lines that exceed the specified maximum width.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:21:1: error: (indent) Indent code in accordance with the scope level.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:21:1: error: (wrapMultilineStatementBraces) Wrap the opening brace of multiline statements.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:30:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:32:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:42:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:48:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:57:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Utilities/ViewExtensions.swift:62:1: error: (linebreakAtEndOfFile) Add empty blank line at end of file.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:14:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:18:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:23:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:28:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:30:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:34:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:36:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:41:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:49:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:56:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:60:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:65:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:69:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:72:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:81:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Core/Services/RemoteServicesStatusManager.swift:91:1: error: (linebreakAtEndOfFile) Add empty blank line at end of file.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Presentation/Views/Settings/DebugSettingsView.swift:142:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Presentation/Views/Settings/SecurityPermissionsSettingsView.swift:171:1: error: (wrap) Wrap lines that exceed the specified maximum width.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/VibeTunnelApp.swift:94:1: error: (wrap) Wrap lines that exceed the specified maximum width.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/VibeTunnelApp.swift:125:1: error: (modifierOrder) Use consistent ordering for member modifiers.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Presentation/Views/Settings/DashboardSettingsView.swift:83:1: error: (trailingSpace) Remove trailing space at end of a line.
/Users/steipete/actions-runner/actions-runner/_work/vibetunnel/vibetunnel/mac/VibeTunnel/Presentation/Views/Settings/DashboardSettingsView.swift:86:1: error: (trailingSpace) Remove trailing space at end of a line.
SwiftFormat completed in 0.16s.
Source input did not pass lint check.
7/117 files require formatting, 1 file skipped.

Mac Linting (SwiftLint) ✅ Status: Passed

macOS Test Coverage ❌ Status: Failed

• Coverage: 0%

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Notification Icon Color Mismatch

The notification status icon's color for disabled states was changed from red (text-status-error) to gray (text-muted). This contradicts the PR description's claim of maintaining red for disabled notifications, creating a discrepancy between documented and actual behavior.

web/src/client/components/notification-status.ts#L88-L89

return {
color: 'text-muted',

Fix in CursorFix in Web


Was this report helpful? Give feedback by reacting with 👍 or 👎

Copy link

claude bot commented Jul 16, 2025

Claude finished @steipete's task —— View job


📋 Summary

This PR replaces the bell icon with a settings gear icon in the notification-status component and updates tooltips to clarify that the button opens general settings rather than just notification preferences. The changes better reflect the button's actual functionality since it opens a unified settings dialog containing multiple configuration options.

✅ Positive Aspects

  • Clear semantic improvement: The settings icon better represents the button's actual functionality
  • Consistent tooltip updates: All tooltip messages now include "Settings" prefix for clarity
  • Clean implementation: The SVG icon replacement is straightforward and well-formatted
  • Maintains existing functionality: Event handling and state management remain unchanged

🔍 Areas for Improvement

Code Quality

  • The code follows existing patterns and conventions well
  • No code duplication or DRY violations observed
  • Clear naming and good code organization

Potential Issues

  • Documentation discrepancy: The PR description states "Maintained the color-coding: green when notifications are enabled, red when disabled" but the code actually changes disabled color from red (text-status-error) to gray (text-muted). This is a valid UX improvement but the PR description should be updated for accuracy.

Performance

  • No performance concerns - the changes are purely presentational
  • SVG icon change has no impact on runtime performance

Security

  • No security implications in these changes

Testing

  • The PR includes a comprehensive test plan that covers all relevant scenarios
  • Manual testing appears sufficient for this UI change

💡 Suggestions

  1. Update PR description: Correct the statement about maintaining red color for disabled state to reflect the actual change to gray
  2. Consider accessibility: Ensure the gray color (text-muted) provides sufficient contrast for users with visual impairments
  3. Icon consistency: Verify that the settings gear icon style matches other icons in the application for visual consistency

🎯 Priority Items

  1. Update PR description to accurately reflect the color change from red to gray for disabled states

Reviewed commit: 422ad4c
Files changed: 1

Todo List:

  • Read and analyze the changed file (notification-status.ts)
  • Verify icon change from bell to settings
  • Check tooltip updates
  • Validate color behavior for enabled/disabled states
  • Review code quality and best practices
  • Provide comprehensive review feedback

@steipete steipete merged commit 12a2468 into main Jul 16, 2025
14 of 15 checks passed
@steipete steipete deleted the settings-icon branch July 16, 2025 01:26
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.

replace notification icon with settings icon in web UI
1 participant