feat: updated TOC component

src/components/RightSidebar/TableOfContents.tsx

@@ -1,16 +1,21 @@
+/** @jsxImportSource react */
 import type { MarkdownHeading } from "astro";
-import type { FunctionalComponent } from "preact";
+import type { FC } from "react";
 import { unescape } from "html-escaper";
-import { useState, useEffect, useRef } from "preact/hooks";
+import { useState, useEffect, useRef } from "react";
+import { useStore } from "@nanostores/react";
+import { $tabs } from "@store/tabStore";
 
 type ItemOffsets = {
   id: string;
   topOffset: number;
 };
 
-const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
+const TableOfContents: FC<{ headings: MarkdownHeading[] }> = ({
   headings = [],
 }) => {
+  const [headingsLocal, setHeadingsLocal] = useState(headings);
+  const tabs = useStore($tabs);
   const toc = useRef<HTMLUListElement>(null);
   const onThisPageID = "on-this-page-heading";
   const itemOffsets = useRef<ItemOffsets[]>([]);
@@ -67,6 +72,18 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
     return () => headingsObserver.disconnect();
   }, [toc.current]);
 
+  useEffect(() => {
+    if (tabs.items.length) {
+      // logic for removing tabs labels from TOC
+      const filteredHeadings = headings.filter(
+        (heading) =>
+          heading.depth === 3 &&
+          !tabs.items.find((tab) => tab.label === heading.text)
+      );
+      setHeadingsLocal(filteredHeadings);
+    }
+  }, [tabs]);
+
   const onLinkClick = (e) => {
     setCurrentID(e.target.getAttribute("href").replace("#", ""));
   };
@@ -77,7 +94,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
         On this page
       </h2>
       <ul ref={toc}>
-        {headings
+        {headingsLocal
           .filter(({ depth }) => depth > 1 && depth < 4)
           .map((heading) => (
             <li

src/components/atlas/BuildTabs.tsx

@@ -4,7 +4,7 @@ import { Tabs } from "@adjust/components";
 import { useStore } from "@nanostores/react";
 
 import { htmlWithTitles } from "@components/utils/htmlWithTitles";
-import { $tabs, changeSyncValue } from "@store/tabStore";
+import { $tabs, changeSyncValue, updateTabItems } from "@store/tabStore";
 
 import type { TabItemType } from "@adjust/components/build/Tabs/TabItem";
 
@@ -51,10 +51,7 @@ const BuildTabs: FC<{
   };
 
   useEffect(() => {
-    if (
-      currentTabs.isTabsHaveSync &&
-      tabs.currentSync
-    ) {
+    if (currentTabs.isTabsHaveSync && tabs.currentSync) {
       const activeTabId = currentTabs.items.find(
         (tab) => tab.sync === tabs.currentSync
       )?.id;
@@ -67,6 +64,10 @@ const BuildTabs: FC<{
     }
   }, [tabs.currentSync]);
 
+  useEffect(() => {
+    updateTabItems(items);
+  }, []);
+
   return (
     <>
       <Tabs

src/store/tabStore.ts

@@ -1,13 +1,22 @@
 import { map } from "nanostores";
 
+import type { TabItem } from "@components/atlas/BuildTabs";
+
 interface TabStore {
+  items: TabItem[];
   currentSync: string;
 }
 
 export const $tabs = map<TabStore>({
+  items: [],
   currentSync: "",
 });
 
 export const changeSyncValue = (sync: string) => {
-  $tabs.set({ currentSync: sync });
+  $tabs.set({ ...$tabs.get(), currentSync: sync });
+};
+
+export const updateTabItems = (newItems: TabItem[]) => {
+  const tabsData = $tabs.get();
+  $tabs.set({ ...tabsData, items: [...tabsData.items, ...newItems] });
 };