pacatui 0.1.14 → 0.1.16

package/README.md

@@ -16,6 +16,7 @@ A simple TUI app for task, timer and invoicing for projects.
 - **Stripe Invoicing** - Create draft invoices directly from time entries
 - **Invoice Management** - View and manage all your Stripe invoices
 - **Dashboard** - Overview of projects, tasks, and time stats
+- **Menu Bar** - Native macOS menu bar companion for quick timer control
 - **Offline-first** - All data stored locally in SQLite
 - **Vim-style Navigation** - Keyboard-driven interface
 
@@ -120,6 +121,7 @@ Access settings by pressing `5`:
 - **Business Name** - Your business name for invoices
 - **Stripe API Key** - Enable invoicing features
 - **Timezone** - Set display timezone (or auto-detect)
+- **Menu Bar** - Toggle the macOS menu bar companion
 - **Export/Import** - Backup and restore your data
 
 ### Data Location
@@ -127,6 +129,27 @@ Access settings by pressing `5`:
 - Database: `~/.paca/paca.db`
 - Backups: `~/.paca/backups/`
 
+## Menu Bar (macOS)
+
+Paca includes a native macOS menu bar companion that shows your running timer and lets you start/stop timers without opening the TUI.
+
+### Enable via Settings
+
+1. Press `5` to open Settings
+2. Select **Menu Bar** and press `Enter` to toggle it on
+
+### Enable via CLI
+
+```bash
+paca menubar enable    # Compile & launch
+paca menubar disable   # Stop & remove
+paca menubar status    # Show current status
+```
+
+The first time you enable it, Paca compiles a small native Swift helper binary (requires Xcode Command Line Tools). The paca mascot icon appears in your menu bar with live timer status.
+
+**Requires**: Xcode Command Line Tools (`xcode-select --install`)
+
 ## Stripe Integration
 
 To enable invoicing:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pacatui",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "A simple tui app for task, timer and invoicing for projects.",
   "module": "src/index.tsx",
   "type": "module",

package/src/App.tsx

@@ -20,6 +20,7 @@ import {
 	EditTimeEntryModal,
 	CreateInvoiceModal,
 	ThemeSelectModal,
+	DatabaseSelectModal,
 } from "./components/index.ts";
 import { InvoicesView } from "./components/InvoicesView.tsx";
 import {
@@ -31,7 +32,16 @@ import {
 	database,
 	customers,
 	invoices,
+	switchDatabase,
 } from "./db.ts";
+import {
+	getActiveDbFilename,
+	setActiveDbFilename,
+	getActiveDbPath,
+	listDatabases,
+	sanitizeDbName,
+	getPacaDir,
+} from "./db-path.ts";
 import { getOrCreateStripeCustomer, createDraftInvoice, listInvoices, clearInvoiceCache, type StripeInvoiceItem } from "./stripe.ts";
 import {
 	getEffectiveTimezone,
@@ -109,6 +119,7 @@ export function App() {
 		stripeApiKey: "",
 		timezone: "auto",
 		theme: "catppuccin-mocha",
+		menuBar: "disabled",
 	});
 
 	// Timesheet State
@@ -151,6 +162,9 @@ export function App() {
 	const [invoicesHasMore, setInvoicesHasMore] = useState(false);
 	const [invoicesCursors, setInvoicesCursors] = useState<string[]>([]); // Stack of cursors for pagination
 
+	// Database State
+	const [currentDbFilename, setCurrentDbFilename] = useState(getActiveDbFilename());
+
 	// Modal State
 	const [inputMode, setInputMode] = useState<InputMode | null>(null);
 	const [statusMessage, setStatusMessage] =
@@ -364,6 +378,30 @@ export function App() {
 		loadCustomers();
 	}, []);
 
+	// Poll for external timer changes (e.g. from menu bar)
+	// Uses bun:sqlite directly to bypass Prisma's connection cache
+	useEffect(() => {
+		const poll = setInterval(async () => {
+			const { getRunningTimer: getRunningTimerLite } = await import("./menubar/db-lite.ts");
+			const row = getRunningTimerLite();
+			if (row) {
+				setRunningTimer({
+					id: row.id,
+					startTime: new Date(row.startTime.includes("T") ? row.startTime : row.startTime + "Z"),
+					project: {
+						id: row.projectId,
+						name: row.projectName,
+						color: row.projectColor,
+						hourlyRate: row.projectHourlyRate,
+					},
+				});
+			} else {
+				setRunningTimer(null);
+			}
+		}, 5000);
+		return () => clearInterval(poll);
+	}, []);
+
 	// Reload tasks when project selection changes
 	useEffect(() => {
 		loadTasks();
@@ -473,14 +511,19 @@ export function App() {
 			return;
 		}
 
-		// Handle input mode escape (except select_timer_project which has its own handler)
-		if (inputMode && inputMode !== "select_timer_project") {
+		// Handle input mode escape (except modals that handle their own escape)
+		if (inputMode && inputMode !== "select_timer_project" && inputMode !== "select_database" && inputMode !== "create_database_name") {
 			if (key.name === "escape") {
 				setInputMode(null);
 			}
 			return;
 		}
 
+		// Handle select_database and create_database_name modals (they have their own handlers)
+		if (inputMode === "select_database" || inputMode === "create_database_name") {
+			return;
+		}
+
 		// Handle select timer project modal
 		if (inputMode === "select_timer_project") {
 			// The modal has its own keyboard handler
@@ -846,6 +889,7 @@ export function App() {
 		}
 
 		// Select/activate setting
+		// Order matches: Business (0: businessName, 1: stripeApiKey) + App (2: database, 3: theme, 4: timezone, 5: menuBar, 6: export, 7: import)
 		if (key.name === "return") {
 			switch (selectedSettingsIndex) {
 				case 0: // Business Name
@@ -854,16 +898,22 @@ export function App() {
 				case 1: // Stripe API Key
 					setInputMode("edit_stripe_key");
 					break;
-				case 2: // Theme
+				case 2: // Database
+					setInputMode("select_database");
+					break;
+				case 3: // Theme
 					setInputMode("select_theme");
 					break;
-				case 3: // Timezone
+				case 4: // Timezone
 					setInputMode("edit_timezone");
 					break;
-				case 4: // Export Database
+				case 5: // Menu Bar
+					handleToggleMenuBar();
+					break;
+				case 6: // Export Database
 					handleExportDatabase();
 					break;
-				case 5: // Import Database
+				case 7: // Import Database
 					setConfirmMessage("Import will replace all data. Continue?");
 					setConfirmAction(() => () => handleImportDatabase());
 					break;
@@ -1132,7 +1182,8 @@ export function App() {
 		}
 
 		const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
-		const exportPath = `${backupDir}/paca-backup-${timestamp}.db`;
+		const dbName = currentDbFilename.replace(/\.db$/, "");
+		const exportPath = `${backupDir}/${dbName}-backup-${timestamp}.db`;
 		try {
 			await database.exportToFile(exportPath);
 			showMessage(`Exported to ${exportPath}`);
@@ -1177,6 +1228,117 @@ export function App() {
 		showMessage(`Theme: ${theme.displayName}`);
 	};
 
+	const handleToggleMenuBar = async () => {
+		const newValue = appSettings.menuBar === "enabled" ? "disabled" : "enabled";
+		await settings.set("menuBar", newValue);
+		setAppSettings((prev) => ({ ...prev, menuBar: newValue }));
+
+		const { enableMenuBar, disableMenuBar } = await import("./menubar/index.ts");
+		const msg = newValue === "enabled"
+			? await enableMenuBar()
+			: await disableMenuBar();
+		showMessage(msg);
+	};
+
+	// Database handlers
+	const handleSwitchDatabase = async (filename: string) => {
+		if (filename === currentDbFilename) {
+			setInputMode(null);
+			return;
+		}
+
+		try {
+			const { join } = await import("path");
+			const { existsSync } = await import("fs");
+			const dbPath = join(getPacaDir(), filename);
+
+			// Run migration if database file doesn't exist yet
+			if (!existsSync(dbPath)) {
+				const { execSync } = await import("child_process");
+				const { dirname } = await import("path");
+				const projectDir = dirname(dirname(import.meta.path));
+				execSync(`cd "${projectDir}" && bunx prisma migrate deploy`, {
+					stdio: "pipe",
+					env: {
+						...process.env,
+						DATABASE_URL: `file:${dbPath}`,
+					},
+				});
+			}
+
+			// Disable menu bar before switching (it points at the old db)
+			if (appSettings.menuBar === "enabled") {
+				const { disableMenuBar } = await import("./menubar/index.ts");
+				await disableMenuBar();
+				await settings.set("menuBar", "disabled");
+				setAppSettings((prev) => ({ ...prev, menuBar: "disabled" }));
+			}
+
+			// Write .active file
+			setActiveDbFilename(filename);
+
+			// Swap PrismaClient
+			await switchDatabase(dbPath);
+
+			// Update state
+			setCurrentDbFilename(filename);
+
+			// Reload all app state
+			const [settingsData, projectData, dashboardData, recentData, weeklyData, runningData, customerData] = await Promise.all([
+				settings.getAppSettings(),
+				projects.getAll(false),
+				stats.getDashboardStats(),
+				stats.getRecentActivity(10),
+				stats.getWeeklyTimeStats(6),
+				timeEntries.getRunning(),
+				customers.getAll(),
+			]);
+
+			setAppSettings(settingsData);
+			setProjectList(projectData);
+			setDashboardStats(dashboardData);
+			setRecentTasks(recentData as (Task & { project: { name: string; color: string } })[]);
+			setWeeklyTimeData(weeklyData);
+			setCustomerList(customerData);
+
+			if (runningData) {
+				setRunningTimer({
+					id: runningData.id,
+					startTime: runningData.startTime,
+					project: runningData.project,
+				});
+			} else {
+				setRunningTimer(null);
+			}
+
+			// Reset selection indices
+			setSelectedProjectIndex(0);
+			setSelectedTaskIndex(0);
+			setSelectedDashboardTaskIndex(0);
+			setSelectedSettingsIndex(0);
+
+			setInputMode(null);
+			showMessage(`Switched to database: ${filename.replace(/\.db$/, "")}`);
+		} catch (error) {
+			showMessage(`Failed to switch database: ${error}`);
+		}
+	};
+
+	const handleCreateDatabase = async (name: string) => {
+		const filename = sanitizeDbName(name);
+		const { join } = await import("path");
+		const { existsSync } = await import("fs");
+		const dbPath = join(getPacaDir(), filename);
+
+		if (existsSync(dbPath)) {
+			showMessage(`Database "${filename.replace(/\.db$/, "")}" already exists`);
+			setInputMode("select_database");
+			return;
+		}
+
+		await handleSwitchDatabase(filename);
+	};
+
 	// Modal handlers
 	const handleCreateProject = async (name: string, rate: number | null) => {
 		await projects.create({ name, hourlyRate: rate });
@@ -1433,10 +1595,13 @@ export function App() {
 						settings={appSettings}
 						selectedIndex={selectedSettingsIndex}
 						theme={getTheme(appSettings.theme)}
+						currentDbFilename={currentDbFilename}
+						onSelectDatabase={() => setInputMode("select_database")}
 						onEditBusinessName={() => setInputMode("edit_business_name")}
 						onEditStripeKey={() => setInputMode("edit_stripe_key")}
 						onEditTimezone={() => setInputMode("edit_timezone")}
 						onSelectTheme={() => setInputMode("select_theme")}
+						onToggleMenuBar={handleToggleMenuBar}
 						onExportDatabase={handleExportDatabase}
 						onImportDatabase={() => {
 							setConfirmMessage("Import will replace all data. Continue?");
@@ -1626,6 +1791,28 @@ export function App() {
 				/>
 			)}
 
+			{inputMode === "select_database" && (
+				<DatabaseSelectModal
+					databases={listDatabases()}
+					currentDatabase={currentDbFilename}
+					onSelect={handleSwitchDatabase}
+					onCreateNew={() => setInputMode("create_database_name")}
+					onCancel={() => setInputMode(null)}
+					theme={theme}
+				/>
+			)}
+
+			{inputMode === "create_database_name" && (
+				<InputModal
+					mode={inputMode}
+					title="Create New Database"
+					placeholder="Database name (e.g. work, personal)..."
+					onSubmit={handleCreateDatabase}
+					onCancel={() => setInputMode("select_database")}
+					theme={theme}
+				/>
+			)}
+
 			{inputMode === "select_timer_project" && (
 				<ProjectSelectModal
 					projects={projectList.filter((p) => !p.archived)}

package/src/components/DatabaseSelectModal.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import type { Theme } from "../types.ts";
+import Modal from "./Modal.tsx";
+
+interface DatabaseSelectModalProps {
+	databases: string[];
+	currentDatabase: string;
+	onSelect: (filename: string) => void;
+	onCreateNew: () => void;
+	onCancel: () => void;
+	theme: Theme;
+}
+
+export function DatabaseSelectModal({
+	databases,
+	currentDatabase,
+	onSelect,
+	onCreateNew,
+	onCancel,
+	theme,
+}: DatabaseSelectModalProps) {
+	const currentIndex = databases.indexOf(currentDatabase);
+	const [selectedIndex, setSelectedIndex] = useState(
+		currentIndex >= 0 ? currentIndex : 0,
+	);
+
+	const colors = theme.colors;
+
+	// Total items = databases + "Create new" option
+	const totalItems = databases.length + 1;
+
+	useKeyboard((key) => {
+		if (key.name === "escape") {
+			onCancel();
+			return;
+		}
+		if (key.name === "return") {
+			if (selectedIndex === databases.length) {
+				onCreateNew();
+			} else {
+				const selected = databases[selectedIndex];
+				if (selected) {
+					onSelect(selected);
+				}
+			}
+			return;
+		}
+		if (key.name === "down" || key.name === "j") {
+			setSelectedIndex((i) => Math.min(i + 1, totalItems - 1));
+			return;
+		}
+		if (key.name === "up" || key.name === "k") {
+			setSelectedIndex((i) => Math.max(i - 1, 0));
+			return;
+		}
+	});
+
+	// border(2) + padding(2) + title(1) + marginTop(1) + items + spacer(1) + create_new(1) + marginTop(1) + help(1)
+	const height = Math.min(totalItems + 10, 20);
+
+	return (
+		<Modal title="Select Database" height={height} theme={theme}>
+			<box style={{ flexGrow: 1, marginTop: 1 }}>
+				{databases.map((db, index) => {
+					const isSelected = index === selectedIndex;
+					const isCurrent = db === currentDatabase;
+					const displayName = db.replace(/\.db$/, "");
+
+					return (
+						<box
+							key={db}
+							style={{
+								paddingLeft: 1,
+								paddingRight: 1,
+								backgroundColor: isSelected ? colors.selectedRowBg : "transparent",
+							}}
+						>
+							<text>
+								<span fg={isSelected ? colors.selectedText : colors.textPrimary}>
+									{isSelected ? "▸ " : "  "}
+								</span>
+								<span
+									fg={isSelected ? colors.selectedText : colors.textPrimary}
+									attributes={isSelected ? "bold" : undefined}
+								>
+									{displayName}
+								</span>
+								{isCurrent && (
+									<span fg={colors.success}> (active)</span>
+								)}
+							</text>
+						</box>
+					);
+				})}
+
+				{/* Create new option */}
+				<box
+					style={{
+						paddingLeft: 1,
+						paddingRight: 1,
+						marginTop: databases.length > 0 ? 1 : 0,
+						backgroundColor: selectedIndex === databases.length ? colors.selectedRowBg : "transparent",
+					}}
+				>
+					<text>
+						<span fg={selectedIndex === databases.length ? colors.selectedText : colors.accent}>
+							{selectedIndex === databases.length ? "▸ " : "  "}
+						</span>
+						<span
+							fg={selectedIndex === databases.length ? colors.selectedText : colors.accent}
+							attributes={selectedIndex === databases.length ? "bold" : undefined}
+						>
+							+ Create new database...
+						</span>
+					</text>
+				</box>
+			</box>
+			<text fg={colors.textMuted} style={{ marginTop: 1 }}>
+				↑/↓ to navigate, Enter to select, Esc to cancel
+			</text>
+		</Modal>
+	);
+}

package/src/components/SettingsView.tsx

@@ -5,31 +5,46 @@ interface SettingsViewProps {
   settings: AppSettings;
   selectedIndex: number;
   theme: Theme;
+  currentDbFilename: string;
+  onSelectDatabase: () => void;
   onEditBusinessName: () => void;
   onEditStripeKey: () => void;
   onEditTimezone: () => void;
   onSelectTheme: () => void;
+  onToggleMenuBar: () => void;
   onExportDatabase: () => void;
   onImportDatabase: () => void;
 }
 
-const SETTINGS_ITEMS = [
+type SettingsItem = { key: string; label: string; type: string };
+
+const BUSINESS_SETTINGS: SettingsItem[] = [
   { key: "businessName", label: "Business Name", type: "text" },
   { key: "stripeApiKey", label: "Stripe API Key", type: "secret" },
+];
+
+const APP_SETTINGS: SettingsItem[] = [
+  { key: "database", label: "Database", type: "select" },
   { key: "theme", label: "Theme", type: "select" },
   { key: "timezone", label: "Timezone", type: "text" },
+  { key: "menuBar", label: "Menu Bar", type: "toggle" },
   { key: "exportDatabase", label: "Export Database", type: "action" },
   { key: "importDatabase", label: "Import Database", type: "action" },
-] as const;
+];
+
+const ALL_SETTINGS = [...BUSINESS_SETTINGS, ...APP_SETTINGS];
 
 export function SettingsView({
   settings,
   selectedIndex,
   theme,
+  currentDbFilename,
+  onSelectDatabase,
   onEditBusinessName,
   onEditStripeKey,
   onEditTimezone,
   onSelectTheme,
+  onToggleMenuBar,
   onExportDatabase,
   onImportDatabase,
 }: SettingsViewProps) {
@@ -55,6 +70,8 @@ export function SettingsView({
 
   const getValue = (key: string) => {
     switch (key) {
+      case "database":
+        return currentDbFilename.replace(/\.db$/, "");
       case "theme":
         return getThemeDisplay();
       case "businessName":
@@ -63,6 +80,8 @@ export function SettingsView({
         return maskSecret(settings.stripeApiKey);
       case "timezone":
         return formatTimezone(settings.timezone);
+      case "menuBar":
+        return settings.menuBar === "enabled" ? "Enabled" : "Disabled";
       case "exportDatabase":
         return "Export to file...";
       case "importDatabase":
@@ -74,6 +93,8 @@ export function SettingsView({
 
   const getAction = (key: string) => {
     switch (key) {
+      case "database":
+        return onSelectDatabase;
       case "theme":
         return onSelectTheme;
       case "businessName":
@@ -82,6 +103,8 @@ export function SettingsView({
         return onEditStripeKey;
       case "timezone":
         return onEditTimezone;
+      case "menuBar":
+        return onToggleMenuBar;
       case "exportDatabase":
         return onExportDatabase;
       case "importDatabase":
@@ -94,9 +117,42 @@ export function SettingsView({
   const getActionLabel = (type: string) => {
     if (type === "action") return "run";
     if (type === "select") return "select";
+    if (type === "toggle") return "toggle";
     return "edit";
   };
 
+  const renderItem = (item: SettingsItem, globalIndex: number) => {
+    const isSelected = globalIndex === selectedIndex;
+    return (
+      <box
+        key={item.key}
+        style={{
+          flexDirection: "row",
+          paddingLeft: 1,
+          paddingRight: 1,
+          backgroundColor: isSelected ? colors.selectedRowBg : "transparent",
+        }}
+      >
+        <box style={{ width: 20 }}>
+          <text
+            fg={isSelected ? colors.selectedText : colors.textPrimary}
+            attributes={isSelected ? "bold" : undefined}
+          >
+            {item.label}
+          </text>
+        </box>
+        <box style={{ flexGrow: 1 }}>
+          <text fg={isSelected ? colors.selectedText : colors.textSecondary}>
+            {getValue(item.key)}
+          </text>
+        </box>
+        {isSelected && (
+          <text fg={colors.accent}>[Enter to {getActionLabel(item.type)}]</text>
+        )}
+      </box>
+    );
+  };
+
   return (
     <box
       style={{
@@ -105,50 +161,31 @@ export function SettingsView({
         padding: 1,
       }}
     >
-      <box style={{ marginBottom: 1 }}>
-        <text fg={colors.accent}>Application Settings</text>
+      <box
+        title="Business"
+        style={{
+          border: true,
+          borderColor: colors.borderSubtle,
+          padding: 1,
+          flexDirection: "column",
+        }}
+      >
+        {BUSINESS_SETTINGS.map((item, i) => renderItem(item, i))}
       </box>
 
       <box
-        title="Settings"
+        title="App"
         style={{
           border: true,
           borderColor: colors.borderSubtle,
           padding: 1,
           flexDirection: "column",
+          marginTop: 1,
         }}
       >
-        {SETTINGS_ITEMS.map((item, index) => {
-          const isSelected = index === selectedIndex;
-          return (
-            <box
-              key={item.key}
-              style={{
-                flexDirection: "row",
-                paddingLeft: 1,
-                paddingRight: 1,
-                backgroundColor: isSelected ? colors.selectedRowBg : "transparent",
-              }}
-            >
-              <box style={{ width: 20 }}>
-                <text
-                  fg={isSelected ? colors.selectedText : colors.textPrimary}
-                  attributes={isSelected ? "bold" : undefined}
-                >
-                  {item.label}
-                </text>
-              </box>
-              <box style={{ flexGrow: 1 }}>
-                <text fg={isSelected ? colors.selectedText : colors.textSecondary}>
-                  {getValue(item.key)}
-                </text>
-              </box>
-              {isSelected && (
-                <text fg={colors.accent}>[Enter to {getActionLabel(item.type)}]</text>
-              )}
-            </box>
-          );
-        })}
+        {APP_SETTINGS.map((item, i) =>
+          renderItem(item, BUSINESS_SETTINGS.length + i),
+        )}
       </box>
 
       <box style={{ marginTop: 2 }}>
@@ -158,10 +195,10 @@ export function SettingsView({
       </box>
 
       <box style={{ marginTop: 1 }}>
-        <text fg={colors.textMuted}>Database location: ~/.paca/paca.db</text>
+        <text fg={colors.textMuted}>Database: ~/.paca/{currentDbFilename}</text>
       </box>
     </box>
   );
 }
 
-export const SETTINGS_COUNT = SETTINGS_ITEMS.length;
+export const SETTINGS_COUNT = ALL_SETTINGS.length;

package/src/components/index.ts

@@ -15,3 +15,4 @@ export { CustomerSelectModal } from "./CustomerSelectModal.tsx";
 export { EditTimeEntryModal } from "./EditTimeEntryModal.tsx";
 export { CreateInvoiceModal } from "./CreateInvoiceModal.tsx";
 export { ThemeSelectModal } from "./ThemeSelectModal.tsx";
+export { DatabaseSelectModal } from "./DatabaseSelectModal.tsx";