{\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.TASKS} WHERE is_deleted = 0 ORDER BY name`\n );\n \n return result.rows.map(row => ({\n id: row.id as string,\n name: row.name as string,\n description: row.description as string || undefined,\n frequency_per_week: row.frequency_per_week as number,\n created_at: row.created_at as number,\n updated_at: row.updated_at as number,\n is_deleted: false,\n category: row.category as string || undefined,\n color: row.color as string || undefined,\n emoji: row.emoji as string || undefined\n }));\n}\n\nexport async function createTask(task: Task, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.TASKS} (\n id, name, description, frequency_per_week, created_at, updated_at, \n is_deleted, category, color, emoji, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n task.id,\n task.name,\n task.description || null,\n task.frequency_per_week,\n task.created_at,\n task.updated_at,\n task.is_deleted ? 1 : 0,\n task.category || null,\n task.color || null,\n task.emoji || null,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\n// Task completion queries\nexport async function getTaskCompletions(taskIds?: string[], weekStart?: string): Promise {\n let query = `SELECT * FROM ${TABLES.TASK_COMPLETIONS} WHERE is_deleted = 0`;\n const params: any[] = [];\n \n if (taskIds?.length) {\n query += ` AND task_id IN (${taskIds.map(() => '?').join(',')})`;\n params.push(...taskIds);\n }\n \n // If weekStart is provided, filter by completed_at timestamp falling within that week\n if (weekStart) {\n const weekStartDate = new Date(weekStart);\n const weekEndDate = new Date(weekStartDate);\n weekEndDate.setDate(weekEndDate.getDate() + 7); // Next Monday\n \n query += ` AND completed_at >= ? AND completed_at < ?`;\n params.push(weekStartDate.getTime(), weekEndDate.getTime());\n }\n \n query += ` ORDER BY completed_at DESC`;\n \n const result = await sqlite.execute(query, params);\n \n return result.rows.map(row => ({\n id: row.id as string,\n task_id: row.task_id as string,\n completed_at: row.completed_at as number,\n notes: row.notes as string || undefined,\n created_at: row.created_at as number,\n is_deleted: false\n }));\n}\n\nexport async function createTaskCompletion(completion: TaskCompletion, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `INSERT INTO ${TABLES.TASK_COMPLETIONS} (\n id, task_id, completed_at, notes, created_at, \n is_deleted, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n completion.id,\n completion.task_id,\n completion.completed_at,\n completion.notes || null,\n completion.created_at,\n completion.is_deleted ? 1 : 0,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\nexport async function deleteTaskCompletion(completionId: string, _deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.TASK_COMPLETIONS} \n SET is_deleted = 1, vector_clock = ?\n WHERE id = ?`,\n [JSON.stringify(vectorClock), completionId]\n );\n}\n\nexport async function updateTaskCompletion(\n completionId: string, \n notes: string, \n completedAt: string, \n _deviceId: string, \n vectorClock: Record\n): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.TASK_COMPLETIONS} \n SET notes = ?, completed_at = ?, vector_clock = ?\n WHERE id = ? AND is_deleted = 0`,\n [notes || null, new Date(completedAt).getTime(), JSON.stringify(vectorClock), completionId]\n );\n}\n\n// Media queries\nexport async function getMediaItems(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.MEDIA_ITEMS} WHERE is_deleted = 0 ORDER BY updated_at DESC`\n );\n \n return result.rows.map(row => ({\n id: row.id as string,\n title: row.title as string,\n type: row.type as any,\n status: row.status as any,\n group: row.media_group as any,\n description: row.description as string || undefined,\n cover_url: row.cover_url as string || undefined,\n progress: row.progress as string || undefined,\n rating: row.rating as number || undefined,\n notes: row.notes as string || undefined,\n started_at: row.started_at as number || undefined,\n completed_at: row.completed_at as number || undefined,\n created_at: row.created_at as number,\n updated_at: row.updated_at as number,\n is_deleted: false,\n metadata: row.metadata ? JSON.parse(row.metadata as string) : undefined\n }));\n}\n\nexport async function createMediaItem(item: MediaItem, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `INSERT INTO ${TABLES.MEDIA_ITEMS} (\n id, title, type, status, media_group, description, cover_url, \n progress, rating, notes, started_at, completed_at, created_at, \n updated_at, is_deleted, metadata, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n item.id,\n item.title,\n item.type,\n item.status,\n item.group,\n item.description || null,\n item.cover_url || null,\n item.progress || null,\n item.rating || null,\n item.notes || null,\n item.started_at || null,\n item.completed_at || null,\n item.created_at,\n item.updated_at,\n item.is_deleted ? 1 : 0,\n item.metadata ? JSON.stringify(item.metadata) : null,\n deviceId,\n JSON.stringify(vectorClock)\n ]\n );\n}\n\nexport async function updateMediaItem(item: MediaItem, deviceId: string, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.MEDIA_ITEMS} SET \n title = ?, type = ?, status = ?, media_group = ?, description = ?, \n cover_url = ?, progress = ?, rating = ?, notes = ?, started_at = ?, \n completed_at = ?, updated_at = ?, is_deleted = ?, metadata = ?, \n device_id = ?, vector_clock = ?\n WHERE id = ?`,\n [\n item.title,\n item.type,\n item.status,\n item.group,\n item.description || null,\n item.cover_url || null,\n item.progress || null,\n item.rating || null,\n item.notes || null,\n item.started_at || null,\n item.completed_at || null,\n item.updated_at,\n item.is_deleted ? 1 : 0,\n item.metadata ? JSON.stringify(item.metadata) : null,\n deviceId,\n JSON.stringify(vectorClock),\n item.id\n ]\n );\n}\n\n// CRDT and sync queries\nexport async function storeCRDTOperation(operation: CRDTOperation): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.CRDT_OPERATIONS} (\n id, timestamp, device_id, operation, entity, entity_id, \n data, vector_clock, processed\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n operation.id,\n operation.timestamp,\n operation.deviceId,\n operation.operation,\n operation.entity,\n operation.entityId,\n JSON.stringify(operation.data),\n JSON.stringify(operation.vector_clock),\n 0\n ]\n );\n}\n\nexport async function getCRDTOperations(deviceId: string, since?: number): Promise {\n let query = `SELECT * FROM ${TABLES.CRDT_OPERATIONS} WHERE device_id != ?`;\n const params: any[] = [deviceId];\n \n if (since) {\n query += ` AND timestamp > ?`;\n params.push(since);\n }\n \n query += ` ORDER BY timestamp ASC`;\n \n const result = await sqlite.execute(query, params);\n \n return result.rows.map(row => ({\n id: row.id as string,\n timestamp: row.timestamp as number,\n deviceId: row.device_id as string,\n operation: row.operation as any,\n entity: row.entity as any,\n entityId: row.entity_id as string,\n data: JSON.parse(row.data as string),\n vector_clock: JSON.parse(row.vector_clock as string)\n }));\n}\n\nexport async function markCRDTOperationProcessed(operationId: string): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.CRDT_OPERATIONS} SET processed = 1 WHERE id = ?`,\n [operationId]\n );\n}\n\n// Device management\nexport async function registerDevice(device: DeviceInfo): Promise {\n await sqlite.execute(\n `INSERT OR REPLACE INTO ${TABLES.DEVICES} (id, name, last_sync, vector_clock) VALUES (?, ?, ?, ?)`,\n [device.id, device.name, device.last_sync, JSON.stringify(device.vector_clock)]\n );\n}\n\nexport async function getDevice(deviceId: string): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.DEVICES} WHERE id = ?`,\n [deviceId]\n );\n \n if (!result.rows.length) return null;\n \n const row = result.rows[0];\n return {\n id: row.id as string,\n name: row.name as string,\n last_sync: row.last_sync as number,\n vector_clock: JSON.parse(row.vector_clock as string)\n };\n}\n\nexport async function updateDeviceSync(deviceId: string, lastSync: number, vectorClock: Record): Promise {\n await sqlite.execute(\n `UPDATE ${TABLES.DEVICES} SET last_sync = ?, vector_clock = ? WHERE id = ?`,\n [lastSync, JSON.stringify(vectorClock), deviceId]\n );\n}\n\n// Audit logging\nexport async function logAuditEntry(entry: AuditLogEntry): Promise {\n await sqlite.execute(\n `INSERT INTO ${TABLES.AUDIT_LOG} (id, timestamp, device_id, operation_id, user_action, notes) VALUES (?, ?, ?, ?, ?, ?)`,\n [entry.id, entry.timestamp, entry.deviceId, entry.operation.id, entry.user_action || null, entry.notes || null]\n );\n}\n",[],[183,190,207],[183,190],{"_104":217,"_95":218,"_153":219,"_155":184,"_156":138,"_157":220,"_159":22,"_106":221,"_100":222,"_162":201,"_164":223,"_165":22,"_166":-5,"_167":224,"_98":225},"22f3fad6-675f-11f0-b08b-0224a6c84d84","index.ts","8b8a4604-65bb-11f0-91d8-0224a6c84d84",153,["D",1753231875430],13,"import { Hono } from \"https://esm.sh/hono@4.0.8\";\nimport { cors } from \"https://esm.sh/hono@4.0.8/cors\";\nimport { runMigrations } from \"./database/migrations.ts\";\nimport { \n getTasks, \n createTask, \n getTaskCompletions, \n createTaskCompletion,\n deleteTaskCompletion,\n updateTaskCompletion,\n getMediaItems,\n createMediaItem,\n updateMediaItem,\n storeCRDTOperation,\n getCRDTOperations,\n registerDevice,\n getDevice,\n updateDeviceSync,\n logAuditEntry\n} from \"./database/queries.ts\";\nimport { \n generateId, \n createVectorClock, \n getWeekStart,\n type Task,\n type TaskCompletion,\n type MediaItem,\n type CRDTOperation,\n type AuditLogEntry,\n type SyncPayload,\n type SyncResponse\n} from \"../shared/types.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, _c) => {\n console.error('API Error:', err);\n throw err;\n});\n\n// Enable CORS for PWA\napp.use('*', cors({\n origin: '*',\n allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],\n allowHeaders: ['Content-Type', 'Authorization']\n}));\n\n// Initialize database on startup\nawait runMigrations();\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main app with initial data injection\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data to avoid extra round-trips\n const [tasks, completions, mediaItems] = await Promise.all([\n getTasks(),\n getTaskCompletions(),\n getMediaItems()\n ]);\n \n const initialData = {\n tasks,\n completions,\n mediaItems,\n currentWeek: getWeekStart()\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// API Routes\n\n// Tasks API\napp.get(\"/api/tasks\", async c => {\n const tasks = await getTasks();\n return c.json(tasks);\n});\n\napp.post(\"/api/tasks\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const task: Task = {\n id: generateId(),\n name: body.name,\n description: body.description,\n frequency_per_week: body.frequency_per_week || 1,\n created_at: Date.now(),\n updated_at: Date.now(),\n is_deleted: false,\n category: body.category,\n color: body.color,\n emoji: body.emoji\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'task',\n entityId: task.id,\n data: task,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTask(task, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n if (body.user_action || body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: body.user_action,\n notes: body.notes\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json(task);\n});\n\napp.put(\"/api/tasks/:id\", async c => {\n const taskId = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const task: Task = {\n ...body,\n id: taskId,\n updated_at: Date.now()\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'task',\n entityId: task.id,\n data: task,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTask(task, deviceId, vectorClock), // createTask handles upserts\n storeCRDTOperation(operation)\n ]);\n \n return c.json(task);\n});\n\n// Task Completions API\napp.get(\"/api/completions\", async c => {\n const taskIds = c.req.query('task_ids')?.split(',');\n const weekStart = c.req.query('week_start');\n const completions = await getTaskCompletions(taskIds, weekStart);\n return c.json(completions);\n});\n\napp.post(\"/api/completions\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const completion: TaskCompletion = {\n id: generateId(),\n task_id: body.task_id,\n completed_at: Date.now(),\n notes: body.notes,\n created_at: Date.now(),\n is_deleted: false\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'completion',\n entityId: completion.id,\n data: completion,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createTaskCompletion(completion, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n if (body.user_action || body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: body.user_action,\n notes: body.notes\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json(completion);\n});\n\napp.put(\"/api/completions/:id\", async c => {\n const completionId = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n // Validate input\n if (!body.notes && body.notes !== '') {\n return c.json({ error: 'Notes field is required' }, 400);\n }\n \n if (!body.completed_at) {\n return c.json({ error: 'completed_at field is required' }, 400);\n }\n \n // Create CRDT operation for update\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'completion',\n entityId: completionId,\n data: { \n notes: body.notes,\n completed_at: body.completed_at\n },\n vector_clock: vectorClock\n };\n \n await Promise.all([\n updateTaskCompletion(completionId, body.notes, body.completed_at, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry if notes provided\n if (body.notes) {\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: 'EDIT_COMPLETION',\n notes: `Updated completion notes: ${body.notes}`\n };\n await logAuditEntry(auditEntry);\n }\n \n return c.json({ success: true });\n});\n\napp.delete(\"/api/completions/:id\", async c => {\n const completionId = c.req.param('id');\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n // Create CRDT operation for deletion\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'delete',\n entity: 'completion',\n entityId: completionId,\n data: { is_deleted: true },\n vector_clock: vectorClock\n };\n \n await Promise.all([\n deleteTaskCompletion(completionId, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n // Log audit entry\n const auditEntry: AuditLogEntry = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation,\n user_action: 'remove_completion'\n };\n await logAuditEntry(auditEntry);\n \n return c.json({ success: true });\n});\n\n// Media API\napp.get(\"/api/media\", async c => {\n const media = await getMediaItems();\n return c.json(media);\n});\n\napp.post(\"/api/media\", async c => {\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const media: MediaItem = {\n id: generateId(),\n title: body.title,\n type: body.type,\n status: body.status || 'inbox',\n group: body.group,\n description: body.description,\n cover_url: body.cover_url,\n progress: body.progress,\n rating: body.rating,\n notes: body.notes,\n started_at: body.started_at,\n completed_at: body.completed_at,\n created_at: Date.now(),\n updated_at: Date.now(),\n is_deleted: false,\n metadata: body.metadata\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'create',\n entity: 'media',\n entityId: media.id,\n data: media,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n createMediaItem(media, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n return c.json(media);\n});\n\napp.put(\"/api/media/:id\", async c => {\n const id = c.req.param('id');\n const body = await c.req.json();\n const deviceId = c.req.header('X-Device-ID') || 'unknown';\n \n const media: MediaItem = {\n ...body,\n id,\n updated_at: Date.now()\n };\n \n // Create CRDT operation\n const vectorClock = createVectorClock(deviceId);\n const operation: CRDTOperation = {\n id: generateId(),\n timestamp: Date.now(),\n deviceId,\n operation: 'update',\n entity: 'media',\n entityId: media.id,\n data: media,\n vector_clock: vectorClock\n };\n \n await Promise.all([\n updateMediaItem(media, deviceId, vectorClock),\n storeCRDTOperation(operation)\n ]);\n \n return c.json(media);\n});\n\n// Sync API\napp.post(\"/api/sync\", async c => {\n const payload: SyncPayload = await c.req.json();\n const deviceId = payload.device_id;\n \n // Register/update device\n const existingDevice = await getDevice(deviceId);\n if (!existingDevice) {\n await registerDevice({\n id: deviceId,\n name: `Device ${deviceId.slice(-6)}`,\n last_sync: Date.now(),\n vector_clock: payload.vector_clock\n });\n }\n \n // Store incoming operations\n for (const operation of payload.operations) {\n await storeCRDTOperation(operation);\n }\n \n // Get operations to send back\n const lastSync = existingDevice?.last_sync || 0;\n const outgoingOps = await getCRDTOperations(deviceId, lastSync);\n \n // Update device sync time\n await updateDeviceSync(deviceId, Date.now(), payload.vector_clock);\n \n const response: SyncResponse = {\n operations: outgoingOps,\n vector_clock: payload.vector_clock\n };\n \n return c.json(response);\n});\n\n// Device registration\napp.post(\"/api/devices/register\", async c => {\n const body = await c.req.json();\n const deviceId = body.device_id || generateId();\n \n const device = {\n id: deviceId,\n name: body.name || `Device ${deviceId.slice(-6)}`,\n last_sync: Date.now(),\n vector_clock: { [deviceId]: 0 }\n };\n \n await registerDevice(device);\n return c.json(device);\n});\n\n// Health check\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: Date.now() });\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n",[],[183,218],[183],{"_104":228,"_95":229,"_153":230,"_155":-5,"_156":138,"_157":231,"_159":160,"_106":232,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":233,"_98":391},"3c10a47e-65bb-11f0-8867-0224a6c84d84","frontend","3c10a55a-65bb-11f0-8867-0224a6c84d84",8,["D",1753051528942],[234,346,355,364,373,382],{"_104":235,"_95":236,"_153":237,"_155":230,"_156":138,"_157":211,"_159":160,"_106":238,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":239,"_98":345},"3f963140-65bb-11f0-abc8-0224a6c84d84","components","3f9631fe-65bb-11f0-abc8-0224a6c84d84",["D",1753051534852],[240,250,260,270,279,289,299,308,317,326,335],{"_104":241,"_95":242,"_153":243,"_155":237,"_156":138,"_157":244,"_159":22,"_106":245,"_100":246,"_162":201,"_164":247,"_165":22,"_166":-5,"_167":248,"_98":249},"5ed7f4ca-6fc1-11f0-be1f-0224a6c84d84","AddMediaModal.tsx","55d5f674-65bc-11f0-ba88-0224a6c84d84",226,["D",1754153675897],26,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { MediaItem, MediaType, MediaStatus, MediaGroup } from \"../../shared/types.ts\";\n\ninterface AddMediaModalProps {\n isOpen: boolean;\n onClose: () => void;\n onAdd: (media: Omit) => void;\n onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;\n}\n\nconst MEDIA_TYPES: { value: MediaType; label: string; icon: string }[] = [\n { value: 'book', label: 'Book', icon: '📚' },\n { value: 'movie', label: 'Movie', icon: '🎬' },\n { value: 'tv_show', label: 'TV Show', icon: '📺' },\n { value: 'podcast', label: 'Podcast', icon: '🎧' },\n { value: 'game', label: 'Game', icon: '🎮' },\n { value: 'article', label: 'Article', icon: '📄' },\n { value: 'course', label: 'Course', icon: '🎓' }\n];\n\nconst MEDIA_GROUPS: { value: MediaGroup; label: string }[] = [\n { value: 'ryi', label: 'Ryi' },\n { value: 'maini', label: 'MaiNi' },\n { value: 'ant', label: 'Ant' },\n { value: 'hanant', label: 'HanAnt' },\n { value: 'arj', label: 'Arj' },\n { value: 'arvina', label: 'Arvina' },\n { value: 'haka', label: 'Haka' },\n { value: 'shaw', label: 'Shaw' },\n { value: 'nadin', label: 'Nadin' }\n];\n\nconst MEDIA_STATUSES: { value: MediaStatus; label: string }[] = [\n { value: 'inbox', label: 'Inbox' },\n { value: 'upcoming', label: 'Upcoming' },\n { value: 'in_progress', label: 'In Progress' },\n { value: 'on_hold', label: 'On Hold' },\n { value: 'completed', label: 'Completed' }\n];\n\nexport function AddMediaModal({ isOpen, onClose, onAdd, onOpenImageSearch }: AddMediaModalProps) {\n const [formData, setFormData] = useState({\n title: '',\n type: 'book' as MediaType,\n status: 'inbox' as MediaStatus,\n group: 'ryi' as MediaGroup,\n description: '',\n cover_url: '',\n progress: '',\n rating: 0,\n metadata: {\n author: '',\n genre: '',\n year: undefined as number | undefined\n }\n });\n \n const [saving, setSaving] = useState(false);\n const [imageError, setImageError] = useState(false);\n \n const handleImageUrlChange = (url: string) => {\n setFormData(prev => ({ ...prev, cover_url: url }));\n setImageError(false);\n };\n \n const handleImageError = () => {\n setImageError(true);\n };\n\n const handleImageSelect = (imageUrl: string) => {\n handleImageUrlChange(imageUrl);\n };\n \n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.title.trim()) return;\n \n setSaving(true);\n try {\n const mediaData = {\n ...formData,\n title: formData.title.trim(),\n description: formData.description.trim() || undefined,\n cover_url: formData.cover_url.trim() || undefined,\n progress: formData.progress.trim() || undefined,\n rating: formData.rating > 0 ? formData.rating : undefined,\n metadata: {\n ...formData.metadata,\n author: formData.metadata.author.trim() || undefined,\n genre: formData.metadata.genre.trim() || undefined\n }\n };\n \n // Clean up empty metadata\n if (!mediaData.metadata?.author && !mediaData.metadata?.genre && !mediaData.metadata?.year) {\n mediaData.metadata = undefined;\n }\n \n await onAdd({\n ...mediaData,\n is_deleted: false\n });\n } finally {\n setSaving(false);\n }\n };\n\n if (!isOpen) return null;\n \n return (\n <>\n

\n {/* Header */}\n

Add Media

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Title */}\n

\n \n Title *\n \n setFormData(prev => ({ ...prev, title: e.target.value }))}\n placeholder=\"e.g., The Great Gatsby, Avengers, The Office\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n \n {/* Cover Image URL */}\n

\n \n Cover Image URL (optional)\n \n

\n handleImageUrlChange(e.target.value)}\n placeholder=\"https://example.com/cover-image.jpg\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n onOpenImageSearch(formData.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n {formData.cover_url && (\n

\n setImageError(false)}\n />\n {imageError && (\n

\n Invalid URL\n

\n )}\n

\n Add a square image URL to represent this media item in the grid, or click the search button to find one\n

\n \n {/* Type */}\n

\n \n Type\n \n

\n {MEDIA_TYPES.map(type => (\n setFormData(prev => ({ ...prev, type: type.value }))}\n className={`p-3 rounded-lg border-2 text-center transition-colors ${\n formData.type === type.value\n ? 'border-blue-500 bg-blue-50 text-blue-700'\n : 'border-gray-300 hover:border-gray-400'\n }`}\n >\n

{type.icon}

{type.label}

\n \n ))}\n

\n \n {/* Group and Status */}\n

\n \n Group\n \n setFormData(prev => ({ ...prev, group: e.target.value as MediaGroup }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_GROUPS.map(group => (\n \n ))}\n \n

\n \n

\n \n Status\n \n setFormData(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {MEDIA_STATUSES.map(status => (\n \n ))}\n \n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"What's this about? Why are you interested?\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Progress */}\n

\n \n Current Progress (optional)\n \n setFormData(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Additional Metadata */}\n

Additional Info (optional)

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, author: e.target.value }\n }))}\n placeholder=\"Author/Creator\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, year: e.target.value ? parseInt(e.target.value) : undefined }\n }))}\n placeholder=\"Year\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n

\n setFormData(prev => ({ \n ...prev, \n metadata: { ...prev.metadata, genre: e.target.value }\n }))}\n placeholder=\"Genre\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n \n {/* Rating */}\n

\n \n Rating (optional)\n \n

\n {[1, 2, 3, 4, 5].map(star => (\n setFormData(prev => ({ \n ...prev, \n rating: prev.rating === star ? 0 : star \n }))}\n className={`w-8 h-8 ${\n star <= formData.rating \n ? 'text-yellow-400' \n : 'text-gray-300'\n } hover:text-yellow-300 transition-colors`}\n >\n ★\n \n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Media'}\n \n

\n \n );\n}\n",[],[229,236,242],{"_104":251,"_95":252,"_153":253,"_155":237,"_156":138,"_157":254,"_159":22,"_106":255,"_100":256,"_162":201,"_164":257,"_165":22,"_166":-5,"_167":258,"_98":259},"c5b6ef58-65d9-11f0-b7e8-0224a6c84d84","AddTaskModal.tsx","3ade5c26-65bc-11f0-a6fa-0224a6c84d84",127,["D",1753064644776],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task } from \"../../shared/types.ts\";\n\ninterface AddTaskModalProps {\n onSave: (task: Partial) => void;\n onClose: () => void;\n}\n\nconst PRESET_COLORS = [\n '#ef4444', // red-500\n '#f97316', // orange-500\n '#eab308', // yellow-500\n '#22c55e', // green-500\n '#3b82f6', // blue-500\n '#8b5cf6', // violet-500\n '#ec4899', // pink-500\n '#6b7280' // gray-500\n];\n\nconst PRESET_CATEGORIES = [\n 'Health',\n 'Family',\n 'Work',\n 'Learning',\n 'Social',\n 'Hobby',\n 'Fitness',\n 'Creative'\n];\n\nexport function AddTaskModal({ onSave, onClose }: AddTaskModalProps) {\n const [formData, setFormData] = useState({\n name: '',\n description: '',\n frequency_per_week: 1,\n category: '',\n color: PRESET_COLORS[4], // Default to blue\n emoji: ''\n });\n \n // Common emojis for quick selection\n const commonEmojis = [\n '💪', '🏃', '🚶', '🚴', '🏊', '🧘', // Fitness\n '📚', '📖', '✍️', '🎓', '💻', '📝', // Learning/Work\n '💧', '💊', '😴', '🍎', '🥗', '❤️', // Health\n '🧹', '🧺', '🍽️', '🛒', '👨‍🍳', '🏠', // Household\n '👨‍👩‍👧‍👦', '👥', '💕', '📞', '💰', '📄', // Social/Admin\n '🎨', '🎵', '📸', '🌱', '🎮', '📱', // Creative/Hobbies\n '🎯', '🔄', '⭐', '🏆', '📈', '✅' // Goals/Progress\n ];\n \n const [saving, setSaving] = useState(false);\n \n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!formData.name.trim()) return;\n \n setSaving(true);\n try {\n await onSave({\n ...formData,\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n category: formData.category.trim() || undefined,\n emoji: formData.emoji.trim() || undefined\n });\n } finally {\n setSaving(false);\n }\n };\n \n return (\n

\n {/* Header */}\n

Add Task or Habit

\n \n \n \n

\n \n {/* Form Content */}\n

\n {/* Task Name */}\n

\n \n Task or Habit Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n placeholder=\"e.g., Check in with family, Exercise, Read\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n\n {/* Custom Emoji */}\n

\n \n Custom Emoji (optional)\n \n

\n setFormData(prev => ({ ...prev, emoji: e.target.value.slice(0, 2) }))}\n className=\"w-16 px-2 py-2 border border-gray-300 rounded-lg text-center text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"😊\"\n maxLength={2}\n />\n or pick from below\n

\n \n {/* Emoji Grid */}\n

\n {commonEmojis.map((emoji, index) => (\n setFormData(prev => ({ ...prev, emoji }))}\n className={`\n w-8 h-8 flex items-center justify-center text-lg rounded hover:bg-blue-100 transition-colors\n ${formData.emoji === emoji ? 'bg-blue-200 ring-2 ring-blue-400' : ''}\n `}\n >\n {emoji}\n \n ))}\n

\n \n {/* Description */}\n

\n \n Description (optional)\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n placeholder=\"Additional details about this task...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n \n {/* Frequency */}\n

\n \n Times per week\n \n setFormData(prev => ({ ...prev, frequency_per_week: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n \n \n \n \n \n \n \n

\n \n {/* Category */}\n

\n \n Category (optional)\n \n

\n setFormData(prev => ({ ...prev, category: e.target.value }))}\n placeholder=\"Custom category...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n {PRESET_CATEGORIES.map(category => (\n setFormData(prev => ({ ...prev, category }))}\n className=\"px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors\"\n >\n {category}\n \n ))}\n

\n \n {/* Color */}\n

\n \n Color\n \n

\n {PRESET_COLORS.map(color => (\n setFormData(prev => ({ ...prev, color }))}\n className={`w-8 h-8 rounded-full border-2 ${\n formData.color === color ? 'border-gray-900' : 'border-gray-300'\n }`}\n style={{ backgroundColor: color }}\n title={color}\n />\n ))}\n

\n \n {/* Footer */}\n

\n \n Cancel\n \n \n {saving ? 'Adding...' : 'Add Task'}\n \n

\n );\n}\n",[],[229,236,252],{"_104":261,"_95":262,"_153":263,"_155":237,"_156":138,"_157":264,"_159":22,"_106":265,"_100":266,"_162":201,"_164":267,"_165":22,"_166":-5,"_167":268,"_98":269},"7be31798-6fc1-11f0-be1f-0224a6c84d84","App.tsx","eb2ae0b4-65bb-11f0-beb8-0224a6c84d84",229,["D",1754153724623],36,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { TaskGrid } from \"./TaskGrid.tsx\";\nimport { MediaGrid } from \"./MediaGrid.tsx\";\nimport { AddTaskModal } from \"./AddTaskModal.tsx\";\nimport { EditTaskModal } from \"./EditTaskModal.tsx\";\nimport { AddMediaModal } from \"./AddMediaModal.tsx\";\nimport { TaskCompletionModal } from \"./TaskCompletionModal.tsx\";\nimport { MediaDetailModal } from \"./MediaDetailModal.tsx\";\nimport { ImageSearchModal } from \"./ImageSearchModal.tsx\";\nimport type { \n Task, \n TaskCompletion, \n MediaItem, \n TaskGridWeek,\n MediaGridCell\n} from \"../../shared/types.ts\";\nimport { getWeekStart, getWeekLabel } from \"../../shared/types.ts\";\n\n// Helper function to check if a completion falls within a specific week\nconst isCompletionInWeek = (completion: TaskCompletion, weekStart: string): boolean => {\n const completionDate = new Date(completion.completed_at);\n const completionWeekStart = getWeekStart(completionDate);\n return completionWeekStart === weekStart;\n};\n\ninterface AppProps {\n initialData?: {\n tasks: Task[];\n completions: TaskCompletion[];\n mediaItems: MediaItem[];\n currentWeek: string;\n };\n}\n\nexport function App({ initialData }: AppProps) {\n // State management\n const [tasks, setTasks] = useState(initialData?.tasks || []);\n const [completions, setCompletions] = useState(initialData?.completions || []);\n const [mediaItems, setMediaItems] = useState(initialData?.mediaItems || []);\n const [loading, setLoading] = useState(!initialData);\n const [syncing, setSyncing] = useState(false);\n const [deviceId, setDeviceId] = useState('');\n \n // Modal states\n const [showAddTask, setShowAddTask] = useState(false);\n const [showAddMedia, setShowAddMedia] = useState(false);\n const [editTaskModal, setEditTaskModal] = useState(null);\n const [taskCompletionModal, setTaskCompletionModal] = useState<{\n task: Task;\n weekStart: string;\n } | null>(null);\n const [mediaDetailModal, setMediaDetailModal] = useState<{\n group: string;\n status: string;\n items: MediaItem[];\n } | null>(null);\n const [imageSearchModal, setImageSearchModal] = useState<{\n searchQuery: string;\n onSelectImage: (imageUrl: string) => void;\n } | null>(null);\n \n // Generate device ID and register device\n useEffect(() => {\n let id = localStorage.getItem('life-status-device-id');\n if (!id) {\n id = `device-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n localStorage.setItem('life-status-device-id', id);\n }\n setDeviceId(id);\n \n // Register device with server\n fetch('/api/devices/register', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n device_id: id,\n name: navigator.userAgent.includes('iPhone') ? 'iPhone' : 'Device'\n })\n }).catch(console.error);\n }, []);\n \n // Load initial data if not provided\n useEffect(() => {\n if (!initialData && deviceId) {\n loadData();\n }\n }, [deviceId, initialData]);\n \n // Periodic sync every 30 seconds when online\n useEffect(() => {\n if (!deviceId) return;\n \n const interval = setInterval(() => {\n if (navigator.onLine) {\n syncData();\n }\n }, 30000);\n \n return () => clearInterval(interval);\n }, [deviceId]);\n \n // Handle online/offline events\n useEffect(() => {\n const handleOnline = () => {\n console.log('Device is online, syncing...');\n syncData();\n };\n \n const handleOffline = () => {\n console.log('Device is offline');\n };\n \n globalThis.addEventListener('online', handleOnline);\n globalThis.addEventListener('offline', handleOffline);\n \n return () => {\n globalThis.removeEventListener('online', handleOnline);\n globalThis.removeEventListener('offline', handleOffline);\n };\n }, []);\n \n const loadData = async () => {\n try {\n setLoading(true);\n const [tasksRes, completionsRes, mediaRes] = await Promise.all([\n fetch('/api/tasks', { headers: { 'X-Device-ID': deviceId } }),\n fetch('/api/completions', { headers: { 'X-Device-ID': deviceId } }),\n fetch('/api/media', { headers: { 'X-Device-ID': deviceId } })\n ]);\n \n const [tasksData, completionsData, mediaData] = await Promise.all([\n tasksRes.json(),\n completionsRes.json(),\n mediaRes.json()\n ]);\n \n setTasks(tasksData);\n setCompletions(completionsData);\n setMediaItems(mediaData);\n } catch (error) {\n console.error('Failed to load data:', error);\n } finally {\n setLoading(false);\n }\n };\n \n const syncData = () => {\n if (!deviceId || syncing) return;\n \n try {\n setSyncing(true);\n // Implement CRDT sync logic here\n console.log('Syncing data...');\n } catch (error) {\n console.error('Sync failed:', error);\n } finally {\n setSyncing(false);\n }\n };\n \n const addTask = async (taskData: Partial) => {\n try {\n const response = await fetch('/api/tasks', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(taskData)\n });\n \n const newTask = await response.json();\n setTasks(prev => [...prev, newTask]);\n setShowAddTask(false);\n } catch (error) {\n console.error('Failed to add task:', error);\n }\n };\n\n const updateTask = async (task: Task) => {\n try {\n const response = await fetch(`/api/tasks/${task.id}`, {\n method: 'PUT',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(task)\n });\n \n const updatedTask = await response.json();\n setTasks(prev => prev.map(t => t.id === task.id ? updatedTask : t));\n setEditTaskModal(null);\n } catch (error) {\n console.error('Failed to update task:', error);\n }\n };\n \n const completeTask = async (task: Task, _weekStart: string, notes?: string) => {\n try {\n const response = await fetch('/api/completions', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify({\n task_id: task.id,\n notes,\n user_action: 'mark_task_complete'\n })\n });\n \n const newCompletion = await response.json();\n setCompletions(prev => [...prev, newCompletion]);\n setTaskCompletionModal(null);\n } catch (error) {\n console.error('Failed to complete task:', error);\n }\n };\n\n const removeTaskCompletion = async (completionId: string) => {\n try {\n const response = await fetch(`/api/completions/${completionId}`, {\n method: 'DELETE',\n headers: {\n 'X-Device-ID': deviceId\n }\n });\n \n if (response.ok) {\n setCompletions(prev => prev.filter(c => c.id !== completionId));\n }\n } catch (error) {\n console.error('Failed to remove completion:', error);\n }\n };\n \n const updateTaskCompletion = async (completionId: string, notes: string, completedAt: string) => {\n try {\n const response = await fetch(`/api/completions/${completionId}`, {\n method: 'PUT',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify({\n notes,\n completed_at: completedAt\n })\n });\n \n if (response.ok) {\n // Update the completion in local state\n setCompletions(prev => prev.map(c => \n c.id === completionId \n ? { ...c, notes, completed_at: new Date(completedAt).getTime() }\n : c\n ));\n }\n } catch (error) {\n console.error('Failed to update completion:', error);\n }\n };\n \n const addMedia = async (mediaData: Partial) => {\n try {\n const response = await fetch('/api/media', {\n method: 'POST',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(mediaData)\n });\n \n const newMedia = await response.json();\n setMediaItems(prev => [...prev, newMedia]);\n setShowAddMedia(false);\n } catch (error) {\n console.error('Failed to add media:', error);\n }\n };\n \n const updateMedia = async (media: MediaItem) => {\n try {\n const response = await fetch(`/api/media/${media.id}`, {\n method: 'PUT',\n headers: { \n 'Content-Type': 'application/json',\n 'X-Device-ID': deviceId\n },\n body: JSON.stringify(media)\n });\n \n const updatedMedia = await response.json();\n setMediaItems(prev => prev.map(item => \n item.id === media.id ? updatedMedia : item\n ));\n } catch (error) {\n console.error('Failed to update media:', error);\n }\n };\n\n const handleOpenImageSearch = (searchQuery: string, onSelectImage: (imageUrl: string) => void) => {\n setImageSearchModal({ searchQuery, onSelectImage });\n };\n \n // Generate weeks for task grid (3 weeks back + current week)\n const generateWeeks = (): TaskGridWeek[] => {\n const weeks: TaskGridWeek[] = [];\n \n // Get current Monday\n const today = new Date();\n const currentWeekStart = getWeekStart(today);\n \n // Create exactly 4 consecutive weeks ending with current week\n const weekStartDates: string[] = [];\n \n // Start with current week Monday\n const currentMondayDate = new Date(currentWeekStart);\n \n // Generate 4 weeks: 3 previous + current\n for (let i = 3; i >= 0; i--) {\n const weekDate = new Date(currentMondayDate);\n weekDate.setDate(weekDate.getDate() - (i * 7));\n const weekStart = weekDate.toISOString().split('T')[0];\n weekStartDates.push(weekStart);\n }\n \n // Convert to week objects\n weekStartDates.forEach(weekStart => {\n const endDate = new Date(weekStart);\n endDate.setDate(endDate.getDate() + 6);\n \n weeks.push({\n start_date: weekStart,\n end_date: endDate.toISOString().split('T')[0],\n label: getWeekLabel(weekStart)\n });\n });\n \n return weeks;\n };\n \n // Group media items by status and group\n const generateMediaGrid = (): MediaGridCell[] => {\n const grid: MediaGridCell[] = [];\n const statuses = ['inbox', 'upcoming', 'in_progress', 'on_hold', 'completed'] as const;\n const groups = ['ryi', 'maini', 'ant', 'hanant', 'arj', 'arvina', 'haka', 'shaw', 'nadin'] as const;\n \n for (const group of groups) {\n for (const status of statuses) {\n const items = mediaItems.filter(item => \n item.group === group && item.status === status && !item.is_deleted\n );\n \n grid.push({\n group,\n status,\n items,\n count: items.length\n });\n }\n }\n \n return grid;\n };\n \n if (loading) {\n return (\n

Loading your life status...

\n );\n }\n \n const weeks = generateWeeks();\n const mediaGrid = generateMediaGrid();\n \n return (\n

\n {/* Header */}\n

Pathfinder

\n {navigator.onLine ? (syncing ? 'Syncing...' : 'Online') : 'Offline'}\n

\n \n

\n setShowAddTask(true)}\n className=\"px-3 py-1.5 bg-blue-500 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors\"\n >\n + Task\n \n setShowAddMedia(true)}\n className=\"px-3 py-1.5 bg-green-500 text-white text-sm font-medium rounded-lg hover:bg-green-600 transition-colors\"\n >\n + Media\n \n

\n \n {/* Main Content */}\n

\n {/* Tasks & Habits Section */}\n

Tasks

Weekly completion tracking

\n \n

\n setTaskCompletionModal({ task, weekStart })}\n onEditTask={(task) => setEditTaskModal(task)}\n />\n

\n \n {/* Media Tracking Section */}\n

Media

Books, shows, games by status

\n \n

\n \n setMediaDetailModal({ group, status, items })\n }\n />\n

\n \n {/* Modals */}\n {showAddTask && (\n setShowAddTask(false)}\n />\n )}\n\n {editTaskModal && (\n setEditTaskModal(null)}\n />\n )}\n \n {showAddMedia && (\n setShowAddMedia(false)}\n onOpenImageSearch={handleOpenImageSearch}\n />\n )}\n \n {taskCompletionModal && (\n \n c.task_id === taskCompletionModal.task.id && \n isCompletionInWeek(c, taskCompletionModal.weekStart)\n )}\n onComplete={completeTask}\n onRemoveCompletion={removeTaskCompletion}\n onUpdateCompletion={updateTaskCompletion}\n onClose={() => setTaskCompletionModal(null)}\n />\n )}\n \n {mediaDetailModal && (\n setMediaDetailModal(null)}\n onOpenImageSearch={handleOpenImageSearch}\n />\n )}\n \n {imageSearchModal && (\n setImageSearchModal(null)}\n onSelectImage={imageSearchModal.onSelectImage}\n searchQuery={imageSearchModal.searchQuery}\n />\n )}\n

\n );\n}\n",[],[229,236,262],{"_104":271,"_95":272,"_153":273,"_155":237,"_156":138,"_157":274,"_159":22,"_106":275,"_100":175,"_162":201,"_164":276,"_165":22,"_166":-5,"_167":277,"_98":278},"d313ebcc-675c-11f0-9ef4-0224a6c84d84","EditTaskModal.tsx","1d4e474e-65d9-11f0-b639-0224a6c84d84",142,["D",1753230882431],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task } from \"../../shared/types.ts\";\n\ninterface EditTaskModalProps {\n task: Task;\n onSave: (task: Task) => void;\n onClose: () => void;\n}\n\nexport function EditTaskModal({ task, onSave, onClose }: EditTaskModalProps) {\n const [formData, setFormData] = useState({\n name: task.name,\n description: task.description || '',\n frequency_per_week: task.frequency_per_week,\n category: task.category || '',\n color: task.color || '#3B82F6',\n emoji: task.emoji || ''\n });\n\n // Common emojis for quick selection\n const commonEmojis = [\n '💪', '🏃', '🚶', '🚴', '🏊', '🧘', // Fitness\n '📚', '📖', '✍️', '🎓', '💻', '📝', // Learning/Work\n '💧', '💊', '😴', '🍎', '🥗', '❤️', // Health\n '🧹', '🧺', '🍽️', '🛒', '👨‍🍳', '🏠', // Household\n '👨‍👩‍👧‍👦', '👥', '💕', '📞', '💰', '📄', // Social/Admin\n '🎨', '🎵', '📸', '🌱', '🎮', '📱', // Creative/Hobbies\n '🎯', '🔄', '⭐', '🏆', '📈', '✅' // Goals/Progress\n ];\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n const updatedTask: Task = {\n ...task,\n name: formData.name.trim(),\n description: formData.description.trim() || undefined,\n frequency_per_week: formData.frequency_per_week,\n category: formData.category.trim() || undefined,\n color: formData.color || undefined,\n emoji: formData.emoji.trim() || undefined,\n updated_at: Date.now()\n };\n \n onSave(updatedTask);\n };\n\n const handleEmojiSelect = (emoji: string) => {\n setFormData(prev => ({ ...prev, emoji }));\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n onClose();\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyDown as any);\n return () => document.removeEventListener('keydown', handleKeyDown as any);\n }, []);\n\n return (\n

Edit Task

\n \n ×\n \n

\n \n

\n {/* Task Name */}\n

\n \n Task Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n autoFocus\n />\n

\n\n {/* Custom Emoji */}\n

\n \n Custom Emoji\n \n

\n \n {/* Emoji Grid */}\n

\n {commonEmojis.map((emoji, index) => (\n handleEmojiSelect(emoji)}\n className={`\n w-8 h-8 flex items-center justify-center text-lg rounded hover:bg-blue-100 transition-colors\n ${formData.emoji === emoji ? 'bg-blue-200 ring-2 ring-blue-400' : ''}\n `}\n >\n {emoji}\n \n ))}\n

\n\n {/* Frequency */}\n

\n \n Frequency per Week\n \n setFormData(prev => ({ ...prev, frequency_per_week: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n {[1, 2, 3, 4, 5, 6, 7].map(freq => (\n \n ))}\n \n

\n\n {/* Category */}\n

\n \n Category\n \n setFormData(prev => ({ ...prev, category: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n placeholder=\"e.g., Health, Work, Learning\"\n />\n

\n\n {/* Color */}\n

\n \n Color\n \n

\n setFormData(prev => ({ ...prev, color: e.target.value }))}\n className=\"w-12 h-10 border border-gray-300 rounded cursor-pointer\"\n />\n

\n\n {/* Description */}\n

\n \n Description\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n rows={3}\n placeholder=\"Optional description...\"\n />\n

\n\n {/* Actions */}\n

\n \n Cancel\n \n \n Save Changes\n \n

\n \n

\n );\n}\n",[],[229,236,272],{"_104":280,"_95":281,"_153":282,"_155":237,"_156":138,"_157":283,"_159":22,"_106":284,"_100":285,"_162":201,"_164":286,"_165":22,"_166":-5,"_167":287,"_98":288},"8262de42-6fc0-11f0-b560-0224a6c84d84","ImageSearchModal.tsx","b5999328-6764-11f0-aadc-0224a6c84d84",209,["D",1754153306025],16,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ImageSearchResult {\n url: string;\n thumbnail: string;\n title: string;\n source: string;\n}\n\ninterface ImageSearchModalProps {\n isOpen: boolean;\n onClose: () => void;\n onSelectImage: (imageUrl: string) => void;\n searchQuery?: string;\n}\n\nexport function ImageSearchModal({ isOpen, onClose, onSelectImage, searchQuery = '' }: ImageSearchModalProps) {\n const [query, setQuery] = useState(searchQuery);\n const [results, setResults] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const searchImages = async (searchTerm: string) => {\n if (!searchTerm.trim()) return;\n \n setLoading(true);\n setError(null);\n \n try {\n const results: ImageSearchResult[] = [];\n \n // Try multiple sources for better media coverage\n \n // 1. Try Open Library for books (works well and is reliable)\n try {\n const openLibResponse = await fetch(\n `https://openlibrary.org/search.json?q=${encodeURIComponent(searchTerm)}&limit=12&fields=title,author_name,cover_i,first_publish_year`\n );\n if (openLibResponse.ok) {\n const openLibData = await openLibResponse.json();\n if (openLibData.docs) {\n openLibData.docs.forEach((book: any) => {\n if (book.cover_i) {\n const coverUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-L.jpg`;\n const thumbnailUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`;\n results.push({\n url: coverUrl,\n thumbnail: thumbnailUrl,\n title: `${book.title}${book.author_name ? ' by ' + book.author_name[0] : ''}${book.first_publish_year ? ' (' + book.first_publish_year + ')' : ''}`,\n source: 'Open Library'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('Open Library search failed, continuing with other sources');\n }\n \n // 2. Try a different approach - search for movie/TV posters via a public API\n try {\n // Using The Movie Database (TMDB) public search - no key needed for basic search\n const tmdbResponse = await fetch(\n `https://api.themoviedb.org/3/search/multi?api_key=demo&query=${encodeURIComponent(searchTerm)}`\n );\n if (tmdbResponse.ok) {\n const tmdbData = await tmdbResponse.json();\n if (tmdbData.results) {\n tmdbData.results.slice(0, 8).forEach((item: any) => {\n if (item.poster_path) {\n const posterUrl = `https://image.tmdb.org/t/p/w500${item.poster_path}`;\n const thumbnailUrl = `https://image.tmdb.org/t/p/w300${item.poster_path}`;\n results.push({\n url: posterUrl,\n thumbnail: thumbnailUrl,\n title: `${item.title || item.name}${item.release_date || item.first_air_date ? ' (' + (item.release_date || item.first_air_date).substring(0, 4) + ')' : ''}`,\n source: 'TMDB'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('TMDB search failed, continuing with other sources');\n }\n \n // 3. If we still don't have enough results, add some smart themed placeholder images\n if (results.length < 8) {\n const remainingSlots = 12 - results.length;\n \n for (let i = 0; i < remainingSlots; i++) {\n // Try to make more realistic looking covers\n const seed = `${searchTerm.replace(/\\s/g, '')}-${i}`;\n \n results.push({\n url: `https://picsum.photos/seed/${seed}/400/600?blur=1`,\n thumbnail: `https://picsum.photos/seed/${seed}/200/300?blur=1`,\n title: `${searchTerm} - Generated Cover ${i + 1}`,\n source: 'Generated'\n });\n }\n }\n \n setResults(results);\n \n } catch (err) {\n console.error('Image search failed:', err);\n setError('Failed to search for images. Please try again.');\n \n // Generate themed placeholder results as final fallback\n const searchTermClean = searchTerm.replace(/[^a-zA-Z0-9\\s]/g, '');\n const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({\n url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,\n thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTermClean)}`,\n title: `${searchTerm} - Placeholder ${i + 1}`,\n source: 'Placeholder'\n }));\n \n setResults(fallbackResults);\n } finally {\n setLoading(false);\n }\n };\n\n // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n // Auto-search when modal opens with a search query\n searchImages(searchQuery);\n }\n }, [isOpen, searchQuery]);\n\n const handleSearch = (e: React.FormEvent) => {\n e.preventDefault();\n searchImages(query);\n };\n\n const handleImageSelect = (imageUrl: string) => {\n onSelectImage(imageUrl);\n onClose();\n };\n\n if (!isOpen) return null;\n\n return (\n

\n {/* Header */}\n

Search for Cover Image

\n \n \n \n

\n\n {/* Search Form */}\n

\n\n {/* Results */}\n

\n {error && (\n

\n \n

{error}

\n )}\n\n {loading && (\n

Searching for images...

\n )}\n\n {!loading && !error && results.length === 0 && query && (\n

\n \n

No images found. Try a different search term.

\n )}\n\n {!loading && !error && results.length === 0 && !query && (\n

\n \n

Enter a search term to find cover images

\n )}\n\n {results.length > 0 && (\n

\n {results.map((image, index) => (\n handleImageSelect(image.url)}\n >\n

\n {\n const target = e.target as HTMLImageElement;\n target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwMCIgdmlld0JveD0iMCAwIDIwMCAzMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMzAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMTUwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzlDQTNBRiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+SW1hZ2UgTm90IEZvdW5kPC90ZXh0Pgo8L3N2Zz4=';\n }}\n />\n

\n \n

\n {image.title}\n

\n via {image.source}\n

\n ))}\n

\n )}\n

\n\n {/* Footer */}\n

\n Click on any image to select it as your cover\n

\n \n Cancel\n \n

\n );\n}\n",[],[229,236,281],{"_104":290,"_95":291,"_153":292,"_155":237,"_156":138,"_157":293,"_159":22,"_106":294,"_100":295,"_162":201,"_164":296,"_165":22,"_166":-5,"_167":297,"_98":298},"2899099e-6fc1-11f0-9461-0224a6c84d84","MediaDetailModal.tsx","83ba41a8-65bc-11f0-964f-0224a6c84d84",220,["D",1754153584887],23,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n onOpenImageSearch: (searchQuery: string, onSelectImage: (imageUrl: string) => void) => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100',\n upcoming: 'bg-blue-100',\n in_progress: 'bg-yellow-100',\n on_hold: 'bg-orange-100',\n completed: 'bg-green-100',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose, onOpenImageSearch }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n };\n\n const handleImageSelect = (imageUrl: string) => {\n setEditForm(prev => ({ ...prev, cover_url: imageUrl }));\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n\n if (editingItem) {\n return (\n

\n {/* Edit Header */}\n

Edit {editingItem.title}

\n setEditingItem(null)}\n className=\"text-gray-400 hover:text-gray-600 focus:outline-none\"\n >\n \n \n

\n \n {/* Edit Form */}\n

\n Status\n setEditForm(prev => ({ ...prev, status: e.target.value as MediaStatus }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n {Object.entries(STATUS_LABELS).map(([key, label]) => (\n \n ))}\n \n

\n \n

\n Progress\n setEditForm(prev => ({ ...prev, progress: e.target.value }))}\n placeholder=\"e.g., Chapter 5, Episode 3, 50%\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n Cover Image URL\n

\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }))}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n onOpenImageSearch(editingItem?.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n {editForm.cover_url && (\n

\n {\n const target = e.target as HTMLImageElement;\n target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA0OCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjI0IiB5PSIzMiIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiM5Q0EzQUYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkVycm9yPC90ZXh0Pgo8L3N2Zz4=';\n }}\n />\n

\n )}\n

\n \n

\n Notes\n setEditForm(prev => ({ ...prev, notes: e.target.value }))}\n placeholder=\"Your thoughts, progress notes...\"\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n

\n Rating\n

\n {[1, 2, 3, 4, 5].map(star => (\n setEditForm(prev => ({ \n ...prev, \n rating: prev.rating === star ? 0 : star \n }))}\n className={`w-8 h-8 ${\n star <= editForm.rating \n ? 'text-yellow-400' \n : 'text-gray-300'\n } hover:text-yellow-300 transition-colors`}\n >\n ★\n \n ))}\n

\n \n {/* Edit Footer */}\n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\n );\n }\n\n return (\n <>\n

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{items.length} item{items.length !== 1 ? 's' : ''}

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {item.cover_url ? (\n {\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.parentElement?.querySelector('.fallback-icon') as HTMLElement;\n if (fallback) fallback.style.display = 'flex';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n {/* Action Buttons */}\n

\n handleEditStart(item)}\n className=\"px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Edit\n \n \n {/* Quick status change buttons */}\n {item.status !== 'in_progress' && (\n handleStatusChange(item, 'in_progress')}\n className=\"px-3 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors\"\n >\n Start\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'completed')}\n className=\"px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 transition-colors\"\n >\n Complete\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'on_hold')}\n className=\"px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors\"\n >\n Pause\n \n )}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n \n );\n}\n",[],[229,236,291],{"_104":300,"_95":301,"_153":302,"_155":237,"_156":138,"_157":303,"_159":160,"_106":304,"_100":175,"_162":201,"_164":305,"_165":22,"_166":-5,"_167":306,"_98":307},"da36bb6c-6763-11f0-b6e5-0224a6c84d84","MediaDetailModal_backup.tsx","d1de90b6-6763-11f0-abac-0224a6c84d84",167,["D",1753233900878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100',\n upcoming: 'bg-blue-100',\n in_progress: 'bg-yellow-100',\n on_hold: 'bg-orange-100',\n completed: 'bg-green-100',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n const [imageError, setImageError] = useState(false);\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n setImageError(false);\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n \n if (items.length === 0) {\n return (\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n \n \n \n

\n \n

No items in this category yet.

\n \n

\n \n Close\n \n

\n );\n }\n \n return (\n

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n {items.length} item{items.length !== 1 ? 's' : ''}\n

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {item.cover_url ? (\n {\n // Fallback to type icon if image fails\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'block';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n

\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n

\n handleEditStart(item)}\n className=\"px-3 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n >\n Edit\n \n \n {/* Quick status change buttons */}\n {item.status !== 'in_progress' && (\n handleStatusChange(item, 'in_progress')}\n className=\"px-3 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors\"\n >\n Start\n \n )}\n \n {item.status === 'in_progress' && (\n handleStatusChange(item, 'completed')}\n className=\"px-3 py-1 text-xs bg-green-500 text-white rounded hover:bg-green-600 transition-colors\"\n >\n Complete\n \n )}\n \n {item.status !== 'on_hold' && item.status !== 'completed' && (\n handleStatusChange(item, 'on_hold')}\n className=\"px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors\"\n >\n Pause\n \n )}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n \n {/* Edit Modal */}\n {editingItem && (\n

Edit {editingItem.title}

\n \n

\n Cover Image URL\n

\n {\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }));\n setImageError(false);\n }}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {editForm.cover_url && (\n

\n setImageError(true)}\n onLoad={() => setImageError(false)}\n />\n

\n )}\n

\n \n

\n Rating\n

\n \n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\n )}\n

\n \n );\n}\n",[],[229,236,301],{"_104":309,"_95":310,"_153":311,"_155":237,"_156":138,"_157":312,"_159":160,"_106":313,"_100":32,"_162":201,"_164":314,"_165":22,"_166":-5,"_167":315,"_98":316},"755c77c6-6764-11f0-a4d8-0224a6c84d84","MediaDetailModal_new.tsx","755c787a-6764-11f0-a4d8-0224a6c84d84",169,["D",1753234161179],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaItem, MediaStatus } from \"../../shared/types.ts\";\n\ninterface MediaDetailModalProps {\n group: string;\n status: string;\n items: MediaItem[];\n onUpdate: (media: MediaItem) => void;\n onClose: () => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed',\n abandoned: 'Abandoned'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100',\n upcoming: 'bg-blue-100',\n in_progress: 'bg-yellow-100',\n on_hold: 'bg-orange-100',\n completed: 'bg-green-100',\n abandoned: 'bg-red-100'\n};\n\nexport function MediaDetailModal({ group, status, items, onUpdate, onClose }: MediaDetailModalProps) {\n const [editingItem, setEditingItem] = useState(null);\n const [editForm, setEditForm] = useState({\n progress: '',\n notes: '',\n status: status as MediaStatus,\n rating: 0,\n cover_url: ''\n });\n \n const handleEditStart = (item: MediaItem) => {\n setEditingItem(item);\n setEditForm({\n progress: item.progress || '',\n notes: item.notes || '',\n status: item.status,\n rating: item.rating || 0,\n cover_url: item.cover_url || ''\n });\n };\n \n const handleEditSave = async () => {\n if (!editingItem) return;\n \n const updatedItem: MediaItem = {\n ...editingItem,\n progress: editForm.progress.trim() || undefined,\n notes: editForm.notes.trim() || undefined,\n cover_url: editForm.cover_url.trim() || undefined,\n status: editForm.status,\n rating: editForm.rating > 0 ? editForm.rating : undefined,\n updated_at: Date.now(),\n started_at: editForm.status === 'in_progress' && !editingItem.started_at \n ? Date.now() \n : editingItem.started_at,\n completed_at: editForm.status === 'completed' && !editingItem.completed_at \n ? Date.now() \n : editingItem.completed_at\n };\n \n await onUpdate(updatedItem);\n setEditingItem(null);\n };\n \n const handleStatusChange = async (item: MediaItem, newStatus: MediaStatus) => {\n const updatedItem: MediaItem = {\n ...item,\n status: newStatus,\n updated_at: Date.now(),\n started_at: newStatus === 'in_progress' && !item.started_at \n ? Date.now() \n : item.started_at,\n completed_at: newStatus === 'completed' && !item.completed_at \n ? Date.now() \n : item.completed_at\n };\n \n await onUpdate(updatedItem);\n };\n\n if (editingItem) {\n return (\n

\n {/* Edit Header */}\n

Edit {editingItem.title}

\n setEditingItem(null)}\n className=\"text-gray-400 hover:text-gray-600 focus:outline-none\"\n >\n \n \n

\n \n {/* Edit Form */}\n

\n \n

\n Cover Image URL\n

\n setEditForm(prev => ({ ...prev, cover_url: e.target.value }))}\n placeholder=\"https://example.com/cover.jpg\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {editForm.cover_url && (\n

\n )}\n

\n \n

\n Rating\n

\n \n {/* Edit Footer */}\n

\n setEditingItem(null)}\n className=\"px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 transition-colors\"\n >\n Cancel\n \n \n Save Changes\n \n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{items.length} item{items.length !== 1 ? 's' : ''}

\n \n \n \n

\n \n {/* Items List */}\n

\n {items.map(item => (\n

\n {/* Cover Image or Type Icon */}\n

\n {MEDIA_TYPE_ICONS[item.type]}\n

\n \n {/* Content */}\n

{item.title}

\n {item.metadata?.author && (\n

by {item.metadata.author}

\n )}\n

\n \n {item.description && (\n

{item.description}

\n )}\n \n {item.progress && (\n

\n Progress: {item.progress}\n

\n )}\n \n {item.rating && (\n

\n Rating:\n {[1, 2, 3, 4, 5].map(star => (\n \n ★\n \n ))}\n

\n )}\n \n {item.notes && (\n

\"{item.notes}\"

\n )}\n \n

\n {item.metadata?.genre && (\n {item.metadata.genre}\n )}\n {item.metadata?.year && (\n {item.metadata.year}\n )}\n

\n \n {/* Action Buttons */}\n

\n ))}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n );\n}\n",[],[229,236,310],{"_104":318,"_95":319,"_153":320,"_155":237,"_156":138,"_157":321,"_159":22,"_106":322,"_100":231,"_162":201,"_164":323,"_165":22,"_166":-5,"_167":324,"_98":325},"73e6a460-6760-11f0-b032-0224a6c84d84","MediaGrid.tsx","27f70900-65bc-11f0-9398-0224a6c84d84",160,["D",1753232440722],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { MediaGridCell, MediaItem } from \"../../shared/types.ts\";\n\ninterface MediaGridProps {\n grid: MediaGridCell[];\n onCellClick: (group: string, status: string, items: MediaItem[]) => void;\n}\n\nconst STATUS_LABELS = {\n inbox: 'Inbox',\n upcoming: 'Upcoming',\n in_progress: 'In Progress',\n on_hold: 'On Hold',\n completed: 'Completed'\n};\n\nconst GROUP_LABELS = {\n ryi: 'Ryi',\n maini: 'MaiNi', \n ant: 'Ant',\n hanant: 'HanAnt',\n arj: 'Arj',\n arvina: 'Arvina',\n haka: 'Haka',\n shaw: 'Shaw',\n nadin: 'Nadin'\n};\n\nconst MEDIA_TYPE_ICONS = {\n book: '📚',\n movie: '🎬',\n tv_show: '📺',\n podcast: '🎧',\n game: '🎮',\n article: '📄',\n course: '🎓'\n};\n\nconst STATUS_COLORS = {\n inbox: 'bg-gray-100 border-gray-300',\n upcoming: 'bg-blue-100 border-blue-300',\n in_progress: 'bg-yellow-100 border-yellow-300',\n on_hold: 'bg-orange-100 border-orange-300',\n completed: 'bg-green-100 border-green-300'\n};\n\nexport function MediaGrid({ grid, onCellClick }: MediaGridProps) {\n const statuses = ['inbox', 'upcoming', 'in_progress', 'on_hold', 'completed'] as const;\n const groups = ['ryi', 'maini', 'ant', 'hanant', 'arj', 'arvina', 'haka', 'shaw', 'nadin'] as const;\n \n // Get cell for specific group and status\n const getCell = (group: string, status: string) => {\n return grid.find(cell => cell.group === group && cell.status === status) || {\n group,\n status,\n items: [],\n count: 0\n };\n };\n \n // Render media items as image collage with overlap\n const renderMediaCollage = (items: MediaItem[]) => {\n if (items.length === 0) {\n return (\n

\n );\n }\n \n const visibleItems = items.slice(0, 4); // Show max 4 items for smaller space\n const hasMore = items.length > 4;\n \n return (\n

\n {visibleItems.map((item, index) => (\n \n {item.cover_url ? (\n {\n // Fallback to type icon if image fails to load\n const target = e.target as HTMLImageElement;\n target.style.display = 'none';\n const fallback = target.nextElementSibling as HTMLElement;\n if (fallback) fallback.style.display = 'flex';\n }}\n />\n ) : null}\n

\n {MEDIA_TYPE_ICONS[item.type] || '📄'}\n

\n ))}\n {hasMore && (\n

\n +{items.length - 4}\n

\n )}\n

\n );\n };\n \n if (grid.length === 0) {\n return (\n

\n \n

No media tracked yet

Add books, shows, or games to start tracking!

\n );\n }\n \n return (\n

\n {/* Header row with status labels (horizontal) */}\n

\n 👥\n

\n {statuses.map(status => (\n

\n {STATUS_LABELS[status]}\n

\n ))}\n

\n \n {/* Group rows */}\n {groups.map(group => (\n

\n {/* Group name column (vertical text) */}\n

\n {GROUP_LABELS[group]}\n

\n \n {/* Status columns */}\n {statuses.map(status => {\n const cell = getCell(group, status);\n \n return (\n

\n onCellClick(cell.group, cell.status, cell.items)}\n className={`\n media-item w-full h-16 rounded-lg border-2 p-1 text-left\n ${STATUS_COLORS[status]}\n hover:scale-105 transition-all duration-200 \n focus:outline-none focus:ring-2 focus:ring-blue-400\n ${cell.count > 0 ? 'cursor-pointer' : 'cursor-default'}\n `}\n >\n {renderMediaCollage(cell.items)}\n \n {/* Count badge */}\n {cell.count > 0 && (\n

\n \n {cell.count}\n \n {cell.items.some(item => item.progress) && (\n

\n )}\n

\n )}\n \n

\n );\n })}\n

\n ))}\n

\n );\n}\n",[],[229,236,319],{"_104":327,"_95":328,"_153":329,"_155":237,"_156":138,"_157":330,"_159":22,"_106":331,"_100":222,"_162":201,"_164":332,"_165":22,"_166":-5,"_167":333,"_98":334},"e1fd78fe-675e-11f0-9358-0224a6c84d84","TaskCompletionModal.tsx","647dda84-65bc-11f0-8fb7-0224a6c84d84",149,["D",1753231766448],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task, TaskCompletion } from \"../../shared/types.ts\";\nimport { getWeekLabel } from \"../../shared/types.ts\";\n\ninterface TaskCompletionModalProps {\n task: Task;\n weekStart: string;\n currentCompletions: TaskCompletion[];\n onComplete: (task: Task, weekStart: string, notes?: string) => void;\n onRemoveCompletion?: (completionId: string) => void;\n onUpdateCompletion?: (completionId: string, notes: string, completedAt: string) => void;\n onClose: () => void;\n}\n\nexport function TaskCompletionModal({ \n task, \n weekStart, \n currentCompletions, \n onComplete, \n onRemoveCompletion,\n onUpdateCompletion,\n onClose \n}: TaskCompletionModalProps) {\n const [notes, setNotes] = useState('');\n const [working, setWorking] = useState(false);\n const [editingCompletion, setEditingCompletion] = useState(null);\n const [editNotes, setEditNotes] = useState('');\n const [editDateTime, setEditDateTime] = useState('');\n \n const weekLabel = getWeekLabel(weekStart);\n const completionCount = currentCompletions.length;\n const target = task.frequency_per_week || 1; // Default to 1 if not set\n const isOverCompleted = completionCount > target;\n \n const handleAddCompletion = async () => {\n setWorking(true);\n try {\n await onComplete(task, weekStart, notes.trim() || undefined);\n // Clear notes for next completion\n setNotes('');\n } finally {\n setWorking(false);\n }\n };\n \n const handleRemoveCompletion = async (completionId: string) => {\n if (!onRemoveCompletion) return;\n \n setWorking(true);\n try {\n await onRemoveCompletion(completionId);\n } finally {\n setWorking(false);\n }\n };\n \n const handleEditCompletion = (completion: TaskCompletion) => {\n setEditingCompletion(completion);\n setEditNotes(completion.notes || '');\n // Format datetime for input - convert to local timezone\n const date = new Date(completion.completed_at);\n // Format as YYYY-MM-DDTHH:MM for datetime-local input\n const localDateTime = new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 16);\n setEditDateTime(localDateTime);\n };\n \n const handleSaveEdit = async () => {\n if (!editingCompletion || !onUpdateCompletion) return;\n \n setWorking(true);\n try {\n // Convert back to UTC ISO string\n const utcDateTime = new Date(editDateTime).toISOString();\n await onUpdateCompletion(editingCompletion.id, editNotes.trim(), utcDateTime);\n setEditingCompletion(null);\n setEditNotes('');\n setEditDateTime('');\n } finally {\n setWorking(false);\n }\n };\n \n const handleCancelEdit = () => {\n setEditingCompletion(null);\n setEditNotes('');\n setEditDateTime('');\n };\n \n return (\n

\n {/* Header */}\n

\n {task.frequency_per_week === 1 ? 'Complete Task' : 'Track Progress'}\n

\n \n \n \n

\n \n {/* Content */}\n

\n {/* Task Info */}\n

\n {task.color && (\n

\n )}\n

{task.name}

\n \n

\n Week of {weekLabel}\n

\n \n {task.description && (\n

{task.description}

\n )}\n \n {task.category && (\n \n {task.category}\n \n )}\n

\n \n {/* Progress Display */}\n

\n \n Progress: {completionCount} / {target}\n \n \n {Math.round((completionCount / target) * 100)}%\n \n

\n \n {/* Progress bar */}\n

\n \n {completionCount >= target && (\n

\n {isOverCompleted \n ? `🎉 Over-achieved! (+${completionCount - target} extra)`\n : '✓ Target completed!'\n }\n

\n )}\n

\n \n {/* Existing Completions */}\n {currentCompletions.length > 0 && (\n

\n Completed this week ({currentCompletions.length}):\n

\n {currentCompletions.map((completion, index) => {\n const completedDate = new Date(completion.completed_at);\n const dayName = completedDate.toLocaleDateString('en-US', { weekday: 'short' });\n const dateStr = completedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n const timeStr = completedDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });\n \n const isEditing = editingCompletion?.id === completion.id;\n \n if (isEditing) {\n return (\n

\n \n Date & Time\n \n setEditDateTime(e.target.value)}\n className=\"w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Notes\n \n setEditNotes(e.target.value)}\n placeholder=\"Add notes about this completion...\"\n rows={2}\n className=\"w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n />\n

\n \n Cancel\n \n \n Save\n \n

\n );\n }\n \n return (\n

\n \n #{index + 1} - {dayName} {dateStr} at {timeStr}\n \n {completion.notes && (\n

\n {completion.notes}\n

\n )}\n

\n {onUpdateCompletion && (\n handleEditCompletion(completion)}\n disabled={working}\n className=\"text-blue-500 hover:text-blue-700 text-xs px-1 disabled:opacity-50\"\n title=\"Edit completion\"\n >\n Edit\n \n )}\n {onRemoveCompletion && (\n handleRemoveCompletion(completion.id)}\n disabled={working}\n className=\"text-red-500 hover:text-red-700 text-xs px-1 disabled:opacity-50\"\n title=\"Remove completion\"\n >\n Remove\n \n )}\n

\n );\n })}\n

\n )}\n \n {/* Add New Completion */}\n

\n \n Add completion #{completionCount + 1}\n {isOverCompleted && (\n (over target!)\n )}\n \n setNotes(e.target.value)}\n placeholder=\"Add any notes about this completion...\"\n rows={2}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n />\n

\n e.g., \"30 minute walk\", \"Read chapter 3\", \"Called mom\"\n

\n \n {/* Footer */}\n

\n \n Close\n \n \n \n {working ? (\n <>\n

\n Adding...\n \n ) : (\n <>\n \n Add Completion\n \n )}\n \n

\n );\n}\n",[],[229,236,328],{"_104":336,"_95":337,"_153":338,"_155":237,"_156":138,"_157":339,"_159":22,"_106":340,"_100":341,"_162":201,"_164":342,"_165":22,"_166":-5,"_167":343,"_98":344},"9822797e-6fc3-11f0-9bdc-0224a6c84d84","TaskGrid.tsx","1584053e-65bc-11f0-9ce1-0224a6c84d84",244,["D",1754154631008],33,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Task, TaskCompletion, TaskGridWeek } from \"../../shared/types.ts\";\nimport { getWeekStart } from \"../../shared/types.ts\";\n\ninterface TaskGridProps {\n tasks: Task[];\n completions: TaskCompletion[];\n weeks: TaskGridWeek[];\n onTaskClick: (task: Task, weekStart: string) => void;\n onEditTask?: (task: Task) => void;\n}\n\n// Helper function to check if a completion falls within a specific week\nconst isCompletionInWeek = (completion: TaskCompletion, weekStart: string): boolean => {\n const completionDate = new Date(completion.completed_at);\n const completionWeekStart = getWeekStart(completionDate);\n return completionWeekStart === weekStart;\n};\n\nexport function TaskGrid({ tasks, completions, weeks, onTaskClick, onEditTask }: TaskGridProps) {\n // Get completion count for a task in a specific week\n const getCompletionCount = (taskId: string, weekStart: string) => {\n return completions.filter(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n ).length;\n };\n \n // Check if a task is fully completed (legacy for single completion tasks)\n const _isTaskCompleted = (taskId: string, weekStart: string) => {\n return completions.some(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n );\n };\n \n // Get completion notes for a task in a specific week\n const getCompletionNotes = (taskId: string, weekStart: string) => {\n const taskCompletions = completions.filter(completion => \n completion.task_id === taskId && \n isCompletionInWeek(completion, weekStart) && \n !completion.is_deleted\n );\n return taskCompletions.map(c => c.notes).filter(Boolean).join(', ');\n };\n \n // Render progress indicator based on task frequency\n const renderProgressIndicator = (task: Task, weekStart: string, isCurrentWeek: boolean) => {\n const completionCount = getCompletionCount(task.id, weekStart);\n const target = task.frequency_per_week || 1; // Default to 1 if not set\n const isCompleted = completionCount >= target;\n const isOverCompleted = completionCount > target;\n const progress = completionCount / target; // Allow progress > 1 for over-completion\n \n if ((task.frequency_per_week || 1) === 1) {\n // Single completion - but allow multiple if user adds more\n return (\n onTaskClick(task, weekStart)}\n disabled={!isCurrentWeek}\n className={`\n task-circle w-7 h-7 rounded-full border-2 flex items-center justify-center relative\n ${isOverCompleted \n ? 'bg-purple-500 border-purple-500 text-white' \n : isCompleted \n ? 'bg-green-500 border-green-500 text-white' \n : isCurrentWeek \n ? 'border-blue-300 hover:border-blue-400 hover:bg-blue-50' \n : 'border-gray-300'\n }\n ${isCurrentWeek && !isCompleted ? 'ring-2 ring-blue-200' : ''}\n ${isCurrentWeek ? 'cursor-pointer hover:scale-105' : 'cursor-default'}\n transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400\n `}\n title={`${completionCount}/${target} completed ${getCompletionNotes(task.id, weekStart) ? `- ${getCompletionNotes(task.id, weekStart)}` : ''}`}\n >\n {isCompleted ? (\n <>\n \n {/* Show count if more than 1 completion */}\n {completionCount > 1 && (\n \n {completionCount}\n \n )}\n \n ) : (\n

\n )}\n \n );\n } else {\n // Multiple completions - show progress ring with count, allow over 100%\n const circumference = 2 * Math.PI * 12; // radius of 12 (reduced from 14)\n const strokeDasharray = circumference;\n const clampedProgress = Math.min(progress, 1); // Clamp visual progress to 100%\n const strokeDashoffset = circumference - (clampedProgress * circumference);\n \n return (\n onTaskClick(task, weekStart)}\n disabled={!isCurrentWeek}\n className={`\n task-circle relative w-7 h-7 flex items-center justify-center\n ${isCurrentWeek ? 'cursor-pointer hover:scale-105' : 'cursor-default'}\n transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400\n ${isCurrentWeek && !isCompleted ? 'ring-2 ring-blue-200' : ''}\n `}\n title={`${completionCount}/${target} completed ${getCompletionNotes(task.id, weekStart) ? `- ${getCompletionNotes(task.id, weekStart)}` : ''}`}\n >\n {/* Progress ring background */}\n \n \n {/* Count display */}\n 0 \n ? 'text-blue-600' \n : 'text-gray-400'\n }`}>\n {completionCount}\n \n \n );\n }\n };\n \n if (tasks.length === 0) {\n return (\n

\n \n

No tasks yet

Add your first task or habit to start tracking!

\n );\n }\n \n // Get emoji for task based on custom emoji or name/category\n const getTaskEmoji = (task: Task): string => {\n // Use custom emoji if set\n if (task.emoji) {\n return task.emoji;\n }\n \n const name = task.name.toLowerCase();\n const category = task.category?.toLowerCase() || '';\n \n // Exercise/fitness\n if (name.includes('workout') || name.includes('exercise') || name.includes('gym') || name.includes('run') || category.includes('fitness')) return '💪';\n if (name.includes('walk') || name.includes('steps')) return '🚶';\n if (name.includes('bike') || name.includes('cycling')) return '🚴';\n if (name.includes('swim')) return '🏊';\n if (name.includes('yoga') || name.includes('stretch')) return '🧘';\n \n // Work/productivity\n if (name.includes('work') || name.includes('code') || name.includes('project') || category.includes('work')) return '💼';\n if (name.includes('meeting') || name.includes('call')) return '📞';\n if (name.includes('email') || name.includes('inbox')) return '📧';\n if (name.includes('plan') || name.includes('review')) return '📋';\n \n // Health/wellness\n if (name.includes('water') || name.includes('drink')) return '💧';\n if (name.includes('medicine') || name.includes('vitamin') || name.includes('supplement')) return '💊';\n if (name.includes('sleep') || name.includes('bed')) return '😴';\n if (name.includes('meditation') || name.includes('mindful')) return '🧘';\n if (name.includes('doctor') || name.includes('appointment')) return '👩‍⚕️';\n \n // Learning/reading\n if (name.includes('read') || name.includes('book') || category.includes('reading')) return '📖';\n if (name.includes('study') || name.includes('learn') || category.includes('learning')) return '📚';\n if (name.includes('course') || name.includes('lesson')) return '🎓';\n if (name.includes('practice') && (name.includes('language') || name.includes('guitar') || name.includes('piano'))) return '🎵';\n \n // Household/chores\n if (name.includes('clean') || name.includes('tidy') || category.includes('chores')) return '🧹';\n if (name.includes('laundry') || name.includes('wash')) return '🧺';\n if (name.includes('dishes') || name.includes('kitchen')) return '🍽️';\n if (name.includes('grocery') || name.includes('shopping')) return '🛒';\n if (name.includes('cook') || name.includes('meal')) return '👨‍🍳';\n \n // Social/relationships\n if (name.includes('call') && (name.includes('mom') || name.includes('dad') || name.includes('family'))) return '👨‍👩‍👧‍👦';\n if (name.includes('friend') || name.includes('social') || category.includes('social')) return '👥';\n if (name.includes('date') || name.includes('wife') || name.includes('partner')) return '💕';\n \n // Creative/hobbies\n if (name.includes('write') || name.includes('journal') || category.includes('writing')) return '✍️';\n if (name.includes('draw') || name.includes('art') || category.includes('art')) return '🎨';\n if (name.includes('photo') || name.includes('picture')) return '📸';\n if (name.includes('music') || name.includes('guitar') || name.includes('piano')) return '🎵';\n if (name.includes('garden') || name.includes('plant')) return '🌱';\n \n // Finance/admin\n if (name.includes('budget') || name.includes('finance') || name.includes('money') || category.includes('finance')) return '💰';\n if (name.includes('bill') || name.includes('payment')) return '💳';\n if (name.includes('tax') || name.includes('document')) return '📄';\n \n // Tech/digital\n if (name.includes('backup') || name.includes('update')) return '💾';\n if (name.includes('app') || name.includes('software')) return '📱';\n \n // Default fallbacks\n if (category) {\n if (category.includes('health')) return '❤️';\n if (category.includes('habit')) return '🔄';\n if (category.includes('goal')) return '🎯';\n }\n \n // Final fallback\n return '📝';\n };\n\n // Helper function to format week label across two lines\n const formatWeekLabel = (weekStart: string) => {\n const start = new Date(weekStart);\n const end = new Date(start);\n end.setDate(start.getDate() + 6);\n \n const startMonth = start.toLocaleDateString('en-US', { month: 'short' });\n const endMonth = end.toLocaleDateString('en-US', { month: 'short' });\n const startDay = start.getDate();\n const endDay = end.getDate();\n \n if (startMonth === endMonth) {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${startMonth} ${endDay}`\n };\n } else {\n return {\n line1: `${startMonth} ${startDay}`,\n line2: `${endMonth} ${endDay}`\n };\n }\n };\n\n return (\n

\n {/* Header row with week labels */}\n

\n 📋\n

\n {weeks.map(week => {\n const weekLabel = formatWeekLabel(week.start_date);\n return (\n

{weekLabel.line1}

{weekLabel.line2}

\n );\n })}\n

\n \n {/* Task rows */}\n {tasks.map(task => (\n

\n {/* Task emoji column */}\n

\n onEditTask?.(task)}\n className=\"text-sm hover:scale-110 transition-transform cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 rounded\"\n title={`${task.name}${task.frequency_per_week && task.frequency_per_week > 1 ? ` (${task.frequency_per_week}x/week)` : ''}${task.category ? ` - ${task.category}` : ''}\\n\\nClick to edit`}\n >\n {getTaskEmoji(task)}\n \n

\n \n {/* Week completion columns */}\n {weeks.map(week => {\n const isCurrentWeek = week.start_date === getWeekStart();\n \n return (\n

\n {renderProgressIndicator(task, week.start_date, isCurrentWeek)}\n

\n );\n })}\n

\n ))}\n

\n );\n}\n",[],[229,236,337],[229,236],{"_104":347,"_95":348,"_153":349,"_155":230,"_156":138,"_157":350,"_159":160,"_106":351,"_100":32,"_162":176,"_164":352,"_165":22,"_166":-5,"_167":353,"_98":354},"a71d69a0-65bb-11f0-b4b9-0224a6c84d84","favicon.svg","a71d6a68-65bb-11f0-b4b9-0224a6c84d84",20,["D",1753051708537],"\n",[],[229,348],{"_104":356,"_95":357,"_153":358,"_155":230,"_156":138,"_157":101,"_159":22,"_106":359,"_100":360,"_162":176,"_164":361,"_165":22,"_166":-5,"_167":362,"_98":363},"e7c16600-6fc5-11f0-81ad-0224a6c84d84","index.html","9b0baad2-65bb-11f0-99ff-0224a6c84d84",["D",1754155623580],9,"\n\n\n \n \n Pathfinder\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n

Loading your life status...

\n \n \n \n \n \n \n\n\n",[],[229,357],{"_104":365,"_95":366,"_153":367,"_155":230,"_156":138,"_157":368,"_159":22,"_106":369,"_100":32,"_162":201,"_164":370,"_165":22,"_166":-5,"_167":371,"_98":372},"8b6f528a-65bc-11f0-9d49-0224a6c84d84","index.tsx","8b6f5352-65bc-11f0-9d49-0224a6c84d84",38,["D",1753052091600],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport { App } from \"./components/App.tsx\";\n\n// Get initial data injected by the server\nconst initialData = (globalThis as any).__INITIAL_DATA__;\n\n// Create root and render app\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n\n// Register for updates\nif ('serviceWorker' in navigator) {\n navigator.serviceWorker.addEventListener('message', (event) => {\n if (event.data?.type === 'CACHE_UPDATED') {\n console.log('App cache updated, consider refreshing');\n }\n });\n}\n\n// Handle install prompt for PWA\nlet deferredPrompt: any;\n\nglobalThis.addEventListener('beforeinstallprompt', (e) => {\n // Prevent Chrome 67 and earlier from automatically showing the prompt\n e.preventDefault();\n // Stash the event so it can be triggered later\n deferredPrompt = e;\n \n // Show custom install UI if desired\n console.log('PWA install prompt available');\n});\n\nglobalThis.addEventListener('appinstalled', () => {\n console.log('PWA was installed');\n deferredPrompt = null;\n});\n\n// Add to home screen helper function (can be called from UI)\n(globalThis as any).installPWA = async () => {\n if (deferredPrompt) {\n deferredPrompt.prompt();\n const { outcome } = await deferredPrompt.userChoice;\n console.log('User choice:', outcome);\n deferredPrompt = null;\n }\n};\n\nconsole.log('Life Status PWA loaded successfully');\n",[],[229,366],{"_104":374,"_95":375,"_153":376,"_155":230,"_156":138,"_157":377,"_159":22,"_106":378,"_100":32,"_162":176,"_164":379,"_165":22,"_166":-5,"_167":380,"_98":381},"a2eeeeee-65bb-11f0-b4b9-0224a6c84d84","manifest.json","a2eeefb6-65bb-11f0-b4b9-0224a6c84d84",19,["D",1753051701526],"{\n \"name\": \"Life Status - At a Glance\",\n \"short_name\": \"Life Status\",\n \"description\": \"Your personal dashboard for tasks, habits, and media tracking\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#1f2937\",\n \"theme_color\": \"#1f2937\",\n \"orientation\": \"portrait-primary\",\n \"scope\": \"/\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"any\",\n \"type\": \"image/svg+xml\",\n \"purpose\": \"any maskable\"\n }\n ],\n \"categories\": [\"productivity\", \"lifestyle\"],\n \"screenshots\": [\n {\n \"src\": \"/frontend/screenshot-mobile.jpg\",\n \"sizes\": \"390x844\",\n \"type\": \"image/jpeg\",\n \"form_factor\": \"narrow\",\n \"label\": \"Task and habit tracking on mobile\"\n }\n ],\n \"shortcuts\": [\n {\n \"name\": \"Add Task\",\n \"short_name\": \"Add Task\",\n \"description\": \"Quickly add a new task or habit\",\n \"url\": \"/?action=add-task\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"96x96\"\n }\n ]\n },\n {\n \"name\": \"Add Media\",\n \"short_name\": \"Add Media\",\n \"description\": \"Add new media to track\",\n \"url\": \"/?action=add-media\",\n \"icons\": [\n {\n \"src\": \"/frontend/favicon.svg\",\n \"sizes\": \"96x96\"\n }\n ]\n }\n ]\n}\n",[],[229,375],{"_104":383,"_95":384,"_153":385,"_155":230,"_156":138,"_157":246,"_159":22,"_106":386,"_100":387,"_162":201,"_164":388,"_165":22,"_166":-5,"_167":389,"_98":390},"cf4465aa-65bb-11f0-9401-0224a6c84d84","sw.js","bc028a4e-65bb-11f0-ae09-0224a6c84d84",["D",1753051775903],5,"// Service Worker for Life Status PWA\nconst _CACHE_NAME = 'life-status-v1';\nconst STATIC_CACHE = 'life-status-static-v1';\nconst DATA_CACHE = 'life-status-data-v1';\n\n// Files to cache for offline use\nconst STATIC_FILES = [\n '/',\n '/frontend/index.html',\n '/frontend/index.tsx',\n '/frontend/components/App.tsx',\n '/frontend/favicon.svg',\n '/frontend/manifest.json',\n '/shared/types.ts',\n 'https://cdn.twind.style',\n 'https://esm.sh/react@18.2.0',\n 'https://esm.sh/react-dom@18.2.0'\n];\n\n// API endpoints to cache\nconst _API_ENDPOINTS = [\n '/api/tasks',\n '/api/completions',\n '/api/media',\n '/api/health'\n];\n\n// Install event - cache static files\nself.addEventListener('install', (event) => {\n console.log('Service Worker: Installing...');\n \n event.waitUntil(\n Promise.all([\n caches.open(STATIC_CACHE).then((cache) => {\n console.log('Service Worker: Caching static files');\n return cache.addAll(STATIC_FILES.map(url => new Request(url, { cache: 'reload' })));\n }),\n caches.open(DATA_CACHE)\n ]).then(() => {\n console.log('Service Worker: Installation complete');\n return self.skipWaiting();\n })\n );\n});\n\n// Activate event - clean up old caches\nself.addEventListener('activate', (event) => {\n console.log('Service Worker: Activating...');\n \n event.waitUntil(\n caches.keys().then((cacheNames) => {\n return Promise.all(\n cacheNames.map((cacheName) => {\n if (cacheName !== STATIC_CACHE && cacheName !== DATA_CACHE) {\n console.log('Service Worker: Deleting old cache:', cacheName);\n return caches.delete(cacheName);\n }\n })\n );\n }).then(() => {\n console.log('Service Worker: Activation complete');\n return self.clients.claim();\n })\n );\n});\n\n// Fetch event - serve from cache when offline\nself.addEventListener('fetch', (event) => {\n const { request } = event;\n const url = new URL(request.url);\n \n // Handle API requests\n if (url.pathname.startsWith('/api/')) {\n event.respondWith(handleApiRequest(request));\n return;\n }\n \n // Handle static files\n if (request.method === 'GET') {\n event.respondWith(handleStaticRequest(request));\n return;\n }\n});\n\n// Handle API requests with network-first strategy\nasync function handleApiRequest(request) {\n const _url = new URL(request.url);\n \n try {\n // Try network first\n const networkResponse = await fetch(request.clone());\n \n if (networkResponse.ok) {\n // Cache successful GET requests\n if (request.method === 'GET') {\n const cache = await caches.open(DATA_CACHE);\n cache.put(request.url, networkResponse.clone());\n }\n \n // Sync any pending operations after successful network request\n if (request.method === 'POST' || request.method === 'PUT') {\n self.registration.sync.register('sync-operations');\n }\n }\n \n return networkResponse;\n } catch (_error) {\n console.log('Service Worker: Network request failed, trying cache');\n \n // For GET requests, try to serve from cache\n if (request.method === 'GET') {\n const cachedResponse = await caches.match(request);\n if (cachedResponse) {\n return cachedResponse;\n }\n }\n \n // For POST/PUT requests when offline, store in IndexedDB for later sync\n if (request.method === 'POST' || request.method === 'PUT') {\n await storeOfflineOperation(request);\n \n // Return a success response to keep the UI working\n return new Response(JSON.stringify({ \n success: true, \n offline: true,\n message: 'Operation stored for sync when online'\n }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Return offline response\n return new Response(JSON.stringify({ \n error: 'Offline', \n message: 'No cached data available' \n }), {\n status: 503,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n}\n\n// Handle static requests with cache-first strategy\nasync function handleStaticRequest(request) {\n try {\n // Try cache first\n const cachedResponse = await caches.match(request);\n if (cachedResponse) {\n return cachedResponse;\n }\n \n // Fallback to network\n const networkResponse = await fetch(request);\n \n // Cache the response for future use\n if (networkResponse.ok) {\n const cache = await caches.open(STATIC_CACHE);\n cache.put(request, networkResponse.clone());\n }\n \n return networkResponse;\n } catch (_error) {\n console.log('Service Worker: Failed to fetch static resource:', request.url);\n \n // For HTML requests, return the cached index page\n if (request.headers.get('Accept')?.includes('text/html')) {\n const cachedPage = await caches.match('/');\n if (cachedPage) {\n return cachedPage;\n }\n }\n \n // Return a basic offline response\n return new Response('Offline', { status: 503 });\n }\n}\n\n// Store offline operations in IndexedDB\nasync function storeOfflineOperation(request) {\n try {\n const body = await request.text();\n const operation = {\n url: request.url,\n method: request.method,\n headers: Object.fromEntries(request.headers.entries()),\n body: body,\n timestamp: Date.now()\n };\n \n // Store in IndexedDB for background sync\n const db = await openDB();\n const tx = db.transaction(['offline_operations'], 'readwrite');\n await tx.objectStore('offline_operations').add(operation);\n await tx.complete;\n \n console.log('Service Worker: Stored offline operation for sync');\n } catch (error) {\n console.error('Service Worker: Failed to store offline operation:', error);\n }\n}\n\n// Open IndexedDB for offline storage\nfunction openDB() {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open('LifeStatusDB', 1);\n \n request.onerror = () => reject(request.error);\n request.onsuccess = () => resolve(request.result);\n \n request.onupgradeneeded = (event) => {\n const db = event.target.result;\n \n if (!db.objectStoreNames.contains('offline_operations')) {\n const store = db.createObjectStore('offline_operations', { \n keyPath: 'id', \n autoIncrement: true \n });\n store.createIndex('timestamp', 'timestamp');\n }\n };\n });\n}\n\n// Background sync event\nself.addEventListener('sync', (event) => {\n if (event.tag === 'sync-operations') {\n event.waitUntil(syncOfflineOperations());\n }\n});\n\n// Sync offline operations when back online\nasync function syncOfflineOperations() {\n try {\n const db = await openDB();\n const tx = db.transaction(['offline_operations'], 'readonly');\n const operations = await tx.objectStore('offline_operations').getAll();\n \n for (const operation of operations) {\n try {\n const response = await fetch(operation.url, {\n method: operation.method,\n headers: operation.headers,\n body: operation.body\n });\n \n if (response.ok) {\n // Remove successfully synced operation\n const deleteTx = db.transaction(['offline_operations'], 'readwrite');\n await deleteTx.objectStore('offline_operations').delete(operation.id);\n console.log('Service Worker: Synced offline operation:', operation.url);\n }\n } catch (error) {\n console.error('Service Worker: Failed to sync operation:', error);\n }\n }\n } catch (error) {\n console.error('Service Worker: Failed to sync offline operations:', error);\n }\n}\n\n// Push notification support (for future use)\nself.addEventListener('push', (event) => {\n const options = {\n body: event.data ? event.data.text() : 'New update available',\n icon: '/frontend/favicon.svg',\n badge: '/frontend/favicon.svg',\n vibrate: [100, 50, 100],\n data: {\n dateOfArrival: Date.now(),\n primaryKey: 1\n }\n };\n \n event.waitUntil(\n self.registration.showNotification('Life Status', options)\n );\n});\n\nconsole.log('Service Worker: Loaded successfully');\n",[],[229,384],[229],{"_104":393,"_95":394,"_153":395,"_155":-5,"_156":138,"_157":360,"_159":160,"_106":396,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":397,"_98":407},"3c2890ac-65bb-11f0-8588-0224a6c84d84","shared","3c289160-65bb-11f0-8588-0224a6c84d84",["D",1753051529098],[398],{"_104":399,"_95":400,"_153":401,"_155":395,"_156":138,"_157":402,"_159":22,"_106":403,"_100":185,"_162":201,"_164":404,"_165":22,"_166":-5,"_167":405,"_98":406},"f3aa2890-65d8-11f0-bfe4-0224a6c84d84","types.ts","4dcaf8ae-65bb-11f0-974b-0224a6c84d84",108,["D",1753064292374],"// Shared types for the Life Status PWA\n\nexport interface CRDTOperation {\n id: string;\n timestamp: number;\n deviceId: string;\n operation: 'create' | 'update' | 'delete';\n entity: 'task' | 'habit' | 'media' | 'completion';\n entityId: string;\n data: any;\n vector_clock: Record;\n}\n\nexport interface AuditLogEntry {\n id: string;\n timestamp: number;\n deviceId: string;\n operation: CRDTOperation;\n user_action?: string;\n notes?: string;\n}\n\n// Task/Habit tracking types\nexport interface Task {\n id: string;\n name: string;\n description?: string;\n frequency_per_week: number; // e.g., 1 = once a week, 3 = three times\n created_at: number;\n updated_at: number;\n is_deleted: boolean;\n category?: string;\n color?: string;\n emoji?: string; // Custom emoji for the task\n}\n\nexport interface TaskCompletion {\n id: string;\n task_id: string;\n completed_at: number;\n notes?: string;\n created_at: number;\n is_deleted: boolean;\n}\n\n// Media tracking types\nexport type MediaStatus = 'inbox' | 'upcoming' | 'in_progress' | 'on_hold' | 'completed' | 'abandoned';\nexport type MediaType = 'book' | 'movie' | 'tv_show' | 'podcast' | 'game' | 'article' | 'course';\nexport type MediaGroup = 'ryi' | 'maini' | 'ant' | 'hanant' | 'arj' | 'arvina' | 'haka' | 'shaw' | 'nadin';\n\nexport interface MediaItem {\n id: string;\n title: string;\n type: MediaType;\n status: MediaStatus;\n group: MediaGroup;\n description?: string;\n cover_url?: string;\n progress?: string; // e.g., \"Chapter 5\", \"Episode 3\", \"50%\"\n rating?: number; // 1-5 stars\n notes?: string;\n started_at?: number;\n completed_at?: number;\n created_at: number;\n updated_at: number;\n is_deleted: boolean;\n metadata?: {\n author?: string;\n director?: string;\n genre?: string;\n year?: number;\n duration?: string;\n isbn?: string;\n imdb_id?: string;\n };\n}\n\n// Sync and device management\nexport interface DeviceInfo {\n id: string;\n name: string;\n last_sync: number;\n vector_clock: Record;\n}\n\nexport interface SyncPayload {\n device_id: string;\n operations: CRDTOperation[];\n vector_clock: Record;\n}\n\nexport interface SyncResponse {\n operations: CRDTOperation[];\n vector_clock: Record;\n conflicts?: CRDTOperation[];\n}\n\n// UI State types\nexport interface TaskGridWeek {\n start_date: string; // ISO date string for Monday\n end_date: string; // ISO date string for Sunday\n label: string; // e.g., \"Dec 16-22\"\n}\n\nexport interface MediaGridCell {\n group: MediaGroup;\n status: MediaStatus;\n items: MediaItem[];\n count: number;\n}\n\n// Week utilities\nexport function getWeekStart(date: Date = new Date()): string {\n const d = new Date(date);\n \n // Ensure we're working in local timezone\n const year = d.getFullYear();\n const month = d.getMonth();\n const dateNum = d.getDate();\n \n // Create a new date to avoid timezone issues\n const localDate = new Date(year, month, dateNum);\n const day = localDate.getDay(); // 0 = Sunday, 1 = Monday, etc.\n \n // Calculate days to subtract to get to the Monday of this week\n // If it's Sunday (0), go back 6 days to get the Monday of this week\n // If it's Monday (1), go back 0 days (it's already Monday)\n // If it's Tuesday (2), go back 1 day to get Monday, etc.\n const daysToSubtract = day === 0 ? 6 : day - 1;\n \n localDate.setDate(localDate.getDate() - daysToSubtract);\n \n // Format as YYYY-MM-DD\n const year2 = localDate.getFullYear();\n const month2 = String(localDate.getMonth() + 1).padStart(2, '0');\n const date2 = String(localDate.getDate()).padStart(2, '0');\n \n return `${year2}-${month2}-${date2}`;\n}\n\nexport function getWeekLabel(weekStart: string): string {\n const start = new Date(weekStart);\n const end = new Date(start);\n end.setDate(start.getDate() + 6);\n \n const startMonth = start.toLocaleDateString('en-US', { month: 'short' });\n const endMonth = end.toLocaleDateString('en-US', { month: 'short' });\n const startDay = start.getDate();\n const endDay = end.getDate();\n \n if (startMonth === endMonth) {\n return `${startMonth} ${startDay}-${endDay}`;\n } else {\n return `${startMonth} ${startDay} - ${endMonth} ${endDay}`;\n }\n}\n\nexport function generateId(): string {\n return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n}\n\nexport function createVectorClock(deviceId: string, existingClock: Record = {}): Record {\n return {\n ...existingClock,\n [deviceId]: (existingClock[deviceId] || 0) + 1\n };\n}\n\nexport function compareVectorClocks(a: Record, b: Record): 'before' | 'after' | 'concurrent' {\n const allDevices = new Set([...Object.keys(a), ...Object.keys(b)]);\n \n let aGreater = false;\n let bGreater = false;\n \n for (const device of allDevices) {\n const aCount = a[device] || 0;\n const bCount = b[device] || 0;\n \n if (aCount > bCount) aGreater = true;\n if (bCount > aCount) bGreater = true;\n }\n \n if (aGreater && !bGreater) return 'after';\n if (bGreater && !aGreater) return 'before';\n return 'concurrent';\n}\n",[],[394,400],[394],{"_104":409,"_95":410,"_153":411,"_155":-5,"_156":138,"_157":256,"_159":160,"_106":412,"_100":32,"_162":176,"_164":413,"_165":22,"_166":-5,"_167":414,"_98":415},"ac69f678-65b9-11f0-9de2-0224a6c84d84",".vtignore","ac69f722-65b9-11f0-9de2-0224a6c84d84",["D",1753050858403],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[410],{"_104":417,"_95":418,"_153":419,"_155":-5,"_156":138,"_157":420,"_159":160,"_106":421,"_100":422,"_162":176,"_164":423,"_165":22,"_166":-5,"_167":424,"_98":425},"16d0db1c-6fc4-11f0-aa73-0224a6c84d84","README.md","5f56fa8c-65c0-11f0-bb0d-0224a6c84d84",246,["D",1754154843500],2,"# Pathfinder PWA\n\n(Pathfinder - Life & Goal Status At a Glance) A personal dashboard for tracking tasks, habits, and media consumption with offline support and syncing capabilities.\n\n## Features\n\n### ✅ Tasks & Habits Tracking\n- Weekly grid view showing completion status\n- Support for multiple completions per week\n- Visual indicators with color coding\n- Notes for each completion\n\n### 📚 Media Progress Tracking\n- Organize by status: inbox, upcoming, in progress, on hold, completed\n- Group by social context: solo, with wife, with friends, etc.\n- Support for books, movies, TV shows, podcasts, games, articles, courses\n- Progress tracking and ratings\n\n### 🔄 Offline & Sync\n- PWA with offline functionality\n- CRDT-based conflict resolution\n- Audit logging for data integrity\n- Background sync when online\n\n### 📱 Mobile Optimized\n- Responsive design for iPhone use\n- Touch-friendly interface\n- PWA installable on home screen\n- Smooth animations and interactions\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ └── index.ts # Hono API server\n├── frontend/\n│ ├── components/ # React components\n│ │ ├── App.tsx # Main app component\n│ │ ├── TaskGrid.tsx # Task tracking grid\n│ │ ├── MediaGrid.tsx # Media tracking grid\n│ │ └── *.tsx # Modal components\n│ ├── index.html # PWA manifest\n│ ├── index.tsx # React entry point\n│ ├── manifest.json # PWA manifest\n│ └── sw.js # Service worker\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── main.tsx # Val Town entry point\n```\n\n## API Endpoints\n\n- `GET /api/tasks` - Get all tasks\n- `POST /api/tasks` - Create new task\n- `GET /api/completions` - Get task completions\n- `POST /api/completions` - Mark task as complete\n- `GET /api/media` - Get all media items\n- `POST /api/media` - Create new media item\n- `PUT /api/media/:id` - Update media item\n- `POST /api/sync` - CRDT sync endpoint\n- `POST /api/devices/register` - Register device\n\n## Technology Stack\n\n- **Backend**: Hono + SQLite (Val Town)\n- **Frontend**: React 18 + TypeScript\n- **Styling**: Tailwind CSS\n- **PWA**: Service Worker + Manifest\n- **Sync**: CRDT with vector clocks\n- **Storage**: SQLite with audit logging\n\n## Usage\n\n1. **Add Tasks/Habits**: Click \"+ Task\" to add new recurring tasks\n2. **Track Completion**: Tap circles in current week to mark complete\n3. **Add Media**: Click \"+ Media\" to track books, shows, etc.\n4. **Organize Media**: Drag items between status columns\n5. **Offline Use**: App works offline and syncs when back online\n\n## Data Model\n\n### Tasks\n- Support for weekly frequency (1x, 2x, 3x per week)\n- Color coding and categorization\n- Completion tracking with notes\n\n### Media\n- Type: book, movie, TV show, podcast, game, article, course\n- Status: inbox → upcoming → in progress → on hold → completed/abandoned\n- Social groups: solo, with wife, with friends, with family\n- Metadata: author, director, genre, progress, ratings\n\n### Sync\n- CRDT operations for conflict-free replication\n- Vector clocks for ordering\n- Audit logs for debugging\n- Device registration and management\n\nThe app is designed to be information-dense yet beautiful, perfect for quick daily check-ins on your life status.\n",[],[418],{"_104":427,"_95":428,"_153":429,"_155":-5,"_156":138,"_157":422,"_159":160,"_106":430,"_100":32,"_162":176,"_164":431,"_165":22,"_166":-5,"_167":432,"_98":433},"ac63d7d4-65b9-11f0-b392-0224a6c84d84","deno.json","ac63d9fa-65b9-11f0-b392-0224a6c84d84",["D",1753050858402],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[428],{"_104":435,"_95":99,"_153":436,"_155":-5,"_156":138,"_157":437,"_159":160,"_106":438,"_100":158,"_162":439,"_164":440,"_165":22,"_166":441,"_167":442,"_98":443},"fe49628a-6fc3-11f0-aa73-0224a6c84d84","1bb34030-65b9-11f0-b477-0224a6c84d84",245,["D",1754154802386],"http","// Pathfinder PWA - Val Town Entry Point\nimport app from \"./backend/index.ts\";\n\n// Export the Hono app as the default HTTP handler\nexport default app;\n","ryi-pathfinder",[],[99],"files",[150,169,181,188,195,205,216,227,234,240,250,260,270,279,289,299,308,317,326,335,346,355,364,373,382,392,398,408,416,426,434],"counts",{"_448":32,"_449":175,"_450":32,"_451":32},"pulls","branches","forks","envVars","contents",[],{"_104":435,"_95":99,"_153":436,"_155":-5,"_156":138,"_157":437,"_159":160,"_106":455,"_100":158,"_162":439,"_164":440,"_165":22,"_166":441,"_98":456},["D",1754154802386],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":465,"_148":470,"_444":564,"_176":565,"_452":567,"_568":-5,"_569":22,"_570":-5,"_571":-5,"_572":-5,"_573":574},{"_104":105,"_95":96,"_106":466,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":467,"_132":468,"_135":469,"_147":22},["D",1753050615637],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[471,477,492,546,552,555,558,561],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":472,"_98":476},[473],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":173,"_159":160,"_106":174,"_100":175,"_162":176,"_164":177,"_165":22,"_166":-5,"_167":474,"_98":475},[],[152,171],[152],{"_104":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":185,"_159":160,"_106":186,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":478,"_98":491},[479,488],{"_104":189,"_95":190,"_153":191,"_155":184,"_156":138,"_157":192,"_159":160,"_106":193,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":480,"_98":487},[481,484],{"_104":196,"_95":197,"_153":198,"_155":191,"_156":138,"_157":199,"_159":22,"_106":200,"_100":173,"_162":201,"_164":202,"_165":22,"_166":-5,"_167":482,"_98":483},[],[183,190,197],{"_104":206,"_95":207,"_153":208,"_155":191,"_156":138,"_157":209,"_159":22,"_106":210,"_100":211,"_162":201,"_164":212,"_165":22,"_166":-5,"_167":485,"_98":486},[],[183,190,207],[183,190],{"_104":217,"_95":218,"_153":219,"_155":184,"_156":138,"_157":220,"_159":22,"_106":221,"_100":222,"_162":201,"_164":223,"_165":22,"_166":-5,"_167":489,"_98":490},[],[183,218],[183],{"_104":228,"_95":229,"_153":230,"_155":-5,"_156":138,"_157":231,"_159":160,"_106":232,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":493,"_98":545},[494,530,533,536,539,542],{"_104":235,"_95":236,"_153":237,"_155":230,"_156":138,"_157":211,"_159":160,"_106":238,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":495,"_98":529},[496,499,502,505,508,511,514,517,520,523,526],{"_104":241,"_95":242,"_153":243,"_155":237,"_156":138,"_157":244,"_159":22,"_106":245,"_100":246,"_162":201,"_164":247,"_165":22,"_166":-5,"_167":497,"_98":498},[],[229,236,242],{"_104":251,"_95":252,"_153":253,"_155":237,"_156":138,"_157":254,"_159":22,"_106":255,"_100":256,"_162":201,"_164":257,"_165":22,"_166":-5,"_167":500,"_98":501},[],[229,236,252],{"_104":261,"_95":262,"_153":263,"_155":237,"_156":138,"_157":264,"_159":22,"_106":265,"_100":266,"_162":201,"_164":267,"_165":22,"_166":-5,"_167":503,"_98":504},[],[229,236,262],{"_104":271,"_95":272,"_153":273,"_155":237,"_156":138,"_157":274,"_159":22,"_106":275,"_100":175,"_162":201,"_164":276,"_165":22,"_166":-5,"_167":506,"_98":507},[],[229,236,272],{"_104":280,"_95":281,"_153":282,"_155":237,"_156":138,"_157":283,"_159":22,"_106":284,"_100":285,"_162":201,"_164":286,"_165":22,"_166":-5,"_167":509,"_98":510},[],[229,236,281],{"_104":290,"_95":291,"_153":292,"_155":237,"_156":138,"_157":293,"_159":22,"_106":294,"_100":295,"_162":201,"_164":296,"_165":22,"_166":-5,"_167":512,"_98":513},[],[229,236,291],{"_104":300,"_95":301,"_153":302,"_155":237,"_156":138,"_157":303,"_159":160,"_106":304,"_100":175,"_162":201,"_164":305,"_165":22,"_166":-5,"_167":515,"_98":516},[],[229,236,301],{"_104":309,"_95":310,"_153":311,"_155":237,"_156":138,"_157":312,"_159":160,"_106":313,"_100":32,"_162":201,"_164":314,"_165":22,"_166":-5,"_167":518,"_98":519},[],[229,236,310],{"_104":318,"_95":319,"_153":320,"_155":237,"_156":138,"_157":321,"_159":22,"_106":322,"_100":231,"_162":201,"_164":323,"_165":22,"_166":-5,"_167":521,"_98":522},[],[229,236,319],{"_104":327,"_95":328,"_153":329,"_155":237,"_156":138,"_157":330,"_159":22,"_106":331,"_100":222,"_162":201,"_164":332,"_165":22,"_166":-5,"_167":524,"_98":525},[],[229,236,328],{"_104":336,"_95":337,"_153":338,"_155":237,"_156":138,"_157":339,"_159":22,"_106":340,"_100":341,"_162":201,"_164":342,"_165":22,"_166":-5,"_167":527,"_98":528},[],[229,236,337],[229,236],{"_104":347,"_95":348,"_153":349,"_155":230,"_156":138,"_157":350,"_159":160,"_106":351,"_100":32,"_162":176,"_164":352,"_165":22,"_166":-5,"_167":531,"_98":532},[],[229,348],{"_104":356,"_95":357,"_153":358,"_155":230,"_156":138,"_157":101,"_159":22,"_106":359,"_100":360,"_162":176,"_164":361,"_165":22,"_166":-5,"_167":534,"_98":535},[],[229,357],{"_104":365,"_95":366,"_153":367,"_155":230,"_156":138,"_157":368,"_159":22,"_106":369,"_100":32,"_162":201,"_164":370,"_165":22,"_166":-5,"_167":537,"_98":538},[],[229,366],{"_104":374,"_95":375,"_153":376,"_155":230,"_156":138,"_157":377,"_159":22,"_106":378,"_100":32,"_162":176,"_164":379,"_165":22,"_166":-5,"_167":540,"_98":541},[],[229,375],{"_104":383,"_95":384,"_153":385,"_155":230,"_156":138,"_157":246,"_159":22,"_106":386,"_100":387,"_162":201,"_164":388,"_165":22,"_166":-5,"_167":543,"_98":544},[],[229,384],[229],{"_104":393,"_95":394,"_153":395,"_155":-5,"_156":138,"_157":360,"_159":160,"_106":396,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":547,"_98":551},[548],{"_104":399,"_95":400,"_153":401,"_155":395,"_156":138,"_157":402,"_159":22,"_106":403,"_100":185,"_162":201,"_164":404,"_165":22,"_166":-5,"_167":549,"_98":550},[],[394,400],[394],{"_104":409,"_95":410,"_153":411,"_155":-5,"_156":138,"_157":256,"_159":160,"_106":412,"_100":32,"_162":176,"_164":413,"_165":22,"_166":-5,"_167":553,"_98":554},[],[410],{"_104":417,"_95":418,"_153":419,"_155":-5,"_156":138,"_157":420,"_159":160,"_106":421,"_100":422,"_162":176,"_164":423,"_165":22,"_166":-5,"_167":556,"_98":557},[],[418],{"_104":427,"_95":428,"_153":429,"_155":-5,"_156":138,"_157":422,"_159":160,"_106":430,"_100":32,"_162":176,"_164":431,"_165":22,"_166":-5,"_167":559,"_98":560},[],[428],{"_104":435,"_95":99,"_153":436,"_155":-5,"_156":138,"_157":437,"_159":160,"_106":438,"_100":158,"_162":439,"_164":440,"_165":22,"_166":441,"_167":562,"_98":563},[],[99],[471,473,477,479,481,484,488,492,494,496,499,502,505,508,511,514,517,520,523,526,530,533,536,539,542,546,548,552,555,558,561],{"_104":435,"_95":99,"_153":436,"_155":-5,"_156":138,"_157":437,"_159":160,"_106":455,"_100":158,"_162":439,"_164":440,"_165":22,"_166":441,"_98":566},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

Hi

Add Media

Additional Info (optional)

Add Task or Habit

Tasks

Media

Edit Task

Search for Cover Image

Edit {editingItem.title}

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{item.title}

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{item.title}

Edit {editingItem.title}

Edit {editingItem.title}

\n {GROUP_LABELS[group as keyof typeof GROUP_LABELS]} - {STATUS_LABELS[status as keyof typeof STATUS_LABELS]}\n

{item.title}

\n {task.frequency_per_week === 1 ? 'Complete Task' : 'Track Progress'}\n

{task.name}

\n Completed this week ({currentCompletions.length}):\n