From 18b17a74dd2b5d2516a35999e849dff44a466025 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Fri, 9 Jan 2026 13:30:21 -0500
Subject: [PATCH 1/4] calendar view

Calendar view of friends! I left out the sample/test data for privacy reasons, but when server implementation is done, it'll be irrelevent.
---
 client/src/routes/calendar/+page.svelte |   1 +
 client/src/routes/friends/+page.svelte  | 482 ++++++++++++++++++++++++
 2 files changed, 483 insertions(+)
 create mode 100644 client/src/routes/friends/+page.svelte

diff --git a/client/src/routes/calendar/+page.svelte b/client/src/routes/calendar/+page.svelte
index c2d0a67..c5355eb 100644
--- a/client/src/routes/calendar/+page.svelte
+++ b/client/src/routes/calendar/+page.svelte
@@ -972,6 +972,7 @@
                 </p>
                 <div class="flex flex-row gap-2 items-center">
                     <Button variant="outlined" square onclick={copyIcsToClipboard}>Copy Calendar Link</Button>
+                    <Button variant="outlined" square onclick={() => goto('/friends')}>View Friends</Button>
                 </div>
             </div>
         </div>
diff --git a/client/src/routes/friends/+page.svelte b/client/src/routes/friends/+page.svelte
new file mode 100644
index 0000000..f9c82b1
--- /dev/null
+++ b/client/src/routes/friends/+page.svelte
@@ -0,0 +1,482 @@
+<script lang="ts">
+    import { processedData as storedProcessedData, userSettings as storedUserSettings } from '$lib/store';
+    import type { Course, MeetingTime, DayItem } from '$lib/types';
+    import { fade, scale } from 'svelte/transition';
+    import { Chip, SelectOutlined } from 'm3-svelte';
+    import friendSample2 from './user2.json';
+    import friendSample3 from './user3.json';
+    import friendSample4 from './user4.json';
+
+    let selected = $state<string | undefined>(undefined);
+    let processedData: Course[] | undefined = $derived(
+        $storedProcessedData.find((d) => String(d.termId) === selected)?.responseData.classes
+    );
+    let militaryTime = $derived($storedUserSettings?.military_time ?? true);
+    let lectureColor = $derived($storedUserSettings?.default_color_lecture ?? "#039be5");
+    let labColor = $derived($storedUserSettings?.default_color_lab ?? "#f6bf26");
+    let primaryUser = $state<string>('you');
+
+    let activeCourse = $state<Course | undefined>(undefined);
+    let activeMeeting = $state<MeetingTime | undefined>(undefined);
+    let activeDay = $state<DayItem | undefined>(undefined);
+
+    type FriendData = { id: string; name: string; data: typeof friendSample2 };
+
+    const friendSamples: FriendData[] = [
+        { id: 'friend-2', name: 'Daniel', data: friendSample2 },
+        { id: 'friend-3', name: 'Jasper', data: friendSample3 },
+        { id: 'friend-4', name: 'Jojo', data: friendSample4 }
+    ];
+
+    function parseTimeToMinutes(timeStr: string): number {
+        const trimmed = timeStr.trim();
+        const ampmMatch = trimmed.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
+        if (ampmMatch) {
+            let hours = Number(ampmMatch[1]);
+            const minutes = Number(ampmMatch[2]);
+            const isPm = ampmMatch[3].toUpperCase() === 'PM';
+            if (hours === 12) hours = 0;
+            const total = hours + (isPm ? 12 : 0);
+            return total * 60 + minutes;
+        }
+        const parts = trimmed.split(':');
+        const h = Number(parts[0]);
+        const m = Number(parts[1] ?? 0);
+        return h * 60 + m;
+    }
+
+    function to24Hour(timeStr: string): string {
+        const mins = parseTimeToMinutes(timeStr);
+        return minutesToHHMM(mins);
+    }
+
+    function minutesToHHMM(total: number): string {
+        const h = Math.floor(total / 60);
+        const m = total % 60;
+        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+    }
+
+    function mapFriendCourses(data: typeof friendSample2, friendId: string): Course[] {
+        return data.processed_courses.map((c, ci) => ({
+            title: c.title,
+            prefix: c.subject,
+            course_number: c.course_number,
+            schedule_type: c.schedule_type,
+            term: { uid: c.term.uid, season: c.term.season, year: c.term.year },
+            professor: {
+                first_name: c.instructors[0]?.first_name ?? '',
+                last_name: c.instructors[0]?.last_name ?? '',
+                email: c.instructors[0]?.email ?? ''
+            },
+            meeting_times: c.meeting_times.map((m, mi) => {
+                const begin = to24Hour(m.begin_time);
+                const end = to24Hour(m.end_time);
+                const dayKey = m.day_of_week as DayItem['key'];
+                return {
+                    id: `${friendId}-${ci}-${mi}-${dayKey}`,
+                    begin_time: begin,
+                    end_time: end,
+                    start_date: m.start_date,
+                    end_date: m.end_date,
+                    location: {
+                        building: {
+                            name: m.location.building.name,
+                            abbreviation: m.location.building.abbreviation
+                        },
+                        room: m.location.room
+                    },
+                    monday: dayKey === 'monday',
+                    tuesday: dayKey === 'tuesday',
+                    wednesday: dayKey === 'wednesday',
+                    thursday: dayKey === 'thursday',
+                    friday: dayKey === 'friday',
+                    saturday: dayKey === 'saturday',
+                    sunday: dayKey === 'sunday'
+                };
+            })
+        }));
+    }
+
+    const friendList: Array<{ id: string; name: string; courses: Course[] }> = friendSamples.map((f) => ({
+        id: f.id,
+        name: f.name,
+        courses: mapFriendCourses(f.data, f.id)
+    }));
+
+    let selectedFriends = $state<string[]>(friendList.length ? [friendList[0].id] : []);
+
+    type CalendarBlock = {
+        course: Course;
+        meeting: MeetingTime;
+        startTotal: number;
+        endTotal: number;
+        ownerId: string;
+        ownerPriority: number;
+        isPrimary: boolean;
+    };
+
+    function convertTo12Hour(time24: string): string {
+        if (militaryTime) return time24;
+        const [hours, minutes] = time24.split(':').map(Number);
+        const period = hours >= 12 ? 'PM' : 'AM';
+        const hours12 = hours % 12 || 12;
+        return `${hours12}:${minutes.toString().padStart(2, '0')} ${period}`;
+    }
+
+    function getTextColor(bgColor: string): string {
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.5 ? '#000000' : '#ffffff';
+    }
+
+    function formatHourLabel(hour: number): string {
+        if (militaryTime) return `${hour.toString().padStart(2, '0')}:00`;
+        const period = hour >= 12 ? 'PM' : 'AM';
+        const h12 = (hour % 12) || 12;
+        return `${h12}:00 ${period}`;
+    }
+
+    const dayOrder: DayItem[] = [
+        { key: 'monday', label: 'Monday', abbr: 'M', order: 0 },
+        { key: 'tuesday', label: 'Tuesday', abbr: 'T', order: 1 },
+        { key: 'wednesday', label: 'Wednesday', abbr: 'W', order: 2 },
+        { key: 'thursday', label: 'Thursday', abbr: 'Th', order: 3 },
+        { key: 'friday', label: 'Friday', abbr: 'F', order: 4 },
+        { key: 'saturday', label: 'Saturday', abbr: 'Sa', order: 5 },
+        { key: 'sunday', label: 'Sunday', abbr: 'Su', order: 6 }
+    ];
+
+    type PositionedMeeting = {
+        course: Course;
+        meeting: MeetingTime;
+        startOffset: number;
+        width: number;
+        startTotal: number;
+        endTotal: number;
+        bgColor: string;
+        textColor: string;
+        stackIndex: number;
+        overlapCount: number;
+        ownerId: string;
+        ownerPriority: number;
+        isPrimary: boolean;
+    };
+
+    const stackGapPct = 2;
+
+    let stackedMeetings = $derived.by(() => {
+        const selectedFriendCourses = friendList
+            .filter((f) => selectedFriends.includes(f.id))
+            .map((f) => ({ id: f.id, courses: f.courses }));
+
+        const ownerEntries: Array<{ id: string; courses: Course[]; isPrimary: boolean }> = [];
+
+        if (primaryUser === 'you') {
+            if (processedData) {
+                ownerEntries.push({ id: 'you', courses: processedData, isPrimary: true });
+            }
+        } else {
+            const primaryFriend = selectedFriendCourses.find((f) => f.id === primaryUser) ?? friendList.find((f) => f.id === primaryUser);
+            if (primaryFriend) {
+                ownerEntries.push({ id: primaryFriend.id, courses: primaryFriend.courses, isPrimary: true });
+            }
+        }
+
+        if (primaryUser !== 'you' && processedData) {
+            ownerEntries.push({ id: 'you', courses: processedData, isPrimary: false });
+        }
+
+        for (const entry of selectedFriendCourses) {
+            if (entry.id === primaryUser) continue;
+            ownerEntries.push({ id: entry.id, courses: entry.courses, isPrimary: false });
+        }
+
+        if (ownerEntries.length === 0) {
+            return { byDay: {}, maxStacksByDay: {} };
+        }
+
+        const collectIntervals = (courses: Course[], ownerId: string, ownerPriority: number, isPrimary: boolean): CalendarBlock[] => {
+            const blocks: CalendarBlock[] = [];
+            for (const course of courses) {
+                for (const meeting of course.meeting_times) {
+                    const startTotal = parseTimeToMinutes(meeting.begin_time);
+                    const endTotal = parseTimeToMinutes(meeting.end_time);
+                    for (const { key } of dayOrder) {
+                        if (!(meeting as any)[key]) continue;
+                        blocks.push({ course, meeting, startTotal, endTotal, ownerId, ownerPriority, isPrimary });
+                    }
+                }
+            }
+            return blocks;
+        };
+
+        const allBlocks = ownerEntries.flatMap((entry, idx) => collectIntervals(entry.courses, entry.id, idx, entry.isPrimary));
+
+        const byDay: Record<string, PositionedMeeting[]> = {};
+        const maxStacksByDay: Record<string, number> = {};
+
+        for (const { key } of dayOrder) {
+            const seen = new Set<string>();
+            const blocks = allBlocks.filter((b) => {
+                if (!(b.meeting as any)[key]) return false;
+                const k = `${b.ownerId}-${b.startTotal}-${b.endTotal}-${b.course.title}`;
+                if (seen.has(k)) return false;
+                seen.add(k);
+                return true;
+            });
+            if (blocks.length === 0) {
+                byDay[key] = [];
+                maxStacksByDay[key] = 1;
+                continue;
+            }
+
+            blocks.sort((a, b) => {
+                if (a.startTotal !== b.startTotal) return a.startTotal - b.startTotal;
+                if (a.endTotal !== b.endTotal) return a.endTotal - b.endTotal;
+                return a.ownerPriority - b.ownerPriority;
+            });
+
+            const arr: PositionedMeeting[] = [];
+            const stackEnds: number[] = [];
+            const active: PositionedMeeting[] = [];
+
+            for (const block of blocks) {
+                for (let i = active.length - 1; i >= 0; i--) {
+                    if (block.startTotal >= active[i].endTotal) {
+                        active.splice(i, 1);
+                    }
+                }
+
+                const startHour = Math.floor(block.startTotal / 60);
+                const startMin = block.startTotal % 60;
+                const startOffset = ((startHour - 8) * 60 + startMin) / 60 * 8;
+                const width = (block.endTotal - block.startTotal) / 60 * 8;
+                const isLab = block.course.schedule_type.toLowerCase() === 'laboratory';
+                const baseColor = block.meeting.color ?? (isLab ? labColor : lectureColor);
+                const textColor = getTextColor(baseColor);
+                const currentOverlap = active.length + 1;
+                const item: PositionedMeeting = {
+                    course: block.course,
+                    meeting: block.meeting,
+                    startOffset,
+                    width,
+                    startTotal: block.startTotal,
+                    endTotal: block.endTotal,
+                    bgColor: baseColor,
+                    textColor,
+                    stackIndex: 0,
+                    overlapCount: currentOverlap,
+                    ownerId: block.ownerId,
+                    ownerPriority: block.ownerPriority,
+                    isPrimary: block.isPrimary
+                };
+
+                for (const a of active) {
+                    a.overlapCount = Math.max(a.overlapCount, currentOverlap);
+                }
+
+                let stack = stackEnds.findIndex((end) => item.startTotal >= end);
+                if (stack === -1) {
+                    stack = stackEnds.length;
+                    stackEnds.push(item.endTotal);
+                } else {
+                    stackEnds[stack] = item.endTotal;
+                }
+                item.stackIndex = stack;
+
+                active.push(item);
+                arr.push(item);
+            }
+
+            const componentIds = new Array(arr.length).fill(-1);
+            let component = 0;
+            for (let i = 0; i < arr.length; i++) {
+                if (componentIds[i] !== -1) continue;
+                const queue = [i];
+                componentIds[i] = component;
+                while (queue.length) {
+                    const idx = queue.pop()!;
+                    for (let j = 0; j < arr.length; j++) {
+                        if (componentIds[j] !== -1) continue;
+                        if (arr[idx].startTotal < arr[j].endTotal && arr[j].startTotal < arr[idx].endTotal) {
+                            componentIds[j] = component;
+                            queue.push(j);
+                        }
+                    }
+                }
+                component++;
+            }
+
+            const componentMax = new Array(component).fill(1);
+            for (let c = 0; c < component; c++) {
+                const points: Array<{ time: number; delta: number }> = [];
+                for (let i = 0; i < arr.length; i++) {
+                    if (componentIds[i] !== c) continue;
+                    points.push({ time: arr[i].startTotal, delta: 1 });
+                    points.push({ time: arr[i].endTotal, delta: -1 });
+                }
+                points.sort((a, b) => (a.time - b.time) || (a.delta - b.delta));
+                let activeCount = 0;
+                let peak = 0;
+                for (const p of points) {
+                    activeCount += p.delta;
+                    if (activeCount > peak) peak = activeCount;
+                }
+                componentMax[c] = Math.max(peak, 1);
+            }
+
+            for (let i = 0; i < arr.length; i++) {
+                arr[i].overlapCount = componentMax[componentIds[i]];
+            }
+
+            const dayMax = Math.max(...componentMax, 1);
+            byDay[key] = arr;
+            maxStacksByDay[key] = dayMax;
+        }
+
+        return { byDay, maxStacksByDay };
+    });
+
+    function getLatestEndHourFromBlocks(): number {
+        let latest = 8;
+        for (const { key } of dayOrder) {
+            for (const item of stackedMeetings.byDay?.[key] ?? []) {
+                const endHour = Math.floor(item.endTotal / 60);
+                const endMin = item.endTotal % 60;
+                const rounded = endMin > 0 ? endHour + 1 : endHour;
+                if (rounded > latest) latest = rounded;
+            }
+        }
+        return latest;
+    }
+
+    $effect(() => {
+        if (!selected && $storedProcessedData.length > 0) {
+            selected = String($storedProcessedData[0].termId);
+        }
+    });
+</script>
+
+<div class="flex flex-col gap-4 justify-center items-center h-full mt-4 w-full px-3">
+    <div class="flex flex-col gap-3 w-full max-w-3xl">
+        <div class="flex flex-row gap-3 items-center flex-wrap">
+            <div class="text-sm text-on-surface-variant">Friends:</div>
+            {#each friendList as friend}
+                <Chip
+                    variant="input"
+                    selected={selectedFriends.includes(friend.id)}
+                    onclick={() => {
+                        const exists = selectedFriends.includes(friend.id);
+                        const next = exists
+                            ? selectedFriends.filter((id) => id !== friend.id)
+                            : [...selectedFriends, friend.id];
+                        selectedFriends = next;
+                        if (primaryUser !== 'you' && !next.includes(primaryUser)) {
+                            primaryUser = 'you';
+                        }
+                    }}
+                >
+                    {friend.name}
+                </Chip>
+            {/each}
+        </div>
+        <div class="flex flex-row gap-3 items-center">
+            <div class="text-sm text-on-surface-variant">Primary:</div>
+            <SelectOutlined
+                label=""
+                options={[
+                    { text: 'You', value: 'you' },
+                    ...friendList
+                        .filter((f) => selectedFriends.includes(f.id))
+                        .map((f) => ({ text: f.name, value: f.id }))
+                ]}
+                bind:value={primaryUser}
+            />
+        </div>
+    </div>
+    {#if Object.values(stackedMeetings.byDay ?? {}).some((arr) => arr.length > 0)}
+        {@const latestHour = getLatestEndHourFromBlocks()}
+        {@const numHours = latestHour - 8 + 1}
+        <div class="flex flex-col w-full h-full overflow-hidden">
+            <div class="flex-1 overflow-x-auto overflow-y-hidden">
+                <div class="inline-flex flex-col min-w-full h-full">
+                    <div class="flex flex-row border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10">
+                        <div class="w-24 border-r border-outline-variant"></div>
+                        {#each Array(numHours) as _, i}
+                            {@const hour = i + 8}
+                            <div class="w-32 border-r border-outline-variant flex items-center justify-center py-2">
+                                <span class="text-xs text-on-surface-variant">{formatHourLabel(hour)}</span>
+                            </div>
+                        {/each}
+                    </div>
+
+                    {#each dayOrder.slice(0, 5) as day}
+                        {@const dayEvents = stackedMeetings.byDay?.[day.key] ?? []}
+                        {@const dayStacks = Math.max(stackedMeetings.maxStacksByDay?.[day.key] ?? 1, 1)}
+                        {@const dayHeight = Math.min(Math.max(120, dayStacks * 52), 190)}
+                        <div class="flex flex-row flex-1 border-b border-outline-variant relative" style={`height:${dayHeight}px; min-height:${dayHeight}px;`}>
+                            <div class="w-24 border-r border-outline-variant flex items-center justify-center bg-surface-container-low left-0 z-5">
+                                <span class="font-medium text-sm">{day.label}</span>
+                            </div>
+
+                            <div class="relative flex-1 flex">
+                                {#each Array(numHours) as _}
+                                    <div class="w-32 border-r border-outline-variant"></div>
+                                {/each}
+
+                                {#each dayEvents as item (`${item.ownerId}-${item.meeting.id}`)}
+                                    {@const overlapCount = Math.max(item.overlapCount ?? 1, 1)}
+                                    {@const heightPct = Math.max((100 - (overlapCount + 1) * stackGapPct) / overlapCount, 0)}
+                                    {@const topPct = stackGapPct + item.stackIndex * (heightPct + stackGapPct)}
+                                    <button
+                                        class="absolute rounded px-2 py-1 text-xs overflow-hidden cursor-pointer hover:shadow-md transition-shadow border-t-2"
+                                        style={`background-color:${item.bgColor}; color:${item.textColor}; left:${item.startOffset}rem; width:${item.width}rem; top:${topPct}%; height:${heightPct}%; border-color:${item.bgColor}; opacity:${item.isPrimary ? 1 : 0.5};`}
+                                        onclick={() => {activeCourse = item.course; activeMeeting = item.meeting; activeDay = day;}}
+                                    >
+                                        <div class="font-medium truncate">{item.meeting.title_overrides?.[day.key] ?? item.course.title}</div>
+                                        <div class="opacity-80">{convertTo12Hour(item.meeting.begin_time)} - {convertTo12Hour(item.meeting.end_time)}</div>
+                                        <div class="opacity-70 text-[10px]">{item.meeting.location.building.abbreviation} {item.meeting.location.room}</div>
+                                    </button>
+                                {/each}
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {:else}
+        <div class="text-sm text-secondary">No calendar data available.</div>
+    {/if}
+</div>
+
+{#if activeCourse}
+    <div
+        transition:fade={{ duration: 200 }}
+        class="fixed inset-0 bg-scrim/60 z-50 flex items-center justify-center p-4"
+        role="button"
+        tabindex="0"
+        onclick={(e) => { if (e.target === e.currentTarget) { activeCourse = undefined; activeMeeting = undefined; activeDay = undefined; } }}
+        onkeydown={(e) => { if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') { activeCourse = undefined; activeMeeting = undefined; activeDay = undefined; } }}
+    >
+        <div
+            transition:scale={{ duration: 200, start: 0.95 }}
+            class="relative bg-surface-container-low rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+        >
+            <div class="flex flex-col gap-4 p-6">
+                <div class="flex justify-between">
+                    <h1 class="font-bold text-2xl">{activeCourse.title}</h1>
+                    <button
+                        class="p-2 rounded-full hover:bg-surface-container-high text-on-surface"
+                        aria-label="Close"
+                        onclick={() => {activeCourse = undefined; activeMeeting = undefined; activeDay = undefined;}}
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}

From 003654e77185c55cd15cae8df5a88b4e40e14f23 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Mon, 12 Jan 2026 15:12:50 -0500
Subject: [PATCH 2/4] find a time to meet

---
 client/src/routes/friends/+page.svelte | 261 ++++++++++++++++++++-----
 1 file changed, 217 insertions(+), 44 deletions(-)

diff --git a/client/src/routes/friends/+page.svelte b/client/src/routes/friends/+page.svelte
index f9c82b1..d2d6c57 100644
--- a/client/src/routes/friends/+page.svelte
+++ b/client/src/routes/friends/+page.svelte
@@ -2,7 +2,7 @@
     import { processedData as storedProcessedData, userSettings as storedUserSettings } from '$lib/store';
     import type { Course, MeetingTime, DayItem } from '$lib/types';
     import { fade, scale } from 'svelte/transition';
-    import { Chip, SelectOutlined } from 'm3-svelte';
+    import { Chip, SelectOutlined, TextFieldOutlined, VariableTabs } from 'm3-svelte';
     import friendSample2 from './user2.json';
     import friendSample3 from './user3.json';
     import friendSample4 from './user4.json';
@@ -149,6 +149,119 @@
         { key: 'sunday', label: 'Sunday', abbr: 'Su', order: 6 }
     ];
 
+    let meetMinDurationMinutesInput = $state<string>('30');
+    let meetBufferMinutesInput = $state<string>('10');
+    let meetMinDurationMinutes = $derived(Math.max(0, Math.floor(Number(meetMinDurationMinutesInput) || 0)));
+    let meetBufferMinutes = $derived(Math.max(0, Math.floor(Number(meetBufferMinutesInput) || 0)));
+    let meetBetweenClassesOnly = $state<boolean>(false);
+    let meetRangeStartInput = $state<string>('08:00');
+    let meetRangeEndInput = $state<string>('20:00');
+    let meetRangeStart = $derived(Math.max(8 * 60, Math.min(20 * 60, parseTimeToMinutes(meetRangeStartInput))));
+    let meetRangeEnd = $derived(Math.max(8 * 60, Math.min(20 * 60, parseTimeToMinutes(meetRangeEndInput))));
+    let meetRangeValid = $derived(meetRangeEnd > meetRangeStart);
+
+    type MeetWindow = { start: number; end: number; duration: number };
+    type MeetInterval = { start: number; end: number };
+
+    let tab = $state<'calendar' | 'meeting'>('calendar');
+
+    let bestMeetTimesByDay = $derived.by(() => {
+        const dayStart = meetRangeStart;
+        const dayEnd = meetRangeEnd;
+        if (!meetRangeValid) return {};
+
+        const selectedFriendCourses = friendList
+            .filter((f) => selectedFriends.includes(f.id))
+            .flatMap((f) => f.courses);
+
+        const weekdays = dayOrder.slice(0, 5).map((d) => d.key);
+        const byDay: Record<string, MeetWindow[]> = {};
+
+        if (selectedFriendCourses.length === 0) {
+            for (const key of weekdays) byDay[key] = [];
+            return byDay;
+        }
+
+        const meetingOccursOnDay = (meeting: MeetingTime, dayKey: DayItem['key']): boolean => {
+            return Boolean((meeting as unknown as Record<string, boolean>)[dayKey]);
+        };
+
+        const collectBusyIntervals = (dayKey: DayItem['key']): MeetInterval[] => {
+            const intervals: MeetInterval[] = [];
+            for (const course of selectedFriendCourses) {
+                for (const meeting of course.meeting_times) {
+                    if (!meetingOccursOnDay(meeting, dayKey)) continue;
+                    const rawStart = parseTimeToMinutes(meeting.begin_time);
+                    const rawEnd = parseTimeToMinutes(meeting.end_time);
+                    if (!Number.isFinite(rawStart) || !Number.isFinite(rawEnd)) continue;
+                    const start = Math.max(dayStart, rawStart - meetBufferMinutes);
+                    const end = Math.min(dayEnd, rawEnd + meetBufferMinutes);
+                    if (end <= start) continue;
+                    intervals.push({ start, end });
+                }
+            }
+            intervals.sort((a, b) => (a.start - b.start) || (a.end - b.end));
+            return intervals;
+        };
+
+        const mergeIntervals = (sorted: MeetInterval[]): MeetInterval[] => {
+            const merged: MeetInterval[] = [];
+            for (const it of sorted) {
+                const last = merged[merged.length - 1];
+                if (!last || it.start > last.end) {
+                    merged.push({ start: it.start, end: it.end });
+                    continue;
+                }
+                last.end = Math.max(last.end, it.end);
+            }
+            return merged;
+        };
+
+        const windowsFromMerged = (merged: MeetInterval[]): MeetWindow[] => {
+            const windows: MeetWindow[] = [];
+            if (meetBetweenClassesOnly) {
+                for (let i = 0; i < merged.length - 1; i++) {
+                    const start = merged[i].end;
+                    const end = merged[i + 1].start;
+                    const dur = end - start;
+                    if (dur >= meetMinDurationMinutes) windows.push({ start, end, duration: dur });
+                }
+                return windows;
+            }
+
+            let cursor = dayStart;
+            for (const b of merged) {
+                if (b.start > cursor) {
+                    const dur = b.start - cursor;
+                    if (dur >= meetMinDurationMinutes) {
+                        windows.push({ start: cursor, end: b.start, duration: dur });
+                    }
+                }
+                cursor = Math.max(cursor, b.end);
+            }
+            if (cursor < dayEnd) {
+                const dur = dayEnd - cursor;
+                if (dur >= meetMinDurationMinutes) {
+                    windows.push({ start: cursor, end: dayEnd, duration: dur });
+                }
+            }
+            return windows;
+        };
+
+        for (const key of weekdays) {
+            const merged = mergeIntervals(collectBusyIntervals(key as DayItem['key']));
+            if (merged.length === 0) {
+                byDay[key] = [];
+                continue;
+            }
+            const windows = windowsFromMerged(merged);
+            windows.sort((a, b) => (b.duration - a.duration) || (a.start - b.start));
+            byDay[key] = windows.slice(0, 3);
+        }
+
+        return byDay;
+    });
+
     type PositionedMeeting = {
         course: Course;
         meeting: MeetingTime;
@@ -397,59 +510,119 @@
             />
         </div>
     </div>
-    {#if Object.values(stackedMeetings.byDay ?? {}).some((arr) => arr.length > 0)}
-        {@const latestHour = getLatestEndHourFromBlocks()}
-        {@const numHours = latestHour - 8 + 1}
-        <div class="flex flex-col w-full h-full overflow-hidden">
-            <div class="flex-1 overflow-x-auto overflow-y-hidden">
-                <div class="inline-flex flex-col min-w-full h-full">
-                    <div class="flex flex-row border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10">
-                        <div class="w-24 border-r border-outline-variant"></div>
-                        {#each Array(numHours) as _, i}
-                            {@const hour = i + 8}
-                            <div class="w-32 border-r border-outline-variant flex items-center justify-center py-2">
-                                <span class="text-xs text-on-surface-variant">{formatHourLabel(hour)}</span>
+    <div class="w-full max-w-3xl">
+        <VariableTabs
+            secondary={true}
+            items={[
+                { name: 'Calendar', value: 'calendar' },
+                { name: 'Meeting Times', value: 'meeting' }
+            ]}
+            bind:tab
+        />
+    </div>
+
+    {#if tab === 'calendar'}
+        {#if Object.values(stackedMeetings.byDay ?? {}).some((arr) => arr.length > 0)}
+            {@const latestHour = getLatestEndHourFromBlocks()}
+            {@const numHours = latestHour - 8 + 1}
+            <div class="flex flex-col w-full h-full overflow-hidden">
+                <div class="flex-1 overflow-x-auto overflow-y-hidden">
+                    <div class="inline-flex flex-col min-w-full h-full">
+                        <div class="flex flex-row border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10">
+                            <div class="w-24 border-r border-outline-variant"></div>
+                            {#each Array(numHours) as _, i}
+                                {@const hour = i + 8}
+                                <div class="w-32 border-r border-outline-variant flex items-center justify-center py-2">
+                                    <span class="text-xs text-on-surface-variant">{formatHourLabel(hour)}</span>
+                                </div>
+                            {/each}
+                        </div>
+
+                        {#each dayOrder.slice(0, 5) as day}
+                            {@const dayEvents = stackedMeetings.byDay?.[day.key] ?? []}
+                            {@const dayStacks = Math.max(stackedMeetings.maxStacksByDay?.[day.key] ?? 1, 1)}
+                            {@const dayHeight = Math.min(Math.max(120, dayStacks * 52), 190)}
+                            <div class="flex flex-row flex-1 border-b border-outline-variant relative" style={`height:${dayHeight}px; min-height:${dayHeight}px;`}>
+                                <div class="w-24 border-r border-outline-variant flex items-center justify-center bg-surface-container-low left-0 z-5">
+                                    <span class="font-medium text-sm">{day.label}</span>
+                                </div>
+
+                                <div class="relative flex-1 flex">
+                                    {#each Array(numHours) as _}
+                                        <div class="w-32 border-r border-outline-variant"></div>
+                                    {/each}
+
+                                    {#each dayEvents as item (`${item.ownerId}-${item.meeting.id}`)}
+                                        {@const overlapCount = Math.max(item.overlapCount ?? 1, 1)}
+                                        {@const heightPct = Math.max((100 - (overlapCount + 1) * stackGapPct) / overlapCount, 0)}
+                                        {@const topPct = stackGapPct + item.stackIndex * (heightPct + stackGapPct)}
+                                        <button
+                                            class="absolute rounded px-2 py-1 text-xs overflow-hidden cursor-pointer hover:shadow-md transition-shadow border-t-2"
+                                            style={`background-color:${item.bgColor}; color:${item.textColor}; left:${item.startOffset}rem; width:${item.width}rem; top:${topPct}%; height:${heightPct}%; border-color:${item.bgColor}; opacity:${item.isPrimary ? 1 : 0.5};`}
+                                            onclick={() => {activeCourse = item.course; activeMeeting = item.meeting; activeDay = day;}}
+                                        >
+                                            <div class="font-medium truncate">{item.meeting.title_overrides?.[day.key] ?? item.course.title}</div>
+                                            <div class="opacity-80">{convertTo12Hour(item.meeting.begin_time)} - {convertTo12Hour(item.meeting.end_time)}</div>
+                                            <div class="opacity-70 text-[10px]">{item.meeting.location.building.abbreviation} {item.meeting.location.room}</div>
+                                        </button>
+                                    {/each}
+                                </div>
                             </div>
                         {/each}
                     </div>
+                </div>
+            </div>
+        {:else}
+            <div class="text-sm text-secondary">No calendar data available.</div>
+        {/if}
+    {:else}
+        <div class="flex flex-col gap-3 w-full max-w-3xl mt-2">
+            <div class="flex flex-row gap-3 items-center justify-between flex-wrap">
+                <div class="flex flex-col">
+                    <div class="text-sm text-on-surface-variant">Best times to meet</div>
+                    <div class="text-xs text-on-surface-variant">Common free time for selected friends, between 8am–8pm.</div>
+                </div>
+                <div class="flex flex-row gap-2 items-center flex-wrap">
+                    <TextFieldOutlined type="number" label="Min (min)" bind:value={meetMinDurationMinutesInput} />
+                    <TextFieldOutlined type="number" label="Buffer (min)" bind:value={meetBufferMinutesInput} />
+                    <TextFieldOutlined type="time" label="Start" bind:value={meetRangeStartInput} />
+                    <TextFieldOutlined type="time" label="End" bind:value={meetRangeEndInput} />
+                    <Chip variant="input" selected={meetBetweenClassesOnly} onclick={() => { meetBetweenClassesOnly = !meetBetweenClassesOnly; }}>
+                        Between classes
+                    </Chip>
+                </div>
+            </div>
+        </div>
 
+        <div class="flex flex-col gap-3 w-full max-w-3xl mt-2">
+            {#if selectedFriends.length === 0}
+                <div class="text-sm text-secondary">Select at least one friend to see suggestions.</div>
+            {:else if !meetRangeValid}
+                <div class="text-sm text-secondary">Invalid time range.</div>
+            {:else if Object.values(bestMeetTimesByDay ?? {}).some((arr) => arr.length > 0)}
+                <div class="flex flex-col gap-2">
                     {#each dayOrder.slice(0, 5) as day}
-                        {@const dayEvents = stackedMeetings.byDay?.[day.key] ?? []}
-                        {@const dayStacks = Math.max(stackedMeetings.maxStacksByDay?.[day.key] ?? 1, 1)}
-                        {@const dayHeight = Math.min(Math.max(120, dayStacks * 52), 190)}
-                        <div class="flex flex-row flex-1 border-b border-outline-variant relative" style={`height:${dayHeight}px; min-height:${dayHeight}px;`}>
-                            <div class="w-24 border-r border-outline-variant flex items-center justify-center bg-surface-container-low left-0 z-5">
-                                <span class="font-medium text-sm">{day.label}</span>
+                        {@const windows = bestMeetTimesByDay?.[day.key] ?? []}
+                        {#if windows.length > 0}
+                            <div class="flex flex-row gap-3 items-start justify-between bg-surface-container-low rounded-lg p-3 border border-outline-variant">
+                                <div class="font-medium text-sm w-24">{day.label}</div>
+                                <div class="flex-1 flex flex-row gap-2 flex-wrap justify-end">
+                                    {#each windows as w (`${day.key}-${w.start}-${w.end}`)}
+                                        <Chip variant="input" selected={false} onclick={() => {}}>
+                                            {convertTo12Hour(minutesToHHMM(w.start))} – {convertTo12Hour(minutesToHHMM(w.end))} ({w.duration}m)
+                                        </Chip>
+                                    {/each}
+                                </div>
                             </div>
-
-                            <div class="relative flex-1 flex">
-                                {#each Array(numHours) as _}
-                                    <div class="w-32 border-r border-outline-variant"></div>
-                                {/each}
-
-                                {#each dayEvents as item (`${item.ownerId}-${item.meeting.id}`)}
-                                    {@const overlapCount = Math.max(item.overlapCount ?? 1, 1)}
-                                    {@const heightPct = Math.max((100 - (overlapCount + 1) * stackGapPct) / overlapCount, 0)}
-                                    {@const topPct = stackGapPct + item.stackIndex * (heightPct + stackGapPct)}
-                                    <button
-                                        class="absolute rounded px-2 py-1 text-xs overflow-hidden cursor-pointer hover:shadow-md transition-shadow border-t-2"
-                                        style={`background-color:${item.bgColor}; color:${item.textColor}; left:${item.startOffset}rem; width:${item.width}rem; top:${topPct}%; height:${heightPct}%; border-color:${item.bgColor}; opacity:${item.isPrimary ? 1 : 0.5};`}
-                                        onclick={() => {activeCourse = item.course; activeMeeting = item.meeting; activeDay = day;}}
-                                    >
-                                        <div class="font-medium truncate">{item.meeting.title_overrides?.[day.key] ?? item.course.title}</div>
-                                        <div class="opacity-80">{convertTo12Hour(item.meeting.begin_time)} - {convertTo12Hour(item.meeting.end_time)}</div>
-                                        <div class="opacity-70 text-[10px]">{item.meeting.location.building.abbreviation} {item.meeting.location.room}</div>
-                                    </button>
-                                {/each}
-                            </div>
-                        </div>
+                        {/if}
                     {/each}
                 </div>
-            </div>
+            {:else}
+                <div class="text-sm text-secondary">No meeting windows match your filters.</div>
+            {/if}
         </div>
-    {:else}
-        <div class="text-sm text-secondary">No calendar data available.</div>
     {/if}
+
 </div>
 
 {#if activeCourse}

From 49760a1e1287ddd488fd85378dda2dc1c89bdd0d Mon Sep 17 00:00:00 2001
From: Cattn <Logan@cattn.dev>
Date: Thu, 12 Mar 2026 18:16:53 -0400
Subject: [PATCH 3/4] initial friends server logic

copilot yap prob useful:

Introduce friend-related backend calls, types and a full friends UI. API: add methods for listing friends/requests, create/accept/decline/cancel requests, remove friends, check processing status and fetch processed events. Types: add FriendIdentity, request/response shapes and export them. Friends page: replace static samples with real data flows, load friends/requests on mount, load friend schedules, map processed events into Course shapes, and add UI for sending requests, accepting/declining/canceling requests and removing friends; includes loading/error state handling and several Svelte/template typing/keying improvements. Also apply small TS/comment and navigation lint tweaks in calendar page.
---
 client/package-lock.json                |  16 +-
 client/src/lib/api.ts                   | 116 ++++++-
 client/src/lib/types.ts                 |  47 ++-
 client/src/routes/calendar/+page.svelte |   5 +-
 client/src/routes/friends/+page.svelte  | 399 ++++++++++++++++++++----
 5 files changed, 517 insertions(+), 66 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index b570b70..e7be883 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1180,6 +1180,7 @@
 			"integrity": "sha512-GAAbkWrbRJvysL7+HOWs5v/+TmnRcEQPeED2sUcDFTHpPvRYADEtScL6x8hWuKp0DKauJVaVJLTjQVy9e7cMiw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
@@ -1219,6 +1220,7 @@
 			"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
 				"debug": "^4.4.1",
@@ -1594,6 +1596,7 @@
 			"integrity": "sha512-BICHQ67iqxQGFSzfCFTT7MRQ5XcBjG5aeKh5Ok38UBbPe5fxTyE+aHFxwVrGyr8GNlqFMLKD1D3P2K/1ks8tog==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"undici-types": "~6.21.0"
 			}
@@ -1644,6 +1647,7 @@
 			"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@typescript-eslint/scope-manager": "8.46.2",
 				"@typescript-eslint/types": "8.46.2",
@@ -1861,6 +1865,7 @@
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2211,6 +2216,7 @@
 			"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.8.0",
 				"@eslint-community/regexpp": "^4.12.1",
@@ -3326,6 +3332,7 @@
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=12"
 			},
@@ -3353,6 +3360,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.11",
 				"picocolors": "^1.1.1",
@@ -3486,6 +3494,7 @@
 			"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -3502,6 +3511,7 @@
 			"integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"peerDependencies": {
 				"prettier": "^3.0.0",
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
@@ -3838,6 +3848,7 @@
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.42.2.tgz",
 			"integrity": "sha512-iSry5jsBHispVczyt9UrBX/1qu3HQ/UyKPAIjqlvlu3o/eUvc+kpyMyRS2O4HLLx4MvLurLGIUOyyP11pyD59g==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3931,7 +3942,8 @@
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
 			"integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
 			"dev": true,
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/tapable": {
 			"version": "2.3.0",
@@ -4019,6 +4031,7 @@
 			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
 			"dev": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -4081,6 +4094,7 @@
 			"integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.5.0",
diff --git a/client/src/lib/api.ts b/client/src/lib/api.ts
index 3c12c2b..0c00ca3 100644
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -1,5 +1,5 @@
 import { EnvironmentManager } from "./environment";
-import type { isProcessed, ProcessedEvents, UniversityCalendarEvent, UniversityEventCategoryWithCount, UserSettings } from "./types";
+import type { FriendListResponse, FriendProcessedEventsResponse, FriendRequestAcceptResponse, FriendRequestCreateResponse, FriendRequestsResponse, isProcessed, OkResponse, ProcessedEvents, UniversityCalendarEvent, UniversityEventCategoryWithCount, UserSettings } from "./types";
 
 export class API {
     private static async getBaseUrl(): Promise<string> {
@@ -108,6 +108,120 @@ export class API {
         return response.json();
     }
 
+    public static async getFriends(): Promise<FriendListResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends`, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async getFriendRequests(): Promise<FriendRequestsResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/requests`, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async createFriendRequest(friendId: string): Promise<FriendRequestCreateResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/requests`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ friend_id: friendId })
+        });
+        return response.json();
+    }
+
+    public static async acceptFriendRequest(requestId: string): Promise<FriendRequestAcceptResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/requests/${requestId}/accept`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async declineFriendRequest(requestId: string): Promise<OkResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/requests/${requestId}/decline`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async cancelFriendRequest(requestId: string): Promise<OkResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/requests/${requestId}`, {
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async removeFriend(friendId: string): Promise<OkResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/${friendId}`, {
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        return response.json();
+    }
+
+    public static async friendIsProcessed(friendId: string, termUid: string): Promise<isProcessed> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/${friendId}/is_processed`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ term_uid: termUid })
+        });
+        return response.json();
+    }
+
+    public static async getFriendProcessedEvents(friendId: string, termUid: string): Promise<FriendProcessedEventsResponse> {
+        const baseUrl = await this.getBaseUrl();
+        const token = await this.getJwtToken();
+        const response = await fetch(`${baseUrl}/friends/${friendId}/processed_events`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ term_uid: termUid })
+        });
+        return response.json();
+    }
+
     public static async getIcsUrl(): Promise<{ ics_url: string }> {
         const baseUrl = await this.getBaseUrl();
         const token = await this.getJwtToken();
diff --git a/client/src/lib/types.ts b/client/src/lib/types.ts
index bd16839..cf47aee 100644
--- a/client/src/lib/types.ts
+++ b/client/src/lib/types.ts
@@ -62,6 +62,49 @@ interface isProcessed {
     processed: boolean;
 }
 
+interface FriendIdentity {
+    id: string;
+    name: string;
+}
+
+interface FriendRequestIncoming {
+    request_id: string;
+    from: FriendIdentity;
+    created_at: string;
+}
+
+interface FriendRequestOutgoing {
+    request_id: string;
+    to: FriendIdentity;
+    created_at: string;
+}
+
+interface FriendListResponse {
+    friends: FriendIdentity[];
+}
+
+interface FriendRequestsResponse {
+    incoming: FriendRequestIncoming[];
+    outgoing: FriendRequestOutgoing[];
+}
+
+interface FriendRequestCreateResponse {
+    request_id: string;
+}
+
+interface FriendRequestAcceptResponse {
+    friendship_id: string;
+    friend: FriendIdentity;
+}
+
+interface OkResponse {
+    ok: boolean;
+}
+
+interface FriendProcessedEventsResponse {
+    processed_courses: any[];
+}
+
 interface Professor {
     first_name: string;
     last_name: string;
@@ -224,6 +267,6 @@ export {
     FEATURE_FLAGS,
     type Building,
     type CalendarConfig, type Course, type CurrentTerm, type DayItem,
-    type EventPreferences, type GetPreferencesResponse, type isProcessed, type Location,
-    type MeetingTime, type NextTerm, type NotificationMethod, type NotificationSetting, type NotificationType, type Preview, type ProcessedEvents, type Professor, type ReminderSettings, type ResolvedData, type ResponseData, type TemplateVariables, type Term, type TermResponse, type UniversityCalendarEvent, type UniversityEventCategory, type UniversityEventCategoryWithCount, type UserSettings
+    type EventPreferences, type FriendIdentity, type FriendListResponse, type FriendProcessedEventsResponse, type FriendRequestAcceptResponse, type FriendRequestCreateResponse, type FriendRequestIncoming, type FriendRequestOutgoing, type FriendRequestsResponse, type GetPreferencesResponse, type isProcessed, type Location,
+    type MeetingTime, type NextTerm, type NotificationMethod, type NotificationSetting, type NotificationType, type OkResponse, type Preview, type ProcessedEvents, type Professor, type ReminderSettings, type ResolvedData, type ResponseData, type TemplateVariables, type Term, type TermResponse, type UniversityCalendarEvent, type UniversityEventCategory, type UniversityEventCategoryWithCount, type UserSettings
 };
diff --git a/client/src/routes/calendar/+page.svelte b/client/src/routes/calendar/+page.svelte
index c5355eb..6827274 100644
--- a/client/src/routes/calendar/+page.svelte
+++ b/client/src/routes/calendar/+page.svelte
@@ -668,7 +668,8 @@
             event_preference.color_id = courseColor;
         }
 
-        //@ts-ignore
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        //@ts-expect-error
         const convertedNotifications: ReminderSettings[] = notifications.map(n => ({
             time: (n.time).toString(),
             type: n.type,
@@ -838,6 +839,7 @@
                     jwt_token = await API.getJwtToken();
                     if (!jwt_token) {
                         // No JWT token for current environment, redirect to welcome page
+                        // eslint-disable-next-line svelte/no-navigation-without-resolve
                         goto('/');
                         return;
                     }
@@ -859,6 +861,7 @@
         jwt_token = await API.getJwtToken();
         if (!jwt_token) {
             // No JWT token for current environment, redirect to welcome page
+            // eslint-disable-next-line svelte/no-navigation-without-resolve
             goto('/');
             return;
         }
diff --git a/client/src/routes/friends/+page.svelte b/client/src/routes/friends/+page.svelte
index d2d6c57..8358e8e 100644
--- a/client/src/routes/friends/+page.svelte
+++ b/client/src/routes/friends/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
+    import { API } from '$lib/api';
     import { processedData as storedProcessedData, userSettings as storedUserSettings } from '$lib/store';
-    import type { Course, MeetingTime, DayItem } from '$lib/types';
+    import type { Course, DayItem, FriendIdentity, FriendProcessedEventsResponse, FriendRequestIncoming, FriendRequestOutgoing, MeetingTime } from '$lib/types';
+    import { onMount } from 'svelte';
     import { fade, scale } from 'svelte/transition';
     import { Chip, SelectOutlined, TextFieldOutlined, VariableTabs } from 'm3-svelte';
-    import friendSample2 from './user2.json';
-    import friendSample3 from './user3.json';
-    import friendSample4 from './user4.json';
 
     let selected = $state<string | undefined>(undefined);
     let processedData: Course[] | undefined = $derived(
@@ -19,14 +18,52 @@
     let activeCourse = $state<Course | undefined>(undefined);
     let activeMeeting = $state<MeetingTime | undefined>(undefined);
     let activeDay = $state<DayItem | undefined>(undefined);
+    let friendIdentities = $state<FriendIdentity[]>([]);
+    let friendList = $state<Array<{ id: string; name: string; courses: Course[] }>>([]);
+    let incomingRequests = $state<FriendRequestIncoming[]>([]);
+    let outgoingRequests = $state<FriendRequestOutgoing[]>([]);
+    let selectedFriends = $state<string[]>([]);
+    let sendFriendIdInput = $state<string>('');
+    let friendsLoading = $state<boolean>(false);
+    let requestsLoading = $state<boolean>(false);
+    let schedulesLoading = $state<boolean>(false);
+    let pageError = $state<string>('');
+    let actionLoadingId = $state<string>('');
+    let schedulesLoadVersion = 0;
+
+    type RawFriendMeeting = {
+        begin_time: string;
+        end_time: string;
+        day_of_week: string;
+        start_date?: string;
+        end_date?: string;
+        location?: {
+            building?: {
+                name?: string;
+                abbreviation?: string;
+            };
+            room?: string;
+        };
+    };
 
-    type FriendData = { id: string; name: string; data: typeof friendSample2 };
-
-    const friendSamples: FriendData[] = [
-        { id: 'friend-2', name: 'Daniel', data: friendSample2 },
-        { id: 'friend-3', name: 'Jasper', data: friendSample3 },
-        { id: 'friend-4', name: 'Jojo', data: friendSample4 }
-    ];
+    type RawFriendCourse = {
+        title: string;
+        subject?: string;
+        prefix?: string;
+        course_number?: number | string;
+        schedule_type?: string;
+        term?: {
+            uid?: number | string;
+            season?: string;
+            year?: number | string;
+        };
+        instructors?: Array<{
+            first_name?: string;
+            last_name?: string;
+            email?: string;
+        }>;
+        meeting_times?: RawFriendMeeting[];
+    };
 
     function parseTimeToMinutes(timeStr: string): number {
         const trimmed = timeStr.trim();
@@ -56,34 +93,35 @@
         return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
     }
 
-    function mapFriendCourses(data: typeof friendSample2, friendId: string): Course[] {
-        return data.processed_courses.map((c, ci) => ({
+    function mapFriendCourses(data: FriendProcessedEventsResponse, friendId: string): Course[] {
+        const processedCourses = Array.isArray(data?.processed_courses) ? (data.processed_courses as RawFriendCourse[]) : [];
+        return processedCourses.map((c, ci: number) => ({
             title: c.title,
-            prefix: c.subject,
-            course_number: c.course_number,
-            schedule_type: c.schedule_type,
-            term: { uid: c.term.uid, season: c.term.season, year: c.term.year },
+            prefix: c.subject ?? c.prefix ?? '',
+            course_number: Number(c.course_number ?? 0),
+            schedule_type: c.schedule_type ?? '',
+            term: { uid: Number(c.term?.uid ?? 0), season: c.term?.season ?? '', year: Number(c.term?.year ?? 0) },
             professor: {
-                first_name: c.instructors[0]?.first_name ?? '',
-                last_name: c.instructors[0]?.last_name ?? '',
-                email: c.instructors[0]?.email ?? ''
+                first_name: c.instructors?.[0]?.first_name ?? '',
+                last_name: c.instructors?.[0]?.last_name ?? '',
+                email: c.instructors?.[0]?.email ?? ''
             },
-            meeting_times: c.meeting_times.map((m, mi) => {
+            meeting_times: (Array.isArray(c.meeting_times) ? c.meeting_times : []).map((m, mi: number) => {
                 const begin = to24Hour(m.begin_time);
                 const end = to24Hour(m.end_time);
-                const dayKey = m.day_of_week as DayItem['key'];
+                const dayKey = String(m.day_of_week ?? '').toLowerCase() as DayItem['key'];
                 return {
                     id: `${friendId}-${ci}-${mi}-${dayKey}`,
                     begin_time: begin,
                     end_time: end,
-                    start_date: m.start_date,
-                    end_date: m.end_date,
+                    start_date: m.start_date ?? '',
+                    end_date: m.end_date ?? '',
                     location: {
                         building: {
-                            name: m.location.building.name,
-                            abbreviation: m.location.building.abbreviation
+                            name: m.location?.building?.name ?? '',
+                            abbreviation: m.location?.building?.abbreviation ?? ''
                         },
-                        room: m.location.room
+                        room: m.location?.room ?? ''
                     },
                     monday: dayKey === 'monday',
                     tuesday: dayKey === 'tuesday',
@@ -97,14 +135,6 @@
         }));
     }
 
-    const friendList: Array<{ id: string; name: string; courses: Course[] }> = friendSamples.map((f) => ({
-        id: f.id,
-        name: f.name,
-        courses: mapFriendCourses(f.data, f.id)
-    }));
-
-    let selectedFriends = $state<string[]>(friendList.length ? [friendList[0].id] : []);
-
     type CalendarBlock = {
         course: Course;
         meeting: MeetingTime;
@@ -318,7 +348,7 @@
                     const startTotal = parseTimeToMinutes(meeting.begin_time);
                     const endTotal = parseTimeToMinutes(meeting.end_time);
                     for (const { key } of dayOrder) {
-                        if (!(meeting as any)[key]) continue;
+                        if (!(meeting as unknown as Record<DayItem['key'], boolean>)[key]) continue;
                         blocks.push({ course, meeting, startTotal, endTotal, ownerId, ownerPriority, isPrimary });
                     }
                 }
@@ -332,12 +362,12 @@
         const maxStacksByDay: Record<string, number> = {};
 
         for (const { key } of dayOrder) {
-            const seen = new Set<string>();
+            const seen: Record<string, boolean> = {};
             const blocks = allBlocks.filter((b) => {
-                if (!(b.meeting as any)[key]) return false;
+                if (!(b.meeting as unknown as Record<DayItem['key'], boolean>)[key]) return false;
                 const k = `${b.ownerId}-${b.startTotal}-${b.endTotal}-${b.course.title}`;
-                if (seen.has(k)) return false;
-                seen.add(k);
+                if (seen[k]) return false;
+                seen[k] = true;
                 return true;
             });
             if (blocks.length === 0) {
@@ -466,35 +496,277 @@
         return latest;
     }
 
+    async function loadFriendsAndRequests() {
+        pageError = '';
+        friendsLoading = true;
+        requestsLoading = true;
+        try {
+            const [friendsResponse, requestsResponse] = await Promise.all([
+                API.getFriends(),
+                API.getFriendRequests()
+            ]);
+            friendIdentities = friendsResponse.friends ?? [];
+            incomingRequests = requestsResponse.incoming ?? [];
+            outgoingRequests = requestsResponse.outgoing ?? [];
+        } catch (error) {
+            console.error('Failed to load friends data', error);
+            pageError = 'Failed to load friends data.';
+        } finally {
+            friendsLoading = false;
+            requestsLoading = false;
+        }
+    }
+
+    async function loadFriendSchedules(termUid: string) {
+        const loadVersion = ++schedulesLoadVersion;
+        schedulesLoading = true;
+        try {
+            const coursesByFriend = await Promise.all(friendIdentities.map(async (friend) => {
+                try {
+                    const status = await API.friendIsProcessed(friend.id, termUid);
+                    if (!status.processed) {
+                        return { id: friend.id, courses: [] as Course[] };
+                    }
+                    const response = await API.getFriendProcessedEvents(friend.id, termUid);
+                    return { id: friend.id, courses: mapFriendCourses(response, friend.id) };
+                } catch (error) {
+                    console.error(`Failed to load schedule for ${friend.id}`, error);
+                    return { id: friend.id, courses: [] as Course[] };
+                }
+            }));
+            if (loadVersion !== schedulesLoadVersion) return;
+            const coursesMap = new Map(coursesByFriend.map((f) => [f.id, f.courses]));
+            friendList = friendIdentities.map((friend) => ({
+                id: friend.id,
+                name: friend.name,
+                courses: coursesMap.get(friend.id) ?? []
+            }));
+            selectedFriends = selectedFriends.filter((id) => friendIdentities.some((f) => f.id === id));
+            if (selectedFriends.length === 0 && friendIdentities.length > 0) {
+                selectedFriends = [friendIdentities[0].id];
+            }
+            if (primaryUser !== 'you' && !friendIdentities.some((f) => f.id === primaryUser)) {
+                primaryUser = 'you';
+            }
+        } finally {
+            if (loadVersion === schedulesLoadVersion) {
+                schedulesLoading = false;
+            }
+        }
+    }
+
+    async function sendFriendRequest() {
+        const friendId = sendFriendIdInput.trim();
+        if (!friendId) return;
+        actionLoadingId = 'send-request';
+        pageError = '';
+        try {
+            await API.createFriendRequest(friendId);
+            sendFriendIdInput = '';
+            await loadFriendsAndRequests();
+        } catch (error) {
+            console.error('Failed to send friend request', error);
+            pageError = 'Failed to send friend request.';
+        } finally {
+            actionLoadingId = '';
+        }
+    }
+
+    async function acceptRequest(requestId: string) {
+        actionLoadingId = `accept-${requestId}`;
+        pageError = '';
+        try {
+            await API.acceptFriendRequest(requestId);
+            await loadFriendsAndRequests();
+            if (selected) {
+                await loadFriendSchedules(selected);
+            }
+        } catch (error) {
+            console.error('Failed to accept request', error);
+            pageError = 'Failed to accept request.';
+        } finally {
+            actionLoadingId = '';
+        }
+    }
+
+    async function declineRequest(requestId: string) {
+        actionLoadingId = `decline-${requestId}`;
+        pageError = '';
+        try {
+            await API.declineFriendRequest(requestId);
+            await loadFriendsAndRequests();
+        } catch (error) {
+            console.error('Failed to decline request', error);
+            pageError = 'Failed to decline request.';
+        } finally {
+            actionLoadingId = '';
+        }
+    }
+
+    async function cancelRequest(requestId: string) {
+        actionLoadingId = `cancel-${requestId}`;
+        pageError = '';
+        try {
+            await API.cancelFriendRequest(requestId);
+            await loadFriendsAndRequests();
+        } catch (error) {
+            console.error('Failed to cancel request', error);
+            pageError = 'Failed to cancel request.';
+        } finally {
+            actionLoadingId = '';
+        }
+    }
+
+    async function unfriend(friendId: string) {
+        actionLoadingId = `unfriend-${friendId}`;
+        pageError = '';
+        try {
+            await API.removeFriend(friendId);
+            await loadFriendsAndRequests();
+            if (selected) {
+                await loadFriendSchedules(selected);
+            }
+        } catch (error) {
+            console.error('Failed to remove friend', error);
+            pageError = 'Failed to remove friend.';
+        } finally {
+            actionLoadingId = '';
+        }
+    }
+
+    onMount(async () => {
+        await loadFriendsAndRequests();
+    });
+
     $effect(() => {
         if (!selected && $storedProcessedData.length > 0) {
             selected = String($storedProcessedData[0].termId);
         }
     });
+
+    $effect(() => {
+        if (!selected) return;
+        if (friendIdentities.length === 0) {
+            friendList = [];
+            selectedFriends = [];
+            return;
+        }
+        void loadFriendSchedules(selected);
+    });
 </script>
 
 <div class="flex flex-col gap-4 justify-center items-center h-full mt-4 w-full px-3">
     <div class="flex flex-col gap-3 w-full max-w-3xl">
-        <div class="flex flex-row gap-3 items-center flex-wrap">
-            <div class="text-sm text-on-surface-variant">Friends:</div>
-            {#each friendList as friend}
-                <Chip
-                    variant="input"
-                    selected={selectedFriends.includes(friend.id)}
-                    onclick={() => {
-                        const exists = selectedFriends.includes(friend.id);
-                        const next = exists
-                            ? selectedFriends.filter((id) => id !== friend.id)
-                            : [...selectedFriends, friend.id];
-                        selectedFriends = next;
-                        if (primaryUser !== 'you' && !next.includes(primaryUser)) {
-                            primaryUser = 'you';
+        {#if pageError}
+            <div class="text-sm text-error">{pageError}</div>
+        {/if}
+        <div class="flex flex-col gap-2">
+            <div class="text-sm text-on-surface-variant">Send friend request</div>
+            <div class="flex flex-row gap-2 items-center flex-wrap">
+                <TextFieldOutlined
+                    label="Friend ID"
+                    bind:value={sendFriendIdInput}
+                    onkeydown={(e) => {
+                        if (e.key === 'Enter') {
+                            sendFriendRequest();
                         }
                     }}
+                />
+                <button
+                    class="px-3 py-2 rounded bg-primary text-on-primary text-sm disabled:opacity-50"
+                    disabled={actionLoadingId === 'send-request' || !sendFriendIdInput.trim()}
+                    onclick={sendFriendRequest}
                 >
-                    {friend.name}
-                </Chip>
-            {/each}
+                    Send
+                </button>
+            </div>
+        </div>
+        <div class="flex flex-col gap-2">
+            <div class="text-sm text-on-surface-variant">Incoming requests</div>
+            {#if requestsLoading}
+                <div class="text-xs text-on-surface-variant">Loading requests...</div>
+            {:else if incomingRequests.length === 0}
+                <div class="text-xs text-on-surface-variant">No incoming requests.</div>
+            {:else}
+                {#each incomingRequests as req (req.request_id)}
+                    <div class="flex flex-row items-center justify-between bg-surface-container-low rounded px-3 py-2 border border-outline-variant">
+                        <div class="text-sm">{req.from.name} ({req.from.id})</div>
+                        <div class="flex flex-row gap-2">
+                            <button
+                                class="px-2 py-1 rounded bg-primary text-on-primary text-xs disabled:opacity-50"
+                                disabled={actionLoadingId !== '' && actionLoadingId !== `accept-${req.request_id}`}
+                                onclick={() => acceptRequest(req.request_id)}
+                            >
+                                Accept
+                            </button>
+                            <button
+                                class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
+                                disabled={actionLoadingId !== '' && actionLoadingId !== `decline-${req.request_id}`}
+                                onclick={() => declineRequest(req.request_id)}
+                            >
+                                Decline
+                            </button>
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+        <div class="flex flex-col gap-2">
+            <div class="text-sm text-on-surface-variant">Outgoing requests</div>
+            {#if requestsLoading}
+                <div class="text-xs text-on-surface-variant">Loading requests...</div>
+            {:else if outgoingRequests.length === 0}
+                <div class="text-xs text-on-surface-variant">No outgoing requests.</div>
+            {:else}
+                {#each outgoingRequests as req (req.request_id)}
+                    <div class="flex flex-row items-center justify-between bg-surface-container-low rounded px-3 py-2 border border-outline-variant">
+                        <div class="text-sm">{req.to.name} ({req.to.id})</div>
+                        <button
+                            class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
+                            disabled={actionLoadingId !== '' && actionLoadingId !== `cancel-${req.request_id}`}
+                            onclick={() => cancelRequest(req.request_id)}
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                {/each}
+            {/if}
+        </div>
+        <div class="flex flex-row gap-3 items-center flex-wrap">
+            <div class="text-sm text-on-surface-variant">Friends:</div>
+            {#if friendsLoading || schedulesLoading}
+                <div class="text-xs text-on-surface-variant">Loading friends...</div>
+            {:else if friendList.length === 0}
+                <div class="text-xs text-on-surface-variant">No accepted friends yet.</div>
+            {:else}
+                {#each friendList as friend (friend.id)}
+                    <div class="flex flex-row gap-2 items-center">
+                        <Chip
+                            variant="input"
+                            selected={selectedFriends.includes(friend.id)}
+                            onclick={() => {
+                                const exists = selectedFriends.includes(friend.id);
+                                const next = exists
+                                    ? selectedFriends.filter((id) => id !== friend.id)
+                                    : [...selectedFriends, friend.id];
+                                selectedFriends = next;
+                                if (primaryUser !== 'you' && !next.includes(primaryUser)) {
+                                    primaryUser = 'you';
+                                }
+                            }}
+                        >
+                            {friend.name}
+                        </Chip>
+                        <button
+                            class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
+                            disabled={actionLoadingId !== '' && actionLoadingId !== `unfriend-${friend.id}`}
+                            onclick={() => unfriend(friend.id)}
+                        >
+                            Remove
+                        </button>
+                    </div>
+                {/each}
+            {/if}
         </div>
         <div class="flex flex-row gap-3 items-center">
             <div class="text-sm text-on-surface-variant">Primary:</div>
@@ -530,7 +802,7 @@
                     <div class="inline-flex flex-col min-w-full h-full">
                         <div class="flex flex-row border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10">
                             <div class="w-24 border-r border-outline-variant"></div>
-                            {#each Array(numHours) as _, i}
+                            {#each Array(numHours) as i (i)}
                                 {@const hour = i + 8}
                                 <div class="w-32 border-r border-outline-variant flex items-center justify-center py-2">
                                     <span class="text-xs text-on-surface-variant">{formatHourLabel(hour)}</span>
@@ -538,7 +810,7 @@
                             {/each}
                         </div>
 
-                        {#each dayOrder.slice(0, 5) as day}
+                        {#each dayOrder.slice(0, 5) as day (day.key)}
                             {@const dayEvents = stackedMeetings.byDay?.[day.key] ?? []}
                             {@const dayStacks = Math.max(stackedMeetings.maxStacksByDay?.[day.key] ?? 1, 1)}
                             {@const dayHeight = Math.min(Math.max(120, dayStacks * 52), 190)}
@@ -548,7 +820,7 @@
                                 </div>
 
                                 <div class="relative flex-1 flex">
-                                    {#each Array(numHours) as _}
+                                    {#each Array(numHours) as i (`grid-${day.key}-${i}`)}
                                         <div class="w-32 border-r border-outline-variant"></div>
                                     {/each}
 
@@ -601,7 +873,7 @@
                 <div class="text-sm text-secondary">Invalid time range.</div>
             {:else if Object.values(bestMeetTimesByDay ?? {}).some((arr) => arr.length > 0)}
                 <div class="flex flex-col gap-2">
-                    {#each dayOrder.slice(0, 5) as day}
+                    {#each dayOrder.slice(0, 5) as day (day.key)}
                         {@const windows = bestMeetTimesByDay?.[day.key] ?? []}
                         {#if windows.length > 0}
                             <div class="flex flex-row gap-3 items-start justify-between bg-surface-container-low rounded-lg p-3 border border-outline-variant">
@@ -649,6 +921,11 @@
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>
                     </button>
                 </div>
+                {#if activeMeeting && activeDay}
+                    <div class="text-sm text-on-surface-variant">
+                        {activeDay.label}: {convertTo12Hour(activeMeeting.begin_time)} - {convertTo12Hour(activeMeeting.end_time)}
+                    </div>
+                {/if}
             </div>
         </div>
     </div>

From ecc7675836b6501d51d3c7154e1288a86d785e09 Mon Sep 17 00:00:00 2001
From: Logan <Logan@cattn.dev>
Date: Thu, 12 Mar 2026 19:55:14 -0400
Subject: [PATCH 4/4] pt 2

revert certain calendar view changes, fix up UI greatly, fix up displaying user info, etc.

TODO: test with 3 total users, fixup placement on the homepage tab of buttons, add back button
---
 client/src/routes/friends/+page.svelte | 322 ++++++++++++++-----------
 1 file changed, 184 insertions(+), 138 deletions(-)

diff --git a/client/src/routes/friends/+page.svelte b/client/src/routes/friends/+page.svelte
index 8358e8e..283b13f 100644
--- a/client/src/routes/friends/+page.svelte
+++ b/client/src/routes/friends/+page.svelte
@@ -32,11 +32,21 @@
     let schedulesLoadVersion = 0;
 
     type RawFriendMeeting = {
+        id?: number | string;
         begin_time: string;
         end_time: string;
-        day_of_week: string;
+        day_of_week?: string;
         start_date?: string;
         end_date?: string;
+        monday?: boolean;
+        tuesday?: boolean;
+        wednesday?: boolean;
+        thursday?: boolean;
+        friday?: boolean;
+        saturday?: boolean;
+        sunday?: boolean;
+        color?: string;
+        title_overrides?: Partial<Record<DayItem['key'], string>>;
         location?: {
             building?: {
                 name?: string;
@@ -52,6 +62,11 @@
         prefix?: string;
         course_number?: number | string;
         schedule_type?: string;
+        professor?: {
+            first_name?: string;
+            last_name?: string;
+            email?: string;
+        };
         term?: {
             uid?: number | string;
             season?: string;
@@ -93,8 +108,10 @@
         return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
     }
 
-    function mapFriendCourses(data: FriendProcessedEventsResponse, friendId: string): Course[] {
-        const processedCourses = Array.isArray(data?.processed_courses) ? (data.processed_courses as RawFriendCourse[]) : [];
+    function mapFriendCourses(data: FriendProcessedEventsResponse & { classes?: RawFriendCourse[] }, friendId: string): Course[] {
+        const processedCourses = Array.isArray(data?.processed_courses)
+            ? (data.processed_courses as RawFriendCourse[])
+            : (Array.isArray(data?.classes) ? data.classes : []);
         return processedCourses.map((c, ci: number) => ({
             title: c.title,
             prefix: c.subject ?? c.prefix ?? '',
@@ -102,16 +119,25 @@
             schedule_type: c.schedule_type ?? '',
             term: { uid: Number(c.term?.uid ?? 0), season: c.term?.season ?? '', year: Number(c.term?.year ?? 0) },
             professor: {
-                first_name: c.instructors?.[0]?.first_name ?? '',
-                last_name: c.instructors?.[0]?.last_name ?? '',
-                email: c.instructors?.[0]?.email ?? ''
+                first_name: c.professor?.first_name ?? c.instructors?.[0]?.first_name ?? '',
+                last_name: c.professor?.last_name ?? c.instructors?.[0]?.last_name ?? '',
+                email: c.professor?.email ?? c.instructors?.[0]?.email ?? ''
             },
             meeting_times: (Array.isArray(c.meeting_times) ? c.meeting_times : []).map((m, mi: number) => {
                 const begin = to24Hour(m.begin_time);
                 const end = to24Hour(m.end_time);
                 const dayKey = String(m.day_of_week ?? '').toLowerCase() as DayItem['key'];
+                const hasDayFlags = (
+                    m.monday !== undefined ||
+                    m.tuesday !== undefined ||
+                    m.wednesday !== undefined ||
+                    m.thursday !== undefined ||
+                    m.friday !== undefined ||
+                    m.saturday !== undefined ||
+                    m.sunday !== undefined
+                );
                 return {
-                    id: `${friendId}-${ci}-${mi}-${dayKey}`,
+                    id: m.id ?? `${friendId}-${ci}-${mi}-${dayKey}`,
                     begin_time: begin,
                     end_time: end,
                     start_date: m.start_date ?? '',
@@ -123,13 +149,15 @@
                         },
                         room: m.location?.room ?? ''
                     },
-                    monday: dayKey === 'monday',
-                    tuesday: dayKey === 'tuesday',
-                    wednesday: dayKey === 'wednesday',
-                    thursday: dayKey === 'thursday',
-                    friday: dayKey === 'friday',
-                    saturday: dayKey === 'saturday',
-                    sunday: dayKey === 'sunday'
+                    monday: hasDayFlags ? Boolean(m.monday) : dayKey === 'monday',
+                    tuesday: hasDayFlags ? Boolean(m.tuesday) : dayKey === 'tuesday',
+                    wednesday: hasDayFlags ? Boolean(m.wednesday) : dayKey === 'wednesday',
+                    thursday: hasDayFlags ? Boolean(m.thursday) : dayKey === 'thursday',
+                    friday: hasDayFlags ? Boolean(m.friday) : dayKey === 'friday',
+                    saturday: hasDayFlags ? Boolean(m.saturday) : dayKey === 'saturday',
+                    sunday: hasDayFlags ? Boolean(m.sunday) : dayKey === 'sunday',
+                    color: m.color,
+                    title_overrides: m.title_overrides
                 };
             })
         }));
@@ -523,13 +551,17 @@
         try {
             const coursesByFriend = await Promise.all(friendIdentities.map(async (friend) => {
                 try {
-                    const status = await API.friendIsProcessed(friend.id, termUid);
-                    if (!status.processed) {
-                        return { id: friend.id, courses: [] as Course[] };
-                    }
                     const response = await API.getFriendProcessedEvents(friend.id, termUid);
                     return { id: friend.id, courses: mapFriendCourses(response, friend.id) };
                 } catch (error) {
+                    try {
+                        const status = await API.friendIsProcessed(friend.id, termUid);
+                        if (!status.processed) {
+                            return { id: friend.id, courses: [] as Course[] };
+                        }
+                    } catch (statusError) {
+                        console.error(`Failed to check processed status for ${friend.id}`, statusError);
+                    }
                     console.error(`Failed to load schedule for ${friend.id}`, error);
                     return { id: friend.id, courses: [] as Course[] };
                 }
@@ -655,131 +687,144 @@
     });
 </script>
 
-<div class="flex flex-col gap-4 justify-center items-center h-full mt-4 w-full px-3">
-    <div class="flex flex-col gap-3 w-full max-w-3xl">
+<div class="flex flex-col gap-3 justify-center items-center h-full mt-2 w-full px-3">
+    <div class="flex flex-col gap-2.5 w-full max-w-3xl">
         {#if pageError}
             <div class="text-sm text-error">{pageError}</div>
         {/if}
-        <div class="flex flex-col gap-2">
-            <div class="text-sm text-on-surface-variant">Send friend request</div>
-            <div class="flex flex-row gap-2 items-center flex-wrap">
-                <TextFieldOutlined
-                    label="Friend ID"
-                    bind:value={sendFriendIdInput}
-                    onkeydown={(e) => {
-                        if (e.key === 'Enter') {
-                            sendFriendRequest();
-                        }
-                    }}
-                />
-                <button
-                    class="px-3 py-2 rounded bg-primary text-on-primary text-sm disabled:opacity-50"
-                    disabled={actionLoadingId === 'send-request' || !sendFriendIdInput.trim()}
-                    onclick={sendFriendRequest}
-                >
-                    Send
-                </button>
+        <div class="flex flex-col gap-2 rounded-lg border border-outline-variant bg-surface-container-low px-3 py-2">
+            <div class="flex flex-col gap-2">
+                <div class="text-xs font-medium uppercase tracking-wide text-on-surface-variant">Send friend request</div>
+                <div class="flex flex-row gap-2 items-center flex-wrap sm:flex-nowrap">
+                    <TextFieldOutlined
+                        label="Friend ID"
+                        bind:value={sendFriendIdInput}
+                        onkeydown={(e) => {
+                            if (e.key === 'Enter') {
+                                sendFriendRequest();
+                            }
+                        }}
+                    />
+                    <button
+                        class="h-10 px-3 rounded bg-primary text-on-primary text-sm whitespace-nowrap disabled:opacity-50"
+                        disabled={actionLoadingId === 'send-request' || !sendFriendIdInput.trim()}
+                        onclick={sendFriendRequest}
+                    >
+                        Send
+                    </button>
+                </div>
             </div>
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="text-sm text-on-surface-variant">Incoming requests</div>
-            {#if requestsLoading}
-                <div class="text-xs text-on-surface-variant">Loading requests...</div>
-            {:else if incomingRequests.length === 0}
-                <div class="text-xs text-on-surface-variant">No incoming requests.</div>
-            {:else}
-                {#each incomingRequests as req (req.request_id)}
-                    <div class="flex flex-row items-center justify-between bg-surface-container-low rounded px-3 py-2 border border-outline-variant">
-                        <div class="text-sm">{req.from.name} ({req.from.id})</div>
-                        <div class="flex flex-row gap-2">
-                            <button
-                                class="px-2 py-1 rounded bg-primary text-on-primary text-xs disabled:opacity-50"
-                                disabled={actionLoadingId !== '' && actionLoadingId !== `accept-${req.request_id}`}
-                                onclick={() => acceptRequest(req.request_id)}
-                            >
-                                Accept
-                            </button>
-                            <button
-                                class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
-                                disabled={actionLoadingId !== '' && actionLoadingId !== `decline-${req.request_id}`}
-                                onclick={() => declineRequest(req.request_id)}
-                            >
-                                Decline
-                            </button>
+
+            {#if requestsLoading || incomingRequests.length > 0 || outgoingRequests.length > 0}
+                <div class="h-px bg-outline-variant"></div>
+                <div class="flex flex-col gap-1.5">
+                    <div class="text-xs font-medium uppercase tracking-wide text-on-surface-variant">Requests</div>
+                    {#if requestsLoading}
+                        <div class="text-xs text-on-surface-variant">Loading requests...</div>
+                    {:else}
+                        <div class="grid gap-1.5 md:grid-cols-2">
+                            {#if incomingRequests.length > 0}
+                                <div class="flex flex-col gap-1">
+                                    <div class="text-[11px] font-medium uppercase tracking-wide text-on-surface-variant">Incoming</div>
+                                    {#each incomingRequests as req (req.request_id)}
+                                        <div class="flex flex-row items-center justify-between gap-2 bg-surface-container-lowest rounded-md px-2 py-1.5 border border-outline-variant">
+                                            <div class="text-sm truncate">{req.from.name} ({req.from.id})</div>
+                                            <div class="flex flex-row gap-1 shrink-0">
+                                                <button
+                                                    class="px-2 py-1 rounded bg-primary text-on-primary text-xs disabled:opacity-50"
+                                                    disabled={actionLoadingId !== '' && actionLoadingId !== `accept-${req.request_id}`}
+                                                    onclick={() => acceptRequest(req.request_id)}
+                                                >
+                                                    Accept
+                                                </button>
+                                                <button
+                                                    class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
+                                                    disabled={actionLoadingId !== '' && actionLoadingId !== `decline-${req.request_id}`}
+                                                    onclick={() => declineRequest(req.request_id)}
+                                                >
+                                                    Decline
+                                                </button>
+                                            </div>
+                                        </div>
+                                    {/each}
+                                </div>
+                            {/if}
+
+                            {#if outgoingRequests.length > 0}
+                                <div class="flex flex-col gap-1">
+                                    <div class="text-[11px] font-medium uppercase tracking-wide text-on-surface-variant">Outgoing</div>
+                                    {#each outgoingRequests as req (req.request_id)}
+                                        <div class="flex flex-row items-center justify-between gap-2 bg-surface-container-lowest rounded-md px-2 py-1.5 border border-outline-variant">
+                                            <div class="text-sm truncate">{req.to.name} ({req.to.id})</div>
+                                            <button
+                                                class="px-2 py-1 rounded bg-error text-on-error text-xs shrink-0 disabled:opacity-50"
+                                                disabled={actionLoadingId !== '' && actionLoadingId !== `cancel-${req.request_id}`}
+                                                onclick={() => cancelRequest(req.request_id)}
+                                            >
+                                                Cancel
+                                            </button>
+                                        </div>
+                                    {/each}
+                                </div>
+                            {/if}
                         </div>
-                    </div>
-                {/each}
-            {/if}
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="text-sm text-on-surface-variant">Outgoing requests</div>
-            {#if requestsLoading}
-                <div class="text-xs text-on-surface-variant">Loading requests...</div>
-            {:else if outgoingRequests.length === 0}
-                <div class="text-xs text-on-surface-variant">No outgoing requests.</div>
-            {:else}
-                {#each outgoingRequests as req (req.request_id)}
-                    <div class="flex flex-row items-center justify-between bg-surface-container-low rounded px-3 py-2 border border-outline-variant">
-                        <div class="text-sm">{req.to.name} ({req.to.id})</div>
-                        <button
-                            class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
-                            disabled={actionLoadingId !== '' && actionLoadingId !== `cancel-${req.request_id}`}
-                            onclick={() => cancelRequest(req.request_id)}
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                {/each}
+                    {/if}
+                </div>
             {/if}
-        </div>
-        <div class="flex flex-row gap-3 items-center flex-wrap">
-            <div class="text-sm text-on-surface-variant">Friends:</div>
-            {#if friendsLoading || schedulesLoading}
-                <div class="text-xs text-on-surface-variant">Loading friends...</div>
-            {:else if friendList.length === 0}
-                <div class="text-xs text-on-surface-variant">No accepted friends yet.</div>
-            {:else}
-                {#each friendList as friend (friend.id)}
-                    <div class="flex flex-row gap-2 items-center">
-                        <Chip
-                            variant="input"
-                            selected={selectedFriends.includes(friend.id)}
-                            onclick={() => {
-                                const exists = selectedFriends.includes(friend.id);
-                                const next = exists
-                                    ? selectedFriends.filter((id) => id !== friend.id)
-                                    : [...selectedFriends, friend.id];
-                                selectedFriends = next;
-                                if (primaryUser !== 'you' && !next.includes(primaryUser)) {
-                                    primaryUser = 'you';
-                                }
-                            }}
-                        >
-                            {friend.name}
-                        </Chip>
-                        <button
-                            class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
-                            disabled={actionLoadingId !== '' && actionLoadingId !== `unfriend-${friend.id}`}
-                            onclick={() => unfriend(friend.id)}
-                        >
-                            Remove
-                        </button>
+
+            <div class="h-px bg-outline-variant"></div>
+            <div class="flex flex-row gap-2 items-center flex-wrap">
+                <div class="text-xs font-medium uppercase tracking-wide text-on-surface-variant whitespace-nowrap">Primary</div>
+                <SelectOutlined
+                    label=""
+                    options={[
+                        { text: 'You', value: 'you' },
+                        ...friendList
+                            .filter((f) => selectedFriends.includes(f.id))
+                            .map((f) => ({ text: f.name, value: f.id }))
+                    ]}
+                    bind:value={primaryUser}
+                />
+            </div>
+
+            <div class="flex flex-col gap-1.5">
+                <div class="text-xs font-medium uppercase tracking-wide text-on-surface-variant">Friends</div>
+                {#if friendsLoading || schedulesLoading}
+                    <div class="text-xs text-on-surface-variant">Loading friends...</div>
+                {:else if friendList.length === 0}
+                    <div class="text-xs text-on-surface-variant">No accepted friends yet.</div>
+                {:else}
+                    <div class="flex flex-wrap gap-1.5">
+                        {#each friendList as friend (friend.id)}
+                            <div class="flex flex-row gap-1 items-center border border-outline-variant rounded-md px-1.5 py-1">
+                                <Chip
+                                    variant="input"
+                                    selected={selectedFriends.includes(friend.id)}
+                                    onclick={() => {
+                                        const exists = selectedFriends.includes(friend.id);
+                                        const next = exists
+                                            ? selectedFriends.filter((id) => id !== friend.id)
+                                            : [...selectedFriends, friend.id];
+                                        selectedFriends = next;
+                                        if (primaryUser !== 'you' && !next.includes(primaryUser)) {
+                                            primaryUser = 'you';
+                                        }
+                                    }}
+                                >
+                                    {friend.name}
+                                </Chip>
+                                <button
+                                    class="px-2 py-1 rounded bg-error text-on-error text-xs disabled:opacity-50"
+                                    disabled={actionLoadingId !== '' && actionLoadingId !== `unfriend-${friend.id}`}
+                                    onclick={() => unfriend(friend.id)}
+                                >
+                                    Remove
+                                </button>
+                            </div>
+                        {/each}
                     </div>
-                {/each}
-            {/if}
-        </div>
-        <div class="flex flex-row gap-3 items-center">
-            <div class="text-sm text-on-surface-variant">Primary:</div>
-            <SelectOutlined
-                label=""
-                options={[
-                    { text: 'You', value: 'you' },
-                    ...friendList
-                        .filter((f) => selectedFriends.includes(f.id))
-                        .map((f) => ({ text: f.name, value: f.id }))
-                ]}
-                bind:value={primaryUser}
-            />
+                {/if}
+            </div>
         </div>
     </div>
     <div class="w-full max-w-3xl">
@@ -797,12 +842,13 @@
         {#if Object.values(stackedMeetings.byDay ?? {}).some((arr) => arr.length > 0)}
             {@const latestHour = getLatestEndHourFromBlocks()}
             {@const numHours = latestHour - 8 + 1}
+            {@const hourIndices = Array.from({ length: numHours }, (_, i) => i)}
             <div class="flex flex-col w-full h-full overflow-hidden">
                 <div class="flex-1 overflow-x-auto overflow-y-hidden">
                     <div class="inline-flex flex-col min-w-full h-full">
                         <div class="flex flex-row border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10">
                             <div class="w-24 border-r border-outline-variant"></div>
-                            {#each Array(numHours) as i (i)}
+                            {#each hourIndices as i (i)}
                                 {@const hour = i + 8}
                                 <div class="w-32 border-r border-outline-variant flex items-center justify-center py-2">
                                     <span class="text-xs text-on-surface-variant">{formatHourLabel(hour)}</span>
@@ -820,7 +866,7 @@
                                 </div>
 
                                 <div class="relative flex-1 flex">
-                                    {#each Array(numHours) as i (`grid-${day.key}-${i}`)}
+                                    {#each hourIndices as i (`grid-${day.key}-${i}`)}
                                         <div class="w-32 border-r border-outline-variant"></div>
                                     {/each}