\n \n\n","label",[153,63],"frontend","pulls","branches",1,"forks","envVars",{"_162":26,"_164":26},"connections",{"_162":26,"_163":26},"count","unfilledCount","emptyCount",{"_32":339,"_13":300,"_61":293,"_42":-5,"_34":35,"_146":335,"_147":83,"_36":340,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":341,"_17":342},{"_32":334,"_13":325,"_61":319,"_42":293,"_34":35,"_146":335,"_147":83,"_36":336,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":337,"_17":338},{"_32":326,"_13":327,"_61":328,"_42":319,"_34":35,"_146":329,"_147":83,"_36":330,"_38":156,"_64":192,"_149":331,"_65":24,"_151":-5,"_194":332,"_17":333},{"_32":316,"_13":317,"_61":318,"_42":319,"_34":35,"_146":320,"_147":83,"_36":321,"_38":191,"_64":192,"_149":322,"_65":24,"_151":-5,"_194":323,"_17":324},{"_32":311,"_13":310,"_61":304,"_42":293,"_34":35,"_146":312,"_147":83,"_36":313,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":314,"_17":315},{"_32":301,"_13":302,"_61":303,"_42":304,"_34":35,"_146":305,"_147":83,"_36":306,"_38":156,"_64":192,"_149":307,"_65":24,"_151":-5,"_194":308,"_17":309},{"_32":291,"_13":292,"_61":81,"_42":293,"_34":35,"_146":294,"_147":83,"_36":295,"_38":156,"_64":296,"_149":297,"_65":24,"_151":-5,"_194":298,"_17":299},{"_32":287,"_13":153,"_61":145,"_42":-5,"_34":35,"_146":39,"_147":83,"_36":288,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":289,"_17":290},{"_32":283,"_13":240,"_61":234,"_42":145,"_34":35,"_146":235,"_147":83,"_36":284,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":285,"_17":286},{"_32":274,"_13":275,"_61":276,"_42":234,"_34":35,"_146":277,"_147":83,"_36":278,"_38":279,"_64":192,"_149":280,"_65":24,"_151":-5,"_194":281,"_17":282},{"_32":266,"_13":267,"_61":268,"_42":234,"_34":35,"_146":269,"_147":83,"_36":270,"_38":26,"_64":192,"_149":271,"_65":24,"_151":-5,"_194":272,"_17":273},{"_32":258,"_13":259,"_61":260,"_42":234,"_34":35,"_146":261,"_147":83,"_36":262,"_38":26,"_64":192,"_149":263,"_65":24,"_151":-5,"_194":264,"_17":265},{"_32":249,"_13":250,"_61":251,"_42":234,"_34":35,"_146":252,"_147":83,"_36":253,"_38":254,"_64":192,"_149":255,"_65":24,"_151":-5,"_194":256,"_17":257},{"_32":241,"_13":242,"_61":243,"_42":234,"_34":35,"_146":244,"_147":83,"_36":245,"_38":215,"_64":192,"_149":246,"_65":24,"_151":-5,"_194":247,"_17":248},{"_32":231,"_13":232,"_61":233,"_42":234,"_34":35,"_146":235,"_147":83,"_36":236,"_38":26,"_64":192,"_149":237,"_65":24,"_151":-5,"_194":238,"_17":239},{"_32":144,"_13":63,"_61":62,"_42":145,"_34":35,"_146":39,"_147":83,"_36":228,"_38":26,"_64":21,"_149":150,"_65":24,"_151":-5,"_194":229,"_17":230},{"_32":220,"_13":221,"_61":222,"_42":145,"_34":35,"_146":223,"_147":83,"_36":224,"_38":26,"_64":192,"_149":225,"_65":24,"_151":-5,"_194":226,"_17":227},{"_32":214,"_13":213,"_61":207,"_42":-5,"_34":35,"_146":215,"_147":83,"_36":216,"_38":26,"_64":217,"_149":-5,"_65":24,"_151":-5,"_194":218,"_17":219},{"_32":204,"_13":205,"_61":206,"_42":207,"_34":35,"_146":208,"_147":83,"_36":209,"_38":156,"_64":192,"_149":210,"_65":24,"_151":-5,"_194":211,"_17":212},{"_32":197,"_13":198,"_61":199,"_42":-5,"_34":35,"_146":109,"_147":83,"_36":200,"_38":156,"_64":21,"_149":201,"_65":24,"_151":-5,"_194":202,"_17":203},{"_32":186,"_13":187,"_61":188,"_42":-5,"_34":35,"_146":189,"_147":83,"_36":190,"_38":191,"_64":192,"_149":193,"_65":24,"_151":-5,"_194":195,"_17":196},"4219e608-3f98-11f0-a83c-76b3cceeab13","main.tsx","f04a67fe-3f96-11f0-8f2e-76b3cceeab13",16,["D",1748858362493],3,"script","// This file has been replaced by the new Jotter app structure\n// The main entry point is now /backend/index.ts\n// Please use the backend/index.ts file as the HTTP trigger\n\nexport default async function (req: Request) {\n return new Response(\"Please use /backend/index.ts as the main entry point\", {\n status: 302,\n headers: { Location: \"/backend/\" }\n });\n}","children",[],[187],"a445096a-3f99-11f0-a706-76b3cceeab13","README.md","efe40a9e-3f97-11f0-ab6c-76b3cceeab13",["D",1748858956686],"# Jotter\n\nA simple and user-friendly notes app for remote workspaces.\n\n# Jotter\n\nA simple and user-friendly notes app for remote workspaces with smart labeling and organization.\n\n## Features\n\n- **Clean, minimal interface** - Distraction-free note-taking\n- **Smart labeling system** - Organize notes by importance and time frame\n- **Priority levels** - Low, Medium, High, Urgent with visual indicators\n- **Time frame tracking** - Today, This Week, This Month, Later, No Deadline\n- **Completion tracking** - Mark notes as done/todo with visual feedback\n- **Real-time note editing** - Auto-save functionality\n- **Advanced filtering** - Filter by priority, time frame, and completion status\n- **Search functionality** - Find notes quickly by title or content\n- **Responsive design** - Works great on all screen sizes\n\n## Priority System\n\n- 🚨 **Urgent** - Needs immediate attention\n- ⚡ **High** - Important tasks to complete soon\n- 📋 **Medium** - Regular priority items\n- 📝 **Low** - Nice to have or reference notes\n\n## Time Frame Options\n\n- 🔥 **Today** - Must be done today\n- 📅 **This Week** - Complete within the week\n- 📆 **This Month** - Monthly goals and tasks\n- 🕐 **Later** - Future items to revisit\n- ♾️ **No Deadline** - Reference notes and ideas\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main API server\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database operations\n│ └── routes/\n│ └── notes.ts # Notes API endpoints\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── NotesList.tsx # Notes sidebar\n│ │ ├── NoteEditor.tsx # Note editing area\n│ │ └── SearchBar.tsx # Search functionality\n│ └── style.css # Custom styles\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Development\n\nThe app uses:\n- **Backend**: Hono.js for API routes\n- **Frontend**: React with TypeScript\n- **Database**: SQLite for note storage\n- **Styling**: TailwindCSS",[],[198],"32b25ffa-3f99-11f0-9462-76b3cceeab13","types.ts","f289e192-3f97-11f0-933b-76b3cceeab13","a0d5ad60-e89e-45d5-b597-509694c34435",18,["D",1748858766146],"export type ImportanceLevel = 'low' | 'medium' | 'high' | 'urgent';\nexport type TimeFrame = 'today' | 'this_week' | 'this_month' | 'later' | 'no_deadline';\n\nexport interface Note {\n id: number;\n title: string;\n content: string;\n importance: ImportanceLevel;\n time_frame: TimeFrame;\n is_completed: boolean;\n created_at: string;\n updated_at: string;\n}\n\nexport interface CreateNoteRequest {\n title: string;\n content: string;\n importance?: ImportanceLevel;\n time_frame?: TimeFrame;\n}\n\nexport interface UpdateNoteRequest {\n title?: string;\n content?: string;\n importance?: ImportanceLevel;\n time_frame?: TimeFrame;\n is_completed?: boolean;\n}\n\nexport const IMPORTANCE_LABELS = {\n low: { label: 'Low', color: 'bg-gray-100 text-gray-700', emoji: '📝' },\n medium: { label: 'Medium', color: 'bg-blue-100 text-blue-700', emoji: '📋' },\n high: { label: 'High', color: 'bg-orange-100 text-orange-700', emoji: '⚡' },\n urgent: { label: 'Urgent', color: 'bg-red-100 text-red-700', emoji: '🚨' }\n} as const;\n\nexport const TIME_FRAME_LABELS = {\n today: { label: 'Today', color: 'bg-red-50 text-red-600', emoji: '🔥' },\n this_week: { label: 'This Week', color: 'bg-orange-50 text-orange-600', emoji: '📅' },\n this_month: { label: 'This Month', color: 'bg-yellow-50 text-yellow-600', emoji: '📆' },\n later: { label: 'Later', color: 'bg-green-50 text-green-600', emoji: '🕐' },\n no_deadline: { label: 'No Deadline', color: 'bg-gray-50 text-gray-500', emoji: '♾️' }\n} as const;",[],[213,205],"shared","f28a125c-3f97-11f0-933b-76b3cceeab13",5,["D",1748858229011],"directory",[183],[213],"3b049048-3f98-11f0-a0de-76b3cceeab13","index.tsx","3b0490f2-3f98-11f0-a0de-76b3cceeab13",15,["D",1748858350614],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/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\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[153,221],["D",1748858275572],[],[153,63],"13c1706e-3f98-11f0-b85e-76b3cceeab13","SearchBar.tsx","13c1715e-3f98-11f0-b85e-76b3cceeab13","bca7a288-ebf0-438a-96bf-cf363ceca606",11,["D",1748858284741],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface SearchBarProps {\n onSearch: (query: string) => void;\n placeholder?: string;\n}\n\nexport default function SearchBar({ onSearch, placeholder = \"Search notes...\" }: SearchBarProps) {\n const [query, setQuery] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSearch(query);\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const value = e.target.value;\n setQuery(value);\n \n // Search as user types (debounced effect would be better in production)\n onSearch(value);\n };\n\n return (\n \n );\n}",[],[153,240,232],"components","9c92e462-3f99-11f0-b451-76b3cceeab13","NotesList.tsx","20b42aaa-3f98-11f0-a759-76b3cceeab13",36,["D",1748858943775],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Note, ImportanceLevel, TimeFrame } from \"../../shared/types.ts\";\nimport { IMPORTANCE_LABELS, TIME_FRAME_LABELS } from \"../../shared/types.ts\";\nimport SearchBar from \"./SearchBar.tsx\";\nimport FilterBar from \"./FilterBar.tsx\";\n\ninterface NotesListProps {\n notes: Note[];\n selectedNoteId: number | null;\n onSelectNote: (note: Note) => void;\n onCreateNote: () => void;\n onDeleteNote: (id: number) => void;\n onSearch: (query: string) => void;\n}\n\nexport default function NotesList({ \n notes, \n selectedNoteId, \n onSelectNote, \n onCreateNote, \n onDeleteNote,\n onSearch \n}: NotesListProps) {\n const [selectedImportance, setSelectedImportance] = useState('all');\n const [selectedTimeFrame, setSelectedTimeFrame] = useState('all');\n const [showCompleted, setShowCompleted] = useState(false);\n\n // Filter notes based on selected filters\n const filteredNotes = notes.filter(note => {\n // Completion filter\n if (note.is_completed !== showCompleted) return false;\n \n // Importance filter\n if (selectedImportance !== 'all' && note.importance !== selectedImportance) return false;\n \n // Time frame filter\n if (selectedTimeFrame !== 'all' && note.time_frame !== selectedTimeFrame) return false;\n \n return true;\n });\n \n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n \n if (diffInHours < 24) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else if (diffInHours < 24 * 7) {\n return date.toLocaleDateString([], { weekday: 'short' });\n } else {\n return date.toLocaleDateString([], { month: 'short', day: 'numeric' });\n }\n };\n\n const truncateContent = (content: string, maxLength: number = 100) => {\n if (content.length <= maxLength) return content;\n return content.substring(0, maxLength) + \"...\";\n };\n\n return (\n

\n {/* Header */}\n

📝 Jotter

\n \n \n New\n \n

\n \n \n

\n\n {/* Filters */}\n \n\n {/* Notes List */}\n

\n {filteredNotes.length === 0 ? (\n

📄

\n {notes.length === 0 ? (\n <>\n

No notes yet

Create your first note to get started

\n \n ) : (\n <>\n

No notes match your filters

Try adjusting your filter settings

\n \n )}\n

\n ) : (\n

\n {filteredNotes.map((note) => (\n onSelectNote(note)}\n className={`note-item p-4 cursor-pointer transition-colors ${\n selectedNoteId === note.id ? 'active' : ''\n }`}\n >\n

\n {note.title || \"Untitled\"}\n

\n {note.is_completed && ✅}\n

\n \n {/* Labels */}\n

\n \n {IMPORTANCE_LABELS[note.importance].emoji}\n {IMPORTANCE_LABELS[note.importance].label}\n \n \n {TIME_FRAME_LABELS[note.time_frame].emoji}\n {TIME_FRAME_LABELS[note.time_frame].label}\n \n

\n \n

\n {truncateContent(note.content) || \"No content\"}\n

\n {formatDate(note.updated_at)}\n

\n \n {\n e.stopPropagation();\n onDeleteNote(note.id);\n }}\n className=\"ml-2 p-1 text-gray-400 hover:text-red-500 transition-colors\"\n title=\"Delete note\"\n >\n \n \n

\n ))}\n

\n )}\n

\n \n );\n}",[],[153,240,242],"75bae132-3f99-11f0-a390-76b3cceeab13","NoteEditor.tsx","2df6deba-3f98-11f0-a95b-76b3cceeab13",30,["D",1748858878611],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Note, ImportanceLevel, TimeFrame } from \"../../shared/types.ts\";\nimport LabelSelector from \"./LabelSelector.tsx\";\n\ninterface NoteEditorProps {\n note: Note | null;\n onSave: (id: number, title: string, content: string, importance: ImportanceLevel, timeFrame: TimeFrame, isCompleted: boolean) => void;\n}\n\nexport default function NoteEditor({ note, onSave }: NoteEditorProps) {\n const [title, setTitle] = useState(\"\");\n const [content, setContent] = useState(\"\");\n const [importance, setImportance] = useState('medium');\n const [timeFrame, setTimeFrame] = useState('no_deadline');\n const [isCompleted, setIsCompleted] = useState(false);\n const [isSaving, setIsSaving] = useState(false);\n const [lastSaved, setLastSaved] = useState(null);\n\n // Update local state when note changes\n useEffect(() => {\n if (note) {\n setTitle(note.title);\n setContent(note.content);\n setImportance(note.importance);\n setTimeFrame(note.time_frame);\n setIsCompleted(note.is_completed);\n } else {\n setTitle(\"\");\n setContent(\"\");\n setImportance('medium');\n setTimeFrame('no_deadline');\n setIsCompleted(false);\n }\n }, [note]);\n\n // Auto-save functionality\n useEffect(() => {\n if (!note) return;\n \n const timeoutId = setTimeout(async () => {\n if (title !== note.title || \n content !== note.content || \n importance !== note.importance || \n timeFrame !== note.time_frame || \n isCompleted !== note.is_completed) {\n setIsSaving(true);\n try {\n await onSave(note.id, title, content, importance, timeFrame, isCompleted);\n setLastSaved(new Date());\n } catch (error) {\n console.error(\"Failed to save note:\", error);\n } finally {\n setIsSaving(false);\n }\n }\n }, 1000); // Auto-save after 1 second of inactivity\n\n return () => clearTimeout(timeoutId);\n }, [note, title, content, importance, timeFrame, isCompleted, onSave]);\n\n const formatLastSaved = (date: Date) => {\n const now = new Date();\n const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);\n \n if (diffInSeconds < 60) {\n return \"Saved just now\";\n } else if (diffInSeconds < 3600) {\n const minutes = Math.floor(diffInSeconds / 60);\n return `Saved ${minutes} minute${minutes > 1 ? 's' : ''} ago`;\n } else {\n return `Saved at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;\n }\n };\n\n if (!note) {\n return (\n

✍️

Welcome to Jotter

Select a note to start editing, or create a new one

\n Perfect for remote workspaces and quick note-taking\n

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

\n {/* Editor Header */}\n

\n setTitle(e.target.value)}\n placeholder=\"Note title...\"\n className={`w-full text-xl font-semibold bg-transparent border-none outline-none placeholder-gray-400 ${\n isCompleted ? 'text-gray-500 line-through' : 'text-gray-900'\n }`}\n />\n

\n \n

\n {isSaving && (\n

\n Saving...\n

\n )}\n \n {lastSaved && !isSaving && (\n {formatLastSaved(lastSaved)}\n )}\n \n

\n {content.length} characters\n

\n\n {/* Labels */}\n \n

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

\n setContent(e.target.value)}\n placeholder=\"Start writing your note...\"\n className=\"note-editor w-full h-full resize-none border-none outline-none text-gray-700 placeholder-gray-400 leading-relaxed\"\n style={{ fontSize: '15px', lineHeight: '1.6' }}\n />\n

\n );\n}",[],[153,240,250],"54ee9fb6-3f99-11f0-9c10-76b3cceeab13","LabelSelector.tsx","54eea0a6-3f99-11f0-9c10-76b3cceeab13",24,["D",1748858823588],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ImportanceLevel, TimeFrame } from \"../../shared/types.ts\";\nimport { IMPORTANCE_LABELS, TIME_FRAME_LABELS } from \"../../shared/types.ts\";\n\ninterface LabelSelectorProps {\n importance: ImportanceLevel;\n timeFrame: TimeFrame;\n isCompleted: boolean;\n onImportanceChange: (importance: ImportanceLevel) => void;\n onTimeFrameChange: (timeFrame: TimeFrame) => void;\n onCompletedChange: (completed: boolean) => void;\n}\n\nexport default function LabelSelector({\n importance,\n timeFrame,\n isCompleted,\n onImportanceChange,\n onTimeFrameChange,\n onCompletedChange\n}: LabelSelectorProps) {\n const [showImportanceDropdown, setShowImportanceDropdown] = useState(false);\n const [showTimeFrameDropdown, setShowTimeFrameDropdown] = useState(false);\n\n return (\n

\n {/* Completion Toggle */}\n onCompletedChange(!isCompleted)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors ${\n isCompleted \n ? 'bg-green-100 text-green-700 hover:bg-green-200' \n : 'bg-gray-100 text-gray-600 hover:bg-gray-200'\n }`}\n title={isCompleted ? \"Mark as incomplete\" : \"Mark as complete\"}\n >\n {isCompleted ? '✅' : '⭕'} \n {isCompleted ? 'Done' : 'Todo'}\n \n\n {/* Importance Selector */}\n

\n setShowImportanceDropdown(!showImportanceDropdown)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors hover:opacity-80 ${IMPORTANCE_LABELS[importance].color}`}\n >\n {IMPORTANCE_LABELS[importance].emoji} {IMPORTANCE_LABELS[importance].label}\n \n \n\n {showImportanceDropdown && (\n

\n {Object.entries(IMPORTANCE_LABELS).map(([key, config]) => (\n {\n onImportanceChange(key as ImportanceLevel);\n setShowImportanceDropdown(false);\n }}\n className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${\n key === importance ? 'bg-gray-50' : ''\n }`}\n >\n \n {config.emoji} {config.label}\n \n \n ))}\n

\n )}\n

\n\n {/* Time Frame Selector */}\n

\n setShowTimeFrameDropdown(!showTimeFrameDropdown)}\n className={`flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors hover:opacity-80 ${TIME_FRAME_LABELS[timeFrame].color}`}\n >\n {TIME_FRAME_LABELS[timeFrame].emoji} {TIME_FRAME_LABELS[timeFrame].label}\n \n \n\n {showTimeFrameDropdown && (\n

\n {Object.entries(TIME_FRAME_LABELS).map(([key, config]) => (\n {\n onTimeFrameChange(key as TimeFrame);\n setShowTimeFrameDropdown(false);\n }}\n className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-medium hover:bg-gray-50 first:rounded-t-lg last:rounded-b-lg ${\n key === timeFrame ? 'bg-gray-50' : ''\n }`}\n >\n \n {config.emoji} {config.label}\n \n \n ))}\n

\n )}\n

\n );\n}",[],[153,240,259],"8c065c3c-3f99-11f0-8107-76b3cceeab13","FilterBar.tsx","8c065d0e-3f99-11f0-8107-76b3cceeab13",33,["D",1748858916018],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { ImportanceLevel, TimeFrame } from \"../../shared/types.ts\";\nimport { IMPORTANCE_LABELS, TIME_FRAME_LABELS } from \"../../shared/types.ts\";\n\ninterface FilterBarProps {\n selectedImportance: ImportanceLevel | 'all';\n selectedTimeFrame: TimeFrame | 'all';\n showCompleted: boolean;\n onImportanceFilter: (importance: ImportanceLevel | 'all') => void;\n onTimeFrameFilter: (timeFrame: TimeFrame | 'all') => void;\n onCompletedFilter: (showCompleted: boolean) => void;\n}\n\nexport default function FilterBar({\n selectedImportance,\n selectedTimeFrame,\n showCompleted,\n onImportanceFilter,\n onTimeFrameFilter,\n onCompletedFilter\n}: FilterBarProps) {\n return (\n

\n {/* Completion Filter */}\n

\n Show:\n

\n onCompletedFilter(false)}\n className={`px-2 py-1 text-xs rounded ${\n !showCompleted \n ? 'bg-blue-100 text-blue-700' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n Active\n \n onCompletedFilter(true)}\n className={`px-2 py-1 text-xs rounded ${\n showCompleted \n ? 'bg-green-100 text-green-700' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n Completed\n \n

\n\n {/* Importance Filter */}\n

\n Priority:\n

\n onImportanceFilter('all')}\n className={`px-2 py-1 text-xs rounded ${\n selectedImportance === 'all' \n ? 'bg-gray-200 text-gray-800' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n All\n \n {Object.entries(IMPORTANCE_LABELS).map(([key, config]) => (\n onImportanceFilter(key as ImportanceLevel)}\n className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${\n selectedImportance === key \n ? config.color \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n {config.emoji}\n {config.label}\n \n ))}\n

\n\n {/* Time Frame Filter */}\n

\n Due:\n

\n onTimeFrameFilter('all')}\n className={`px-2 py-1 text-xs rounded ${\n selectedTimeFrame === 'all' \n ? 'bg-gray-200 text-gray-800' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n All\n \n {Object.entries(TIME_FRAME_LABELS).map(([key, config]) => (\n onTimeFrameFilter(key as TimeFrame)}\n className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${\n selectedTimeFrame === key \n ? config.color \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n {config.emoji}\n {config.label}\n \n ))}\n

\n );\n}",[],[153,240,267],"81295792-3f99-11f0-8c95-76b3cceeab13","App.tsx","38610074-3f98-11f0-a790-76b3cceeab13",32,["D",1748858897788],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Note, ImportanceLevel, TimeFrame } from \"../../shared/types.ts\";\nimport NotesList from \"./NotesList.tsx\";\nimport NoteEditor from \"./NoteEditor.tsx\";\n\n// Get initial data from server-side injection\nconst initialData = (window as any).__INITIAL_DATA__ || { notes: [] };\n\nexport default function App() {\n const [notes, setNotes] = useState(initialData.notes);\n const [selectedNote, setSelectedNote] = useState(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n\n // Load notes from API\n const loadNotes = async (query?: string) => {\n try {\n const url = query ? `/api/notes?q=${encodeURIComponent(query)}` : '/api/notes';\n const response = await fetch(url);\n if (response.ok) {\n const notesData = await response.json();\n setNotes(notesData);\n }\n } catch (error) {\n console.error(\"Failed to load notes:\", error);\n }\n };\n\n // Create new note\n const createNote = async () => {\n try {\n const response = await fetch('/api/notes', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n title: 'New Note',\n content: '',\n importance: 'medium',\n time_frame: 'no_deadline'\n })\n });\n \n if (response.ok) {\n const newNote = await response.json();\n setNotes(prev => [newNote, ...prev]);\n setSelectedNote(newNote);\n }\n } catch (error) {\n console.error(\"Failed to create note:\", error);\n }\n };\n\n // Save note\n const saveNote = async (\n id: number, \n title: string, \n content: string, \n importance: ImportanceLevel, \n timeFrame: TimeFrame, \n isCompleted: boolean\n ) => {\n try {\n const response = await fetch(`/api/notes/${id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ \n title, \n content, \n importance, \n time_frame: timeFrame, \n is_completed: isCompleted \n })\n });\n \n if (response.ok) {\n const updatedNote = await response.json();\n setNotes(prev => prev.map(note => \n note.id === id ? updatedNote : note\n ));\n setSelectedNote(updatedNote);\n }\n } catch (error) {\n console.error(\"Failed to save note:\", error);\n throw error;\n }\n };\n\n // Delete note\n const deleteNote = async (id: number) => {\n if (!confirm(\"Are you sure you want to delete this note?\")) {\n return;\n }\n \n try {\n const response = await fetch(`/api/notes/${id}`, {\n method: 'DELETE'\n });\n \n if (response.ok) {\n setNotes(prev => prev.filter(note => note.id !== id));\n if (selectedNote?.id === id) {\n setSelectedNote(null);\n }\n }\n } catch (error) {\n console.error(\"Failed to delete note:\", error);\n }\n };\n\n // Handle search\n const handleSearch = async (query: string) => {\n setSearchQuery(query);\n await loadNotes(query);\n };\n\n // Select note\n const selectNote = (note: Note) => {\n setSelectedNote(note);\n };\n\n return (\n

\n \n \n \n

\n );\n}",[],[153,240,275],"13c1773a-3f98-11f0-b85e-76b3cceeab13",["D",1748858284741],[174,175,176,177,178,179],[153,240],"0e4a2e6e-3f98-11f0-81cf-76b3cceeab13",["D",1748858275572],[173,180,181],[153],"440c4938-3f98-11f0-a83c-76b3cceeab13","index.ts","d481350a-bfa3-496b-b072-adc37d136c96",17,["D",1748858365762],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { createNotesTable } from \"./database/migrations.ts\";\nimport { getAllNotes } from \"./database/queries.ts\";\nimport notesRoutes from \"./routes/notes.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Initialize database\nawait createNotesTable();\n\n// API routes\napp.route(\"/api/notes\", notesRoutes);\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 page with initial data\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial notes data to avoid extra round-trip\n const initialNotes = await getAllNotes();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[300,292],"backend","4841ccac-3f99-11f0-b6f4-76b3cceeab13","notes.ts","025e87f8-3f98-11f0-b775-76b3cceeab13","375d9928-e523-4387-80e0-575ebe733b85",23,["D",1748858802321],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { \n getAllNotes, \n getNoteById, \n createNote, \n updateNote, \n deleteNote, \n searchNotes \n} from \"../database/queries.ts\";\n\nconst notes = new Hono();\n\n// Get all notes or search\nnotes.get(\"/\", async (c) => {\n const query = c.req.query(\"q\");\n \n if (query) {\n const results = await searchNotes(query);\n return c.json(results);\n }\n \n const allNotes = await getAllNotes();\n return c.json(allNotes);\n});\n\n// Get specific note\nnotes.get(\"/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid note ID\" }, 400);\n }\n \n const note = await getNoteById(id);\n if (!note) {\n return c.json({ error: \"Note not found\" }, 404);\n }\n \n return c.json(note);\n});\n\n// Create new note\nnotes.post(\"/\", async (c) => {\n const body = await c.req.json();\n \n if (!body.title || typeof body.title !== \"string\") {\n return c.json({ error: \"Title is required\" }, 400);\n }\n \n const noteData = {\n title: body.title,\n content: body.content || \"\",\n importance: body.importance || 'medium',\n time_frame: body.time_frame || 'no_deadline'\n };\n \n const note = await createNote(noteData);\n return c.json(note, 201);\n});\n\n// Update note\nnotes.put(\"/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid note ID\" }, 400);\n }\n \n const body = await c.req.json();\n const note = await updateNote(id, body);\n \n if (!note) {\n return c.json({ error: \"Note not found\" }, 404);\n }\n \n return c.json(note);\n});\n\n// Delete note\nnotes.delete(\"/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n if (isNaN(id)) {\n return c.json({ error: \"Invalid note ID\" }, 400);\n }\n \n const deleted = await deleteNote(id);\n if (!deleted) {\n return c.json({ error: \"Note not found\" }, 404);\n }\n \n return c.json({ success: true });\n});\n\nexport default notes;",[],[300,310,302],"routes","025e9360-3f98-11f0-b775-76b3cceeab13",8,["D",1748858255574],[170],[300,310],"44693566-3f99-11f0-b566-76b3cceeab13","queries.ts","fb9d7f5a-3f97-11f0-8845-76b3cceeab13","a09f57fb-2680-409a-bf5e-a7840ebee99b",22,["D",1748858795861],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME } from \"./migrations.ts\";\nimport type { Note, CreateNoteRequest, UpdateNoteRequest } from \"../../shared/types.ts\";\n\nexport async function getAllNotes(): Promise {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n ORDER BY \n CASE importance \n WHEN 'urgent' THEN 1 \n WHEN 'high' THEN 2 \n WHEN 'medium' THEN 3 \n WHEN 'low' THEN 4 \n END,\n CASE time_frame \n WHEN 'today' THEN 1 \n WHEN 'this_week' THEN 2 \n WHEN 'this_month' THEN 3 \n WHEN 'later' THEN 4 \n WHEN 'no_deadline' THEN 5 \n END,\n is_completed ASC,\n updated_at DESC\n `);\n return result.rows as Note[];\n}\n\nexport async function getNoteById(id: number): Promise {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE id = ?\n `, [id]);\n \n return result.rows[0] as Note || null;\n}\n\nexport async function createNote(data: CreateNoteRequest): Promise {\n const result = await sqlite.execute(`\n INSERT INTO ${TABLE_NAME} (title, content, importance, time_frame)\n VALUES (?, ?, ?, ?)\n `, [\n data.title, \n data.content, \n data.importance || 'medium',\n data.time_frame || 'no_deadline'\n ]);\n \n const noteId = result.lastInsertRowId;\n const note = await getNoteById(noteId);\n if (!note) throw new Error(\"Failed to create note\");\n return note;\n}\n\nexport async function updateNote(id: number, data: UpdateNoteRequest): Promise {\n const updates: string[] = [];\n const values: any[] = [];\n \n if (data.title !== undefined) {\n updates.push(\"title = ?\");\n values.push(data.title);\n }\n \n if (data.content !== undefined) {\n updates.push(\"content = ?\");\n values.push(data.content);\n }\n \n if (data.importance !== undefined) {\n updates.push(\"importance = ?\");\n values.push(data.importance);\n }\n \n if (data.time_frame !== undefined) {\n updates.push(\"time_frame = ?\");\n values.push(data.time_frame);\n }\n \n if (data.is_completed !== undefined) {\n updates.push(\"is_completed = ?\");\n values.push(data.is_completed ? 1 : 0);\n }\n \n if (updates.length === 0) {\n return await getNoteById(id);\n }\n \n updates.push(\"updated_at = CURRENT_TIMESTAMP\");\n values.push(id);\n \n await sqlite.execute(`\n UPDATE ${TABLE_NAME} \n SET ${updates.join(\", \")}\n WHERE id = ?\n `, values);\n \n return await getNoteById(id);\n}\n\nexport async function deleteNote(id: number): Promise {\n const result = await sqlite.execute(`\n DELETE FROM ${TABLE_NAME} \n WHERE id = ?\n `, [id]);\n \n return result.changes > 0;\n}\n\nexport async function searchNotes(query: string): Promise {\n const result = await sqlite.execute(`\n SELECT * FROM ${TABLE_NAME} \n WHERE title LIKE ? OR content LIKE ?\n ORDER BY updated_at DESC\n `, [`%${query}%`, `%${query}%`]);\n \n return result.rows as Note[];\n}",[],[300,325,317],"database","36dec88e-3f99-11f0-980b-76b3cceeab13","migrations.ts","f523a974-3f97-11f0-a83c-76b3cceeab13",19,["D",1748858773150],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nconst TABLE_NAME = 'jotter_notes_v2';\n\nexport async function createNotesTable() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n content TEXT NOT NULL DEFAULT '',\n importance TEXT NOT NULL DEFAULT 'medium' CHECK (importance IN ('low', 'medium', 'high', 'urgent')),\n time_frame TEXT NOT NULL DEFAULT 'no_deadline' CHECK (time_frame IN ('today', 'this_week', 'this_month', 'later', 'no_deadline')),\n is_completed BOOLEAN NOT NULL DEFAULT 0,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n updated_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`);\n}\n\nexport { TABLE_NAME };",[],[300,325,327],"f523b55e-3f97-11f0-a83c-76b3cceeab13",6,["D",1748858233376],[167,168],[300,325],"f523b400-3f97-11f0-a83c-76b3cceeab13",["D",1748858233376],[166,169,171],[300],["D",1748857795739],["D",1789649456549],{"_11":12,"_122":68},{"_11":12,"_118":-5,"_67":68,"_30":66,"_119":120,"_121":24},{"_38":109,"_13":16,"_32":35,"_110":70,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":14,"_117":12},"ctx",{"_51":-5,"_141":381,"_382":383,"_384":385,"_386":24,"_387":24,"_388":24,"_389":83,"_390":-5,"_391":-7,"_392":-7,"_393":26,"_394":24,"_395":24,"_396":-5,"_397":24,"_398":24,"_399":24,"_400":-5},"ENV",{"_352":353,"_354":355,"_356":16,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html