\n {editingRule.id ? 'Edit Rule' : 'New Rule'}\n

\n \n {/* Rule name */}\n

\n Rule Name\n updateRuleField('name', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n />\n

\n \n {/* Condition type */}\n

\n Condition Type\n updateRuleField('condition.type', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n

\n \n {/* Condition value */}\n

\n Condition Value\n {editingRule.condition.type === 'property' ? (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n ) : (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder={\n editingRule.condition.type === 'title'\n ? 'e.g., \"Meeting\" or \"Flight\"'\n : editingRule.condition.type === 'calendar'\n ? 'Calendar ID or email'\n : 'Custom expression'\n }\n />\n )}\n

\n \n {/* Format options */}\n

Formatting

\n \n {/* Background color */}\n

\n Background Color:\n updateRuleField('format.backgroundColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Text color */}\n

\n Text Color:\n updateRuleField('format.textColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Display format */}\n

\n Display Format:\n updateRuleField('format.displayFormat', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder=\"e.g., {flight} or {title}\"\n />\n

\n Use {'{title}'}, {'{location}'}, {'{description}'}, or {'{flight}'} for flights\n

\n \n {/* Visibility */}\n

\n Visible:\n updateRuleField('format.visible', e.target.checked)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

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

\n setIsEditing(false)}\n className=\"px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500\"\n disabled={isSubmitting}\n >\n Cancel\n \n \n {isSubmitting ? 'Saving...' : 'Save Rule'}\n \n

\n );\n };\n \n // Render a rule in the list\n const renderRuleItem = (rule: FormatRule) => {\n return (\n

{rule.name}

\n handleEditRule(rule)}\n className=\"px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700\"\n >\n Edit\n \n rule.id && handleDeleteRule(rule.id)}\n className=\"px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700\"\n >\n Delete\n \n

\n \n

\n Condition: {getConditionDescription(rule.condition)}\n

\n Format:\n

\n Background\n \n

\n Text\n \n {rule.format.displayFormat && (\n \n Format: {rule.format.displayFormat}\n \n )}\n \n {rule.format.visible === false && (\n \n Hidden\n \n )}\n

\n );\n };\n \n // Get a human-readable description of a condition\n const getConditionDescription = (condition: RuleCondition): string => {\n switch (condition.type) {\n case 'title':\n return `Title contains \"${condition.value}\"`;\n case 'calendar':\n return `Calendar is \"${condition.value}\"`;\n case 'property':\n return `Event is ${condition.value.replace('-', ' ')}`;\n case 'custom':\n return `Custom: \"${condition.value}\"`;\n default:\n return 'Unknown condition';\n }\n };\n \n return (\n

Format Rules

\n {!isEditing && (\n \n Add Rule\n \n )}\n

\n \n {isEditing ? (\n renderRuleEditor()\n ) : (\n

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

\n No format rules yet. Click \"Add Rule\" to create one.\n

\n ) : (\n rules.map(renderRuleItem)\n )}\n

\n )}\n

\n );\n};\n\nexport default FormatRules;",[],[232,239,246,253],{"_103":261,"_95":262,"_153":263,"_155":247,"_156":138,"_157":264,"_159":160,"_105":265,"_100":197,"_162":179,"_164":266,"_165":22,"_166":-5,"_167":267,"_98":268},"58678556-61fc-11f0-acfb-0224a6c84d84","Settings.tsx","669172e0-3669-11f0-a32c-9e149126039e",28,["D",1752639689121],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { FormatRule } from '../../../shared/types.ts';\nimport FormatRules from './FormatRules.tsx';\n\ninterface SettingsProps {\n authToken: string;\n metadataCalendarId: string | null;\n onClose: () => void;\n}\n\nconst Settings: React.FC = ({ authToken, metadataCalendarId, onClose }) => {\n const [activeTab, setActiveTab] = useState('format-rules');\n const [formatRules, setFormatRules] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n \n // Fetch format rules\n useEffect(() => {\n const fetchFormatRules = async () => {\n if (!metadataCalendarId) {\n setIsLoading(false);\n return;\n }\n \n setIsLoading(true);\n setError(null);\n \n try {\n const timeMin = new Date(2000, 0, 1).toISOString();\n const timeMax = new Date(2000, 0, 2).toISOString();\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n const rules: FormatRule[] = [];\n \n for (const event of data.items || []) {\n if (event.summary.startsWith('FORMAT_RULE:')) {\n try {\n const rule = JSON.parse(event.description);\n rules.push({\n id: event.id,\n ...rule,\n });\n } catch (error) {\n console.error('Error parsing format rule:', error);\n }\n }\n }\n \n setFormatRules(rules);\n } else {\n setError('Failed to fetch format rules');\n }\n } catch (error) {\n console.error('Error fetching format rules:', error);\n setError('An error occurred while fetching format rules');\n } finally {\n setIsLoading(false);\n }\n };\n \n fetchFormatRules();\n }, [authToken, metadataCalendarId]);\n \n // Save a format rule\n const saveFormatRule = async (rule: FormatRule) => {\n if (!metadataCalendarId) {\n setError('Metadata calendar not available');\n return;\n }\n \n try {\n const event = {\n summary: `FORMAT_RULE: ${rule.name}`,\n description: JSON.stringify(rule),\n start: {\n date: '2000-01-01',\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent',\n };\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(event),\n });\n \n if (response.ok) {\n const createdEvent = await response.json();\n setFormatRules(prev => [...prev, { ...rule, id: createdEvent.id }]);\n return true;\n } else {\n setError('Failed to save format rule');\n return false;\n }\n } catch (error) {\n console.error('Error saving format rule:', error);\n setError('An error occurred while saving the format rule');\n return false;\n }\n };\n \n // Update a format rule\n const updateFormatRule = async (rule: FormatRule) => {\n if (!metadataCalendarId || !rule.id) {\n setError('Cannot update rule: missing ID or metadata calendar');\n return false;\n }\n \n try {\n const event = {\n summary: `FORMAT_RULE: ${rule.name}`,\n description: JSON.stringify(rule),\n start: {\n date: '2000-01-01',\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent',\n };\n \n const response = await fetch(`/api/events/${rule.id}?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'PUT',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(event),\n });\n \n if (response.ok) {\n setFormatRules(prev => prev.map(r => r.id === rule.id ? rule : r));\n return true;\n } else {\n setError('Failed to update format rule');\n return false;\n }\n } catch (error) {\n console.error('Error updating format rule:', error);\n setError('An error occurred while updating the format rule');\n return false;\n }\n };\n \n // Delete a format rule\n const deleteFormatRule = async (ruleId: string) => {\n if (!metadataCalendarId) {\n setError('Metadata calendar not available');\n return false;\n }\n \n try {\n const response = await fetch(`/api/events/${ruleId}?calendarId=${encodeURIComponent(metadataCalendarId)}`, {\n method: 'DELETE',\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n setFormatRules(prev => prev.filter(r => r.id !== ruleId));\n return true;\n } else {\n setError('Failed to delete format rule');\n return false;\n }\n } catch (error) {\n console.error('Error deleting format rule:', error);\n setError('An error occurred while deleting the format rule');\n return false;\n }\n };\n \n return (\n

Settings

\n \n

\n \n {/* Tabs */}\n

\n setActiveTab('format-rules')}\n >\n Format Rules\n \n setActiveTab('general')}\n >\n General Settings\n \n

\n \n {/* Error message */}\n {error && (\n

\n {error}\n

\n )}\n \n {/* Loading indicator */}\n {isLoading && (\n

\n )}\n \n {/* Tab content */}\n {!isLoading && (\n

\n {activeTab === 'format-rules' && (\n \n )}\n \n {activeTab === 'general' && (\n

General Settings

\n General settings will be implemented in a future update.\n

\n )}\n

\n );\n};\n\nexport default Settings;",[],[232,239,246,262],[232,239,246],{"_103":271,"_95":272,"_153":273,"_155":240,"_156":138,"_157":274,"_159":160,"_105":275,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":276,"_98":323},"203670fc-3669-11f0-83bf-9e149126039e","views","df2e3ea3-45ef-4190-b6c5-a36df791fb07",12,["D",1747848558832],[277,314],{"_103":278,"_95":279,"_153":280,"_155":273,"_156":138,"_157":281,"_159":160,"_105":282,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":283,"_98":313},"3dfd8fda-3669-11f0-89c1-9e149126039e","YearView","4a9c008e-c71e-4b72-b2c8-172c20ba0481",13,["D",1747848608792],[284,294,303],{"_103":285,"_95":286,"_153":287,"_155":280,"_156":138,"_157":288,"_159":160,"_105":289,"_100":290,"_162":179,"_164":291,"_165":22,"_166":-5,"_167":292,"_98":293},"22ffed76-6202-11f0-a688-0224a6c84d84","Day.tsx","53e067fa-3669-11f0-a50f-9e149126039e",52,["D",1752642176503],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent } from '../../../../shared/types.ts';\n\ninterface DayProps {\n date: Date;\n events: CalendarEvent[];\n showMonthLabel: boolean;\n hasMonthTransition: boolean;\n isNewMonthFirstWeek: boolean;\n}\n\nconst Day: React.FC = ({ date, events, showMonthLabel, hasMonthTransition, isNewMonthFirstWeek }) => {\n const [showEventDetails, setShowEventDetails] = useState(false);\n \n const isToday = () => {\n const today = new Date();\n return (\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear()\n );\n };\n \n const isCurrentYear = () => {\n const today = new Date();\n return date.getFullYear() === today.getFullYear();\n };\n \n const getMonthName = () => {\n return date.toLocaleString('default', { month: 'short' });\n };\n \n // Limit the number of events shown\n const MAX_VISIBLE_EVENTS = 3;\n const visibleEvents = events.slice(0, MAX_VISIBLE_EVENTS);\n const hiddenEventCount = Math.max(0, events.length - MAX_VISIBLE_EVENTS);\n \n return (\n setShowEventDetails(!showEventDetails)}\n >\n {/* Day number */}\n

\n {date.getDate()}\n

\n \n {/* Month label */}\n {showMonthLabel && (\n

\n {getMonthName()}\n

\n )}\n \n {/* Events */}\n

\n {visibleEvents.map((event, index) => {\n // Get formatting from the event if available\n const formatting = event.formatting || {};\n const backgroundColor = formatting.backgroundColor || (event.colorId ? getColorForId(event.colorId) : '#e2e8f0');\n const textColor = formatting.textColor || getContrastColor(backgroundColor);\n \n return (\n

\n {formatting.displayText || event.summary}\n

\n );\n })}\n \n {/* Show count of hidden events */}\n {hiddenEventCount > 0 && (\n

\n +{hiddenEventCount} more\n

\n )}\n

\n \n {/* Event details popup */}\n {showEventDetails && events.length > 0 && (\n

e.stopPropagation()}\n >\n

\n {date.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}\n

\n {events.map((event, index) => {\n const backgroundColor = event.formatting?.backgroundColor || (event.colorId ? getColorForId(event.colorId) : '#e2e8f0');\n const textColor = event.formatting?.textColor || getContrastColor(backgroundColor);\n \n return (\n

{event.summary}

\n {event.start?.dateTime && (\n

\n {new Date(event.start.dateTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n {event.end?.dateTime && (\n <> - {new Date(event.end.dateTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n )}\n

\n )}\n {event.location && (\n

📍 {event.location}

\n )}\n

\n );\n })}\n \n

\n )}\n \n );\n};\n\n// Helper function to get color for a colorId\nfunction getColorForId(colorId: string): string {\n const colors: Record = {\n '1': '#7986cb', // Lavender\n '2': '#33b679', // Sage\n '3': '#8e24aa', // Grape\n '4': '#e67c73', // Flamingo\n '5': '#f6bf26', // Banana\n '6': '#f4511e', // Tangerine\n '7': '#039be5', // Peacock\n '8': '#616161', // Graphite\n '9': '#3f51b5', // Blueberry\n '10': '#0b8043', // Basil\n '11': '#d50000', // Tomato\n };\n \n return colors[colorId] || '#9e9e9e';\n}\n\n// Helper function to get contrast color (black or white) based on background\nfunction getContrastColor(hexColor: string): string {\n // Convert hex to RGB\n const r = parseInt(hexColor.slice(1, 3), 16);\n const g = parseInt(hexColor.slice(3, 5), 16);\n const b = parseInt(hexColor.slice(5, 7), 16);\n \n // Calculate luminance\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n \n // Return black for bright colors, white for dark colors\n return luminance > 0.5 ? '#000000' : '#ffffff';\n}\n\nexport default Day;",[],[232,239,272,279,286],{"_103":295,"_95":296,"_153":297,"_155":280,"_156":138,"_157":298,"_159":160,"_105":299,"_100":206,"_162":179,"_164":300,"_165":22,"_166":-5,"_167":301,"_98":302},"848d33ba-6201-11f0-aac3-0224a6c84d84","Week.tsx","44176f80-3669-11f0-9771-9e149126039e",50,["D",1752641910674],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent } from '../../../../shared/types.ts';\nimport Day from './Day.tsx';\n\ninterface MonthTransition {\n dayIndex: number;\n newMonth: number;\n newYear: number;\n}\n\ninterface NewMonthFirstWeek {\n dayIndex: number;\n month: number;\n year: number;\n}\n\ninterface WeekProps {\n dates: Date[];\n events: CalendarEvent[][];\n monthTransitions: MonthTransition[];\n newMonthFirstWeeks: NewMonthFirstWeek[];\n}\n\nconst Week: React.FC = ({ dates, events, monthTransitions, newMonthFirstWeeks }) => {\n return (\n \n {dates.map((date, index) => {\n // Check if this day has a month transition (vertical border on the left)\n const hasMonthTransition = monthTransitions.some(t => t.dayIndex === index);\n \n // Check if this day is part of a new month's first week (horizontal border on top)\n // This applies to all days 1-7 of a month when they first appear in a week\n const isNewMonthFirstWeek = newMonthFirstWeeks.some(w => \n date.getMonth() === w.month && \n date.getFullYear() === w.year &&\n date.getDate() <= 7\n );\n \n return (\n \n );\n })}\n \n );\n};\n\nexport default Week;",[],[232,239,272,279,296],{"_103":304,"_95":305,"_153":306,"_155":280,"_156":138,"_157":307,"_159":160,"_105":308,"_100":309,"_162":179,"_164":310,"_165":22,"_166":-5,"_167":311,"_98":312},"68f82bc8-6201-11f0-b57c-0224a6c84d84","index.tsx","3dfd7aea-3669-11f0-89c1-9e149126039e",46,["D",1752641864396],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { CalendarEvent, FormatRule } from '../../../../shared/types.ts';\nimport { DATE_FORMATS, DEFAULT_SETTINGS } from '../../../../shared/constants.ts';\nimport Week from './Week.tsx';\n\ninterface YearViewProps {\n authToken: string;\n metadataCalendarId: string | null;\n}\n\nconst YearView: React.FC = ({ authToken, metadataCalendarId }) => {\n const [year, setYear] = useState(new Date().getFullYear());\n const [events, setEvents] = useState([]);\n const [formatRules, setFormatRules] = useState([]);\n const [calendars, setCalendars] = useState([]);\n const [selectedCalendars, setSelectedCalendars] = useState(['primary']);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n \n // Generate weeks for the entire year\n const generateWeeks = () => {\n const weeks: Date[][] = [];\n const startDate = new Date(year, 0, 1);\n const endDate = new Date(year, 11, 31);\n \n // Adjust start date to the beginning of the week\n const dayOfWeek = startDate.getDay();\n const weekStartsOn = DEFAULT_SETTINGS.weekStartsOn;\n const diff = (dayOfWeek - weekStartsOn + 7) % 7;\n startDate.setDate(startDate.getDate() - diff);\n \n // Generate weeks until we reach the end of the year\n let currentDate = new Date(startDate);\n while (currentDate <= endDate) {\n const week: Date[] = [];\n \n // Add 7 days to the week\n for (let i = 0; i < 7; i++) {\n week.push(new Date(currentDate));\n currentDate.setDate(currentDate.getDate() + 1);\n }\n \n weeks.push(week);\n }\n \n return weeks;\n };\n \n // Fetch calendars\n useEffect(() => {\n const fetchCalendars = async () => {\n try {\n const response = await fetch('/api/calendars', {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n setCalendars(data.items || []);\n \n // Set default selected calendars\n if (data.items && data.items.length > 0) {\n const primaryCalendar = data.items.find((cal: any) => cal.primary) || data.items[0];\n setSelectedCalendars([primaryCalendar.id]);\n }\n } else {\n console.error('Failed to fetch calendars');\n }\n } catch (error) {\n console.error('Error fetching calendars:', error);\n }\n };\n \n if (authToken) {\n fetchCalendars();\n }\n }, [authToken]);\n \n // Fetch events for the selected year\n useEffect(() => {\n const fetchEvents = async () => {\n setIsLoading(true);\n setError(null);\n \n try {\n const timeMin = new Date(year, 0, 1).toISOString();\n const timeMax = new Date(year, 11, 31, 23, 59, 59).toISOString();\n \n // Fetch events for each selected calendar\n const allEvents: CalendarEvent[] = [];\n \n for (const calendarId of selectedCalendars) {\n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(calendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n allEvents.push(...(data.items || []));\n } else {\n console.error(`Failed to fetch events for calendar ${calendarId}`);\n }\n }\n \n setEvents(allEvents);\n } catch (error) {\n console.error('Error fetching events:', error);\n setError('Failed to load events. Please try again.');\n } finally {\n setIsLoading(false);\n }\n };\n \n if (authToken && selectedCalendars.length > 0) {\n fetchEvents();\n }\n }, [authToken, year, selectedCalendars]);\n \n // Fetch formatting rules from metadata calendar\n useEffect(() => {\n const fetchFormatRules = async () => {\n if (!metadataCalendarId) return;\n \n try {\n const timeMin = new Date(2000, 0, 1).toISOString();\n const timeMax = new Date(2000, 0, 2).toISOString();\n \n const response = await fetch(`/api/events?calendarId=${encodeURIComponent(metadataCalendarId)}&timeMin=${timeMin}&timeMax=${timeMax}`, {\n headers: {\n 'Authorization': `Bearer ${authToken}`,\n },\n });\n \n if (response.ok) {\n const data = await response.json();\n const rules: FormatRule[] = [];\n \n for (const event of data.items || []) {\n if (event.summary.startsWith('FORMAT_RULE:')) {\n try {\n const rule = JSON.parse(event.description);\n rules.push({\n id: event.id,\n ...rule,\n });\n } catch (error) {\n console.error('Error parsing format rule:', error);\n }\n }\n }\n \n setFormatRules(rules);\n } else {\n console.error('Failed to fetch format rules');\n }\n } catch (error) {\n console.error('Error fetching format rules:', error);\n }\n };\n \n if (authToken && metadataCalendarId) {\n fetchFormatRules();\n }\n }, [authToken, metadataCalendarId]);\n \n // Apply formatting rules to events\n const getFormattedEvents = () => {\n return events.map(event => {\n // Clone the event to avoid modifying the original\n const formattedEvent = { ...event, formatting: {} };\n \n // Apply each rule that matches\n for (const rule of formatRules) {\n if (ruleMatches(event, rule.condition)) {\n // Apply the formatting\n formattedEvent.formatting = {\n ...formattedEvent.formatting,\n ...rule.format\n };\n }\n }\n \n return formattedEvent;\n });\n };\n \n // Check if an event matches a condition\n const ruleMatches = (event: any, condition: any): boolean => {\n switch (condition.type) {\n case 'title':\n return event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n \n case 'calendar':\n return event.organizer?.email === condition.value;\n \n case 'property':\n switch (condition.value) {\n case 'all-day':\n return !!event.start?.date && !!event.end?.date;\n case 'recurring':\n return !!event.recurringEventId;\n default:\n return false;\n }\n \n case 'custom':\n try {\n const hasTitle = event.summary?.toLowerCase().includes(condition.value.toLowerCase());\n const hasDescription = event.description?.toLowerCase().includes(condition.value.toLowerCase());\n return hasTitle || hasDescription;\n } catch (error) {\n console.error('Error evaluating custom condition:', error);\n return false;\n }\n \n default:\n return false;\n }\n };\n \n // Get events for a specific date\n const getEventsForDate = (date: Date) => {\n const formattedEvents = getFormattedEvents();\n \n return formattedEvents.filter(event => {\n // Check if the event occurs on this date\n const eventStart = event.start?.date \n ? new Date(event.start.date) \n : event.start?.dateTime \n ? new Date(event.start.dateTime)\n : null;\n \n const eventEnd = event.end?.date \n ? new Date(event.end.date) \n : event.end?.dateTime \n ? new Date(event.end.dateTime)\n : null;\n \n if (!eventStart || !eventEnd) return false;\n \n // For all-day events, the end date is exclusive\n if (event.start?.date) {\n const endDate = new Date(eventEnd);\n endDate.setDate(endDate.getDate() - 1);\n \n const dateWithoutTime = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n const startWithoutTime = new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate());\n const endWithoutTime = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());\n \n return dateWithoutTime >= startWithoutTime && dateWithoutTime <= endWithoutTime;\n }\n \n // For regular events, check if the date falls within the event time\n const dateStart = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);\n const dateEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);\n \n return (\n (eventStart <= dateEnd && eventEnd > dateStart) ||\n (eventStart.getDate() === date.getDate() && \n eventStart.getMonth() === date.getMonth() && \n eventStart.getFullYear() === date.getFullYear())\n );\n });\n };\n \n // Handle year change\n const handleYearChange = (newYear: number) => {\n setYear(newYear);\n };\n \n // Handle calendar selection\n const handleCalendarToggle = (calendarId: string) => {\n setSelectedCalendars(prev => {\n if (prev.includes(calendarId)) {\n return prev.filter(id => id !== calendarId);\n } else {\n return [...prev, calendarId];\n }\n });\n };\n \n const weeks = generateWeeks();\n \n return (\n

\n {/* Year selector and controls */}\n

\n handleYearChange(year - 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ◀\n \n

{year}

\n handleYearChange(year + 1)}\n className=\"p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700\"\n >\n ▶\n \n

\n \n {/* Calendar selector */}\n

\n Calendars:\n

\n {calendars.map(calendar => (\n \n handleCalendarToggle(calendar.id)}\n className=\"rounded\"\n />\n {calendar.summary}\n \n ))}\n

\n \n {/* Loading indicator */}\n {isLoading && (\n

Loading events...

\n )}\n \n {/* Error message */}\n {error && (\n

{error}

\n )}\n \n {/* Weekday headers and Year view */}\n

\n \n \n \n {['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'].map(day => (\n \n ))}\n \n \n \n {/* Year view */}\n \n {weeks.map((week, weekIndex) => {\n // Calculate month transition info for each day in the week\n const monthTransitions = week.map((date, dayIndex) => {\n if (dayIndex === 0) return null;\n \n const prevDate = week[dayIndex - 1];\n const isMonthTransition = date.getMonth() !== prevDate.getMonth();\n \n return isMonthTransition ? {\n dayIndex,\n newMonth: date.getMonth(),\n newYear: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; newMonth: number; newYear: number; }[];\n \n // Check if this week contains the first week of any month (days 1-7)\n const newMonthFirstWeeks = week.map((date, dayIndex) => {\n // A day is part of a new month's first week if:\n // 1. It's day 1-7 of the month\n // 2. It's the first occurrence of this month in the week\n const isFirstWeekOfMonth = date.getDate() <= 7;\n const isFirstOccurrenceInWeek = dayIndex === 0 || week[dayIndex - 1].getMonth() !== date.getMonth();\n \n return (isFirstWeekOfMonth && isFirstOccurrenceInWeek) ? {\n dayIndex,\n month: date.getMonth(),\n year: date.getFullYear()\n } : null;\n }).filter(Boolean) as { dayIndex: number; month: number; year: number; }[];\n \n return (\n getEventsForDate(date))}\n monthTransitions={monthTransitions}\n newMonthFirstWeeks={newMonthFirstWeeks}\n />\n );\n })}\n \n

\n {day}\n

\n );\n};\n\nexport default YearView;",[],[232,239,272,279,305],[232,239,272,279],{"_103":315,"_95":316,"_153":317,"_155":273,"_156":138,"_157":318,"_159":160,"_105":319,"_100":197,"_162":179,"_164":320,"_165":22,"_166":-5,"_167":321,"_98":322},"466b3aaa-61fc-11f0-beda-0224a6c84d84","ViewSelector.tsx","20364f64-3669-11f0-83bf-9e149126039e",24,["D",1752639658946],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0';\nimport { VIEW_TYPES } from '../../../shared/constants.ts';\n\ninterface ViewSelectorProps {\n activeView: string;\n onViewChange: (view: string) => void;\n}\n\nconst ViewSelector: React.FC = ({ activeView, onViewChange }) => {\n // Currently we only have the year view implemented\n const views = [\n { id: VIEW_TYPES.YEAR, name: 'Year View', icon: '📅' },\n // Placeholder for future views\n // { id: VIEW_TYPES.MONTH, name: 'Month View', icon: '📆', disabled: true },\n // { id: VIEW_TYPES.WEEK, name: 'Week View', icon: '🗓️', disabled: true },\n // { id: VIEW_TYPES.DAY, name: 'Day View', icon: '📋', disabled: true },\n // { id: VIEW_TYPES.AGENDA, name: 'Agenda View', icon: '📝', disabled: true },\n ];\n\n return (\n

\n {views.map((view) => (\n onViewChange(view.id)}\n className={`px-4 py-2 rounded-md flex items-center space-x-2 ${\n activeView === view.id\n ? 'bg-blue-600 text-white'\n : 'bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'\n } ${view.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n disabled={view.disabled}\n >\n {view.icon}\n {view.name}\n \n ))}\n

\n );\n};\n\nexport default ViewSelector;",[],[232,239,272,316],[232,239,272],{"_103":325,"_95":326,"_153":327,"_155":240,"_156":138,"_157":328,"_159":160,"_105":329,"_100":197,"_162":179,"_164":330,"_165":22,"_166":-5,"_167":331,"_98":332},"3fb6cc38-61fc-11f0-b4c9-0224a6c84d84","App.tsx","125ac280-3669-11f0-b740-9e149126039e",23,["D",1752639647692],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\nimport { STORAGE_KEYS } from '../../shared/constants.ts';\nimport { AuthState } from '../../shared/types.ts';\nimport Auth from './Auth.tsx';\nimport ViewSelector from './views/ViewSelector.tsx';\nimport YearView from './views/YearView/index.tsx';\nimport Settings from './settings/Settings.tsx';\n\nconst App: React.FC = () => {\n const [authState, setAuthState] = useState({\n isAuthenticated: false,\n });\n const [activeView, setActiveView] = useState('year');\n const [isLoading, setIsLoading] = useState(true);\n const [showSettings, setShowSettings] = useState(false);\n const [metadataCalendarId, setMetadataCalendarId] = useState(null);\n\n // Load auth state from local storage on mount\n useEffect(() => {\n const storedAuth = localStorage.getItem(STORAGE_KEYS.AUTH);\n if (storedAuth) {\n try {\n const parsedAuth = JSON.parse(storedAuth);\n // Check if the token is still valid\n if (parsedAuth.expiresAt && parsedAuth.expiresAt > Date.now()) {\n setAuthState(parsedAuth);\n }\n } catch (error) {\n console.error('Error parsing stored auth:', error);\n localStorage.removeItem(STORAGE_KEYS.AUTH);\n }\n }\n\n // Check for auth parameters in URL fragment\n const hashParams = new URLSearchParams(window.location.hash.substring(1));\n const accessToken = hashParams.get('access_token');\n const refreshToken = hashParams.get('refresh_token');\n const expiresIn = hashParams.get('expires_in');\n\n if (accessToken && refreshToken && expiresIn) {\n const expiresAt = Date.now() + parseInt(expiresIn) * 1000;\n const newAuthState = {\n isAuthenticated: true,\n accessToken,\n refreshToken,\n expiresAt,\n };\n setAuthState(newAuthState);\n localStorage.setItem(STORAGE_KEYS.AUTH, JSON.stringify(newAuthState));\n \n // Clean up the URL\n window.history.replaceState({}, document.title, window.location.pathname);\n }\n\n setIsLoading(false);\n }, []);\n\n // Check for and create metadata calendar if needed\n useEffect(() => {\n if (authState.isAuthenticated && authState.accessToken) {\n const checkMetadataCalendar = async () => {\n try {\n // First check if we have the metadata calendar ID in local storage\n const storedMetadataId = localStorage.getItem('metadata_calendar_id');\n if (storedMetadataId) {\n setMetadataCalendarId(storedMetadataId);\n return;\n }\n\n // Otherwise, fetch calendar list to find or create it\n const response = await fetch('/api/metadata-calendar', {\n headers: {\n 'Authorization': `Bearer ${authState.accessToken}`,\n },\n });\n\n if (response.ok) {\n const data = await response.json();\n setMetadataCalendarId(data.id);\n localStorage.setItem('metadata_calendar_id', data.id);\n } else {\n console.error('Failed to create metadata calendar');\n }\n } catch (error) {\n console.error('Error checking metadata calendar:', error);\n }\n };\n\n checkMetadataCalendar();\n }\n }, [authState.isAuthenticated, authState.accessToken]);\n\n // Handle logout\n const handleLogout = () => {\n setAuthState({ isAuthenticated: false });\n localStorage.removeItem(STORAGE_KEYS.AUTH);\n localStorage.removeItem('metadata_calendar_id');\n };\n\n // Render loading state\n if (isLoading) {\n return (\n

\n );\n }\n\n // Render auth screen if not authenticated\n if (!authState.isAuthenticated) {\n return ;\n }\n\n // Render the main application\n return (\n

\n {/* Header */}\n

GCal Playground

\n \n \n

\n\n {/* Main content */}\n

\n {showSettings ? (\n setShowSettings(false)}\n />\n ) : (\n <>\n \n {activeView === 'year' && (\n \n )}\n {/* Other views would be conditionally rendered here */}\n \n )}\n

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

\n );\n};\n\nexport default App;",[],[232,239,326],{"_103":334,"_95":335,"_153":336,"_155":240,"_156":138,"_157":337,"_159":160,"_105":338,"_100":32,"_162":179,"_164":339,"_165":22,"_166":-5,"_167":340,"_98":341},"1a52f250-3669-11f0-806f-9e149126039e","Auth.tsx","1a52f4bc-3669-11f0-806f-9e149126039e",11,["D",1747848548956],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';\n\nconst Auth: React.FC = () => {\n const [authUrl, setAuthUrl] = useState('');\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const fetchAuthUrl = async () => {\n try {\n const response = await fetch('/api/auth/url');\n if (response.ok) {\n const data = await response.json();\n setAuthUrl(data.url);\n } else {\n setError('Failed to get authentication URL');\n }\n } catch (error) {\n setError('Error connecting to server');\n console.error('Error fetching auth URL:', error);\n } finally {\n setIsLoading(false);\n }\n };\n\n fetchAuthUrl();\n }, []);\n\n if (isLoading) {\n return (\n

Loading authentication...

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

Error

{error}

\n \n

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

GCal Playground

\n Create and use alternative interfaces for Google Calendar. Sign in with your Google account to get started.\n

\n \n Sign in with Google\n \n

\n We'll need access to your Google Calendar to create and manage events.\n

\n );\n};\n\nexport default Auth;",[],[232,239,335],[232,239],{"_103":344,"_95":345,"_153":346,"_155":233,"_156":138,"_157":347,"_159":160,"_105":348,"_100":234,"_162":349,"_164":350,"_165":22,"_166":-5,"_167":351,"_98":352},"7d8a044e-6201-11f0-9bde-0224a6c84d84","index.html","01a528fe-3669-11f0-90f4-9e149126039e",49,["D",1752641898910],"file","\n\n\n \n \n GCal Playground\n \n \n \n\n\n

\n \n\n",[],[232,345],{"_103":354,"_95":305,"_153":355,"_155":233,"_156":138,"_157":356,"_159":160,"_105":357,"_100":197,"_162":179,"_164":358,"_165":22,"_166":-5,"_167":359,"_98":360},"34217da0-61fc-11f0-a6b2-0224a6c84d84","042fe276-3669-11f0-9ca0-9e149126039e",22,["D",1752639628266],"/** @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\n// Mount the React application\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[232,305],[232],{"_103":363,"_95":364,"_153":365,"_155":-5,"_156":138,"_157":309,"_159":160,"_105":366,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":367,"_98":384},"f169bf18-3668-11f0-8c1e-9e149126039e","shared","32fb92a6-293f-4123-94b8-36795996ed78",["D",1747848480317],[368,376],{"_103":369,"_95":370,"_153":371,"_155":365,"_156":138,"_157":290,"_159":160,"_105":372,"_100":32,"_162":179,"_164":373,"_165":22,"_166":-5,"_167":374,"_98":375},"f960a4d4-3668-11f0-9bc5-9e149126039e","constants.ts","f960a57e-3668-11f0-9bc5-9e149126039e",["D",1747848493679],"// App constants\nexport const APP_NAME = 'GCal Playground';\nexport const METADATA_CALENDAR_NAME = 'GCal Playground Metadata';\n\n// Local storage keys\nexport const STORAGE_KEYS = {\n AUTH: 'gcal_playground_auth',\n SETTINGS: 'gcal_playground_settings',\n SELECTED_VIEW: 'gcal_playground_view',\n SELECTED_CALENDARS: 'gcal_playground_calendars',\n};\n\n// Default settings\nexport const DEFAULT_SETTINGS = {\n defaultView: 'year',\n weekStartsOn: 1, // Monday\n showWeekNumbers: false,\n defaultCalendars: ['primary'],\n theme: 'system' as const,\n};\n\n// Calendar colors\nexport const CALENDAR_COLORS = {\n 1: '#7986cb', // Lavender\n 2: '#33b679', // Sage\n 3: '#8e24aa', // Grape\n 4: '#e67c73', // Flamingo\n 5: '#f6bf26', // Banana\n 6: '#f4511e', // Tangerine\n 7: '#039be5', // Peacock\n 8: '#616161', // Graphite\n 9: '#3f51b5', // Blueberry\n 10: '#0b8043', // Basil\n 11: '#d50000', // Tomato\n};\n\n// Date formatting options\nexport const DATE_FORMATS = {\n monthYear: { month: 'long', year: 'numeric' } as const,\n monthDay: { month: 'short', day: 'numeric' } as const,\n weekday: { weekday: 'short' } as const,\n time: { hour: 'numeric', minute: '2-digit' } as const,\n};\n\n// View types\nexport const VIEW_TYPES = {\n YEAR: 'year',\n MONTH: 'month',\n WEEK: 'week',\n DAY: 'day',\n AGENDA: 'agenda',\n};\n\n// Event formatting defaults\nexport const DEFAULT_EVENT_FORMAT = {\n backgroundColor: undefined,\n textColor: undefined,\n displayText: undefined,\n visible: true,\n};",[],[364,370],{"_103":377,"_95":378,"_153":379,"_155":365,"_156":138,"_157":309,"_159":160,"_105":380,"_100":32,"_162":179,"_164":381,"_165":22,"_166":-5,"_167":382,"_98":383},"f169b2e8-3668-11f0-8c1e-9e149126039e","types.ts","f169b3a6-3668-11f0-8c1e-9e149126039e",["D",1747848480317],"// Event types\nexport interface CalendarEvent {\n id: string;\n summary: string;\n description?: string;\n location?: string;\n start: {\n date?: string;\n dateTime?: string;\n timeZone?: string;\n };\n end: {\n date?: string;\n dateTime?: string;\n timeZone?: string;\n };\n colorId?: string;\n creator?: {\n email: string;\n displayName?: string;\n };\n organizer?: {\n email: string;\n displayName?: string;\n };\n recurringEventId?: string;\n originalStartTime?: {\n date?: string;\n dateTime?: string;\n timeZone?: string;\n };\n transparency?: string;\n visibility?: string;\n iCalUID?: string;\n sequence?: number;\n attendees?: Array<{\n email: string;\n displayName?: string;\n responseStatus?: string;\n }>;\n reminders?: {\n useDefault: boolean;\n overrides?: Array<{\n method: string;\n minutes: number;\n }>;\n };\n // Custom formatting applied by our app\n formatting?: EventFormatting;\n}\n\n// Formatting options for events\nexport interface EventFormatting {\n backgroundColor?: string;\n textColor?: string;\n displayText?: string;\n visible?: boolean;\n}\n\n// Format rule definition\nexport interface FormatRule {\n id?: string;\n name: string;\n condition: RuleCondition;\n format: EventFormatting;\n}\n\n// Rule condition types\nexport type RuleCondition = \n | TitleCondition\n | CalendarCondition\n | PropertyCondition\n | CustomCondition;\n\nexport interface TitleCondition {\n type: 'title';\n value: string;\n}\n\nexport interface CalendarCondition {\n type: 'calendar';\n value: string; // Calendar ID\n}\n\nexport interface PropertyCondition {\n type: 'property';\n value: 'all-day' | 'recurring' | 'has-attendees' | 'has-location';\n}\n\nexport interface CustomCondition {\n type: 'custom';\n value: string; // Custom expression\n}\n\n// Calendar metadata\nexport interface CalendarMetadata {\n formatRules: FormatRule[];\n settings: AppSettings;\n}\n\n// App settings\nexport interface AppSettings {\n defaultView: string;\n weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0 = Sunday, 1 = Monday, etc.\n showWeekNumbers: boolean;\n defaultCalendars: string[]; // IDs of calendars to show by default\n theme: 'light' | 'dark' | 'system';\n}\n\n// Auth state\nexport interface AuthState {\n isAuthenticated: boolean;\n accessToken?: string;\n refreshToken?: string;\n expiresAt?: number;\n}\n\n// View types for extensibility\nexport interface CalendarView {\n id: string;\n name: string;\n component: React.ComponentType;\n icon?: string;\n}",[],[364,378],[364],{"_103":386,"_95":99,"_153":387,"_155":-5,"_156":138,"_157":137,"_159":160,"_105":388,"_100":197,"_162":349,"_164":389,"_165":22,"_166":-5,"_167":390,"_98":391},"4c5a571a-6202-11f0-84b2-0224a6c84d84","b111e756-3668-11f0-8c53-9e149126039e",["D",1752642245883],"# GCal Playground\n\nA flexible Google Calendar alternative interface that syncs two-way with Google Calendar via OAuth. This application allows for creating and using different views and interfaces for Google Calendar data.\n\n## Features\n\n- OAuth integration with Google Calendar\n- Two-way sync with Google Calendar\n- Vertical-scrolling year view with week-grid layout\n- Custom event formatting and colorization based on rules\n- Secondary calendar for metadata storage\n- Extensible architecture for future interfaces\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main entry point and API routes\n│ ├── auth/\n│ │ └── google-oauth.ts # Google OAuth implementation\n│ ├── calendar/\n│ │ ├── api.ts # Google Calendar API integration\n│ │ ├── events.ts # Event handling functions\n│ │ └── metadata.ts # Metadata calendar management\n│ └── utils/\n│ └── formatting.ts # Event formatting utilities\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Auth.tsx # Authentication component\n│ │ ├── views/\n│ │ │ ├── ViewSelector.tsx # Interface for selecting views\n│ │ │ ├── YearView/ # Year view implementation\n│ │ │ │ ├── index.tsx # Year view component\n│ │ │ │ ├── Day.tsx # Day cell component\n│ │ │ │ └── Week.tsx # Week row component\n│ │ │ └── [Future Views]/ # Placeholder for future views\n│ │ └── settings/\n│ │ ├── FormatRules.tsx # UI for managing formatting rules\n│ │ └── Settings.tsx # General settings component\n│ └── utils/\n│ ├── date.ts # Date manipulation utilities\n│ └── formatting.ts # Event formatting utilities\n└── shared/\n ├── types.ts # Shared TypeScript types\n └── constants.ts # Shared constants\n```\n\n## Getting Started\n\n1. Authenticate with your Google account\n - NB: this app isn't verified with Google, so in order to log in you either need to remix this and set up your own google auth, or [DM me](https://twitter.com/Malcolm_Ocean) your email so I can add you to the list of testers\n2. The app will create a secondary calendar for metadata if it doesn't exist\n3. View your calendar in the vertical-scrolling year view\n4. Create formatting rules for events\n\n## Formatting Rules\n\nEvents can be formatted based on various criteria:\n- Event title contains specific text\n- Event is in a specific calendar\n- Event has specific properties (all-day, recurring, etc.)\n- Custom rules using simple expressions\n\nFormatting options include:\n- Background color\n- Text color\n- Custom display format (e.g., \"XYZ✈ABC\" for flights)\n- Visibility options\n\n## Future Extensions\n\nThe architecture is designed to easily add new views and interfaces in the future.",[],[99],"files",[150,169,174,184,191,202,209,218,230,237,244,251,260,270,277,284,294,303,314,324,333,343,353,362,368,376,385],"counts",{"_396":32,"_397":197,"_398":32,"_399":400},"pulls","branches","forks","envVars",{"_401":118,"_402":32},"count","emptyCount","contents",[],{"_103":386,"_156":138,"_153":387,"_95":99,"_164":389,"_162":349,"_100":197,"_155":-5,"_105":406,"_157":137,"_166":-5,"_98":407},["D",1752642245883],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":416,"_349":421,"_424":425,"_432":433,"_437":-7,"_438":32,"_439":22},{"_103":104,"_95":96,"_105":417,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":118,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":418,"_132":419,"_135":420,"_147":22},["D",1747847921786],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},{"_103":386,"_95":99,"_153":387,"_155":-5,"_156":138,"_157":137,"_159":160,"_105":422,"_100":197,"_162":349,"_164":389,"_165":22,"_166":-5,"_98":423},["D",1752642245883],[99],"history",[426,428],{"_103":386,"_156":138,"_153":387,"_95":99,"_164":389,"_162":349,"_100":197,"_155":-5,"_105":427,"_157":137,"_166":-5},["D",1752642245883],{"_103":429,"_156":138,"_153":387,"_95":99,"_164":430,"_162":349,"_100":32,"_155":-5,"_105":431,"_157":197,"_166":-5},"b111e6b6-3668-11f0-8c53-9e149126039e","# GCal Playground\n\nA flexible Google Calendar alternative interface that syncs two-way with Google Calendar via OAuth. This application allows for creating and using different views and interfaces for Google Calendar data.\n\n## Features\n\n- OAuth integration with Google Calendar\n- Two-way sync with Google Calendar\n- Vertical-scrolling year view with week-grid layout\n- Custom event formatting and colorization based on rules\n- Secondary calendar for metadata storage\n- Extensible architecture for future interfaces\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main entry point and API routes\n│ ├── auth/\n│ │ └── google-oauth.ts # Google OAuth implementation\n│ ├── calendar/\n│ │ ├── api.ts # Google Calendar API integration\n│ │ ├── events.ts # Event handling functions\n│ │ └── metadata.ts # Metadata calendar management\n│ └── utils/\n│ └── formatting.ts # Event formatting utilities\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── Auth.tsx # Authentication component\n│ │ ├── views/\n│ │ │ ├── ViewSelector.tsx # Interface for selecting views\n│ │ │ ├── YearView/ # Year view implementation\n│ │ │ │ ├── index.tsx # Year view component\n│ │ │ │ ├── Day.tsx # Day cell component\n│ │ │ │ └── Week.tsx # Week row component\n│ │ │ └── [Future Views]/ # Placeholder for future views\n│ │ └── settings/\n│ │ ├── FormatRules.tsx # UI for managing formatting rules\n│ │ └── Settings.tsx # General settings component\n│ └── utils/\n│ ├── date.ts # Date manipulation utilities\n│ └── formatting.ts # Event formatting utilities\n└── shared/\n ├── types.ts # Shared TypeScript types\n └── constants.ts # Shared constants\n```\n\n## Getting Started\n\n1. Authenticate with your Google account\n2. The app will create a secondary calendar for metadata if it doesn't exist\n3. View your calendar in the vertical-scrolling year view\n4. Create formatting rules for events\n\n## Formatting Rules\n\nEvents can be formatted based on various criteria:\n- Event title contains specific text\n- Event is in a specific calendar\n- Event has specific properties (all-day, recurring, etc.)\n- Custom rules using simple expressions\n\nFormatting options include:\n- Background color\n- Text color\n- Custom display format (e.g., \"XYZ✈ABC\" for flights)\n- Visibility options\n\n## Future Extensions\n\nThe architecture is designed to easily add new views and interfaces in the future.",["D",1747848372367],"versions",[434,436],{"_349":426,"_435":428},"previous",{"_349":428,"_435":-5},"versionNumber","page","hasNext","actionData","errors"]

malcolmocean

FlexCal

History for README.md