Linear Calendar

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_244":245,"_246":247},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/Calendar.tsx","latestPath","fileId","18bb41e2-ce33-11f0-bbbf-42dde27851f2","name","Calendar.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { CalendarEvent, CreateEventRequest } from \"../../shared/types.ts\";\nimport { CalendarEventComponent } from \"./CalendarEvent.tsx\";\n\ninterface CalendarProps {\n selectedDate: Date;\n onDateChange: (date: Date) => void;\n events: CalendarEvent[];\n onCreateEvent: (request: CreateEventRequest) => Promise;\n onUpdateEvent: (eventId: string, updates: { start?: string; end?: string }) => Promise;\n onDeleteEvent: (eventId: string) => Promise;\n}\n\nconst HOUR_HEIGHT = 60;\nconst START_HOUR = 6;\nconst END_HOUR = 22;\nconst HOURS = Array.from({ length: END_HOUR - START_HOUR }, (_, i) => i + START_HOUR);\nconst DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n\nexport function Calendar({ \n selectedDate, \n onDateChange, \n events, \n onCreateEvent, \n onUpdateEvent,\n onDeleteEvent,\n}: CalendarProps) {\n const [currentTime, setCurrentTime] = useState(new Date());\n const [isDraggingOver, setIsDraggingOver] = useState(null);\n const calendarRef = useRef(null);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setCurrentTime(new Date());\n }, 60000);\n return () => clearInterval(interval);\n }, []);\n\n const getWeekDates = useCallback(() => {\n const startOfWeek = new Date(selectedDate);\n startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());\n startOfWeek.setHours(0, 0, 0, 0);\n \n return Array.from({ length: 7 }, (_, i) => {\n const date = new Date(startOfWeek);\n date.setDate(date.getDate() + i);\n return date;\n });\n }, [selectedDate]);\n\n const weekDates = getWeekDates();\n\n const goToPrevWeek = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() - 7);\n onDateChange(newDate);\n };\n\n const goToNextWeek = () => {\n const newDate = new Date(selectedDate);\n newDate.setDate(newDate.getDate() + 7);\n onDateChange(newDate);\n };\n\n const goToToday = () => {\n onDateChange(new Date());\n };\n\n const isToday = (date: Date) => {\n const today = new Date();\n return date.toDateString() === today.toDateString();\n };\n\n const getEventsForDate = (date: Date) => {\n return events.filter(event => {\n const eventDate = new Date(event.start);\n return eventDate.toDateString() === date.toDateString();\n });\n };\n\n const getEventStyle = (event: CalendarEvent) => {\n const start = new Date(event.start);\n const end = new Date(event.end);\n \n const startHour = start.getHours() + start.getMinutes() / 60;\n const endHour = end.getHours() + end.getMinutes() / 60;\n \n const top = (startHour - START_HOUR) * HOUR_HEIGHT;\n const height = (endHour - startHour) * HOUR_HEIGHT;\n \n return { top, height: Math.max(height, 20) };\n };\n\n const handleDragOver = (e: React.DragEvent, dateStr: string) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'copy';\n setIsDraggingOver(dateStr);\n };\n\n const handleDragLeave = () => {\n setIsDraggingOver(null);\n };\n\n const handleDrop = async (e: React.DragEvent, date: Date) => {\n e.preventDefault();\n setIsDraggingOver(null);\n\n try {\n const data = JSON.parse(e.dataTransfer.getData('application/json'));\n \n const rect = e.currentTarget.getBoundingClientRect();\n const y = e.clientY - rect.top;\n const hour = Math.floor(y / HOUR_HEIGHT) + START_HOUR;\n const minutes = Math.round((y % HOUR_HEIGHT) / HOUR_HEIGHT * 60 / 15) * 15;\n \n const startTime = new Date(date);\n startTime.setHours(hour, minutes, 0, 0);\n \n const request: CreateEventRequest = {\n taskId: data.taskId,\n taskTitle: data.taskTitle,\n taskDescription: data.taskDescription,\n start: startTime.toISOString(),\n durationMinutes: 30,\n color: data.color,\n };\n \n await onCreateEvent(request);\n } catch (error) {\n console.error('Failed to create event:', error);\n }\n };\n\n const getCurrentTimePosition = () => {\n const now = new Date();\n const hour = now.getHours() + now.getMinutes() / 60;\n if (hour < START_HOUR || hour > END_HOUR) return null;\n return (hour - START_HOUR) * HOUR_HEIGHT;\n };\n\n const timePosition = getCurrentTimePosition();\n\n const formatWeekRange = () => {\n const start = weekDates[0];\n const end = weekDates[6];\n \n if (start.getMonth() === end.getMonth()) {\n return `${start.toLocaleDateString('en-US', { month: 'long' })} ${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}`;\n }\n \n return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`;\n };\n\n return (\n

\n {formatWeekRange()}\n

\n \n

\n \n \n \n \n \n \n

\n \n \n Today\n \n

\n \n

\n \n {weekDates.map((date, i) => (\n

\n {DAYS_OF_WEEK[date.getDay()]}\n

\n {date.getDate()}\n

\n ))}\n

\n \n

\n {HOURS.map(hour => (\n

\n \n {hour === 0 ? '12 AM' : hour === 12 ? '12 PM' : hour > 12 ? `${hour - 12} PM` : `${hour} AM`}\n \n

\n ))}\n

\n \n {weekDates.map((date, dayIndex) => {\n const dateStr = date.toISOString().split('T')[0];\n const dayEvents = getEventsForDate(date);\n \n return (\n handleDragOver(e, dateStr)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, date)}\n >\n {HOURS.map(hour => (\n \n ))}\n \n {isToday(date) && timePosition !== null && (\n

\n )}\n \n {dayEvents.map(event => {\n const style = getEventStyle(event);\n return (\n \n );\n })}\n

\n );\n })}\n

\n \n );\n}\n\n","createdAt",["D",1764537930202],"branchVersion","branchId","966a5c38-ce27-11f0-9f57-42dde27851f2","id","966a184a-ce27-11f0-9f57-42dde27851f2","general-asks",["D",1764532987103],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","18edb10e-ce33-11f0-b19b-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",79,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shapedlines","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":240,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":241,"_79":242,"_81":243,"_83":24},"tree",[168,171,177,178],"files",[168,169,170,171,172,173,174,175,176,177,178],"counts",{"_157":61,"_158":133,"_159":61,"_160":161,"_162":163},"contents",[125,126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":151,"_31":152,"_29":153,"_132":-5,"_40":41,"_39":154,"_134":57,"_37":155,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_26":156},{"_42":145,"_31":146,"_29":147,"_132":-5,"_40":41,"_39":148,"_134":57,"_37":149,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_26":150},{"_42":138,"_31":139,"_29":140,"_132":-5,"_40":41,"_39":141,"_134":57,"_37":142,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_26":144},{"_42":129,"_31":130,"_29":131,"_132":-5,"_40":41,"_39":133,"_134":24,"_37":135,"_13":61,"_33":34,"_35":104,"_23":24,"_136":-5,"_26":137},"966c1226-ce27-11f0-9f57-42dde27851f2","main.ts","966c12da-ce27-11f0-9f57-42dde27851f2","parentId",1,"latest",["D",1764532987114],"label",[130],"184204d0-ce33-11f0-aea2-42dde27851f2","shared","184205a2-ce33-11f0-aea2-42dde27851f2",4,["D",1764537929399],"directory",[139],"1818c746-ce33-11f0-aa28-42dde27851f2","frontend","1818c82c-ce33-11f0-aa28-42dde27851f2",2,["D",1764537929135],[146],"182beace-ce33-11f0-9440-42dde27851f2","backend","182bebc8-ce33-11f0-9440-42dde27851f2",3,["D",1764537929262],[152],"pulls","branches","forks","envVars",{"_164":166,"_167":61},"connections",{"_164":61,"_165":61},"count","unfilledCount",6,"emptyCount",{"_42":151,"_31":152,"_29":153,"_132":-5,"_40":41,"_39":154,"_134":57,"_37":237,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":238,"_26":239},{"_42":231,"_31":232,"_29":233,"_132":153,"_40":41,"_39":166,"_134":57,"_37":234,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":235,"_26":236},{"_42":224,"_31":225,"_29":226,"_132":153,"_40":41,"_39":227,"_134":57,"_37":228,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":229,"_26":230},{"_42":145,"_31":146,"_29":147,"_132":-5,"_40":41,"_39":148,"_134":57,"_37":221,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":222,"_26":223},{"_42":216,"_31":207,"_29":203,"_132":147,"_40":41,"_39":217,"_134":57,"_37":218,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":219,"_26":220},{"_42":208,"_31":209,"_29":210,"_132":203,"_40":41,"_39":211,"_134":24,"_37":212,"_13":61,"_33":34,"_35":213,"_23":24,"_136":-5,"_180":214,"_26":215},{"_42":202,"_31":32,"_29":30,"_132":203,"_40":41,"_39":14,"_134":24,"_37":204,"_13":61,"_33":34,"_35":36,"_23":24,"_136":-5,"_180":205,"_26":206},{"_42":194,"_31":195,"_29":196,"_132":147,"_40":41,"_39":197,"_134":24,"_37":198,"_13":61,"_33":20,"_35":199,"_23":24,"_136":-5,"_180":200,"_26":201},{"_42":186,"_31":187,"_29":188,"_132":147,"_40":41,"_39":189,"_134":24,"_37":190,"_13":61,"_33":34,"_35":191,"_23":24,"_136":-5,"_180":192,"_26":193},{"_42":138,"_31":139,"_29":140,"_132":-5,"_40":41,"_39":141,"_134":57,"_37":183,"_13":61,"_33":143,"_35":-5,"_23":24,"_136":-5,"_180":184,"_26":185},{"_42":129,"_31":130,"_29":131,"_132":-5,"_40":41,"_39":133,"_134":24,"_37":179,"_13":61,"_33":34,"_35":104,"_23":24,"_136":-5,"_180":181,"_26":182},["D",1764532987114],"children",[],[130],["D",1764537929399],[],[139],"18b30694-ce33-11f0-8193-42dde27851f2","index.tsx","18b3073e-ce33-11f0-8193-42dde27851f2",10,["D",1764537930058],"/** @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\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n\n",[],[146,187],"18a78dc8-ce33-11f0-b19b-42dde27851f2","index.html","18a78eae-ce33-11f0-b19b-42dde27851f2",8,["D",1764537930066],"\n\n\n \n \n Linear Calendar\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

\n \n\n\n\n",[],[146,195],"18bb4138-ce33-11f0-bbbf-42dde27851f2","1856e33c-ce33-11f0-8193-42dde27851f2",["D",1764537930202],[],[146,207,32],"components","18aab016-ce33-11f0-bbbf-42dde27851f2","App.tsx","18aab0ac-ce33-11f0-bbbf-42dde27851f2",9,["D",1764537930081],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { LinearTask, CalendarEvent, LinearCycleInfo, CreateEventRequest } from \"../../shared/types.ts\";\nimport { TaskList } from \"./TaskList.tsx\";\nimport { TaskDetail } from \"./TaskDetail.tsx\";\nimport { Calendar } from \"./Calendar.tsx\";\n\nexport function App() {\n const [tasks, setTasks] = useState([]);\n const [cycle, setCycle] = useState(null);\n const [events, setEvents] = useState([]);\n const [selectedTask, setSelectedTask] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [selectedDate, setSelectedDate] = useState(() => {\n const today = new Date();\n today.setHours(0, 0, 0, 0);\n return today;\n });\n\n // Fetch tasks from Linear\n const fetchTasks = useCallback(async () => {\n try {\n const response = await fetch('/api/linear/tasks');\n const data = await response.json();\n \n if (data.success) {\n setTasks(data.data.tasks);\n setCycle(data.data.cycle);\n } else {\n setError(data.error || 'Failed to fetch tasks');\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to fetch tasks');\n }\n }, []);\n\n // Fetch calendar events\n const fetchEvents = useCallback(async () => {\n try {\n const startOfWeek = new Date(selectedDate);\n startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay());\n startOfWeek.setHours(0, 0, 0, 0);\n \n const endOfWeek = new Date(startOfWeek);\n endOfWeek.setDate(endOfWeek.getDate() + 7);\n \n const response = await fetch(\n `/api/calendar/events?start=${startOfWeek.toISOString()}&end=${endOfWeek.toISOString()}`\n );\n const data = await response.json();\n \n if (data.success) {\n setEvents(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch events:', err);\n }\n }, [selectedDate]);\n\n useEffect(() => {\n Promise.all([fetchTasks(), fetchEvents()]).finally(() => {\n setLoading(false);\n });\n }, [fetchTasks, fetchEvents]);\n\n const handleCreateEvent = async (request: CreateEventRequest) => {\n try {\n const response = await fetch('/api/calendar/events', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(request),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => [...prev, data.data]);\n return data.data;\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to create event:', err);\n throw err;\n }\n };\n\n const handleUpdateEvent = async (eventId: string, updates: { start?: string; end?: string }) => {\n try {\n const response = await fetch(`/api/calendar/events/${eventId}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => prev.map(e => e.id === eventId ? data.data : e));\n return data.data;\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to update event:', err);\n throw err;\n }\n };\n\n const handleDeleteEvent = async (eventId: string) => {\n try {\n const response = await fetch(`/api/calendar/events/${eventId}`, {\n method: 'DELETE',\n });\n \n const data = await response.json();\n \n if (data.success) {\n setEvents(prev => prev.filter(e => e.id !== eventId));\n } else {\n throw new Error(data.error);\n }\n } catch (err) {\n console.error('Failed to delete event:', err);\n throw err;\n }\n };\n\n if (loading) {\n return (\n

\n Loading your tasks...\n

\n );\n }\n\n if (error) {\n return (\n

\n \n

Something went wrong

{error}

\n window.location.reload()}\n className=\"px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors\"\n >\n Try Again\n \n

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

\n \n

\n \n {selectedTask && (\n setSelectedTask(null)}\n />\n )}\n

\n );\n}\n\n",[],[146,207,209],"1856e26a-ce33-11f0-8193-42dde27851f2",5,["D",1764537929542],[173,174],[146,207],["D",1764537929135],[172,175,176],[146],"188ab28e-ce33-11f0-bbbf-42dde27851f2","routes","188ab342-ce33-11f0-bbbf-42dde27851f2",7,["D",1764537929883],[],[152,225],"186a94fe-ce33-11f0-b6b7-42dde27851f2","database","186a95bc-ce33-11f0-b6b7-42dde27851f2",["D",1764537929672],[],[152,232],["D",1764537929262],[169,170],[152],["D",1764532987103],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"ctx",{"_77":-5,"_122":277,"_278":279,"_280":281,"_282":24,"_283":24,"_284":24,"_285":57,"_286":-5,"_287":-7,"_288":-7,"_289":61,"_290":24,"_291":24,"_292":-5,"_293":24,"_294":24,"_295":24,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":85,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v11