Skip to content

feat: add custom title bar with platform-specific controls#40

Merged
vuon9 merged 1 commit intomainfrom
feature/custom-title-bar
Feb 11, 2026
Merged

feat: add custom title bar with platform-specific controls#40
vuon9 merged 1 commit intomainfrom
feature/custom-title-bar

Conversation

@vuon9
Copy link
Owner

@vuon9 vuon9 commented Feb 11, 2026

Summary

This PR adds a custom title bar that spans the full width of the application window.

Features

  • Custom TitleBar component (TitleBar.jsx)

    • Desktop-only detection (via window.wails)
    • Sidebar toggle button on the left
    • App name centered
    • Settings menu on the right side
    • Platform-specific window controls for Windows/Linux
    • Hidden in browser mode
  • Updated layout

    • Title bar spans full width (above sidebar)
    • Sidebar positioned below title bar
    • Clean sidebar with search bar at top

Platform Behavior

  • macOS: Native traffic lights + custom content (toggle, app name, settings)
  • Windows/Linux: Custom window controls (minimize, maximize, close)
  • Browser: Title bar hidden completely

Screenshots

  • Desktop: Shows title bar with all controls
  • Web: Title bar hidden, app appears as web app

Testing

  • Tested on macOS
  • Tested on Windows
  • Tested on Linux
  • Verified title bar hidden in browser mode

Files Changed

  • frontend/src/components/TitleBar.jsx (new)
  • frontend/src/components/Sidebar.jsx (cleaned up)
  • frontend/src/App.jsx (restructured)
  • frontend/src/App.css (updated styles)

- Create TitleBar component with desktop-only detection
- Add sidebar toggle button in title bar (left side)
- Center app name in title bar
- Add settings icon on right side of title bar
- Platform-specific window controls (Windows/Linux only)
- Hide title bar in browser mode (via window.wails detection)
- Move sidebar below title bar with proper spacing
- Clean up sidebar: remove logo and close button
- Search bar now at top of sidebar
- Update App.jsx structure with title bar spanning full width
@github-actions
Copy link

Code Coverage

Package Line Rate Health
devtoolbox/internal/barcode 90%
devtoolbox/internal/codeformatter 56%
devtoolbox/internal/converter 60%
devtoolbox/internal/datagenerator 91%
devtoolbox/internal/datetimeconverter 73%
devtoolbox/internal/jwt 42%
Summary 65% (3083 / 4770)

Minimum allowed line rate is 60%

@vuon9 vuon9 merged commit e460f86 into main Feb 11, 2026
2 checks passed
@vuon9 vuon9 deleted the feature/custom-title-bar branch February 11, 2026 14:21
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.

1 participant