show total coins in header, add pagination on coin transaction (#24)

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## Version 0.1.12
+
+### Added
+
+- show total coins in header
+- pagination for coin transactions history
+
 ## Version 0.1.11
 
 ### Added

components/CoinsManager.tsx

@@ -18,6 +18,8 @@ export default function CoinsManager() {
   const [settings] = useAtom(settingsAtom)
   const DEFAULT_AMOUNT = '0'
   const [amount, setAmount] = useState(DEFAULT_AMOUNT)
+  const [pageSize, setPageSize] = useState(50)
+  const [currentPage, setCurrentPage] = useState(1)
 
   const handleAddRemoveCoins = async () => {
     const numAmount = Number(amount)
@@ -143,15 +145,32 @@ export default function CoinsManager() {
 
         <Card className="md:col-span-2">
           <CardHeader>
-            <CardTitle className="flex justify-between items-center">
+            <CardTitle>Transaction History</CardTitle>
-              <span>Transaction History</span>
-              <span className="text-sm font-normal text-muted-foreground">
-                Total: {transactions.length} transactions
-              </span>
-            </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
+              <div className="flex justify-between items-center mb-4">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">Show:</span>
+                  <select
+                    className="border rounded p-1"
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value))
+                      setCurrentPage(1) // Reset to first page when changing page size
+                    }}
+                  >
+                    <option value={50}>50</option>
+                    <option value={100}>100</option>
+                    <option value={500}>500</option>
+                  </select>
+                  <span className="text-sm text-muted-foreground">entries</span>
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Showing {Math.min((currentPage - 1) * pageSize + 1, transactions.length)} to {Math.min(currentPage * pageSize, transactions.length)} of {transactions.length} entries
+                </div>
+              </div>
+
               {transactions.length === 0 ? (
                 <EmptyState
                   icon={History}
@@ -159,7 +178,10 @@ export default function CoinsManager() {
                   description="Your transaction history will appear here once you start earning or spending coins"
                 />
               ) : (
-                transactions.map((transaction) => {
+                <>
+                  {transactions
+                    .slice((currentPage - 1) * pageSize, currentPage * pageSize)
+                    .map((transaction) => {
                       const getBadgeStyles = () => {
                         switch (transaction.type) {
                           case 'HABIT_COMPLETION':
@@ -213,7 +235,51 @@ export default function CoinsManager() {
                           </span>
                         </div>
                       )
-                })
+                    })}
+
+                  <div className="flex justify-center items-center gap-4 mt-6">
+                    <div className="flex items-center gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentPage(1)}
+                        disabled={currentPage === 1}
+                      >
+                        «
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+                        disabled={currentPage === 1}
+                      >
+                        ‹
+                      </Button>
+                      <div className="flex items-center gap-1 px-4 py-2 rounded-md bg-muted">
+                        <span className="text-sm font-medium">Page</span>
+                        <span className="text-sm font-bold">{currentPage}</span>
+                        <span className="text-sm font-medium">of</span>
+                        <span className="text-sm font-bold">{Math.ceil(transactions.length / pageSize)}</span>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentPage(prev => Math.min(Math.ceil(transactions.length / pageSize), prev + 1))}
+                        disabled={currentPage >= Math.ceil(transactions.length / pageSize)}
+                      >
+                        ›
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrentPage(Math.ceil(transactions.length / pageSize))}
+                        disabled={currentPage >= Math.ceil(transactions.length / pageSize)}
+                      >
+                        »
+                      </Button>
+                    </div>
+                  </div>
+                </>
               )}
             </div>
           </CardContent>

components/Header.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from 'react'
 import { useAtom } from 'jotai'
-import { settingsAtom } from '@/lib/atoms'
+import { settingsAtom, coinsAtom } from '@/lib/atoms'
-import { Bell, Menu, Settings, User, Info } from 'lucide-react'
+import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/Logo'
 import {
@@ -23,6 +23,7 @@ interface HeaderProps {
 export default function Header({ className }: HeaderProps) {
   const [showAbout, setShowAbout] = useState(false)
   const [settings] = useAtom(settingsAtom)
+  const [coins] = useAtom(coinsAtom)
   return (
     <>
       <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
@@ -32,6 +33,12 @@ export default function Header({ className }: HeaderProps) {
               <Logo />
             </Link>
             <div className="flex items-center gap-2">
+              <Link href="/coins" className="flex items-center gap-1 px-2 py-1 bg-amber-100 hover:bg-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800 rounded-full transition-colors">
+                <Coins className="text-amber-500 dark:text-amber-300" />
+                <span className="text-amber-600 dark:text-amber-400 font-medium">
+                  {coins.balance}
+                </span>
+              </Link>
               <Button variant="ghost" size="icon" aria-label="Notifications">
                 <Bell className="h-5 w-5" />
               </Button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",