[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AnnualCalendar } from "@/components/annual-calendar" export default function Home() { return } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "ai": "6.0.23", "motion": "12.24.12", "@sanity/client": "7.14.0", "swr": "2.3.8", "@vercel/blob": "2.0.0", "@clerk/nextjs": "6.36.9", "@octokit/rest": "22.0.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]markdown:file="marketing-content.md" isMerged="true" # Annual Calendar 2026 - Marketing Content > A premium, pixel-perfect annual calendar built with Next.js 15, React 19, and Tailwind CSS v4. Created by a v0 Ambassador to showcase the power of AI-assisted development. --- ## Table of Contents 1. [X (Twitter) Posts](#x-twitter-posts) 2. [LinkedIn Posts](#linkedin-posts) 3. [v0 Template Description](#v0-template-description) 4. [GitHub README](#github-readme) 5. [Vercel Community Forum Blog Post](#vercel-community-forum-blog-post) 6. [Product Hunt Launch](#product-hunt-launch) 7. [Dev.to Article](#devto-article) 8. [YouTube/Video Script](#youtubevideo-script) --- ## X (Twitter) Posts ### Launch Thread **Tweet 1 (Hook):** ``` I built a $500-quality annual calendar in a single conversation with @v0. No Figma. No design handoff. Just prompts. Here's the result 🧵👇 [SCREENSHOT_YEAR_VIEW] ``` **Tweet 2 (Features):** ``` What's inside: → Year, Week & Day views → Multi-day events with spanning bars → Drag-free event creation → Background photos per day → Journal/notes per day → Right-click context menus → Mobile-responsive drawers All built with natural language. ``` **Tweet 3 (Tech Stack):** ``` Tech stack (all generated by v0): • Next.js 15 + React 19 • Tailwind CSS v4 • shadcn/ui components • Radix UI primitives • TypeScript Zero boilerplate written by hand. ``` **Tweet 4 (Process):** ``` My process: 1. Showed v0 two reference images 2. Said "replicate this annual calendar for 2026" 3. Iterated with natural feedback like "make weekends darker" and "add diagonal stripes for past days" v0 understood context, remembered state, and shipped production code. ``` **Tweet 5 (CTA):** ``` Try it yourself: 🔗 Live demo: [TEMPLATE_DEMO_URL] 🔗 v0 template: [V0_TEMPLATE_URL] 🔗 Source code: [GITHUB_URL] Built with @v0 — the AI that actually ships. ``` ### Single Viral Tweet ``` This annual calendar would cost $500+ on Upwork. I built it in one v0 conversation. • 3 view modes (Year/Week/Day) • Continuous event bars • Photo backgrounds per day • Journal entries • Past-day striping • Mobile drawers Template is free 👇 [V0_TEMPLATE_URL] [SCREENSHOT_COLLAGE] ``` ### Engagement Tweet ``` Hot take: v0 isn't replacing developers. It's giving us superpowers. I just built a calendar that would've taken me 2 weeks... in 2 hours. Same quality. Same attention to detail. 10x faster. The future of dev is AI-augmented, not AI-replaced. ``` --- ## LinkedIn Posts ### Professional Launch Post ``` I just built a premium annual calendar application — and I want to share how. The tool? v0 by Vercel. As a v0 Ambassador, I've been exploring the boundaries of AI-assisted development. This project pushed those boundaries further than I expected. What started as "replicate this calendar" turned into a fully-featured application with: ✅ Three distinct view modes (Year, Week, Day) ✅ Multi-day events displayed as continuous spanning bars ✅ Per-day photo backgrounds and journal entries ✅ Smart past-day indicators with diagonal striping ✅ Mobile-first design with responsive drawers ✅ Right-click context menus for quick actions The entire development happened through natural conversation. I described what I wanted, shared reference images, and iterated with feedback like "make the weekends darker" or "the tooltip arrow should be white." v0 understood context, maintained state across a long conversation, and produced production-ready TypeScript code. Tech stack: • Next.js 15 with App Router • React 19 • Tailwind CSS v4 • shadcn/ui + Radix UI • Full TypeScript This isn't about replacing developers — it's about amplifying what we can build. Try the template: [V0_TEMPLATE_URL] Source code: [GITHUB_URL] #v0 #Vercel #NextJS #React #AI #WebDevelopment #FrontendDevelopment ``` ### Shorter LinkedIn Post ``` Built a premium annual calendar using only AI-assisted development. No design files. No component library shopping. Just natural language prompts. The result? A production-ready app with: → Year/Week/Day views → Spanning event bars → Photo backgrounds → Journal entries → Mobile-responsive UI Time spent: ~2 hours Traditional estimate: 2+ weeks This is the power of v0 by Vercel. Template available free: [V0_TEMPLATE_URL] #AI #WebDevelopment #Vercel #NextJS ``` --- ## v0 Template Description ### Short Description (for template card) ``` A beautiful annual calendar for 2026 with Year, Week, and Day views. Features continuous event bars, per-day photos and notes, past-day striping, and mobile-responsive design. Built with Next.js 15, React 19, and Tailwind CSS v4. ``` ### Full Description ``` # Annual Calendar 2026 A premium, pixel-perfect annual calendar application showcasing the full potential of modern web development. ## Features **Three View Modes** - **Year View**: 21-column grid displaying all 365 days with continuous event bars - **Week View**: Vertical layout with rotated month labels and detailed day cells - **Day View**: Hourly breakdown with all events for a single day **Smart Event Management** - Multi-day events displayed as continuous spanning colored bars - Click any day to create new events - Click events to edit with pre-filled values - Right-click context menu for quick delete/duplicate - 8 color options for event categorization **Rich Day Features** - Upload background photos for any day - Add journal entries and notes - Hover icons for quick actions **Visual Indicators** - Diagonal striping pattern for past days - Highlighted current day with teal background - Grayed weekend columns - Month badges on first day of each month **Mobile Responsive** - Drawer-based modals on mobile - Dialog-based modals on desktop - Touch-friendly interactions ## Tech Stack - Next.js 15 (App Router) - React 19 - TypeScript - Tailwind CSS v4 - shadcn/ui components - Radix UI primitives ## Getting Started Click "Use Template" to create your own copy and start customizing! ``` --- ## GitHub README ```markdown # 📅 Annual Calendar 2026 A premium, pixel-perfect annual calendar built with Next.js 15, React 19, and Tailwind CSS v4. ![Annual Calendar Preview](./public/preview.png) ## ✨ Features ### Three View Modes - **Year View** — 21-column grid showing all 365 days with continuous event bars - **Week View** — Vertical layout with rotated month labels - **Day View** — Hourly breakdown for detailed planning ### Event Management - 🎨 Multi-day events as continuous spanning bars - ✏️ Click to create, click to edit - 🖱️ Right-click context menu (edit, duplicate, delete) - 🎯 8 color options for categorization - 💬 Tooltips with event details on hover ### Rich Day Features - 📸 Upload background photos per day - 📝 Add journal entries and notes - ⚡ Quick action icons on hover ### Visual Polish - ⬜ Diagonal striping for past days - 🟢 Highlighted current day - 🔲 Grayed weekend columns - 🏷️ Month badges on first day of each month - 📱 Fully responsive (mobile drawers, desktop dialogs) ## 🛠️ Tech Stack | Technology | Version | |------------|---------| | Next.js | 15 | | React | 19 | | TypeScript | 5+ | | Tailwind CSS | 4 | | shadcn/ui | Latest | | Radix UI | Latest | ## 🚀 Getting Started ### Use the v0 Template (Recommended) [![Use v0 Template](https://img.shields.io/badge/Use%20Template-v0-black?style=for-the-badge&logo=vercel)](V0_TEMPLATE_URL) ### Clone and Run Locally ```bash # Clone the repository git clone [GITHUB_URL] # Navigate to the directory cd annual-calendar-2026 # Install dependencies npm install # Run the development server npm run dev ``` Open [http://localhost:3000](http://localhost:3000) to view the calendar. ## 📖 Usage ### Creating Events 1. Click any day cell to open the event creation modal 2. Fill in title, description, dates, and choose a color 3. Optionally upload an image 4. Click "Create Event" ### Editing Events - Click on any event bar to edit - Right-click for quick actions (edit, duplicate, delete) ### Adding Photos & Notes - Hover over any day cell - Click the photo icon (📷) to upload a background image - Click the note icon (📝) to add a journal entry ### Navigation - Use arrow buttons to navigate years - Click "Today" to jump to current date (with pulse animation) - Switch views using the Day/Week/Year toggle ## 🎨 Customization ### Colors Edit `lib/calendar-data.ts` to modify the event color palette: ```typescript export const eventColors = [ { name: "Orange", value: "#f97316", ... }, // Add your colors here ]; ``` ### Initial Events Modify the `initialEvents` array in `lib/calendar-data.ts` to customize default events. ## 📄 License MIT License — feel free to use this for personal or commercial projects. ## 🙏 Credits Built with [v0](https://v0.dev) by Vercel. Created by [YOUR_NAME] — v0 Ambassador --- ⭐ Star this repo if you found it useful! [![Twitter Follow](https://img.shields.io/twitter/follow/YOUR_TWITTER?style=social)](https://twitter.com/YOUR_TWITTER) ``` --- ## Vercel Community Forum Blog Post ### Title **Building a Premium Annual Calendar with v0: A Deep Dive** ### Overview/Introduction ```markdown # Building a Premium Annual Calendar with v0: A Deep Dive As a v0 Ambassador, I'm always looking for projects that push the boundaries of AI-assisted development. This time, I challenged myself to build something that would traditionally require significant design and development time: a premium annual calendar application. The result? A fully-featured calendar built entirely through conversation with v0. ## The Challenge I started with two reference images of annual calendars — one from a popular email app, another from a project management tool. My prompt was simple: > "Replicate this annual calendar for 2026, it will be valued in $500" What followed was a collaborative development session that produced a production-ready application. ## Key Features Built ### 1. Three View Modes The calendar supports Year, Week, and Day views, each optimized for different planning needs: - **Year View**: A 21×18 grid displaying all 365 days with continuous event bars spanning multiple cells - **Week View**: Vertical layout with rotated month labels, perfect for weekly planning - **Day View**: Hourly breakdown showing all events for a single day ### 2. Continuous Event Bars One of the most complex features was implementing events that span multiple days as continuous colored bars. This required: - Calculating event positions across grid cells - Rendering partial bars at row breaks - Stacking multiple overlapping events - Handling edge cases at month boundaries v0 handled all of this complexity through iterative prompts. ### 3. Rich Interactions The calendar includes: - Click-to-create event modals - Click-to-edit with pre-filled values - Right-click context menus - Hover icons for quick actions (photos, notes) - Touch-friendly mobile drawers ### 4. Visual Polish Small details that make the difference: - Diagonal stripe pattern for past days (with `background-attachment: fixed` for seamless alignment) - Highlighted current day with teal background - Grayed weekend columns - Month badges on the first day of each month - Smooth pulse animation when clicking "Today" ## The Development Process What made this project special was how natural the iteration felt. Instead of writing code, I provided feedback like: - "Make the weekends darker" - "The tooltip arrow should be white" - "Use this striped background for past days" - "Move the day label to the top right corner" v0 understood context, maintained state across a long conversation, and produced clean TypeScript code throughout. ## Tech Stack - **Next.js 15** with App Router - **React 19** with latest features - **Tailwind CSS v4** for styling - **shadcn/ui** for accessible components - **Radix UI** primitives under the hood ## Try It Yourself The template is available for free: - **Live Demo**: [TEMPLATE_DEMO_URL] - **v0 Template**: [V0_TEMPLATE_URL] - **Source Code**: [GITHUB_URL] ## Conclusion This project reinforced my belief that v0 isn't just a code generator — it's a collaborative development partner. The ability to iterate through natural language, share visual references, and receive production-ready code transforms how we build. Whether you're a seasoned developer looking to accelerate your workflow or someone exploring web development for the first time, v0 opens new possibilities. Happy building! --- *[YOUR_NAME] is a v0 Ambassador and web developer. Follow them on Twitter [@YOUR_TWITTER] for more v0 projects and tips.* ``` --- ## Product Hunt Launch ### Tagline ``` A premium annual calendar built entirely with AI ``` ### Description ``` Annual Calendar 2026 is a pixel-perfect calendar application featuring: 🗓️ Year, Week & Day views 📊 Continuous multi-day event bars 📸 Per-day photo backgrounds 📝 Journal entries and notes ✨ Past-day visual indicators 📱 Mobile-responsive design Built entirely through conversation with v0 by Vercel — no manual coding required. Free to use, fork, and customize. ``` ### First Comment (Maker) ``` Hey Product Hunt! 👋 I'm [YOUR_NAME], a v0 Ambassador, and I built this calendar to showcase what's possible with AI-assisted development. The entire application was created through natural conversation — describing features, sharing reference images, and iterating with feedback like "make the weekends darker" or "add diagonal stripes for past days." What would traditionally take 2+ weeks of design and development happened in about 2 hours. I'd love to hear your feedback and see what you build with the template! ``` --- ## Dev.to Article ### Title **I Built a $500 Calendar Template Using Only AI — Here's How** ### Tags `webdev`, `javascript`, `react`, `ai` ### Content Outline ```markdown # I Built a $500 Calendar Template Using Only AI — Here's How ## Introduction - Hook: What if you could build premium UI without writing code? - Context: v0 Ambassador project ## The Challenge - Reference images shown - Target: Production-quality annual calendar ## The Build Process - Initial prompt and response - Iteration examples with actual prompts - How v0 handles complex features (spanning events, etc.) ## Technical Deep Dive - Grid layout for year view - Event bar spanning algorithm - Background pattern alignment trick - Responsive design approach ## Key Learnings - Prompt engineering tips - When to be specific vs. general - How to share visual references effectively ## Results - Time comparison (AI vs. traditional) - Quality assessment - What could be improved ## Resources - Template link - Source code - v0 link ## Conclusion - The future of development - Call to action ``` --- ## YouTube/Video Script ### Title **I Built a Premium Calendar with AI in 2 Hours (v0 Tutorial)** ### Script Outline ``` [HOOK - 0:00] "This calendar would cost $500 on Upwork. I built it in one conversation with AI. Let me show you how." [INTRO - 0:15] - Quick demo of finished calendar - All three views - Key features highlight [THE CHALLENGE - 1:00] - Show reference images - Explain the goal - Why this is typically expensive/time-consuming [BUILDING WITH V0 - 2:00] - Screen recording of v0 conversation - Initial prompt - First result - Iteration process - "Make the weekends darker" - "Add diagonal stripes for past days" - "The tooltip should be white" [TECHNICAL HIGHLIGHTS - 6:00] - Spanning event bars - Background pattern alignment - Responsive design - Context menus [FINAL RESULT - 8:00] - Full walkthrough of features - Mobile responsive demo - Creating events - Adding photos [CALL TO ACTION - 10:00] - Template link in description - Subscribe for more v0 content - Comment what you'd build [OUTRO - 10:30] ``` --- ## Placeholder Links Reference Replace these placeholders when publishing: | Placeholder | Description | |-------------|-------------| | `[V0_TEMPLATE_URL]` | Link to the v0 template page | | `[TEMPLATE_DEMO_URL]` | Link to the deployed demo | | `[GITHUB_URL]` | Link to the GitHub repository | | `[YOUR_NAME]` | Your name | | `[YOUR_TWITTER]` | Your Twitter/X handle | | `[SCREENSHOT_YEAR_VIEW]` | Screenshot of year view | | `[SCREENSHOT_COLLAGE]` | Collage of multiple views | --- ## Content Calendar Suggestion | Day | Platform | Content | |-----|----------|---------| | Day 1 | X (Twitter) | Launch thread | | Day 1 | LinkedIn | Professional launch post | | Day 2 | v0 | Publish template | | Day 2 | GitHub | Publish repository | | Day 3 | Vercel Forum | Blog post | | Day 4 | Dev.to | Technical article | | Day 5 | X (Twitter) | Engagement tweet | | Day 7 | Product Hunt | Launch | | Day 14 | YouTube | Tutorial video | --- *Last updated: January 2026* [V0_FILE]typescriptreact:file="app/api/parse-events/route.ts" isMerged="true" import { generateObject } from "ai" import { z } from "zod" const eventsSchema = z.object({ events: z.array( z.object({ title: z.string().describe("Title of the event"), description: z.string().optional().describe("Optional description"), startDate: z.string().describe("Start date in YYYY-MM-DD format"), endDate: z.string().describe("End date in YYYY-MM-DD format"), tag: z .enum(["travel", "holiday", "family", "work", "school", "birthday", "reminder", "important"]) .describe("Category tag for the event"), }), ), }) export async function POST(req: Request) { const { prompt, year } = await req.json() const { object } = await generateObject({ model: "openai/gpt-4o-mini", schema: eventsSchema, prompt: `You are a calendar assistant. Parse the following natural language input and extract calendar events. The current year context is ${year}. If no year is specified, use ${year}. Convert relative dates like "next week", "tomorrow", "this friday" to actual dates. Infer the most appropriate category tag based on the event content. User input: "${prompt}" Extract all events mentioned, even if there are multiple. Be smart about date ranges vs single day events.`, maxOutputTokens: 1000, }) return Response.json(object) } [V0_FILE]typescriptreact:file="components/dev-mode-overlay.tsx" isMerged="true" "use client" import { Github } from "lucide-react" import { Button } from "@/components/ui/button" interface DevModeOverlayProps { isActive: boolean } export function DevModeOverlay({ isActive }: DevModeOverlayProps) { if (!isActive) return null return (

Your Year in Code

Connect your GitHub account to visualize your coding activity throughout the year. See your commits, contributions, and coding patterns displayed on your calendar.

We only read your public contribution data. No code access required.

) } [V0_FILE]typescriptreact:file="components/event-tooltip.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import type { CalendarEvent, EventTag } from "@/lib/calendar-data" import { cn } from "@/lib/utils" const TAG_COLORS: Record = { orange: { bg: "bg-orange-100", text: "text-orange-700" }, teal: { bg: "bg-teal-100", text: "text-teal-700" }, purple: { bg: "bg-purple-100", text: "text-purple-700" }, green: { bg: "bg-emerald-100", text: "text-emerald-700" }, pink: { bg: "bg-pink-100", text: "text-pink-700" }, blue: { bg: "bg-blue-100", text: "text-blue-700" }, yellow: { bg: "bg-amber-100", text: "text-amber-700" }, red: { bg: "bg-red-100", text: "text-red-700" }, } interface EventTooltipProps { event: CalendarEvent tags: EventTag[] children: React.ReactNode } export function EventTooltip({ event, tags, children }: EventTooltipProps) { const startDate = new Date(event.startDate).toLocaleDateString("en-US", { month: "short", day: "numeric", }) const endDate = new Date(event.endDate).toLocaleDateString("en-US", { month: "short", day: "numeric", }) const isSingleDay = startDate === endDate const tag = tags.find((t) => t.id === event.tag) const tagColors = tag ? TAG_COLORS[tag.color] || TAG_COLORS.blue : null return ( {children}

{event.title}

{isSingleDay ? startDate : `${startDate} - ${endDate}`}

{tag && ( {tag.name} )}

{event.description &&

{event.description}

} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import { Moon, Sun, Monitor } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( setTheme("light")} className="gap-2"> Light {theme === "light" && ✓} setTheme("dark")} className="gap-2"> Dark {theme === "dark" && ✓} setTheme("system")} className="gap-2"> System {theme === "system" && ✓} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ClerkProvider } from "@clerk/nextjs" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "2026 Annual Calendar", description: "A beautiful year-at-a-glance calendar for 2026", } export const viewport: Viewport = { themeColor: "#14b8a6", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="lib/sanity.ts" isEdit="true" isMerged="true" import { createClient } from "@sanity/client" export const sanityClient = createClient({ projectId: "jtwugudr", dataset: "production", apiVersion: "2024-01-01", useCdn: false, token: process.env.SANITY_API_TOKEN, }) export const sanityReadClient = createClient({ projectId: "jtwugudr", dataset: "production", apiVersion: "2024-01-01", useCdn: false, // Changed from true to false for real-time data }) [V0_FILE]typescript:file="app/api/tags/route.ts" isMerged="true" import { sanityReadClient } from "@/lib/sanity" import { NextResponse } from "next/server" export async function GET() { try { const tags = await sanityReadClient.fetch(` *[_type == "tag"] { "id": slug.current, name, color } | order(name asc) `) // Map hex colors to our color system const colorMap: Record = { "#10b981": "green", "#f97316": "orange", "#14b8a6": "teal", "#3b82f6": "blue", "#a855f7": "purple", "#ec4899": "pink", "#eab308": "yellow", "#ef4444": "red", } const formattedTags = tags.map((tag: any) => ({ id: tag.id, name: tag.name, color: colorMap[tag.color] || "blue", })) return NextResponse.json(formattedTags) } catch (error) { console.error("Error fetching tags:", error) return NextResponse.json({ error: "Failed to fetch tags" }, { status: 500 }) } } [V0_FILE]typescript:file="lib/sample-events.ts" isMerged="true" import type { CalendarEvent } from "./calendar-data" function localDate(year: number, month: number, day: number): Date { return new Date(year, month, day, 12, 0, 0, 0) } // Sample events for 2026 with descriptions - kept for reference/demo purposes export const sampleEvents: CalendarEvent[] = [ // January { id: "1", title: "New Year's Day", description: "Ring in 2026 with family and friends. Traditional midnight countdown followed by brunch.", startDate: localDate(2026, 0, 1), endDate: localDate(2026, 0, 1), tag: "holiday", }, { id: "2", title: "Family in DC", description: "Visiting the Smithsonian museums, National Mall, and catching up with cousins in Georgetown.", startDate: localDate(2026, 0, 4), endDate: localDate(2026, 0, 8), tag: "travel", }, { id: "3", title: "Martin Luther King Jr. Day", description: "Federal holiday honoring the civil rights leader. Community service event at local food bank.", startDate: localDate(2026, 0, 19), endDate: localDate(2026, 0, 19), tag: "holiday", }, { id: "4", title: "Lean in CA", description: "Leadership conference in San Francisco. Keynote by Sheryl Sandberg, networking events planned.", startDate: localDate(2026, 0, 16), endDate: localDate(2026, 0, 18), tag: "work", }, // February { id: "5", title: "Galentine's", description: "Girls' night out! Dinner at the new Italian place downtown, followed by a spa evening.", startDate: localDate(2026, 1, 1), endDate: localDate(2026, 1, 1), tag: "family", }, { id: "6", title: "Valentine's Day", description: "Reservations at Eleven Madison Park. Anniversary celebration - 5 years!", startDate: localDate(2026, 1, 14), endDate: localDate(2026, 1, 14), tag: "important", }, { id: "7", title: "Presidents' Day", description: "Federal holiday. Planning a day trip to the mountains if weather permits.", startDate: localDate(2026, 1, 16), endDate: localDate(2026, 1, 16), tag: "holiday", }, { id: "8", title: "School Closed - Midwinter Recess", description: "Kids are off school for the week. Planning activities: museum visit, ice skating, movie marathon.", startDate: localDate(2026, 1, 16), endDate: localDate(2026, 1, 20), tag: "school", }, // More events can be added here for demo purposes ] [V0_FILE]typescript:file="lib/calendar-data.ts" isEdit="true" isMerged="true" export interface EventTag { id: string name: string color: string } export interface CalendarEvent { id: string title: string description?: string startDate: Date endDate: Date tag: string image?: string } export interface DayNote { id: string date: Date content: string } export interface DayImage { date: string imageUrl: string } export const defaultTags: EventTag[] = [ { id: "travel", name: "Travel", color: "teal" }, { id: "holiday", name: "Holiday", color: "orange" }, { id: "family", name: "Family", color: "green" }, { id: "work", name: "Work", color: "blue" }, { id: "school", name: "School", color: "purple" }, { id: "birthday", name: "Birthday", color: "pink" }, { id: "reminder", name: "Reminder", color: "yellow" }, { id: "important", name: "Important", color: "red" }, ] export function parseDateString(dateStr: string): Date { const [year, month, day] = dateStr.split("-").map(Number) return new Date(year, month - 1, day, 12, 0, 0, 0) } [V0_FILE]typescriptreact:file="components/event-context-menu.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import type { CalendarEvent, EventTag } from "@/lib/calendar-data" import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/ui/context-menu" import { Pencil, Trash2, Copy, Tag, CalendarPlus, CalendarMinus } from "lucide-react" interface EventContextMenuProps { event: CalendarEvent tags: EventTag[] children: React.ReactNode onEdit: (event: CalendarEvent) => void onDelete: (eventId: string) => void onDuplicate?: (event: CalendarEvent) => void onChangeTag?: (event: CalendarEvent, newTagId: string) => void onExtendDay?: (event: CalendarEvent) => void onShortenDay?: (event: CalendarEvent) => void } const TAG_COLORS: Record = { orange: "bg-orange-500", teal: "bg-teal-500", purple: "bg-purple-500", green: "bg-emerald-500", pink: "bg-pink-500", blue: "bg-blue-500", yellow: "bg-amber-400", red: "bg-red-500", } export function EventContextMenu({ event, tags, children, onEdit, onDelete, onDuplicate, onChangeTag, onExtendDay, onShortenDay, }: EventContextMenuProps) { const eventDuration = Math.ceil((event.endDate.getTime() - event.startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1 const safeTags = tags || [] return ( {children} onEdit(event)} className="gap-2"> Edit Event {onDuplicate && ( onDuplicate(event)} className="gap-2"> Duplicate )} {onChangeTag && safeTags.length > 0 && ( Change Tag {safeTags.map((tag) => ( onChangeTag(event, tag.id)} className="gap-2" disabled={tag.id === event.tag} >

{tag.name} {tag.id === event.tag && Current} ))} )} {(onExtendDay || onShortenDay) && ( <> {onExtendDay && ( onExtendDay(event)} className="gap-2"> Extend +1 Day )} {onShortenDay && eventDuration > 1 && ( onShortenDay(event)} className="gap-2"> Shorten -1 Day )} )} onDelete(event.id)} className="gap-2 text-destructive focus:text-destructive focus:bg-destructive/10" > Delete Event ) } [V0_FILE]typescript:file="app/api/events/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { sanityReadClient } from "@/lib/sanity" import { NextResponse } from "next/server" const SANITY_PROJECT_ID = "jtwugudr" const SANITY_DATASET = "production" const SANITY_API_VERSION = "2024-01-01" async function sanityMutate(mutations: any[]) { const token = process.env.SANITY_API_TOKEN if (!token) { throw new Error("SANITY_API_TOKEN is not configured") } const url = `https://${SANITY_PROJECT_ID}.api.sanity.io/v${SANITY_API_VERSION}/data/mutate/${SANITY_DATASET}` const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ mutations }), }) const result = await response.json() if (!response.ok) { throw new Error(result.error?.description || result.message || "Sanity mutation failed") } return result } // GET all events export async function GET() { try { const events = await sanityReadClient.fetch(` *[_type == "calendarEvent"] { _id, title, description, startDate, endDate, "tag": tag->slug.current } | order(startDate asc) `) const formattedEvents = events.map((event: any) => ({ id: event._id, title: event.title, description: event.description || "", startDate: event.startDate, endDate: event.endDate, tag: event.tag || "reminder", })) return NextResponse.json(formattedEvents) } catch (error) { console.error("Error fetching events:", error) return NextResponse.json({ error: "Failed to fetch events" }, { status: 500 }) } } // POST create new event export async function POST(request: Request) { try { const body = await request.json() const { title, description, startDate, endDate, tag } = body if (!title || !startDate || !endDate) { return NextResponse.json({ error: "Missing required fields: title, startDate, endDate" }, { status: 400 }) } const newId = `calendarEvent-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` const eventDoc: Record = { _id: newId, _type: "calendarEvent", title, description: description || "", startDate, endDate, } // Look up tag reference if provided if (tag) { try { const tagDoc = await sanityReadClient.fetch(`*[_type == "tag" && slug.current == $tag][0]`, { tag }) if (tagDoc?._id) { eventDoc.tag = { _type: "reference", _ref: tagDoc._id } } } catch { // Tag lookup failed, continue without tag } } await sanityMutate([{ create: eventDoc }]) return NextResponse.json({ id: newId, title, description: description || "", startDate, endDate, tag: tag || "reminder", }) } catch (error: any) { console.error("Error creating event:", error.message) return NextResponse.json({ error: error.message || "Failed to create event" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ai-dock.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "motion/react" import { Trash2, Download, Sparkles } from "lucide-react" import { cn } from "@/lib/utils" import type { EventTag } from "@/lib/calendar-data" interface ParsedEvent { title: string description?: string startDate: string endDate: string tag: string } interface AIDockProps { tags: EventTag[] onAddEvents: (events: { title: string; description?: string; startDate: Date; endDate: Date; tag: string }[]) => void onClearAll?: () => void onLoadSampleData?: () => void } export function AIDock({ tags, onAddEvents, onClearAll, onLoadSampleData }: AIDockProps) { const [isExpanded, setIsExpanded] = useState(false) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const textareaRef = useRef(null) const containerRef = useRef(null) useEffect(() => { function handleClickOutside(event: MouseEvent) { if (containerRef.current && !containerRef.current.contains(event.target as Node)) { if (!input.trim() && !isLoading) { setIsExpanded(false) } } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, [input, isLoading]) useEffect(() => { if (isExpanded && textareaRef.current) { textareaRef.current.focus() } }, [isExpanded]) useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = "auto" textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 120)}px` } }, [input]) const handleSubmit = async () => { if (!input.trim() || isLoading) return setIsLoading(true) try { const response = await fetch("/api/parse-events", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: input, year: 2026 }), }) if (!response.ok) throw new Error("Failed to parse events") const data = await response.json() if (data.events && data.events.length > 0) { const eventsWithDates = data.events.map((event: ParsedEvent) => ({ title: event.title, description: event.description, startDate: new Date(event.startDate + "T12:00:00"), endDate: new Date(event.endDate + "T12:00:00"), tag: event.tag, })) onAddEvents(eventsWithDates) setInput("") setIsExpanded(false) } } catch (error) { console.error("Error parsing events:", error) } finally { setIsLoading(false) } } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmit() } if (e.key === "Escape") { setIsExpanded(false) setInput("") } } const collapsedWidth = 320 const expandedWidth = 500 return (

{isExpanded ? ( setInput(e.target.value)} onKeyDown={handleKeyDown} placeholder="Add events with natural language... e.g. 'Add vacation from March 15-20'" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.05 }} className={cn( "w-full bg-transparent px-4 py-3 text-sm resize-none focus:outline-none", "placeholder:text-muted-foreground/60", isLoading && "opacity-60", )} style={{ minHeight: 44 }} disabled={isLoading} /> ) : ( setIsExpanded(true)} className="w-full text-left px-4 py-3 text-sm text-muted-foreground/60 hover:text-muted-foreground transition-colors flex items-center gap-2" whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.99 }} > Add events with AI... )} {isExpanded && (

Enter to add · Esc to cancel

{onClearAll && ( )} {onLoadSampleData && ( )}

)}

) } [V0_FILE]typescript:file="lib/github-data.ts" isEdit="true" isQuickEdit="true" isMerged="true" // GitHub contribution data types and enhanced sample data export interface DayContribution { date: string // YYYY-MM-DD commits: number prsOpened: number prsMerged: number prsClosed: number linesAdded: number linesDeleted: number level: 0 | 1 | 2 | 3 | 4 // Contribution intensity level repos: string[] // Repos contributed to that day } export interface GitHubRepo { name: string commits: number additions: number deletions: number language: string color: string } export interface GitHubYearStats { totalCommits: number totalPRsOpened: number totalPRsMerged: number totalLinesAdded: number totalLinesDeleted: number longestStreak: number currentStreak: number topRepos: GitHubRepo[] contributions: Map } export interface RepoWorkSession { repo: string startDate: string endDate: string totalCommits: number dailyCommits: Map // date -> commits for intensity gradient color: string } // Generate realistic GitHub contribution data for a year export function generateGitHubYearData(year: number): GitHubYearStats { const contributions = new Map() const startDate = new Date(year, 0, 1) const endDate = new Date(year, 11, 31) let totalCommits = 0 let totalPRsOpened = 0 let totalPRsMerged = 0 let totalLinesAdded = 0 let totalLinesDeleted = 0 let longestStreak = 0 let currentStreak = 0 let tempStreak = 0 const repoNames = [ "annual-calendar-2026", "sanity-cms-integration", "ai-event-parser", "nextjs-starter", "design-system", "api-gateway", "mobile-app", "docs-site", ] // Generate contribution data for each day for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { const dateStr = d.toISOString().split("T")[0] const dayOfWeek = d.getDay() const month = d.getMonth() const dayOfMonth = d.getDate() // Create realistic patterns let baseChance = dayOfWeek === 0 || dayOfWeek === 6 ? 0.35 : 0.75 // Vacation periods (lower activity) if ( (month === 6 && dayOfMonth >= 15 && dayOfMonth <= 30) || (month === 11 && dayOfMonth >= 20) || (month === 7 && dayOfMonth >= 1 && dayOfMonth <= 10) ) { baseChance = 0.15 } // Sprint periods (higher activity) if ( (month === 2 && dayOfMonth >= 1 && dayOfMonth <= 15) || (month === 8 && dayOfMonth >= 1 && dayOfMonth <= 20) || month === 10 || (month === 0 && dayOfMonth >= 5 && dayOfMonth <= 15) ) { baseChance = 0.92 } const hasActivity = Math.random() < baseChance let commits = 0 let prsOpened = 0 let prsMerged = 0 let prsClosed = 0 let linesAdded = 0 let linesDeleted = 0 let level: 0 | 1 | 2 | 3 | 4 = 0 const repos: string[] = [] if (hasActivity) { const rand = Math.random() if (rand < 0.35) { commits = Math.floor(Math.random() * 4) + 1 level = 1 } else if (rand < 0.65) { commits = Math.floor(Math.random() * 6) + 4 level = 2 } else if (rand < 0.88) { commits = Math.floor(Math.random() * 8) + 8 level = 3 } else { commits = Math.floor(Math.random() * 12) + 15 level = 4 } // PRs - less frequent than commits if (Math.random() < 0.25) { prsOpened = Math.floor(Math.random() * 2) + 1 } if (Math.random() < 0.2) { prsMerged = Math.floor(Math.random() * 2) + 1 } if (Math.random() < 0.1) { prsClosed = 1 } // Lines of code linesAdded = commits * Math.floor(Math.random() * 50 + 10) linesDeleted = Math.floor(linesAdded * (Math.random() * 0.4 + 0.1)) // Repos contributed to const numRepos = Math.min(Math.floor(Math.random() * 3) + 1, commits) const shuffled = [...repoNames].sort(() => 0.5 - Math.random()) repos.push(...shuffled.slice(0, numRepos)) totalCommits += commits totalPRsOpened += prsOpened totalPRsMerged += prsMerged totalLinesAdded += linesAdded totalLinesDeleted += linesDeleted tempStreak++ if (tempStreak > longestStreak) longestStreak = tempStreak } else { tempStreak = 0 } contributions.set(dateStr, { date: dateStr, commits, prsOpened, prsMerged, prsClosed, linesAdded, linesDeleted, level, repos, }) } // Calculate current streak const today = new Date() if (today.getFullYear() === year) { const entries = Array.from(contributions.entries()).sort((a, b) => b[0].localeCompare(a[0])) for (const [, data] of entries) { if (data.commits > 0) { currentStreak++ } else { break } } } // Top repos with stats const topRepos: GitHubRepo[] = [ { name: "annual-calendar-2026", commits: 234, additions: 15420, deletions: 3210, language: "TypeScript", color: "#3178c6", }, { name: "design-system", commits: 156, additions: 12800, deletions: 4200, language: "TypeScript", color: "#3178c6", }, { name: "api-gateway", commits: 98, additions: 6540, deletions: 1890, language: "Go", color: "#00ADD8" }, { name: "sanity-cms-integration", commits: 89, additions: 4520, deletions: 890, language: "TypeScript", color: "#3178c6", }, { name: "mobile-app", commits: 67, additions: 8900, deletions: 2340, language: "Swift", color: "#F05138" }, ] return { totalCommits, totalPRsOpened, totalPRsMerged, totalLinesAdded, totalLinesDeleted, longestStreak, currentStreak, topRepos, contributions, } } export function generateRepoSessions(contributions: Map): RepoWorkSession[] { const repoColors: Record = { "annual-calendar-2026": "#3b82f6", "sanity-cms-integration": "#f97316", "ai-event-parser": "#a855f7", "nextjs-starter": "#10b981", "design-system": "#ec4899", "api-gateway": "#14b8a6", "mobile-app": "#ef4444", "docs-site": "#eab308", } // Group consecutive days by repo const repoWork: Map }> = new Map() const sortedDates = Array.from(contributions.keys()).sort() sortedDates.forEach((dateStr) => { const contrib = contributions.get(dateStr)! contrib.repos.forEach((repo) => { if (!repoWork.has(repo)) { repoWork.set(repo, { dates: [], commits: new Map() }) } const rw = repoWork.get(repo)! rw.dates.push(dateStr) rw.commits.set(dateStr, contrib.commits) }) }) // Convert to sessions - group consecutive days or days within 3-day gaps const sessions: RepoWorkSession[] = [] repoWork.forEach((data, repo) => { if (data.dates.length === 0) return const sortedDates = data.dates.sort() let sessionStart = sortedDates[0] let sessionEnd = sortedDates[0] let sessionCommits = new Map() let totalCommits = 0 const addCommit = (date: string) => { const commits = data.commits.get(date) || 0 sessionCommits.set(date, commits) totalCommits += commits } addCommit(sessionStart) for (let i = 1; i < sortedDates.length; i++) { const currentDate = new Date(sortedDates[i]) const prevDate = new Date(sortedDates[i - 1]) const daysDiff = Math.floor((currentDate.getTime() - prevDate.getTime()) / (1000 * 60 * 60 * 24)) if (daysDiff <= 3) { // Continue session sessionEnd = sortedDates[i] addCommit(sortedDates[i]) } else { // Save current session if it's at least 2 days const startD = new Date(sessionStart) const endD = new Date(sessionEnd) const duration = Math.floor((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24)) + 1 if (duration >= 2 && totalCommits >= 3) { sessions.push({ repo, startDate: sessionStart, endDate: sessionEnd, totalCommits, dailyCommits: new Map(sessionCommits), color: repoColors[repo] || "#6b7280", }) } // Start new session sessionStart = sortedDates[i] sessionEnd = sortedDates[i] sessionCommits = new Map() totalCommits = 0 addCommit(sessionStart) } } // Don't forget the last session const startD = new Date(sessionStart) const endD = new Date(sessionEnd) const duration = Math.floor((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24)) + 1 if (duration >= 2 && totalCommits >= 3) { sessions.push({ repo, startDate: sessionStart, endDate: sessionEnd, totalCommits, dailyCommits: new Map(sessionCommits), color: repoColors[repo] || "#6b7280", }) } }) // Sort by start date return sessions.sort((a, b) => a.startDate.localeCompare(b.startDate)) } // Get contribution level color (GitHub green palette) export function getContributionBg(level: 0 | 1 | 2 | 3 | 4, isDark: boolean): string { if (isDark) { switch (level) { case 0: return "rgba(22, 27, 34, 0.6)" case 1: return "rgba(14, 68, 41, 0.8)" case 2: return "rgba(0, 109, 50, 0.85)" case 3: return "rgba(38, 166, 65, 0.9)" case 4: return "rgba(57, 211, 83, 0.95)" } } else { switch (level) { case 0: return "rgba(235, 237, 240, 0.5)" case 1: return "rgba(155, 233, 168, 0.7)" case 2: return "rgba(64, 196, 99, 0.75)" case 3: return "rgba(48, 161, 78, 0.8)" case 4: return "rgba(33, 110, 57, 0.85)" } } } [V0_FILE]typescriptreact:file="components/github-tooltip.tsx" isMerged="true" "use client" import type React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { GitCommit, GitPullRequest, GitMerge, Code2 } from "lucide-react" import type { DayContribution, RepoWorkSession } from "@/lib/github-data" interface GitHubDayTooltipProps { date: Date contribution: DayContribution | null children: React.ReactNode } export function GitHubDayTooltip({ date, contribution, children }: GitHubDayTooltipProps) { const hasActivity = contribution && contribution.commits > 0 return ( {children}

{date.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric", })}

{hasActivity ? (

{contribution.commits} commits

{(contribution.prsOpened > 0 || contribution.prsMerged > 0) && (

{contribution.prsOpened > 0 && (

{contribution.prsOpened} PR opened

)} {contribution.prsMerged > 0 && (

{contribution.prsMerged} merged

)}

+{contribution.linesAdded.toLocaleString()} lines -{contribution.linesDeleted.toLocaleString()} lines

{contribution.repos.length > 0 && (

{contribution.repos.slice(0, 3).join(", ")} {contribution.repos.length > 3 && ` +${contribution.repos.length - 3} more`}

)}

) : (

No contributions

)} ) } interface GitHubSessionTooltipProps { session: RepoWorkSession children: React.ReactNode } export function GitHubSessionTooltip({ session, children }: GitHubSessionTooltipProps) { const startDate = new Date(session.startDate + "T12:00:00") const endDate = new Date(session.endDate + "T12:00:00") const days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1 // Find peak day let peakCommits = 0 let peakDate = session.startDate session.dailyCommits.forEach((commits, date) => { if (commits > peakCommits) { peakCommits = commits peakDate = date } }) return ( {children}

{session.repo}

{startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} -{" "} {endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}

{session.totalCommits} commits over {days} days

Peak: {peakCommits} commits on{" "} {new Date(peakDate + "T12:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" })}

) } [V0_FILE]markdown:file="docs/integration-plan.md" isEdit="true" isMerged="true" # Calendar Integration Plan: Google Calendar & GitHub with Clerk Auth This document outlines a comprehensive plan for integrating the Annual Calendar 2026 app with Google Calendar and GitHub using Clerk for authentication and OAuth token management. --- ## Executive Summary Using **Clerk** as our authentication provider enables secure OAuth flows with Google and GitHub. Clerk stores and manages OAuth tokens on behalf of users, allowing our backend to access Google Calendar and GitHub APIs without handling tokens directly. All calendar and contribution data syncs to **Sanity** as the central content hub. --- ## Part 1: Clerk Authentication Setup ### 1.1 Why Clerk? - **Built-in OAuth Providers**: Google, GitHub, and 20+ providers out-of-the-box - **Secure Token Storage**: OAuth access/refresh tokens stored securely by Clerk - **Backend API Access**: Retrieve user tokens via Clerk Backend API for server-side API calls - **Session Management**: Handles session refresh, token rotation automatically - **Next.js Integration**: First-class support with `@clerk/nextjs` ### 1.2 Architecture Overview ``` ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │ │ │ │ │ User Browser │────►│ Clerk Auth │────►│ OAuth Provider │ │ │ │ (Frontend) │ │ (Google/GitHub)│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ ▼ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │ │ │ │ │ │ Sanity CMS │◄───►│ Next.js API │◄────│ Clerk Backend │ │ (Data Store) │ │ Routes │ │ API (Tokens) │ │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ ``` ### 1.3 Implementation Steps #### Step 1: Install Clerk ```bash npm install @clerk/nextjs ``` #### Step 2: Environment Variables ```env NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ ``` #### Step 3: Configure OAuth Providers in Clerk Dashboard 1. Go to Clerk Dashboard → User & Authentication → Social Connections 2. Enable **Google** with scopes: - `https://www.googleapis.com/auth/calendar.readonly` - `https://www.googleapis.com/auth/calendar.events` 3. Enable **GitHub** with scopes: - `read:user` - `repo` (for private repo contributions) - `read:org` (optional, for org contributions) #### Step 4: Wrap App with ClerkProvider ```typescript // app/layout.tsx import { ClerkProvider } from '@clerk/nextjs' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` #### Step 5: Protect Routes with Middleware ```typescript // middleware.ts import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server' const isProtectedRoute = createRouteMatcher(['/dashboard(.*)']) export default clerkMiddleware((auth, req) => { if (isProtectedRoute(req)) auth().protect() }) export const config = { matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'], } ``` --- ## Part 2: Google Calendar Integration ### 2.1 Getting OAuth Token from Clerk ```typescript // lib/google-calendar.ts import { auth, clerkClient } from '@clerk/nextjs/server' import { google } from 'googleapis' export async function getGoogleCalendarClient() { const { userId } = auth() if (!userId) throw new Error('Not authenticated') // Get OAuth token from Clerk const clerkResponse = await clerkClient.users.getUserOauthAccessToken( userId, 'oauth_google' ) const accessToken = clerkResponse.data[0]?.token if (!accessToken) throw new Error('Google not connected') // Create Google OAuth client const oauth2Client = new google.auth.OAuth2() oauth2Client.setCredentials({ access_token: accessToken }) return google.calendar({ version: 'v3', auth: oauth2Client }) } ``` ### 2.2 API Routes #### Fetch Google Calendar Events ```typescript // app/api/google/events/route.ts import { NextResponse } from 'next/server' import { getGoogleCalendarClient } from '@/lib/google-calendar' import { sanityClient } from '@/lib/sanity' export async function GET(req: Request) { try { const calendar = await getGoogleCalendarClient() const { searchParams } = new URL(req.url) const year = searchParams.get('year') || new Date().getFullYear().toString() const response = await calendar.events.list({ calendarId: 'primary', timeMin: `${year}-01-01T00:00:00Z`, timeMax: `${year}-12-31T23:59:59Z`, maxResults: 2500, singleEvents: true, orderBy: 'startTime', }) const events = response.data.items?.map(event => ({ id: event.id, title: event.summary || 'Untitled', description: event.description, startDate: event.start?.date || event.start?.dateTime?.split('T')[0], endDate: event.end?.date || event.end?.dateTime?.split('T')[0], source: 'google', googleEventId: event.id, })) || [] return NextResponse.json({ events }) } catch (error) { console.error('Error fetching Google Calendar:', error) return NextResponse.json({ error: 'Failed to fetch events' }, { status: 500 }) } } ``` #### Sync to Sanity (Overwrite Pattern) ```typescript // app/api/google/sync/route.ts import { NextResponse } from 'next/server' import { auth } from '@clerk/nextjs/server' import { getGoogleCalendarClient } from '@/lib/google-calendar' import { sanityClient } from '@/lib/sanity' export async function POST(req: Request) { try { const { userId } = auth() if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) const calendar = await getGoogleCalendarClient() const year = new Date().getFullYear() // Fetch all Google Calendar events const response = await calendar.events.list({ calendarId: 'primary', timeMin: `${year}-01-01T00:00:00Z`, timeMax: `${year}-12-31T23:59:59Z`, maxResults: 2500, singleEvents: true, }) const googleEvents = response.data.items || [] // Delete existing Google-sourced events for this user const existingEvents = await sanityClient.fetch( `*[_type == "calendarEvent" && source == "google" && userId == $userId]._id`, { userId } ) if (existingEvents.length > 0) { const transaction = sanityClient.transaction() existingEvents.forEach((id: string) => transaction.delete(id)) await transaction.commit() } // Create new events from Google Calendar const transaction = sanityClient.transaction() for (const event of googleEvents) { if (!event.start?.date && !event.start?.dateTime) continue transaction.create({ _type: 'calendarEvent', title: event.summary || 'Untitled', description: event.description || '', startDate: event.start.date || event.start.dateTime?.split('T')[0], endDate: event.end?.date || event.end?.dateTime?.split('T')[0] || event.start.date, source: 'google', googleEventId: event.id, userId, }) } await transaction.commit() return NextResponse.json({ success: true, synced: googleEvents.length }) } catch (error) { console.error('Error syncing Google Calendar:', error) return NextResponse.json({ error: 'Sync failed' }, { status: 500 }) } } ``` ### 2.3 Sanity Schema Extension ```typescript // Add to calendarEvent schema { name: 'source', type: 'string', title: 'Source', options: { list: [ { title: 'Manual', value: 'manual' }, { title: 'Google Calendar', value: 'google' }, { title: 'GitHub', value: 'github' }, ], }, }, { name: 'googleEventId', type: 'string', title: 'Google Event ID', hidden: true, }, { name: 'userId', type: 'string', title: 'User ID', hidden: true, }, ``` --- ## Part 3: GitHub Integration ### 3.1 Getting OAuth Token from Clerk ```typescript // lib/github.ts import { auth, clerkClient } from '@clerk/nextjs/server' import { Octokit } from '@octokit/rest' export async function getGitHubClient() { const { userId } = auth() if (!userId) throw new Error('Not authenticated') // Get OAuth token from Clerk const clerkResponse = await clerkClient.users.getUserOauthAccessToken( userId, 'oauth_github' ) const accessToken = clerkResponse.data[0]?.token if (!accessToken) throw new Error('GitHub not connected') return new Octokit({ auth: accessToken }) } ``` ### 3.2 Fetch Real Contribution Data ```typescript // app/api/github/contributions/route.ts import { NextResponse } from 'next/server' import { getGitHubClient } from '@/lib/github' export async function GET(req: Request) { try { const octokit = await getGitHubClient() const { searchParams } = new URL(req.url) const year = searchParams.get('year') || new Date().getFullYear().toString() // Get authenticated user const { data: user } = await octokit.users.getAuthenticated() // Fetch contribution data via GraphQL const query = ` query($username: String!, $from: DateTime!, $to: DateTime!) { user(login: $username) { contributionsCollection(from: $from, to: $to) { totalCommitContributions totalPullRequestContributions totalPullRequestReviewContributions contributionCalendar { totalContributions weeks { contributionDays { date contributionCount contributionLevel } } } commitContributionsByRepository(maxRepositories: 10) { repository { name primaryLanguage { name color } } contributions { totalCount } } } } } ` const response = await octokit.graphql(query, { username: user.login, from: `${year}-01-01T00:00:00Z`, to: `${year}-12-31T23:59:59Z`, }) return NextResponse.json(response) } catch (error) { console.error('Error fetching GitHub contributions:', error) return NextResponse.json({ error: 'Failed to fetch contributions' }, { status: 500 }) } } ``` ### 3.3 Sync GitHub Data to Sanity ```typescript // app/api/github/sync/route.ts import { NextResponse } from 'next/server' import { auth } from '@clerk/nextjs/server' import { getGitHubClient } from '@/lib/github' import { sanityClient } from '@/lib/sanity' export async function POST(req: Request) { try { const { userId } = auth() if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) const octokit = await getGitHubClient() const { data: user } = await octokit.users.getAuthenticated() const year = new Date().getFullYear() // Fetch contribution data const query = ` query($username: String!, $from: DateTime!, $to: DateTime!) { user(login: $username) { contributionsCollection(from: $from, to: $to) { contributionCalendar { weeks { contributionDays { date contributionCount contributionLevel } } } } } } ` const response: any = await octokit.graphql(query, { username: user.login, from: `${year}-01-01T00:00:00Z`, to: `${year}-12-31T23:59:59Z`, }) // Delete existing GitHub data for this user/year const existingData = await sanityClient.fetch( `*[_type == "githubActivity" && userId == $userId && year == $year]._id`, { userId, year } ) if (existingData.length > 0) { const transaction = sanityClient.transaction() existingData.forEach((id: string) => transaction.delete(id)) await transaction.commit() } // Store contribution data in Sanity const weeks = response.user.contributionsCollection.contributionCalendar.weeks const contributions: any[] = [] weeks.forEach((week: any) => { week.contributionDays.forEach((day: any) => { if (day.contributionCount > 0) { contributions.push({ _type: 'githubActivity', date: day.date, commits: day.contributionCount, level: ['NONE', 'FIRST_QUARTILE', 'SECOND_QUARTILE', 'THIRD_QUARTILE', 'FOURTH_QUARTILE'].indexOf(day.contributionLevel), userId, year, }) } }) }) // Batch create const transaction = sanityClient.transaction() contributions.forEach(c => transaction.create(c)) await transaction.commit() return NextResponse.json({ success: true, synced: contributions.length }) } catch (error) { console.error('Error syncing GitHub data:', error) return NextResponse.json({ error: 'Sync failed' }, { status: 500 }) } } ``` ### 3.4 Sanity Schema for GitHub Activity ```typescript // schemas/githubActivity.ts export default { name: 'githubActivity', type: 'document', title: 'GitHub Activity', fields: [ { name: 'date', type: 'date', title: 'Date' }, { name: 'commits', type: 'number', title: 'Commits' }, { name: 'prsOpened', type: 'number', title: 'PRs Opened' }, { name: 'prsMerged', type: 'number', title: 'PRs Merged' }, { name: 'linesAdded', type: 'number', title: 'Lines Added' }, { name: 'linesDeleted', type: 'number', title: 'Lines Deleted' }, { name: 'level', type: 'number', title: 'Contribution Level' }, { name: 'repos', type: 'array', of: [{ type: 'string' }], title: 'Repositories' }, { name: 'userId', type: 'string', title: 'User ID' }, { name: 'year', type: 'number', title: 'Year' }, ], } ``` --- ## Part 4: UI Components ### 4.1 Connection Status Component ```typescript // components/integration-status.tsx 'use client' import { useUser } from '@clerk/nextjs' import { Button } from '@/components/ui/button' export function IntegrationStatus() { const { user } = useUser() const googleConnected = user?.externalAccounts.some( acc => acc.provider === 'oauth_google' ) const githubConnected = user?.externalAccounts.some( acc => acc.provider === 'oauth_github' ) return (

Google Calendar

{googleConnected ? 'Connected' : 'Not connected'}

{googleConnected ? ( ) : ( )}

GitHub

{githubConnected ? 'Connected' : 'Not connected'}

{githubConnected ? ( ) : ( )}

) } ``` --- ## Part 5: Hackathon Strategy ### 5.1 Judging Criteria Alignment | Category | How We Excel | |----------|--------------| | **Best End-User Experience** | Seamless OAuth with Clerk, one-click sync, beautiful UI with drag-drop, AI event creation, GitHub contribution visualization | | **Most Creative Structured Content** | Events with tag relationships, GitHub activity as documents, multi-source data (Google + GitHub + Manual) unified in Sanity | | **Best Overall** | Full-featured calendar with Clerk auth, multi-platform integration, demonstrating Sanity as the single source of truth | ### 5.2 Demo Flow 1. **Sign in with Clerk** (Google or GitHub OAuth) 2. **Show Calendar view** with existing events 3. **Connect Google Calendar** → One-click sync → Events appear 4. **Switch to GitHub tab** → Real contribution data from user's account 5. **AI Dock** → "Add vacation next week" → Creates event in Sanity 6. **Show Sanity Studio** → All data unified with proper relationships ### 5.3 Technical Differentiators 1. **Clerk OAuth**: Secure token management, no custom OAuth implementation 2. **Sanity as Hub**: All external data synced and stored in Sanity 3. **Overwrite Sync Pattern**: Each sync replaces old data, ensuring consistency 4. **Real GitHub Data**: Not dummy data - actual user contributions 5. **AI-Powered**: Natural language event creation --- ## Implementation Checklist - [ ] Install and configure Clerk (`@clerk/nextjs`) - [ ] Set up OAuth providers in Clerk Dashboard (Google + GitHub) - [ ] Create middleware for protected routes - [ ] Implement Google Calendar token retrieval - [ ] Implement GitHub token retrieval - [ ] Create sync API routes with overwrite pattern - [ ] Extend Sanity schemas for source tracking - [ ] Build integration status UI component - [ ] Add sync buttons to calendar header - [ ] Test full OAuth flow end-to-end - [ ] Record demo video --- ## Security Notes - OAuth tokens are stored securely by Clerk, never in our database - All API routes use `auth()` to verify user identity - Sanity data is scoped by `userId` to prevent cross-user access - Consider adding Row Level Security for additional protection [V0_FILE]typescript:file="app/api/events/[id]/route.ts" isEdit="true" isMerged="true" import { sanityReadClient } from "@/lib/sanity" import { NextResponse } from "next/server" const SANITY_PROJECT_ID = "jtwugudr" const SANITY_DATASET = "production" const SANITY_API_VERSION = "2024-01-01" async function sanityMutate(mutations: any[]) { const token = process.env.SANITY_API_TOKEN if (!token) { throw new Error("SANITY_API_TOKEN is not configured") } const url = `https://${SANITY_PROJECT_ID}.api.sanity.io/v${SANITY_API_VERSION}/data/mutate/${SANITY_DATASET}` const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, body: JSON.stringify({ mutations }), }) const result = await response.json() if (!response.ok) { throw new Error(result.error?.description || result.message || "Sanity mutation failed") } return result } // PATCH update event export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params const body = await request.json() const { title, description, startDate, endDate, tag } = body const patchSet: Record = { title, description: description || "", startDate, endDate, } // Look up tag reference if provided if (tag) { try { const tagDoc = await sanityReadClient.fetch(`*[_type == "tag" && slug.current == $tag][0]`, { tag }) if (tagDoc?._id) { patchSet.tag = { _type: "reference", _ref: tagDoc._id } } } catch { // Tag lookup failed, continue without updating tag } } await sanityMutate([ { patch: { id, set: patchSet, }, }, ]) return NextResponse.json({ id, title, description: description || "", startDate, endDate, tag: tag || "reminder", }) } catch (error: any) { console.error("Error updating event:", error.message) return NextResponse.json({ error: error.message || "Failed to update event" }, { status: 500 }) } } // DELETE event export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) { try { const { id } = await params await sanityMutate([{ delete: { id } }]) return NextResponse.json({ success: true }) } catch (error: any) { console.error("Error deleting event:", error.message) return NextResponse.json({ error: error.message || "Failed to delete event" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/upload/route.ts" isEdit="true" isMerged="true" import { put } from "@vercel/blob" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const formData = await request.formData() const file = formData.get("file") as File const date = formData.get("date") as string if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } // Create a unique filename with date prefix for organization const filename = date ? `calendar/${date}/${Date.now()}-${file.name}` : `calendar/${Date.now()}-${file.name}` // Upload to Vercel Blob const blob = await put(filename, file, { access: "public", }) return NextResponse.json({ url: blob.url, filename: file.name, size: file.size, type: file.type, }) } catch (error) { console.error("Upload error:", error) return NextResponse.json({ error: "Upload failed" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/event-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { X, Trash2, Calendar, Tag, FileText, Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Sheet, SheetContent, SheetDescription } from "@/components/ui/sheet" import type { CalendarEvent, EventTag } from "@/lib/calendar-data" import { parseDateString } from "@/lib/calendar-data" import { cn } from "@/lib/utils" interface EventModalProps { isOpen: boolean onClose: () => void onSave: (eventData: Omit & { id?: string }) => void onDelete?: () => void event: CalendarEvent | null defaultDate: Date tags: EventTag[] } const TAG_COLORS: Record = { orange: { bg: "bg-orange-500", ring: "ring-orange-500", light: "bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800", }, teal: { bg: "bg-teal-500", ring: "ring-teal-500", light: "bg-teal-50 text-teal-700 border-teal-200 dark:bg-teal-950 dark:text-teal-300 dark:border-teal-800", }, purple: { bg: "bg-purple-500", ring: "ring-purple-500", light: "bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800", }, green: { bg: "bg-emerald-500", ring: "ring-emerald-500", light: "bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950 dark:text-emerald-300 dark:border-emerald-800", }, pink: { bg: "bg-pink-500", ring: "ring-pink-500", light: "bg-pink-50 text-pink-700 border-pink-200 dark:bg-pink-950 dark:text-pink-300 dark:border-pink-800", }, blue: { bg: "bg-blue-500", ring: "ring-blue-500", light: "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800", }, yellow: { bg: "bg-amber-400", ring: "ring-amber-400", light: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800", }, red: { bg: "bg-red-500", ring: "ring-red-500", light: "bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800", }, } function formatDateToInput(date: Date): string { const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, "0") const day = String(date.getDate()).padStart(2, "0") return `${year}-${month}-${day}` } function formatDateDisplay(dateStr: string): string { if (!dateStr) return "" const date = parseDateString(dateStr) return date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }) } export function EventModal({ isOpen, onClose, onSave, onDelete, event, defaultDate, tags }: EventModalProps) { const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [startDate, setStartDate] = useState("") const [endDate, setEndDate] = useState("") const [selectedTag, setSelectedTag] = useState(tags[0]?.id || "travel") const [isSaving, setIsSaving] = useState(false) const [isDeleting, setIsDeleting] = useState(false) const titleInputRef = useRef(null) useEffect(() => { if (isOpen) { if (event) { // Editing existing event setTitle(event.title) setDescription(event.description || "") setStartDate(formatDateToInput(new Date(event.startDate))) setEndDate(formatDateToInput(new Date(event.endDate))) setSelectedTag(event.tag) } else { // Creating new event setTitle("") setDescription("") setSelectedTag(tags[0]?.id || "travel") const dateStr = formatDateToInput(defaultDate) setStartDate(dateStr) setEndDate(dateStr) } setTimeout(() => titleInputRef.current?.focus(), 300) } }, [isOpen, defaultDate, event, tags]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!title || !startDate || !endDate || isSaving) return setIsSaving(true) try { await onSave({ id: event?.id, title, description, startDate: parseDateString(startDate), endDate: parseDateString(endDate), tag: selectedTag, }) } finally { setIsSaving(false) } } const handleDelete = async () => { if (onDelete && !isDeleting) { setIsDeleting(true) try { await onDelete() } finally { setIsDeleting(false) } } } const selectedTagData = tags.find((t) => t.id === selectedTag) const selectedTagColors = TAG_COLORS[selectedTagData?.color || "blue"] const isEditing = !!event return ( !open && onClose()}> {isEditing ? "Edit event details" : "Create a new event"} {/* Header with colored accent */}

{isEditing ? "Edit Event" : "New Event"}

{title || (isEditing ? "Untitled Event" : "Create an event")}

{(startDate || endDate) && (

{formatDateDisplay(startDate)} {startDate !== endDate && ` → ${formatDateDisplay(endDate)}`}

)}

{/* Form Content */}

{/* Title */}

Title setTitle(e.target.value)} placeholder="What's happening?" className="h-9 text-sm border-0 bg-muted/50 focus-visible:bg-muted focus-visible:ring-1" />

{/* Description */}

Description

setDescription(e.target.value)}
                placeholder="Add details, notes, or links..."
                className="min-h-[80px] text-sm resize-none border-0 bg-muted/50 focus-visible:bg-muted focus-visible:ring-1"
              />
            </div>

{/* Dates */}
            <div className="space-y-1.5">
              <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
                <Calendar className="h-3 w-3" />
                When
              </label>
              <div className="flex gap-2">
                <div className="flex-1">
                  <Input
                    type="date"
                    value={startDate}
                    onChange={(e) => setStartDate(e.target.value)}
                    className="h-9 text-sm border-0 bg-muted/50 focus-visible:bg-muted focus-visible:ring-1"
                  />
                </div>
                <span className="flex items-center text-muted-foreground text-xs">to</span>
                <div className="flex-1">
                  <Input
                    type="date"
                    value={endDate}
                    onChange={(e) => setEndDate(e.target.value)}
                    className="h-9 text-sm border-0 bg-muted/50 focus-visible:bg-muted focus-visible:ring-1"
                  />
                </div>
              </div>
            </div>

{/* Tags */}
            <div className="space-y-2">
              <label className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
                <Tag className="h-3 w-3" />
                Category
              </label>
              <div className="flex gap-1.5 flex-wrap">
                {tags.map((tag) => {
                  const colors = TAG_COLORS[tag.color] || TAG_COLORS.blue
                  const isSelected = selectedTag === tag.id
                  return (
                    <button
                      key={tag.id}
                      type="button"
                      onClick={() => setSelectedTag(tag.id)}
                      className={cn(
                        "flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-all border",
                        isSelected
                          ? cn(colors.light, "border-current")
                          : "bg-muted/30 border-transparent text-muted-foreground hover:bg-muted/50",
                      )}
                    >
                      <div className={cn("w-2 h-2 rounded-full", colors.bg)} />
                      {tag.name}
                    </button>
                  )
                })}
              </div>
            </div>
          </div>
        </form>

{/* Footer Actions */}
        <div className="border-t p-3 bg-muted/30">
          <div className="flex items-center gap-2">
            {isEditing && onDelete && (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={handleDelete}
                disabled={isDeleting || isSaving}
                className="h-7 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950 gap-1.5"
              >
                {isDeleting ? <Loader2 className="h-3 w-3 animate-spin" /> : <Trash2 className="h-3 w-3" />}
                {isDeleting ? "Deleting..." : "Delete"}
              </Button>
            )}
            <div className="flex-1" />
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onClose}
              disabled={isSaving || isDeleting}
              className="h-7 text-xs"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              size="sm"
              onClick={handleSubmit}
              disabled={!title || !startDate || !endDate || isSaving || isDeleting}
              className={cn("h-7 text-xs gap-1.5", selectedTagColors?.bg, "hover:opacity-90 text-white")}
            >
              {isSaving && <Loader2 className="h-3 w-3 animate-spin" />}
              {isSaving ? "Saving..." : isEditing ? "Save Changes" : "Create Event"}
            </Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="components/tag-filter.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { cn } from "@/lib/utils"
import type { EventTag } from "@/lib/calendar-data"
import { Filter } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

const TAG_COLORS: Record<string, { bg: string; border: string; text: string }> = {
  orange: { bg: "bg-orange-500", border: "border-orange-500", text: "text-orange-600" },
  teal: { bg: "bg-teal-500", border: "border-teal-500", text: "text-teal-600" },
  purple: { bg: "bg-purple-500", border: "border-purple-500", text: "text-purple-600" },
  green: { bg: "bg-emerald-500", border: "border-emerald-500", text: "text-emerald-600" },
  pink: { bg: "bg-pink-500", border: "border-pink-500", text: "text-pink-600" },
  blue: { bg: "bg-blue-500", border: "border-blue-500", text: "text-blue-600" },
  yellow: { bg: "bg-amber-400", border: "border-amber-400", text: "text-amber-600" },
  red: { bg: "bg-red-500", border: "border-red-500", text: "text-red-500" },
}

interface TagFilterProps {
  tags: EventTag[]
  selectedTags: string[]
  onTagsChange: (tags: string[]) => void
}

export function TagFilter({ tags, selectedTags, onTagsChange }: TagFilterProps) {
  const allSelected = selectedTags.length === tags.length
  const noneSelected = selectedTags.length === 0
  const activeCount = selectedTags.length

const handleToggleTag = (tagId: string) => {
    if (selectedTags.includes(tagId)) {
      onTagsChange(selectedTags.filter((id) => id !== tagId))
    } else {
      onTagsChange([...selectedTags, tagId])
    }
  }

const handleSelectAll = () => {
    onTagsChange(tags.map((t) => t.id))
  }

const handleDeselectAll = () => {
    onTagsChange([])
  }

return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="ghost" size="sm" className="h-6 gap-1 text-xs px-2">
          <Filter className="h-2.5 w-2.5" />
          <span className="hidden sm:inline">Filter</span>
          <span className="ml-0.5 bg-teal-600 text-white text-[9px] px-1 py-px rounded-full font-medium min-w-[14px] text-center">
            {activeCount}
          </span>
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-56 p-2">
        <div className="flex items-center justify-between mb-2 pb-2 border-b">
          <span className="text-xs font-medium text-muted-foreground">Filter by tag</span>
          <div className="flex gap-1">
            <button
              onClick={handleSelectAll}
              className={cn(
                "text-[10px] px-1.5 py-0.5 rounded transition-colors",
                allSelected
                  ? "bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              All
            </button>
            <button
              onClick={handleDeselectAll}
              className={cn(
                "text-[10px] px-1.5 py-0.5 rounded transition-colors",
                noneSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
              )}
            >
              None
            </button>
          </div>
        </div>
        <div className="space-y-1">
          {tags.map((tag) => {
            const colors = TAG_COLORS[tag.color] || TAG_COLORS.blue
            const isSelected = selectedTags.includes(tag.id)

return (
              <label
                key={tag.id}
                className={cn(
                  "flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors",
                  isSelected ? "bg-muted/50" : "hover:bg-muted/30",
                )}
              >
                <div className="relative flex items-center justify-center">
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => handleToggleTag(tag.id)}
                    className="sr-only"
                  />
                  <div
                    className={cn(
                      "w-4 h-4 rounded border-2 transition-all flex items-center justify-center",
                      isSelected ? cn(colors.bg, colors.border) : "border-muted-foreground/30",
                    )}
                  >
                    {isSelected && (
                      <svg
                        className="w-2.5 h-2.5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth={3}
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                </div>
                <span
                  className={cn("text-sm font-medium flex-1", isSelected ? "text-foreground" : "text-muted-foreground")}
                >
                  {tag.name}
                </span>
                <div className={cn("w-2 h-2 rounded-full", colors.bg)} />
              </label>
            )
          })}
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="components/repo-filter.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { cn } from "@/lib/utils"
import { Filter } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

interface RepoFilterProps {
  repos: { name: string; color: string }[]
  selectedRepos: string[]
  onReposChange: (repos: string[]) => void
}

export function RepoFilter({ repos, selectedRepos, onReposChange }: RepoFilterProps) {
  const allSelected = selectedRepos.length === repos.length
  const noneSelected = selectedRepos.length === 0
  const activeCount = selectedRepos.length

const handleToggleRepo = (repoName: string) => {
    if (selectedRepos.includes(repoName)) {
      onReposChange(selectedRepos.filter((name) => name !== repoName))
    } else {
      onReposChange([...selectedRepos, repoName])
    }
  }

const handleSelectAll = () => {
    onReposChange(repos.map((r) => r.name))
  }

const handleDeselectAll = () => {
    onReposChange([])
  }

return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="ghost" size="sm" className="h-6 gap-1 text-xs px-2">
          <Filter className="h-2.5 w-2.5" />
          <span className="hidden sm:inline">Filter</span>
          {/* Always show badge when filtering */}
          <span className="ml-0.5 bg-emerald-600 text-white text-[9px] px-1 py-px rounded-full font-medium min-w-[14px] text-center">
            {activeCount}
          </span>
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-64 p-2">
        <div className="flex items-center justify-between mb-2 pb-2 border-b">
          <span className="text-xs font-medium text-muted-foreground">Filter by repo</span>
          <div className="flex gap-1">
            <button
              onClick={handleSelectAll}
              className={cn(
                "text-[10px] px-1.5 py-0.5 rounded transition-colors",
                allSelected
                  ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300"
                  : "text-muted-foreground hover:text-foreground",
              )}
            >
              All
            </button>
            <button
              onClick={handleDeselectAll}
              className={cn(
                "text-[10px] px-1.5 py-0.5 rounded transition-colors",
                noneSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
              )}
            >
              None
            </button>
          </div>
        </div>
        <div className="space-y-1 max-h-[300px] overflow-y-auto">
          {repos.map((repo) => {
            const isSelected = selectedRepos.includes(repo.name)

return (
              <label
                key={repo.name}
                className={cn(
                  "flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors",
                  isSelected ? "bg-muted/50" : "hover:bg-muted/30",
                )}
              >
                <div className="relative flex items-center justify-center">
                  <input
                    type="checkbox"
                    checked={isSelected}
                    onChange={() => handleToggleRepo(repo.name)}
                    className="sr-only"
                  />
                  <div
                    className={cn(
                      "w-4 h-4 rounded border-2 transition-all flex items-center justify-center",
                      isSelected ? "border-transparent" : "border-muted-foreground/30",
                    )}
                    style={{
                      backgroundColor: isSelected ? repo.color : "transparent",
                      borderColor: isSelected ? repo.color : undefined,
                    }}
                  >
                    {isSelected && (
                      <svg
                        className="w-2.5 h-2.5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        strokeWidth={3}
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                </div>
                <span
                  className={cn(
                    "text-sm font-medium flex-1 truncate",
                    isSelected ? "text-foreground" : "text-muted-foreground",
                  )}
                >
                  {repo.name}
                </span>
                <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: repo.color }} />
              </label>
            )
          })}
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescript:file="app/api/notes/route.ts" isEdit="true" isMerged="true"
import { sanityReadClient } from "@/lib/sanity"
import { NextResponse } from "next/server"

const SANITY_PROJECT_ID = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || "jtwugudr"
const SANITY_DATASET = process.env.NEXT_PUBLIC_SANITY_DATASET || "production"
const SANITY_API_VERSION = "2024-01-01"
const SANITY_TOKEN = process.env.SANITY_API_TOKEN

async function sanityMutate(mutations: any[]) {
  const response = await fetch(
    `https://${SANITY_PROJECT_ID}.api.sanity.io/v${SANITY_API_VERSION}/data/mutate/${SANITY_DATASET}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${SANITY_TOKEN}`,
      },
      body: JSON.stringify({ mutations }),
    },
  )

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`Sanity mutation failed: ${errorText}`)
  }

return response.json()
}

export async function GET() {
  try {
    const notes = await sanityReadClient.fetch(`
      *[_type == "dayNote"] {
        "id": _id,
        date,
        content
      }
    `)

return NextResponse.json(notes)
  } catch (error) {
    console.error("Error fetching notes:", error)
    return NextResponse.json({ error: "Failed to fetch notes" }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { date, content } = body

if (!date || !content) {
      return NextResponse.json({ error: "Date and content are required" }, { status: 400 })
    }

// Check if note already exists for this date
    const existingNote = await sanityReadClient.fetch(`*[_type == "dayNote" && date == $date][0]{ _id }`, { date })

if (existingNote?._id) {
      // Update existing note
      await sanityMutate([
        {
          patch: {
            id: existingNote._id,
            set: { content },
          },
        },
      ])

return NextResponse.json({ id: existingNote._id, date, content })
    } else {
      // Create new note
      const noteId = `dayNote-${date}`
      await sanityMutate([
        {
          create: {
            _id: noteId,
            _type: "dayNote",
            date,
            content,
          },
        },
      ])

return NextResponse.json({ id: noteId, date, content })
    }
  } catch (error) {
    console.error("Error saving note:", error)
    return NextResponse.json({ error: "Failed to save note" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/note-modal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { FileText, Calendar, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetDescription } from "@/components/ui/sheet"
import { Drawer, DrawerContent, DrawerDescription } from "@/components/ui/drawer"
import { useMediaQuery } from "@/hooks/use-media-query"

interface NoteModalProps {
  isOpen: boolean
  onClose: () => void
  onSave: (note: string) => Promise<void>
  date: Date
  existingNote?: string
}

export function NoteModal({ isOpen, onClose, date, existingNote, onSave }: NoteModalProps) {
  const [note, setNote] = useState("")
  const [isSaving, setIsSaving] = useState(false)
  const isMobile = useMediaQuery("(max-width: 640px)")

useEffect(() => {
    if (isOpen) {
      setNote(existingNote || "")
    }
  }, [isOpen, existingNote])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!note.trim() || isSaving) return
    setIsSaving(true)
    try {
      await onSave(note)
      onClose()
    } finally {
      setIsSaving(false)
    }
  }

const formattedDate = date?.toLocaleDateString("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric",
  })

const year = date?.getFullYear()

const content = (
    <>
      <div className="px-4 pt-4 pb-3 border-b border-border">
        <div className="flex items-center gap-2">
          <div className="p-1.5 bg-muted rounded-md">
            <FileText className="h-3.5 w-3.5 text-muted-foreground" />
          </div>
          <div>
            <h2 className="text-sm font-semibold text-foreground">Journal Entry</h2>
            <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-0.5">
              <Calendar className="h-2.5 w-2.5" />
              <span>
                {formattedDate}, {year}
              </span>
            </div>
          </div>
        </div>
      </div>

<form onSubmit={handleSubmit} className="flex-1 flex flex-col">
        <div className="flex-1 p-4">
          <textarea
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder="What's on your mind today?"
            className="w-full h-full min-h-[200px] resize-none bg-muted/30 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-ring/20 text-sm leading-relaxed p-3 rounded-lg"
            autoFocus
            disabled={isSaving}
          />
        </div>

<div className="px-4 py-3 border-t bg-muted/20">
          <div className="flex items-center justify-end gap-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onClose}
              disabled={isSaving}
              className="h-7 text-xs text-muted-foreground hover:text-foreground"
            >
              Cancel
            </Button>
            <Button type="submit" size="sm" disabled={!note.trim() || isSaving} className="h-7 text-xs">
              {isSaving ? (
                <>
                  <Loader2 className="h-3 w-3 animate-spin mr-1" />
                  Saving...
                </>
              ) : (
                "Save Entry"
              )}
            </Button>
          </div>
        </div>
      </form>
    </>
  )

if (isMobile) {
    return (
      <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()}>
        <DrawerContent className="flex flex-col max-h-[90vh]">
          <DrawerDescription className="sr-only">Write a journal entry for this day</DrawerDescription>
          {content}
        </DrawerContent>
      </Drawer>
    )
  }

return (
    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <SheetContent side="right" className="w-full sm:max-w-md p-0 flex flex-col border-l-0 shadow-2xl duration-200">
        <SheetDescription className="sr-only">Write a journal entry for this day</SheetDescription>
        {content}
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => setMatches(media.matches)
    media.addEventListener("change", listener)
    return () => media.removeEventListener("change", listener)
  }, [matches, query])

return matches
}
[V0_FILE]typescript:file="app/api/photos/route.ts" isEdit="true" isMerged="true"
import { sanityReadClient } from "@/lib/sanity"
import { NextResponse } from "next/server"
import { del } from "@vercel/blob"

if (!response.ok) {
    const errorText = await response.text()
    throw new Error(`Sanity mutation failed: ${errorText}`)
  }

return response.json()
}

export async function GET() {
  try {
    const photos = await sanityReadClient.fetch(`
      *[_type == "dayPhoto"] {
        "id": _id,
        date,
        "imageUrl": coalesce(externalImageUrl, image.asset->url),
        caption
      }
    `)

return NextResponse.json(photos)
  } catch (error) {
    console.error("Error fetching photos:", error)
    return NextResponse.json({ error: "Failed to fetch photos" }, { status: 500 })
  }
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { date, imageUrl, caption } = body

if (!date || !imageUrl) {
      return NextResponse.json({ error: "Date and imageUrl are required" }, { status: 400 })
    }

// Check if photo already exists for this date
    const existingPhoto = await sanityReadClient.fetch(
      `*[_type == "dayPhoto" && date == $date][0]{ _id, externalImageUrl }`,
      { date },
    )

if (existingPhoto?._id) {
      if (existingPhoto.externalImageUrl && existingPhoto.externalImageUrl.includes("blob.vercel-storage.com")) {
        try {
          await del(existingPhoto.externalImageUrl)
        } catch (e) {
          // Ignore blob deletion errors
        }
      }

await sanityMutate([
        {
          patch: {
            id: existingPhoto._id,
            set: { externalImageUrl: imageUrl, caption: caption || "" },
          },
        },
      ])

return NextResponse.json({ id: existingPhoto._id, date, imageUrl, caption })
    } else {
      const photoId = `dayPhoto-${date.replace(/-/g, "")}`

const photoDoc = {
        _id: photoId,
        _type: "dayPhoto",
        date,
        externalImageUrl: imageUrl,
        caption: caption || "",
      }

await sanityMutate([{ create: photoDoc }])

return NextResponse.json({ id: photoId, date, imageUrl, caption })
    }
  } catch (error) {
    console.error("Error saving photo:", error)
    return NextResponse.json({ error: "Failed to save photo" }, { status: 500 })
  }
}

export async function DELETE(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const date = searchParams.get("date")

if (!date) {
      return NextResponse.json({ error: "Date is required" }, { status: 400 })
    }

// Find the photo for this date
    const existingPhoto = await sanityReadClient.fetch(
      `*[_type == "dayPhoto" && date == $date][0]{ _id, externalImageUrl }`,
      { date },
    )

if (!existingPhoto?._id) {
      return NextResponse.json({ error: "Photo not found" }, { status: 404 })
    }

// Delete from Vercel Blob if it's a blob URL
    if (existingPhoto.externalImageUrl && existingPhoto.externalImageUrl.includes("blob.vercel-storage.com")) {
      try {
        await del(existingPhoto.externalImageUrl)
      } catch (e) {
        console.error("Error deleting from Blob:", e)
        // Continue to delete from Sanity even if Blob deletion fails
      }
    }

// Delete from Sanity
    await sanityMutate([{ delete: { id: existingPhoto._id } }])

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting photo:", error)
    return NextResponse.json({ error: "Failed to delete photo" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="hooks/use-sanity-calendar.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback, useMemo } from "react"
import useSWR, { mutate } from "swr"
import type { CalendarEvent, EventTag } from "@/lib/calendar-data"
import { defaultTags, parseDateString } from "@/lib/calendar-data"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export function useSanityCalendar() {
  const [isOnline, setIsOnline] = useState(true)

// Fetch tags from Sanity
  const { data: sanityTags, error: tagsError } = useSWR<EventTag[]>("/api/tags", fetcher, {
    fallbackData: defaultTags,
    revalidateOnFocus: false,
  })

// Fetch events from Sanity
  const {
    data: sanityEvents,
    error: eventsError,
    isLoading,
  } = useSWR<any[]>("/api/events", fetcher, {
    revalidateOnFocus: false,
  })

const { data: sanityNotes } = useSWR<any[]>("/api/notes", fetcher, {
    revalidateOnFocus: false,
  })

const { data: sanityPhotos } = useSWR<any[]>("/api/photos", fetcher, {
    revalidateOnFocus: false,
  })

const tags = tagsError ? defaultTags : sanityTags || defaultTags

const events: CalendarEvent[] = useMemo(() => {
    if (!sanityEvents) return []
    return sanityEvents.map((event) => ({
      id: event.id,
      title: event.title,
      description: event.description,
      startDate: parseDateString(event.startDate),
      endDate: parseDateString(event.endDate),
      tag: event.tag,
    }))
  }, [sanityEvents])

const notes = useMemo(() => {
    const map = new Map<string, string>()
    if (sanityNotes) {
      for (const note of sanityNotes) {
        if (note.date && note.content) {
          map.set(note.date, note.content)
        }
      }
    }
    return map
  }, [sanityNotes])

const photos = useMemo(() => {
    const map = new Map<string, string>()
    if (sanityPhotos && Array.isArray(sanityPhotos)) {
      for (const photo of sanityPhotos) {
        if (photo.date && photo.imageUrl) {
          map.set(photo.date, photo.imageUrl)
        }
      }
    }
    return map
  }, [sanityPhotos])

// Create event
  const createEvent = useCallback(async (event: Omit<CalendarEvent, "id">) => {
    try {
      const response = await fetch("/api/events", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: event.title,
          description: event.description,
          startDate: event.startDate.toISOString().split("T")[0],
          endDate: event.endDate.toISOString().split("T")[0],
          tag: event.tag,
        }),
      })

if (!response.ok) throw new Error("Failed to create event")

const newEvent = await response.json()
      mutate("/api/events")
      return newEvent
    } catch (error) {
      console.error("Error creating event:", error)
      throw error
    }
  }, [])

// Update event
  const updateEvent = useCallback(async (event: CalendarEvent) => {
    try {
      const response = await fetch(`/api/events/${event.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: event.title,
          description: event.description,
          startDate: event.startDate.toISOString().split("T")[0],
          endDate: event.endDate.toISOString().split("T")[0],
          tag: event.tag,
        }),
      })

if (!response.ok) throw new Error("Failed to update event")

mutate("/api/events")
    } catch (error) {
      console.error("Error updating event:", error)
      throw error
    }
  }, [])

// Delete event
  const deleteEvent = useCallback(async (eventId: string) => {
    try {
      const response = await fetch(`/api/events/${eventId}`, {
        method: "DELETE",
      })

if (!response.ok) throw new Error("Failed to delete event")

mutate("/api/events")
    } catch (error) {
      console.error("Error deleting event:", error)
      throw error
    }
  }, [])

const saveNote = useCallback(async (date: string, content: string) => {
    try {
      const response = await fetch("/api/notes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ date, content }),
      })

if (!response.ok) throw new Error("Failed to save note")

mutate("/api/notes")
      return await response.json()
    } catch (error) {
      console.error("Error saving note:", error)
      throw error
    }
  }, [])

const savePhoto = useCallback(async (date: string, imageUrl: string, caption?: string) => {
    try {
      const response = await fetch("/api/photos", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ date, imageUrl, caption }),
      })

if (!response.ok) {
        throw new Error("Failed to save photo")
      }

const result = await response.json()
      mutate("/api/photos")
      return result
    } catch (error) {
      console.error("Error saving photo:", error)
      throw error
    }
  }, [])

const deletePhoto = useCallback(async (date: string) => {
    try {
      const response = await fetch(`/api/photos?date=${encodeURIComponent(date)}`, {
        method: "DELETE",
      })

if (!response.ok) throw new Error("Failed to delete photo")

mutate("/api/photos")
    } catch (error) {
      console.error("Error deleting photo:", error)
      throw error
    }
  }, [])

return {
    events,
    tags,
    notes,
    photos,
    isLoading,
    isOnline,
    createEvent,
    updateEvent,
    deleteEvent,
    saveNote,
    savePhoto,
    deletePhoto,
  }
}
[V0_FILE]typescriptreact:file="components/photo-modal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useCallback } from "react"
import { Camera, Upload, X, ImageIcon, Calendar, Loader2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetDescription } from "@/components/ui/sheet"
import { Drawer, DrawerContent, DrawerDescription } from "@/components/ui/drawer"
import { useMediaQuery } from "@/hooks/use-media-query"

interface PhotoModalProps {
  isOpen: boolean
  onClose: () => void
  date: Date | null
  existingPhoto?: string
  onSave: (photoUrl: string) => void
  onRemove?: () => void
}

export function PhotoModal({ isOpen, onClose, date, existingPhoto, onSave, onRemove }: PhotoModalProps) {
  const [preview, setPreview] = useState<string | null>(existingPhoto || null)
  const [isDragging, setIsDragging] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [selectedFile, setSelectedFile] = useState<File | null>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const isMobile = useMediaQuery("(max-width: 640px)")

const formattedDate = date?.toLocaleDateString("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric",
  })

const year = date?.getFullYear()
  const dateKey = date
    ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
    : ""

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      processFile(file)
    }
  }

const processFile = (file: File) => {
    if (!file.type.startsWith("image/")) return
    setSelectedFile(file)
    const reader = new FileReader()
    reader.onloadend = () => {
      setPreview(reader.result as string)
    }
    reader.readAsDataURL(file)
  }

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }, [])

const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    const file = e.dataTransfer.files?.[0]
    if (file) {
      processFile(file)
    }
  }, [])

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!date || isSaving) return

setIsSaving(true)
    try {
      if (selectedFile) {
        setIsUploading(true)
        const formData = new FormData()
        formData.append("file", selectedFile)
        formData.append("date", dateKey)

const response = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        })

if (!response.ok) {
          throw new Error("Upload failed")
        }

const data = await response.json()
        setIsUploading(false)
        onSave(data.url)
      } else if (preview) {
        onSave(preview)
      }
      onClose()
    } catch (error) {
      console.error("Error uploading photo:", error)
      setIsUploading(false)
    } finally {
      setIsSaving(false)
    }
  }

const handleRemove = async () => {
    if (onRemove && !isDeleting) {
      setIsDeleting(true)
      try {
        await onRemove()
        onClose()
      } catch (error) {
        console.error("Error removing photo:", error)
      } finally {
        setIsDeleting(false)
      }
    }
  }

const handleClearPreview = () => {
    setPreview(null)
    setSelectedFile(null)
  }

if (!isOpen || !date) return null

const isProcessing = isSaving || isDeleting

const content = (
    <>
      <div className="px-4 pt-4 pb-3 border-b border-border">
        <div className="flex items-center gap-2">
          <div className="p-1.5 bg-muted rounded-md">
            <Camera className="h-3.5 w-3.5 text-muted-foreground" />
          </div>
          <div>
            <h2 className="text-sm font-semibold text-foreground">Photo of the Day</h2>
            <div className="flex items-center gap-1 text-[10px] text-muted-foreground mt-0.5">
              <Calendar className="h-2.5 w-2.5" />
              <span>
                {formattedDate}, {year}
              </span>
            </div>
          </div>
        </div>
      </div>

{preview ? (
            <div className="relative group">
              <div className="aspect-square rounded-lg overflow-hidden bg-muted border border-border">
                <img src={preview || "/placeholder.svg"} alt="Preview" className="w-full h-full object-cover" />
              </div>
              <button
                type="button"
                onClick={handleClearPreview}
                disabled={isProcessing}
                className="absolute top-2 right-2 p-1.5 bg-black/60 backdrop-blur-sm rounded-full text-white opacity-0 group-hover:opacity-100 hover:bg-black/80 transition-all duration-200"
              >
                <X className="h-3.5 w-3.5" />
              </button>
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                disabled={isProcessing}
                className="absolute bottom-2 right-2 px-2.5 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-gray-700 opacity-0 group-hover:opacity-100 hover:bg-white transition-all duration-200 flex items-center gap-1"
              >
                <Upload className="h-3 w-3" />
                Change
              </button>
            </div>
          ) : (
            <button
              type="button"
              onClick={() => fileInputRef.current?.click()}
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              className={`
                w-full aspect-square rounded-lg border-2 border-dashed
                flex flex-col items-center justify-center gap-3
                transition-all duration-200
                ${
                  isDragging
                    ? "border-primary bg-primary/5 scale-[1.01]"
                    : "border-muted-foreground/20 hover:border-muted-foreground/40 hover:bg-muted/30"
                }
              `}
            >
              <div
                className={`
                p-3 rounded-xl transition-colors duration-200
                ${isDragging ? "bg-primary/10" : "bg-muted"}
              `}
              >
                <ImageIcon
                  className={`
                  h-6 w-6 transition-colors duration-200
                  ${isDragging ? "text-primary" : "text-muted-foreground/50"}
                `}
                />
              </div>
              <div className="text-center">
                <p className="text-sm font-medium text-foreground mb-0.5">
                  {isDragging ? "Drop your image here" : "Upload a photo"}
                </p>
                <p className="text-xs text-muted-foreground">Drag and drop or click to browse</p>
              </div>
            </button>
          )}

<p className="mt-3 text-xs text-muted-foreground leading-relaxed">
            This photo will appear as the background of the day cell.
          </p>
        </div>

<div className="px-4 py-3 border-t bg-muted/20">
          <div className="flex items-center justify-between">
            {existingPhoto && onRemove ? (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={handleRemove}
                disabled={isProcessing}
                className="h-7 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
              >
                {isDeleting ? (
                  <>
                    <Loader2 className="h-3 w-3 animate-spin mr-1" />
                    Removing...
                  </>
                ) : (
                  "Remove"
                )}
              </Button>
            ) : (
              <div />
            )}
            <div className="flex items-center gap-2">
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={onClose}
                disabled={isProcessing}
                className="h-7 text-xs text-muted-foreground hover:text-foreground"
              >
                Cancel
              </Button>
              <Button type="submit" size="sm" disabled={!preview || isProcessing} className="h-7 text-xs">
                {isSaving ? (
                  <>
                    <Loader2 className="h-3 w-3 animate-spin mr-1" />
                    {isUploading ? "Uploading..." : "Saving..."}
                  </>
                ) : (
                  "Save Photo"
                )}
              </Button>
            </div>
          </div>
        </div>
      </form>
    </>
  )

if (isMobile) {
    return (
      <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()}>
        <DrawerContent className="flex flex-col max-h-[90vh]">
          <DrawerDescription className="sr-only">Upload a photo for this day</DrawerDescription>
          {content}
        </DrawerContent>
      </Drawer>
    )
  }

return (
    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <SheetContent side="right" className="w-full sm:max-w-md p-0 flex flex-col border-l-0 shadow-2xl duration-200">
        <SheetDescription className="sr-only">Upload a photo for this day</SheetDescription>
        {content}
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.55 0.15 175);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0 0);
  --secondary-foreground: oklch(0.2 0 0);
  --muted: oklch(0.96 0.005 260);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.96 0 0);
  --accent-foreground: oklch(0.2 0 0);
  --destructive: oklch(0.55 0.2 25);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.92 0.005 260);
  --input: oklch(0.92 0 0);
  --ring: oklch(0.55 0.15 175);
  --chart-1: oklch(0.65 0.2 40);
  --chart-2: oklch(0.6 0.12 185);
  --chart-3: oklch(0.4 0.07 227);
  --chart-4: oklch(0.83 0.19 85);
  --chart-5: oklch(0.77 0.19 70);
  --radius: 0.5rem;
}

/* Dark mode colors */
.dark {
  --background: oklch(0.12 0.01 260);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.15 0.01 260);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.15 0.01 260);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.6 0.12 175);
  --primary-foreground: oklch(0.1 0 0);
  --secondary: oklch(0.22 0.01 260);
  --secondary-foreground: oklch(0.9 0 0);
  --muted: oklch(0.2 0.01 260);
  --muted-foreground: oklch(0.6 0 0);
  --accent: oklch(0.22 0.01 260);
  --accent-foreground: oklch(0.9 0 0);
  --destructive: oklch(0.5 0.15 25);
  --destructive-foreground: oklch(0.95 0 0);
  --border: oklch(0.25 0.01 260);
  --input: oklch(0.22 0.01 260);
  --ring: oklch(0.6 0.12 175);
}

/* Custom scrollbar styling for cleaner look */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: oklch(0.85 0 0);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.75 0 0);
}

.dark ::-webkit-scrollbar-thumb {
  background: oklch(0.35 0 0);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: oklch(0.45 0 0);
}

/* Yellow pulse animation for Today button */
@keyframes today-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(250, 204, 21, 0);
  }
}

.animate-today-pulse {
  animation: today-pulse 0.8s ease-out 2;
  background-color: rgba(250, 204, 21, 0.3) !important;
}

/* Diagonal stripe pattern for past days - uses fixed attachment so stripes align across cells */
.past-day-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.25) 2px,
    rgba(0, 0, 0, 0.25) 3px
  );
  background-attachment: fixed;
}

.dark .past-day-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.12) 2px,
    rgba(255, 255, 255, 0.12) 3px
  );
}

/* Today highlight - light mode uses dark bg, dark mode uses light bg with proper text colors */
.today-highlight {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

.dark .today-highlight {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Today text colors - force dark text in dark mode */
.today-text-light {
  color: white !important;
}

.dark .today-text-light {
  color: rgb(24, 24, 27) !important; /* zinc-900 */
}

.today-text-light-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark .today-text-light-muted {
  color: rgba(24, 24, 27, 0.7) !important;
}

/* Weekend styling - 20% darker */
.weekend-day {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.dark .weekend-day {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Shimmer loading animation for AI dock */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-loading {
  position: relative;
  overflow: hidden;
}

.shimmer-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 20%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  pointer-events: none;
}

.dark .shimmer-loading::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 20%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 80%,
    transparent 100%
  );
}

/* Drag cursor styles */
.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

/* Month start line styling - dark in light mode, light in dark mode */
.month-start-line {
  border-left: 3px solid rgb(63, 63, 70) !important; /* zinc-700 in light mode */
}

.dark .month-start-line {
  border-left: 3px solid rgb(228, 228, 231) !important; /* zinc-200 in dark mode */
}

/* Drag selection highlight for creating new events */
.drag-selection-cell {
  background-color: rgba(20, 184, 166, 0.25) !important; /* teal-500 with transparency */
}

.dark .drag-selection-cell {
  background-color: rgba(20, 184, 166, 0.35) !important;
}

/* Preview swimlane for drag-to-create */
.preview-swimlane {
  background-color: rgba(20, 184, 166, 0.6);
  border: 2px dashed rgb(20, 184, 166);
}

.dark .preview-swimlane {
  background-color: rgba(20, 184, 166, 0.5);
  border: 2px dashed rgb(94, 234, 212);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]markdown:file="docs/PROJECT_OVERVIEW.md" isMerged="true"
# Annual Calendar 2026

A comprehensive year-at-a-glance calendar application built with Next.js 16, React 19, and Sanity CMS. Designed for the Sanity + Vercel hackathon, this project showcases a creative blend of personal calendar management with GitHub activity visualization.

## Overview

Annual Calendar 2026 is a full-featured calendar application that displays an entire year in a continuous grid layout, similar to GitHub's contribution heatmap but with full event management capabilities. It features dual views: a traditional calendar view for personal events and a GitHub activity view that visualizes your coding contributions throughout the year.

## Key Features

### Calendar View

#### Year Grid Layout
- **21x18 grid** displaying all 365 days of the year in a continuous flow
- Each cell represents a single day with:
  - Day name (SUN, MON, etc.)
  - Day number
  - Month badge on the first of each month
  - Visual indicators for today, weekends, and past days

#### Event Management
- **Create events** by clicking on any day or dragging across multiple days
- **Edit events** by clicking on existing event bars
- **Drag and drop** events to reschedule them
- **Resize events** by dragging the left/right edges
- **Multi-day events** displayed as horizontal swimlanes spanning multiple cells
- **Tag-based categorization** with color coding (8 preset colors)
- **Context menu** with quick actions:
  - Edit event
  - Delete event
  - Duplicate event
  - Change tag/color
  - Extend by one day
  - Shorten by one day

#### Drag-to-Select (Notion-style)
- Click and drag across multiple cells to select a date range
- Visual preview swimlane shows where the event will be created
- Release to open the event creation modal with dates pre-filled
- Smooth UX similar to Notion Calendar

#### Daily Attachments
- **Photo of the day**: Upload an image for any day (stored in Vercel Blob + Sanity)
- **Journal entry**: Add text notes to any day
- Photos display as cell backgrounds with proper aspect ratio
- Notes accessible via hover tooltip or dedicated modal

#### AI-Powered Features
- **AI Dock** at bottom of screen for natural language event creation
- Type commands like "Add birthday party on March 25th" 
- AI parses the text and creates properly formatted events
- Quick actions: Clear all events, Load sample data

#### Visual Features
- **Today highlight**: Inverted colors (dark in light mode, light in dark mode)
- **Past days**: Subtle diagonal stripe pattern
- **Weekends**: Slightly darker background
- **Month separators**: Vertical line with contrasting color
- **Pulsing animation** when jumping to today

### GitHub View

A unique visualization that transforms your GitHub activity into a calendar-like experience.

#### GitHub Activity Swimlanes
- **Repository swimlanes** showing when you worked on each project
- Visual indication of activity intensity via opacity
- Each repo gets a unique color from the tag palette
- Maximum 2 swimlanes per day to avoid visual clutter

#### Commit Heat Indicators
- Small colored squares in the top-left of each cell
- Green intensity (GitHub-style) based on commit count
- Level 0 (no commits) through Level 4 (high activity)

#### Detailed Tooltips
- Hover on any day to see:
  - Total commits
  - Lines added/deleted
  - PRs opened/merged
  - Repositories contributed to

#### Stats Dialog
- Accessible via "Stats" button in header
- Shows annual summary:
  - Total commits
  - PRs merged
  - Lines of code added/deleted
  - Current streak
  - Longest streak
  - Activity legend

#### Filtering
- Filter by repository to focus on specific projects
- Badge shows number of active filters

### Data Persistence

All data is persisted to **Sanity CMS** with the following schema:

#### `calendarEvent`
- `title` (string, required)
- `description` (text)
- `startDate` (date, required)
- `endDate` (date, required)
- `tag` (reference to `tag` document)

#### `tag`
- `name` (string, required)
- `slug` (slug, required)
- `color` (string)

#### `dayPhoto`
- `date` (date, required)
- `externalImageUrl` (url) - for Vercel Blob URLs
- `image` (image with hotspot) - for native Sanity images
- `caption` (string)

#### `dayNote`
- `date` (date, required)
- `content` (text, required)

### Technical Stack

- **Frontend**: Next.js 16 (App Router), React 19, TypeScript
- **Styling**: Tailwind CSS v4, shadcn/ui components
- **CMS**: Sanity (content management)
- **Storage**: Vercel Blob (image uploads)
- **State Management**: SWR for data fetching, React state for local UI
- **Animations**: Framer Motion for smooth interactions
- **Icons**: Lucide React

### Responsive Design

- **Desktop**: Full year grid with all features
- **Mobile**: Drawer-based modals instead of sheets
- Uses `useMediaQuery` hook for responsive behavior
- Touch-friendly interactions

### Dark Mode

Full dark mode support with:
- Proper color inversions for readability
- Adjusted opacity values for visual balance
- Custom CSS variables for theme tokens
- Persisted via `next-themes`

## API Routes

### Events
- `GET /api/events` - Fetch all events
- `POST /api/events` - Create new event
- `PATCH /api/events/[id]` - Update event
- `DELETE /api/events/[id]` - Delete event

### Tags
- `GET /api/tags` - Fetch all tags

### Notes
- `GET /api/notes` - Fetch all notes
- `POST /api/notes` - Create/update note
- `PATCH /api/notes` - Update note
- `DELETE /api/notes?date=YYYY-MM-DD` - Delete note

### Photos
- `GET /api/photos` - Fetch all photos
- `POST /api/photos` - Create/update photo
- `DELETE /api/photos?date=YYYY-MM-DD` - Delete photo (from both Blob and Sanity)

### AI
- `POST /api/parse-events` - Parse natural language into events

### Upload
- `POST /api/upload` - Upload image to Vercel Blob

## Future Integration Plans

See `docs/integration-plan.md` for detailed plans on:
- **Clerk Authentication** with OAuth tokens
- **Google Calendar** sync (bidirectional)
- **GitHub API** integration for real data
- Real-time updates via Sanity listeners

## Usage

1. **Navigate years**: Use the `<` `>` buttons or click the year
2. **Switch views**: Click "Calendar" or "GitHub" tabs
3. **Create event**: Click a day or drag across multiple days
4. **Edit event**: Click on any event swimlane
5. **Quick actions**: Right-click on events for context menu
6. **Add photo**: Hover over a day and click the camera icon
7. **Add note**: Hover over a day and click the note icon
8. **Use AI**: Type in the AI dock at the bottom
9. **Filter**: Use the Filter button to show/hide tags or repos
10. **Jump to today**: The calendar auto-scrolls to show current date

## Performance Optimizations

- **Memoization**: Heavy computations cached with `useMemo`
- **Callback stability**: Event handlers wrapped in `useCallback`
- **Optimistic updates**: Local state updates before API calls
- **SWR caching**: Efficient data revalidation
- **CSS containment**: Grid cells isolated for paint optimization
- **Lazy loading**: Components loaded on demand

## Hackathon Highlights

This project demonstrates:
1. **Creative Sanity usage**: Calendar events, photos, and journal entries all managed via Sanity
2. **Vercel ecosystem**: Blob storage, serverless functions, edge-ready
3. **Innovative UX**: Year-at-a-glance with GitHub heatmap inspiration
4. **AI integration**: Natural language event creation
5. **Polish**: Dark mode, animations, responsive design
[V0_FILE]typescriptreact:file="components/year-view.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useMemo, useCallback, useEffect } from "react"
import { FileText, ImageIcon } from "lucide-react"
import type { CalendarEvent, EventTag } from "@/lib/calendar-data"
import { EventTooltip } from "@/components/event-tooltip"
import { EventContextMenu } from "@/components/event-context-menu"
import { cn } from "@/lib/utils"

const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
const DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]

const TAG_COLORS: Record<string, { bg: string; text: string; border: string; darkBg: string }> = {
  orange: { bg: "bg-orange-500", text: "text-white", border: "border-orange-500", darkBg: "dark:bg-orange-600/80" },
  teal: { bg: "bg-teal-500", text: "text-white", border: "border-teal-500", darkBg: "dark:bg-teal-600/80" },
  purple: { bg: "bg-purple-500", text: "text-white", border: "border-purple-500", darkBg: "dark:bg-purple-600/80" },
  green: { bg: "bg-emerald-500", text: "text-white", border: "border-emerald-500", darkBg: "dark:bg-emerald-600/80" },
  pink: { bg: "bg-pink-500", text: "text-white", border: "border-pink-500", darkBg: "dark:bg-pink-600/80" },
  blue: { bg: "bg-blue-500", text: "text-white", border: "border-blue-500", darkBg: "dark:bg-blue-600/80" },
  yellow: {
    bg: "bg-amber-400",
    text: "text-amber-900",
    border: "border-amber-400",
    darkBg: "dark:bg-amber-500/80 dark:text-amber-100",
  },
  red: { bg: "bg-red-500", text: "text-white", border: "border-red-500", darkBg: "dark:bg-red-600/80" },
}

function getEventColor(event: CalendarEvent, tags: EventTag[]) {
  const tag = tags.find((t) => t.id === event.tag)
  return TAG_COLORS[tag?.color || "blue"] || TAG_COLORS.blue
}

function isPastDay(date: Date) {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  const checkDate = new Date(date)
  checkDate.setHours(0, 0, 0, 0)
  return checkDate < today
}

function isSameDay(d1: Date, d2: Date) {
  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()
}

function isToday(date: Date) {
  return isSameDay(date, new Date())
}

function getDateKey(date: Date) {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
}

function addDays(date: Date, days: number): Date {
  const result = new Date(date)
  result.setDate(result.getDate() + days)
  return result
}

interface YearViewProps {
  year: number
  events: CalendarEvent[]
  tags: EventTag[]
  dayPhotos: Map<string, string>
  dayNotes?: Map<string, string>
  onDayClick: (date: Date) => void
  onAddNote: (date: Date) => void
  onAddPhoto: (date: Date) => void
  onEventClick: (event: CalendarEvent) => void
  onDeleteEvent: (eventId: string) => void
  onDuplicateEvent: (event: CalendarEvent) => void
  onChangeTag: (event: CalendarEvent, newTagId: string) => void
  onExtendDay: (event: CalendarEvent) => void
  onShortenDay: (event: CalendarEvent) => void
  onUpdateEvent: (event: CalendarEvent) => void
  onCommitUpdate: () => void
  pulsingToday?: boolean
  onCreateEventFromDrag?: (startDate: Date, endDate: Date) => void
  clearDragSelectionRef?: React.MutableRefObject<(() => void) | null>
}

export function YearView({
  year,
  events,
  tags,
  dayPhotos,
  dayNotes,
  onDayClick,
  onAddNote,
  onAddPhoto,
  onEventClick,
  onDeleteEvent,
  onDuplicateEvent,
  onChangeTag,
  onExtendDay,
  onShortenDay,
  onUpdateEvent,
  onCommitUpdate,
  pulsingToday,
  onCreateEventFromDrag,
  clearDragSelectionRef,
}: YearViewProps) {
  const scrollRef = useRef<HTMLDivElement>(null)
  const gridRef = useRef<HTMLDivElement>(null)
  const COLS = 21
  const ROWS = 18

const dragStateRef = useRef<{
    eventId: string
    type: "move" | "resize-start" | "resize-end"
    startX: number
    startY: number
    originalEvent: CalendarEvent
    lastDaysDelta: number
    hasDragged: boolean
  } | null>(null)

const justFinishedDragRef = useRef(false)

const [dragGhost, setDragGhost] = useState<{
    event: CalendarEvent
    x: number
    y: number
    width: number
  } | null>(null)

const [, forceUpdate] = useState(0)

const [dragSelection, setDragSelection] = useState<{
    startDate: Date
    endDate: Date
    isActive: boolean
    isPending: boolean
  } | null>(null)

const dragSelectionRef = useRef<{
    startDate: Date
    startCellIndex: number
    isActive: boolean
  } | null>(null)

const gridData = useMemo(() => {
    const grid: ({ date: Date; dayOfMonth: number; month: number; dayOfWeek: number; dayIndex: number } | null)[][] = []
    const startDate = new Date(year, 0, 1)
    const endDate = new Date(year, 11, 31)
    const totalDays = Math.floor((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)) + 1

const getCellDimensions = useCallback(() => {
    if (!gridRef.current) return { width: 50, height: 50 }
    const firstCell = gridRef.current.querySelector("[data-cell]")
    if (firstCell) {
      const rect = firstCell.getBoundingClientRect()
      return { width: rect.width, height: rect.height }
    }
    return { width: gridRef.current.offsetWidth / COLS, height: 50 }
  }, [])

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!dragStateRef.current) return

const { width: cellWidth, height: cellHeight } = getCellDimensions()
      const deltaX = e.clientX - dragStateRef.current.startX
      const deltaY = e.clientY - dragStateRef.current.startY

if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
        dragStateRef.current.hasDragged = true
      }

if (dragStateRef.current.type === "move" && dragStateRef.current.hasDragged) {
        const eventDuration =
          Math.ceil(
            (dragStateRef.current.originalEvent.endDate.getTime() -
              dragStateRef.current.originalEvent.startDate.getTime()) /
              (1000 * 60 * 60 * 24),
          ) + 1

setDragGhost({
          event: dragStateRef.current.originalEvent,
          x: e.clientX - cellWidth / 2,
          y: e.clientY - 8,
          width: Math.min(eventDuration, 5) * cellWidth,
        })
      }

const daysDelta = Math.round(deltaX / cellWidth)
      const rowsDelta = Math.round(deltaY / cellHeight)
      const totalDaysDelta = daysDelta + rowsDelta * COLS

if (totalDaysDelta === dragStateRef.current.lastDaysDelta) return
      dragStateRef.current.lastDaysDelta = totalDaysDelta

const { originalEvent, type } = dragStateRef.current
      let newStartDate = new Date(originalEvent.startDate)
      let newEndDate = new Date(originalEvent.endDate)

if (type === "move") {
        newStartDate = addDays(new Date(originalEvent.startDate), totalDaysDelta)
        newEndDate = addDays(new Date(originalEvent.endDate), totalDaysDelta)
      } else if (type === "resize-start") {
        newStartDate = addDays(new Date(originalEvent.startDate), daysDelta)
        if (newStartDate > newEndDate) newStartDate = newEndDate
      } else if (type === "resize-end") {
        newEndDate = addDays(new Date(originalEvent.endDate), daysDelta)
        if (newEndDate < newStartDate) newEndDate = newStartDate
      }

onUpdateEvent({
        ...originalEvent,
        startDate: newStartDate,
        endDate: newEndDate,
      })
    }

const handleMouseUp = () => {
      if (dragStateRef.current) {
        if (dragStateRef.current.hasDragged) {
          justFinishedDragRef.current = true
          onCommitUpdate()
          setTimeout(() => {
            justFinishedDragRef.current = false
          }, 100)
        }
        dragStateRef.current = null
        setDragGhost(null)
        forceUpdate((n) => n + 1)
      }

if (dragSelectionRef.current?.isActive && dragSelection) {
        dragSelectionRef.current = null

if (dragSelection.startDate.getTime() !== dragSelection.endDate.getTime() || true) {
          if (onCreateEventFromDrag) {
            onCreateEventFromDrag(dragSelection.startDate, dragSelection.endDate)
          }
        }

setDragSelection((prev) => (prev ? { ...prev, isActive: false, isPending: true } : null))
      }
    }

document.addEventListener("mousemove", handleMouseMove)
    document.addEventListener("mouseup", handleMouseUp)

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [getCellDimensions, onUpdateEvent, onCommitUpdate, dragSelection, onCreateEventFromDrag])

useEffect(() => {
    if (clearDragSelectionRef) {
      clearDragSelectionRef.current = () => {
        setDragSelection(null)
      }
    }
    return () => {
      if (clearDragSelectionRef) {
        clearDragSelectionRef.current = null
      }
    }
  }, [clearDragSelectionRef])

const handleDragStart = useCallback(
    (e: React.MouseEvent, event: CalendarEvent, type: "move" | "resize-start" | "resize-end") => {
      e.stopPropagation()
      e.preventDefault()
      dragStateRef.current = {
        eventId: event.id,
        type,
        startX: e.clientX,
        startY: e.clientY,
        originalEvent: { ...event },
        lastDaysDelta: 0,
        hasDragged: false,
      }
      forceUpdate((n) => n + 1)
    },
    [],
  )

const getDateFromCellIndex = useCallback(
    (row: number, col: number): Date | null => {
      const cellData = gridData[row]?.[col]
      return cellData?.date || null
    },
    [gridData],
  )

const handleCellMouseDown = useCallback((e: React.MouseEvent, date: Date, row: number, col: number) => {
    if (e.button !== 0) return
    if ((e.target as HTMLElement).closest("[data-event-bar]")) return

e.preventDefault()
    dragSelectionRef.current = {
      startDate: date,
      startCellIndex: row * COLS + col,
      isActive: true,
    }
    setDragSelection({
      startDate: date,
      endDate: date,
      isActive: true,
      isPending: false,
    })
  }, [])

const handleCellMouseMove = useCallback((e: React.MouseEvent, date: Date) => {
    if (!dragSelectionRef.current?.isActive) return

const startDate = dragSelectionRef.current.startDate
    let newStart = startDate
    let newEnd = date

if (date < startDate) {
      newStart = date
      newEnd = startDate
    }

setDragSelection({
      startDate: newStart,
      endDate: newEnd,
      isActive: true,
      isPending: false,
    })
  }, [])

const eventPositions = useMemo(() => {
    const positions: {
      event: CalendarEvent
      row: number
      startCol: number
      endCol: number
      isStart: boolean
      isEnd: boolean
      slotIndex: number
    }[] = []

const rowSlots: Map<number, Set<number>[]> = new Map()

events.forEach((event) => {
      const eventStart = new Date(event.startDate)
      const eventEnd = new Date(event.endDate)
      eventStart.setHours(0, 0, 0, 0)
      eventEnd.setHours(23, 59, 59, 999)

gridData.forEach((row, rowIndex) => {
        let startCol = -1
        let endCol = -1

row.forEach((day, colIndex) => {
          if (!day) return
          const dayDate = new Date(day.date)
          dayDate.setHours(12, 0, 0, 0)

if (dayDate >= eventStart && dayDate <= eventEnd) {
            if (startCol === -1) startCol = colIndex
            endCol = colIndex
          }
        })

if (startCol !== -1) {
          if (!rowSlots.has(rowIndex)) {
            rowSlots.set(rowIndex, [])
          }
          const slots = rowSlots.get(rowIndex)!

let slotIndex = 0
          while (true) {
            if (!slots[slotIndex]) {
              slots[slotIndex] = new Set()
            }
            let conflict = false
            for (let c = startCol; c <= endCol; c++) {
              if (slots[slotIndex].has(c)) {
                conflict = true
                break
              }
            }
            if (!conflict) break
            slotIndex++
          }

for (let c = startCol; c <= endCol; c++) {
            slots[slotIndex].add(c)
          }

const eventStartDate = new Date(event.startDate)
          eventStartDate.setHours(0, 0, 0, 0)
          const firstDayInRow = row[startCol]?.date
          const lastDayInRow = row[endCol]?.date

positions.push({
            event,
            row: rowIndex,
            startCol,
            endCol,
            isStart: firstDayInRow ? isSameDay(firstDayInRow, eventStartDate) : false,
            isEnd: lastDayInRow ? isSameDay(lastDayInRow, new Date(event.endDate)) : false,
            slotIndex,
          })
        }
      })
    })

return positions
  }, [events, gridData])

const eventsByRow = useMemo(() => {
    const byRow: Map<number, typeof eventPositions> = new Map()
    eventPositions.forEach((pos) => {
      if (!byRow.has(pos.row)) {
        byRow.set(pos.row, [])
      }
      byRow.get(pos.row)!.push(pos)
    })
    return byRow
  }, [eventPositions])

const isDateInSelection = useCallback(
    (date: Date): boolean => {
      if (!dragSelection?.isActive && !dragSelection?.isPending) return false
      const checkDate = new Date(date)
      checkDate.setHours(0, 0, 0, 0)
      const start = new Date(dragSelection.startDate)
      start.setHours(0, 0, 0, 0)
      const end = new Date(dragSelection.endDate)
      end.setHours(23, 59, 59, 999)
      return checkDate >= start && checkDate <= end
    },
    [dragSelection],
  )

const isDragging = dragStateRef.current !== null
  const isDragSelecting = dragSelectionRef.current?.isActive || false

return (
    <div
      ref={scrollRef}
      className={cn("h-full overflow-auto", (isDragging || isDragSelecting) && "select-none")}
      style={
        isDragging || isDragSelecting
          ? {
              cursor:
                isDragging && dragStateRef.current?.type === "move"
                  ? "grabbing"
                  : isDragSelecting
                    ? "crosshair"
                    : "ew-resize",
            }
          : undefined
      }
    >
      <div ref={gridRef} className="min-w-[1000px]">
        {gridData.map((row, rowIndex) => {
          const rowEvents = eventsByRow.get(rowIndex) || []

return (
            <div key={rowIndex} className="relative" data-row={rowIndex}>
              <div
                className="grid border-b border-border/30"
                style={{ gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))` }}
              >
                {row.map((day, colIndex) => {
                  if (!day) {
                    return (
                      <div
                        key={`empty-${rowIndex}-${colIndex}`}
                        className="aspect-square bg-background border-r border-border/20"
                        data-cell
                      />
                    )
                  }

const isMonthStart = day.dayOfMonth === 1
                  const isTodayDate = isToday(day.date)
                  const isWeekend = day.dayOfWeek === 0 || day.dayOfWeek === 6
                  const dateKey = getDateKey(day.date)
                  const photo = dayPhotos.get(dateKey)
                  const isPast = isPastDay(day.date)
                  const isInSelection = isDateInSelection(day.date)

return (
                    <div
                      key={day.date.toISOString()}
                      data-cell
                      data-cell-date={dateKey}
                      onMouseDown={(e) => handleCellMouseDown(e, day.date, rowIndex, colIndex)}
                      onMouseMove={(e) => handleCellMouseMove(e, day.date)}
                      onClick={() => !isDragging && !isDragSelecting && onDayClick(day.date)}
                      className={cn(
                        "aspect-square bg-background border-r border-border/20 cursor-pointer transition-colors hover:bg-muted/30 relative group",
                        isWeekend && "weekend-day",
                        isMonthStart && "month-start-line",
                        isTodayDate && "today-highlight",
                        isTodayDate && pulsingToday && "animate-today-pulse",
                        isPast && !isTodayDate && "past-day-stripes",
                        isInSelection && "drag-selection-cell",
                      )}
                      style={
                        photo
                          ? {
                              backgroundImage: `url(${photo})`,
                              backgroundSize: "cover",
                              backgroundPosition: "center",
                            }
                          : undefined
                      }
                    >
                      <div
                        className={cn(
                          "absolute flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity z-20",
                          isMonthStart ? "bottom-0.5 right-0.5" : "top-0.5 left-0.5",
                        )}
                      >
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            onAddNote(day.date)
                          }}
                          className="p-0.5 rounded bg-background/90 hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground transition-colors"
                          title="Add note"
                        >
                          <FileText className="h-2.5 w-2.5" />
                        </button>
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            onAddPhoto(day.date)
                          }}
                          className="p-0.5 rounded bg-background/90 hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground transition-colors"
                          title="Add photo"
                        >
                          <ImageIcon className="h-2.5 w-2.5" />
                        </button>
                      </div>

{isMonthStart && (
                        <span className="absolute top-0 left-0 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[7px] font-bold px-1 py-px tracking-wide leading-none">
                          {MONTHS[day.month]}
                        </span>
                      )}

<div className="absolute top-0.5 right-0.5 flex items-center gap-0.5">
                        <span
                          className={cn(
                            "text-[7px] font-medium uppercase leading-none",
                            isTodayDate ? "today-text-light-muted" : "text-muted-foreground/60",
                          )}
                        >
                          {DAYS[day.dayOfWeek]}
                        </span>
                        <span
                          className={cn(
                            "text-[10px] font-bold leading-none",
                            isTodayDate ? "today-text-light" : "text-foreground",
                          )}
                        >
                          {day.dayOfMonth}
                        </span>
                      </div>
                    </div>
                  )
                })}
              </div>

{(dragSelection?.isActive || dragSelection?.isPending) &&
                (() => {
                  const rowStartDate = row[0]?.date
                  const rowEndDate = row[COLS - 1]?.date || row.filter(Boolean).pop()?.date

if (!rowStartDate || !rowEndDate) return null

const selStart = new Date(dragSelection.startDate)
                  selStart.setHours(0, 0, 0, 0)
                  const selEnd = new Date(dragSelection.endDate)
                  selEnd.setHours(23, 59, 59, 999)

const rowS = new Date(rowStartDate)
                  rowS.setHours(0, 0, 0, 0)
                  const rowE = new Date(rowEndDate)
                  rowE.setHours(23, 59, 59, 999)

if (selEnd < rowS || selStart > rowE) return null

let startCol = 0
                  let endCol = COLS - 1

for (let c = 0; c < COLS; c++) {
                    const cellDate = row[c]?.date
                    if (cellDate) {
                      const cd = new Date(cellDate)
                      cd.setHours(0, 0, 0, 0)
                      if (cd >= selStart && startCol === 0) {
                        startCol = c
                      }
                      if (cd <= selEnd) {
                        endCol = c
                      }
                    }
                  }

const leftPercent = (startCol / COLS) * 100
                  const widthPercent = ((endCol - startCol + 1) / COLS) * 100

return (
                    <div
                      className="absolute h-[16px] flex items-center text-[9px] font-medium truncate pointer-events-none preview-swimlane rounded"
                      style={{
                        left: `calc(${leftPercent}% + 1px)`,
                        width: `calc(${widthPercent}% - 2px)`,
                        top: "20px",
                      }}
                    >
                      <span className="pl-1 text-teal-700 dark:text-teal-200">New Event</span>
                    </div>
                  )
                })()}

<div className="absolute left-0 right-0 pointer-events-none" style={{ top: "20px" }}>
                {rowEvents.map((pos, idx) => {
                  const colors = getEventColor(pos.event, tags)
                  const leftPercent = (pos.startCol / COLS) * 100
                  const widthPercent = ((pos.endCol - pos.startCol + 1) / COLS) * 100
                  const isDraggingThis = dragStateRef.current?.eventId === pos.event.id

return (
                    <EventContextMenu
                      key={`${pos.event.id}-${rowIndex}-${idx}`}
                      event={pos.event}
                      tags={tags}
                      onEdit={onEventClick}
                      onDelete={onDeleteEvent}
                      onDuplicate={onDuplicateEvent}
                      onChangeTag={onChangeTag}
                      onExtendDay={onExtendDay}
                      onShortenDay={onShortenDay}
                    >
                      <EventTooltip event={pos.event} tags={tags}>
                        <div
                          className={cn(
                            "absolute h-[16px] flex items-center text-[9px] font-medium truncate pointer-events-auto cursor-pointer hover:brightness-110 transition-all group/event",
                            colors.bg,
                            colors.darkBg,
                            colors.text,
                            pos.isStart ? "rounded-l pl-1" : "pl-0.5",
                            pos.isEnd ? "rounded-r pr-0.5" : "",
                            isDraggingThis && "opacity-50 cursor-grabbing ring-2 ring-white/50",
                          )}
                          style={{
                            left: `calc(${leftPercent}% + 1px)`,
                            width: `calc(${widthPercent}% - 2px)`,
                            top: `${pos.slotIndex * 18}px`,
                          }}
                          onMouseDown={(e) => handleDragStart(e, pos.event, "move")}
                          onClick={(e) => {
                            e.stopPropagation()
                            if (!isDragging && !justFinishedDragRef.current) {
                              onEventClick(pos.event)
                            }
                          }}
                        >
                          {pos.isStart && (
                            <div
                              className="absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover/event:opacity-100 hover:bg-black/20 rounded-l"
                              onMouseDown={(e) => {
                                e.stopPropagation()
                                handleDragStart(e, pos.event, "resize-start")
                              }}
                            />
                          )}
                          {pos.isStart && pos.event.title}
                          {pos.isEnd && (
                            <div
                              className="absolute right-0 top-0 bottom-0 w-2 cursor-ew-resize opacity-0 group-hover/event:opacity-100 hover:bg-black/20 rounded-r"
                              onMouseDown={(e) => {
                                e.stopPropagation()
                                handleDragStart(e, pos.event, "resize-end")
                              }}
                            />
                          )}
                        </div>
                      </EventTooltip>
                    </EventContextMenu>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

{dragGhost && (
        <div
          className="fixed pointer-events-none z-50"
          style={{
            left: dragGhost.x,
            top: dragGhost.y,
            width: dragGhost.width,
          }}
        >
          <div
            className={cn(
              "h-[16px] flex items-center text-[9px] font-medium truncate rounded px-1 shadow-lg ring-2 ring-white/30",
              getEventColor(dragGhost.event, tags).bg,
              getEventColor(dragGhost.event, tags).text,
            )}
          >
            {dragGhost.event.title}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/github/contributions/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { sanityReadClient } from "@/lib/sanity"

export async function GET(request: NextRequest) {
  try {
    const { userId } = await auth()
    if (!userId) {
      return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
    }

const { searchParams } = new URL(request.url)
    const year = parseInt(searchParams.get("year") || new Date().getFullYear().toString())

const docId = `githubSync-${userId}-${year}`
    const cachedData = await sanityReadClient.fetch(
      `*[_type == "githubSync" && _id == $docId][0]{ dataJson, lastSynced }`,
      { docId }
    )

if (cachedData?.dataJson) {
      const data = JSON.parse(cachedData.dataJson)
      return NextResponse.json({
        ...data,
        lastSynced: cachedData.lastSynced,
        cached: true,
      })
    }

return NextResponse.json({ error: "No cached data. Please sync first." }, { status: 404 })
  } catch (error) {
    console.error("GitHub API error:", error)
    if (error instanceof Error) {
      if (error.message.includes("Not authenticated")) {
        return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
      }
    }
    return NextResponse.json({ error: "Failed to fetch contributions" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/github/sync/route.ts" isMerged="true"
import { NextRequest, NextResponse } from "next/server"
import { auth } from "@clerk/nextjs/server"
import { fetchGitHubContributions, getContributionLevel } from "@/lib/github"

const SANITY_PROJECT_ID = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
const SANITY_DATASET = process.env.NEXT_PUBLIC_SANITY_DATASET || "production"
const SANITY_API_TOKEN = process.env.SANITY_API_TOKEN

async function sanityMutate(mutations: unknown[]) {
  const res = await fetch(
    `https://${SANITY_PROJECT_ID}.api.sanity.io/v2024-01-01/data/mutate/${SANITY_DATASET}`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${SANITY_API_TOKEN}`,
      },
      body: JSON.stringify({ mutations }),
    }
  )
  if (!res.ok) {
    const err = await res.text()
    throw new Error(`Sanity mutation failed: ${err}`)
  }
  return res.json()
}

export async function POST(request: NextRequest) {
  try {
    const { userId } = await auth()
    if (!userId) {
      return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
    }

const { year } = await request.json()
    const targetYear = year || new Date().getFullYear()

const contributions = await fetchGitHubContributions(targetYear)

const contributionMap: Record<string, {
      date: string
      commits: number
      level: 0 | 1 | 2 | 3 | 4
      color: string
    }> = {}

for (const week of contributions.contributionCalendar.weeks) {
      for (const day of week.contributionDays) {
        contributionMap[day.date] = {
          date: day.date,
          commits: day.contributionCount,
          level: getContributionLevel(day.contributionCount),
          color: day.color,
        }
      }
    }

// Calculate streaks
    let longestStreak = 0
    let currentStreak = 0
    let tempStreak = 0
    const sortedDates = Object.keys(contributionMap).sort()

for (const date of sortedDates) {
      if (contributionMap[date].commits > 0) {
        tempStreak++
        if (tempStreak > longestStreak) longestStreak = tempStreak
      } else {
        tempStreak = 0
      }
    }

const today = new Date().toISOString().split("T")[0]
    for (let i = sortedDates.length - 1; i >= 0; i--) {
      const date = sortedDates[i]
      if (date > today) continue
      if (contributionMap[date].commits > 0) {
        currentStreak++
      } else {
        break
      }
    }

const syncData = {
      totalCommits: contributions.totalCommitContributions,
      totalPRs: contributions.totalPullRequestContributions,
      totalReviews: contributions.totalPullRequestReviewContributions,
      totalContributions: contributions.contributionCalendar.totalContributions,
      longestStreak,
      currentStreak,
      contributions: contributionMap,
    }

const docId = `githubSync-${userId}-${targetYear}`

// Use createOrReplace mutation
    await sanityMutate([
      {
        createOrReplace: {
          _id: docId,
          _type: "githubSync",
          userId,
          year: targetYear,
          dataJson: JSON.stringify(syncData),
          lastSynced: new Date().toISOString(),
        },
      },
    ])

return NextResponse.json({
      success: true,
      lastSynced: new Date().toISOString(),
      ...syncData,
    })
  } catch (error) {
    console.error("GitHub sync error:", error)
    if (error instanceof Error) {
      if (error.message.includes("Not authenticated")) {
        return NextResponse.json({ error: "Not authenticated" }, { status: 401 })
      }
      if (error.message.includes("GitHub not connected")) {
        return NextResponse.json({ error: "GitHub not connected" }, { status: 403 })
      }
    }
    return NextResponse.json({ error: "Failed to sync GitHub data" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/github.ts" isMerged="true"
import { auth, clerkClient } from "@clerk/nextjs/server"
import { Octokit } from "@octokit/rest"

export async function getGitHubClient() {
  const { userId } = await auth()
  if (!userId) throw new Error("Not authenticated")

const client = await clerkClient()
  const tokens = await client.users.getUserOauthAccessToken(userId, "github")
  const accessToken = tokens.data[0]?.token
  if (!accessToken) throw new Error("GitHub not connected")

return new Octokit({ auth: accessToken })
}

export async function getGitHubUsername(): Promise<string> {
  const octokit = await getGitHubClient()
  const { data } = await octokit.users.getAuthenticated()
  return data.login
}

export interface ContributionDay {
  date: string
  contributionCount: number
  color: string
}

export interface ContributionWeek {
  contributionDays: ContributionDay[]
}

export interface ContributionCalendar {
  totalContributions: number
  weeks: ContributionWeek[]
}

export interface GitHubContributionResponse {
  user: {
    contributionsCollection: {
      contributionCalendar: ContributionCalendar
      totalCommitContributions: number
      totalPullRequestContributions: number
      totalPullRequestReviewContributions: number
      totalIssueContributions: number
      totalRepositoryContributions: number
    }
  }
}

const CONTRIBUTION_QUERY = `
query($username: String!, $from: DateTime!, $to: DateTime!) {
  user(login: $username) {
    contributionsCollection(from: $from, to: $to) {
      contributionCalendar {
        totalContributions
        weeks {
          contributionDays {
            date
            contributionCount
            color
          }
        }
      }
      totalCommitContributions
      totalPullRequestContributions
      totalPullRequestReviewContributions
      totalIssueContributions
      totalRepositoryContributions
    }
  }
}
`

export async function fetchGitHubContributions(year: number) {
  const octokit = await getGitHubClient()
  const username = await getGitHubUsername()

const from = new Date(year, 0, 1).toISOString()
  const to = new Date(year, 11, 31, 23, 59, 59).toISOString()

const response = await octokit.graphql<GitHubContributionResponse>(CONTRIBUTION_QUERY, {
    username,
    from,
    to,
  })

return response.user.contributionsCollection
}

export function getContributionLevel(count: number): 0 | 1 | 2 | 3 | 4 {
  if (count === 0) return 0
  if (count <= 3) return 1
  if (count <= 6) return 2
  if (count <= 9) return 3
  return 4
}
[V0_FILE]typescript:file="hooks/use-github-data.ts" isMerged="true"
"use client"

import useSWR, { mutate } from "swr"
import { useMemo, useState, useCallback } from "react"
import { generateGitHubYearData, generateRepoSessions, type GitHubYearStats } from "@/lib/github-data"

const fetcher = async (url: string) => {
  const res = await fetch(url)
  if (!res.ok) {
    const error = await res.json()
    throw new Error(error.error || "Failed to fetch")
  }
  return res.json()
}

interface ApiContribution {
  date: string
  commits: number
  level: 0 | 1 | 2 | 3 | 4
  color: string
}

interface GitHubApiResponse {
  totalCommits: number
  totalPRs: number
  totalReviews: number
  totalContributions: number
  longestStreak: number
  currentStreak: number
  contributions: Record<string, ApiContribution>
  lastSynced?: string
  cached?: boolean
}

export function useGitHubData(year: number) {
  const [isSyncing, setIsSyncing] = useState(false)

const { data, error, isLoading } = useSWR<GitHubApiResponse>(
    `/api/github/contributions?year=${year}`,
    fetcher,
    {
      revalidateOnFocus: false,
      errorRetryCount: 0,
      shouldRetryOnError: false,
    }
  )

const syncGitHub = useCallback(async () => {
    setIsSyncing(true)
    try {
      const res = await fetch("/api/github/sync", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ year }),
      })
      if (!res.ok) {
        const err = await res.json()
        throw new Error(err.error || "Sync failed")
      }
      await mutate(`/api/github/contributions?year=${year}`)
      return true
    } catch (err) {
      console.error("GitHub sync error:", err)
      return false
    } finally {
      setIsSyncing(false)
    }
  }, [year])

const needsSync = error?.message === "No cached data. Please sync first."
  const isAuthenticated = !error || (error.message !== "Not authenticated" && !error.message.includes("Not authenticated"))
  const isConnected = !error || error.message !== "GitHub not connected"

const githubData: GitHubYearStats = useMemo(() => {
    if (!data || error) {
      return generateGitHubYearData(year)
    }

const contributions = new Map<string, {
      date: string
      commits: number
      prsOpened: number
      prsMerged: number
      prsClosed: number
      linesAdded: number
      linesDeleted: number
      level: 0 | 1 | 2 | 3 | 4
      repos: string[]
    }>()

for (const [dateStr, contrib] of Object.entries(data.contributions)) {
      contributions.set(dateStr, {
        date: dateStr,
        commits: contrib.commits,
        prsOpened: 0,
        prsMerged: 0,
        prsClosed: 0,
        linesAdded: contrib.commits * 30,
        linesDeleted: contrib.commits * 10,
        level: contrib.level,
        repos: [],
      })
    }

return {
      totalCommits: data.totalCommits,
      totalPRsOpened: data.totalPRs,
      totalPRsMerged: Math.floor(data.totalPRs * 0.8),
      totalLinesAdded: data.totalCommits * 30,
      totalLinesDeleted: data.totalCommits * 10,
      longestStreak: data.longestStreak,
      currentStreak: data.currentStreak,
      topRepos: [],
      contributions,
    }
  }, [data, error, year])

const repoSessions = useMemo(() => {
    return generateRepoSessions(githubData.contributions)
  }, [githubData])

return {
    githubData,
    repoSessions,
    isLoading,
    isSyncing,
    isAuthenticated,
    isConnected,
    needsSync,
    lastSynced: data?.lastSynced,
    error,
    isUsingMockData: !!error || !data,
    syncGitHub,
  }
}
[V0_FILE]typescript:file="scripts/create-github-sync-schema.ts" isMerged="true"
// Sanity schema for githubSync document type
// Run this in Sanity Studio or add to your schema files

export default {
  name: 'githubSync',
  title: 'GitHub Sync',
  type: 'document',
  fields: [
    {
      name: 'userId',
      title: 'User ID',
      type: 'string',
      validation: (Rule: { required: () => unknown }) => Rule.required(),
    },
    {
      name: 'year',
      title: 'Year',
      type: 'number',
      validation: (Rule: { required: () => unknown }) => Rule.required(),
    },
    {
      name: 'dataJson',
      title: 'Data JSON',
      type: 'text',
      description: 'JSON stringified GitHub contribution data',
    },
    {
      name: 'lastSynced',
      title: 'Last Synced',
      type: 'datetime',
    },
  ],
  preview: {
    select: {
      userId: 'userId',
      year: 'year',
      lastSynced: 'lastSynced',
    },
    prepare({ userId, year, lastSynced }: { userId: string; year: number; lastSynced: string }) {
      return {
        title: `GitHub Sync - ${year}`,
        subtitle: `User: ${userId} | Last synced: ${lastSynced ? new Date(lastSynced).toLocaleDateString() : 'Never'}`,
      }
    },
  },
}
[V0_FILE]typescript:file="proxy.ts" isMerged="true"
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"

const isPublicRoute = createRouteMatcher([
  "/",
  "/api/events(.*)",
  "/api/notes(.*)",
  "/api/photos(.*)",
  "/api/upload(.*)",
  "/sign-in(.*)",
  "/sign-up(.*)",
])

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files
    "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    // Always run for API routes
    "/(api|trpc)(.*)",
  ],
}
[V0_FILE]typescriptreact:file="components/integration-status.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { SignInButton, SignOutButton, useUser, useClerk } from "@clerk/nextjs"
import { Github, RefreshCw, Check, X, LogOut, User, Calendar } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"

interface AuthStatus {
  authenticated: boolean
  userId?: string
  github: {
    connected: boolean
    username?: string | null
  }
  google: {
    connected: boolean
    email?: string | null
  }
}

interface IntegrationStatusProps {
  onGoogleSync?: () => Promise<void>
  onGitHubSync?: () => Promise<boolean>
  lastGoogleSync?: Date | null
  lastGitHubSync?: string | null
  isGitHubSyncing?: boolean
}

export function IntegrationStatus({ onGoogleSync, onGitHubSync, lastGoogleSync, lastGitHubSync, isGitHubSyncing }: IntegrationStatusProps) {
  const { isSignedIn, user } = useUser()
  const { openUserProfile } = useClerk()
  const [status, setStatus] = useState<AuthStatus | null>(null)
  const [isGoogleSyncing, setIsGoogleSyncing] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

const fetchStatus = useCallback(async () => {
    try {
      const response = await fetch("/api/auth/status")
      const data = await response.json()
      setStatus(data)
    } catch (error) {
      console.error("Failed to fetch auth status:", error)
    } finally {
      setIsLoading(false)
    }
  }, [])

useEffect(() => {
    fetchStatus()
  }, [fetchStatus, isSignedIn])

const handleGoogleSync = async () => {
    if (!onGoogleSync) return
    setIsGoogleSyncing(true)
    try {
      await onGoogleSync()
    } finally {
      setIsGoogleSyncing(false)
    }
  }

const handleGitHubSync = async () => {
    if (!onGitHubSync) return
    await onGitHubSync()
  }

if (isLoading) {
    return (
      <div className="flex items-center gap-1 px-2 py-1 rounded-md bg-muted/50">
        <RefreshCw className="h-3 w-3 animate-spin text-muted-foreground" />
      </div>
    )
  }

if (!isSignedIn || !status?.authenticated) {
    return (
      <SignInButton mode="modal">
        <Button variant="outline" size="sm" className="h-5 gap-1 text-[10px] px-1.5 bg-transparent">
          <User className="h-2.5 w-2.5" />
          Sign In
        </Button>
      </SignInButton>
    )
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sm" className="h-5 gap-1 text-[10px] px-1.5">
          <div className="flex items-center gap-1">
            <div
              className={cn(
                "w-1.5 h-1.5 rounded-full",
                status.github.connected ? "bg-green-500" : "bg-zinc-400"
              )}
            />
            <Github className="h-2.5 w-2.5" />
            <div
              className={cn(
                "w-1.5 h-1.5 rounded-full",
                status.google.connected ? "bg-green-500" : "bg-zinc-400"
              )}
            />
            <Calendar className="h-2.5 w-2.5" />
          </div>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-64">
        <DropdownMenuLabel className="flex items-center gap-2">
          <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center">
            {user?.imageUrl ? (
              <img src={user.imageUrl || "/placeholder.svg"} alt="" className="w-6 h-6 rounded-full" />
            ) : (
              <User className="h-3 w-3" />
            )}
          </div>
          <div className="flex flex-col">
            <span className="text-sm font-medium">{user?.fullName || user?.username}</span>
            <span className="text-xs text-muted-foreground">{user?.primaryEmailAddress?.emailAddress}</span>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />

<DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
          Integrations
        </DropdownMenuLabel>

<DropdownMenuItem
          className="flex items-center justify-between cursor-pointer"
          onClick={() => {
            if (!status.github.connected) {
              window.location.href = "/sign-in?redirect_url=" + encodeURIComponent(window.location.href)
            }
          }}
        >
          <div className="flex items-center gap-2">
            <Github className="h-4 w-4" />
            <span>GitHub</span>
          </div>
          {status.github.connected ? (
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Check className="h-3 w-3 text-green-500" />
              <span>@{status.github.username}</span>
            </div>
          ) : (
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <X className="h-3 w-3 text-zinc-400" />
              <span>Connect</span>
            </div>
          )}
        </DropdownMenuItem>

{status.github.connected && onGitHubSync && (
          <DropdownMenuItem className="flex items-center gap-2 cursor-pointer pl-8" onClick={handleGitHubSync}>
            <RefreshCw className={cn("h-3 w-3", isGitHubSyncing && "animate-spin")} />
            <div className="flex flex-col">
              <span className="text-xs">Sync GitHub</span>
              {lastGitHubSync && (
                <span className="text-[10px] text-muted-foreground">
                  {new Date(lastGitHubSync).toLocaleString()}
                </span>
              )}
            </div>
          </DropdownMenuItem>
        )}

<DropdownMenuItem
          className="flex items-center justify-between cursor-pointer"
          onClick={() => {
            if (!status.google.connected) {
              window.location.href = "/sign-in?redirect_url=" + encodeURIComponent(window.location.href)
            }
          }}
        >
          <div className="flex items-center gap-2">
            <Calendar className="h-4 w-4" />
            <span>Google Calendar</span>
          </div>
          {status.google.connected ? (
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Check className="h-3 w-3 text-green-500" />
              <span className="truncate max-w-[100px]">{status.google.email}</span>
            </div>
          ) : (
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              <X className="h-3 w-3 text-zinc-400" />
              <span>Connect</span>
            </div>
          )}
        </DropdownMenuItem>

{status.google.connected && onGoogleSync && (
          <DropdownMenuItem className="flex items-center gap-2 cursor-pointer pl-8" onClick={handleGoogleSync}>
            <RefreshCw className={cn("h-3 w-3", isGoogleSyncing && "animate-spin")} />
            <div className="flex flex-col">
              <span className="text-xs">Sync Google Calendar</span>
              {lastGoogleSync && (
                <span className="text-[10px] text-muted-foreground">
                  {lastGoogleSync.toLocaleString()}
                </span>
              )}
            </div>
          </DropdownMenuItem>
        )}

<DropdownMenuItem
          className="flex items-center gap-2 cursor-pointer text-muted-foreground"
          onClick={() => openUserProfile()}
        >
          <User className="h-4 w-4" />
          <span>Manage Account</span>
        </DropdownMenuItem>

<SignOutButton>
          <DropdownMenuItem className="flex items-center gap-2 cursor-pointer text-destructive">
            <LogOut className="h-4 w-4" />
            <span>Sign Out</span>
          </DropdownMenuItem>
        </SignOutButton>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescript:file="app/api/auth/status/route.ts" isMerged="true"
import { auth, currentUser } from "@clerk/nextjs/server"
import { NextResponse } from "next/server"

export async function GET() {
  try {
    const { userId } = await auth()
    
    if (!userId) {
      return NextResponse.json({
        authenticated: false,
        github: { connected: false },
        google: { connected: false },
      })
    }

const user = await currentUser()
    
    // Check for GitHub OAuth account
    const githubAccount = user?.externalAccounts?.find(
      (account) => account.provider === "oauth_github"
    )
    
    // Check for Google OAuth account
    const googleAccount = user?.externalAccounts?.find(
      (account) => account.provider === "oauth_google"
    )

return NextResponse.json({
      authenticated: true,
      userId,
      github: {
        connected: !!githubAccount,
        username: githubAccount?.username || null,
      },
      google: {
        connected: !!googleAccount,
        email: googleAccount?.emailAddress || null,
      },
    })
  } catch (error) {
    console.error("Error fetching auth status:", error)
    return NextResponse.json({
      authenticated: false,
      github: { connected: false },
      google: { connected: false },
    })
  }
}
[V0_FILE]typescriptreact:file="components/github-year-view.tsx" isMerged="true"
"use client"

import type React from "react"

import { useMemo, useRef, useState, useEffect } from "react"
import {
  GitCommit,
  GitPullRequest,
  GitMerge,
  Plus,
  Minus,
  Flame,
  Trophy,
  Code2,
  X,
  FileCode,
  BarChart3,
  RefreshCw,
  AlertCircle,
  ChevronLeft,
  ChevronRight,
  ExternalLink,
  Calendar,
} from "lucide-react"
import { useTheme } from "next-themes"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import {
  getContributionBg,
  type DayContribution,
  type RepoWorkSession,
  type GitHubYearStats,
  generateGitHubYearData,
  generateRepoSessions,
} from "@/lib/github-data"
import { cn } from "@/lib/utils"

const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
const DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]
const COLS = 21
const ROWS = 18
const MAX_SWIMLANES_PER_ROW = 2

const REPO_COLORS: Record<string, { borderColor: string; lightFill: string; textDark: string; textLight: string }> = {
  "annual-calendar-2026": {
    borderColor: "#3b82f6",
    lightFill: "rgba(59,130,246,0.15)",
    textDark: "#1e40af",
    textLight: "#ffffff",
  },
  "sanity-cms-integration": {
    borderColor: "#f97316",
    lightFill: "rgba(249,115,22,0.15)",
    textDark: "#c2410c",
    textLight: "#ffffff",
  },
  "ai-event-parser": {
    borderColor: "#a855f7",
    lightFill: "rgba(168,85,247,0.15)",
    textDark: "#7c3aed",
    textLight: "#ffffff",
  },
  "nextjs-starter": {
    borderColor: "#10b981",
    lightFill: "rgba(16,185,129,0.15)",
    textDark: "#047857",
    textLight: "#ffffff",
  },
  "design-system": {
    borderColor: "#ec4899",
    lightFill: "rgba(236,72,153,0.15)",
    textDark: "#be185d",
    textLight: "#ffffff",
  },
  "api-gateway": {
    borderColor: "#14b8a6",
    lightFill: "rgba(20,184,166,0.15)",
    textDark: "#0f766e",
    textLight: "#ffffff",
  },
  "mobile-app": {
    borderColor: "#ef4444",
    lightFill: "rgba(239,68,68,0.15)",
    textDark: "#dc2626",
    textLight: "#ffffff",
  },
  "docs-site": {
    borderColor: "#f59e0b",
    lightFill: "rgba(245,158,11,0.15)",
    textDark: "#92400e",
    textLight: "#000000",
  },
}

function getRepoColor(repo: string) {
  return (
    REPO_COLORS[repo] || {
      borderColor: "#6b7280",
      lightFill: "rgba(107,114,128,0.15)",
      textDark: "#4b5563",
      textLight: "#ffffff",
    }
  )
}

function isPastDay(date: Date) {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  const checkDate = new Date(date)
  checkDate.setHours(0, 0, 0, 0)
  return checkDate < today
}

function isToday(date: Date) {
  const today = new Date()
  return (
    date.getFullYear() === today.getFullYear() &&
    date.getMonth() === today.getMonth() &&
    date.getDate() === today.getDate()
  )
}

function formatNumber(num: number): string {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "k"
  }
  return num.toString()
}

// ... existing GitHubDayTooltip component ...
function GitHubDayTooltip({
  children,
  date,
  contribution,
}: {
  children: React.ReactNode
  date: Date
  contribution: DayContribution | null
}) {
  const formattedDate = date.toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  })

return (
    <TooltipPrimitive.Root>
      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
      <TooltipPrimitive.Portal>
        <TooltipPrimitive.Content
          side="top"
          sideOffset={8}
          className="z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-xl px-4 py-3 max-w-xs animate-in fade-in-0 zoom-in-95 duration-150"
        >
          <TooltipPrimitive.Arrow className="fill-white dark:fill-zinc-900" width={12} height={6} />
          <p className="font-semibold text-zinc-900 dark:text-zinc-100 text-sm mb-2">{formattedDate}</p>

{contribution && contribution.commits > 0 ? (
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <GitCommit className="h-3.5 w-3.5 text-emerald-500" />
                <span className="text-sm text-zinc-700 dark:text-zinc-300">{contribution.commits} commits</span>
              </div>

<div className="flex items-center gap-4 text-xs">
                <span className="text-green-600 dark:text-green-400">+{contribution.linesAdded} lines</span>
                <span className="text-red-600 dark:text-red-400">-{contribution.linesDeleted} lines</span>
              </div>

{(contribution.prsOpened > 0 || contribution.prsMerged > 0) && (
                <div className="flex items-center gap-3 text-xs pt-1 border-t border-zinc-200 dark:border-zinc-700">
                  {contribution.prsOpened > 0 && (
                    <span className="flex items-center gap-1 text-green-600 dark:text-green-400">
                      <GitPullRequest className="h-3 w-3" />
                      {contribution.prsOpened} opened
                    </span>
                  )}
                  {contribution.prsMerged > 0 && (
                    <span className="flex items-center gap-1 text-purple-600 dark:text-purple-400">
                      <GitMerge className="h-3 w-3" />
                      {contribution.prsMerged} merged
                    </span>
                  )}
                </div>
              )}

{contribution.repos.length > 0 && (
                <div className="flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 pt-1 border-t border-zinc-200 dark:border-zinc-700">
                  <FileCode className="h-3 w-3" />
                  <span className="truncate">{contribution.repos.join(", ")}</span>
                </div>
              )}
            </div>
          ) : (
            <p className="text-sm text-zinc-500 dark:text-zinc-400">No contributions</p>
          )}
        </TooltipPrimitive.Content>
      </TooltipPrimitive.Portal>
    </TooltipPrimitive.Root>
  )
}

// ... existing SessionDetailSheet component ...
function SessionDetailSheet({
  session,
  open,
  onClose,
}: {
  session: RepoWorkSession | null
  open: boolean
  onClose: () => void
}) {
  if (!session) return null

const startDate = new Date(session.startDate + "T12:00:00")
  const endDate = new Date(session.endDate + "T12:00:00")
  const days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1

let peakCommits = 0
  let peakDate = session.startDate
  session.dailyCommits.forEach((commits, date) => {
    if (commits > peakCommits) {
      peakCommits = commits
      peakDate = date
    }
  })

const dailyBreakdown = Array.from(session.dailyCommits.entries())
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([date, commits]) => ({
      date: new Date(date + "T12:00:00"),
      commits,
    }))

return (
    <DialogPrimitive.Root open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/40 z-50 animate-in fade-in-0 duration-200" />
        <DialogPrimitive.Content className="fixed right-0 top-0 h-full w-full max-w-md bg-background border-l border-border shadow-2xl z-50 animate-in slide-in-from-right duration-300 overflow-y-auto">
          <div className="p-6">
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="w-4 h-4 rounded" style={{ backgroundColor: session.color }} />
                <div>
                  <h2 className="text-xl font-bold text-foreground">{session.repo}</h2>
                  <p className="text-sm text-muted-foreground">
                    {startDate.toLocaleDateString("en-US", { month: "long", day: "numeric" })} -{" "}
                    {endDate.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
                  </p>
                </div>
              </div>
              <DialogPrimitive.Close asChild>
                <button className="p-2 rounded-md hover:bg-muted transition-colors">
                  <X className="h-5 w-5 text-muted-foreground" />
                </button>
              </DialogPrimitive.Close>
            </div>

<div className="grid grid-cols-2 gap-4 mb-6">
              <div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <GitCommit className="h-4 w-4 text-emerald-500" />
                  <span className="text-sm text-muted-foreground">Total Commits</span>
                </div>
                <p className="text-2xl font-bold text-foreground">{session.totalCommits}</p>
              </div>
              <div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <Code2 className="h-4 w-4 text-blue-500" />
                  <span className="text-sm text-muted-foreground">Active Days</span>
                </div>
                <p className="text-2xl font-bold text-foreground">{days}</p>
              </div>
              <div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <Flame className="h-4 w-4 text-orange-500" />
                  <span className="text-sm text-muted-foreground">Peak Day</span>
                </div>
                <p className="text-lg font-bold text-foreground">{peakCommits} commits</p>
                <p className="text-xs text-muted-foreground">
                  {new Date(peakDate + "T12:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" })}
                </p>
              </div>
              <div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <Trophy className="h-4 w-4 text-yellow-500" />
                  <span className="text-sm text-muted-foreground">Avg/Day</span>
                </div>
                <p className="text-2xl font-bold text-foreground">{(session.totalCommits / days).toFixed(1)}</p>
              </div>
            </div>

<div>
              <h3 className="text-sm font-semibold text-foreground mb-3">Daily Activity</h3>
              <div className="space-y-2 max-h-[300px] overflow-y-auto">
                {dailyBreakdown.map(({ date, commits }) => {
                  const intensity = commits / peakCommits
                  return (
                    <div key={date.toISOString()} className="flex items-center gap-3 py-2 border-b border-border/30">
                      <span className="text-xs text-muted-foreground w-20">
                        {date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}
                      </span>
                      <div className="flex-1 h-4 bg-muted rounded overflow-hidden">
                        <div
                          className="h-full rounded transition-all"
                          style={{
                            width: `${intensity * 100}%`,
                            backgroundColor: session.color,
                            opacity: 0.3 + intensity * 0.7,
                          }}
                        />
                      </div>
                      <span className="text-sm font-medium text-foreground w-16 text-right">{commits} commits</span>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

interface StatsDialogProps {
  year: number
  githubData: GitHubYearStats
  isUsingMockData?: boolean
  lastSynced?: string
  onSync?: () => Promise<boolean>
  isSyncing?: boolean
}

export function StatsDialog({ year, githubData, isUsingMockData, lastSynced, onSync, isSyncing }: StatsDialogProps) {
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === "dark"

return (
    <DialogPrimitive.Root>
      <DialogPrimitive.Trigger asChild>
        <button className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors">
          <BarChart3 className="h-3.5 w-3.5" />
          Stats
        </button>
      </DialogPrimitive.Trigger>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/40 z-50 animate-in fade-in-0 duration-200" />
        <DialogPrimitive.Content className="fixed right-0 top-0 h-full w-full max-w-sm bg-background border-l border-border shadow-2xl z-50 animate-in slide-in-from-right duration-300 overflow-y-auto">
          <DialogPrimitive.Description className="sr-only">GitHub year statistics and sync options</DialogPrimitive.Description>
          <div className="p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold text-foreground">Year in Code</h2>
              <DialogPrimitive.Close asChild>
                <button className="p-2 rounded-md hover:bg-muted transition-colors">
                  <X className="h-5 w-5 text-muted-foreground" />
                </button>
              </DialogPrimitive.Close>
            </div>
            
            {/* Sync status */}
            {isUsingMockData && (
              <div className="mb-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
                <p className="text-xs text-amber-600 dark:text-amber-400">
                  Using sample data. Connect GitHub to see real contributions.
                </p>
                {onSync && (
                  <button 
                    onClick={onSync}
                    disabled={isSyncing}
                    className="mt-2 text-xs font-medium text-amber-700 dark:text-amber-300 hover:underline disabled:opacity-50"
                  >
                    {isSyncing ? "Syncing..." : "Sync now"}
                  </button>
                )}
              </div>
            )}
            {!isUsingMockData && lastSynced && (
              <div className="mb-4 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-between">
                <p className="text-xs text-emerald-600 dark:text-emerald-400">
                  Last synced: {new Date(lastSynced).toLocaleDateString()}
                </p>
                {onSync && (
                  <button 
                    onClick={onSync}
                    disabled={isSyncing}
                    className="text-xs font-medium text-emerald-700 dark:text-emerald-300 hover:underline disabled:opacity-50"
                  >
                    {isSyncing ? "Syncing..." : "Refresh"}
                  </button>
                )}
              </div>
            )}

<div className="space-y-4">
              <div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <GitCommit className="h-4 w-4 text-emerald-500" />
                  <span className="text-sm text-muted-foreground">Total Commits</span>
                </div>
                <p className="text-3xl font-bold text-foreground">{formatNumber(githubData.totalCommits)}</p>
              </div>

<div className="p-4 rounded-lg bg-muted/50">
                <div className="flex items-center gap-2 mb-1">
                  <GitMerge className="h-4 w-4 text-purple-500" />
                  <span className="text-sm text-muted-foreground">PRs Merged</span>
                </div>
                <p className="text-3xl font-bold text-foreground">{githubData.totalPRsMerged}</p>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="p-4 rounded-lg bg-muted/50">
                  <div className="flex items-center gap-2 mb-1">
                    <Plus className="h-4 w-4 text-green-500" />
                    <span className="text-xs text-muted-foreground">Lines Added</span>
                  </div>
                  <p className="text-xl font-bold text-green-600 dark:text-green-400">
                    {formatNumber(githubData.totalLinesAdded)}
                  </p>
                </div>
                <div className="p-4 rounded-lg bg-muted/50">
                  <div className="flex items-center gap-2 mb-1">
                    <Minus className="h-4 w-4 text-red-500" />
                    <span className="text-xs text-muted-foreground">Lines Deleted</span>
                  </div>
                  <p className="text-xl font-bold text-red-600 dark:text-red-400">
                    {formatNumber(githubData.totalLinesDeleted)}
                  </p>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="p-4 rounded-lg bg-muted/50">
                  <div className="flex items-center gap-2 mb-1">
                    <Flame className="h-4 w-4 text-orange-500" />
                    <span className="text-xs text-muted-foreground">Current Streak</span>
                  </div>
                  <p className="text-xl font-bold text-foreground">{githubData.currentStreak} days</p>
                </div>
                <div className="p-4 rounded-lg bg-muted/50">
                  <div className="flex items-center gap-2 mb-1">
                    <Trophy className="h-4 w-4 text-yellow-500" />
                    <span className="text-xs text-muted-foreground">Longest Streak</span>
                  </div>
                  <p className="text-xl font-bold text-foreground">{githubData.longestStreak} days</p>
                </div>
              </div>

{/* Contribution legend */}
              <div className="p-4 rounded-lg bg-muted/50">
                <p className="text-xs text-muted-foreground mb-2">Contribution Levels</p>
                <div className="flex items-center gap-1.5">
                  <span className="text-xs text-muted-foreground">Less</span>
                  {[0, 1, 2, 3, 4].map((level) => (
                    <div
                      key={level}
                      className="w-4 h-4 rounded-sm"
                      style={{ backgroundColor: getContributionBg(level as 0 | 1 | 2 | 3 | 4, isDark) }}
                    />
                  ))}
                  <span className="text-xs text-muted-foreground">More</span>
                </div>
              </div>
            </div>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

// Helper to get activity level label
function getActivityLabel(level: 0 | 1 | 2 | 3 | 4): string {
  const labels = ["No activity", "Light activity", "Moderate activity", "High activity", "Intense activity"]
  return labels[level]
}

// Helper to get contribution level based on commits
function getContributionLevel(commits: number): 0 | 1 | 2 | 3 | 4 {
  if (commits === 0) return 0
  if (commits <= 3) return 1
  if (commits <= 6) return 2
  if (commits <= 10) return 3
  return 4
}

// Helper to get heat square size based on level
function getHeatSquareSize(level: 0 | 1 | 2 | 3 | 4): string {
  const sizes = ["w-0 h-0", "w-3 h-3", "w-4 h-4", "w-5 h-5", "w-6 h-6"]
  return sizes[level]
}

// Day Detail Sheet Component
function DayDetailSheet({
  day,
  contribution,
  githubData,
  open,
  onClose,
  onPrev,
  onNext,
  year,
}: {
  day: { date: Date; dayIndex: number } | null
  contribution: DayContribution | null
  githubData: GitHubYearStats
  open: boolean
  onClose: () => void
  onPrev: () => void
  onNext: () => void
  year: number
}) {
  if (!day) return null

const dayOfYear = day.dayIndex + 1
  const weekOfYear = Math.ceil(dayOfYear / 7)
  const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6
  const level = contribution ? getContributionLevel(contribution.commits) : 0
  
  // Calculate stats
  const activeDays = Array.from(githubData.contributions.values()).filter(c => c.commits > 0).length
  const avgDailyCommits = activeDays > 0 ? githubData.totalCommits / activeDays : 0
  const totalYearLines = githubData.totalLinesAdded + githubData.totalLinesDeleted
  
  // Check if day is in current streak (simple check: is it recent and has contributions)
  const today = new Date()
  const dayDate = new Date(day.date)
  const daysAgo = Math.floor((today.getTime() - dayDate.getTime()) / (1000 * 60 * 60 * 24))
  const isInCurrentStreak = contribution && contribution.commits > 0 && daysAgo <= githubData.currentStreak

const formattedDate = day.date.toLocaleDateString("en-US", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  })

const dateStr = day.date.toISOString().split("T")[0]
  const githubUrl = `https://github.com?tab=overview&from=${dateStr}&to=${dateStr}`

return (
    <DialogPrimitive.Root open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/40 z-50 animate-in fade-in-0 duration-200" />
        <DialogPrimitive.Content className="fixed right-0 top-0 h-full w-full max-w-md bg-background border-l border-border shadow-2xl z-50 animate-in slide-in-from-right duration-300 overflow-y-auto">
          <DialogPrimitive.Description className="sr-only">Day contribution details</DialogPrimitive.Description>
          <div className="p-6">
            {/* Header */}
            <div className="flex items-start justify-between mb-4">
              <div>
                <h2 className="text-xl font-bold text-foreground">{formattedDate}</h2>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-sm text-muted-foreground">{getActivityLabel(level)}</span>
                  {isWeekend && (
                    <span className="text-[10px] px-1.5 py-0.5 bg-muted rounded text-muted-foreground">Weekend</span>
                  )}
                </div>
              </div>
              <DialogPrimitive.Close asChild>
                <button className="p-2 rounded-md hover:bg-muted transition-colors">
                  <X className="h-5 w-5 text-muted-foreground" />
                </button>
              </DialogPrimitive.Close>
            </div>

{/* Navigation */}
            <div className="flex items-center justify-between mb-4 py-2 border-y border-border">
              <button onClick={onPrev} className="p-1.5 rounded hover:bg-muted transition-colors">
                <ChevronLeft className="h-4 w-4 text-muted-foreground" />
              </button>
              <span className="text-xs text-muted-foreground">
                Day {dayOfYear} · Week {weekOfYear}
              </span>
              <button onClick={onNext} className="p-1.5 rounded hover:bg-muted transition-colors">
                <ChevronRight className="h-4 w-4 text-muted-foreground" />
              </button>
            </div>

{/* Streak banner */}
            {isInCurrentStreak && (
              <div className="mb-4 p-3 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center gap-2">
                <Flame className="h-4 w-4 text-orange-500" />
                <span className="text-sm font-medium text-orange-600 dark:text-orange-400">
                  Part of your {githubData.currentStreak}-day streak!
                </span>
              </div>
            )}

{contribution && contribution.commits > 0 ? (
              <>
                {/* Stats grid */}
                <div className="grid grid-cols-2 gap-3 mb-6">
                  <div className="p-3 rounded-lg bg-muted/50">
                    <div className="flex items-center gap-2 mb-1">
                      <GitCommit className="h-3.5 w-3.5 text-emerald-500" />
                      <span className="text-xs text-muted-foreground">Commits</span>
                    </div>
                    <p className="text-xl font-bold text-foreground">{contribution.commits}</p>
                    {avgDailyCommits > 0 && (
                      <p className="text-[10px] text-muted-foreground">
                        {contribution.commits > avgDailyCommits ? "+" : ""}
                        {Math.round(((contribution.commits - avgDailyCommits) / avgDailyCommits) * 100)}% vs avg
                      </p>
                    )}
                  </div>
                  
                  <div className="p-3 rounded-lg bg-muted/50">
                    <div className="flex items-center gap-2 mb-1">
                      <Code2 className="h-3.5 w-3.5 text-blue-500" />
                      <span className="text-xs text-muted-foreground">Net Lines</span>
                    </div>
                    <p className={cn(
                      "text-xl font-bold",
                      contribution.linesAdded - contribution.linesDeleted >= 0 ? "text-green-600" : "text-red-600"
                    )}>
                      {contribution.linesAdded - contribution.linesDeleted >= 0 ? "+" : ""}
                      {contribution.linesAdded - contribution.linesDeleted}
                    </p>
                    {totalYearLines > 0 && (
                      <p className="text-[10px] text-muted-foreground">
                        {((contribution.linesAdded + contribution.linesDeleted) / totalYearLines * 100).toFixed(1)}% of year
                      </p>
                    )}
                  </div>

<div className="p-3 rounded-lg bg-muted/50">
                    <div className="flex items-center gap-2 mb-1">
                      <Plus className="h-3.5 w-3.5 text-green-500" />
                      <span className="text-xs text-muted-foreground">Added</span>
                    </div>
                    <p className="text-lg font-bold text-green-600 dark:text-green-400">
                      +{formatNumber(contribution.linesAdded)}
                    </p>
                  </div>

<div className="p-3 rounded-lg bg-muted/50">
                    <div className="flex items-center gap-2 mb-1">
                      <Minus className="h-3.5 w-3.5 text-red-500" />
                      <span className="text-xs text-muted-foreground">Deleted</span>
                    </div>
                    <p className="text-lg font-bold text-red-600 dark:text-red-400">
                      -{formatNumber(contribution.linesDeleted)}
                    </p>
                  </div>

{(contribution.prsOpened > 0 || contribution.prsMerged > 0) && (
                    <>
                      {contribution.prsOpened > 0 && (
                        <div className="p-3 rounded-lg bg-muted/50">
                          <div className="flex items-center gap-2 mb-1">
                            <GitPullRequest className="h-3.5 w-3.5 text-green-500" />
                            <span className="text-xs text-muted-foreground">PRs Opened</span>
                          </div>
                          <p className="text-lg font-bold text-foreground">{contribution.prsOpened}</p>
                        </div>
                      )}
                      {contribution.prsMerged > 0 && (
                        <div className="p-3 rounded-lg bg-muted/50">
                          <div className="flex items-center gap-2 mb-1">
                            <GitMerge className="h-3.5 w-3.5 text-purple-500" />
                            <span className="text-xs text-muted-foreground">PRs Merged</span>
                          </div>
                          <p className="text-lg font-bold text-foreground">{contribution.prsMerged}</p>
                        </div>
                      )}
                    </>
                  )}
                </div>

{/* Repos worked on */}
                {contribution.repos.length > 0 && (
                  <div className="mb-6">
                    <h3 className="text-sm font-semibold text-foreground mb-2">Repos worked on</h3>
                    <div className="flex flex-wrap gap-2">
                      {contribution.repos.map((repo) => {
                        const colors = getRepoColor(repo)
                        return (
                          <span
                            key={repo}
                            className="text-xs px-2 py-1 rounded"
                            style={{
                              backgroundColor: colors.lightFill,
                              borderLeft: `3px solid ${colors.borderColor}`,
                            }}
                          >
                            {repo}
                          </span>
                        )
                      })}
                    </div>
                  </div>
                )}
              </>
            ) : (
              <div className="py-12 text-center">
                <Calendar className="h-12 w-12 mx-auto text-muted-foreground/30 mb-3" />
                <p className="text-muted-foreground">No contributions on this day</p>
                <p className="text-xs text-muted-foreground/60 mt-1">Rest days are important too!</p>
              </div>
            )}

{/* View on GitHub button */}
            <a
              href={githubUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-medium text-sm hover:opacity-90 transition-opacity"
            >
              <ExternalLink className="h-4 w-4" />
              View on GitHub
            </a>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

interface GitHubYearViewProps {
  year: number
  selectedRepos: string[]
  onReposChange: (repos: string[]) => void
  githubData: GitHubYearStats
  repoSessions: RepoWorkSession[]
  isUsingMockData?: boolean
  lastSynced?: string
  onSync?: () => Promise<boolean>
  isSyncing?: boolean
}

export function GitHubYearView({ 
  year, 
  selectedRepos, 
  onReposChange,
  githubData,
  repoSessions,
  isUsingMockData,
  lastSynced,
  onSync,
  isSyncing,
}: GitHubYearViewProps) {
  const scrollRef = useRef<HTMLDivElement>(null)
  const gridRef = useRef<HTMLDivElement>(null)
  const { resolvedTheme } = useTheme()
  const isDark = resolvedTheme === "dark"

const [selectedSession, setSelectedSession] = useState<RepoWorkSession | null>(null)
  const [sheetOpen, setSheetOpen] = useState(false)
  
  // Day detail sheet state
  const [selectedDayIndex, setSelectedDayIndex] = useState<number | null>(null)
  const [daySheetOpen, setDaySheetOpen] = useState(false)

const allRepos = useMemo(() => {
    const repoSet = new Set<string>()
    repoSessions.forEach((session) => repoSet.add(session.repo))
    return Array.from(repoSet).map((name) => ({
      name,
      color: getRepoColor(name).borderColor,
    }))
  }, [repoSessions])

useEffect(() => {
    const repoNames = allRepos.map((r) => r.name)
    // Only update if repos actually changed
    const hasNewRepos = repoNames.some((r) => !selectedRepos.includes(r))
    const hasRemovedRepos = selectedRepos.some((r) => !repoNames.includes(r))

if (hasNewRepos || hasRemovedRepos) {
      const filtered = selectedRepos.filter((r) => repoNames.includes(r))
      const newRepos = repoNames.filter((r) => !selectedRepos.includes(r))
      onReposChange([...filtered, ...newRepos])
    }
  }, [allRepos, selectedRepos, onReposChange])

// Filter sessions by selected repos
  const filteredSessions = useMemo(() => {
    return repoSessions.filter((session) => selectedRepos.includes(session.repo))
  }, [repoSessions, selectedRepos])

const gridData = useMemo(() => {
    const grid: ({
      date: Date
      dayOfMonth: number
      month: number
      dayOfWeek: number
      dayIndex: number
      contribution: DayContribution | null
    } | null)[][] = []
    const startDate = new Date(year, 0, 1)
    const endDate = new Date(year, 11, 31)
    const totalDays = Math.floor((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)) + 1

const sessionPositions = useMemo(() => {
    const positions: {
      session: RepoWorkSession
      row: number
      startCol: number
      endCol: number
      isStart: boolean
      isEnd: boolean
      slotIndex: number
    }[] = []

const rowSlots: Map<number, Set<number>[]> = new Map()

filteredSessions.forEach((session) => {
      const sessionStart = new Date(session.startDate + "T00:00:00")
      const sessionEnd = new Date(session.endDate + "T23:59:59")

gridData.forEach((row, rowIndex) => {
        let startCol = -1
        let endCol = -1

row.forEach((day, colIndex) => {
          if (!day) return
          const dayDate = new Date(day.date)
          dayDate.setHours(12, 0, 0, 0)

if (dayDate >= sessionStart && dayDate <= sessionEnd) {
            if (startCol === -1) startCol = colIndex
            endCol = colIndex
          }
        })

if (startCol !== -1) {
          if (!rowSlots.has(rowIndex)) {
            rowSlots.set(rowIndex, [])
          }
          const slots = rowSlots.get(rowIndex)!

if (slotIndex < MAX_SWIMLANES_PER_ROW) {
            for (let c = startCol; c <= endCol; c++) {
              slots[slotIndex].add(c)
            }

const firstDayInRow = row[startCol]?.date
            const lastDayInRow = row[endCol]?.date

positions.push({
              session,
              row: rowIndex,
              startCol,
              endCol,
              isStart: firstDayInRow ? firstDayInRow.toISOString().split("T")[0] === session.startDate : false,
              isEnd: lastDayInRow ? lastDayInRow.toISOString().split("T")[0] === session.endDate : false,
              slotIndex,
            })
          }
        }
      })
    })

return positions
  }, [filteredSessions, gridData])

const sessionsByRow = useMemo(() => {
    const byRow: Map<number, typeof sessionPositions> = new Map()
    sessionPositions.forEach((pos) => {
      if (!byRow.has(pos.row)) {
        byRow.set(pos.row, [])
      }
      byRow.get(pos.row)!.push(pos)
    })
    return byRow
  }, [sessionPositions])

const handleSessionClick = (session: RepoWorkSession) => {
    setSelectedSession(session)
    setSheetOpen(true)
  }

const handleDayClick = (dayIndex: number) => {
    setSelectedDayIndex(dayIndex)
    setDaySheetOpen(true)
  }

const handlePrevDay = () => {
    if (selectedDayIndex !== null && selectedDayIndex > 0) {
      setSelectedDayIndex(selectedDayIndex - 1)
    }
  }

const handleNextDay = () => {
    const totalDays = gridData.flat().filter(Boolean).length
    if (selectedDayIndex !== null && selectedDayIndex < totalDays - 1) {
      setSelectedDayIndex(selectedDayIndex + 1)
    }
  }

// Get selected day data for the sheet
  const selectedDayData = useMemo(() => {
    if (selectedDayIndex === null) return null
    const flatDays = gridData.flat().filter(Boolean)
    const day = flatDays[selectedDayIndex]
    if (!day) return null
    return {
      date: day.date,
      dayIndex: selectedDayIndex,
      contribution: day.contribution,
    }
  }, [selectedDayIndex, gridData])

return (
    <TooltipPrimitive.Provider delayDuration={800} skipDelayDuration={300}>
      <div className="h-full flex flex-col">
        {/* Data Status Banner */}
        {isUsingMockData && (
          <div className="flex items-center gap-2 px-4 py-2 bg-amber-500/10 border-b border-amber-500/20">
            <AlertCircle className="h-4 w-4 text-amber-600 dark:text-amber-400 flex-shrink-0" />
            <span className="text-xs text-amber-600 dark:text-amber-400 flex-1">
              Showing demo data. Sign in with GitHub to see your real contributions.
            </span>
            {onSync && (
              <button
                onClick={onSync}
                disabled={isSyncing}
                className="text-xs font-medium px-2 py-1 rounded bg-amber-500/20 text-amber-700 dark:text-amber-300 hover:bg-amber-500/30 disabled:opacity-50 transition-colors flex items-center gap-1"
              >
                {isSyncing && <RefreshCw className="h-3 w-3 animate-spin" />}
                {isSyncing ? "Syncing..." : "Connect GitHub"}
              </button>
            )}
          </div>
        )}
        {!isUsingMockData && lastSynced && (
          <div className="flex items-center justify-between px-4 py-2 bg-emerald-500/10 border-b border-emerald-500/20">
            <span className="text-xs text-emerald-600 dark:text-emerald-400">
              Last synced: {new Date(lastSynced).toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })}
            </span>
            {onSync && (
              <button
                onClick={onSync}
                disabled={isSyncing}
                className="text-xs font-medium px-2 py-1 rounded bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-500/30 disabled:opacity-50 transition-colors flex items-center gap-1"
              >
                {isSyncing && <RefreshCw className="h-3 w-3 animate-spin" />}
                {isSyncing ? "Syncing..." : "Refresh"}
              </button>
            )}
          </div>
        )}

{/* Calendar Grid */}
        <div ref={scrollRef} className="flex-1 overflow-auto">
          <div ref={gridRef} className="min-w-[1000px]">
            {gridData.map((row, rowIndex) => {
              const rowSessions = sessionsByRow.get(rowIndex) || []

return (
                <div key={rowIndex} className="relative">
                  <div
                    className="grid border-b border-border/30"
                    style={{ gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))` }}
                  >
                    {row.map((day, colIndex) => {
                      if (!day) {
                        return <div key={colIndex} className="aspect-square bg-muted/20" data-cell />
                      }

const dateStr = day.date.toISOString().split("T")[0]
                      const contribution = day.contribution
                      const today = isToday(day.date)
                      const past = isPastDay(day.date) && !today
                      const isWeekend = day.dayOfWeek === 0 || day.dayOfWeek === 6
                      const isMonthStart = day.dayOfMonth === 1

return (
                        <GitHubDayTooltip key={day.date.toISOString()} date={day.date} contribution={contribution}>
                          <div 
                            data-cell
                            className={cn(
                              "aspect-square border-r border-border/20 relative cursor-pointer transition-colors bg-background",
                              isWeekend && "weekend-day",
                              past && !today && "past-day-stripes",
                              today && "today-highlight",
                              isMonthStart && "border-l-[3px] border-l-zinc-900 dark:border-l-white",
                              "hover:bg-muted/30",
                            )} 
                            onClick={() => handleDayClick(day.dayIndex)}
                          >
                            {/* Month label */}
                            {isMonthStart && (
                              <span className="absolute top-0 left-0 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[7px] font-bold px-1 py-px tracking-wide leading-none z-10">
                                {MONTHS[day.month]}
                              </span>
                            )}

{/* Day header */}
                            <div className="absolute top-0.5 right-0.5 flex items-center gap-0.5">
                              <span
                                className={cn(
                                  "text-[7px] font-medium uppercase leading-none",
                                  today ? "today-text-light-muted" : "text-muted-foreground/60",
                                )}
                              >
                                {DAYS[day.dayOfWeek]}
                              </span>
                              <span
                                className={cn(
                                  "text-[10px] font-bold leading-none",
                                  today ? "today-text-light" : "text-foreground",
                                )}
                              >
                                {day.dayOfMonth}
                              </span>
                            </div>

{/* Centered scaled heat square */}
                            {contribution && contribution.commits > 0 && (
                              <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                                <div className="flex flex-col items-center">
                                  <div
                                    className={cn(
                                      "rounded-sm",
                                      getHeatSquareSize(contribution.level),
                                      contribution.commits >= 5 && "mt-1",
                                    )}
                                    style={{ backgroundColor: getContributionBg(contribution.level, isDark) }}
                                  />
                                  {contribution.commits >= 5 && (
                                    <span className="text-[8px] font-bold text-emerald-600 dark:text-emerald-400 mt-0.5">
                                      {contribution.commits}
                                    </span>
                                  )}
                                </div>
                              </div>
                            )}
                          </div>
                        </GitHubDayTooltip>
                      )
                    })}
                  </div>

{/* Swimlanes overlay - only show when using real data */}
                  {!isUsingMockData && (
                    <div className="absolute inset-0 pointer-events-none" style={{ zIndex: 10 }}>
                      {rowSessions.map((pos, idx) => {
                        const { session, startCol, endCol, isStart, isEnd, slotIndex } = pos
                        const colors = getRepoColor(session.repo)

const leftPercent = (startCol / COLS) * 100
                        const widthPercent = ((endCol - startCol + 1) / COLS) * 100

const slotHeight = 14
                        const slotGap = 2
                        const baseTop = 24
                        const top = baseTop + slotIndex * (slotHeight + slotGap)

return (
                          <div
                            key={`${session.repo}-${session.startDate}-${idx}`}
                            className={cn(
                              "absolute pointer-events-auto cursor-pointer transition-all hover:opacity-90",
                              isStart && "rounded-l",
                              isEnd && "rounded-r",
                            )}
                            style={{
                              left: `${leftPercent}%`,
                              width: `${widthPercent}%`,
                              top: `${top}px`,
                              height: `${slotHeight}px`,
                              borderLeft: `3px solid ${colors.borderColor}`,
                              backgroundColor: colors.lightFill,
                            }}
                            onClick={() => handleSessionClick(session)}
                          >
                            {isStart && (
                              <span
                                className="text-[10px] font-medium truncate px-1.5 leading-[14px] block"
                                style={{
                                  color: isDark ? colors.textLight : colors.textDark,
                                }}
                              >
                                {session.repo}
                              </span>
                            )}
                          </div>
                        )
                      })}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>

{sheetOpen && (
          <SessionDetailSheet session={selectedSession} open={sheetOpen} onClose={() => setSheetOpen(false)} />
        )}
        {daySheetOpen && (
          <DayDetailSheet 
            day={selectedDayData} 
            contribution={selectedDayData ? selectedDayData.contribution : null} 
            githubData={githubData} 
            open={daySheetOpen} 
            onClose={() => setDaySheetOpen(false)} 
            onPrev={handlePrevDay} 
            onNext={handleNextDay} 
            year={year} 
          />
        )}
      </div>
    </TooltipPrimitive.Provider>
  )
}

export function getGitHubRepos(year: number) {
  const githubData = generateGitHubYearData(year)
  const repoSessions = generateRepoSessions(githubData.contributions)
  const repoSet = new Set<string>()
  repoSessions.forEach((session) => repoSet.add(session.repo))
  return Array.from(repoSet).map((name) => ({
    name,
    color: getRepoColor(name).borderColor,
  }))
}
[V0_FILE]typescriptreact:file="components/onboarding-modals.tsx" isMerged="true"
"use client"

import React from "react"

import { useState, useEffect } from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X, Sparkles, Github, Calendar, GripVertical, ImageIcon, FileText, MessageSquare, Globe } from "lucide-react"

const GITHUB_ONBOARDING_KEY = "github-onboarding-seen"
const CALENDAR_ONBOARDING_KEY = "calendar-onboarding-seen"

export function GitHubOnboardingModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  const [show, setShow] = useState(false)

useEffect(() => {
    if (open) {
      const seen = localStorage.getItem(GITHUB_ONBOARDING_KEY)
      if (!seen) {
        setShow(true)
      }
    }
  }, [open])

const handleClose = () => {
    localStorage.setItem(GITHUB_ONBOARDING_KEY, "true")
    setShow(false)
    onOpenChange(false)
  }

if (!show) return null

return (
    <DialogPrimitive.Root open={show} onOpenChange={handleClose}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/60 z-50 animate-in fade-in-0 duration-200" />
        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-background border border-border rounded-xl shadow-2xl z-50 animate-in fade-in-0 zoom-in-95 duration-200 overflow-hidden">
          <DialogPrimitive.Description className="sr-only">GitHub view features overview</DialogPrimitive.Description>
          
          {/* Header with gradient */}
          <div className="relative h-24 bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRjMC0yIDItNCAyLTRzLTItMi00LTJjLTIgMC00IDItNCAyczIgNCAyIDRjMCAwIDIgMiA0IDJzNC0yIDQtMnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30" />
            <Github className="h-12 w-12 text-white" />
            <DialogPrimitive.Close asChild>
              <button className="absolute top-3 right-3 p-1.5 rounded-full bg-white/20 hover:bg-white/30 transition-colors">
                <X className="h-4 w-4 text-white" />
              </button>
            </DialogPrimitive.Close>
          </div>

<div className="p-6">
            <h2 className="text-xl font-bold text-foreground mb-1">Welcome to GitHub Year View</h2>
            <p className="text-sm text-muted-foreground mb-5">Your coding journey, visualized beautifully.</p>

<div className="space-y-4">
              <Feature 
                icon={<Sparkles className="h-4 w-4" />}
                title="Contribution Heat Map"
                description="See your daily commits with scaled heat squares - bigger means more active."
              />
              <Feature 
                icon={<Github className="h-4 w-4" />}
                title="Repository Swimlanes"
                description="Track work sessions across repos with color-coded timeline bars."
              />
              <Feature 
                icon={<Globe className="h-4 w-4" />}
                title="Click Any Day"
                description="View detailed stats: commits, lines changed, PRs, and repos worked on."
              />
            </div>

<button
              onClick={handleClose}
              className="w-full mt-6 py-2.5 px-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium text-sm hover:opacity-90 transition-opacity"
            >
              Got it, let's go!
            </button>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

export function CalendarOnboardingModal({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  const [show, setShow] = useState(false)

useEffect(() => {
    if (open) {
      const seen = localStorage.getItem(CALENDAR_ONBOARDING_KEY)
      if (!seen) {
        setShow(true)
      }
    }
  }, [open])

const handleClose = () => {
    localStorage.setItem(CALENDAR_ONBOARDING_KEY, "true")
    setShow(false)
    onOpenChange(false)
  }

if (!show) return null

return (
    <DialogPrimitive.Root open={show} onOpenChange={handleClose}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay className="fixed inset-0 bg-black/60 z-50 animate-in fade-in-0 duration-200" />
        <DialogPrimitive.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-background border border-border rounded-xl shadow-2xl z-50 animate-in fade-in-0 zoom-in-95 duration-200 overflow-hidden">
          <DialogPrimitive.Description className="sr-only">Calendar view features overview</DialogPrimitive.Description>
          
          {/* Header with gradient */}
          <div className="relative h-24 bg-gradient-to-br from-teal-500 to-cyan-600 flex items-center justify-center">
            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRjMC0yIDItNCAyLTRzLTItMi00LTJjLTIgMC00IDItNCAyczIgNCAyIDRjMCAwIDIgMiA0IDJzNC0yIDQtMnoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30" />
            <Calendar className="h-12 w-12 text-white" />
            <DialogPrimitive.Close asChild>
              <button className="absolute top-3 right-3 p-1.5 rounded-full bg-white/20 hover:bg-white/30 transition-colors">
                <X className="h-4 w-4 text-white" />
              </button>
            </DialogPrimitive.Close>
          </div>

<div className="p-6">
            <h2 className="text-xl font-bold text-foreground mb-1">Welcome to Calendar View</h2>
            <p className="text-sm text-muted-foreground mb-5">Plan your year like Notion Calendar.</p>

<div className="space-y-4">
              <Feature 
                icon={<GripVertical className="h-4 w-4" />}
                title="Drag to Create Events"
                description="Click and drag across days to create multi-day events instantly."
              />
              <Feature 
                icon={<ImageIcon className="h-4 w-4" />}
                title="Photos & Notes"
                description="Add a photo of the day or journal entry to any cell."
              />
              <Feature 
                icon={<MessageSquare className="h-4 w-4" />}
                title="AI-Powered Input"
                description='Use the dock below to add events naturally. Try: "Add holidays of my country"'
              />
            </div>

<button
              onClick={handleClose}
              className="w-full mt-6 py-2.5 px-4 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-lg font-medium text-sm hover:opacity-90 transition-opacity"
            >
              Start Planning!
            </button>
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  )
}

function Feature({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
  return (
    <div className="flex gap-3">
      <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-muted flex items-center justify-center text-muted-foreground">
        {icon}
      </div>
      <div>
        <h3 className="text-sm font-medium text-foreground">{title}</h3>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/annual-calendar.tsx"
"use client"

import { useState, useRef, useMemo, useCallback, useEffect } from "react"
import { ChevronLeft, ChevronRight, Plus, Calendar, Github } from "lucide-react"
import { Button } from "@/components/ui/button"
import { TooltipProvider } from "@/components/ui/tooltip"
import { type CalendarEvent, defaultTags } from "@/lib/calendar-data"
import { useSanityCalendar } from "@/hooks/use-sanity-calendar"
import { useGitHubData } from "@/hooks/use-github-data"
import { EventModal } from "@/components/event-modal"
import { NoteModal } from "@/components/note-modal"
import { PhotoModal } from "@/components/photo-modal"
import { TagFilter } from "@/components/tag-filter"
import { RepoFilter } from "@/components/repo-filter"
import { AIDock } from "@/components/ai-dock"
import { ThemeToggle } from "@/components/theme-toggle"
import { YearView } from "@/components/year-view"
import { GitHubYearView, StatsDialog, getGitHubRepos } from "@/components/github-year-view"
import { IntegrationStatus } from "@/components/integration-status"
import { GitHubOnboardingModal, CalendarOnboardingModal } from "@/components/onboarding-modals"
import { AlertCircle } from "lucide-react"
import { cn } from "@/lib/utils"

type ViewMode = "calendar" | "github"

function getDateKey(date: Date) {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
}

export function AnnualCalendar() {
  const [year, setYear] = useState(2026)
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [isEventModalOpen, setIsEventModalOpen] = useState(false)
  const [isNoteModalOpen, setIsNoteModalOpen] = useState(false)
  const [isPhotoModalOpen, setIsPhotoModalOpen] = useState(false)
  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null)
  const [selectedTags, setSelectedTags] = useState<string[]>(defaultTags.map((t) => t.id))
  const [viewMode, setViewMode] = useState<ViewMode>("github")
  const [pulsingToday, setPulsingToday] = useState(false)
  const [showGitHubOnboarding, setShowGitHubOnboarding] = useState(true)
  const [showCalendarOnboarding, setShowCalendarOnboarding] = useState(false)

const {
    githubData,
    repoSessions,
    isUsingMockData,
    lastSynced,
    syncGitHub,
    isSyncing,
    needsSync,
  } = useGitHubData(year)

const githubRepos = useMemo(() => getGitHubRepos(year), [year])
  const [selectedRepos, setSelectedRepos] = useState<string[]>(() => githubRepos.map((r) => r.name))

const clearDragSelectionRef = useRef<(() => void) | null>(null)

useEffect(() => {
    const repoNames = githubRepos.map((r) => r.name)
    setSelectedRepos(repoNames)
  }, [githubRepos])

const {
    events,
    tags,
    notes,
    photos,
    isLoading,
    createEvent,
    updateEvent,
    deleteEvent,
    saveNote,
    savePhoto,
    deletePhoto,
  } = useSanityCalendar()

const [localEvents, setLocalEvents] = useState<CalendarEvent[]>([])

const justFinishedDragRef = useRef(false)
  const pendingUpdateRef = useRef<CalendarEvent | null>(null)

useEffect(() => {
    setLocalEvents(events)
  }, [events])

const filteredEvents = useMemo(() => {
    return localEvents.filter((event) => selectedTags.includes(event.tag))
  }, [localEvents, selectedTags])

const handlePrevYear = () => setYear((y) => y - 1)
  const handleNextYear = () => setYear((y) => y + 1)

const handleViewModeChange = (mode: ViewMode) => {
    setViewMode(mode)
    if (mode === "github") {
      setShowGitHubOnboarding(true)
    } else {
      setShowCalendarOnboarding(true)
    }
  }

const handleDayClick = (date: Date) => {
    setSelectedDate(date)
    setEditingEvent(null)
    setIsEventModalOpen(true)
  }

const handleEventClick = (event: CalendarEvent) => {
    if (justFinishedDragRef.current) return
    setEditingEvent(event)
    setSelectedDate(event.startDate)
    setIsEventModalOpen(true)
  }

const handleAddNote = (date: Date) => {
    setSelectedDate(date)
    setIsNoteModalOpen(true)
  }

const handleAddPhoto = (date: Date) => {
    setSelectedDate(date)
    setIsPhotoModalOpen(true)
  }

const handleSaveEvent = async (eventData: Omit<CalendarEvent, "id"> & { id?: string }) => {
    try {
      if (editingEvent && eventData.id) {
        const updatedEvent = { ...eventData, id: eventData.id } as CalendarEvent
        await updateEvent(updatedEvent)
        setLocalEvents((prev) => prev.map((e) => (e.id === editingEvent.id ? updatedEvent : e)))
      } else {
        const newEvent = await createEvent(eventData)
        const fullEvent: CalendarEvent = {
          id: newEvent.id || Date.now().toString(),
          ...eventData,
        }
        setLocalEvents((prev) => [...prev, fullEvent])
      }
    } catch (error) {
      console.error("Error saving event:", error)
      if (editingEvent && eventData.id) {
        setLocalEvents((prev) =>
          prev.map((e) => (e.id === editingEvent.id ? ({ ...eventData, id: eventData.id } as CalendarEvent) : e)),
        )
      } else {
        const newEvent: CalendarEvent = {
          id: Date.now().toString(),
          ...eventData,
        }
        setLocalEvents((prev) => [...prev, newEvent])
      }
    }
    setIsEventModalOpen(false)
    setEditingEvent(null)
    clearDragSelectionRef.current?.()
  }

const handleDeleteEvent = async (eventId: string) => {
    try {
      await deleteEvent(eventId)
    } catch (error) {}
    setLocalEvents((prev) => prev.filter((e) => e.id !== eventId))
    setIsEventModalOpen(false)
    setEditingEvent(null)
  }

const handleDuplicateEvent = async (event: CalendarEvent) => {
    const duplicatedEvent = {
      title: `${event.title} (copy)`,
      description: event.description,
      startDate: event.startDate,
      endDate: event.endDate,
      tag: event.tag,
    }
    try {
      const newEvent = await createEvent(duplicatedEvent)
      setLocalEvents((prev) => [...prev, { ...duplicatedEvent, id: newEvent.id || Date.now().toString() }])
    } catch (error) {
      setLocalEvents((prev) => [...prev, { ...duplicatedEvent, id: Date.now().toString() }])
    }
  }

const handleChangeTag = async (event: CalendarEvent, newTagId: string) => {
    const updatedEvent = { ...event, tag: newTagId }
    try {
      await updateEvent(updatedEvent)
    } catch (error) {}
    setLocalEvents((prev) => prev.map((e) => (e.id === event.id ? updatedEvent : e)))
  }

const handleExtendDay = async (event: CalendarEvent) => {
    const newEndDate = new Date(event.endDate)
    newEndDate.setDate(newEndDate.getDate() + 1)
    const updatedEvent = { ...event, endDate: newEndDate }
    try {
      await updateEvent(updatedEvent)
    } catch (error) {}
    setLocalEvents((prev) => prev.map((e) => (e.id === event.id ? updatedEvent : e)))
  }

const handleShortenDay = async (event: CalendarEvent) => {
    const newEndDate = new Date(event.endDate)
    newEndDate.setDate(newEndDate.getDate() - 1)
    if (newEndDate >= event.startDate) {
      const updatedEvent = { ...event, endDate: newEndDate }
      try {
        await updateEvent(updatedEvent)
      } catch (error) {}
      setLocalEvents((prev) => prev.map((e) => (e.id === event.id ? updatedEvent : e)))
    }
  }

const handleUpdateEventLocal = useCallback((event: CalendarEvent) => {
    pendingUpdateRef.current = event
    setLocalEvents((prev) => prev.map((e) => (e.id === event.id ? event : e)))
  }, [])

const commitPendingUpdate = useCallback(async () => {
    if (pendingUpdateRef.current) {
      const eventToCommit = pendingUpdateRef.current
      pendingUpdateRef.current = null
      try {
        await updateEvent(eventToCommit)
      } catch (error) {
        console.error("Error saving event:", error)
      }
    }
  }, [updateEvent])

const handleSavePhoto = async (photoUrl: string) => {
    if (selectedDate) {
      const dateKey = getDateKey(selectedDate)
      try {
        await savePhoto(dateKey, photoUrl)
      } catch (error) {
        console.error("Error saving photo:", error)
      }
    }
    setIsPhotoModalOpen(false)
  }

const handleSaveNote = async (content: string) => {
    if (selectedDate) {
      const dateKey = getDateKey(selectedDate)
      try {
        await saveNote(dateKey, content)
      } catch (error) {
        console.error("Error saving note:", error)
      }
    }
    setIsNoteModalOpen(false)
  }

const handleAddEventsFromAI = async (newEvents: Omit<CalendarEvent, "id">[]) => {
    for (const eventData of newEvents) {
      try {
        const newEvent = await createEvent(eventData)
        setLocalEvents((prev) => [...prev, { ...eventData, id: newEvent.id || Date.now().toString() }])
      } catch (error) {
        setLocalEvents((prev) => [...prev, { ...eventData, id: Date.now().toString() }])
      }
    }
  }

const handleClearAllEvents = async () => {
    if (!confirm("Are you sure you want to delete all events? This cannot be undone.")) return

for (const event of localEvents) {
      try {
        await deleteEvent(event.id)
      } catch (error) {
        console.error("Error deleting event:", error)
      }
    }
    setLocalEvents([])
  }

const handleLoadSampleData = async () => {
    const { sampleEvents } = await import("@/lib/sample-events")
    for (const eventData of sampleEvents) {
      try {
        const newEvent = await createEvent(eventData)
        setLocalEvents((prev) => [...prev, { ...eventData, id: newEvent.id || Date.now().toString() }])
      } catch (error) {
        setLocalEvents((prev) => [...prev, { ...eventData, id: Date.now().toString() }])
      }
    }
  }

const handleRemovePhoto = async () => {
    if (selectedDate) {
      const dateKey = getDateKey(selectedDate)
      await deletePhoto(dateKey)
    }
  }

const handleCreateEventFromDrag = useCallback(
    (startDate: Date, endDate: Date) => {
      setSelectedDate(startDate)
      setEditingEvent({
        id: "",
        title: "",
        description: "",
        startDate,
        endDate,
        tag: tags[0]?.id || "default",
      } as CalendarEvent)
      setIsEventModalOpen(true)
    },
    [tags],
  )

return (
    <TooltipProvider delayDuration={1200}>
      <div className="h-screen flex flex-col bg-background relative">
        <header className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
          <div className="flex items-center justify-between px-3 h-8">
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" className="h-5 w-5" onClick={handlePrevYear}>
                <ChevronLeft className="h-2.5 w-2.5" />
              </Button>
              <span className="text-xs font-semibold min-w-[40px] text-center">{year}</span>
              <Button variant="ghost" size="icon" className="h-5 w-5" onClick={handleNextYear}>
                <ChevronRight className="h-2.5 w-2.5" />
              </Button>

<div className="flex items-center bg-muted rounded p-0.5 ml-1.5">
                <button
                  onClick={() => handleViewModeChange("calendar")}
                  className={cn(
                    "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium transition-all",
                    viewMode === "calendar"
                      ? "bg-background text-foreground shadow-sm"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  <Calendar className="h-2.5 w-2.5" />
                  Calendar
                </button>
                <button
                  onClick={() => handleViewModeChange("github")}
                  className={cn(
                    "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium transition-all",
                    viewMode === "github"
                      ? "bg-background text-foreground shadow-sm"
                      : "text-muted-foreground hover:text-foreground",
                  )}
                >
                  <Github className="h-2.5 w-2.5" />
                  GitHub
                </button>
              </div>
            </div>

<div className="flex items-center gap-1">
              {viewMode === "calendar" ? (
                <TagFilter tags={tags} selectedTags={selectedTags} onTagsChange={setSelectedTags} />
              ) : (
                <RepoFilter repos={githubRepos} selectedRepos={selectedRepos} onReposChange={setSelectedRepos} />
              )}

{viewMode === "calendar" ? (
                <Button size="sm" className="h-5 gap-1 text-[10px] px-1.5" onClick={() => handleDayClick(new Date())}>
                  <Plus className="h-2.5 w-2.5" />
                  Event
                </Button>
              ) : (
                <StatsDialog 
                    year={year}
                    githubData={githubData}
                    isUsingMockData={isUsingMockData}
                    lastSynced={lastSynced}
                    onSync={syncGitHub}
                    isSyncing={isSyncing}
                  />
              )}
            </div>
          </div>
        </header>

<div className="flex-1 min-h-0 relative flex flex-col">
          {viewMode === "calendar" && (
            <div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800/50 border-b border-zinc-200 dark:border-zinc-700 flex-shrink-0">
              <AlertCircle className="h-4 w-4 text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
              <span className="text-xs text-zinc-600 dark:text-zinc-400">
                Google App under review. For now, only GitHub is working. Calendar events shown are public demo data.
              </span>
            </div>
          )}
          {viewMode === "calendar" ? (
            isLoading ? (
              <div className="flex items-center justify-center h-full">
                <div className="text-muted-foreground text-sm">Loading calendar...</div>
              </div>
            ) : (
              <YearView
                year={year}
                events={filteredEvents}
                tags={tags}
                dayPhotos={photos}
                dayNotes={notes}
                onDayClick={handleDayClick}
                onAddNote={handleAddNote}
                onAddPhoto={handleAddPhoto}
                onEventClick={handleEventClick}
                onDeleteEvent={handleDeleteEvent}
                onDuplicateEvent={handleDuplicateEvent}
                onChangeTag={handleChangeTag}
                onExtendDay={handleExtendDay}
                onShortenDay={handleShortenDay}
                onUpdateEvent={handleUpdateEventLocal}
                onCommitUpdate={commitPendingUpdate}
                pulsingToday={pulsingToday}
                onCreateEventFromDrag={handleCreateEventFromDrag}
                clearDragSelectionRef={clearDragSelectionRef}
              />
            )
          ) : (
            <GitHubYearView 
                  year={year} 
                  selectedRepos={selectedRepos} 
                  onReposChange={setSelectedRepos}
                  githubData={githubData}
                  repoSessions={repoSessions}
                  isUsingMockData={isUsingMockData}
                  lastSynced={lastSynced}
                  onSync={syncGitHub}
                  isSyncing={isSyncing}
                />
          )}
        </div>

{viewMode === "calendar" && (
          <AIDock
            tags={tags}
            onAddEvents={handleAddEventsFromAI}
            onClearAll={handleClearAllEvents}
            onLoadSampleData={handleLoadSampleData}
          />
        )}

<EventModal
          isOpen={isEventModalOpen}
          onClose={() => {
            setIsEventModalOpen(false)
            setEditingEvent(null)
            clearDragSelectionRef.current?.()
          }}
          onSave={handleSaveEvent}
          onDelete={editingEvent ? () => handleDeleteEvent(editingEvent.id) : undefined}
          event={editingEvent}
          defaultDate={selectedDate || new Date()}
          tags={tags}
        />

<NoteModal
          isOpen={isNoteModalOpen}
          onClose={() => setIsNoteModalOpen(false)}
          onSave={handleSaveNote}
          date={selectedDate || new Date()}
          existingNote={selectedDate ? notes.get(getDateKey(selectedDate)) : undefined}
        />

<PhotoModal
          isOpen={isPhotoModalOpen}
          onClose={() => setIsPhotoModalOpen(false)}
          onSave={handleSavePhoto}
          onRemove={handleRemovePhoto}
          date={selectedDate}
          existingPhoto={selectedDate ? photos.get(getDateKey(selectedDate)) : undefined}
        />