Fix calendar overlay bug and add Explore tab state persistence

- Fixed calendar widget appearing over modification date entries in History card
  (was using Calendar component instead of CalendarIcon)
- Explore page tabs now preserve state when switching (filters, sort, columns, page)
- Added reset button to restore column defaults on data tabs

Author: gtunes-dev

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+- **Explore page**: Tab state is now preserved when switching between tabs (filters, sort, column visibility/order, pagination)
+  - Added reset button to restore columns to default settings
+
+### Fixed
+- **Item detail sheet**: Fixed calendar widget appearing over modification date entries in History card
+
 ## [v0.2.12] - 2025-11-17
 
 ### Changed

frontend/src/components/shared/ItemDetailSheet.tsx

@@ -824,7 +824,7 @@ export function ItemDetailSheet({
                                         {change.meta_change && change.mod_date_old !== change.mod_date_new && (
                                           <div className="bg-muted/50 p-2 rounded">
                                             <p className="font-medium mb-1 flex items-center gap-1">
-                                              <Calendar className="h-3 w-3" />
+                                              <CalendarIcon className="h-3 w-3" />
                                               Modification Date
                                             </p>
                                             <div className="flex items-center gap-2">

frontend/src/pages/explore/DataExplorerView.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { GripVertical, Plus, X } from 'lucide-react'
+import { GripVertical, ListRestart, Plus, X } from 'lucide-react'
 import { fetchMetadata, countQuery, fetchQuery } from '@/lib/api'
 import { FilterModal } from './FilterModal'
 import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { formatDateFull } from '@/lib/dateUtils'
 import type {
   ColumnState,
@@ -30,6 +31,7 @@ export function DataExplorerView({ domain }: DataExplorerViewProps) {
   const [isDraggingDown, setIsDraggingDown] = useState(false)
   const [filterModalColumn, setFilterModalColumn] = useState<ColumnState | null>(null)
   const lastFilterKeyRef = useRef<string>('')
+  const originalMetadataRef = useRef<ColumnState[]>([])
 
   // Load column metadata on mount
   useEffect(() => {
@@ -46,6 +48,8 @@ export function DataExplorerView({ domain }: DataExplorerViewProps) {
           position: index,
         }))
 
+        // Store a deep copy for reset functionality
+        originalMetadataRef.current = JSON.parse(JSON.stringify(columnState))
         setColumns(columnState)
         setError(null)
       } catch (err) {
@@ -193,6 +197,15 @@ export function DataExplorerView({ domain }: DataExplorerViewProps) {
     setCurrentPage(1)
   }
 
+  const handleResetColumns = () => {
+    if (originalMetadataRef.current.length > 0) {
+      // Create a deep copy to reset all column state
+      setColumns(JSON.parse(JSON.stringify(originalMetadataRef.current)))
+      setFilters([])
+      setCurrentPage(1)
+    }
+  }
+
   if (loading && columns.length === 0) {
     return <div className="p-4">Loading metadata...</div>
   }
@@ -209,7 +222,17 @@ export function DataExplorerView({ domain }: DataExplorerViewProps) {
           <table className="w-full text-sm">
             <thead className="sticky top-0 bg-muted">
               <tr className="border-b border-border">
-                <th className="text-center font-medium py-2 px-2 w-8"></th>
+                <th className="text-center font-medium py-2 px-2 w-8">
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    onClick={handleResetColumns}
+                    className="w-6 h-6"
+                    title="Reset columns"
+                  >
+                    <ListRestart className="w-4 h-4 text-blue-500" />
+                  </Button>
+                </th>
                 <th className="text-center font-medium py-2 px-2 w-8"></th>
                 <th className="text-center font-medium py-2 uppercase text-xs tracking-wide">COLUMN</th>
                 <th className="text-center font-medium py-2 w-16 uppercase text-xs tracking-wide">SORT</th>

frontend/src/pages/explore/ExplorePage.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { RootsView } from './RootsView'
 import { ScansView } from './ScansView'
@@ -67,29 +67,30 @@ export function ExplorePage() {
           </CardHeader>
 
           <CardContent className="flex-1 flex flex-col px-6 pb-6 pt-4">
-            <TabsContent value="roots" className="flex-1 mt-0">
+            {/* Keep all tabs mounted for instant switching - use CSS hiding */}
+            <div className={`flex-1 flex flex-col ${currentTab === 'roots' ? '' : 'hidden'}`}>
               <RootsView />
-            </TabsContent>
+            </div>
 
-            <TabsContent value="scans" className="flex-1 mt-0">
+            <div className={`flex-1 flex flex-col ${currentTab === 'scans' ? '' : 'hidden'}`}>
               <ScansView />
-            </TabsContent>
+            </div>
 
-            <TabsContent value="items" className="flex-1 mt-0">
+            <div className={`flex-1 flex flex-col ${currentTab === 'items' ? '' : 'hidden'}`}>
               <ItemsView />
-            </TabsContent>
+            </div>
 
-            <TabsContent value="changes" className="flex-1 mt-0">
+            <div className={`flex-1 flex flex-col ${currentTab === 'changes' ? '' : 'hidden'}`}>
               <ChangesView />
-            </TabsContent>
+            </div>
 
-            <TabsContent value="alerts" className="flex-1 mt-0">
+            <div className={`flex-1 flex flex-col ${currentTab === 'alerts' ? '' : 'hidden'}`}>
               <AlertsView />
-            </TabsContent>
+            </div>
 
-            <TabsContent value="query" className="flex-1 mt-0">
+            <div className={`flex-1 flex flex-col ${currentTab === 'query' ? '' : 'hidden'}`}>
               <QueryView />
-            </TabsContent>
+            </div>
           </CardContent>
         </Tabs>
       </Card>