mobile: add close button in editor all tab bottom sheet #6059

Signed-off-by: Sahil Aslam <sahil.aslam011@gmail.com>

apps/mobile/app/components/sheets/editor-tabs/index.tsx

@@ -33,11 +33,11 @@ import { editorController } from "../../../screens/editor/tiptap/utils";
 import { eSendEvent, presentSheet } from "../../../services/event-manager";
 import { eUnlockNote } from "../../../utils/events";
 import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const TabItemComponent = (props: {
   tab: TabItem;
@@ -225,14 +225,24 @@ export default function EditorTabs({
         }}
       >
         <Heading size={AppFontSize.lg}>{strings.tabs()}</Heading>
-        <IconButton
-          onPress={() => {
-            useTabStore.getState().newTab();
-            close?.();
-          }}
-          name="plus"
-          color={colors.primary.accent}
-        />
+        <View style={{ flexDirection: "row", gap: 8 }}>
+          <IconButton
+            onPress={() => {
+              useTabStore.getState().clearTabs();
+              close?.();
+            }}
+            name="close"
+            color={colors.primary.icon}
+          />
+          <IconButton
+            onPress={() => {
+              useTabStore.getState().newTab();
+              close?.();
+            }}
+            name="plus"
+            color={colors.primary.accent}
+          />
+        </View>
       </View>
 
       <FlatList
@@ -253,4 +263,4 @@ EditorTabs.present = () => {
   presentSheet({
     component: (ref, close, update) => <EditorTabs close={close} />
   });
-};
+};

apps/mobile/app/screens/editor/tiptap/use-tab-store.ts

@@ -187,6 +187,7 @@ export type TabStore = {
   focusEmptyTab: () => void;
   getCurrentNoteId: () => string | undefined;
   getTab: (tabId: string) => TabItem | undefined;
+  clearTabs: () => void;
   newTabSession: (
     id: string,
     options?: Omit<Partial<TabSessionItem>, "id">
@@ -255,7 +256,7 @@ export const useTabStore = create<TabStore, any>(
 
         const sessionId =
           oldSessionId &&
-          tabSessionHistory.currentSessionId(tabId) === oldSessionId
+            tabSessionHistory.currentSessionId(tabId) === oldSessionId
             ? oldSessionId
             : tabSessionHistory.add(tabId, oldSessionId);
 
@@ -386,7 +387,7 @@ export const useTabStore = create<TabStore, any>(
       focusPreviewTab: (
         noteId: string,
         options: Omit<Partial<TabItem>, "id" | "noteId">
-      ) => {},
+      ) => { },
 
       removeTab: (id: string) => {
         const index = get().tabs.findIndex((t) => t.id === id);
@@ -482,6 +483,25 @@ export const useTabStore = create<TabStore, any>(
       },
       getTab: (tabId) => {
         return get().tabs.find((t) => t.id === tabId);
+      },
+      clearTabs: () => {
+        const tabs = get().tabs;
+        tabs.forEach((tab) => {
+          const tabSessions = tabSessionHistory.getTabHistory(tab.id);
+          tabSessions.back.forEach((id) => TabSessionStorage.remove(id));
+          tabSessions.forward.forEach((id) => TabSessionStorage.remove(id));
+          tabSessionHistory.clearStackForTab(tab.id);
+        });
+
+        const id = getId();
+        set({
+          tabs: [{ id: id }],
+          currentTab: id
+        });
+        history.history = [id];
+        get().newTabSession(id);
+        get().focusTab(id);
+        syncTabs();
       }
     }),
     {