pacatui 0.1.0

package/src/components/EditTimeEntryModal.tsx

@@ -0,0 +1,293 @@
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { COLORS, type TimeEntry } from "../types";
+import Modal from "./Modal";
+import { DateTimePicker } from "./DateTimePicker";
+import { usePaste } from "../hooks/usePaste";
+
+interface EditTimeEntryModalProps {
+	entry: TimeEntry & {
+		project: { name: string; color: string; hourlyRate: number | null };
+	};
+	timezone: string;
+	onSubmit: (startTime: Date, endTime: Date, description: string) => void;
+	onCancel: () => void;
+}
+
+function formatDuration(ms: number): string {
+	const totalSeconds = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	return `${minutes}m`;
+}
+
+type ActiveSection = "start" | "end" | "description";
+
+export function EditTimeEntryModal({
+	entry,
+	timezone,
+	onSubmit,
+	onCancel,
+}: EditTimeEntryModalProps) {
+	const startDate =
+		entry.startTime instanceof Date
+			? entry.startTime
+			: new Date(entry.startTime);
+	const endDate = entry.endTime
+		? entry.endTime instanceof Date
+			? entry.endTime
+			: new Date(entry.endTime)
+		: new Date();
+
+	const [startTime, setStartTime] = useState(startDate);
+	const [endTime, setEndTime] = useState(endDate);
+	const [description, setDescription] = useState(entry.description ?? "");
+	const [activeSection, setActiveSection] = useState<ActiveSection>("description");
+	const [error, setError] = useState<string | null>(null);
+	const descriptionInputRef = usePaste();
+
+	const startPicker = DateTimePicker({
+		value: startTime,
+		timezone,
+		focused: activeSection === "start",
+		onChange: (date) => {
+			setStartTime(date);
+			setError(null);
+		},
+	});
+
+	const endPicker = DateTimePicker({
+		value: endTime,
+		timezone,
+		focused: activeSection === "end",
+		onChange: (date) => {
+			setEndTime(date);
+			setError(null);
+		},
+	});
+
+	useKeyboard((key) => {
+		if (key.name === "escape") {
+			onCancel();
+			return;
+		}
+
+		// Submit on Enter from any section
+		if (key.name === "return") {
+			handleSubmit();
+			return;
+		}
+
+		// Switch between sections with Shift+Tab or specific keys
+		if (key.shift && key.name === "tab") {
+			setActiveSection((s) => {
+				if (s === "description") return "end";
+				if (s === "end") return "start";
+				return "description";
+			});
+			return;
+		}
+
+		// Handle date picker navigation when in start/end sections
+		if (activeSection === "start" || activeSection === "end") {
+			const picker = activeSection === "start" ? startPicker : endPicker;
+
+			// Navigate within picker
+			if (key.name === "tab" && !key.shift) {
+				// Check if we're at the last field of the picker
+				const currentIdx = picker.fields.indexOf(picker.activeField);
+				if (currentIdx === picker.fields.length - 1) {
+					// Move to next section
+					setActiveSection(activeSection === "start" ? "end" : "description");
+				} else {
+					picker.handleKey("tab");
+				}
+				return;
+			}
+
+			if (key.name === "left" || key.name === "h") {
+				const currentIdx = picker.fields.indexOf(picker.activeField);
+				if (currentIdx === 0 && activeSection === "end") {
+					setActiveSection("start");
+					startPicker.setActiveField("ampm");
+				} else {
+					picker.handleKey("left");
+				}
+				return;
+			}
+
+			if (key.name === "right" || key.name === "l") {
+				const currentIdx = picker.fields.indexOf(picker.activeField);
+				if (currentIdx === picker.fields.length - 1) {
+					if (activeSection === "start") {
+						setActiveSection("end");
+						endPicker.setActiveField("month");
+					} else {
+						setActiveSection("description");
+					}
+				} else {
+					picker.handleKey("right");
+				}
+				return;
+			}
+
+			if (
+				key.name === "up" ||
+				key.name === "k" ||
+				key.name === "down" ||
+				key.name === "j"
+			) {
+				picker.handleKey(key.name);
+				return;
+			}
+		}
+
+		// Handle description field navigation
+		if (activeSection === "description") {
+			if (key.name === "tab" && !key.shift) {
+				setActiveSection("start");
+				return;
+			}
+			if (key.name === "left" || key.name === "h") {
+				// Let the input handle cursor movement
+				return;
+			}
+		}
+	});
+
+	const handleSubmit = () => {
+		if (endTime <= startTime) {
+			setError("End time must be after start time");
+			return;
+		}
+
+		onSubmit(startTime, endTime, description.trim());
+	};
+
+	// Calculate original duration
+	const originalEndDate = entry.endTime
+		? entry.endTime instanceof Date
+			? entry.endTime
+			: new Date(entry.endTime)
+		: new Date();
+	const originalStartDate =
+		entry.startTime instanceof Date
+			? entry.startTime
+			: new Date(entry.startTime);
+	const originalDurationMs =
+		originalEndDate.getTime() - originalStartDate.getTime();
+
+	// Calculate new duration
+	const newDurationMs = endTime.getTime() - startTime.getTime();
+	const durationChangeMs = newDurationMs - originalDurationMs;
+
+	// Format duration change
+	let changeText = "";
+	let changeColor = "#64748b";
+	if (durationChangeMs !== 0) {
+		const sign = durationChangeMs > 0 ? "+" : "-";
+		changeText = ` (${sign}${formatDuration(Math.abs(durationChangeMs))})`;
+		changeColor = durationChangeMs > 0 ? "#10b981" : "#ef4444";
+	}
+
+	// Calculate amount if hourly rate exists
+	let amountPreview = "";
+	if (entry.project.hourlyRate && newDurationMs > 0) {
+		const amount = (newDurationMs / 3600000) * entry.project.hourlyRate;
+		amountPreview = `$${amount.toFixed(2)}`;
+	}
+
+	return (
+		<Modal title="Edit Time Entry" height={23}>
+			<box style={{ flexDirection: "row", marginTop: 1, gap: 2 }}>
+				<text>
+					<span fg={entry.project.color}>{entry.project.name}</span>
+				</text>
+				<text>
+					<span fg={newDurationMs > 0 ? "#ffffff" : "#ef4444"}>
+						{newDurationMs > 0 ? formatDuration(newDurationMs) : "0m"}
+					</span>
+					<span fg={changeColor}>{changeText}</span>
+					{amountPreview && <span fg="#10b981"> ({amountPreview})</span>}
+				</text>
+			</box>
+
+			{error && (
+				<box style={{ marginTop: 1 }}>
+					<text fg="#ef4444">{error}</text>
+				</box>
+			)}
+
+			<box
+				onClick={() => setActiveSection("start")}
+				style={{
+					flexDirection: "row",
+					marginTop: 1,
+					alignItems: "center",
+					gap: 2,
+				}}
+			>
+				<box style={{ width: 11 }}>
+					<text fg={activeSection === "start" ? "#ffffff" : "#94a3b8"}>
+						Start Time
+					</text>
+				</box>
+				<box>{startPicker.render}</box>
+			</box>
+
+			<box
+				onClick={() => setActiveSection("end")}
+				style={{
+					flexDirection: "row",
+					marginTop: 1,
+					alignItems: "center",
+					gap: 2,
+				}}
+			>
+				<box style={{ width: 11 }}>
+					<text fg={activeSection === "end" ? "#ffffff" : "#94a3b8"}>
+						End Time
+					</text>
+				</box>
+				<box>{endPicker.render}</box>
+			</box>
+
+			<box
+				onClick={() => setActiveSection("description")}
+				style={{ flexDirection: "column", marginTop: 1 }}
+			>
+				<box style={{ width: "100%" }}>
+					<text fg="#fff">Description</text>
+				</box>
+				<box
+					style={{
+						border: true,
+						borderColor:
+							activeSection === "description"
+								? COLORS.border
+								: COLORS.borderOff,
+						width: "100%",
+						height: 3,
+					}}
+				>
+					<input
+						ref={descriptionInputRef}
+						placeholder="What did you work on?"
+						focused={activeSection === "description"}
+						onInput={setDescription}
+						onSubmit={handleSubmit}
+						value={description}
+					/>
+				</box>
+			</box>
+
+			<box style={{ marginTop: 1 }}>
+				<text fg="#64748b">Tab: next field | Enter: save | Esc: cancel</text>
+			</box>
+		</Modal>
+	);
+}

package/src/components/Header.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect } from "react";
+import type { View, RunningTimer } from "../types.ts";
+import { Timer } from "./Timer.tsx";
+
+interface HeaderProps {
+	currentView: View;
+	onViewChange: (view: View) => void;
+	runningTimer: RunningTimer | null;
+	onStopTimer: () => void;
+}
+
+const VIEWS: { key: View; label: string; shortcut: string }[] = [
+	{ key: "dashboard", label: "dash", shortcut: "1" },
+	{ key: "tasks", label: "tasks", shortcut: "2" },
+	{ key: "timesheets", label: "sheets", shortcut: "3" },
+	{ key: "invoices", label: "invoices", shortcut: "4" },
+	{ key: "settings", label: "settings", shortcut: "5" },
+	{ key: "help", label: "help", shortcut: "?" },
+];
+
+export function Header({
+	currentView,
+	runningTimer,
+	onStopTimer,
+}: HeaderProps) {
+	return (
+		<box
+			style={{
+				width: "100%",
+				flexDirection: "column",
+			}}
+		>
+			{/* Main header row */}
+			<box
+				style={{
+					width: "100%",
+					height: 1,
+					flexDirection: "row",
+					justifyContent: "space-between",
+					alignItems: "center",
+					paddingLeft: 1,
+					paddingRight: 1,
+				}}
+			>
+				<box
+					style={{
+						flexDirection: "row",
+						gap: 2,
+						alignItems: "center",
+					}}
+				>
+					{VIEWS.map((view) => (
+						<text key={view.key}>
+							<span fg="#3b82f6">{view.shortcut} </span>
+							<span fg={currentView === view.key ? "#ffffff" : "#64748b"}>
+								{view.label}
+							</span>
+						</text>
+					))}
+				</box>
+				<Timer runningTimer={runningTimer} onStop={onStopTimer} />
+			</box>
+		</box>
+	);
+}

package/src/components/HelpView.tsx

@@ -0,0 +1,109 @@
+const KEYBINDINGS = [
+  {
+    category: "Navigation",
+    bindings: [
+      { key: "1", action: "Go to Dashboard" },
+      { key: "2", action: "Go to Projects" },
+      { key: "3", action: "Go to Tasks" },
+      { key: "4", action: "Go to Settings" },
+      { key: "?", action: "Show Help" },
+      { key: "Tab", action: "Toggle panels" },
+      { key: "h/l or ←/→", action: "Switch panels" },
+      { key: "j/k or ↑/↓", action: "Move up/down in list" },
+      { key: "Enter", action: "Select / Confirm" },
+      { key: "Esc", action: "Cancel / Go back" },
+      { key: "q", action: "Quit Paca" },
+    ],
+  },
+  {
+    category: "Projects",
+    bindings: [
+      { key: "n", action: "Create new project" },
+      { key: "e", action: "Edit project" },
+      { key: "a", action: "Archive/Unarchive" },
+      { key: "d", action: "Delete project" },
+      { key: "A", action: "Toggle show archived" },
+    ],
+  },
+  {
+    category: "Tasks",
+    bindings: [
+      { key: "n", action: "Create new task" },
+      { key: "e", action: "Edit selected task" },
+      { key: "Space", action: "Toggle status (cycle)" },
+      { key: "p", action: "Change priority" },
+      { key: "d", action: "Delete task" },
+    ],
+  },
+  {
+    category: "Time Tracking",
+    bindings: [
+      { key: "t", action: "Start timer" },
+      { key: "s", action: "Stop running timer" },
+    ],
+  },
+];
+
+export function HelpView() {
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        flexGrow: 1,
+        padding: 1,
+      }}
+    >
+      <box style={{ marginBottom: 1 }}>
+        <text fg="#64748b">A tui task management and timer</text>
+      </box>
+
+      <box
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: 2,
+          flexGrow: 1,
+        }}
+      >
+        {KEYBINDINGS.map((section) => (
+          <box
+            key={section.category}
+            title={section.category}
+            style={{
+              border: true,
+              borderColor: "#334155",
+              padding: 1,
+              minWidth: 35,
+              flexGrow: 1,
+            }}
+          >
+            {section.bindings.map((binding) => (
+              <box
+                key={binding.key}
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                }}
+              >
+                <text>
+                  <span fg="#3b82f6" style={{ minWidth: 12 }}>
+                    {binding.key}
+                  </span>
+                </text>
+                <text fg="#94a3b8">{binding.action}</text>
+              </box>
+            ))}
+          </box>
+        ))}
+      </box>
+
+      <box
+        style={{
+          padding: 1,
+        }}
+      >
+        <text fg="#475569">Database location: ~/.paca/paca.db</text>
+      </box>
+    </box>
+  );
+}

package/src/components/InputModal.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import type { InputMode } from "../types.ts";
+import Modal from "./Modal";
+import { usePaste } from "../hooks/usePaste";
+
+interface InputModalProps {
+  mode: InputMode;
+  title: string;
+  initialValue?: string;
+  placeholder?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function InputModal({
+  title,
+  initialValue = "",
+  placeholder = "",
+  onSubmit,
+}: InputModalProps) {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = usePaste();
+
+  return (
+    <Modal title={title}>
+      <box
+        style={{
+          border: true,
+          borderColor: "#475569",
+          height: 3,
+          marginTop: 1,
+        }}
+      >
+        <input
+          ref={inputRef}
+          placeholder={placeholder}
+          focused
+          value={value}
+          onInput={setValue}
+          onSubmit={() => {
+            if (value.trim()) {
+              onSubmit(value.trim());
+            }
+          }}
+        />
+      </box>
+    </Modal>
+  );
+}
+
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmModal({ title, message }: ConfirmModalProps) {
+  return (
+    <Modal title={title}>
+      <text fg="#ef4444" attributes="bold">
+        {title}
+      </text>
+      <text fg="#e2e8f0" style={{ marginTop: 1 }}>
+        {message}
+      </text>
+      <box style={{ flexDirection: "row", gap: 2, marginTop: 1 }}>
+        <text>
+          <span fg="#10b981">[y]</span>
+          <span fg="#94a3b8"> Yes</span>
+        </text>
+        <text>
+          <span fg="#ef4444">[n]</span>
+          <span fg="#94a3b8"> No</span>
+        </text>
+      </box>
+    </Modal>
+  );
+}