[FE] [Refactoring] Refactor Top Tab Bar of the Sparrow App

[Astitva877]

The current status of tab bar is that it is a stateful component with good amount of props drilled down including callbacks from ViewModel to facilitate actions.

We want to create a stateless, dumb component to handle tabs. Following are the requirements:

1. The tab bar should allow users to manage list of tabs which would be given to the tab bar as a prop.
2. User should be able to click on "+" button to invoke event onNewTabRequested.
3. User should be able to close tab either by using middle button of mouse or using close icon, both should should invoke event onTabClosed.
4. User should be able to scroll through the tabs if the total tabs cannot be accommodated within the said space.

Here is how the proposed signature would look like (may change a little during actual implementation)

<script context="module" lang="ts">
   // to be used to export types
   export type TabItem = {
      tabName: string;    // name of the tab
      tabId: string;      // unique tab id to distinguish the tab
      tabIndex: number;   // at which index tab will be available
      tabType: string;    // it could be either "API" type or "collection" type or "workspace" type
      isDraft: boolean;   // will allow to show if tab has unsaved content
   };
</script>
<script lang="ts">
   // the actual component
   export let tabList: TabItem[]  = [];
   export let onNewTabRequested: () => void;
   export let onTabClosed: (tabId: string) => void;
</script>

The component is proposed to be used like this:

<TabBar 
    bind:tabList={_viewModel.tabList} 
    onNewTabRequested={_viewModel.createNewTab}
    onTabClosed={_viewModel.closeTab}
/>

[Astitva877]

@gc-codes sir can you please add the technical requirements in this?

[gc-codes]

@Astitva877 updated the description above. Thanks.

[sanilnayak]

3rd point i am not able to test @Astitva877

[sanilnayak]

3rd point is not working #763 @shreyas070707 please check

[shreyas070707]

@sanilnayak middle button of mouse is not working for me.

[sanilnayak]

Bugs are mentioned in the excel and board so we are closing the story. @shreyas070707