[GH-ISSUE #257] Tab System for Compose, Map Local Editor and Breakpoint Editor #258

New issue

Open

opened 2026-03-03 19:49:27 +03:00 by kerem · 0 comments

kerem commented

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

Owner

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

Originally assigned to: @kics223w1 on GitHub.

Problem

⚠️ Book a video call

If we're using Breakpoint, Compose, Edit & Repeat, or Map Local Editor-> It displays as an overlay dialog -> It's impossible to interact with the main app (Flow TableView).

The user has to dismiss the overlay dialog view -> Losse the current data.

We should use the system tabs (Like Google Chrome Tab). Playground: https://react-browser-ui.netlify.app/

Acceptance Criteria

Use this library: https://www.npmjs.com/package/react-browser-ui or a similar library (Please spend a couple of minutes searching around the Internet to see if there is a better alternative) -> If you find a new one, please state it.
This library supports 3 mods: Google Chrome, Firefox, and Safari -> Let's use the Chrome mode ✅

Tab system behavior

Proxyman uses multiple tabs to present the Compose, Map Local Editor, and Breakpoint Editor View.
By default, when Proxyman is opened, there is 1 tab (It's the main app) -> However, if there is only 1 Tab -> Hide the entire Tab Bar -> It means the main UI doesn't change
If we click on the Compose button, Breakpoint Editor, or Map Local Editor -> Open the view in the new tab -> Make it fullscreen, don't use dialog anymore -> Tab Bar will appear -> Able to switch between Tab
If Tab Size = 1 -> Don't allow to click on the X button -> Hide this X button on the main Tab => We don't allow the user to close the main app from the Tab BVar
If Tab Index > 1 && not a main tab -> Able to click on the X button to close it => If the Tab Size = 1 -> Hide the Main Tab

Tab Title

Main app: Proxyman
Compose: Compose ${flow.reqest.host ?? ""}
Edit & Repeat: Compose ${flow.reqest.host ?? ""}
In the Compose View: If the user updates the URL with a new Host => Update the Title too.
Breakpoint Editor: Breakpoint Editor
Map Local: Map Local: ${ruleEntry.name} => If the user updates the Rule Name => Update the Tab Title

Additional behavior

Compose View => Allow opening multiple tabs for Compose View, each Tab is a separate Compose View
Map Local Editor => Allow opening multiple tabs for Map Local Editor, each Tab is a separate Map Local Editor
Breakpoint Editor => Only 1 => If it's already opened -> Switch to this tab
When clicking on the X button to close the tab -> Make sure we save the current data on the Map Local Editor

Originally created by @NghiaTranUIT on GitHub (Jun 19, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/257 Originally assigned to: @kics223w1 on GitHub. ## Problem ⚠️ Book a video call If we're using Breakpoint, Compose, Edit & Repeat, or Map Local Editor-> It displays as an overlay dialog -> It's impossible to interact with the main app (Flow TableView). The user has to dismiss the overlay dialog view -> Losse the current data. We should use the system tabs (Like Google Chrome Tab). Playground: https://react-browser-ui.netlify.app/ <img width="672" alt="Screenshot 2023-06-19 at 08 31 12" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/67f528d9-cd7e-49c4-adc4-d7f999dd8ae7"> ## Acceptance Criteria - Use this library: https://www.npmjs.com/package/react-browser-ui or a similar library (Please spend a couple of minutes searching around the Internet to see if there is a better alternative) -> If you find a new one, please state it. - This library supports 3 mods: Google Chrome, Firefox, and Safari -> Let's use the Chrome mode ✅ ## Tab system behavior - Proxyman uses multiple tabs to present the Compose, Map Local Editor, and Breakpoint Editor View. - By default, when Proxyman is opened, there is 1 tab (It's the main app) -> However, if there is only 1 Tab -> Hide the entire Tab Bar -> It means the main UI doesn't change - If we click on the Compose button, Breakpoint Editor, or Map Local Editor -> Open the view in the new tab -> Make it fullscreen, don't use dialog anymore -> Tab Bar will appear -> Able to switch between Tab - If Tab Size = 1 -> Don't allow to click on the `X` button -> Hide this `X` button on the main Tab => We don't allow the user to close the main app from the Tab BVar - If Tab Index > 1 && not a main tab -> Able to click on the `X` button to close it => If the Tab Size = 1 -> Hide the Main Tab ## Tab Title - Main app: `Proxyman` - Compose: `Compose ${flow.reqest.host ?? ""}` - Edit & Repeat: `Compose ${flow.reqest.host ?? ""}` - In the Compose View: If the user updates the URL with a new Host => Update the Title too. - Breakpoint Editor: `Breakpoint Editor` - Map Local: `Map Local: ${ruleEntry.name}` => If the user updates the Rule Name => Update the Tab Title ## Additional behavior - Compose View => Allow opening multiple tabs for Compose View, each Tab is a separate Compose View - Map Local Editor => Allow opening multiple tabs for Map Local Editor, each Tab is a separate Map Local Editor - Breakpoint Editor => Only 1 => If it's already opened -> Switch to this tab - When clicking on the `X` button to close the tab -> Make sure we save the current data on the Map Local Editor -