feat: Tab indicators for request params, headers, body

lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart

@@ -18,15 +18,20 @@ class _EditRequestPaneState extends ConsumerState<EditRequestPane> {
   Widget build(BuildContext context) {
     final activeId = ref.watch(activeIdStateProvider);
     final codePaneVisible = ref.watch(codePaneVisibleStateProvider);
-    var index = ref
+    final tabIndex = ref.watch(
-        .read(collectionStateNotifierProvider.notifier)
+        activeRequestModelProvider.select((value) => value?.requestTabIndex));
-        .getRequestModel(activeId!)
+
-        .requestTabIndex;
+    final headerLength = ref.watch(activeRequestModelProvider
+        .select((value) => value?.requestHeaders?.length));
+    final paramLength = ref.watch(activeRequestModelProvider
+        .select((value) => value?.requestParams?.length));
+    final bodyLength = ref.watch(activeRequestModelProvider
+        .select((value) => value?.requestBody?.length));
 
     return RequestPane(
       activeId: activeId,
       codePaneVisible: codePaneVisible,
-      tabIndex: index,
+      tabIndex: tabIndex,
       onPressedCodeButton: () {
         ref
             .read(codePaneVisibleStateProvider.notifier)
@@ -35,8 +40,13 @@ class _EditRequestPaneState extends ConsumerState<EditRequestPane> {
       onTapTabBar: (index) {
         ref
             .read(collectionStateNotifierProvider.notifier)
-            .update(activeId, requestTabIndex: index);
+            .update(activeId!, requestTabIndex: index);
       },
+      showIndicators: [
+        paramLength != null && paramLength > 0,
+        headerLength != null && headerLength > 0,
+        bodyLength != null && bodyLength > 0,
+      ],
       children: const [
         EditRequestURLParams(),
         EditRequestHeaders(),

lib/widgets/request_widgets.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:apidash/consts.dart';
+import 'tabs.dart';
 
 class RequestPane extends StatefulWidget {
   const RequestPane({
@@ -10,6 +11,7 @@ class RequestPane extends StatefulWidget {
     this.onPressedCodeButton,
     this.onTapTabBar,
     required this.children,
+    this.showIndicators = const [false, false, false],
   });
 
   final String? activeId;
@@ -18,6 +20,7 @@ class RequestPane extends StatefulWidget {
   final void Function()? onPressedCodeButton;
   final void Function(int)? onTapTabBar;
   final List<Widget> children;
+  final List<bool> showIndicators;
 
   @override
   State<RequestPane> createState() => _RequestPaneState();
@@ -77,40 +80,18 @@ class _RequestPaneState extends State<RequestPane>
           controller: _controller,
           overlayColor: kColorTransparentState,
           onTap: widget.onTapTabBar,
-          tabs: const [
+          tabs: [
-            SizedBox(
+            TabLabel(
-              height: kTabHeight,
+              text: 'URL Params',
-              child: Center(
+              showIndicator: widget.showIndicators[0],
-                child: Text(
-                  'URL Params',
-                  textAlign: TextAlign.center,
-                  overflow: TextOverflow.fade,
-                  softWrap: false,
-                  style: kTextStyleButton,
-                ),
-              ),
             ),
-            SizedBox(
+            TabLabel(
-              height: kTabHeight,
+              text: 'Headers',
-              child: Center(
+              showIndicator: widget.showIndicators[1],
-                child: Text(
-                  'Headers',
-                  textAlign: TextAlign.center,
-                  overflow: TextOverflow.fade,
-                  style: kTextStyleButton,
-                ),
-              ),
             ),
-            SizedBox(
+            TabLabel(
-              height: kTabHeight,
+              text: 'Body',
-              child: Center(
+              showIndicator: widget.showIndicators[2],
-                child: Text(
-                  'Body',
-                  textAlign: TextAlign.center,
-                  overflow: TextOverflow.fade,
-                  style: kTextStyleButton,
-                ),
-              ),
             ),
           ],
         ),

lib/widgets/tabs.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:apidash/consts.dart';
+
+class TabLabel extends StatelessWidget {
+  const TabLabel({super.key, required this.text, this.showIndicator = false});
+  final String text;
+  final bool showIndicator;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: kTabHeight,
+      child: Stack(
+        children: [
+          Center(
+            child: Text(
+              text,
+              textAlign: TextAlign.center,
+              overflow: TextOverflow.fade,
+              softWrap: false,
+              style: kTextStyleButton,
+            ),
+          ),
+          if (showIndicator)
+            const Align(
+              alignment: Alignment.topCenter,
+              child: Padding(
+                padding: EdgeInsets.only(top: 6),
+                child: Icon(
+                  Icons.circle,
+                  size: 6,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -17,3 +17,4 @@ export 'response_widgets.dart';
 export 'snackbars.dart';
 export 'markdown.dart';
 export 'uint8_audio_player.dart';
+export 'tabs.dart';