pacatui 0.1.5 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pacatui",
-  "version": "0.1.5",
+  "version": "0.1.11",
   "description": "A simple tui app for task, timer and invoicing for projects.",
   "module": "src/index.tsx",
   "type": "module",
@@ -66,8 +66,6 @@
     "@prisma/adapter-libsql": "^7.2.0",
     "@prisma/client": "^7.2.0",
     "better-sqlite3": "^12.6.0",
-    "paca": "^1.0.10",
-    "pacatui": "^0.1.1",
     "prisma": "^7.2.0",
     "react": "^19.2.3",
     "stripe": "^20.2.0"

package/src/App.tsx

@@ -19,6 +19,7 @@ import {
 	CustomerSelectModal,
 	EditTimeEntryModal,
 	CreateInvoiceModal,
+	ThemeSelectModal,
 } from "./components/index.ts";
 import { InvoicesView } from "./components/InvoicesView.tsx";
 import {
@@ -34,6 +35,8 @@ import {
 import { getOrCreateStripeCustomer, createDraftInvoice, listInvoices, clearInvoiceCache, type StripeInvoiceItem } from "./stripe.ts";
 import {
 	getEffectiveTimezone,
+	formatDateInTimezone,
+	getTheme,
 	type View,
 	type Panel,
 	type InputMode,
@@ -47,6 +50,7 @@ import {
 	type TimeEntry,
 	type TimeEntryWithProject,
 	type WeeklyTimeData,
+	type AllTimersWeekData,
 } from "./types.ts";
 
 function formatDuration(ms: number): string {
@@ -104,6 +108,7 @@ export function App() {
 		businessName: "",
 		stripeApiKey: "",
 		timezone: "auto",
+		theme: "catppuccin-mocha",
 	});
 
 	// Timesheet State
@@ -126,6 +131,13 @@ export function App() {
 		| null
 	>(null);
 
+	// All Timers State (for viewing all timers paged by week)
+	const [showAllTimers, setShowAllTimers] = useState(false);
+	const [allTimersWeekData, setAllTimersWeekData] = useState<AllTimersWeekData | null>(null);
+	const [allTimersSelectedIndex, setAllTimersSelectedIndex] = useState(0);
+	const [hasOlderWeeks, setHasOlderWeeks] = useState(false);
+	const [hasNewerWeeks, setHasNewerWeeks] = useState(false);
+
 	// Customer State
 	const [customerList, setCustomerList] = useState<Customer[]>([]);
 	const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);
@@ -293,6 +305,56 @@ export function App() {
 		}
 	}, [selectedTimesheetGroupIndex, selectedTimeEntryIndex]);
 
+	// Helper function to get the start of a week (Sunday)
+	const getWeekStart = useCallback((date: Date): Date => {
+		const d = new Date(date);
+		d.setHours(0, 0, 0, 0);
+		d.setDate(d.getDate() - d.getDay());
+		return d;
+	}, []);
+
+	// Load all timers for a specific week
+	const loadAllTimers = useCallback(async (weekStart?: Date) => {
+		const currentWeekStart = weekStart ?? getWeekStart(new Date());
+		const weekEnd = new Date(currentWeekStart);
+		weekEnd.setDate(weekEnd.getDate() + 7);
+
+		const entries = await timeEntries.getAllForWeek(currentWeekStart);
+
+		// Calculate total duration
+		let totalMs = 0;
+		for (const entry of entries) {
+			if (entry.endTime) {
+				totalMs += new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime();
+			}
+		}
+
+		setAllTimersWeekData({
+			weekStart: currentWeekStart,
+			weekEnd,
+			entries: entries as TimeEntryWithProject[],
+			totalMs,
+		});
+
+		// Check if there are older weeks
+		const oldestDate = await timeEntries.getOldestEntryDate();
+		if (oldestDate) {
+			const oldestWeekStart = getWeekStart(new Date(oldestDate));
+			setHasOlderWeeks(oldestWeekStart < currentWeekStart);
+		} else {
+			setHasOlderWeeks(false);
+		}
+
+		// Check if there are newer weeks (current week start is before today's week start)
+		const todayWeekStart = getWeekStart(new Date());
+		setHasNewerWeeks(currentWeekStart < todayWeekStart);
+
+		// Adjust selection if needed
+		if (allTimersSelectedIndex >= entries.length) {
+			setAllTimersSelectedIndex(Math.max(0, entries.length - 1));
+		}
+	}, [getWeekStart, allTimersSelectedIndex]);
+
 	// Initial load
 	useEffect(() => {
 		loadProjects();
@@ -317,9 +379,13 @@ export function App() {
 	// Reload timesheets when on timesheets view
 	useEffect(() => {
 		if (currentView === "timesheets") {
-			loadTimesheets();
+			if (showAllTimers) {
+				loadAllTimers(allTimersWeekData?.weekStart);
+			} else {
+				loadTimesheets();
+			}
 		}
-	}, [currentView]);
+	}, [currentView, showAllTimers]);
 
 	// Load invoices when on invoices view
 	useEffect(() => {
@@ -384,7 +450,11 @@ export function App() {
 
 		// Refresh timesheets if currently viewing them
 		if (currentView === "timesheets") {
-			loadTimesheets();
+			if (showAllTimers) {
+				loadAllTimers(allTimersWeekData?.weekStart);
+			} else {
+				loadTimesheets();
+			}
 		}
 	};
 
@@ -784,13 +854,16 @@ export function App() {
 				case 1: // Stripe API Key
 					setInputMode("edit_stripe_key");
 					break;
-				case 2: // Timezone
+				case 2: // Theme
+					setInputMode("select_theme");
+					break;
+				case 3: // Timezone
 					setInputMode("edit_timezone");
 					break;
-				case 3: // Export Database
+				case 4: // Export Database
 					handleExportDatabase();
 					break;
-				case 4: // Import Database
+				case 5: // Import Database
 					setConfirmMessage("Import will replace all data. Continue?");
 					setConfirmAction(() => () => handleImportDatabase());
 					break;
@@ -806,6 +879,84 @@ export function App() {
 	};
 
 	const handleTimesheetKeyboard = (key: { name: string }) => {
+		// Toggle between default timesheets and all timers view
+		if (key.name === "a") {
+			setShowAllTimers((prev) => {
+				const newValue = !prev;
+				if (newValue) {
+					showMessage("Showing all timers by week");
+					loadAllTimers();
+				} else {
+					showMessage("Showing billable timesheets");
+					loadTimesheets();
+				}
+				return newValue;
+			});
+			return;
+		}
+
+		// Handle all timers mode
+		if (showAllTimers) {
+			if (!allTimersWeekData) return;
+			const maxIndex = allTimersWeekData.entries.length - 1;
+
+			// Navigation within entries
+			if (key.name === "j" || key.name === "down") {
+				setAllTimersSelectedIndex((i) => Math.min(i + 1, maxIndex));
+				return;
+			}
+			if (key.name === "k" || key.name === "up") {
+				setAllTimersSelectedIndex((i) => Math.max(i - 1, 0));
+				return;
+			}
+
+			// Week navigation
+			if (key.name === "[" && hasOlderWeeks) {
+				const prevWeekStart = new Date(allTimersWeekData.weekStart);
+				prevWeekStart.setDate(prevWeekStart.getDate() - 7);
+				loadAllTimers(prevWeekStart);
+				setAllTimersSelectedIndex(0);
+				return;
+			}
+			if (key.name === "]" && hasNewerWeeks) {
+				const nextWeekStart = new Date(allTimersWeekData.weekStart);
+				nextWeekStart.setDate(nextWeekStart.getDate() + 7);
+				loadAllTimers(nextWeekStart);
+				setAllTimersSelectedIndex(0);
+				return;
+			}
+
+			// Edit entry
+			if (key.name === "e") {
+				const entry = allTimersWeekData.entries[allTimersSelectedIndex];
+				if (entry) {
+					setEditingTimeEntry(entry as typeof editingTimeEntry);
+					setInputMode("edit_time_entry");
+				}
+				return;
+			}
+
+			// Delete entry
+			if (key.name === "d") {
+				const entry = allTimersWeekData.entries[allTimersSelectedIndex];
+				if (entry) {
+					setConfirmMessage(
+						`Delete time entry from ${entry.project.name}?`,
+					);
+					setConfirmAction(() => () => {
+						timeEntries.delete(entry.id).then(() => {
+							showMessage("Time entry deleted");
+							loadAllTimers(allTimersWeekData.weekStart);
+						});
+					});
+				}
+				return;
+			}
+
+			return;
+		}
+
+		// Default timesheets mode
 		const currentGroup = timesheetGroups[selectedTimesheetGroupIndex];
 		if (!currentGroup) return;
 
@@ -1018,6 +1169,14 @@ export function App() {
 		showMessage(`Timezone set to ${value === "auto" ? "auto-detect" : value}`);
 	};
 
+	const handleSelectTheme = async (themeName: string) => {
+		await settings.set("theme", themeName);
+		setAppSettings((prev) => ({ ...prev, theme: themeName }));
+		const theme = getTheme(themeName);
+		setInputMode(null);
+		showMessage(`Theme: ${theme.displayName}`);
+	};
+
 	// Modal handlers
 	const handleCreateProject = async (name: string, rate: number | null) => {
 		await projects.create({ name, hourlyRate: rate });
@@ -1134,7 +1293,11 @@ export function App() {
 		showMessage("Time entry updated");
 		setInputMode(null);
 		setEditingTimeEntry(null);
-		loadTimesheets();
+		if (showAllTimers) {
+			loadAllTimers(allTimersWeekData?.weekStart);
+		} else {
+			loadTimesheets();
+		}
 	};
 
 	const handleCreateInvoice = async () => {
@@ -1232,6 +1395,7 @@ export function App() {
 	};
 
 	const selectedProject = projectList[selectedProjectIndex];
+	const theme = getTheme(appSettings.theme);
 
 	return (
 		<box
@@ -1239,6 +1403,7 @@ export function App() {
 				width: "100%",
 				height: "100%",
 				flexDirection: "column",
+				backgroundColor: theme.colors.bg,
 			}}
 		>
 			<Header
@@ -1246,6 +1411,7 @@ export function App() {
 				onViewChange={setCurrentView}
 				runningTimer={runningTimer}
 				onStopTimer={() => setInputMode("stop_timer")}
+				theme={getTheme(appSettings.theme)}
 			/>
 
 			<box style={{ flexGrow: 1, flexDirection: "row" }}>
@@ -1256,18 +1422,21 @@ export function App() {
 						weeklyTimeData={weeklyTimeData}
 						selectedIndex={selectedDashboardTaskIndex}
 						focused={true}
+						theme={getTheme(appSettings.theme)}
 					/>
 				)}
 
-				{currentView === "help" && <HelpView />}
+				{currentView === "help" && <HelpView theme={getTheme(appSettings.theme)} />}
 
 				{currentView === "settings" && (
 					<SettingsView
 						settings={appSettings}
 						selectedIndex={selectedSettingsIndex}
+						theme={getTheme(appSettings.theme)}
 						onEditBusinessName={() => setInputMode("edit_business_name")}
 						onEditStripeKey={() => setInputMode("edit_stripe_key")}
 						onEditTimezone={() => setInputMode("edit_timezone")}
+						onSelectTheme={() => setInputMode("select_theme")}
 						onExportDatabase={handleExportDatabase}
 						onImportDatabase={() => {
 							setConfirmMessage("Import will replace all data. Continue?");
@@ -1284,6 +1453,12 @@ export function App() {
 						selectedEntryIds={selectedTimeEntryIds}
 						focused={true}
 						timezone={getEffectiveTimezone(appSettings)}
+						theme={getTheme(appSettings.theme)}
+						showAllTimers={showAllTimers}
+						allTimersWeekData={allTimersWeekData}
+						allTimersSelectedIndex={allTimersSelectedIndex}
+						hasOlderWeeks={hasOlderWeeks}
+						hasNewerWeeks={hasNewerWeeks}
 					/>
 				)}
 
@@ -1298,6 +1473,7 @@ export function App() {
 						currentPage={invoicesPage}
 						hasMore={invoicesHasMore}
 						hasPrevious={invoicesCursors.length > 0}
+						theme={getTheme(appSettings.theme)}
 					/>
 				)}
 
@@ -1309,6 +1485,7 @@ export function App() {
 								selectedIndex={selectedProjectIndex}
 								focused={activePanel === "projects"}
 								showArchived={showArchived}
+								theme={getTheme(appSettings.theme)}
 							/>
 						</box>
 						<box style={{ width: "60%", flexDirection: "column" }}>
@@ -1317,6 +1494,7 @@ export function App() {
 								selectedIndex={selectedTaskIndex}
 								focused={activePanel === "tasks"}
 								projectName={selectedProject?.name}
+								theme={getTheme(appSettings.theme)}
 							/>
 						</box>
 					</>
@@ -1329,6 +1507,22 @@ export function App() {
 				timerRunning={!!runningTimer}
 				currentView={currentView}
 				activePanel={activePanel}
+				theme={getTheme(appSettings.theme)}
+				showAllTimers={currentView === "timesheets" ? showAllTimers : undefined}
+				allTimersWeekRange={
+					currentView === "timesheets" && showAllTimers && allTimersWeekData
+						? (() => {
+								const tz = getEffectiveTimezone(appSettings);
+								const startStr = formatDateInTimezone(allTimersWeekData.weekStart, tz);
+								const endDate = new Date(allTimersWeekData.weekEnd);
+								endDate.setDate(endDate.getDate() - 1);
+								const endStr = formatDateInTimezone(endDate, tz);
+								return `${startStr} - ${endStr}`;
+						  })()
+						: undefined
+				}
+				hasOlderWeeks={currentView === "timesheets" && showAllTimers ? hasOlderWeeks : undefined}
+				hasNewerWeeks={currentView === "timesheets" && showAllTimers ? hasNewerWeeks : undefined}
 			/>
 
 			{/* Modals */}
@@ -1337,6 +1531,7 @@ export function App() {
 					mode="create"
 					onSubmit={handleCreateProject}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1347,6 +1542,7 @@ export function App() {
 					initialRate={selectedProject.hourlyRate}
 					onSubmit={handleEditProject}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1357,6 +1553,7 @@ export function App() {
 					placeholder="Task title..."
 					onSubmit={handleCreateTask}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1368,6 +1565,7 @@ export function App() {
 					placeholder="Task title..."
 					onSubmit={handleEditTask}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1380,6 +1578,7 @@ export function App() {
 						placeholder="Task title..."
 						onSubmit={handleEditDashboardTask}
 						onCancel={() => setInputMode(null)}
+						theme={theme}
 					/>
 				)}
 
@@ -1391,6 +1590,7 @@ export function App() {
 					placeholder="Enter business name..."
 					onSubmit={handleUpdateBusinessName}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1402,6 +1602,7 @@ export function App() {
 					placeholder="sk_live_..."
 					onSubmit={handleUpdateStripeKey}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1413,6 +1614,15 @@ export function App() {
 					placeholder="America/New_York, Europe/London, auto..."
 					onSubmit={handleUpdateTimezone}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
+				/>
+			)}
+
+			{inputMode === "select_theme" && (
+				<ThemeSelectModal
+					currentTheme={appSettings.theme}
+					onSelect={handleSelectTheme}
+					onCancel={() => setInputMode(null)}
 				/>
 			)}
 
@@ -1421,6 +1631,7 @@ export function App() {
 					projects={projectList.filter((p) => !p.archived)}
 					onSelect={handleStartTimer}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1431,6 +1642,7 @@ export function App() {
 					duration={formatDuration(timerElapsed)}
 					onSubmit={handleStopTimer}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1446,6 +1658,7 @@ export function App() {
 						setInputMode("edit_customer");
 					}}
 					onCancel={() => setInputMode(null)}
+					theme={theme}
 				/>
 			)}
 
@@ -1454,6 +1667,7 @@ export function App() {
 					mode="create"
 					onSubmit={handleCreateCustomer}
 					onCancel={() => setInputMode("select_customer")}
+					theme={theme}
 				/>
 			)}
 
@@ -1468,6 +1682,7 @@ export function App() {
 						setEditingCustomer(null);
 						setInputMode("select_customer");
 					}}
+					theme={theme}
 				/>
 			)}
 
@@ -1480,6 +1695,7 @@ export function App() {
 						setInputMode(null);
 						setEditingTimeEntry(null);
 					}}
+					theme={theme}
 				/>
 			)}
 
@@ -1511,6 +1727,7 @@ export function App() {
 						hasStripeKey={!!appSettings.stripeApiKey}
 						onConfirm={handleCreateInvoice}
 						onCancel={() => setInputMode(null)}
+						theme={theme}
 					/>
 				)}
 
@@ -1527,6 +1744,7 @@ export function App() {
 						setConfirmAction(null);
 						setConfirmMessage("");
 					}}
+					theme={theme}
 				/>
 			)}
 		</box>

package/src/components/CreateInvoiceModal.tsx

@@ -1,7 +1,9 @@
 import { useKeyboard } from "@opentui/react";
 import {
+	CATPPUCCIN_MOCHA,
 	type Customer,
 	type TimeEntryWithProject,
+	type Theme,
 	formatDateInTimezone,
 } from "../types.ts";
 import Modal from "./Modal.tsx";
@@ -16,6 +18,7 @@ interface CreateInvoiceModalProps {
 	hasStripeKey: boolean;
 	onConfirm: () => void;
 	onCancel: () => void;
+	theme?: Theme;
 }
 
 function formatDuration(ms: number): string {
@@ -44,7 +47,10 @@ export function CreateInvoiceModal({
 	hasStripeKey,
 	onConfirm,
 	onCancel,
+	theme = CATPPUCCIN_MOCHA,
 }: CreateInvoiceModalProps) {
+	const colors = theme.colors;
+
 	useKeyboard((key) => {
 		if (key.name === "escape") {
 			onCancel();
@@ -97,20 +103,20 @@ export function CreateInvoiceModal({
 			: baseHeight + lineItemsHeight;
 
 	return (
-		<Modal title="Create Stripe Invoice" height={Math.max(modalHeight, 20)}>
+		<Modal title="Create Stripe Invoice" height={Math.max(modalHeight, 20)} theme={theme}>
 			{/* Customer info */}
 			{customer && (
 				<box style={{ flexDirection: "row", marginTop: 1, gap: 1 }}>
-					<text fg="#8b5cf6" attributes="bold">
+					<text fg={colors.accentSecondary} attributes="bold">
 						{customer.name}
 					</text>
-					<text fg="#64748b">{customer.email}</text>
+					<text fg={colors.textMuted}>{customer.email}</text>
 				</box>
 			)}
 
 			{!customer && (
 				<box style={{ marginTop: 1 }}>
-					<text fg="#ef4444">
+					<text fg={colors.error}>
 						This project has no customer linked. Please link a customer first
 						using the 'c' key in the Projects view.
 					</text>
@@ -119,7 +125,7 @@ export function CreateInvoiceModal({
 
 			{!hasStripeKey && customer && (
 				<box style={{ marginTop: 1 }}>
-					<text fg="#ef4444">
+					<text fg={colors.error}>
 						No Stripe API key configured. Add one in Settings to create
 						invoices.
 					</text>
@@ -129,22 +135,22 @@ export function CreateInvoiceModal({
 			{customer && hasStripeKey && (
 				<>
 					{/* Line items header */}
-					<text fg="#334155" style={{ marginTop: 1 }}>
+					<text fg={colors.borderSubtle} style={{ marginTop: 1 }}>
 						{"─".repeat(56)}
 					</text>
 					<box style={{ flexDirection: "row", gap: 1 }}>
 						<box style={{ width: 8 }}>
-							<text fg="#94a3b8">Date</text>
+							<text fg={colors.accentSecondary}>Date</text>
 						</box>
 						<box style={{ flexGrow: 1 }}>
-							<text fg="#94a3b8">Description</text>
+							<text fg={colors.accentSecondary}>Description</text>
 						</box>
 						<box style={{ width: 8 }}>
-							<text fg="#94a3b8">Hours</text>
+							<text fg={colors.accentSecondary}>Hours</text>
 						</box>
 						{hourlyRate != null && (
 							<box style={{ width: 10, alignItems: "flex-end" }}>
-								<text fg="#94a3b8">Amount</text>
+								<text fg={colors.accentSecondary}>Amount</text>
 							</box>
 						)}
 					</box>
@@ -154,21 +160,21 @@ export function CreateInvoiceModal({
 						{lineItems.map((item, idx) => (
 							<box key={idx} style={{ flexDirection: "row", gap: 1 }}>
 								<box style={{ width: 8 }}>
-									<text fg="#64748b">{item.date}</text>
+									<text fg={colors.textMuted}>{item.date}</text>
 								</box>
 								<box style={{ flexGrow: 1 }}>
-									<text fg="#e2e8f0">
+									<text fg={colors.textPrimary}>
 										{item.description.length > 30
 											? `${item.description.slice(0, 27)}...`
 											: item.description}
 									</text>
 								</box>
 								<box style={{ width: 8 }}>
-									<text fg="#94a3b8">{item.hours}</text>
+									<text fg={colors.accentSecondary}>{item.hours}</text>
 								</box>
 								{hourlyRate != null && (
 									<box style={{ width: 10, alignItems: "flex-end" }}>
-										<text fg="#10b981">${item.amount.toFixed(2)}</text>
+										<text fg={colors.success}>${item.amount.toFixed(2)}</text>
 									</box>
 								)}
 							</box>
@@ -176,26 +182,26 @@ export function CreateInvoiceModal({
 					</scrollbox>
 
 					{/* Totals */}
-					<text fg="#334155">{"─".repeat(56)}</text>
+					<text fg={colors.borderSubtle}>{"─".repeat(56)}</text>
 					<box style={{ flexDirection: "row", gap: 1 }}>
 						<box style={{ width: 8 }}>
-							<text fg="#ffffff" attributes="bold">
+							<text fg={colors.textPrimary} attributes="bold">
 								Total
 							</text>
 						</box>
 						<box style={{ flexGrow: 1 }}>
-							<text fg="#94a3b8">
+							<text fg={colors.accentSecondary}>
 								{entries.length} {entries.length === 1 ? "entry" : "entries"}
 							</text>
 						</box>
 						<box style={{ width: 8 }}>
-							<text fg="#ffffff" attributes="bold">
+							<text fg={colors.textPrimary} attributes="bold">
 								{totalHours.toFixed(2)}
 							</text>
 						</box>
 						{hourlyRate != null && (
 							<box style={{ width: 10, alignItems: "flex-end" }}>
-								<text fg="#10b981" attributes="bold">
+								<text fg={colors.success} attributes="bold">
 									${totalAmount.toFixed(2)}
 								</text>
 							</box>
@@ -204,7 +210,7 @@ export function CreateInvoiceModal({
 
 					{hourlyRate != null && (
 						<box style={{ marginTop: 1 }}>
-							<text fg="#64748b">Rate: ${hourlyRate.toFixed(2)}/hr</text>
+							<text fg={colors.textMuted}>Rate: ${hourlyRate.toFixed(2)}/hr</text>
 						</box>
 					)}
 				</>
@@ -212,7 +218,7 @@ export function CreateInvoiceModal({
 
 			<box style={{ flexGrow: 1 }} />
 
-			<text fg="#64748b">
+			<text fg={colors.textMuted}>
 				{customer && hasStripeKey
 					? "Enter to create draft invoice, Esc to cancel"
 					: "Esc to close"}