From ee1ea39b01170892386f2a11ea65370184cd50b5 Mon Sep 17 00:00:00 2001
From: diogo464 <diogo464@d464.sh>
Date: Tue, 12 Aug 2025 10:46:56 +0100
Subject: Add pagination and improve history table layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added pagination with 100 entries per page
- Implemented pagination controls with Previous/Next buttons and page numbers
- Added smart pagination display showing current page, first/last pages, and nearby pages with ellipsis
- Removed redundant Action icon column from history table
- Reorganized table columns: Type, File/Directory Name, Time, User, Size
- Added entry count display showing current range and total entries
- Pagination only shows when there are multiple pages

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/history-view.tsx | 93 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 86 insertions(+), 7 deletions(-)

diff --git a/frontend/history-view.tsx b/frontend/history-view.tsx
index 2faa1c0..12af1ea 100644
--- a/frontend/history-view.tsx
+++ b/frontend/history-view.tsx
@@ -3,7 +3,8 @@
 import { useState, useEffect } from "react"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
-import { FileText, Folder, Trash2, Edit, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { FileText, Folder, Trash2, Edit, Plus, ChevronLeft, ChevronRight } from "lucide-react"
 import { DriveLogEntry } from "@/lib/drive_types"
 import { formatFileSize } from "@/lib/utils"
 
@@ -62,10 +63,13 @@ function getActionBadge(action: string) {
   }
 }
 
+const ENTRIES_PER_PAGE = 100
+
 export default function HistoryView() {
   const [logEntries, setLogEntries] = useState<DriveLogEntry[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
 
   useEffect(() => {
     async function fetchLogEntries() {
@@ -88,6 +92,24 @@ export default function HistoryView() {
     fetchLogEntries()
   }, [])
 
+  // Calculate pagination values
+  const totalPages = Math.ceil(logEntries.length / ENTRIES_PER_PAGE)
+  const startIndex = (currentPage - 1) * ENTRIES_PER_PAGE
+  const endIndex = startIndex + ENTRIES_PER_PAGE
+  const currentEntries = logEntries.slice(startIndex, endIndex)
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  const handlePreviousPage = () => {
+    setCurrentPage(prev => Math.max(1, prev - 1))
+  }
+
+  const handleNextPage = () => {
+    setCurrentPage(prev => Math.min(totalPages, prev + 1))
+  }
+
   if (loading) {
     return (
       <div className="space-y-6">
@@ -136,27 +158,25 @@ export default function HistoryView() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead className="w-[50px]">Action</TableHead>
               <TableHead>Type</TableHead>
               <TableHead>File/Directory Name</TableHead>
+              <TableHead>Time</TableHead>
               <TableHead>User</TableHead>
-              <TableHead>Timestamp</TableHead>
               <TableHead>Size</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
-            {logEntries.map((entry) => (
+            {currentEntries.map((entry) => (
               <TableRow key={`${entry.log_id}`} className="hover:bg-muted/50">
-                <TableCell>{getActionIcon(entry.action)}</TableCell>
                 <TableCell>{getActionBadge(entry.action)}</TableCell>
                 <TableCell className="font-medium">
                   <span className="break-words">{entry.path}</span>
                 </TableCell>
                 <TableCell>
-                  <span className="text-sm font-mono">{entry.email}</span>
+                  <span className="text-sm">{formatTimestamp(entry.timestamp)}</span>
                 </TableCell>
                 <TableCell>
-                  <span className="text-sm">{formatTimestamp(entry.timestamp)}</span>
+                  <span className="text-sm font-mono">{entry.email}</span>
                 </TableCell>
                 <TableCell>
                   <span className="text-sm text-muted-foreground">
@@ -168,6 +188,65 @@ export default function HistoryView() {
           </TableBody>
         </Table>
       </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <div className="text-sm text-muted-foreground">
+            Showing {startIndex + 1} to {Math.min(endIndex, logEntries.length)} of {logEntries.length} entries
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePreviousPage}
+              disabled={currentPage === 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Previous
+            </Button>
+            
+            <div className="flex items-center gap-1">
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter(page => {
+                  // Show first page, last page, current page, and pages around current
+                  return page === 1 || 
+                         page === totalPages || 
+                         Math.abs(page - currentPage) <= 2
+                })
+                .map((page, index, filteredPages) => {
+                  // Add ellipsis where there are gaps
+                  const showEllipsisBefore = index > 0 && page - filteredPages[index - 1] > 1
+                  return (
+                    <div key={page} className="flex items-center gap-1">
+                      {showEllipsisBefore && (
+                        <span className="text-muted-foreground px-2">...</span>
+                      )}
+                      <Button
+                        variant={currentPage === page ? "default" : "outline"}
+                        size="sm"
+                        onClick={() => handlePageChange(page)}
+                        className="w-8 h-8 p-0"
+                      >
+                        {page}
+                      </Button>
+                    </div>
+                  )
+                })}
+            </div>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNextPage}
+              disabled={currentPage === totalPages}
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
-- 
cgit