From 766325dc807ff5fc1081b1baafc87657499a3b0a Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Thu, 27 Nov 2025 21:17:02 -0500
Subject: [PATCH 01/17] Weird space bug fix (dark mode issue)

---
 apps/web/src/lib/components/recal/left/Events.svelte      | 8 ++++----
 .../lib/components/recal/left/elements/EventCard.svelte   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/lib/components/recal/left/Events.svelte b/apps/web/src/lib/components/recal/left/Events.svelte
index c0fa8871..1f90df38 100644
--- a/apps/web/src/lib/components/recal/left/Events.svelte
+++ b/apps/web/src/lib/components/recal/left/Events.svelte
@@ -115,9 +115,9 @@
             <div class="overflow-y-auto">
                 <div class="mb-2">
                     {#if scheduleEvents.length === 0}
-                        <p class="text-sm">No events added yet.</p>
+                        <p class="text-sm dark:text-zinc-100">No events added yet.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {scheduleEvents.length} Added
                             {scheduleEvents.length === 1 ? "Event" : "Events"}
                         </h2>
@@ -133,9 +133,9 @@
 
                 <div>
                     {#if notInSchedule.length === 0}
-                        <p class="text-sm mb-1">No events available.</p>
+                        <p class="text-sm mb-1 dark:text-zinc-100">No events available.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {notInSchedule.length} Available
                             {notInSchedule.length === 1 ? "Event" : "Events"}
                         </h2>
diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index ffa862e7..ed9d8d05 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -47,7 +47,7 @@
     on:blur={handleLeave}
     on:mouseleave={handleLeave}>
     <div class="w-[60%]">
-        <p id="title" class="text-sm p-1 overflow-clip">
+        <p id="title" class="text-sm p-1 overflow-cli {isSelected ? "" : "dark:text-zinc-100"}">
             {customEvent.title}
         </p>
     </div>

From 53c6859c4d7099f3b5422689290139936a7f4615 Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Thu, 27 Nov 2025 23:11:28 -0500
Subject: [PATCH 02/17] Completely vibe coded handle bar of death

---
 apps/web/src/lib/components/recal/Left.svelte | 179 +++++++++++++++---
 1 file changed, 154 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index a9734fb0..882be35a 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -3,49 +3,178 @@
     import SearchResults from "./left/SearchResults.svelte";
     import SearchBar from "./left/SearchBar.svelte";
     import Events from "./left/Events.svelte";
+    import { onMount } from "svelte";
+
+    // --- Split logic between Saved and SearchResults ---
+
+    let savedHeight = 200;          // initial Saved height in px
+    const MIN_SAVED = 80;           // minimum Saved height
+    const MIN_RESULTS = 120;        // minimum Results height
+
+    let splitEl: HTMLDivElement | null = null;
+
+    let dragging = false;
+    let startY = 0;
+    let startHeight = 0;
+
+    function onPointerDown(e: PointerEvent) {
+        e.preventDefault();
+        dragging = true;
+        startY = e.clientY;
+        startHeight = savedHeight;
+
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", onPointerUp);
+        window.addEventListener("pointercancel", onPointerUp);
+    }
+
+    function onPointerMove(e: PointerEvent) {
+        if (!dragging || !splitEl) return;
+
+        const dy = e.clientY - startY;
+        const containerHeight = splitEl.getBoundingClientRect().height;
+
+        const maxSaved = Math.max(MIN_SAVED, containerHeight - MIN_RESULTS);
+        const next = startHeight + dy;
+
+        savedHeight = Math.max(MIN_SAVED, Math.min(maxSaved, next));
+    }
+
+    function onPointerUp(_e: PointerEvent) {
+        if (!dragging) return;
+
+        dragging = false;
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+        window.removeEventListener("pointercancel", onPointerUp);
+    }
+
+    // Clamp Saved height whenever the split container resizes
+    onMount(() => {
+        if (!splitEl || typeof ResizeObserver === "undefined") return;
+
+        const ro = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry) return;
+
+            const height = entry.contentRect.height;
+            const maxSaved = Math.max(MIN_SAVED, height - MIN_RESULTS);
+
+            if (savedHeight > maxSaved) {
+                savedHeight = maxSaved;
+            }
+        });
+
+        ro.observe(splitEl);
+
+        return () => {
+            ro.disconnect();
+        };
+    });
 </script>
 
 <div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />
     </div>
-    <section class="flex-1 overflow-y-hidden mt-2">
-        <div class="min-h-[24px]">
+
+    <section class="flex-1 overflow-y-hidden mt-2 flex flex-col min-h-0">
+        <div class="min-h-[24px] flex-shrink-0">
             <Events />
         </div>
-        <div>
-            <Saved />
-        </div>
-        <div>
-            <SearchResults />
+
+        <!-- Split area: Saved + handle + Results -->
+        <div class="flex-1 min-h-0">
+            <div
+                class="split-container"
+                bind:this={splitEl}
+                style={`--saved-height: ${savedHeight}px;`}
+            >
+                <div class="saved-panel">
+                    <Saved />
+                </div>
+
+                <div
+                    class="resize-handle"
+                    role="separator"
+                    aria-orientation="horizontal"
+                    aria-label="Resize Saved panel"
+                    on:pointerdown={onPointerDown}
+                />
+
+                <div class="results-panel">
+                    <SearchResults />
+                </div>
+            </div>
         </div>
     </section>
 </div>
 
 <style lang="postcss">
-    /* 
-    This took hours to figure out. It allows the children to take up 
-    the remaining space in the container while maintaining a max-height
-    proportional to the parent container. This is a lesson that
-    StackOverflow is almost always better than AI for complex problems.
+    .split-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        gap: 0.25rem;
+    }
 
-    Credit: 
-    https://stackoverflow.com/questions/70324159/how-to-set-up-an-element-with-max-height-so-that-the-elements-inside-it-will-tak 
-    */
+    /* Saved: fixed (adjustable) height, internal scroll */
+    .saved-panel {
+        flex: 0 0 var(--saved-height, 200px);
+        min-height: 80px; /* keep in sync with MIN_SAVED */
+        @apply overflow-y-auto flex flex-col;
+    }
 
-    section {
-        display: grid;
-        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
-        gap: 0.5rem;
+    /* Results: fills remaining space, internal scroll */
+    .results-panel {
+        flex: 1 1 auto;
+        min-height: 120px; /* keep in sync with MIN_RESULTS */
+        @apply overflow-y-auto flex flex-col;
     }
 
-    section > *:last-child {
-        grid-row-end: span 2;
+    /* Base handle (for light theme) */
+    .resize-handle {
+    position: relative;
+    flex: 0 0 10px;
+    cursor: row-resize;
+    border-radius: 9999px;
+    
+    background-color: #d4d4d8 !important;  
+    border: 1px solid #d4d4d8 !important;
+
+    transition: background-color 120ms ease, border-color 120ms ease;
     }
 
-    section > div {
-        /* height: fit-content; */
-        max-height: 100%;
-        @apply overflow-y-hidden flex flex-col;
+    .resize-handle::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 40px;
+    height: 3px;
+    border-radius: 9999px;
+    background-color: #f9fafb;         
+    transform: translate(-50%, -50%);
     }
+
+    .resize-handle:hover {
+    background-color: #71717a !important;
+    border-color: #71717a !important;
+    }
+
+    /* Dark theme variant */
+    :is(.dark .resize-handle) {
+    background-color: rgba(255, 255, 255, 0.10) !important;
+    border-color: rgba(255, 255, 255, 0.22) !important;
+    }
+
+    :is(.dark .resize-handle::before) {
+    background-color: rgba(255, 255, 255, 0.85);
+    }
+
+    :is(.dark .resize-handle:hover) {
+    background-color: rgba(255, 255, 255, 0.16) !important;
+    }
+
 </style>

From 68178955b86e58386368e0a2e600109a5fd64878 Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Fri, 28 Nov 2025 00:07:34 -0500
Subject: [PATCH 03/17] Weird space bug fix (dark mode issue)

---
 apps/web/src/lib/components/recal/left/Events.svelte      | 8 ++++----
 .../lib/components/recal/left/elements/EventCard.svelte   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/lib/components/recal/left/Events.svelte b/apps/web/src/lib/components/recal/left/Events.svelte
index c0fa8871..1f90df38 100644
--- a/apps/web/src/lib/components/recal/left/Events.svelte
+++ b/apps/web/src/lib/components/recal/left/Events.svelte
@@ -115,9 +115,9 @@
             <div class="overflow-y-auto">
                 <div class="mb-2">
                     {#if scheduleEvents.length === 0}
-                        <p class="text-sm">No events added yet.</p>
+                        <p class="text-sm dark:text-zinc-100">No events added yet.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {scheduleEvents.length} Added
                             {scheduleEvents.length === 1 ? "Event" : "Events"}
                         </h2>
@@ -133,9 +133,9 @@
 
                 <div>
                     {#if notInSchedule.length === 0}
-                        <p class="text-sm mb-1">No events available.</p>
+                        <p class="text-sm mb-1 dark:text-zinc-100">No events available.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {notInSchedule.length} Available
                             {notInSchedule.length === 1 ? "Event" : "Events"}
                         </h2>
diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index ffa862e7..ed9d8d05 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -47,7 +47,7 @@
     on:blur={handleLeave}
     on:mouseleave={handleLeave}>
     <div class="w-[60%]">
-        <p id="title" class="text-sm p-1 overflow-clip">
+        <p id="title" class="text-sm p-1 overflow-cli {isSelected ? "" : "dark:text-zinc-100"}">
             {customEvent.title}
         </p>
     </div>

From d168be883a4db00f6a2952eb546da35c7907d733 Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Fri, 28 Nov 2025 00:08:56 -0500
Subject: [PATCH 04/17] Weird space bug fix (dark mode issue)

---
 apps/web/src/lib/components/recal/left/Events.svelte      | 8 ++++----
 .../lib/components/recal/left/elements/EventCard.svelte   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/lib/components/recal/left/Events.svelte b/apps/web/src/lib/components/recal/left/Events.svelte
index c0fa8871..1f90df38 100644
--- a/apps/web/src/lib/components/recal/left/Events.svelte
+++ b/apps/web/src/lib/components/recal/left/Events.svelte
@@ -115,9 +115,9 @@
             <div class="overflow-y-auto">
                 <div class="mb-2">
                     {#if scheduleEvents.length === 0}
-                        <p class="text-sm">No events added yet.</p>
+                        <p class="text-sm dark:text-zinc-100">No events added yet.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {scheduleEvents.length} Added
                             {scheduleEvents.length === 1 ? "Event" : "Events"}
                         </h2>
@@ -133,9 +133,9 @@
 
                 <div>
                     {#if notInSchedule.length === 0}
-                        <p class="text-sm mb-1">No events available.</p>
+                        <p class="text-sm mb-1 dark:text-zinc-100">No events available.</p>
                     {:else}
-                        <h2 class="text-sm">
+                        <h2 class="text-sm dark:text-zinc-100">
                             {notInSchedule.length} Available
                             {notInSchedule.length === 1 ? "Event" : "Events"}
                         </h2>
diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index ffa862e7..ed9d8d05 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -47,7 +47,7 @@
     on:blur={handleLeave}
     on:mouseleave={handleLeave}>
     <div class="w-[60%]">
-        <p id="title" class="text-sm p-1 overflow-clip">
+        <p id="title" class="text-sm p-1 overflow-cli {isSelected ? "" : "dark:text-zinc-100"}">
             {customEvent.title}
         </p>
     </div>

From 772c7f8f634a69facd7dd7b5e357611545c0c689 Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Fri, 28 Nov 2025 00:19:47 -0500
Subject: [PATCH 05/17] Revert "Completely vibe coded handle bar of death"

This reverts commit 53c6859c4d7099f3b5422689290139936a7f4615.
---
 apps/web/src/lib/components/recal/Left.svelte | 179 +++---------------
 1 file changed, 25 insertions(+), 154 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index 882be35a..a9734fb0 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -3,178 +3,49 @@
     import SearchResults from "./left/SearchResults.svelte";
     import SearchBar from "./left/SearchBar.svelte";
     import Events from "./left/Events.svelte";
-    import { onMount } from "svelte";
-
-    // --- Split logic between Saved and SearchResults ---
-
-    let savedHeight = 200;          // initial Saved height in px
-    const MIN_SAVED = 80;           // minimum Saved height
-    const MIN_RESULTS = 120;        // minimum Results height
-
-    let splitEl: HTMLDivElement | null = null;
-
-    let dragging = false;
-    let startY = 0;
-    let startHeight = 0;
-
-    function onPointerDown(e: PointerEvent) {
-        e.preventDefault();
-        dragging = true;
-        startY = e.clientY;
-        startHeight = savedHeight;
-
-        window.addEventListener("pointermove", onPointerMove);
-        window.addEventListener("pointerup", onPointerUp);
-        window.addEventListener("pointercancel", onPointerUp);
-    }
-
-    function onPointerMove(e: PointerEvent) {
-        if (!dragging || !splitEl) return;
-
-        const dy = e.clientY - startY;
-        const containerHeight = splitEl.getBoundingClientRect().height;
-
-        const maxSaved = Math.max(MIN_SAVED, containerHeight - MIN_RESULTS);
-        const next = startHeight + dy;
-
-        savedHeight = Math.max(MIN_SAVED, Math.min(maxSaved, next));
-    }
-
-    function onPointerUp(_e: PointerEvent) {
-        if (!dragging) return;
-
-        dragging = false;
-        window.removeEventListener("pointermove", onPointerMove);
-        window.removeEventListener("pointerup", onPointerUp);
-        window.removeEventListener("pointercancel", onPointerUp);
-    }
-
-    // Clamp Saved height whenever the split container resizes
-    onMount(() => {
-        if (!splitEl || typeof ResizeObserver === "undefined") return;
-
-        const ro = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            if (!entry) return;
-
-            const height = entry.contentRect.height;
-            const maxSaved = Math.max(MIN_SAVED, height - MIN_RESULTS);
-
-            if (savedHeight > maxSaved) {
-                savedHeight = maxSaved;
-            }
-        });
-
-        ro.observe(splitEl);
-
-        return () => {
-            ro.disconnect();
-        };
-    });
 </script>
 
 <div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />
     </div>
-
-    <section class="flex-1 overflow-y-hidden mt-2 flex flex-col min-h-0">
-        <div class="min-h-[24px] flex-shrink-0">
+    <section class="flex-1 overflow-y-hidden mt-2">
+        <div class="min-h-[24px]">
             <Events />
         </div>
-
-        <!-- Split area: Saved + handle + Results -->
-        <div class="flex-1 min-h-0">
-            <div
-                class="split-container"
-                bind:this={splitEl}
-                style={`--saved-height: ${savedHeight}px;`}
-            >
-                <div class="saved-panel">
-                    <Saved />
-                </div>
-
-                <div
-                    class="resize-handle"
-                    role="separator"
-                    aria-orientation="horizontal"
-                    aria-label="Resize Saved panel"
-                    on:pointerdown={onPointerDown}
-                />
-
-                <div class="results-panel">
-                    <SearchResults />
-                </div>
-            </div>
+        <div>
+            <Saved />
+        </div>
+        <div>
+            <SearchResults />
         </div>
     </section>
 </div>
 
 <style lang="postcss">
-    .split-container {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        min-height: 0;
-        gap: 0.25rem;
-    }
+    /* 
+    This took hours to figure out. It allows the children to take up 
+    the remaining space in the container while maintaining a max-height
+    proportional to the parent container. This is a lesson that
+    StackOverflow is almost always better than AI for complex problems.
 
-    /* Saved: fixed (adjustable) height, internal scroll */
-    .saved-panel {
-        flex: 0 0 var(--saved-height, 200px);
-        min-height: 80px; /* keep in sync with MIN_SAVED */
-        @apply overflow-y-auto flex flex-col;
-    }
+    Credit: 
+    https://stackoverflow.com/questions/70324159/how-to-set-up-an-element-with-max-height-so-that-the-elements-inside-it-will-tak 
+    */
 
-    /* Results: fills remaining space, internal scroll */
-    .results-panel {
-        flex: 1 1 auto;
-        min-height: 120px; /* keep in sync with MIN_RESULTS */
-        @apply overflow-y-auto flex flex-col;
+    section {
+        display: grid;
+        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
+        gap: 0.5rem;
     }
 
-    /* Base handle (for light theme) */
-    .resize-handle {
-    position: relative;
-    flex: 0 0 10px;
-    cursor: row-resize;
-    border-radius: 9999px;
-    
-    background-color: #d4d4d8 !important;  
-    border: 1px solid #d4d4d8 !important;
-
-    transition: background-color 120ms ease, border-color 120ms ease;
+    section > *:last-child {
+        grid-row-end: span 2;
     }
 
-    .resize-handle::before {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 40px;
-    height: 3px;
-    border-radius: 9999px;
-    background-color: #f9fafb;         
-    transform: translate(-50%, -50%);
+    section > div {
+        /* height: fit-content; */
+        max-height: 100%;
+        @apply overflow-y-hidden flex flex-col;
     }
-
-    .resize-handle:hover {
-    background-color: #71717a !important;
-    border-color: #71717a !important;
-    }
-
-    /* Dark theme variant */
-    :is(.dark .resize-handle) {
-    background-color: rgba(255, 255, 255, 0.10) !important;
-    border-color: rgba(255, 255, 255, 0.22) !important;
-    }
-
-    :is(.dark .resize-handle::before) {
-    background-color: rgba(255, 255, 255, 0.85);
-    }
-
-    :is(.dark .resize-handle:hover) {
-    background-color: rgba(255, 255, 255, 0.16) !important;
-    }
-
 </style>

From 55e7158750a98ef850bcfc5c83ffc7511262d09e Mon Sep 17 00:00:00 2001
From: Angela Cai <angcai@princeton.edu>
Date: Fri, 28 Nov 2025 00:23:53 -0500
Subject: [PATCH 06/17] accidental typo

---
 .../web/src/lib/components/recal/left/elements/EventCard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index ed9d8d05..fd6d750b 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -47,7 +47,7 @@
     on:blur={handleLeave}
     on:mouseleave={handleLeave}>
     <div class="w-[60%]">
-        <p id="title" class="text-sm p-1 overflow-cli {isSelected ? "" : "dark:text-zinc-100"}">
+        <p id="title" class="text-sm p-1 overflow-clip {isSelected ? "" : "dark:text-zinc-100"}">
             {customEvent.title}
         </p>
     </div>

From c3d41339c60680e3d40d9191e9191088d4be8d20 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:13:23 -0500
Subject: [PATCH 07/17] basic handlebar

---
 apps/web/src/lib/components/recal/Left.svelte | 159 ++++++++++++++----
 .../components/recal/left/Handlebar.svelte    | 119 +++++++++++++
 apps/web/src/lib/stores/styles.ts             |  30 ++++
 3 files changed, 271 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/src/lib/components/recal/left/Handlebar.svelte

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index a9734fb0..3821423b 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -1,51 +1,136 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import Saved from "./left/Saved.svelte";
     import SearchResults from "./left/SearchResults.svelte";
     import SearchBar from "./left/SearchBar.svelte";
     import Events from "./left/Events.svelte";
+    import Handlebar from "./left/Handlebar.svelte";
+    import { searchResults, currentSchedule } from "$lib/stores/recal";
+    import { sectionRatio, isMobile } from "$lib/stores/styles";
+    import { savedCourses } from "$lib/stores/rpool";
+
+    // Element refs
+    let sectionEl: HTMLElement;
+
+    // Height tracking
+    let availableHeight = 0;
+
+    // Constants for height estimation
+    const HANDLEBAR_HEIGHT = 16;
+    const BASE_MIN_RATIO = 0.1;
+    const BASE_MAX_RATIO = 0.9;
+    const GAP_SIZE = 16; // Two gaps of 8px each
+
+    // Height estimation constants
+    const EVENTS_HEADER_HEIGHT = 24;
+    const SAVED_HEADER_HEIGHT = 28;
+    const SEARCH_HEADER_HEIGHT = 28;
+    const CARD_HEIGHT = 75; // Average height per course card
+    const INNER_GAP = 8;
+
+    onMount(() => {
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                availableHeight = entry.contentRect.height;
+            }
+        });
+
+        resizeObserver.observe(sectionEl);
+        return () => resizeObserver.disconnect();
+    });
+
+    // Get item counts from stores
+    $: savedCount = $savedCourses[$currentSchedule]?.length ?? 0;
+    $: searchCount = $searchResults.length;
+
+    // Estimate content heights based on item counts
+    $: estimatedTopHeight = EVENTS_HEADER_HEIGHT + INNER_GAP +
+        SAVED_HEADER_HEIGHT + (savedCount * CARD_HEIGHT);
+    $: estimatedBottomHeight = SEARCH_HEADER_HEIGHT + (searchCount * CARD_HEIGHT);
+
+    // Show handlebar when there are search results AND content would overflow
+    $: hasSearchResults = searchCount > 0;
+    $: totalEstimatedContent = estimatedTopHeight + estimatedBottomHeight + INNER_GAP;
+    $: showHandlebar = !$isMobile && hasSearchResults && totalEstimatedContent > availableHeight;
+
+    // Calculate usable height (minus handlebar and gaps when shown)
+    $: usableHeight = showHandlebar
+        ? Math.max(0, availableHeight - HANDLEBAR_HEIGHT - GAP_SIZE)
+        : availableHeight;
+
+    // Content-based ratio constraints
+    $: maxRatio = usableHeight > 0
+        ? Math.min(BASE_MAX_RATIO, estimatedTopHeight / usableHeight)
+        : BASE_MAX_RATIO;
+    $: minRatio = usableHeight > 0
+        ? Math.max(BASE_MIN_RATIO, 1 - (estimatedBottomHeight / usableHeight))
+        : BASE_MIN_RATIO;
+
+    // Default ratio based on content proportions
+    function getDefaultRatio(): number {
+        if (estimatedTopHeight + estimatedBottomHeight === 0) return 0.5;
+        const ratio = estimatedTopHeight / (estimatedTopHeight + estimatedBottomHeight);
+        return Math.max(minRatio, Math.min(maxRatio, ratio));
+    }
+
+    // Get effective ratio (user-set or default), clamped to valid range
+    $: effectiveRatio = Math.max(minRatio, Math.min(maxRatio, $sectionRatio ?? getDefaultRatio()));
+
+    // Calculate heights
+    $: rawTopHeight = Math.round(usableHeight * effectiveRatio);
+
+    // Cap at estimated content height to prevent gaps
+    $: topHeight = Math.min(rawTopHeight, estimatedTopHeight);
+    $: bottomHeight = usableHeight - topHeight;
+
+    // Style strings
+    $: topSectionStyle = showHandlebar ? `height: ${topHeight}px;` : "";
+    $: bottomSectionStyle = showHandlebar ? `height: ${bottomHeight}px;` : "";
+
+    function handleResize(e: CustomEvent<{ ratio: number }>) {
+        if (e.detail.ratio === -1) {
+            sectionRatio.reset();
+        } else {
+            // Constrain to content-based bounds
+            const clampedRatio = Math.max(minRatio, Math.min(maxRatio, e.detail.ratio));
+            sectionRatio.set(clampedRatio);
+        }
+    }
 </script>
 
 <div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />
     </div>
-    <section class="flex-1 overflow-y-hidden mt-2">
-        <div class="min-h-[24px]">
-            <Events />
+    <section
+        bind:this={sectionEl}
+        class="flex-1 overflow-y-hidden mt-2 flex flex-col gap-2">
+        <!-- Top Section: Events + Saved -->
+        <div
+            class="flex flex-col gap-2 shrink-0 overflow-y-hidden"
+            style={topSectionStyle}>
+            <div class="shrink-0">
+                <Events />
+            </div>
+            <div class="flex-1 overflow-y-hidden min-h-0">
+                <Saved />
+            </div>
         </div>
-        <div>
-            <Saved />
-        </div>
-        <div>
-            <SearchResults />
-        </div>
-    </section>
-</div>
-
-<style lang="postcss">
-    /* 
-    This took hours to figure out. It allows the children to take up 
-    the remaining space in the container while maintaining a max-height
-    proportional to the parent container. This is a lesson that
-    StackOverflow is almost always better than AI for complex problems.
-
-    Credit: 
-    https://stackoverflow.com/questions/70324159/how-to-set-up-an-element-with-max-height-so-that-the-elements-inside-it-will-tak 
-    */
-
-    section {
-        display: grid;
-        grid-template-rows: repeat(auto-fit, minmax(0, min-content));
-        gap: 0.5rem;
-    }
 
-    section > *:last-child {
-        grid-row-end: span 2;
-    }
+        <!-- Handlebar -->
+        {#if showHandlebar}
+            <Handlebar
+                on:resize={handleResize}
+                containerHeight={usableHeight} />
+        {/if}
 
-    section > div {
-        /* height: fit-content; */
-        max-height: 100%;
-        @apply overflow-y-hidden flex flex-col;
-    }
-</style>
+        <!-- Bottom Section: SearchResults -->
+        {#if hasSearchResults}
+            <div
+                class="flex-1 overflow-y-hidden min-h-0"
+                style={bottomSectionStyle}>
+                <SearchResults />
+            </div>
+        {/if}
+    </section>
+</div>
diff --git a/apps/web/src/lib/components/recal/left/Handlebar.svelte b/apps/web/src/lib/components/recal/left/Handlebar.svelte
new file mode 100644
index 00000000..41cb55ae
--- /dev/null
+++ b/apps/web/src/lib/components/recal/left/Handlebar.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    export let containerHeight: number;
+
+    const dispatch = createEventDispatcher<{
+        resize: { ratio: number };
+    }>();
+
+    let isDragging = false;
+    let isHovering = false;
+    let handlebarEl: HTMLElement;
+
+    function handlePointerDown(e: PointerEvent) {
+        isDragging = true;
+        handlebarEl.setPointerCapture(e.pointerId);
+        document.body.style.cursor = 'row-resize';
+        document.body.style.userSelect = 'none';
+    }
+
+    function handlePointerMove(e: PointerEvent) {
+        if (!isDragging) return;
+
+        // Calculate new ratio based on pointer position relative to container
+        const containerRect = handlebarEl.parentElement?.getBoundingClientRect();
+        if (!containerRect) return;
+
+        const relativeY = e.clientY - containerRect.top;
+        let newRatio = relativeY / containerHeight;
+
+        // Clamp ratio to prevent sections from being too small
+        newRatio = Math.max(0.15, Math.min(0.85, newRatio));
+
+        dispatch('resize', { ratio: newRatio });
+    }
+
+    function handlePointerUp(e: PointerEvent) {
+        if (!isDragging) return;
+        isDragging = false;
+        handlebarEl.releasePointerCapture(e.pointerId);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
+
+    function handleDoubleClick() {
+        dispatch('resize', { ratio: -1 }); // -1 signals reset to auto
+    }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    bind:this={handlebarEl}
+    class="handlebar-zone"
+    on:pointerenter={() => (isHovering = true)}
+    on:pointerleave={() => {
+        if (!isDragging) isHovering = false;
+    }}
+    on:pointerdown={handlePointerDown}
+    on:pointermove={handlePointerMove}
+    on:pointerup={handlePointerUp}
+    on:pointercancel={handlePointerUp}
+    on:dblclick={handleDoubleClick}
+>
+    <!-- Full-width horizontal line -->
+    <div class="handlebar-line" class:visible={isHovering || isDragging}></div>
+
+    <!-- Center pill with up/down arrows -->
+    <div class="handlebar-pill" class:visible={isHovering || isDragging}>
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-3 h-3"
+        >
+            <path d="M12 4l-4 4h8l-4-4z" />
+            <path d="M12 20l4-4H8l4 4z" />
+        </svg>
+    </div>
+</div>
+
+<style lang="postcss">
+    .handlebar-zone {
+        @apply relative flex items-center justify-center shrink-0;
+        height: 16px;
+        cursor: row-resize;
+        /* Expand clickable area */
+        margin: -2px 0;
+        padding: 2px 0;
+    }
+
+    .handlebar-line {
+        @apply absolute left-0 right-0 top-1/2 -translate-y-1/2;
+        @apply bg-zinc-300 dark:bg-zinc-600;
+        @apply transition-opacity duration-150;
+        height: 2px;
+        opacity: 0;
+    }
+
+    .handlebar-line.visible {
+        opacity: 1;
+    }
+
+    .handlebar-pill {
+        @apply relative z-10 flex items-center justify-center rounded-full;
+        @apply bg-zinc-300 dark:bg-zinc-600;
+        @apply transition-opacity duration-150;
+        width: 36px;
+        height: 12px;
+        opacity: 0;
+    }
+
+    .handlebar-pill.visible {
+        opacity: 1;
+    }
+
+    .handlebar-pill svg {
+        @apply text-zinc-500 dark:text-zinc-400;
+    }
+</style>
diff --git a/apps/web/src/lib/stores/styles.ts b/apps/web/src/lib/stores/styles.ts
index 6c9f82e1..b8929a48 100644
--- a/apps/web/src/lib/stores/styles.ts
+++ b/apps/web/src/lib/stores/styles.ts
@@ -36,6 +36,36 @@ export const showCal = writable<boolean>(true);
 
 export const isEventOpen = writable<boolean>(false);
 
+// Resize ratio for left panel sections (0.0 to 1.0)
+// Represents the fraction of available space given to the top section (Events + Saved)
+// null means "auto" - use content-based default
+function createSectionRatio() {
+    const store = writable<number | null>(
+        typeof window !== "undefined"
+            ? JSON.parse(localStorage.getItem("sectionRatio") ?? "null")
+            : null
+    );
+
+    return {
+        subscribe: store.subscribe,
+        update: store.update,
+        set: (value: number | null) => {
+            store.set(value);
+            if (value === null) {
+                localStorage.removeItem("sectionRatio");
+            } else {
+                localStorage.setItem("sectionRatio", JSON.stringify(value));
+            }
+        },
+        reset: () => {
+            store.set(null);
+            localStorage.removeItem("sectionRatio");
+        }
+    };
+}
+
+export const sectionRatio = createSectionRatio();
+
 export type CalColors = {
     "-1": string;
     "0": string;

From 7e612f0775b679e70263f68a2346db00e15a6ff9 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:15:07 -0500
Subject: [PATCH 08/17] Fix scrolling isseu

---
 apps/web/src/lib/components/recal/Left.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index 3821423b..21efef67 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -25,7 +25,7 @@
     const EVENTS_HEADER_HEIGHT = 24;
     const SAVED_HEADER_HEIGHT = 28;
     const SEARCH_HEADER_HEIGHT = 28;
-    const CARD_HEIGHT = 75; // Average height per course card
+    const CARD_HEIGHT = 65; // Average height per course card
     const INNER_GAP = 8;
 
     onMount(() => {
@@ -107,12 +107,14 @@
         class="flex-1 overflow-y-hidden mt-2 flex flex-col gap-2">
         <!-- Top Section: Events + Saved -->
         <div
-            class="flex flex-col gap-2 shrink-0 overflow-y-hidden"
+            class="flex flex-col gap-2 overflow-y-hidden min-h-0"
+            class:shrink-0={showHandlebar}
+            class:flex-1={!showHandlebar}
             style={topSectionStyle}>
             <div class="shrink-0">
                 <Events />
             </div>
-            <div class="flex-1 overflow-y-hidden min-h-0">
+            <div class="flex-1 overflow-y-hidden min-h-0 flex flex-col">
                 <Saved />
             </div>
         </div>
@@ -127,7 +129,8 @@
         <!-- Bottom Section: SearchResults -->
         {#if hasSearchResults}
             <div
-                class="flex-1 overflow-y-hidden min-h-0"
+                class="flex-1 overflow-y-hidden min-h-0 flex flex-col"
+                class:shrink-0={showHandlebar}
                 style={bottomSectionStyle}>
                 <SearchResults />
             </div>

From 3b9fa2c2ba0221e10cc5748d4cbf8505b6f3d351 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:22:38 -0500
Subject: [PATCH 09/17] So incredibly close

---
 apps/web/src/lib/components/recal/Left.svelte | 63 ++++++++++---------
 .../lib/components/recal/left/Saved.svelte    | 20 +++++-
 .../recal/left/SearchResults.svelte           | 21 ++++++-
 3 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index 21efef67..e7afd10c 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -1,31 +1,30 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
     import Saved from "./left/Saved.svelte";
     import SearchResults from "./left/SearchResults.svelte";
     import SearchBar from "./left/SearchBar.svelte";
     import Events from "./left/Events.svelte";
     import Handlebar from "./left/Handlebar.svelte";
-    import { searchResults, currentSchedule } from "$lib/stores/recal";
-    import { sectionRatio, isMobile } from "$lib/stores/styles";
-    import { savedCourses } from "$lib/stores/rpool";
+    import { searchResults } from "$lib/stores/recal";
+    import { sectionRatio, isMobile, isEventOpen } from "$lib/stores/styles";
 
     // Element refs
     let sectionEl: HTMLElement;
+    let eventsWrapperEl: HTMLElement;
 
     // Height tracking
     let availableHeight = 0;
 
-    // Constants for height estimation
+    // Content heights from children (dynamic measurement)
+    let savedContentHeight = 0;
+    let searchContentHeight = 0;
+    let eventsHeight = 0;
+
+    // Constants
     const HANDLEBAR_HEIGHT = 16;
     const BASE_MIN_RATIO = 0.1;
     const BASE_MAX_RATIO = 0.9;
     const GAP_SIZE = 16; // Two gaps of 8px each
-
-    // Height estimation constants
-    const EVENTS_HEADER_HEIGHT = 24;
-    const SAVED_HEADER_HEIGHT = 28;
-    const SEARCH_HEADER_HEIGHT = 28;
-    const CARD_HEIGHT = 65; // Average height per course card
     const INNER_GAP = 8;
 
     onMount(() => {
@@ -39,37 +38,39 @@
         return () => resizeObserver.disconnect();
     });
 
-    // Get item counts from stores
-    $: savedCount = $savedCourses[$currentSchedule]?.length ?? 0;
-    $: searchCount = $searchResults.length;
+    // Measure events section when it changes (collapsed/expanded)
+    $: if (eventsWrapperEl && $isEventOpen !== undefined) {
+        tick().then(() => {
+            eventsHeight = eventsWrapperEl?.offsetHeight ?? 0;
+        });
+    }
 
-    // Estimate content heights based on item counts
-    $: estimatedTopHeight = EVENTS_HEADER_HEIGHT + INNER_GAP +
-        SAVED_HEADER_HEIGHT + (savedCount * CARD_HEIGHT);
-    $: estimatedBottomHeight = SEARCH_HEADER_HEIGHT + (searchCount * CARD_HEIGHT);
+    // Calculate total content heights from dynamic measurements
+    $: topContentHeight = eventsHeight + INNER_GAP + savedContentHeight;
+    $: bottomContentHeight = searchContentHeight;
 
     // Show handlebar when there are search results AND content would overflow
-    $: hasSearchResults = searchCount > 0;
-    $: totalEstimatedContent = estimatedTopHeight + estimatedBottomHeight + INNER_GAP;
-    $: showHandlebar = !$isMobile && hasSearchResults && totalEstimatedContent > availableHeight;
+    $: hasSearchResults = $searchResults.length > 0;
+    $: totalContent = topContentHeight + bottomContentHeight + INNER_GAP;
+    $: showHandlebar = !$isMobile && hasSearchResults && totalContent > availableHeight;
 
     // Calculate usable height (minus handlebar and gaps when shown)
     $: usableHeight = showHandlebar
         ? Math.max(0, availableHeight - HANDLEBAR_HEIGHT - GAP_SIZE)
         : availableHeight;
 
-    // Content-based ratio constraints
+    // Content-based ratio constraints (using measured heights)
     $: maxRatio = usableHeight > 0
-        ? Math.min(BASE_MAX_RATIO, estimatedTopHeight / usableHeight)
+        ? Math.min(BASE_MAX_RATIO, topContentHeight / usableHeight)
         : BASE_MAX_RATIO;
     $: minRatio = usableHeight > 0
-        ? Math.max(BASE_MIN_RATIO, 1 - (estimatedBottomHeight / usableHeight))
+        ? Math.max(BASE_MIN_RATIO, 1 - (bottomContentHeight / usableHeight))
         : BASE_MIN_RATIO;
 
     // Default ratio based on content proportions
     function getDefaultRatio(): number {
-        if (estimatedTopHeight + estimatedBottomHeight === 0) return 0.5;
-        const ratio = estimatedTopHeight / (estimatedTopHeight + estimatedBottomHeight);
+        if (topContentHeight + bottomContentHeight === 0) return 0.5;
+        const ratio = topContentHeight / (topContentHeight + bottomContentHeight);
         return Math.max(minRatio, Math.min(maxRatio, ratio));
     }
 
@@ -79,8 +80,8 @@
     // Calculate heights
     $: rawTopHeight = Math.round(usableHeight * effectiveRatio);
 
-    // Cap at estimated content height to prevent gaps
-    $: topHeight = Math.min(rawTopHeight, estimatedTopHeight);
+    // Cap at measured content height to prevent gaps
+    $: topHeight = Math.min(rawTopHeight, topContentHeight);
     $: bottomHeight = usableHeight - topHeight;
 
     // Style strings
@@ -111,11 +112,11 @@
             class:shrink-0={showHandlebar}
             class:flex-1={!showHandlebar}
             style={topSectionStyle}>
-            <div class="shrink-0">
+            <div bind:this={eventsWrapperEl} class="shrink-0">
                 <Events />
             </div>
             <div class="flex-1 overflow-y-hidden min-h-0 flex flex-col">
-                <Saved />
+                <Saved bind:contentHeight={savedContentHeight} />
             </div>
         </div>
 
@@ -132,7 +133,7 @@
                 class="flex-1 overflow-y-hidden min-h-0 flex flex-col"
                 class:shrink-0={showHandlebar}
                 style={bottomSectionStyle}>
-                <SearchResults />
+                <SearchResults bind:contentHeight={searchContentHeight} />
             </div>
         {/if}
     </section>
diff --git a/apps/web/src/lib/components/recal/left/Saved.svelte b/apps/web/src/lib/components/recal/left/Saved.svelte
index 316c6b3a..d7c9ed17 100644
--- a/apps/web/src/lib/components/recal/left/Saved.svelte
+++ b/apps/web/src/lib/components/recal/left/Saved.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { tick } from "svelte";
     import { currentSchedule, ready, recal } from "$lib/stores/recal";
     import CourseCard from "./elements/CourseCard.svelte";
     import { savedCourses } from "$lib/stores/rpool";
@@ -6,6 +7,13 @@
     import Loader from "$lib/components/ui/Loader.svelte";
     import { modalStore } from "$lib/stores/modal";
 
+    // Export for parent to read content height
+    export let contentHeight = 0;
+
+    // Element refs for measurement
+    let headerEl: HTMLElement;
+    let scrollContainerEl: HTMLElement;
+
     $: saved = $savedCourses[$currentSchedule]
         ? $savedCourses[$currentSchedule].sort((a, b) =>
               a.code.localeCompare(b.code)
@@ -13,11 +21,21 @@
         : [];
 
     $: colorChange = $calColors;
+
+    // Measure content height after DOM updates when content changes
+    $: if (saved && headerEl) {
+        tick().then(() => {
+            const headerHeight = headerEl?.offsetHeight ?? 0;
+            const cardsHeight = scrollContainerEl?.scrollHeight ?? 0;
+            contentHeight = headerHeight + cardsHeight;
+        });
+    }
 </script>
 
 {#key saved && $recal}
     {#if saved && $ready}
         <div
+            bind:this={headerEl}
             class="text-base font-normal dark:text-zinc-100 ml-1
                     flex items-center justify-between">
             <span>
@@ -44,7 +62,7 @@
 
         {#if saved.length > 0}
             <div class="flex flex-col rounded-sm flex-1 overflow-y-hidden">
-                <div class="overflow-y-auto">
+                <div bind:this={scrollContainerEl} class="overflow-y-auto">
                     {#key saved && colorChange}
                         {#each saved as course}
                             <CourseCard {course} category="saved" />
diff --git a/apps/web/src/lib/components/recal/left/SearchResults.svelte b/apps/web/src/lib/components/recal/left/SearchResults.svelte
index e054dc68..b3f2634d 100644
--- a/apps/web/src/lib/components/recal/left/SearchResults.svelte
+++ b/apps/web/src/lib/components/recal/left/SearchResults.svelte
@@ -1,13 +1,30 @@
 <script lang="ts">
+    import { tick } from "svelte";
     import { research, searchResults } from "$lib/stores/recal";
     import { darkTheme } from "$lib/stores/styles";
     import CourseCard from "./elements/CourseCard.svelte";
 
+    // Export for parent to read content height
+    export let contentHeight = 0;
+
+    // Element refs for measurement
+    let headerEl: HTMLElement;
+    let scrollContainerEl: HTMLElement;
+
     $: resetKey = [$searchResults, $darkTheme, $research];
+
+    // Measure content height after DOM updates when content changes
+    $: if ($searchResults.length > 0 && headerEl) {
+        tick().then(() => {
+            const headerHeight = headerEl?.offsetHeight ?? 0;
+            const cardsHeight = scrollContainerEl?.scrollHeight ?? 0;
+            contentHeight = headerHeight + cardsHeight;
+        });
+    }
 </script>
 
 {#if $searchResults.length > 0}
-    <div class="text-base font-normal dark:text-zinc-100 ml-1">
+    <div bind:this={headerEl} class="text-base font-normal dark:text-zinc-100 ml-1">
         {$searchResults.length} Search
         {$searchResults.length === 1 ? "Result" : "Results"}
     </div>
@@ -17,7 +34,7 @@
         class="flex flex-col overflow-y-hidden border-2
         dark:border-zinc-800
         rounded-sm">
-        <div class="overflow-y-auto">
+        <div bind:this={scrollContainerEl} class="overflow-y-auto">
             {#key resetKey}
                 {#each $searchResults as course}
                     <CourseCard {course} />

From 6c97110ad056e54e0fa715cdd133599b739015c5 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:30:13 -0500
Subject: [PATCH 10/17] Fix base height with no handlebar

---
 apps/web/src/lib/components/recal/Left.svelte | 40 +++++++++++--------
 .../components/recal/left/Handlebar.svelte    | 37 ++++++-----------
 2 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index e7afd10c..04f91b06 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -28,7 +28,7 @@
     const INNER_GAP = 8;
 
     onMount(() => {
-        const resizeObserver = new ResizeObserver((entries) => {
+        const resizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
                 availableHeight = entry.contentRect.height;
             }
@@ -52,7 +52,8 @@
     // Show handlebar when there are search results AND content would overflow
     $: hasSearchResults = $searchResults.length > 0;
     $: totalContent = topContentHeight + bottomContentHeight + INNER_GAP;
-    $: showHandlebar = !$isMobile && hasSearchResults && totalContent > availableHeight;
+    $: showHandlebar =
+        !$isMobile && hasSearchResults && totalContent > availableHeight;
 
     // Calculate usable height (minus handlebar and gaps when shown)
     $: usableHeight = showHandlebar
@@ -60,22 +61,28 @@
         : availableHeight;
 
     // Content-based ratio constraints (using measured heights)
-    $: maxRatio = usableHeight > 0
-        ? Math.min(BASE_MAX_RATIO, topContentHeight / usableHeight)
-        : BASE_MAX_RATIO;
-    $: minRatio = usableHeight > 0
-        ? Math.max(BASE_MIN_RATIO, 1 - (bottomContentHeight / usableHeight))
-        : BASE_MIN_RATIO;
+    $: maxRatio =
+        usableHeight > 0
+            ? Math.min(BASE_MAX_RATIO, topContentHeight / usableHeight)
+            : BASE_MAX_RATIO;
+    $: minRatio =
+        usableHeight > 0
+            ? Math.max(BASE_MIN_RATIO, 1 - bottomContentHeight / usableHeight)
+            : BASE_MIN_RATIO;
 
     // Default ratio based on content proportions
     function getDefaultRatio(): number {
         if (topContentHeight + bottomContentHeight === 0) return 0.5;
-        const ratio = topContentHeight / (topContentHeight + bottomContentHeight);
+        const ratio =
+            topContentHeight / (topContentHeight + bottomContentHeight);
         return Math.max(minRatio, Math.min(maxRatio, ratio));
     }
 
     // Get effective ratio (user-set or default), clamped to valid range
-    $: effectiveRatio = Math.max(minRatio, Math.min(maxRatio, $sectionRatio ?? getDefaultRatio()));
+    $: effectiveRatio = Math.max(
+        minRatio,
+        Math.min(maxRatio, $sectionRatio ?? getDefaultRatio())
+    );
 
     // Calculate heights
     $: rawTopHeight = Math.round(usableHeight * effectiveRatio);
@@ -93,7 +100,10 @@
             sectionRatio.reset();
         } else {
             // Constrain to content-based bounds
-            const clampedRatio = Math.max(minRatio, Math.min(maxRatio, e.detail.ratio));
+            const clampedRatio = Math.max(
+                minRatio,
+                Math.min(maxRatio, e.detail.ratio)
+            );
             sectionRatio.set(clampedRatio);
         }
     }
@@ -108,9 +118,7 @@
         class="flex-1 overflow-y-hidden mt-2 flex flex-col gap-2">
         <!-- Top Section: Events + Saved -->
         <div
-            class="flex flex-col gap-2 overflow-y-hidden min-h-0"
-            class:shrink-0={showHandlebar}
-            class:flex-1={!showHandlebar}
+            class="flex flex-col gap-2 overflow-y-hidden min-h-0 shrink-0"
             style={topSectionStyle}>
             <div bind:this={eventsWrapperEl} class="shrink-0">
                 <Events />
@@ -130,8 +138,8 @@
         <!-- Bottom Section: SearchResults -->
         {#if hasSearchResults}
             <div
-                class="flex-1 overflow-y-hidden min-h-0 flex flex-col"
-                class:shrink-0={showHandlebar}
+                class="overflow-y-hidden min-h-0 flex flex-col shrink-0"
+                class:flex-1={showHandlebar}
                 style={bottomSectionStyle}>
                 <SearchResults bind:contentHeight={searchContentHeight} />
             </div>
diff --git a/apps/web/src/lib/components/recal/left/Handlebar.svelte b/apps/web/src/lib/components/recal/left/Handlebar.svelte
index 41cb55ae..fddbae5a 100644
--- a/apps/web/src/lib/components/recal/left/Handlebar.svelte
+++ b/apps/web/src/lib/components/recal/left/Handlebar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher } from "svelte";
 
     export let containerHeight: number;
 
@@ -14,15 +14,16 @@
     function handlePointerDown(e: PointerEvent) {
         isDragging = true;
         handlebarEl.setPointerCapture(e.pointerId);
-        document.body.style.cursor = 'row-resize';
-        document.body.style.userSelect = 'none';
+        document.body.style.cursor = "row-resize";
+        document.body.style.userSelect = "none";
     }
 
     function handlePointerMove(e: PointerEvent) {
         if (!isDragging) return;
 
         // Calculate new ratio based on pointer position relative to container
-        const containerRect = handlebarEl.parentElement?.getBoundingClientRect();
+        const containerRect =
+            handlebarEl.parentElement?.getBoundingClientRect();
         if (!containerRect) return;
 
         const relativeY = e.clientY - containerRect.top;
@@ -31,19 +32,19 @@
         // Clamp ratio to prevent sections from being too small
         newRatio = Math.max(0.15, Math.min(0.85, newRatio));
 
-        dispatch('resize', { ratio: newRatio });
+        dispatch("resize", { ratio: newRatio });
     }
 
     function handlePointerUp(e: PointerEvent) {
         if (!isDragging) return;
         isDragging = false;
         handlebarEl.releasePointerCapture(e.pointerId);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
     }
 
     function handleDoubleClick() {
-        dispatch('resize', { ratio: -1 }); // -1 signals reset to auto
+        dispatch("resize", { ratio: -1 }); // -1 signals reset to auto
     }
 </script>
 
@@ -59,19 +60,17 @@
     on:pointermove={handlePointerMove}
     on:pointerup={handlePointerUp}
     on:pointercancel={handlePointerUp}
-    on:dblclick={handleDoubleClick}
->
+    on:dblclick={handleDoubleClick}>
     <!-- Full-width horizontal line -->
-    <div class="handlebar-line" class:visible={isHovering || isDragging}></div>
+    <div class="handlebar-line"></div>
 
     <!-- Center pill with up/down arrows -->
-    <div class="handlebar-pill" class:visible={isHovering || isDragging}>
+    <div class="handlebar-pill">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="currentColor"
-            class="w-3 h-3"
-        >
+            class="w-3 h-3">
             <path d="M12 4l-4 4h8l-4-4z" />
             <path d="M12 20l4-4H8l4 4z" />
         </svg>
@@ -93,11 +92,6 @@
         @apply bg-zinc-300 dark:bg-zinc-600;
         @apply transition-opacity duration-150;
         height: 2px;
-        opacity: 0;
-    }
-
-    .handlebar-line.visible {
-        opacity: 1;
     }
 
     .handlebar-pill {
@@ -106,11 +100,6 @@
         @apply transition-opacity duration-150;
         width: 36px;
         height: 12px;
-        opacity: 0;
-    }
-
-    .handlebar-pill.visible {
-        opacity: 1;
     }
 
     .handlebar-pill svg {

From 7e14a800676f3e33ec990c10ff45ff83a272bc4a Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:33:54 -0500
Subject: [PATCH 11/17] stablize scrollbar gutter

---
 apps/web/src/lib/components/recal/left/Saved.svelte         | 2 +-
 apps/web/src/lib/components/recal/left/SearchResults.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/lib/components/recal/left/Saved.svelte b/apps/web/src/lib/components/recal/left/Saved.svelte
index d7c9ed17..93544b00 100644
--- a/apps/web/src/lib/components/recal/left/Saved.svelte
+++ b/apps/web/src/lib/components/recal/left/Saved.svelte
@@ -62,7 +62,7 @@
 
         {#if saved.length > 0}
             <div class="flex flex-col rounded-sm flex-1 overflow-y-hidden">
-                <div bind:this={scrollContainerEl} class="overflow-y-auto">
+                <div bind:this={scrollContainerEl} class="overflow-y-auto" style="scrollbar-gutter: stable;">
                     {#key saved && colorChange}
                         {#each saved as course}
                             <CourseCard {course} category="saved" />
diff --git a/apps/web/src/lib/components/recal/left/SearchResults.svelte b/apps/web/src/lib/components/recal/left/SearchResults.svelte
index b3f2634d..c4f707b5 100644
--- a/apps/web/src/lib/components/recal/left/SearchResults.svelte
+++ b/apps/web/src/lib/components/recal/left/SearchResults.svelte
@@ -34,7 +34,7 @@
         class="flex flex-col overflow-y-hidden border-2
         dark:border-zinc-800
         rounded-sm">
-        <div bind:this={scrollContainerEl} class="overflow-y-auto">
+        <div bind:this={scrollContainerEl} class="overflow-y-auto" style="scrollbar-gutter: stable;">
             {#key resetKey}
                 {#each $searchResults as course}
                     <CourseCard {course} />

From 1566592e351a0923cd6f81aec0c9a0f7c8ae2604 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:35:47 -0500
Subject: [PATCH 12/17] Fix type errors and fmt

---
 apps/web/src/app.html                         | 19 +++++++++++++++----
 .../lib/components/recal/left/Events.svelte   |  8 ++++++--
 .../lib/components/recal/left/Saved.svelte    |  7 +++++--
 .../recal/left/SearchResults.svelte           | 11 ++++++++---
 .../recal/left/elements/EventCard.svelte      |  6 +++++-
 apps/web/static/site.webmanifest              |  2 +-
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app.html b/apps/web/src/app.html
index 8d0d25d5..5ec4ec57 100644
--- a/apps/web/src/app.html
+++ b/apps/web/src/app.html
@@ -3,10 +3,21 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="/site.webmanifest">
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png" />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png" />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
         %sveltekit.head%
     </head>
     <script type="application/ld+json">
diff --git a/apps/web/src/lib/components/recal/left/Events.svelte b/apps/web/src/lib/components/recal/left/Events.svelte
index 1f90df38..446d0fcf 100644
--- a/apps/web/src/lib/components/recal/left/Events.svelte
+++ b/apps/web/src/lib/components/recal/left/Events.svelte
@@ -115,7 +115,9 @@
             <div class="overflow-y-auto">
                 <div class="mb-2">
                     {#if scheduleEvents.length === 0}
-                        <p class="text-sm dark:text-zinc-100">No events added yet.</p>
+                        <p class="text-sm dark:text-zinc-100">
+                            No events added yet.
+                        </p>
                     {:else}
                         <h2 class="text-sm dark:text-zinc-100">
                             {scheduleEvents.length} Added
@@ -133,7 +135,9 @@
 
                 <div>
                     {#if notInSchedule.length === 0}
-                        <p class="text-sm mb-1 dark:text-zinc-100">No events available.</p>
+                        <p class="text-sm mb-1 dark:text-zinc-100">
+                            No events available.
+                        </p>
                     {:else}
                         <h2 class="text-sm dark:text-zinc-100">
                             {notInSchedule.length} Available
diff --git a/apps/web/src/lib/components/recal/left/Saved.svelte b/apps/web/src/lib/components/recal/left/Saved.svelte
index 93544b00..ab82a0c4 100644
--- a/apps/web/src/lib/components/recal/left/Saved.svelte
+++ b/apps/web/src/lib/components/recal/left/Saved.svelte
@@ -8,7 +8,7 @@
     import { modalStore } from "$lib/stores/modal";
 
     // Export for parent to read content height
-    export let contentHeight = 0;
+    export let contentHeight: number = 0;
 
     // Element refs for measurement
     let headerEl: HTMLElement;
@@ -62,7 +62,10 @@
 
         {#if saved.length > 0}
             <div class="flex flex-col rounded-sm flex-1 overflow-y-hidden">
-                <div bind:this={scrollContainerEl} class="overflow-y-auto" style="scrollbar-gutter: stable;">
+                <div
+                    bind:this={scrollContainerEl}
+                    class="overflow-y-auto"
+                    style="scrollbar-gutter: stable;">
                     {#key saved && colorChange}
                         {#each saved as course}
                             <CourseCard {course} category="saved" />
diff --git a/apps/web/src/lib/components/recal/left/SearchResults.svelte b/apps/web/src/lib/components/recal/left/SearchResults.svelte
index c4f707b5..5e19a329 100644
--- a/apps/web/src/lib/components/recal/left/SearchResults.svelte
+++ b/apps/web/src/lib/components/recal/left/SearchResults.svelte
@@ -5,7 +5,7 @@
     import CourseCard from "./elements/CourseCard.svelte";
 
     // Export for parent to read content height
-    export let contentHeight = 0;
+    export let contentHeight: number = 0;
 
     // Element refs for measurement
     let headerEl: HTMLElement;
@@ -24,7 +24,9 @@
 </script>
 
 {#if $searchResults.length > 0}
-    <div bind:this={headerEl} class="text-base font-normal dark:text-zinc-100 ml-1">
+    <div
+        bind:this={headerEl}
+        class="text-base font-normal dark:text-zinc-100 ml-1">
         {$searchResults.length} Search
         {$searchResults.length === 1 ? "Result" : "Results"}
     </div>
@@ -34,7 +36,10 @@
         class="flex flex-col overflow-y-hidden border-2
         dark:border-zinc-800
         rounded-sm">
-        <div bind:this={scrollContainerEl} class="overflow-y-auto" style="scrollbar-gutter: stable;">
+        <div
+            bind:this={scrollContainerEl}
+            class="overflow-y-auto"
+            style="scrollbar-gutter: stable;">
             {#key resetKey}
                 {#each $searchResults as course}
                     <CourseCard {course} />
diff --git a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
index fd6d750b..e50775e7 100644
--- a/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
+++ b/apps/web/src/lib/components/recal/left/elements/EventCard.svelte
@@ -47,7 +47,11 @@
     on:blur={handleLeave}
     on:mouseleave={handleLeave}>
     <div class="w-[60%]">
-        <p id="title" class="text-sm p-1 overflow-clip {isSelected ? "" : "dark:text-zinc-100"}">
+        <p
+            id="title"
+            class="text-sm p-1 overflow-clip {isSelected
+                ? ''
+                : 'dark:text-zinc-100'}">
             {customEvent.title}
         </p>
     </div>
diff --git a/apps/web/static/site.webmanifest b/apps/web/static/site.webmanifest
index bd656c03..301fb502 100644
--- a/apps/web/static/site.webmanifest
+++ b/apps/web/static/site.webmanifest
@@ -16,4 +16,4 @@
     "theme_color": "#ffffff",
     "background_color": "#ffffff",
     "display": "standalone"
-}
\ No newline at end of file
+}

From 44d0bebb06b2eff3f3e14f0d5735db180c684a92 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:39:40 -0500
Subject: [PATCH 13/17] Fix Top.svelte not changing colors on theme change

---
 apps/web/src/lib/components/recal/Top.svelte | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/lib/components/recal/Top.svelte b/apps/web/src/lib/components/recal/Top.svelte
index f5bce35a..e3ea9de4 100644
--- a/apps/web/src/lib/components/recal/Top.svelte
+++ b/apps/web/src/lib/components/recal/Top.svelte
@@ -19,7 +19,12 @@
     import { SCHEDULE_CAP } from "$lib/constants";
     import { modalStore } from "$lib/stores/modal";
     import { savedCourses } from "$lib/stores/rpool";
-    import { getStyles, isMobile, showCal } from "$lib/stores/styles";
+    import {
+        calColors,
+        getStyles,
+        isMobile,
+        showCal
+    } from "$lib/stores/styles";
     import { toastStore } from "$lib/stores/toast";
     import confetti from "canvas-confetti";
     import { getContext } from "svelte";
@@ -107,9 +112,9 @@
         });
     };
 
-    // Handle theme changes
-    $: cssVarStyles = getStyles("0");
-    $: eventStyles = getStyles("6");
+    // Handle theme changes (reference $calColors to establish reactive dependency)
+    $: cssVarStyles = ($calColors, getStyles("0"));
+    $: eventStyles = ($calColors, getStyles("6"));
 </script>
 
 <div

From cc314d4911e61978d9831ffedaa32618f5ce4e90 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:50:12 -0500
Subject: [PATCH 14/17] New themes

---
 .../components/general/style/Palette.svelte   |  8 +-
 apps/web/src/lib/components/recal/Top.svelte  |  9 ++-
 apps/web/src/lib/scripts/ReCal+/palettes.ts   | 80 +++++++++----------
 3 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/lib/components/general/style/Palette.svelte b/apps/web/src/lib/components/general/style/Palette.svelte
index d66ba29d..68b686ca 100644
--- a/apps/web/src/lib/components/general/style/Palette.svelte
+++ b/apps/web/src/lib/components/general/style/Palette.svelte
@@ -28,7 +28,13 @@
                 {}
             ) as CalColors;
 
-        if (title === "Midnight" || title === "Cobalt" || title === "Shadow")
+        if (
+            title === "Midnight" ||
+            title === "Cobalt" ||
+            title === "Shadow" ||
+            title === "Crimson" ||
+            title === "Aurora"
+        )
             darkTheme.set(true);
         else darkTheme.set(false);
 
diff --git a/apps/web/src/lib/components/recal/Top.svelte b/apps/web/src/lib/components/recal/Top.svelte
index e3ea9de4..c003575b 100644
--- a/apps/web/src/lib/components/recal/Top.svelte
+++ b/apps/web/src/lib/components/recal/Top.svelte
@@ -113,8 +113,13 @@
     };
 
     // Handle theme changes (reference $calColors to establish reactive dependency)
-    $: cssVarStyles = ($calColors, getStyles("0"));
-    $: eventStyles = ($calColors, getStyles("6"));
+    let cssVarStyles: string;
+    let eventStyles: string;
+    $: {
+        $calColors;
+        cssVarStyles = getStyles("0");
+        eventStyles = getStyles("6");
+    }
 </script>
 
 <div
diff --git a/apps/web/src/lib/scripts/ReCal+/palettes.ts b/apps/web/src/lib/scripts/ReCal+/palettes.ts
index 1b4cd8e6..7f35f758 100644
--- a/apps/web/src/lib/scripts/ReCal+/palettes.ts
+++ b/apps/web/src/lib/scripts/ReCal+/palettes.ts
@@ -37,27 +37,27 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#bdb2ff",
         "E": "#fff0f0"
     },
-    Grass: {
+    Coastal: {
         "-1": "#e6e6e6",
-        "0": "#ebf4e2",
-        "1": "#e1eed3",
-        "2": "#d3e6be",
-        "3": "#cde2b6",
-        "4": "#c3dca7",
-        "5": "#b9d798",
-        "6": "#afd189",
-        "E": "#f0f8e6"
+        "0": "#b8e0d2",
+        "1": "#d6eadf",
+        "2": "#eac4d5",
+        "3": "#f9e2ae",
+        "4": "#95d5b2",
+        "5": "#a2d2ff",
+        "6": "#cdb4db",
+        "E": "#f0f9f4"
     },
-    Ice: {
+    Sunset: {
         "-1": "#e6e6e6",
-        "0": "#edf2fb",
-        "1": "#e2eafc",
-        "2": "#d7e3fc",
-        "3": "#ccdbfd",
-        "4": "#c1d3fe",
-        "5": "#b6ccfe",
-        "6": "#abc4ff",
-        "E": "#f0f8ff"
+        "0": "#ffecd2",
+        "1": "#ffd6a5",
+        "2": "#fdcfe8",
+        "3": "#fff5ba",
+        "4": "#c8f7dc",
+        "5": "#d4e4f7",
+        "6": "#e8d4f7",
+        "E": "#fff8f0"
     },
     Minty: {
         "-1": "#e6e6e6",
@@ -70,17 +70,6 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#aab2ff",
         "E": "#e6fff0"
     },
-    Pink: {
-        "-1": "#e6e6e6",
-        "0": "#ffecee",
-        "1": "#ffe0e6",
-        "2": "#ffd4de",
-        "3": "#ffc9d6",
-        "4": "#febdce",
-        "5": "#feb1c6",
-        "6": "#fea5be",
-        "E": "#fff0f5"
-    },
     Sweet: {
         "-1": "#e6e6e6",
         "0": "#f5cbd9",
@@ -103,17 +92,6 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#d3f3f1",
         "E": "#fff5f0"
     },
-    Royal: {
-        "-1": "#e6e6e6",
-        "0": "#9d80cb",
-        "1": "#ac8bd0",
-        "2": "#bb96d4",
-        "3": "#caa1d9",
-        "4": "#d9acdd",
-        "5": "#e8b7e2",
-        "6": "#f7c2e6",
-        "E": "#f8f0ff"
-    },
     Forest: {
         "-1": "#A8A8A8",
         "0": "#A8B1A9",
@@ -136,6 +114,28 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#8399a2",
         "E": "#f0f5f7"
     },
+    Aurora: {
+        "-1": "#A8A8A8",
+        "0": "#1a5c5c",
+        "1": "#6b4a0a",
+        "2": "#6b1a4a",
+        "3": "#1a5c2e",
+        "4": "#6b3a1a",
+        "5": "#1a3a6b",
+        "6": "#4a1a6b",
+        "E": "#1a2a3a"
+    },
+    Crimson: {
+        "-1": "#A8A8A8",
+        "0": "#4a0d1c",
+        "1": "#5c1024",
+        "2": "#6e132c",
+        "3": "#801634",
+        "4": "#92193c",
+        "5": "#a41c44",
+        "6": "#b61f4c",
+        "E": "#2e0812"
+    },
     Midnight: {
         "-1": "#A8A8A8",
         "0": "#295270",

From 9cb426a9842e13d28430069ab4fcd02689f74369 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:51:13 -0500
Subject: [PATCH 15/17] Rename original to legacy

---
 apps/web/src/lib/scripts/ReCal+/palettes.ts | 42 ++++++++++-----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/lib/scripts/ReCal+/palettes.ts b/apps/web/src/lib/scripts/ReCal+/palettes.ts
index 7f35f758..b2a79d87 100644
--- a/apps/web/src/lib/scripts/ReCal+/palettes.ts
+++ b/apps/web/src/lib/scripts/ReCal+/palettes.ts
@@ -3,18 +3,6 @@ import type { CalColors } from "$lib/stores/styles";
 
 // Title -> CalColors
 export const colorPalettes: Record<string, CalColors> = {
-    // From ReCal
-    Original: {
-        "-1": "#e6e6e6",
-        "0": "#D0DECF",
-        "1": "#d5dcec",
-        "2": "#ebd2db",
-        "3": "#faf4cb",
-        "4": "#e7dcce",
-        "5": "#d1e7e4",
-        "6": "#dcd5e2",
-        "E": "#e6e8f0"
-    },
     Bright: {
         "-1": "#a8a8a8",
         "0": "#9ee09e",
@@ -26,16 +14,17 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#cc99c8",
         "E": "#e0e8f0"
     },
-    Crayon: {
+    // From the original ReCal
+    Legacy: {
         "-1": "#e6e6e6",
-        "0": "#ffadad",
-        "1": "#ffd6a5",
-        "2": "#fdffb6",
-        "3": "#caffbf",
-        "4": "#9bf6ff",
-        "5": "#a0c4ff",
-        "6": "#bdb2ff",
-        "E": "#fff0f0"
+        "0": "#D0DECF",
+        "1": "#d5dcec",
+        "2": "#ebd2db",
+        "3": "#faf4cb",
+        "4": "#e7dcce",
+        "5": "#d1e7e4",
+        "6": "#dcd5e2",
+        "E": "#e6e8f0"
     },
     Coastal: {
         "-1": "#e6e6e6",
@@ -59,6 +48,17 @@ export const colorPalettes: Record<string, CalColors> = {
         "6": "#e8d4f7",
         "E": "#fff8f0"
     },
+    Crayon: {
+        "-1": "#e6e6e6",
+        "0": "#ffadad",
+        "1": "#ffd6a5",
+        "2": "#fdffb6",
+        "3": "#caffbf",
+        "4": "#9bf6ff",
+        "5": "#a0c4ff",
+        "6": "#bdb2ff",
+        "E": "#fff0f0"
+    },
     Minty: {
         "-1": "#e6e6e6",
         "0": "#84ffc9",

From a4de8e4fdea3c5d78038334df70e5fed145e13ff Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 10:55:44 -0500
Subject: [PATCH 16/17] Let text overflow CalBox container instead of scrolling

---
 apps/web/src/lib/components/recal/calendar/CalBox.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/lib/components/recal/calendar/CalBox.svelte b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
index 86ca6428..0abe2fdc 100644
--- a/apps/web/src/lib/components/recal/calendar/CalBox.svelte
+++ b/apps/web/src/lib/components/recal/calendar/CalBox.svelte
@@ -150,7 +150,7 @@
 <!-- Height is on scale from 0 to 90 -->
 <button
     id="box"
-    class="absolute text-left flex p-[1px] cursor-pointer rounded-sm duration-75"
+    class="absolute text-left flex p-[1px] cursor-pointer rounded-sm duration-75 overflow-visible"
     class:hovered={isHovered()}
     style={cssVarStyles}
     on:click={handleClick}
@@ -170,7 +170,7 @@
             $eventHoverRev = null;
         }
     }}>
-    <div class="text-xs z-40 -space-y-1 relative overflow-x-hidden">
+    <div class="text-xs z-40 -space-y-1 relative overflow-x-clip overflow-y-visible">
         <div class="font-light text-2xs leading-3 pb-[1px]">
             {valuesToTimeLabel(
                 params.section.start_time,

From a81348fb58ce7dd7d1fd9490acea5281a1bbb625 Mon Sep 17 00:00:00 2001
From: Joshua Lau <dachshunduniverse@gmail.com>
Date: Mon, 1 Dec 2025 11:02:01 -0500
Subject: [PATCH 17/17] Fix handlebar during resizing

---
 apps/web/src/lib/components/recal/Left.svelte | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/lib/components/recal/Left.svelte b/apps/web/src/lib/components/recal/Left.svelte
index 04f91b06..410525ea 100644
--- a/apps/web/src/lib/components/recal/Left.svelte
+++ b/apps/web/src/lib/components/recal/Left.svelte
@@ -5,7 +5,7 @@
     import SearchBar from "./left/SearchBar.svelte";
     import Events from "./left/Events.svelte";
     import Handlebar from "./left/Handlebar.svelte";
-    import { searchResults } from "$lib/stores/recal";
+    import { searchResults, recal } from "$lib/stores/recal";
     import { sectionRatio, isMobile, isEventOpen } from "$lib/stores/styles";
 
     // Element refs
@@ -27,6 +27,14 @@
     const GAP_SIZE = 16; // Two gaps of 8px each
     const INNER_GAP = 8;
 
+    // Force update on window resize
+    function handleWindowResize() {
+        if (sectionEl) {
+            availableHeight = sectionEl.getBoundingClientRect().height;
+        }
+        $recal = !$recal; // Force re-render like CalBox click does
+    }
+
     onMount(() => {
         const resizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
@@ -109,6 +117,8 @@
     }
 </script>
 
+<svelte:window on:resize={handleWindowResize} />
+
 <div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />