From 244119bb05e78c7871765969a3381eab51cd807b Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Wed, 10 Sep 2025 17:29:50 +0530
Subject: [PATCH] chore: add clear database button

---
 src/components/Header.tsx         | 69 +++++++++++++++++++++++++++++++
 src/lib/database/LocalDatabase.ts | 38 +++++++++++++++++
 2 files changed, 107 insertions(+)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 1218f6e..d019d1c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -24,6 +24,7 @@ import {
   Menu,
   X,
   Clock,
+  Trash2,
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -32,6 +33,17 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import { useToast } from '@/components/ui/use-toast';
 import { useAppKitAccount, useDisconnect } from '@reown/appkit/react';
 import { WalletWizard } from '@/components/ui/wallet-wizard';
@@ -122,6 +134,23 @@ const Header = () => {
     });
   };
 
+  const handleClearDatabase = async () => {
+    try {
+      await localDatabase.clearAll();
+      toast({
+        title: 'Database Cleared',
+        description: 'All local data has been cleared successfully.',
+      });
+    } catch (error) {
+      console.error('Failed to clear database:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to clear local database. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   const getStatusIcon = () => {
     if (!isConnected) return <CircleSlash className="w-4 h-4" />;
 
@@ -261,6 +290,46 @@ const Header = () => {
 
                       <DropdownMenuSeparator className="bg-cyber-muted/30" />
 
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <DropdownMenuItem
+                            onSelect={(e) => e.preventDefault()}
+                            className="flex items-center space-x-2 text-orange-400 focus:text-orange-400"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                            <span>Clear Database</span>
+                          </DropdownMenuItem>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent className="bg-black/95 border-cyber-muted/30">
+                          <AlertDialogHeader>
+                            <AlertDialogTitle className="text-white">
+                              Clear Local Database
+                            </AlertDialogTitle>
+                            <AlertDialogDescription className="text-cyber-neutral">
+                              This will permanently delete all locally stored data including:
+                              <br />• Posts and comments
+                              <br />• User identities and preferences
+                              <br />• Bookmarks and votes
+                              <br />• UI state and settings
+                              <br />
+                              <br />
+                              <strong>This action cannot be undone.</strong>
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel className="bg-cyber-muted/20 border-cyber-muted/30 text-white hover:bg-cyber-muted/30">
+                              Cancel
+                            </AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={handleClearDatabase}
+                              className="bg-red-600 hover:bg-red-700 text-white"
+                            >
+                              Clear Database
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+
                       <DropdownMenuItem
                         onClick={handleDisconnect}
                         className="flex items-center space-x-2 text-red-400 focus:text-red-400"
diff --git a/src/lib/database/LocalDatabase.ts b/src/lib/database/LocalDatabase.ts
index d98288d..0f03772 100644
--- a/src/lib/database/LocalDatabase.ts
+++ b/src/lib/database/LocalDatabase.ts
@@ -115,6 +115,44 @@ export class LocalDatabase {
     this.cache.bookmarks = {};
   }
 
+  /**
+   * Clear all data from both in-memory cache and IndexedDB
+   */
+  public async clearAll(): Promise<void> {
+    // Clear in-memory cache
+    this.clear();
+    
+    // Clear all IndexedDB stores
+    if (!this.db) return;
+
+    const storeNames = [
+      STORE.CELLS,
+      STORE.POSTS,
+      STORE.COMMENTS,
+      STORE.VOTES,
+      STORE.MODERATIONS,
+      STORE.USER_IDENTITIES,
+      STORE.USER_AUTH,
+      STORE.DELEGATION,
+      STORE.UI_STATE,
+      STORE.META,
+      STORE.BOOKMARKS,
+    ];
+
+    const tx = this.db.transaction(storeNames, 'readwrite');
+    
+    await Promise.all(
+      storeNames.map(storeName => {
+        return new Promise<void>((resolve, reject) => {
+          const store = tx.objectStore(storeName);
+          const request = store.clear();
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => resolve();
+        });
+      })
+    );
+  }
+
   private storeMessage(message: OpchanMessage): void {
     switch (message.type) {
       case MessageType.CELL: