Implement the Source Tree v1: Basic layout + Domain Folder

[NghiaTranUIT]

Description

We should implement the Source Tree v1 panel like Proxyman for macOS. This epic feature will be split into some sub-tickets.

⚠️ Before working on this ticket, please book @NghiaTranUIT a video call for better explanation 👍

Acceptance Criteria

• Setup the Source Tree Panel by using the Blueprint Tree
• Implement the All Group
• Implement the Domains Folder
• Display a new Domain if it's the first time the traffic goes through the Proxyman app
• Show the subpath of the domain as child nodes
• When selecting the domain node -> Display all traffic of this domain on the main table view
• When selecting the child node -> Display traffic of this sub-domain
• Domain Nodes are not persisted. They will reset in the next launch.
• New domain will be appended to the end of the list
• Show the number of domain

[NghiaTranUIT]

Sample class structure

SourceList class

• Represent the entire Left Panel
• Has a list of groups.
• In this ticket, when the source list is initialized, it will contain the All group.

Group class

• Represent All, Favorite, Pin Group (in the future, we can have Remote Group, Atlantis Group) -> Define as an Enum.
• A Group class has a list of Folder

Folder class

• Present a New Folder, App Folder, Domain Folder (Pinned and Saved folder for later) -> Define as an Enum.
• has a list of TreeNode

What happens if there is a new flow

1. Append to the source list
2. Source List will add to all group
3. For Each group, add to all subfolders
4. For the folder: If it's a Domain Folder -> Get the TreeNode which has a host -> If it's not existed -> Created
5. Add the flow to the TreeNode
6. TreeNode will breakdown the URL into each paths and recursively create child nodes for each path (See the macOS for reference)