Feat tab view

[yashas-hm]

PR Description

Tab View implementation for requests

Related Issues

• Related Issue Adding Tabs at the top of the request pane #306
• Closes Adding Tabs at the top of the request pane #306

Checklist

• I have gone through the contributing guide
• I have updated my branch and synced it with project main branch before making this PR
• I have run the tests (flutter test) and all tests are passing

Added/updated tests?

• No, and this is why: Not sure which test cases to add

Screen.Recording.2024-03-20.at.12.58.40.AM.mov

[yashas-hm]

@animator please review

[animator]

The UI can be made better. It is not looking professional.

[yashas-hm]

Sure will work on it.

[yashas-hm]

How does this look?

[ashitaprasad]

The line below the tabs is not looking good.

[yashas-hm]

[ashitaprasad]

Looks better .. but the goal is not to make it like chrome tabs (smaller & smaller), but more like VS Code tabs that do not shrink beyond a certain width (so that it does not hamper readability) & is scrollable.
Also, looks like you have not taken the latest pull of the main branch as we added a top bar above the URL box .. see #307
So you need to redesign keeping this in mind.

[yashas-hm]

The mentioned issue is not merged with main yet. But ill keep that bar in ming and redesign accordingly. Thanks for the clarity of design implementation.

[yashas-hm]

VS code has an Edgy and sharp look which conflicts with the current app curved designs.

[animator]

@yashas-hm Only the protocol selection dropdown is not merged. The top bar containing the name of the request and the button to rename it is already in the main branch.

[animator]

You are not suggested to copy the exact design of VS Code tabs .. You should take a look at it as to how it functions and adapt it to our design.

[yashas-hm]

I had removed that for testing purposes. Will include the rename button besides the tab as having a separate column below the tab view doesn't look good with the name of the request coming multiple times.

Also can the feature #307 be redesigned like the image below as it would be much better option to place the dropdown in request editor pane.

[yashas-hm]

[yashas-hm]

Will push changes once design finalised.

[mmjsmohit]

Hi @yashas-hm!
The top bar has the protocol selection dropdown, the request name and a rename button as shown in the following image.

[yashas-hm]

I had removed that for testing purposes. Will include the rename button besides the tab as having a separate column below the tab view doesn't look good with the name of the request coming multiple times.

Also can the feature #307 be redesigned like the image below as it would be much better option to place the dropdown in request editor pane.

Hi @mmjsmohit can the dropdown be shifted in the request editor pane? As when including the tab view the name of request coming multiple times would not look pleasing according to me.

If @animator @ashitaprasad and you are ok with the double names under the tabview then I can Implement accordingly.

Current:

With topbar for protocol selection

And I am proposing something like this:
Note: This is just UI i have not implemented the dropdown

[mmjsmohit]

Since the type of protocol used alters the rest of the UI, including that of the request and response pane, I think it is not appropriate to put it inside the request pane.

[yashas-hm]

Ok then will make the changes accordingly thanks.

[yashas-hm]

Final Design:

[animator]

How is it looking on Windows .. We have the minimize maximize and close buttons on the top right.

[yashas-hm]

I have a Mac Silicon so not able to run Windows as a VM but will get a friend to test and will send the screenshot.

[yashas-hm]

Windows

[animator]

The padding at the top above the tabs is not looking good.

[yashas-hm]

I have added the top padding to collection panel too for windows before it was not there only in mac. We can add name of the app (APIDash and logo in the top space so that it is not empty., most desktop apps have that.

Else the tabs will be merged with the action buttons on top in windows.

[yashas-hm]

Windows:

MacOS: