Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[151,170],[151],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":184,"_158":159,"_105":185,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":186,"_98":225},"39869fec-65bb-11f0-a40c-0224a6c84d84","backend","3986a082-65bb-11f0-a40c-0224a6c84d84",7,["D",1753051524683],[187,215],{"_103":188,"_95":189,"_152":190,"_154":183,"_155":137,"_156":191,"_158":159,"_105":192,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":193,"_98":214},"3da5119e-65bb-11f0-b3e0-0224a6c84d84","database","3da51248-65bb-11f0-b3e0-0224a6c84d84",10,["D",1753051531594],[194,205],{"_103":195,"_95":196,"_152":197,"_154":190,"_155":137,"_156":198,"_158":159,"_105":199,"_100":200,"_161":201,"_163":202,"_164":22,"_165":-5,"_166":203,"_98":204},"18d7d3b2-708b-11f0-8d4a-0224a6c84d84","migrations.ts","5a6a799a-65bb-11f0-974b-0224a6c84d84",441,["D",1754240316790],27,"script","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Database table names with versioning for schema changes\nexport const TABLES = {\n TASKS: 'pathfinder_tasks_v4',\n TASK_COMPLETIONS: 'pathfinder_task_completions_v1', \n MEDIA_ITEMS: 'pathfinder_media_items_v1',\n CRDT_OPERATIONS: 'pathfinder_crdt_operations_v1',\n AUDIT_LOG: 'pathfinder_audit_log_v1',\n DEVICES: 'pathfinder_devices_v1',\n SYNC_STATE: 'pathfinder_sync_state_v1'\n};\n\nexport async function runMigrations() {\n console.log('Running database migrations (mig)...');\n \n // Enable foreign key constraints (SQLite has them disabled by default)\n await sqlite.execute('PRAGMA foreign_keys = ON');\n console.log('Foreign key constraints enabled');\n \n // Ensure migration markers table exists first\n await ensureMigrationMarkersTable();\n \n // Run all migrations in order\n await runMigration('create_v4_tables', createV4Tables);\n await runMigration('migrate_v3_to_v4_data', migrateV3ToV4Data);\n await runMigration('assign_initial_sort_order', assignInitialSortOrder);\n await runMigration('create_indexes', createIndexes);\n await runMigration('fix_foreign_key_constraints', fixForeignKeyConstraints);\n \n console.log('Database migrations completed (mig)');\n}\n\n// Helper function to ensure migration markers table exists\nasync function ensureMigrationMarkersTable() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS pathfinder_migration_markers (\n id TEXT PRIMARY KEY,\n completed_at INTEGER NOT NULL\n )\n `);\n}\n\n// Helper function to run a migration only if it hasn't been completed\nasync function runMigration(migrationId: string, migrationFn: () => Promise) {\n const check = await sqlite.execute(`\n SELECT id FROM pathfinder_migration_markers WHERE id = ?\n `, [migrationId]);\n \n if (check.rows.length > 0) {\n console.log(`Migration ${migrationId} already completed, skipping...`);\n return;\n }\n \n console.log(`Running migration: ${migrationId}`);\n await migrationFn();\n \n await sqlite.execute(`\n INSERT INTO pathfinder_migration_markers (id, completed_at)\n VALUES (?, ?)\n `, [migrationId, Date.now()]);\n \n console.log(`Migration ${migrationId} completed`);\n}\n\n// Migration 1: Create all v4 tables\nasync function createV4Tables() {\n // Tasks table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.TASKS} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT,\n frequency_per_week INTEGER NOT NULL DEFAULT 1,\n created_at INTEGER NOT NULL,\n updated_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n category TEXT,\n color TEXT,\n emoji TEXT,\n sort_order INTEGER,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // Task completions table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.TASK_COMPLETIONS} (\n id TEXT PRIMARY KEY,\n task_id TEXT NOT NULL,\n week_start TEXT NOT NULL,\n completed_at INTEGER NOT NULL,\n notes TEXT,\n created_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL,\n FOREIGN KEY (task_id) REFERENCES ${TABLES.TASKS} (id)\n )\n `);\n\n // Media items table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.MEDIA_ITEMS} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n type TEXT NOT NULL,\n status TEXT NOT NULL,\n media_group TEXT NOT NULL,\n description TEXT,\n cover_url TEXT,\n progress TEXT,\n rating INTEGER,\n notes TEXT,\n started_at INTEGER,\n completed_at INTEGER,\n created_at INTEGER NOT NULL,\n updated_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n metadata TEXT, -- JSON string\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // CRDT operations for syncing\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.CRDT_OPERATIONS} (\n id TEXT PRIMARY KEY,\n timestamp INTEGER NOT NULL,\n device_id TEXT NOT NULL,\n operation TEXT NOT NULL,\n entity TEXT NOT NULL,\n entity_id TEXT NOT NULL,\n data TEXT NOT NULL, -- JSON string\n vector_clock TEXT NOT NULL,\n processed INTEGER NOT NULL DEFAULT 0\n )\n `);\n\n // Audit log for debugging\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.AUDIT_LOG} (\n id TEXT PRIMARY KEY,\n timestamp INTEGER NOT NULL,\n device_id TEXT NOT NULL,\n operation_id TEXT NOT NULL,\n user_action TEXT,\n notes TEXT,\n FOREIGN KEY (operation_id) REFERENCES ${TABLES.CRDT_OPERATIONS} (id)\n )\n `);\n\n // Device registry\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.DEVICES} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n last_sync INTEGER NOT NULL,\n vector_clock TEXT NOT NULL\n )\n `);\n\n // Sync state tracking\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLES.SYNC_STATE} (\n key TEXT PRIMARY KEY,\n value TEXT NOT NULL,\n updated_at INTEGER NOT NULL\n )\n `);\n}\n\n// Migration 2: Migrate data from old tables to v4\nasync function migrateV3ToV4Data() {\n // Migrate data from v3 tasks table if it exists\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v3 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v3 to v4...`);\n for (const row of oldTasks.rows) {\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, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n row.emoji as string,\n null, // sort_order will be populated later\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v3 to v4 completed successfully');\n }\n } catch (_error) {\n // v3 table doesn't exist, try v2\n console.log('No v3 tasks table found, checking for v2...');\n }\n\n // Migrate data from v2 tasks table if it exists\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v2 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v2 to v4...`);\n for (const row of oldTasks.rows) {\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, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n row.emoji as string,\n null, // sort_order - new field, start as null\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v2 to v4 completed successfully');\n }\n } catch (_error) {\n // v2 table doesn't exist, try v1\n console.log('No v2 tasks table found, checking for v1...');\n }\n\n // Migrate data from v1 tasks table if it exists (fallback)\n try {\n const oldTasks = await sqlite.execute(`SELECT * FROM pathfinder_tasks_v1 WHERE is_deleted = 0`);\n if (oldTasks.rows.length > 0) {\n console.log(`Migrating ${oldTasks.rows.length} tasks from v1 to v4...`);\n for (const row of oldTasks.rows) {\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, sort_order, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `, [\n row.id as string,\n row.name as string,\n row.description as string,\n row.frequency_per_week as number,\n row.created_at as number,\n row.updated_at as number,\n row.is_deleted as number,\n row.category as string,\n row.color as string,\n null, // emoji - new field in v2, start as null\n null, // sort_order - new field in v4, start as null\n row.device_id as string,\n row.vector_clock as string\n ]);\n }\n console.log('Task migration from v1 to v4 completed successfully');\n }\n } catch (_error) {\n // Old table doesn't exist, that's fine\n console.log('No v1 tasks table found, starting fresh');\n }\n}\n\n// Migration 3: Assign initial sort_order values\nasync function assignInitialSortOrder() {\n const tasksWithoutOrder = await sqlite.execute(`\n SELECT COUNT(*) as count FROM ${TABLES.TASKS} \n WHERE is_deleted = 0 AND sort_order IS NULL\n `);\n \n const count = tasksWithoutOrder.rows[0]?.count as number || 0;\n if (count > 0) {\n console.log(`Found ${count} tasks without sort_order, assigning default values...`);\n \n // Get all tasks without sort_order, ordered by name for consistent ordering\n const unorderedTasks = await sqlite.execute(`\n SELECT id FROM ${TABLES.TASKS} \n WHERE is_deleted = 0 AND sort_order IS NULL \n ORDER BY name ASC\n `);\n \n // Assign sort_order values starting from 1\n for (let i = 0; i < unorderedTasks.rows.length; i++) {\n const taskId = unorderedTasks.rows[i].id as string;\n const sortOrder = i + 1;\n await sqlite.execute(`\n UPDATE ${TABLES.TASKS} \n SET sort_order = ? \n WHERE id = ?\n `, [sortOrder, taskId]);\n }\n \n console.log(`Assigned sort_order values to ${unorderedTasks.rows.length} tasks`);\n } else {\n console.log('All tasks already have sort_order values');\n }\n}\n\n// Migration 4: Create database indexes\nasync function createIndexes() {\n // Task indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_deleted ON ${TABLES.TASKS} (is_deleted)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_updated ON ${TABLES.TASKS} (updated_at)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_tasks_sort_order ON ${TABLES.TASKS} (sort_order)`);\n \n // Task completion indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_completions_task_week ON ${TABLES.TASK_COMPLETIONS} (task_id, week_start)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_completions_deleted ON ${TABLES.TASK_COMPLETIONS} (is_deleted)`);\n \n // Media indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_media_status_group ON ${TABLES.MEDIA_ITEMS} (status, media_group)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_media_deleted ON ${TABLES.MEDIA_ITEMS} (is_deleted)`);\n \n // CRDT indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_crdt_device_timestamp ON ${TABLES.CRDT_OPERATIONS} (device_id, timestamp)`);\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_crdt_processed ON ${TABLES.CRDT_OPERATIONS} (processed)`);\n \n // Audit log indexes\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_audit_timestamp ON ${TABLES.AUDIT_LOG} (timestamp)`);\n \n console.log('Database indexes created');\n}\n\n// Migration 5: Fix foreign key constraints pointing to old table versions\nasync function fixForeignKeyConstraints() {\n console.log('Fixing foreign key constraints...');\n \n // Check if task_completions table has the wrong foreign key constraint\n const fkInfo = await sqlite.execute(`PRAGMA foreign_key_list(${TABLES.TASK_COMPLETIONS})`);\n console.log('Current foreign key constraints:', fkInfo.rows);\n \n // If the foreign key points to the wrong table, we need to recreate the table\n const wrongFk = fkInfo.rows.find(fk => fk.table !== TABLES.TASKS);\n if (wrongFk) {\n console.log(`Found incorrect foreign key pointing to ${wrongFk.table}, should be ${TABLES.TASKS}`);\n \n // Create new table with correct foreign key\n const newTableName = `${TABLES.TASK_COMPLETIONS}_new`;\n await sqlite.execute(`\n CREATE TABLE ${newTableName} (\n id TEXT PRIMARY KEY,\n task_id TEXT NOT NULL,\n week_start TEXT NOT NULL,\n completed_at INTEGER NOT NULL,\n notes TEXT,\n created_at INTEGER NOT NULL,\n is_deleted INTEGER NOT NULL DEFAULT 0,\n device_id TEXT NOT NULL,\n vector_clock TEXT NOT NULL,\n FOREIGN KEY (task_id) REFERENCES ${TABLES.TASKS} (id)\n )\n `);\n \n // Copy data from old table\n await sqlite.execute(`\n INSERT INTO ${newTableName} \n SELECT * FROM ${TABLES.TASK_COMPLETIONS}\n `);\n \n // Drop old table and rename new one\n await sqlite.execute(`DROP TABLE ${TABLES.TASK_COMPLETIONS}`);\n await sqlite.execute(`ALTER TABLE ${newTableName} RENAME TO ${TABLES.TASK_COMPLETIONS}`);\n \n console.log('Task completions table recreated with correct foreign key');\n } else {\n console.log('Foreign key constraints are already correct');\n }\n}\n",[],[182,189,196],{"_103":206,"_95":207,"_152":208,"_154":190,"_155":137,"_156":136,"_158":159,"_105":209,"_100":210,"_161":201,"_163":211,"_164":22,"_165":-5,"_166":212,"_98":213},"7691726a-7162-11f0-93a1-0224a6c84d84","queries.ts","70732804-65bb-11f0-82c4-0224a6c84d84",["D",1754332815832],37,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLES } from \"./migrations.ts\";\nimport type { Task, TaskCompletion, CRDTOperation, AuditLogEntry, MediaItem } from \"../../shared/types.ts\";\nimport { getWeekStart } from \"../../shared/types.ts\";\n\nexport async function getTasks() {\n const result = await sqlite.execute(\n `SELECT * FROM ${TABLES.TASKS} WHERE is_deleted = 0 ORDER BY sort_order ASC, name ASC`\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 sort_order: row.sort_order as number || 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, sort_order, 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 task.sort_order || 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 // Calculate week_start from the completion date\n const completionDate = new Date(completion.completed_at);\n const weekStart = getWeekStart(completionDate);\n \n await sqlite.execute(\n `INSERT INTO ${TABLES.TASK_COMPLETIONS} (\n id, task_id, week_start, completed_at, notes, created_at, \n is_deleted, device_id, vector_clock\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n completion.id,\n completion.task_id,\n weekStart,\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: any): 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 ",[],[182,189,207],[182,189],{"_103":216,"_95":217,"_152":218,"_154":183,"_155":137,"_156":219,"_158":159,"_105":220,"_100":221,"_161":201,"_163":222,"_164":22,"_165":-5,"_166":223,"_98":224},"198e8326-6ff2-11f0-a233-0224a6c84d84","index.ts","8b8a4604-65bb-11f0-91d8-0224a6c84d84",431,["D",1754174604990],15,"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\nconsole.log('Running database migrations (idx)...');\nawait runMigrations();\nconsole.log('Database migrations completed (idx)');\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",[],[182,217],[182],{"_103":227,"_95":228,"_152":229,"_154":-5,"_155":137,"_156":230,"_158":159,"_105":231,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":232,"_98":392},"3c10a47e-65bb-11f0-8867-0224a6c84d84","frontend","3c10a55a-65bb-11f0-8867-0224a6c84d84",8,["D",1753051528942],[233,346,355,365,374,383],{"_103":234,"_95":235,"_152":236,"_154":229,"_155":137,"_156":237,"_158":159,"_105":238,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":239,"_98":345},"3f963140-65bb-11f0-abc8-0224a6c84d84","components","3f9631fe-65bb-11f0-abc8-0224a6c84d84",11,["D",1753051534852],[240,250,259,269,278,288,297,306,315,325,335],{"_103":241,"_95":242,"_152":243,"_154":236,"_155":137,"_156":244,"_158":159,"_105":245,"_100":246,"_161":201,"_163":247,"_164":22,"_165":-5,"_166":248,"_98":249},"0694e684-6fcf-11f0-b30c-0224a6c84d84","AddMediaModal.tsx","55d5f674-65bc-11f0-ba88-0224a6c84d84",346,["D",1754159540736],41,"/** @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 { MediaItem, MediaType, MediaStatus, MediaGroup } from \"../../shared/types.ts\";\nimport { setupClipboardListener } 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 // Setup clipboard listener when modal is open\n useEffect(() => {\n if (isOpen) {\n const cleanup = setupClipboardListener((imageData: string) => {\n setFormData(prev => ({ ...prev, cover_url: imageData }));\n setImageError(false);\n });\n return cleanup;\n }\n }, [isOpen]);\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-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\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-600 bg-gray-700 text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent placeholder-gray-400\"\n />\n onOpenImageSearch(formData.title || '', handleImageSelect)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors\"\n title=\"Search for images\"\n >\n 🔍\n \n

\n 📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above\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-800 text-blue-300'\n : 'border-gray-600 hover:border-gray-500 text-gray-300'\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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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",[],[228,235,242],{"_103":251,"_95":252,"_152":253,"_154":236,"_155":137,"_156":254,"_158":159,"_105":255,"_100":191,"_161":201,"_163":256,"_164":22,"_165":-5,"_166":257,"_98":258},"120883bc-6fcb-11f0-b63c-0224a6c84d84","AddTaskModal.tsx","3ade5c26-65bc-11f0-a6fa-0224a6c84d84",320,["D",1754157841995],"/** @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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-700 text-gray-300 border border-gray-600 rounded-full hover:bg-gray-600 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",[],[228,235,252],{"_103":260,"_95":261,"_152":262,"_154":236,"_155":137,"_156":263,"_158":159,"_105":264,"_100":265,"_161":201,"_163":266,"_164":22,"_165":-5,"_166":267,"_98":268},"5300a7fa-6fee-11f0-a845-0224a6c84d84","App.tsx","eb2ae0b4-65bb-11f0-beb8-0224a6c84d84",420,["D",1754172983383],58,"/** @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 const [showTaskNames, setShowTaskNames] = useState(false);\n const [dragMode, setDragMode] = useState(false);\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('pathfinder-device-id');\n if (!id) {\n id = `device-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n localStorage.setItem('pathfinder-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 or empty, and also refresh to get latest schema\n useEffect(() => {\n if (deviceId) {\n if (!initialData || !initialData.tasks || initialData.tasks.length === 0) {\n console.log('Loading data from server, deviceId:', deviceId, 'initialData:', initialData);\n loadData();\n } else {\n console.log('Using initial data, tasks:', initialData.tasks.map((t: Task) => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\n // Check if initial data has sort_order, if not, refresh from API\n const hasValidSortOrder = initialData.tasks.some(t => t.sort_order !== undefined);\n if (!hasValidSortOrder) {\n console.log('Initial data missing sort_order, refreshing from API...');\n loadData();\n }\n }\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 console.log('Loaded tasks:', tasksData.map((t: Task) => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\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 // Find the highest sort_order and add 1, or use 0 if no tasks exist\n const maxSortOrder = tasks.reduce((max, task) => {\n return Math.max(max, task.sort_order ?? -1);\n }, -1);\n \n const taskWithOrder = {\n ...taskData,\n sort_order: maxSortOrder + 1\n };\n \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(taskWithOrder)\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 reorderTasks = async (orderedTaskIds: string[]) => {\n console.log('reorderTasks called with:', orderedTaskIds);\n try {\n // Update tasks with new sort_order values (starting from 1)\n const tasksToUpdate = orderedTaskIds.map((taskId, index) => {\n const task = tasks.find(t => t.id === taskId);\n if (!task) return null;\n return { ...task, sort_order: index + 1 };\n }).filter(Boolean) as Task[];\n\n console.log('Tasks to update:', tasksToUpdate.map(t => ({ id: t.id, name: t.name, sort_order: t.sort_order })));\n\n // Optimistically update the UI\n setTasks(prev => {\n const updated = [...prev];\n tasksToUpdate.forEach(updatedTask => {\n const index = updated.findIndex(t => t.id === updatedTask.id);\n if (index !== -1) {\n updated[index] = updatedTask;\n }\n });\n return updated;\n });\n\n // Update each task on the server\n await Promise.all(\n tasksToUpdate.map(async task => {\n console.log('Updating task on server:', { id: task.id, sort_order: task.sort_order });\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 const result = await response.json();\n console.log('Server response for task', task.id, ':', result);\n return result;\n })\n );\n console.log('All tasks updated successfully');\n } catch (error) {\n console.error('Failed to reorder tasks:', error);\n // Reload data to restore correct state\n loadData();\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 Pathfinder...

\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-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors\"\n >\n + Task\n \n setShowAddMedia(true)}\n className=\"px-3 py-1.5 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors\"\n >\n + Media\n \n

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

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

Tasks

Weekly completion tracking

\n setShowTaskNames(!showTaskNames)}\n className={`px-3 py-1 text-sm rounded-lg transition-colors ${\n showTaskNames \n ? 'bg-blue-600 text-white' \n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n title={showTaskNames ? 'Hide task names' : 'Show task names'}\n >\n {showTaskNames ? '👁️ Hide Names' : '👁️‍🗨️ Show Names'}\n \n setDragMode(!dragMode)}\n className={`px-3 py-1 text-sm rounded-lg transition-colors ${\n dragMode \n ? 'bg-green-600 text-white' \n : 'bg-gray-700 text-gray-300 hover:bg-gray-600'\n }`}\n title={dragMode ? 'Disable drag reordering' : 'Enable drag reordering'}\n >\n {dragMode ? '🔒 Lock Order' : '↕️ Drag Mode'}\n \n

\n \n

\n setTaskCompletionModal({ task, weekStart })}\n onEditTask={(task) => setEditTaskModal(task)}\n showTaskNames={showTaskNames}\n dragMode={dragMode}\n onReorderTasks={reorderTasks}\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",[],[228,235,261],{"_103":270,"_95":271,"_152":272,"_154":236,"_155":137,"_156":273,"_158":159,"_105":274,"_100":237,"_161":201,"_163":275,"_164":22,"_165":-5,"_166":276,"_98":277},"17bffdda-6fcb-11f0-bb3f-0224a6c84d84","EditTaskModal.tsx","1d4e474e-65d9-11f0-b639-0224a6c84d84",321,["D",1754157851578],"/** @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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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",[],[228,235,271],{"_103":279,"_95":280,"_152":281,"_154":236,"_155":137,"_156":282,"_158":159,"_105":283,"_100":284,"_161":201,"_163":285,"_164":22,"_165":-5,"_166":286,"_98":287},"586af188-6fcf-11f0-b52f-0224a6c84d84","ImageSearchModal.tsx","b5999328-6764-11f0-aadc-0224a6c84d84",352,["D",1754159678064],38,"/** @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 { downloadImageAsBase64, setupClipboardListener } from \"../../shared/types.ts\";\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 [downloadingIndex, setDownloadingIndex] = useState(null);\n const [error, setError] = useState(null);\n\n // Setup clipboard listener when modal is open\n useEffect(() => {\n if (isOpen) {\n const cleanup = setupClipboardListener((imageData: string) => {\n // Directly use the pasted image\n onSelectImage(imageData);\n onClose();\n });\n return cleanup;\n }\n }, [isOpen, onSelectImage, onClose]);\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 = async (imageUrl: string, index: number) => {\n // Show loading state for this specific image\n setDownloadingIndex(index);\n \n try {\n // Download and convert the image to base64\n const base64Image = await downloadImageAsBase64(imageUrl, 500); // 500KB max\n \n if (base64Image) {\n // Pass the base64 data URL instead of the original URL\n onSelectImage(base64Image);\n onClose();\n } else {\n // If download failed, ask user if they want to use the URL anyway\n const useUrl = confirm(\n 'Unable to download and store this image locally (may be due to server restrictions). ' +\n 'Would you like to use the image URL instead? Note: it may not work offline.'\n );\n \n if (useUrl) {\n onSelectImage(imageUrl);\n onClose();\n }\n }\n } catch (error) {\n console.error('Error processing image:', error);\n \n // Ask user if they want to use the URL as fallback\n const useUrl = confirm(\n 'Error downloading image. Would you like to use the image URL instead? ' +\n 'Note: it may not work offline.'\n );\n \n if (useUrl) {\n onSelectImage(imageUrl);\n onClose();\n }\n } finally {\n setDownloadingIndex(null);\n }\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, index)}\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 {downloadingIndex === index ? (\n

\n \n

\n ) : (\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",[],[228,235,280],{"_103":289,"_95":290,"_152":291,"_154":236,"_155":137,"_156":292,"_158":159,"_105":293,"_100":246,"_161":201,"_163":294,"_164":22,"_165":-5,"_166":295,"_98":296},"e6994f3c-6fce-11f0-8074-0224a6c84d84","MediaDetailModal.tsx","83ba41a8-65bc-11f0-964f-0224a6c84d84",343,["D",1754159487111],"/** @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 { MediaItem, MediaStatus } from \"../../shared/types.ts\";\nimport { setupClipboardListener } 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-700 border-gray-600',\n upcoming: 'bg-blue-900/50 border-blue-700',\n in_progress: 'bg-yellow-900/50 border-yellow-700',\n on_hold: 'bg-orange-900/50 border-orange-700',\n completed: 'bg-green-900/50 border-green-700',\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 // Setup clipboard listener when in editing mode\n useEffect(() => {\n if (editingItem) {\n const cleanup = setupClipboardListener((imageData: string) => {\n setEditForm(prev => ({ ...prev, cover_url: imageData }));\n });\n return cleanup;\n }\n }, [editingItem]);\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-300 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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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 📎 Paste an image from clipboard (Ctrl/Cmd+V) or search above\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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-300 bg-gray-700 border border-gray-600 rounded-lg hover:bg-gray-600 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",[],[228,235,290],{"_103":298,"_95":299,"_152":300,"_154":236,"_155":137,"_156":301,"_158":159,"_105":302,"_100":174,"_161":201,"_163":303,"_164":22,"_165":-5,"_166":304,"_98":305},"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 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(([value, 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 {\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 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 \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",[],[228,235,299],{"_103":307,"_95":308,"_152":309,"_154":236,"_155":137,"_156":310,"_158":159,"_105":311,"_100":32,"_161":201,"_163":312,"_164":22,"_165":-5,"_166":313,"_98":314},"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 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=\"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 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 \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",[],[228,235,308],{"_103":316,"_95":317,"_152":318,"_154":236,"_155":137,"_156":319,"_158":159,"_105":320,"_100":321,"_161":201,"_163":322,"_164":22,"_165":-5,"_166":323,"_98":324},"fb70c1a4-6fc6-11f0-a354-0224a6c84d84","MediaGrid.tsx","27f70900-65bc-11f0-9398-0224a6c84d84",271,["D",1754156086106],13,"/** @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-700 border-gray-600',\n upcoming: 'bg-blue-800 border-blue-600',\n in_progress: 'bg-yellow-700 border-yellow-600',\n on_hold: 'bg-orange-700 border-orange-600',\n completed: 'bg-green-700 border-green-600'\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",[],[228,235,317],{"_103":326,"_95":327,"_152":328,"_154":236,"_155":137,"_156":329,"_158":159,"_105":330,"_100":331,"_161":201,"_163":332,"_164":22,"_165":-5,"_166":333,"_98":334},"fd45716a-6fca-11f0-b8af-0224a6c84d84","TaskCompletionModal.tsx","647dda84-65bc-11f0-8fb7-0224a6c84d84",318,["D",1754157807160],19,"/** @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-600 bg-gray-700 text-gray-100 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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-600 bg-gray-700 text-gray-100 placeholder-gray-400 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",[],[228,235,327],{"_103":336,"_95":337,"_152":338,"_154":236,"_155":137,"_156":339,"_158":159,"_105":340,"_100":341,"_161":201,"_163":342,"_164":22,"_165":-5,"_166":343,"_98":344},"768a1cb6-7097-11f0-84b5-0224a6c84d84","TaskGrid.tsx","1584053e-65bc-11f0-9ce1-0224a6c84d84",448,["D",1754245627952],66,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback } 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 showTaskNames?: boolean;\n dragMode?: boolean;\n onReorderTasks?: (taskIds: string[]) => void;\n}\n\n// Beautiful color palette for task rows\nconst TASK_COLORS = [\n { bg: 'from-red-500/20 to-pink-500/20', border: 'border-red-400/30', completed: 'bg-red-500', hover: 'hover:from-red-500/30 hover:to-pink-500/30' },\n { bg: 'from-orange-500/20 to-yellow-500/20', border: 'border-orange-400/30', completed: 'bg-orange-500', hover: 'hover:from-orange-500/30 hover:to-yellow-500/30' },\n { bg: 'from-green-500/20 to-emerald-500/20', border: 'border-green-400/30', completed: 'bg-green-500', hover: 'hover:from-green-500/30 hover:to-emerald-500/30' },\n { bg: 'from-blue-500/20 to-cyan-500/20', border: 'border-blue-400/30', completed: 'bg-blue-500', hover: 'hover:from-blue-500/30 hover:to-cyan-500/30' },\n { bg: 'from-purple-500/20 to-violet-500/20', border: 'border-purple-400/30', completed: 'bg-purple-500', hover: 'hover:from-purple-500/30 hover:to-violet-500/30' },\n { bg: 'from-indigo-500/20 to-blue-500/20', border: 'border-indigo-400/30', completed: 'bg-indigo-500', hover: 'hover:from-indigo-500/30 hover:to-blue-500/30' },\n { bg: 'from-pink-500/20 to-rose-500/20', border: 'border-pink-400/30', completed: 'bg-pink-500', hover: 'hover:from-pink-500/30 hover:to-rose-500/30' },\n { bg: 'from-teal-500/20 to-green-500/20', border: 'border-teal-400/30', completed: 'bg-teal-500', hover: 'hover:from-teal-500/30 hover:to-green-500/30' },\n { bg: 'from-amber-500/20 to-orange-500/20', border: 'border-amber-400/30', completed: 'bg-amber-500', hover: 'hover:from-amber-500/30 hover:to-orange-500/30' },\n { bg: 'from-lime-500/20 to-green-500/20', border: 'border-lime-400/30', completed: 'bg-lime-500', hover: 'hover:from-lime-500/30 hover:to-green-500/30' },\n { bg: 'from-sky-500/20 to-blue-500/20', border: 'border-sky-400/30', completed: 'bg-sky-500', hover: 'hover:from-sky-500/30 hover:to-blue-500/30' },\n { bg: 'from-violet-500/20 to-purple-500/20', border: 'border-violet-400/30', completed: 'bg-violet-500', hover: 'hover:from-violet-500/30 hover:to-purple-500/30' },\n];\n\n// Function to get consistent color for a task based on its ID\nconst getTaskColor = (taskId: string, index: number) => {\n // Use task ID hash for consistency, fall back to index\n let hash = 0;\n for (let i = 0; i < taskId.length; i++) {\n const char = taskId.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32bit integer\n }\n const colorIndex = Math.abs(hash) % TASK_COLORS.length;\n return TASK_COLORS[colorIndex] || TASK_COLORS[index % TASK_COLORS.length];\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, showTaskNames = false, dragMode = false, onReorderTasks }: TaskGridProps) {\n const [longPressTooltip, setLongPressTooltip] = useState<{\n show: boolean;\n task: Task | null;\n x: number;\n y: number;\n }>({ show: false, task: null, x: 0, y: 0 });\n const [draggedTask, setDraggedTask] = useState(null);\n const [dragOverIndex, setDragOverIndex] = useState(null);\n const longPressTimeoutRef = useRef(null);\n\n // Sort tasks by sort_order (if available), then by name\n const sortedTasks = [...tasks].sort((a, b) => {\n // First sort by sort_order if both have it\n if (a.sort_order !== undefined && b.sort_order !== undefined) {\n return a.sort_order - b.sort_order;\n }\n // If only one has sort_order, prioritize it\n if (a.sort_order !== undefined) return -1;\n if (b.sort_order !== undefined) return 1;\n // Fall back to alphabetical by name\n return a.name.localeCompare(b.name);\n });\n\n // Long press handlers\n const handleTouchStart = useCallback((task: Task, event: React.TouchEvent) => {\n const touch = event.touches[0];\n longPressTimeoutRef.current = setTimeout(() => {\n setLongPressTooltip({\n show: true,\n task,\n x: touch.clientX,\n y: touch.clientY\n });\n }, 500); // 500ms long press\n }, []);\n\n const handleTouchEnd = useCallback(() => {\n if (longPressTimeoutRef.current) {\n clearTimeout(longPressTimeoutRef.current);\n longPressTimeoutRef.current = null;\n }\n }, []);\n\n const handleTouchMove = useCallback(() => {\n if (longPressTimeoutRef.current) {\n clearTimeout(longPressTimeoutRef.current);\n longPressTimeoutRef.current = null;\n }\n }, []);\n\n const hideTooltip = useCallback(() => {\n setLongPressTooltip({ show: false, task: null, x: 0, y: 0 });\n }, []);\n\n // Drag and drop handlers\n const handleDragStart = useCallback((task: Task, e: React.DragEvent) => {\n setDraggedTask(task);\n e.dataTransfer.effectAllowed = 'move';\n e.dataTransfer.setData('text/plain', task.id);\n }, []);\n\n const handleDragOver = useCallback((e: React.DragEvent, index: number) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n setDragOverIndex(index);\n }, []);\n\n const handleDragLeave = useCallback(() => {\n setDragOverIndex(null);\n }, []);\n\n const handleDrop = useCallback((e: React.DragEvent, dropIndex: number) => {\n e.preventDefault();\n \n if (!draggedTask || !onReorderTasks) return;\n \n const dragIndex = sortedTasks.findIndex(t => t.id === draggedTask.id);\n if (dragIndex === dropIndex) return;\n\n // Reorder tasks\n const newTasks = [...sortedTasks];\n const [removed] = newTasks.splice(dragIndex, 1);\n newTasks.splice(dropIndex, 0, removed);\n \n // Send the new order to parent\n onReorderTasks(newTasks.map(t => t.id));\n \n setDraggedTask(null);\n setDragOverIndex(null);\n }, [draggedTask, sortedTasks, onReorderTasks]);\n\n const handleDragEnd = useCallback(() => {\n setDraggedTask(null);\n setDragOverIndex(null);\n }, []);\n\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, taskIndex: number) => {\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 const taskColor = getTaskColor(task.id, taskIndex);\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 ? `${taskColor.completed} border-current text-white ring-2 ring-yellow-400` \n : isCompleted \n ? `${taskColor.completed} border-current text-white` \n : isCurrentWeek \n ? `${taskColor.border} hover:${taskColor.completed}/20 bg-gray-800/50` \n : 'border-gray-500 bg-gray-800/30'\n }\n ${isCurrentWeek && !isCompleted ? `ring-2 ${taskColor.border.replace('border-', 'ring-')}` : ''}\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 ${taskColor.border.replace('border-', 'ring-')}` : ''}\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 ? taskColor.completed.replace('bg-', 'text-')\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 {sortedTasks.map((task, index) => {\n const taskColor = getTaskColor(task.id, index);\n return (\n

handleDragStart(task, e) : undefined}\n onDragOver={dragMode ? (e) => handleDragOver(e, index) : undefined}\n onDragLeave={dragMode ? handleDragLeave : undefined}\n onDrop={dragMode ? (e) => handleDrop(e, index) : undefined}\n onDragEnd={dragMode ? handleDragEnd : undefined}\n >\n {/* Task name background (when toggled on) */}\n {showTaskNames && (\n

\n \n {task.name}\n {task.frequency_per_week && task.frequency_per_week > 1 && (\n ({task.frequency_per_week}x/week)\n )}\n {task.category && (\n - {task.category}\n )}\n \n

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

\n onEditTask?.(task)}\n onTouchStart={(e) => handleTouchStart(task, e)}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n className=\"text-sm hover:scale-110 transition-transform cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 rounded px-2 py-0.5 w-full flex items-center justify-center group\"\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${dragMode ? ' • Drag to reorder' : ''}`}\n >\n \n {getTaskEmoji(task)}\n {/* Drag handle indicator */}\n {dragMode && (\n \n ⠿\n \n )}\n \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, index)}\n

\n );\n })}\n

\n \n {/* Long press tooltip */}\n {longPressTooltip.show && longPressTooltip.task && (\n \n

{longPressTooltip.task.name}

\n {longPressTooltip.task.frequency_per_week && longPressTooltip.task.frequency_per_week > 1 && (\n

\n {longPressTooltip.task.frequency_per_week}x per week\n

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

\n Category: {longPressTooltip.task.category}\n

\n )}\n {longPressTooltip.task.description && (\n

\n {longPressTooltip.task.description}\n

\n )}\n

\n )}\n \n {/* Touch overlay to hide tooltip */}\n {longPressTooltip.show && (\n \n )}\n

\n );\n}\n",[],[228,235,337],[228,235],{"_103":347,"_95":348,"_152":349,"_154":229,"_155":137,"_156":350,"_158":159,"_105":351,"_100":32,"_161":175,"_163":352,"_164":22,"_165":-5,"_166":353,"_98":354},"a71d69a0-65bb-11f0-b4b9-0224a6c84d84","favicon.svg","a71d6a68-65bb-11f0-b4b9-0224a6c84d84",20,["D",1753051708537],"\n",[],[228,348],{"_103":356,"_95":357,"_152":358,"_154":229,"_155":137,"_156":359,"_158":159,"_105":360,"_100":361,"_161":175,"_163":362,"_164":22,"_165":-5,"_166":363,"_98":364},"857c8dde-6fc6-11f0-890b-0224a6c84d84","index.html","9b0baad2-65bb-11f0-99ff-0224a6c84d84",260,["D",1754155888212],12,"\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 Pathfinder...

\n \n \n \n \n \n \n\n\n",[],[228,357],{"_103":366,"_95":367,"_152":368,"_154":229,"_155":137,"_156":369,"_158":159,"_105":370,"_100":174,"_161":201,"_163":371,"_164":22,"_165":-5,"_166":372,"_98":373},"f28eb092-6fc5-11f0-8014-0224a6c84d84","index.tsx","8b6f5352-65bc-11f0-9d49-0224a6c84d84",251,["D",1754155641705],"/** @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('Pathfinder PWA loaded successfully');\n",[],[228,367],{"_103":375,"_95":376,"_152":377,"_154":229,"_155":137,"_156":378,"_158":159,"_105":379,"_100":174,"_161":175,"_163":380,"_164":22,"_165":-5,"_166":381,"_98":382},"0ac0c4a2-6fc6-11f0-af35-0224a6c84d84","manifest.json","a2eeefb6-65bb-11f0-b4b9-0224a6c84d84",252,["D",1754155682302],"{\n \"name\": \"Pathfinder\",\n \"short_name\": \"Pathfinder\",\n \"description\": \"Ryi's 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",[],[228,376],{"_103":384,"_95":385,"_152":386,"_154":229,"_155":137,"_156":387,"_158":159,"_105":388,"_100":230,"_161":201,"_163":389,"_164":22,"_165":-5,"_166":390,"_98":391},"332dfe64-6fc6-11f0-828d-0224a6c84d84","sw.js","bc028a4e-65bb-11f0-ae09-0224a6c84d84",255,["D",1754155750124],"// Service Worker for Pathfinder PWA\nconst _CACHE_NAME = 'pathfinder-v1';\nconst STATIC_CACHE = 'pathfinder-static-v1';\nconst DATA_CACHE = 'pathfinder-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('PathfinderDB', 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('Pathfinder', options)\n );\n});\n\nconsole.log('Service Worker: Loaded successfully');\n",[],[228,385],[228],{"_103":394,"_95":395,"_152":396,"_154":-5,"_155":137,"_156":397,"_158":159,"_105":398,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":399,"_98":409},"3c2890ac-65bb-11f0-8588-0224a6c84d84","shared","3c289160-65bb-11f0-8588-0224a6c84d84",9,["D",1753051529098],[400],{"_103":401,"_95":402,"_152":403,"_154":396,"_155":137,"_156":404,"_158":159,"_105":405,"_100":361,"_161":201,"_163":406,"_164":22,"_165":-5,"_166":407,"_98":408},"3aae4e64-6fda-11f0-a769-0224a6c84d84","types.ts","4dcaf8ae-65bb-11f0-974b-0224a6c84d84",371,["D",1754164352644],"// Shared types for the Pathfinder 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 sort_order?: number; // Manual ordering, lower numbers appear first\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\n// Image utility functions\nexport async function downloadImageAsBase64(imageUrl: string, maxSizeKB: number = 500): Promise {\n try {\n // Fetch the image\n const response = await fetch(imageUrl, {\n mode: 'cors'\n });\n \n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n \n // Get the blob\n const blob = await response.blob();\n \n // Check file size (convert KB to bytes)\n if (blob.size > maxSizeKB * 1024) {\n console.warn(`Image too large: ${blob.size} bytes (max: ${maxSizeKB * 1024} bytes)`);\n return null;\n }\n \n // Convert to base64\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n resolve(result);\n };\n reader.onerror = () => reject(reader.error);\n reader.readAsDataURL(blob);\n });\n } catch (error) {\n console.error('Error downloading image:', error);\n return null;\n }\n}\n\nexport function isDataUrl(url: string): boolean {\n return url.startsWith('data:');\n}\n\nexport function validateImageUrl(url: string): boolean {\n if (!url) return false;\n \n // Allow data URLs (base64 images)\n if (isDataUrl(url)) return true;\n \n // Allow HTTP/HTTPS URLs\n try {\n const parsed = new URL(url);\n return parsed.protocol === 'http:' || parsed.protocol === 'https:';\n } catch {\n return false;\n }\n}\n\n// Clipboard image utility functions\nexport function handleClipboardPaste(event: ClipboardEvent): Promise {\n return new Promise((resolve) => {\n const items = event.clipboardData?.items;\n if (!items) {\n resolve(null);\n return;\n }\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n \n // Check if the item is an image\n if (item.type.startsWith('image/')) {\n const file = item.getAsFile();\n if (!file) continue;\n \n // Check file size (500KB max)\n if (file.size > 500 * 1024) {\n console.warn(`Image too large: ${file.size} bytes (max: 500KB)`);\n continue;\n }\n \n // Convert to base64\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n resolve(result);\n };\n reader.onerror = () => resolve(null);\n reader.readAsDataURL(file);\n return;\n }\n }\n \n resolve(null);\n });\n}\n\nexport function setupClipboardListener(onImagePaste: (imageData: string) => void): () => void {\n const handlePaste = async (event: ClipboardEvent) => {\n const imageData = await handleClipboardPaste(event);\n if (imageData) {\n event.preventDefault();\n onImagePaste(imageData);\n }\n };\n \n document.addEventListener('paste', handlePaste);\n \n // Return cleanup function\n return () => {\n document.removeEventListener('paste', handlePaste);\n };\n}\n",[],[395,402],[395],{"_103":411,"_95":412,"_152":413,"_154":-5,"_155":137,"_156":414,"_158":159,"_105":415,"_100":32,"_161":175,"_163":416,"_164":22,"_165":-5,"_166":417,"_98":418},"ac69f678-65b9-11f0-9de2-0224a6c84d84",".vtignore","ac69f722-65b9-11f0-9de2-0224a6c84d84",3,["D",1753050858403],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[412],{"_103":420,"_95":421,"_152":422,"_154":-5,"_155":137,"_156":423,"_158":159,"_105":424,"_100":425,"_161":175,"_163":426,"_164":22,"_165":-5,"_166":427,"_98":428},"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",[],[421],{"_103":430,"_95":431,"_152":432,"_154":-5,"_155":137,"_156":425,"_158":159,"_105":433,"_100":32,"_161":175,"_163":434,"_164":22,"_165":-5,"_166":435,"_98":436},"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}",[],[431],{"_103":438,"_95":439,"_152":440,"_154":-5,"_155":137,"_156":441,"_158":159,"_105":442,"_100":157,"_161":443,"_163":444,"_164":22,"_165":445,"_166":446,"_98":447},"fe49628a-6fc3-11f0-aa73-0224a6c84d84","main.tsx","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",[],[439],"files",[149,168,180,187,194,205,215,226,233,240,250,259,269,278,288,297,306,315,325,335,346,355,365,374,383,393,400,410,419,429,437],"counts",{"_452":32,"_453":174,"_454":32,"_455":32},"pulls","branches","forks","envVars","contents",[],{"_103":279,"_95":280,"_152":281,"_154":236,"_155":137,"_156":282,"_158":159,"_105":459,"_100":284,"_161":201,"_163":285,"_164":22,"_165":-5,"_98":460},["D",1754159678064],[228,235,280],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":469,"_175":474,"_477":478,"_514":515,"_524":-7,"_525":174,"_526":22},{"_103":104,"_95":96,"_105":470,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":471,"_131":472,"_134":473,"_146":22},["D",1753050615637],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},{"_103":279,"_95":280,"_152":281,"_154":236,"_155":137,"_156":282,"_158":159,"_105":475,"_100":284,"_161":201,"_163":285,"_164":22,"_165":-5,"_98":476},["D",1754159678064],[228,235,280],"history",[479,484,490,495,500,505,509],{"_103":480,"_155":137,"_152":281,"_95":280,"_163":481,"_161":201,"_100":172,"_154":236,"_105":482,"_156":483,"_165":-5},"e54dd7ae-6c0b-11f0-94b1-0224a6c84d84","/** @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 // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n }\n }, [isOpen, searchQuery]);\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 // 1. Try OMDB API for movies/TV shows (free, no key needed for search)\n if (searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') || \n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series')) {\n try {\n const omdbResponse = await fetch(\n `https://www.omdbapi.com/?s=${encodeURIComponent(searchTerm)}&type=movie&apikey=trilogy`\n );\n if (omdbResponse.ok) {\n const omdbData = await omdbResponse.json();\n if (omdbData.Search) {\n omdbData.Search.slice(0, 8).forEach((item: any) => {\n if (item.Poster && item.Poster !== 'N/A') {\n results.push({\n url: item.Poster,\n thumbnail: item.Poster,\n title: `${item.Title} (${item.Year})`,\n source: 'OMDB'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('OMDB search failed, continuing with other sources');\n }\n }\n \n // 2. Try Open Library for books\n if (searchTerm.toLowerCase().includes('book') || results.length < 4) {\n try {\n const openLibResponse = await fetch(\n `https://openlibrary.org/search.json?q=${encodeURIComponent(searchTerm)}&limit=10`\n );\n if (openLibResponse.ok) {\n const openLibData = await openLibResponse.json();\n if (openLibData.docs) {\n openLibData.docs.slice(0, 6).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] : ''}`,\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 \n // 3. Try a generic image search using DuckDuckGo's instant answer API (no key needed)\n if (results.length < 8) {\n try {\n // Use a CORS proxy for DuckDuckGo images\n const ddgResponse = await fetch(\n `https://api.allorigins.win/get?url=${encodeURIComponent(\n `https://duckduckgo.com/?q=${encodeURIComponent(searchTerm + ' cover poster')}&t=h_&iax=images&ia=images&format=json`\n )}`\n );\n if (ddgResponse.ok) {\n // This is a fallback - DuckDuckGo's API is limited\n console.log('DuckDuckGo search attempted');\n }\n } catch (err) {\n console.log('DuckDuckGo search failed');\n }\n }\n \n // 4. Fallback to themed placeholder images based on media type\n if (results.length === 0) {\n const mediaType = searchTerm.toLowerCase().includes('book') ? 'book' :\n searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') ? 'movie' :\n searchTerm.toLowerCase().includes('game') ? 'game' :\n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series') ? 'tv' :\n 'media';\n \n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => {\n const colors = ['6366f1', '8b5cf6', 'ec4899', 'ef4444', 'f59e0b', '10b981', '06b6d4', '3b82f6'];\n const color = colors[i % colors.length];\n const emoji = mediaType === 'book' ? '📚' : \n mediaType === 'movie' ? '🎬' : \n mediaType === 'game' ? '🎮' : \n mediaType === 'tv' ? '📺' : '🎭';\n \n return {\n url: `https://via.placeholder.com/400x600/${color}/ffffff?text=${encodeURIComponent(emoji + ' ' + searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/${color}/ffffff?text=${encodeURIComponent(emoji)}`,\n title: `${searchTerm} - ${mediaType.charAt(0).toUpperCase() + mediaType.slice(1)} Cover ${i + 1}`,\n source: 'Generated'\n };\n });\n \n results.push(...placeholderResults);\n }\n \n // 5. If we still don't have enough results, add some themed Lorem Picsum images\n while (results.length < 12) {\n const seed = `${searchTerm.replace(/\\s/g, '')}-${results.length}`;\n results.push({\n url: `https://picsum.photos/seed/${seed}/400/600`,\n thumbnail: `https://picsum.photos/seed/${seed}/200/300`,\n title: `${searchTerm} - Image ${results.length + 1}`,\n source: 'Lorem Picsum'\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 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

\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",["D",1753745879581],199,{"_103":485,"_155":137,"_152":281,"_95":280,"_163":486,"_161":201,"_100":487,"_154":236,"_105":488,"_156":489,"_165":-5},"e1631550-6c0b-11f0-8489-0224a6c84d84","/** @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 // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n }\n }, [isOpen, searchQuery]);\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 // 1. Try OMDB API for movies/TV shows (free, no key needed for search)\n if (searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') || \n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series')) {\n try {\n const omdbResponse = await fetch(\n `https://www.omdbapi.com/?s=${encodeURIComponent(searchTerm)}&type=movie&apikey=trilogy`\n );\n if (omdbResponse.ok) {\n const omdbData = await omdbResponse.json();\n if (omdbData.Search) {\n omdbData.Search.slice(0, 8).forEach((item: any) => {\n if (item.Poster && item.Poster !== 'N/A') {\n results.push({\n url: item.Poster,\n thumbnail: item.Poster,\n title: `${item.Title} (${item.Year})`,\n source: 'OMDB'\n });\n }\n });\n }\n }\n } catch (_err) {\n console.log('OMDB search failed, continuing with other sources');\n }\n }\n \n // 2. Try Open Library for books\n if (searchTerm.toLowerCase().includes('book') || results.length < 4) {\n try {\n const openLibResponse = await fetch(\n `https://openlibrary.org/search.json?q=${encodeURIComponent(searchTerm)}&limit=10`\n );\n if (openLibResponse.ok) {\n const openLibData = await openLibResponse.json();\n if (openLibData.docs) {\n openLibData.docs.slice(0, 6).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] : ''}`,\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 \n // 3. Try a generic image search using DuckDuckGo's instant answer API (no key needed)\n if (results.length < 8) {\n try {\n // Use a CORS proxy for DuckDuckGo images\n const ddgResponse = await fetch(\n `https://api.allorigins.win/get?url=${encodeURIComponent(\n `https://duckduckgo.com/?q=${encodeURIComponent(searchTerm + ' cover poster')}&t=h_&iax=images&ia=images&format=json`\n )}`\n );\n if (ddgResponse.ok) {\n // This is a fallback - DuckDuckGo's API is limited\n console.log('DuckDuckGo search attempted');\n }\n } catch (err) {\n console.log('DuckDuckGo search failed');\n }\n }\n \n // 4. Fallback to themed placeholder images based on media type\n if (results.length === 0) {\n const mediaType = searchTerm.toLowerCase().includes('book') ? 'book' :\n searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') ? 'movie' :\n searchTerm.toLowerCase().includes('game') ? 'game' :\n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series') ? 'tv' :\n 'media';\n \n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => {\n const colors = ['6366f1', '8b5cf6', 'ec4899', 'ef4444', 'f59e0b', '10b981', '06b6d4', '3b82f6'];\n const color = colors[i % colors.length];\n const emoji = mediaType === 'book' ? '📚' : \n mediaType === 'movie' ? '🎬' : \n mediaType === 'game' ? '🎮' : \n mediaType === 'tv' ? '📺' : '🎭';\n \n return {\n url: `https://via.placeholder.com/400x600/${color}/ffffff?text=${encodeURIComponent(emoji + ' ' + searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/${color}/ffffff?text=${encodeURIComponent(emoji)}`,\n title: `${searchTerm} - ${mediaType.charAt(0).toUpperCase() + mediaType.slice(1)} Cover ${i + 1}`,\n source: 'Generated'\n };\n });\n \n results.push(...placeholderResults);\n }\n \n // 5. If we still don't have enough results, add some themed Lorem Picsum images\n while (results.length < 12) {\n const seed = `${searchTerm.replace(/\\s/g, '')}-${results.length}`;\n results.push({\n url: `https://picsum.photos/seed/${seed}/400/600`,\n thumbnail: `https://picsum.photos/seed/${seed}/200/300`,\n title: `${searchTerm} - Image ${results.length + 1}`,\n source: 'Lorem Picsum'\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 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

\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",5,["D",1753745873019],198,{"_103":491,"_155":137,"_152":281,"_95":280,"_163":492,"_161":201,"_100":157,"_154":236,"_105":493,"_156":494,"_165":-5},"dd99bf1e-6c0b-11f0-b9fe-0224a6c84d84","/** @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 // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n }\n }, [isOpen, searchQuery]);\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 // 1. Try OMDB API for movies/TV shows (free, no key needed for search)\n if (searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') || \n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series')) {\n try {\n const omdbResponse = await fetch(\n `https://www.omdbapi.com/?s=${encodeURIComponent(searchTerm)}&type=movie&apikey=trilogy`\n );\n if (omdbResponse.ok) {\n const omdbData = await omdbResponse.json();\n if (omdbData.Search) {\n omdbData.Search.slice(0, 8).forEach((item: any) => {\n if (item.Poster && item.Poster !== 'N/A') {\n results.push({\n url: item.Poster,\n thumbnail: item.Poster,\n title: `${item.Title} (${item.Year})`,\n source: 'OMDB'\n });\n }\n });\n }\n }\n } catch (err) {\n console.log('OMDB search failed, continuing with other sources');\n }\n }\n \n // 2. Try Open Library for books\n if (searchTerm.toLowerCase().includes('book') || results.length < 4) {\n try {\n const openLibResponse = await fetch(\n `https://openlibrary.org/search.json?q=${encodeURIComponent(searchTerm)}&limit=10`\n );\n if (openLibResponse.ok) {\n const openLibData = await openLibResponse.json();\n if (openLibData.docs) {\n openLibData.docs.slice(0, 6).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] : ''}`,\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 \n // 3. Try a generic image search using DuckDuckGo's instant answer API (no key needed)\n if (results.length < 8) {\n try {\n // Use a CORS proxy for DuckDuckGo images\n const ddgResponse = await fetch(\n `https://api.allorigins.win/get?url=${encodeURIComponent(\n `https://duckduckgo.com/?q=${encodeURIComponent(searchTerm + ' cover poster')}&t=h_&iax=images&ia=images&format=json`\n )}`\n );\n if (ddgResponse.ok) {\n // This is a fallback - DuckDuckGo's API is limited\n console.log('DuckDuckGo search attempted');\n }\n } catch (err) {\n console.log('DuckDuckGo search failed');\n }\n }\n \n // 4. Fallback to themed placeholder images based on media type\n if (results.length === 0) {\n const mediaType = searchTerm.toLowerCase().includes('book') ? 'book' :\n searchTerm.toLowerCase().includes('movie') || searchTerm.toLowerCase().includes('film') ? 'movie' :\n searchTerm.toLowerCase().includes('game') ? 'game' :\n searchTerm.toLowerCase().includes('tv') || searchTerm.toLowerCase().includes('series') ? 'tv' :\n 'media';\n \n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => {\n const colors = ['6366f1', '8b5cf6', 'ec4899', 'ef4444', 'f59e0b', '10b981', '06b6d4', '3b82f6'];\n const color = colors[i % colors.length];\n const emoji = mediaType === 'book' ? '📚' : \n mediaType === 'movie' ? '🎬' : \n mediaType === 'game' ? '🎮' : \n mediaType === 'tv' ? '📺' : '🎭';\n \n return {\n url: `https://via.placeholder.com/400x600/${color}/ffffff?text=${encodeURIComponent(emoji + ' ' + searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/${color}/ffffff?text=${encodeURIComponent(emoji)}`,\n title: `${searchTerm} - ${mediaType.charAt(0).toUpperCase() + mediaType.slice(1)} Cover ${i + 1}`,\n source: 'Generated'\n };\n });\n \n results.push(...placeholderResults);\n }\n \n // 5. If we still don't have enough results, add some themed Lorem Picsum images\n while (results.length < 12) {\n const seed = `${searchTerm.replace(/\\s/g, '')}-${results.length}`;\n results.push({\n url: `https://picsum.photos/seed/${seed}/400/600`,\n thumbnail: `https://picsum.photos/seed/${seed}/200/300`,\n title: `${searchTerm} - Image ${results.length + 1}`,\n source: 'Lorem Picsum'\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 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

\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",["D",1753745866662],197,{"_103":496,"_155":137,"_152":281,"_95":280,"_163":497,"_161":201,"_100":414,"_154":236,"_105":498,"_156":499,"_165":-5},"284ab9b2-6768-11f0-8739-0224a6c84d84","/** @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 // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n }\n }, [isOpen, searchQuery]);\n\n const searchImages = async (searchTerm: string) => {\n if (!searchTerm.trim()) return;\n \n setLoading(true);\n setError(null);\n \n try {\n // Using a combination of free image APIs\n // First try Unsplash for high-quality images\n const unsplashResponse = await fetch(\n `https://api.unsplash.com/search/photos?query=${encodeURIComponent(searchTerm)}&per_page=20&client_id=demo`\n );\n \n if (unsplashResponse.ok) {\n const unsplashData = await unsplashResponse.json();\n const unsplashResults: ImageSearchResult[] = unsplashData.results.map((photo: any) => ({\n url: photo.urls.regular,\n thumbnail: photo.urls.thumb,\n title: photo.alt_description || photo.description || searchTerm,\n source: 'Unsplash'\n }));\n \n setResults(unsplashResults);\n } else {\n // Fallback to Lorem Picsum for placeholder images\n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => ({\n url: `https://picsum.photos/400/600?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n thumbnail: `https://picsum.photos/200/300?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n title: `${searchTerm} - Image ${i + 1}`,\n source: 'Lorem Picsum'\n }));\n \n setResults(placeholderResults);\n }\n } catch (err) {\n console.error('Image search failed:', err);\n setError('Failed to search for images. Please try again.');\n \n // Generate some placeholder results as fallback\n const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({\n url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n title: `${searchTerm} - Placeholder ${i + 1}`,\n source: 'Placeholder'\n }));\n \n setResults(fallbackResults);\n } finally {\n setLoading(false);\n }\n };\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

\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",["D",1753235749862],194,{"_103":501,"_155":137,"_152":281,"_95":280,"_163":502,"_161":201,"_100":425,"_154":236,"_105":503,"_156":504,"_165":-5},"c3b7fde8-6767-11f0-abe9-0224a6c84d84","/** @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 // Update query when modal opens with new searchQuery\n useEffect(() => {\n if (isOpen && searchQuery) {\n setQuery(searchQuery);\n }\n }, [isOpen, searchQuery]);\n\n const searchImages = async (searchTerm: string) => {\n if (!searchTerm.trim()) return;\n \n setLoading(true);\n setError(null);\n \n try {\n // Using a combination of free image APIs\n // First try Unsplash for high-quality images\n const unsplashResponse = await fetch(\n `https://api.unsplash.com/search/photos?query=${encodeURIComponent(searchTerm)}&per_page=20&client_id=demo`\n );\n \n if (unsplashResponse.ok) {\n const unsplashData = await unsplashResponse.json();\n const unsplashResults: ImageSearchResult[] = unsplashData.results.map((photo: any) => ({\n url: photo.urls.regular,\n thumbnail: photo.urls.thumb,\n title: photo.alt_description || photo.description || searchTerm,\n source: 'Unsplash'\n }));\n \n setResults(unsplashResults);\n } else {\n // Fallback to Lorem Picsum for placeholder images\n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => ({\n url: `https://picsum.photos/400/600?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n thumbnail: `https://picsum.photos/200/300?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n title: `${searchTerm} - Image ${i + 1}`,\n source: 'Lorem Picsum'\n }));\n \n setResults(placeholderResults);\n }\n } catch (err) {\n console.error('Image search failed:', err);\n setError('Failed to search for images. Please try again.');\n \n // Generate some placeholder results as fallback\n const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({\n url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n title: `${searchTerm} - Placeholder ${i + 1}`,\n source: 'Placeholder'\n }));\n \n setResults(fallbackResults);\n } finally {\n setLoading(false);\n }\n };\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 console.log('ImageSearchModal rendering with isOpen:', isOpen, 'query:', query);\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

\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}\n",["D",1753235581126],185,{"_103":506,"_155":137,"_152":281,"_95":280,"_163":497,"_161":201,"_100":174,"_154":236,"_105":507,"_156":508,"_165":-5},"bf0d4618-6767-11f0-bbbe-0224a6c84d84",["D",1753235573297],184,{"_103":510,"_155":137,"_152":281,"_95":280,"_163":511,"_161":201,"_100":32,"_154":236,"_105":512,"_156":513,"_165":-5},"b5999274-6764-11f0-aadc-0224a6c84d84","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } 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 // Using a combination of free image APIs\n // First try Unsplash for high-quality images\n const unsplashResponse = await fetch(\n `https://api.unsplash.com/search/photos?query=${encodeURIComponent(searchTerm)}&per_page=20&client_id=demo`\n );\n \n if (unsplashResponse.ok) {\n const unsplashData = await unsplashResponse.json();\n const unsplashResults: ImageSearchResult[] = unsplashData.results.map((photo: any) => ({\n url: photo.urls.regular,\n thumbnail: photo.urls.thumb,\n title: photo.alt_description || photo.description || searchTerm,\n source: 'Unsplash'\n }));\n \n setResults(unsplashResults);\n } else {\n // Fallback to Lorem Picsum for placeholder images\n const placeholderResults: ImageSearchResult[] = Array.from({ length: 12 }, (_, i) => ({\n url: `https://picsum.photos/400/600?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n thumbnail: `https://picsum.photos/200/300?random=${searchTerm.replace(/\\s/g, '')}-${i}`,\n title: `${searchTerm} - Image ${i + 1}`,\n source: 'Lorem Picsum'\n }));\n \n setResults(placeholderResults);\n }\n } catch (err) {\n console.error('Image search failed:', err);\n setError('Failed to search for images. Please try again.');\n \n // Generate some placeholder results as fallback\n const fallbackResults: ImageSearchResult[] = Array.from({ length: 8 }, (_, i) => ({\n url: `https://via.placeholder.com/400x600/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n thumbnail: `https://via.placeholder.com/200x300/e2e8f0/64748b?text=${encodeURIComponent(searchTerm)}`,\n title: `${searchTerm} - Placeholder ${i + 1}`,\n source: 'Placeholder'\n }));\n \n setResults(fallbackResults);\n } finally {\n setLoading(false);\n }\n };\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

\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}\n",["D",1753234268952],170,"versions",[516,518,519,520,521,522,523],{"_175":479,"_517":484},"previous",{"_175":484,"_517":490},{"_175":490,"_517":495},{"_175":495,"_517":500},{"_175":500,"_517":505},{"_175":505,"_517":509},{"_175":509,"_517":-5},"versionNumber","page","hasNext","actionData","errors"]

History for ImageSearchModal.tsx