New Windows UI - v2

[NghiaTranUIT]

Description

#305 should be deprecated.

The new design looks better, but it's hard to use: For example:

New Design:

• Status View is hidden -> Need to click to show the Popover
• Content Type Filter (JSON, HTTP, HTTPS, ...) is hidden -> Need to click on the Filter button to show it -> Hard to discover

Task 1: Use the new menu from Shadcn

• [x] Install the Shadcn for the Menu Context. Code: https://ui.shadcn.com/examples/music
• [x] Replace the main app menu (BlueprintJS) with a new menu from ShadCN, including Proxyman, File, Edit, Certificate, Diff....

• [x] Make sure all Shortcuts are still working (For example Control + , -> Show the Preference)

• [x] Replace the menu context from the Main Table View -> Make sure all shortcuts are working ✅

• [x] Replace the menu context from the Left pane

• [x] Replace all menu context from All tools: Map Local, Breakpoint, Diff, ...

[NghiaTranUIT]

Task 2: Place Dropdown with ShadCN

• [x] Replace old dropdown from the Filter (e.g. URL and Contains dropdown) with ShadCN

• [x] Make sure we keep the current size of the two buttons (width, height)

• [x] Replace the checkbox with ShadCN checkbox button (Make sure same width/height)

[NghiaTranUIT]

Task 3: Use Shadcn Popover

• [x] Remove all BlueprintJS Dialog code (When displaying the Preference, Certificate View, iOS device, Android, ...)
• [x] Use ShadCN Popover
• [x] Make sure all UI of theses screens are not broken

Task 4: Replace BlueprintJS buttons with shadcn button

• [x] The problem of the BlueprintJS button is it has shadow -> Replace BlueprintJS button with shadcn button
• [x] Make sure it has the same width and height, font size, font name
• [x] Use default Shadcn border color and border radius.
• [x] Find all buttons from the app and replace it.

For example:

[NghiaTranUIT]

Task 5: Replace BlueprintJS Alert

• [x] Replace all BlueprintJS Alert with ShadCN: https://ui.shadcn.com/docs/components/alert-dialog
• [x] Don't use any ICON.

For example:

• [x] Make sure the Title and description are intact. The destruction button should have a Red Background
• [x] Logic is still working

[NghiaTranUIT]

Task 6: Replace BlueprintJS Toast

• [x] Find all Toast and replace with shadcn toast: https://ui.shadcn.com/docs/components/toast

• [ ] Premium Toast: Find a way to show a Toast in the same position as the current Toast (Top Middle). Make sure to have Upgrade Now button

• [ ] Error Toast: Show Destructive Toast (Right Bottom position) with the error -> Make sure current buttons are working.

[NghiaTranUIT]

Task 7: Replace Header Table View with new Header from Windows-Prototype

• [x] Remove the old Header (as a Table View with 2 columns) to the new Header from Windows-Prototype -> It means we can easily select text from multiple rows.
• [x] Has two Columns: Key & Value
• [x] Verify the Header Filter is working
• [x] Apply to the Form, Query, Auth, ... which uses the Header View

[NghiaTranUIT]

Task 8: Improve the Summary tab

• [ ] Remove the Expand/Collapse Animation
• [x] Fix the height of the row: Currently, it's too big, and it's inconsistent with the Height of the Header Row => Use the same Height as the Header Row

[NghiaTranUIT]

Task 9: Redesign the Update App panel

• [ ] Remove old code that shows this Window Panel when there is a new update, updating the app, installing the new update, ..

• [ ] Keep this design: From what I know, it's a native MSI installer, so we can't change the design.

• [ ] Implement new design

---

New design

1. You're up to date:

• Use the same layout of the notification: https://tailwindui.com/components/application-ui/overlays/notifications
• Position: Top-Right
• Title: You're up to date
• Description: Proxyman {version} is currently the newest version available.
• Make sure the {version} is dynamic and show the correct build version.

2. Downloading progress

• Show Notification: Top-Right: Code: https://tailwindui.com/components/application-ui/overlays/notifications
• Title: Downloading 30%...
• Description: N/A
• Logic: Make sure the percent number is updated properly
• Don't use the Reply button
• Can click X to hide it, but the app is still downloading in the background.
• When it's completed, show the Read to Install design.

3. Ready to install

• Code: https://ui.shadcn.com/docs/components/alert-dialog
• Show this alert dialog entire the screen -> Don't allow to dismiss this alert
• Title: Ready to install!
• Description: Proxyman {version} is downloaded and ready to install.
• Button: 1 primary black button: Title=Install
• Action: Start updating the app.

[NghiaTranUIT]

Task 10: Some improvements

• The font family and font size of these layouts are not matched.
• The Windows version (Run on a Windows machine or parallels) looks completely off.

macOS:

Windows

How to fix

• [ ] Make sure the Windows version uses the same Font Family and Font Size as the macOS.
• [ ] The Top and Bottom padding (Windows) are off -> Make it look like the macOS.

[NghiaTranUIT]

Updated: new design for Task 9: Redesign the Update App panel

[NghiaTranUIT]

Task 11: Update new design for Change Logs

• Use Shadcn dialog: https://ui.shadcn.com/docs/components/dialog
• Design similar (Title, Description, font size, font weight) with:

• Title: Proxyman Change Logs
• Description: Proxyman {version} is available to update.
• Content: Use the Markdown render, corner border -> Make sure the padding looks good. The current design is off.
• Use one button: Install as a Primary Button (Black)