feat: display folders above ungrouped feeds in sidebar, add delete-all-custom-feeds to danger zone

1 files changed, 38 insertions, 0 deletions

diff --git a/apps/web/app/reader/settings/_components/danger-zone-settings.tsx b/apps/web/app/reader/settings/_components/danger-zone-settings.tsx
index 3525426..eb6c008 100644
--- a/apps/web/app/reader/settings/_components/danger-zone-settings.tsx
+++ b/apps/web/app/reader/settings/_components/danger-zone-settings.tsx
@@ -5,14 +5,17 @@ import { useRouter } from "next/navigation"
 import { useMutation } from "@tanstack/react-query"
 import { useUnsubscribeAll } from "@/lib/queries/use-subscription-mutations"
 import { useDeleteAllFolders } from "@/lib/queries/use-folder-mutations"
+import { useDeleteAllCustomFeeds } from "@/lib/queries/use-custom-feed-mutations"
 import { notify } from "@/lib/notify"
 
 export function DangerZoneSettings() {
   const router = useRouter()
   const unsubscribeAll = useUnsubscribeAll()
   const deleteAllFolders = useDeleteAllFolders()
+  const deleteAllCustomFeeds = useDeleteAllCustomFeeds()
   const [showDeleteSubsConfirm, setShowDeleteSubsConfirm] = useState(false)
   const [showDeleteFoldersConfirm, setShowDeleteFoldersConfirm] = useState(false)
+  const [showDeleteCustomFeedsConfirm, setShowDeleteCustomFeedsConfirm] = useState(false)
   const [showDeleteAccountConfirm, setShowDeleteAccountConfirm] = useState(false)
   const [deleteConfirmText, setDeleteConfirmText] = useState("")
 
@@ -105,6 +108,41 @@ export function DangerZoneSettings() {
         )}
       </div>
 
+      <div className="mb-6">
+        <h3 className="mb-2 text-text-primary">delete all custom feeds</h3>
+        <p className="mb-2 text-text-dim">
+          remove all custom feeds (saved searches).
+        </p>
+        {showDeleteCustomFeedsConfirm ? (
+          <div className="flex items-center gap-2">
+            <span className="text-status-error">are you sure?</span>
+            <button
+              onClick={() => {
+                deleteAllCustomFeeds.mutate()
+                setShowDeleteCustomFeedsConfirm(false)
+              }}
+              disabled={deleteAllCustomFeeds.isPending}
+              className="border border-status-error px-3 py-1 text-status-error transition-colors hover:bg-status-error hover:text-background-primary disabled:opacity-50"
+            >
+              yes, delete all
+            </button>
+            <button
+              onClick={() => setShowDeleteCustomFeedsConfirm(false)}
+              className="px-2 py-1 text-text-secondary transition-colors hover:text-text-primary"
+            >
+              cancel
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowDeleteCustomFeedsConfirm(true)}
+            className="border border-border px-3 py-1 text-text-secondary transition-colors hover:border-status-error hover:text-status-error"
+          >
+            delete all custom feeds
+          </button>
+        )}
+      </div>
+
       <div>
         <h3 className="mb-2 text-text-primary">delete account</h3>
         <p className="mb-2 text-text-dim">