Split codebase (#455)

apps/yaak-client/hooks/useHeadersTab.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+import { CountBadge } from "../components/core/CountBadge";
+import type { TabItem } from "../components/core/Tabs/Tabs";
+import type { HeaderModel } from "./useInheritedHeaders";
+import { useInheritedHeaders } from "./useInheritedHeaders";
+
+export function useHeadersTab<T extends string>(
+  tabValue: T,
+  model: HeaderModel | null,
+  label?: string,
+) {
+  const inheritedHeaders = useInheritedHeaders(model);
+
+  return useMemo<TabItem[]>(() => {
+    if (model == null) return [];
+
+    const allHeaders = [
+      ...inheritedHeaders,
+      ...(model.model === "grpc_request" ? model.metadata : model.headers),
+    ];
+    const numHeaders = allHeaders.filter((h) => h.name).length;
+
+    const tab: TabItem = {
+      value: tabValue,
+      label: label ?? "Headers",
+      rightSlot: <CountBadge count={numHeaders} />,
+    };
+
+    return [tab];
+  }, [inheritedHeaders, label, model, tabValue]);
+}