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;",[180,181,99,67],"5d224bc6-61fc-11f0-8425-0224a6c84d84",["D",1752639697055],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from 'https://esm.sh/react@18.2.0';\nimport { FormatRule, RuleCondition } from '../../../shared/types.ts';\n\ninterface FormatRulesProps {\n rules: FormatRule[];\n onSave: (rule: FormatRule) => Promise;\n onUpdate: (rule: FormatRule) => Promise;\n onDelete: (ruleId: string) => Promise;\n}\n\nconst FormatRules: React.FC = ({ rules, onSave, onUpdate, onDelete }) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editingRule, setEditingRule] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n \n // Initialize a new rule for editing\n const handleAddRule = () => {\n setEditingRule({\n name: 'New Rule',\n condition: {\n type: 'title',\n value: '',\n },\n format: {\n backgroundColor: '#e2e8f0',\n textColor: '#000000',\n visible: true,\n },\n });\n setIsEditing(true);\n };\n \n // Edit an existing rule\n const handleEditRule = (rule: FormatRule) => {\n setEditingRule({ ...rule });\n setIsEditing(true);\n };\n \n // Save the rule being edited\n const handleSaveRule = async () => {\n if (!editingRule) return;\n \n setIsSubmitting(true);\n \n try {\n let success;\n \n if (editingRule.id) {\n // Update existing rule\n success = await onUpdate(editingRule);\n } else {\n // Create new rule\n success = await onSave(editingRule);\n }\n \n if (success) {\n setIsEditing(false);\n setEditingRule(null);\n }\n } finally {\n setIsSubmitting(false);\n }\n };\n \n // Delete a rule\n const handleDeleteRule = async (ruleId: string) => {\n if (confirm('Are you sure you want to delete this rule?')) {\n await onDelete(ruleId);\n }\n };\n \n // Update a field in the editing rule\n const updateRuleField = (field: string, value: any) => {\n if (!editingRule) return;\n \n setEditingRule(prev => {\n if (!prev) return null;\n \n if (field.startsWith('condition.')) {\n const conditionField = field.split('.')[1];\n return {\n ...prev,\n condition: {\n ...prev.condition,\n [conditionField]: value,\n },\n };\n } else if (field.startsWith('format.')) {\n const formatField = field.split('.')[1];\n return {\n ...prev,\n format: {\n ...prev.format,\n [formatField]: value,\n },\n };\n } else {\n return {\n ...prev,\n [field]: value,\n };\n }\n });\n };\n \n // Render the rule editor\n const renderRuleEditor = () => {\n if (!editingRule) return null;\n \n return (\n

\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;",[180,181,99,82],"pulls","branches","forks","envVars",{"_200":202,"_203":26},"connections",{"_200":26,"_201":26},"count","unfilledCount",3,"emptyCount",{"_36":410,"_13":369,"_65":361,"_46":-5,"_38":39,"_174":411,"_175":24,"_40":412,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":413,"_17":414},{"_36":406,"_13":405,"_65":400,"_46":361,"_38":39,"_174":202,"_175":24,"_40":407,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":408,"_17":409},{"_36":397,"_13":398,"_65":399,"_46":400,"_38":39,"_174":202,"_175":24,"_40":401,"_42":26,"_68":69,"_177":402,"_70":30,"_178":-5,"_236":403,"_17":404},{"_36":393,"_13":392,"_65":386,"_46":361,"_38":39,"_174":117,"_175":24,"_40":394,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":395,"_17":396},{"_36":383,"_13":384,"_65":385,"_46":386,"_38":39,"_174":387,"_175":24,"_40":388,"_42":186,"_68":69,"_177":389,"_70":30,"_178":-5,"_236":390,"_17":391},{"_36":379,"_13":378,"_65":373,"_46":361,"_38":39,"_174":319,"_175":24,"_40":380,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":381,"_17":382},{"_36":370,"_13":371,"_65":372,"_46":373,"_38":39,"_174":319,"_175":24,"_40":374,"_42":26,"_68":69,"_177":375,"_70":30,"_178":-5,"_236":376,"_17":377},{"_36":359,"_13":360,"_65":112,"_46":361,"_38":39,"_174":362,"_175":24,"_40":363,"_42":202,"_68":364,"_177":365,"_70":30,"_178":366,"_236":367,"_17":368},{"_36":355,"_13":180,"_65":264,"_46":-5,"_38":39,"_174":275,"_175":24,"_40":356,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":357,"_17":358},{"_36":350,"_13":181,"_65":173,"_46":264,"_38":39,"_174":351,"_175":24,"_40":352,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":353,"_17":354},{"_36":172,"_13":99,"_65":98,"_46":173,"_38":39,"_174":43,"_175":24,"_40":347,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":348,"_17":349},{"_36":189,"_13":82,"_65":81,"_46":98,"_38":39,"_174":93,"_175":24,"_40":344,"_42":186,"_68":69,"_177":191,"_70":30,"_178":-5,"_236":345,"_17":346},{"_36":184,"_13":67,"_65":66,"_46":98,"_38":39,"_174":85,"_175":24,"_40":341,"_42":186,"_68":69,"_177":187,"_70":30,"_178":-5,"_236":342,"_17":343},{"_36":336,"_13":304,"_65":298,"_46":173,"_38":39,"_174":337,"_175":24,"_40":338,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":339,"_17":340},{"_36":331,"_13":313,"_65":307,"_46":298,"_38":39,"_174":332,"_175":24,"_40":333,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":334,"_17":335},{"_36":323,"_13":324,"_65":325,"_46":307,"_38":39,"_174":326,"_175":24,"_40":327,"_42":252,"_68":69,"_177":328,"_70":30,"_178":-5,"_236":329,"_17":330},{"_36":314,"_13":315,"_65":316,"_46":307,"_38":39,"_174":317,"_175":24,"_40":318,"_42":319,"_68":69,"_177":320,"_70":30,"_178":-5,"_236":321,"_17":322},{"_36":305,"_13":262,"_65":306,"_46":307,"_38":39,"_174":308,"_175":24,"_40":309,"_42":243,"_68":69,"_177":310,"_70":30,"_178":-5,"_236":311,"_17":312},{"_36":295,"_13":296,"_65":297,"_46":298,"_38":39,"_174":299,"_175":24,"_40":300,"_42":186,"_68":69,"_177":301,"_70":30,"_178":-5,"_236":302,"_17":303},{"_36":287,"_13":288,"_65":289,"_46":173,"_38":39,"_174":290,"_175":24,"_40":291,"_42":186,"_68":69,"_177":292,"_70":30,"_178":-5,"_236":293,"_17":294},{"_36":279,"_13":280,"_65":281,"_46":173,"_38":39,"_174":282,"_175":24,"_40":283,"_42":26,"_68":69,"_177":284,"_70":30,"_178":-5,"_236":285,"_17":286},{"_36":270,"_13":271,"_65":272,"_46":264,"_38":39,"_174":273,"_175":24,"_40":274,"_42":275,"_68":21,"_177":276,"_70":30,"_178":-5,"_236":277,"_17":278},{"_36":261,"_13":262,"_65":263,"_46":264,"_38":39,"_174":265,"_175":24,"_40":266,"_42":186,"_68":69,"_177":267,"_70":30,"_178":-5,"_236":268,"_17":269},{"_36":257,"_13":248,"_65":242,"_46":-5,"_38":39,"_174":243,"_175":24,"_40":258,"_42":26,"_68":100,"_177":-5,"_70":30,"_178":-5,"_236":259,"_17":260},{"_36":249,"_13":250,"_65":251,"_46":242,"_38":39,"_174":252,"_175":24,"_40":253,"_42":26,"_68":69,"_177":254,"_70":30,"_178":-5,"_236":255,"_17":256},{"_36":239,"_13":240,"_65":241,"_46":242,"_38":39,"_174":243,"_175":24,"_40":244,"_42":26,"_68":69,"_177":245,"_70":30,"_178":-5,"_236":246,"_17":247},{"_36":231,"_13":232,"_65":233,"_46":-5,"_38":39,"_174":137,"_175":24,"_40":234,"_42":186,"_68":21,"_177":235,"_70":30,"_178":-5,"_236":237,"_17":238},"4c5a571a-6202-11f0-84b2-0224a6c84d84","README.md","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.","children",[],[232],"f169b2e8-3668-11f0-8c1e-9e149126039e","types.ts","f169b3a6-3668-11f0-8c1e-9e149126039e","32fb92a6-293f-4123-94b8-36795996ed78",6,["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}",[],[248,240],"shared","f960a4d4-3668-11f0-9bc5-9e149126039e","constants.ts","f960a57e-3668-11f0-9bc5-9e149126039e",7,["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};",[],[248,250],"f169bf18-3668-11f0-8c1e-9e149126039e",["D",1747848480317],[228,229],[248],"34217da0-61fc-11f0-a6b2-0224a6c84d84","index.tsx","042fe276-3669-11f0-9ca0-9e149126039e","6ffa6166-c12d-4dcb-b3a8-8c667bd0594e",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();",[],[180,262],"7d8a044e-6201-11f0-9bde-0224a6c84d84","index.html","01a528fe-3669-11f0-90f4-9e149126039e",49,["D",1752641898910],8,"\n\n\n \n \n GCal Playground\n \n \n \n\n\n

\n \n\n",[],[180,271],"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;",[],[180,181,280],"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;",[],[180,181,288],"466b3aaa-61fc-11f0-beda-0224a6c84d84","ViewSelector.tsx","20364f64-3669-11f0-83bf-9e149126039e","df2e3ea3-45ef-4190-b6c5-a36df791fb07",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;",[],[180,181,304,296],"views","68f82bc8-6201-11f0-b57c-0224a6c84d84","3dfd7aea-3669-11f0-89c1-9e149126039e","4a9c008e-c71e-4b72-b2c8-172c20ba0481",46,["D",1752641864396],"/** @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;",[],[180,181,304,313,262],"YearView","848d33ba-6201-11f0-aac3-0224a6c84d84","Week.tsx","44176f80-3669-11f0-9771-9e149126039e",50,["D",1752641910674],5,"/** @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;",[],[180,181,304,313,315],"22ffed76-6202-11f0-a688-0224a6c84d84","Day.tsx","53e067fa-3669-11f0-a50f-9e149126039e",52,["D",1752642176503],"/** @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;",[],[180,181,304,313,324],"3dfd8fda-3669-11f0-89c1-9e149126039e",13,["D",1747848608792],[219,220,221],[180,181,304,313],"203670fc-3669-11f0-83bf-9e149126039e",12,["D",1747848558832],[218,222],[180,181,304],["D",1752639689121],[],[180,181,99,67],["D",1752639697055],[],[180,181,99,82],["D",1747848676867],[215,216],[180,181,99],"125aee86-3669-11f0-b740-9e149126039e",10,["D",1747848535577],[214,217,223,224],[180,181],"01a54bd6-3669-11f0-90f4-9e149126039e",["D",1747848507550],[213,225,226],[180],"39edff3e-366d-11f0-aeab-9e149126039e","index.ts","67720bca-35c7-4bf0-9d93-812d648b7dd1",21,["D",1747850319966],"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 { handleGoogleAuth, handleGoogleCallback, getAuthUrl } from 'https://esm.town/v/malcolmocean/FlexCal/backend/auth/google-oauth.ts';\nimport { \n getCalendarEvents, \n createEvent, \n updateEvent, \n deleteEvent,\n getCalendarList,\n createMetadataCalendar\n} from 'https://esm.town/v/malcolmocean/FlexCal/backend/calendar/api.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// 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 index.html with initial data\napp.get('/', async c => {\n let html = await readFile('/frontend/index.html', import.meta.url);\n return c.html(html);\n});\n\n// Auth routes\napp.get('/api/auth/google', async c => {\n return await handleGoogleAuth(c);\n});\n\napp.get('/api/auth/google/callback', async c => {\n return await handleGoogleCallback(c);\n});\n\napp.get('/api/auth/url', async c => {\n const url = await getAuthUrl();\n return c.json({ url });\n});\n\n// Calendar API routes\napp.get('/api/calendars', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n try {\n const calendars = await getCalendarList(token);\n return c.json(calendars);\n } catch (error) {\n console.error('Error fetching calendars:', error);\n return c.json({ error: 'Failed to fetch calendars' }, 500);\n }\n});\n\napp.post('/api/metadata-calendar', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n try {\n const calendar = await createMetadataCalendar(token);\n return c.json(calendar);\n } catch (error) {\n console.error('Error creating metadata calendar:', error);\n return c.json({ error: 'Failed to create metadata calendar' }, 500);\n }\n});\n\napp.get('/api/events', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const timeMin = c.req.query('timeMin');\n const timeMax = c.req.query('timeMax');\n \n try {\n const events = await getCalendarEvents(token, calendarId, timeMin, timeMax);\n return c.json(events);\n } catch (error) {\n console.error('Error fetching events:', error);\n return c.json({ error: 'Failed to fetch events' }, 500);\n }\n});\n\napp.post('/api/events', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const event = await c.req.json();\n \n try {\n const createdEvent = await createEvent(token, calendarId, event);\n return c.json(createdEvent);\n } catch (error) {\n console.error('Error creating event:', error);\n return c.json({ error: 'Failed to create event' }, 500);\n }\n});\n\napp.put('/api/events/:eventId', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const eventId = c.req.param('eventId');\n const event = await c.req.json();\n \n try {\n const updatedEvent = await updateEvent(token, calendarId, eventId, event);\n return c.json(updatedEvent);\n } catch (error) {\n console.error('Error updating event:', error);\n return c.json({ error: 'Failed to update event' }, 500);\n }\n});\n\napp.delete('/api/events/:eventId', async c => {\n const token = c.req.header('Authorization')?.replace('Bearer ', '');\n if (!token) return c.json({ error: 'Unauthorized' }, 401);\n \n const calendarId = c.req.query('calendarId') || 'primary';\n const eventId = c.req.param('eventId');\n \n try {\n await deleteEvent(token, calendarId, eventId);\n return c.json({ success: true });\n } catch (error) {\n console.error('Error deleting event:', error);\n return c.json({ error: 'Failed to delete event' }, 500);\n }\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","flexcal",[],[369,360],"backend","e8c671ee-3668-11f0-b34d-9e149126039e","formatting.ts","e8c672a2-3668-11f0-b34d-9e149126039e","fa1a5312-b855-4196-806e-953784eccab0",["D",1747848465826],"import { OpenAI } from \"https://esm.town/v/std/openai\";\n\n// Interface for formatting rules\ninterface FormatRule {\n id: string;\n name: string;\n condition: {\n type: 'title' | 'calendar' | 'property' | 'custom';\n value: string;\n };\n format: {\n backgroundColor?: string;\n textColor?: string;\n displayFormat?: string;\n visible?: boolean;\n };\n}\n\n// Apply formatting rules to events\nexport function applyFormatRules(events: any[], rules: FormatRule[]): any[] {\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 rules) {\n if (ruleMatches(event, rule.condition)) {\n // Apply the formatting\n formattedEvent.formatting = {\n ...formattedEvent.formatting,\n ...rule.format\n };\n \n // Apply custom display format if specified\n if (rule.format.displayFormat) {\n formattedEvent.formatting.displayText = formatEventText(event, rule.format.displayFormat);\n }\n }\n }\n \n return formattedEvent;\n });\n}\n\n// Check if an event matches a condition\nfunction 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 // The calendar ID is usually in the event's organizer or in a custom field\n return event.organizer?.email === condition.value;\n \n case 'property':\n // Check for properties like all-day, recurring, etc.\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 // For custom conditions, we would need a simple expression evaluator\n // This is a simplified version\n try {\n // Very basic evaluation - in a real app, use a proper expression evaluator\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// Format event text according to a template\nfunction formatEventText(event: any, format: string): string {\n // Replace placeholders in the format string\n let result = format;\n \n // Replace basic placeholders\n result = result.replace(/\\{title\\}/g, event.summary || '');\n result = result.replace(/\\{location\\}/g, event.location || '');\n result = result.replace(/\\{description\\}/g, event.description || '');\n \n // Handle special formatting for flights\n if (format.includes('{flight}') && (event.summary?.includes('flight') || event.summary?.includes('✈'))) {\n result = result.replace(/\\{flight\\}/g, extractFlightInfo(event));\n }\n \n return result;\n}\n\n// Extract flight information from an event\nfunction extractFlightInfo(event: any): string {\n // This is a simplified version - in a real app, use more sophisticated parsing\n const title = event.summary || '';\n const description = event.description || '';\n const location = event.location || '';\n \n // Look for airport codes (3 uppercase letters)\n const airportCodeRegex = /\\b([A-Z]{3})\\b/g;\n const allText = `${title} ${description} ${location}`;\n const matches = [...allText.matchAll(airportCodeRegex)];\n \n if (matches.length >= 2) {\n // If we found at least two airport codes, format as departure✈arrival\n return `${matches[0][1]}✈${matches[1][1]}`;\n }\n \n return title; // Fall back to the original title\n}\n\n// Use AI to extract flight information\nexport async function extractFlightInfoWithAI(event: any): Promise {\n try {\n const openai = new OpenAI();\n \n const prompt = `\nExtract the departure and arrival airport codes from this flight information.\nReturn only the codes in the format \"XXX✈YYY\" where XXX is the departure airport code and YYY is the arrival airport code.\nIf you can't find both codes, just return \"FLIGHT\".\n\nEvent title: ${event.summary || ''}\nEvent location: ${event.location || ''}\nEvent description: ${event.description || ''}\n `;\n \n const completion = await openai.chat.completions.create({\n messages: [\n { role: \"system\", content: \"You extract airport codes from flight information.\" },\n { role: \"user\", content: prompt }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 20,\n });\n \n const result = completion.choices[0].message.content?.trim() || 'FLIGHT';\n \n // Validate that the result matches the expected format\n if (/^[A-Z]{3}✈[A-Z]{3}$/.test(result)) {\n return result;\n } else {\n return 'FLIGHT';\n }\n } catch (error) {\n console.error('Error extracting flight info with AI:', error);\n return 'FLIGHT';\n }\n}",[],[369,378,371],"utils","e8c698d6-3668-11f0-b34d-9e149126039e",["D",1747848465826],[210],[369,378],"3272f70a-366d-11f0-80d3-9e149126039e","api.ts","da3c74c0-3668-11f0-b390-9e149126039e","f0e0f308-929f-4a61-95d4-33431cd86715",20,["D",1747850307415],"import { refreshAccessToken } from 'https://esm.town/v/malcolmocean/FlexCal/backend/auth/google-oauth.ts';\n\nconst CALENDAR_API_BASE = 'https://www.googleapis.com/calendar/v3';\nconst METADATA_CALENDAR_NAME = 'GCal Playground Metadata';\n\n// Helper function to make authenticated requests to the Google Calendar API\nasync function fetchWithAuth(token: string, url: string, options: RequestInit = {}): Promise {\n const headers = {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json',\n ...options.headers,\n };\n\n const response = await fetch(url, {\n ...options,\n headers,\n });\n\n if (response.status === 401) {\n // Token expired, would need to refresh\n // In a real implementation, we would use the refresh token to get a new access token\n throw new Error('Authentication token expired');\n }\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Google Calendar API error (${response.status}): ${errorText}`);\n }\n\n return response.json();\n}\n\n// Get a list of the user's calendars\nexport async function getCalendarList(token: string): Promise {\n return fetchWithAuth(token, `${CALENDAR_API_BASE}/users/me/calendarList`);\n}\n\n// Get events from a calendar\nexport async function getCalendarEvents(\n token: string, \n calendarId: string = 'primary',\n timeMin?: string,\n timeMax?: string\n): Promise {\n const params = new URLSearchParams();\n \n if (timeMin) params.append('timeMin', timeMin);\n if (timeMax) params.append('timeMax', timeMax);\n \n // Get more details about events\n params.append('singleEvents', 'true');\n params.append('maxResults', '2500'); // Get a large number of events\n\n const url = `${CALENDAR_API_BASE}/calendars/${encodeURIComponent(calendarId)}/events?${params.toString()}`;\n return fetchWithAuth(token, url);\n}\n\n// Create a new event\nexport async function createEvent(token: string, calendarId: string, event: any): Promise {\n const url = `${CALENDAR_API_BASE}/calendars/${encodeURIComponent(calendarId)}/events`;\n return fetchWithAuth(token, url, {\n method: 'POST',\n body: JSON.stringify(event),\n });\n}\n\n// Update an existing event\nexport async function updateEvent(token: string, calendarId: string, eventId: string, event: any): Promise {\n const url = `${CALENDAR_API_BASE}/calendars/${encodeURIComponent(calendarId)}/events/${encodeURIComponent(eventId)}`;\n return fetchWithAuth(token, url, {\n method: 'PUT',\n body: JSON.stringify(event),\n });\n}\n\n// Delete an event\nexport async function deleteEvent(token: string, calendarId: string, eventId: string): Promise {\n const url = `${CALENDAR_API_BASE}/calendars/${encodeURIComponent(calendarId)}/events/${encodeURIComponent(eventId)}`;\n await fetchWithAuth(token, url, {\n method: 'DELETE',\n });\n}\n\n// Check if the metadata calendar exists\nasync function findMetadataCalendar(token: string): Promise {\n const calendars = await getCalendarList(token);\n \n for (const calendar of calendars.items) {\n if (calendar.summary === METADATA_CALENDAR_NAME) {\n return calendar.id;\n }\n }\n \n return null;\n}\n\n// Create the metadata calendar if it doesn't exist\nexport async function createMetadataCalendar(token: string): Promise {\n // First check if it already exists\n const existingId = await findMetadataCalendar(token);\n if (existingId) {\n return { id: existingId, name: METADATA_CALENDAR_NAME, alreadyExists: true };\n }\n \n // Create a new calendar for metadata\n const url = `${CALENDAR_API_BASE}/calendars`;\n const calendar = await fetchWithAuth(token, url, {\n method: 'POST',\n body: JSON.stringify({\n summary: METADATA_CALENDAR_NAME,\n description: 'Calendar used to store metadata for GCal Playground',\n timeZone: 'UTC',\n }),\n });\n \n return { ...calendar, alreadyExists: false };\n}\n\n// Get metadata from the metadata calendar\nexport async function getMetadata(token: string, metadataCalendarId: string): Promise {\n const events = await getCalendarEvents(token, metadataCalendarId);\n \n // Process events to extract metadata\n const metadata = {\n formatRules: [],\n settings: {},\n };\n \n for (const event of events.items) {\n if (event.summary.startsWith('FORMAT_RULE:')) {\n try {\n const rule = JSON.parse(event.description);\n metadata.formatRules.push({\n id: event.id,\n ...rule,\n });\n } catch (error) {\n console.error('Error parsing format rule:', error);\n }\n } else if (event.summary === 'SETTINGS') {\n try {\n metadata.settings = JSON.parse(event.description);\n } catch (error) {\n console.error('Error parsing settings:', error);\n }\n }\n }\n \n return metadata;\n}\n\n// Save a formatting rule to the metadata calendar\nexport async function saveFormatRule(\n token: string, \n metadataCalendarId: string, \n rule: any\n): Promise {\n const event = {\n summary: `FORMAT_RULE: ${rule.name}`,\n description: JSON.stringify(rule),\n start: {\n date: '2000-01-01', // Use a fixed date for metadata events\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent', // Don't block time on calendar\n };\n \n return createEvent(token, metadataCalendarId, event);\n}\n\n// Update a formatting rule\nexport async function updateFormatRule(\n token: string, \n metadataCalendarId: string, \n ruleId: string,\n rule: any\n): Promise {\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 return updateEvent(token, metadataCalendarId, ruleId, event);\n}\n\n// Delete a formatting rule\nexport async function deleteFormatRule(\n token: string, \n metadataCalendarId: string, \n ruleId: string\n): Promise {\n return deleteEvent(token, metadataCalendarId, ruleId);\n}\n\n// Save settings to the metadata calendar\nexport async function saveSettings(\n token: string, \n metadataCalendarId: string, \n settings: any\n): Promise {\n // First check if settings event already exists\n const events = await getCalendarEvents(token, metadataCalendarId);\n let settingsEventId = null;\n \n for (const event of events.items) {\n if (event.summary === 'SETTINGS') {\n settingsEventId = event.id;\n break;\n }\n }\n \n const event = {\n summary: 'SETTINGS',\n description: JSON.stringify(settings),\n start: {\n date: '2000-01-01',\n },\n end: {\n date: '2000-01-02',\n },\n transparency: 'transparent',\n };\n \n if (settingsEventId) {\n return updateEvent(token, metadataCalendarId, settingsEventId, event);\n } else {\n return createEvent(token, metadataCalendarId, event);\n }\n}",[],[369,392,384],"calendar","da3c85d2-3668-11f0-b390-9e149126039e",["D",1747848441433],[208],[369,392],"c9670660-3668-11f0-bc5a-9e149126039e","google-oauth.ts","c9670714-3668-11f0-bc5a-9e149126039e","f35f9dd1-3f63-45c4-9028-ef78dd555ce7",["D",1747848413187],"import { Context } from 'https://esm.sh/hono@3.11.7';\n\n// Google OAuth configuration\nconst GOOGLE_CLIENT_ID = Deno.env.get('GOOGLE_CLIENT_ID');\nconst GOOGLE_CLIENT_SECRET = Deno.env.get('GOOGLE_CLIENT_SECRET');\nconst REDIRECT_URI = Deno.env.get('REDIRECT_URI') || 'https://your-val-town-url.web.val.run/api/auth/google/callback';\nconst SCOPES = [\n 'https://www.googleapis.com/auth/calendar',\n 'https://www.googleapis.com/auth/calendar.events',\n 'https://www.googleapis.com/auth/calendar.settings.readonly',\n 'https://www.googleapis.com/auth/calendar.calendarlist.readonly'\n];\n\n// Generate a random state for OAuth security\nfunction generateState(): string {\n const array = new Uint8Array(16);\n crypto.getRandomValues(array);\n return Array.from(array, byte => byte.toString(16).padStart(2, '0')).join('');\n}\n\n// Get the Google OAuth URL\nexport async function getAuthUrl(): Promise {\n if (!GOOGLE_CLIENT_ID) {\n throw new Error('GOOGLE_CLIENT_ID environment variable is not set');\n }\n\n const state = generateState();\n \n const params = new URLSearchParams({\n client_id: GOOGLE_CLIENT_ID,\n redirect_uri: REDIRECT_URI,\n response_type: 'code',\n scope: SCOPES.join(' '),\n access_type: 'offline',\n state,\n prompt: 'consent',\n });\n\n return `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;\n}\n\n// Handle the initial OAuth request\nexport async function handleGoogleAuth(c: Context): Promise {\n try {\n const authUrl = await getAuthUrl();\n return new Response(null, {\n status: 302,\n headers: {\n Location: authUrl\n }\n });\n } catch (error) {\n console.error('Error in Google auth:', error);\n return c.json({ error: 'Authentication failed' }, 500);\n }\n}\n\n// Exchange the authorization code for tokens\nasync function exchangeCodeForTokens(code: string): Promise {\n if (!GOOGLE_CLIENT_ID || !GOOGLE_CLIENT_SECRET) {\n throw new Error('Google OAuth credentials are not set');\n }\n\n const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n code,\n client_id: GOOGLE_CLIENT_ID,\n client_secret: GOOGLE_CLIENT_SECRET,\n redirect_uri: REDIRECT_URI,\n grant_type: 'authorization_code',\n }),\n });\n\n if (!tokenResponse.ok) {\n const errorData = await tokenResponse.json();\n throw new Error(`Failed to exchange code for tokens: ${JSON.stringify(errorData)}`);\n }\n\n return tokenResponse.json();\n}\n\n// Handle the OAuth callback\nexport async function handleGoogleCallback(c: Context): Promise {\n const code = c.req.query('code');\n const error = c.req.query('error');\n const state = c.req.query('state');\n\n if (error) {\n return c.json({ error: `Authentication failed: ${error}` }, 400);\n }\n\n if (!code) {\n return c.json({ error: 'Authorization code is missing' }, 400);\n }\n\n try {\n const tokens = await exchangeCodeForTokens(code);\n \n // Redirect to the frontend with the tokens in the URL fragment\n // This is more secure than using query parameters\n const redirectUrl = `/?auth_success=true#access_token=${tokens.access_token}&refresh_token=${tokens.refresh_token}&expires_in=${tokens.expires_in}`;\n \n return new Response(null, {\n status: 302,\n headers: {\n Location: redirectUrl\n }\n });\n } catch (error) {\n console.error('Error in Google callback:', error);\n return c.json({ error: 'Failed to complete authentication' }, 500);\n }\n}\n\n// Refresh an access token using a refresh token\nexport async function refreshAccessToken(refreshToken: string): Promise {\n if (!GOOGLE_CLIENT_ID || !GOOGLE_CLIENT_SECRET) {\n throw new Error('Google OAuth credentials are not set');\n }\n\n const response = await fetch('https://oauth2.googleapis.com/token', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: new URLSearchParams({\n client_id: GOOGLE_CLIENT_ID,\n client_secret: GOOGLE_CLIENT_SECRET,\n refresh_token: refreshToken,\n grant_type: 'refresh_token',\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Failed to refresh token: ${JSON.stringify(errorData)}`);\n }\n\n const data = await response.json();\n return data.access_token;\n}",[],[369,405,398],"auth","c96726e0-3668-11f0-bc5a-9e149126039e",["D",1747848413187],[206],[369,405],"bd5c8598-3668-11f0-88eb-9e149126039e",2,["D",1747848392985],[205,207,209,211],[369],["D",1747847921786],{"_11":12,"_150":73},{"_11":12,"_146":-5,"_72":73,"_31":71,"_147":148,"_149":30},{"_42":137,"_13":16,"_36":39,"_138":102,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_55":-5,"_169":452,"_453":454,"_455":456,"_457":30,"_458":30,"_459":30,"_460":24,"_461":-5,"_462":-7,"_463":-7,"_464":26,"_465":30,"_466":30,"_467":-5,"_468":30,"_469":30,"_470":30,"_471":-5},"ENV",{"_423":424,"_425":426,"_427":16,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439,"_440":441,"_442":443,"_444":445,"_446":447,"_448":449,"_450":451},"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 · settings