Adding Tabs at the top of the request pane

[BalaSubramaniam12007]

PR Description

The tab bar in this application is implemented primarily in tab_pane.dart and tab_request.dart, with state management handled in collections_provider.dart. The tab bar displays a list of API requests (represented as tabs) that the user can interact with—selecting a tab, closing it, or reordering it. The collections_pane.dart file complements this by managing the collection of requests that populate the tab bar.

1. Workflow

TabRequestCard (tab_request.dart):

1. A stateless widget representing an individual tab.
2. Displays the API type, HTTP method, request name, and a close button.
3. Handles two main user interactions:
4. onTap: Triggers when the tab is clicked, typically to select it.
5. onClose: Triggers when the close icon is tapped to hide the tab.

Visual feedback: Selected tabs have a bottom border (via Positioned widget) and slight elevation.

TabPane (tab_pane.dart):

1. A consumer widget that builds the entire tab bar using Riverpod for state management.
2. Uses a horizontal SingleChildScrollView to display all visible tabs.
3. The close button is visible only when hovering over the tab in the tab bar.

Workflow steps:

1. Fetches the requestSequence (order of requests) and visibleTabs (subset of tabs to display).
2. Maps each visible requestID to a TabRequestCard.
3. Handles tab selection by updating selectedIdStateProvider via onTap.
4. Manages tab closure via onClose:
5. Toggles visibility in visibleTabsProvider.
6. Adjusts the selected tab if the closed tab was active (selects the first remaining tab or null if none remain).

2.User Interaction Flow

Opening a Tab : When a request is selected from the collection pane (collections_pane.dart), its ID is added to visibleTabs and potentially selectedId (via onTap in RequestItem).

Selecting a Tab : Clicking a TabRequestCard updates selectedId, highlighting the tab and loading its associated request data.

Closing a Tab : Clicking the close button removes the tab from visibleTabs and adjusts the selected tab if necessary.

Dynamic Updates : Adding, removing, or reordering requests in collections_provider.dart reflects in the tab bar via requestSequence.

3.logo_apidash.dart
A stateless widget displaying a centered, faded FlutterLogo (opacity 0.1, size 400) as a placeholder for an apidash_logo.

• Intended for use when no request is selected but a collection exists.
• if no collection presents ,displays logo with create new request button

Logic changes from the original code:

• Current: If no collection exists, a new one is created and automatically selected.
• Updated: If no collection exists, a new one is created but not selected. Instead, the default screen (logo) is displayed.

TODO:

1. Implement the tab bar for mobile platforms.
2. Replace the Flutter logo with the Apidash logo in editor_default.dart and logo_apidash.dart.
3. Allow reordering of requests through the tab bar.

WORKING VIDEO :

lv_0_20250318224617.mp4

Related Issues

• 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 am using the latest Flutter stable branch (run flutter upgrade and verify)
• I have run the tests (flutter test) and all tests are passing

Added/updated tests?

• Yes
• No, and this is why: Tests will be added after implementation approach is finalized and reviewed.

OS on which you have developed and tested the feature?

• Windows
• macOS
• Linux