feat(mobile): Add tag clearing functionality to tag list (#1595)

1 files changed, 31 insertions, 1 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
index a58ba5fd..38296626 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/manage_tags.tsx
@@ -1,5 +1,11 @@
 import React, { useMemo } from "react";
-import { Pressable, SectionList, Text, View } from "react-native";
+import {
+  Pressable,
+  SectionList,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
@@ -81,6 +87,19 @@ const ListPickerPage = () => {
     onError,
   });
 
+  const clearAllTags = () => {
+    if (optimisticTags.length === 0) return;
+
+    updateTags({
+      bookmarkId,
+      detach: optimisticTags.map((tag) => ({
+        tagId: tag.id,
+        tagName: tag.name,
+      })),
+      attach: [],
+    });
+  };
+
   const optimisticExistingTagIds = useMemo(() => {
     return new Set(optimisticTags?.map((t) => t.id) ?? []);
   }, [optimisticTags]);
@@ -117,6 +136,16 @@ const ListPickerPage = () => {
     return { filteredAllTags, filteredOptimisticTags };
   }, [search, allTags, optimisticTags, optimisticExistingTagIds]);
 
+  const ClearButton = () => (
+    <TouchableOpacity
+      onPress={clearAllTags}
+      disabled={optimisticTags.length === 0}
+      className={`mr-4 ${optimisticTags.length === 0 ? "opacity-50" : ""}`}
+    >
+      <Text className="text-base font-medium text-blue-500">Clear</Text>
+    </TouchableOpacity>
+  );
+
   if (isAllTagsPending) {
     return <FullPageSpinner />;
   }
@@ -131,6 +160,7 @@ const ListPickerPage = () => {
             autoCapitalize: "none",
             hideWhenScrolling: false,
           },
+          headerRight: () => <ClearButton />,
         }}
       />
       <SectionList