[GH-ISSUE #303] [Revamp UI] Prototype #1 #303

New issue

Open

opened 2026-03-03 19:49:43 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 19:49:43 +03:00

Owner

Originally created by @NghiaTranUIT on GitHub (Sep 7, 2023).
Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/303

Originally assigned to: @kics223w1 on GitHub.

Description

Create new Private Repo on Proxyman LLC
Fork this: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Install Tailwind CSS
Install https://ui.shadcn.com/docs/installation
Verify these package works fine without errors
Implement the Figman File

Please note:

Do not implement the actual logic, just a basic layout
Copy code from https://ui.shadcn.com -> Please don't try to implement the UI (e.g. button, color, layout) manually. Try to read the Comment on the Figma file -> Open the Reference link -> Get the Code
Don't use BlueprintJS or MUI. Just use Tailwind CSS, Tailwind Component + https://ui.shadcn.com
Don't hard code the color or the size of the Label -> Please read and use the code from https://ui.shadcn.com/docs/components/typography
Use Hero Icon: https://heroicons.com/ . Don't use BlueprintJS/MUI Icon.
The Table View: Use this https://adazzle.github.io/react-data-grid/#/million-cells
The Left Pane: Just leave it empty
Able to resize the left/middle and bottom panel

Originally created by @NghiaTranUIT on GitHub (Sep 7, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/303 Originally assigned to: @kics223w1 on GitHub. ## Description 1. Create new Private Repo on Proxyman LLC 2. Fork this: https://github.com/electron-react-boilerplate/electron-react-boilerplate 3. Install Tailwind CSS 4. Install https://ui.shadcn.com/docs/installation 5. Verify these package works fine without errors 7. Implement the Figman File Please note: - Do not implement the actual logic, just a basic layout - Copy code from https://ui.shadcn.com -> Please don't try to implement the UI (e.g. button, color, layout) manually. Try to read the Comment on the Figma file -> Open the Reference link -> Get the Code - Don't use BlueprintJS or MUI. Just use Tailwind CSS, Tailwind Component + https://ui.shadcn.com - Don't hard code the color or the size of the Label -> Please read and use the code from https://ui.shadcn.com/docs/components/typography - Use Hero Icon: https://heroicons.com/ . Don't use BlueprintJS/MUI Icon. - The Table View: Use this https://adazzle.github.io/react-data-grid/#/million-cells - The Left Pane: Just leave it empty - Able to resize the left/middle and bottom panel

kerem added the

✅ Done

enhancement

labels

2026-03-03 19:49:43 +03:00

kerem commented

2026-03-03 19:49:44 +03:00

Author

Owner

@NghiaTranUIT commented on GitHub (Sep 8, 2023):

Requirement

Implement basic Flow.ts, Request.ts, Headers.ts, Response.ts. Copy from the Windows source, remove all logic, just keep the basic properties.
On the Main process -> Schedule the timer to push the request to the FlowPool.ts, to similar the traffic
Observe the change in the Renderer process -> Render on the Table View -> Able to select to see the Request/Response
Also integrate the basic Monaco Editor (Copy code)

@NghiaTranUIT commented on GitHub (Sep 8, 2023): ### Requirement - Implement basic `Flow.ts`, `Request.ts`, `Headers.ts`, `Response.ts`. Copy from the Windows source, remove all logic, just keep the basic properties. - On the Main process -> Schedule the timer to push the request to the `FlowPool.ts`, to similar the traffic - Observe the change in the Renderer process -> Render on the Table View -> Able to select to see the Request/Response - Also integrate the basic Monaco Editor (Copy code)