Calendar functionality

[ngoiyaeric]

Based on the codebase context, the calendar system in QCX consists of several interconnected components. Here are all the calendar implementations:

Core Components

CalendarNotepad Component

The main UI component CalendarNotepad provides a date-based note-taking interface with location tagging capabilities 1 . It features:

• Date navigation with a 7-day range selector
• Note creation via ⌘+Enter keyboard shortcut
• Location tagging using current map position
• Fly-to navigation when clicking location icons
• Integration with TimezoneClock component

Server Actions

The calendar system uses two server actions in lib/actions/calendar.ts 2 :

• getNotes(date, chatId) - Fetches notes for a specific date and user, optionally filtered by chat session
• saveNote(noteData) - Inserts or updates notes, and creates a chat message for AI context when a note has a chatId

Database Schema

The calendarNotes table is defined in lib/db/schema.ts 3 , storing:

• User and chat associations
• Date, content, and timestamps
• Location tags (GeoJSON), user tags, and map feature IDs

Type Definitions

Type definitions in lib/types/index.ts define the CalendarNote and NewCalendarNote interfaces 4 .

Integration Points

State Management

The CalendarToggleProvider in components/calendar-toggle-context.tsx manages calendar visibility state 5 .

UI Integration

• Header: Desktop calendar toggle button in components/header.tsx 6
• Mobile: Mobile calendar button in components/mobile-icons-bar.tsx 7
• Chat Layout: Renders CalendarNotepad when calendar is open in both mobile and desktop layouts in components/chat.tsx 8 9

Notes

The calendar system is tightly integrated with the map context, allowing users to tag notes with geographic locations and navigate to those locations. Notes can be associated with specific chat sessions to provide AI context.

Wiki pages you might want to explore:

• System Architecture (QueueLab/QCX)
• Additional UI Components (QueueLab/QCX)

Citations

File: components/calendar-notepad.tsx (L18-180)

export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
  const { mapData, setMapData } = useMapData()
  const [selectedDate, setSelectedDate] = useState(new Date())
  const [notes, setNotes] = useState<CalendarNote[]>([])
  const [noteContent, setNoteContent] = useState("")
  const [dateOffset, setDateOffset] = useState(0)
  const [taggedLocation, setTaggedLocation] = useState<any | null>(null)

  useEffect(() => {
    const fetchNotes = async () => {
      const fetchedNotes = await getNotes(selectedDate, chatId ?? null)
      setNotes(fetchedNotes)
    }
    fetchNotes()
  }, [selectedDate, chatId])

  const generateDateRange = (offset: number) => {
    const dates = []
    const today = new Date()
    for (let i = 0; i < 7; i++) {
      const date = new Date(today)
      date.setDate(today.getDate() + offset + i)
      dates.push(date)
    }
    return dates
  }

  const dateRange = generateDateRange(dateOffset)

  const isSameDay = (date1: Date, date2: Date) => {
    return (
      date1.getDate() === date2.getDate() &&
      date1.getMonth() === date2.getMonth() &&
      date1.getFullYear() === date2.getFullYear()
    )
  }

  const handleAddNote = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
        if (!noteContent.trim()) return

        const newNote: NewCalendarNote = {
            date: selectedDate,
            content: noteContent,
            chatId: chatId ?? null,
            userId: '', // This will be set on the server
            locationTags: taggedLocation,
            userTags: null,
            mapFeatureId: null,
        }

        const savedNote = await saveNote(newNote)
        if (savedNote) {
            setNotes([savedNote, ...notes])
            setNoteContent("")
            setTaggedLocation(null)
        }
    }
  }

  const handleTagLocation = () => {
    if (mapData.targetPosition) {
      setTaggedLocation({
        type: 'Point',
        coordinates: mapData.targetPosition
      });
      setNoteContent(prev => `${prev} #location`);
    }
  };

  const handleFlyTo = (location: any) => {
    if (location && location.coordinates) {
      setMapData(prev => ({ ...prev, targetPosition: location.coordinates }));
    }
  };

  return (
    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 max-w-2xl mx-auto my-4 border">
      <div className="flex items-center justify-between mb-4">
        <button
          onClick={() => setDateOffset(dateOffset - 7)}
          className="p-2 text-muted-foreground hover:text-foreground"
        >
          <ChevronLeft className="h-5 w-5" />
        </button>
        <div className="flex space-x-2 overflow-x-auto">
          {dateRange.map((date) => (
            <button
              key={date.toISOString()}
              onClick={() => setSelectedDate(date)}
              className={cn(
                "flex flex-col items-center p-2 rounded-md transition-colors",
                isSameDay(date, selectedDate)
                  ? "bg-primary text-primary-foreground"
                  : "hover:bg-accent"
              )}
            >
              <span className="text-sm font-medium">
                {date.toLocaleDateString(undefined, { day: "numeric" })}
              </span>
              <span className="text-xs text-muted-foreground">
                {date.toLocaleDateString(undefined, { month: "short" })}
              </span>
            </button>
          ))}
        </div>
        <button
          onClick={() => setDateOffset(dateOffset + 7)}
          className="p-2 text-muted-foreground hover:text-foreground"
        >
          <ChevronRight className="h-5 w-5" />
        </button>
      </div>

      <div className="mb-4">
        <div className="relative">
          <textarea
            value={noteContent}
            onChange={(e) => setNoteContent(e.target.value)}
            onKeyDown={handleAddNote}
            placeholder="Add note... (⌘+Enter to save, @mention, #location)"
            className="w-full p-2 bg-input rounded-md border focus:ring-ring focus:ring-2 focus:outline-none pr-10"
            rows={3}
          />
          <button
            onClick={handleTagLocation}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
          >
            <MapPin className="h-5 w-5" />
          </button>
        </div>
      </div>

      <div className="space-y-4">
        {notes.length > 0 ? (
          notes.map((note) => (
            <div key={note.id} className="p-3 bg-muted rounded-md">
              <div className="flex justify-between items-start">
                <div>
                  <p className="text-xs text-muted-foreground mb-1">
                    {new Date(note.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                  </p>
                  <p className="text-sm whitespace-pre-wrap break-words">{note.content}</p>
                </div>
                {note.locationTags && (
                  <button onClick={() => handleFlyTo(note.locationTags)} className="text-muted-foreground hover:text-foreground ml-2">
                    <MapPin className="h-5 w-5" />
                  </button>
                )}
              </div>
            </div>
          ))
        ) : (
          <p className="text-center text-muted-foreground text-sm py-4">
            No notes for this day.
          </p>
        )}
      </div>

      <TimezoneClock />
    </div>
  )
}

File: lib/actions/calendar.ts (L1-112)

'use server'

import { and, desc, eq, isNull, sql } from 'drizzle-orm'
import { db } from '@/lib/db'
import { calendarNotes } from '@/lib/db/schema'
import { getCurrentUserIdOnServer } from '@/lib/auth/get-current-user'
import type { CalendarNote, NewCalendarNote } from '@/lib/types'
import { createMessage, NewMessage } from './chat-db'

/**
 * Retrieves notes for a specific date and chat session.
 * @param date - The date to fetch notes for.
 * @param chatId - The ID of the chat session.
 * @returns A promise that resolves to an array of notes.
 */
export async function getNotes(date: Date, chatId: string | null): Promise<CalendarNote[]> {
  const userId = await getCurrentUserIdOnServer()
  if (!userId) {
    console.error('getNotes: User not authenticated')
    return []
  }

  // Normalize date to the start of the day for consistent querying
  const startDate = new Date(date)
  startDate.setHours(0, 0, 0, 0)
  const endDate = new Date(date)
  endDate.setHours(23, 59, 59, 999)

  try {
    const whereConditions = [
      eq(calendarNotes.userId, userId),
      and(
        sql`${calendarNotes.date} >= ${startDate}`,
        sql`${calendarNotes.date} <= ${endDate}`
      )
    ];

    if (chatId) {
      whereConditions.push(eq(calendarNotes.chatId, chatId));
    } else {
      whereConditions.push(isNull(calendarNotes.chatId));
    }

    const notes = await db
      .select()
      .from(calendarNotes)
      .where(and(...whereConditions))
      .orderBy(desc(calendarNotes.createdAt))
      .execute()

    return notes;

  } catch (error) {
    console.error('Error fetching notes:', error)
    return []
  }
}

/**
 * Saves a new note or updates an existing one.
 * @param noteData - The note data to save.
 * @returns A promise that resolves to the saved note or null if an error occurs.
 */
export async function saveNote(noteData: NewCalendarNote | CalendarNote): Promise<CalendarNote | null> {
    const userId = await getCurrentUserIdOnServer();
    if (!userId) {
        console.error('saveNote: User not authenticated');
        return null;
    }

    if ('id' in noteData) {
        // Update existing note
        try {
            const [updatedNote] = await db
                .update(calendarNotes)
                .set({ ...noteData, updatedAt: new Date() })
                .where(and(eq(calendarNotes.id, noteData.id), eq(calendarNotes.userId, userId)))
                .returning();
            return updatedNote;
        } catch (error) {
            console.error('Error updating note:', error);
            return null;
        }
    } else {
        // Create new note
        try {
            const [newNote] = await db
                .insert(calendarNotes)
                .values({ ...noteData, userId })
                .returning();

            if (newNote && newNote.chatId) {
                const calendarContextMessage: NewMessage = {
                    chatId: newNote.chatId,
                    userId: userId,
                    role: 'data',
                    content: JSON.stringify({
                        type: 'calendar_note',
                        note: newNote,
                    }),
                };
                await createMessage(calendarContextMessage);
            }

            return newNote;
        } catch (error) {
            console.error('Error creating note:', error);
            return null;
        }
    }
}

File: lib/db/schema.ts (L92-103)

export const calendarNotes = pgTable('calendar_notes', {
  id: uuid('id').primaryKey().defaultRandom(),
  userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
  chatId: uuid('chat_id').references(() => chats.id, { onDelete: 'cascade' }),
  date: timestamp('date', { withTimezone: true }).notNull(),
  content: text('content').notNull(),
  locationTags: jsonb('location_tags'),
  userTags: text('user_tags').array(),
  mapFeatureId: text('map_feature_id'),
  createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
  updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(),
});

File: lib/types/index.ts (L79-92)

export type CalendarNote = {
  id: string;
  userId: string;
  chatId: string | null;
  date: Date;
  content: string;
  locationTags: any | null;
  userTags: string[] | null;
  mapFeatureId: string | null;
  createdAt: Date;
  updatedAt: Date;
};

export type NewCalendarNote = Omit<CalendarNote, 'id' | 'createdAt' | 'updatedAt'>;

File: app/layout.tsx (L98-98)

        <CalendarToggleProvider>

File: components/header.tsx (L74-76)

        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="calendar-toggle">
          <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
        </Button>

File: components/mobile-icons-bar.tsx (L57-59)

      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="mobile-calendar-button">
        <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
      </Button>

File: components/chat.tsx (L159-161)

          {isCalendarOpen ? (
            <CalendarNotepad chatId={id} />
          ) : (

File: components/chat.tsx (L191-193)

        {isCalendarOpen ? (
          <CalendarNotepad chatId={id} />
        ) : (

[ngoiyaeric]

@coderabbitai plan to improve the functionality for geospatial context. Such as using the calendar icon at a location for rendezvous.

[coderabbitai]

Coding Plan

Summary

• Fix the untracked migration by registering 0001_add_calendar_notes in the Drizzle journal with a corresponding snapshot file
• Add database indexes on user_id, date, (user_id, date), and chat_id columns to support the query patterns in getNotes
• Keep changes minimal and infrastructure-focused, avoiding feature additions (delete, edit UI, loading states) that are not explicitly requested

Implementation Steps

Phase 1: Fix Migration Tracking

The 0001_add_calendar_notes.sql migration exists but is not registered in the Drizzle migration journal, which could cause deployment issues where the migration is re-run or skipped unexpectedly.

Register Calendar Notes Migration in Journal

Update the migration journal to track the existing calendar_notes migration and ensure Drizzle's migrator recognizes it as applied.

• Add entry for 0001_add_calendar_notes to drizzle/migrations/meta/_journal.json with appropriate timestamp and hash
• Create drizzle/migrations/meta/0001_snapshot.json capturing the schema state after the calendar_notes table addition
• Verify the migration entry format matches the existing 0000_sweet_metal_master entry structure

🤖 Prompt for AI agents

Register the existing `0001_add_calendar_notes.sql` migration in the Drizzle
migration journal so the migrator correctly recognizes it as applied.

- In `drizzle/migrations/meta/_journal.json`, add a new entry for
`0001_add_calendar_notes` with an appropriate timestamp and hash, following the
exact format of the existing `0000_sweet_metal_master` entry
- Create `drizzle/migrations/meta/0001_snapshot.json` that captures the schema
state after the `calendar_notes` table has been added
- Ensure the new journal entry structure (field names, ordering, formatting)
mirrors the existing entry exactly

Phase 2: Add Database Indexes for Performance

The calendar_notes table lacks indexes on frequently queried columns, which will cause performance degradation at scale since every getNotes call performs a full table scan.

Task 1: Create Index Migration

Add a new Drizzle migration to create indexes on the calendar_notes table for the primary query patterns.

• Create new migration file in drizzle/migrations/ (e.g., 0002_calendar_notes_indexes.sql)
• Add index on user_id column for user-scoped queries
• Add index on date column for date-range filtering
• Add composite index on (user_id, date) to optimize the canonical query pattern used by getNotes
• Add index on chat_id for chat-scoped note retrieval

Task 2: Update Schema with Index Definitions

Add index definitions to the Drizzle schema so future migrations stay in sync.

• Update lib/db/schema.ts to include index definitions on the calendarNotes table using Drizzle's index syntax
• Ensure indexes match those created in the migration file

Task 3: Register Index Migration in Journal

Track the new index migration properly in the Drizzle migration system.

• Add entry for the new index migration to drizzle/migrations/meta/_journal.json
• Create corresponding snapshot file in drizzle/migrations/meta/

🤖 Prompt for AI agents

Add database indexes to the `calendar_notes` table to eliminate full table scans
on `getNotes` queries, then register the migration in the Drizzle journal.

**Create the migration file:**
- Create `drizzle/migrations/0002_calendar_notes_indexes.sql`
- Add an index on `user_id` for user-scoped queries
- Add an index on `date` for date-range filtering
- Add a composite index on `(user_id, date)` to optimize the canonical query
pattern used by `getNotes`
- Add an index on `chat_id` for chat-scoped note retrieval

**Update the schema:**
- In `lib/db/schema.ts`, add index definitions on the `calendarNotes` table
using Drizzle's index syntax
- Ensure all index definitions exactly match those defined in the migration file

**Register in the journal:**
- Add an entry for `0002_calendar_notes_indexes` to
`drizzle/migrations/meta/_journal.json`
- Create the corresponding `drizzle/migrations/meta/0002_snapshot.json` snapshot
file

Research

The calendar system is built around CalendarNotepad (components/calendar-notepad.tsx), which provides a date-based note-taking interface with location tagging via map integration. Server actions in lib/actions/calendar.ts handle note CRUD operations using Drizzle ORM against the calendar_notes table defined in lib/db/schema.ts. Visibility is managed by CalendarToggleProvider (components/calendar-toggle-context.tsx), with toggle buttons in both the desktop header and mobile icons bar. The system supports chat association for AI context by injecting role: 'data' messages when notes are linked to a chat session.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Register the existing `0001_add_calendar_notes.sql` migration in the Drizzle
migration journal so the migrator correctly recognizes it as applied.

- In `drizzle/migrations/meta/_journal.json`, add a new entry for
`0001_add_calendar_notes` with an appropriate timestamp and hash, following the
exact format of the existing `0000_sweet_metal_master` entry
- Create `drizzle/migrations/meta/0001_snapshot.json` that captures the schema
state after the `calendar_notes` table has been added
- Ensure the new journal entry structure (field names, ordering, formatting)
mirrors the existing entry exactly
===============================================================================

Task: 2

Add database indexes to the `calendar_notes` table to eliminate full table scans
on `getNotes` queries, then register the migration in the Drizzle journal.

**Create the migration file:**
- Create `drizzle/migrations/0002_calendar_notes_indexes.sql`
- Add an index on `user_id` for user-scoped queries
- Add an index on `date` for date-range filtering
- Add a composite index on `(user_id, date)` to optimize the canonical query
pattern used by `getNotes`
- Add an index on `chat_id` for chat-scoped note retrieval

**Update the schema:**
- In `lib/db/schema.ts`, add index definitions on the `calendarNotes` table
using Drizzle's index syntax
- Ensure all index definitions exactly match those defined in the migration file

**Register in the journal:**
- Add an entry for `0002_calendar_notes_indexes` to
`drizzle/migrations/meta/_journal.json`
- Create the corresponding `drizzle/migrations/meta/0002_snapshot.json` snapshot
file

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[ngoiyaeric]

@coderabbitai the system code for the calendar function is not working right now. I need more pre-database utility like notes on locations and reminders with notifications.

[coderabbitai]

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Inspect key calendar-related files
echo "=== Calendar Notepad Component ==="
fd "calendar-notepad" --type f | head -5

echo "=== Calendar Actions ==="
fd "calendar" lib --type f 2>/dev/null | head -10

echo "=== DB Schema ==="
fd "schema.ts" lib --type f | head -5

echo "=== Migration files ==="
fd "." drizzle --type f | sort

echo "=== Calendar toggle context ==="
fd "calendar-toggle" --type f | head -5

echo "=== Any notification/reminder files ==="
fd "notif\|remind" --type f | head -10

echo "=== Any geospatial/location files ==="
fd "geo\|location\|map" --type f | head -20

Length of output: 1142

---

🏁 Script executed:

#!/bin/bash
echo "=== calendar-notepad.tsx ==="
cat components/calendar-notepad.tsx 2>/dev/null || fd "calendar-notepad" --exec cat {}

echo "=== lib/actions/calendar.ts ==="
cat lib/actions/calendar.ts 2>/dev/null

echo "=== lib/db/schema.ts ==="
cat lib/db/schema.ts 2>/dev/null

echo "=== drizzle journal ==="
cat drizzle/migrations/meta/_journal.json 2>/dev/null

echo "=== existing migrations ==="
ls drizzle/migrations/*.sql 2>/dev/null | xargs -I{} sh -c 'echo "--- {} ---"; cat {}'

Length of output: 20333

---

🏁 Script executed:

#!/bin/bash
# Check where lib/types is defined to get CalendarNote type shape
fd "types" lib --type f | head -10
cat lib/types.ts 2>/dev/null || fd "types" lib --exec cat {} \; 2>/dev/null | head -100

Length of output: 443

---

🏁 Script executed:

#!/bin/bash
# Check how providers are composed in the app layout
fd "layout" app --type f | head -5
cat app/layout.tsx 2>/dev/null || fd "layout.tsx" app --exec cat {} \; 2>/dev/null | head -60
# Check if there's a root providers component
fd "providers" components --type f | head -5
cat components/providers.tsx 2>/dev/null

Length of output: 4749

---

🏁 Script executed:

#!/bin/bash
# Check lib/types for CalendarNote shape
fd "types" lib --type f | head -5
cat lib/types.ts 2>/dev/null | head -80
fd "types.ts" lib --exec cat {} \; 2>/dev/null | head -80

Length of output: 427

---

🏁 Script executed:

#!/bin/bash
echo "=== Find types files ==="
fd "types" --type f | grep -v "node_modules" | grep -v ".next"

echo "=== Search for CalendarNote type definition ==="
rg "CalendarNote" --type ts -n -C2 | head -60

echo "=== Search for NewCalendarNote ==="
rg "NewCalendarNote" --type ts -n -C2 | head -30

Length of output: 5720

---

🏁 Script executed:

#!/bin/bash
echo "=== lib/types/index.ts ==="
cat lib/types/index.ts

echo "=== drizzle/migrations/meta/0000_snapshot.json (first 80 lines for format reference) ==="
head -80 drizzle/migrations/meta/0000_snapshot.json

Length of output: 4134

---

---

Now I have everything. Here is the complete, implementation-ready plan:

Task: Fix broken calendar + add pre-DB local state, location notes & reminders

• Phase 1 — Register 0001_add_calendar_notes in Drizzle journal + create snapshot
• Phase 2 — New migration 0002_add_calendar_reminders.sql + journal + snapshot
• Phase 3 — Update lib/types/index.ts — add reminder fields to CalendarNote
• Phase 4 — Update lib/db/schema.ts — add reminder columns + indexes
• Phase 5 — Create lib/hooks/use-local-notes.ts — localStorage pre-DB layer
• Phase 6 — Create lib/hooks/use-reminders.ts — browser Notification API scheduler
• Phase 7 — Create components/reminder-notification-provider.tsx — permission + polling
• Phase 8 — Update lib/actions/calendar.ts — add getUpcomingReminders + markReminderTriggered
• Phase 9 — Update components/calendar-notepad.tsx — fix "use client" dup, add reminder picker, location display, optimistic saves, initialLocation prop
• Phase 10 — Update app/layout.tsx — add <ReminderNotificationProvider>

statement-breakpoint

ALTER TABLE "calendar_notes" ADD COLUMN IF NOT EXISTS "reminder_triggered" boolean DEFAULT false NOT NULL;
--> statement-breakpoint
CREATE INDEX IF NOT EXISTS "calendar_notes_user_id_idx" ON "calendar_notes" ("user_id");
--> statement-breakpoint
CREATE INDEX IF NOT EXISTS "calendar_notes_date_idx" ON "calendar_notes" ("date");
--> statement-breakpoint
CREATE INDEX IF NOT EXISTS "calendar_notes_user_date_idx" ON "calendar_notes" ("user_id", "date");
--> statement-breakpoint
CREATE INDEX IF NOT EXISTS "calendar_notes_reminder_time_idx" ON "calendar_notes" ("reminder_time") WHERE reminder_time IS NOT NULL AND reminder_triggered = false;

**Update `drizzle/migrations/meta/_journal.json`** — add a third entry:
```json
{
  "idx": 2,
  "version": "5",
  "when": 1750358700000,
  "tag": "0002_add_calendar_reminders",
  "breakpoints": true
}

Create drizzle/migrations/meta/0002_snapshot.json — copy structure from 0001_snapshot.json, use a new UUID for "id", set "prevId" to the UUID used in 0001_snapshot.json, and add reminder_time (timestamp with time zone, nullable) and reminder_triggered (boolean, notNull, default false) to the calendar_notes columns, plus add the four index entries under calendar_notes.indexes.
-->

---

💡 For code changes across multiple files, use @coderabbitai plan in an issue comment