Add events page

package.json

@@ -12,6 +12,10 @@
     "@base-ui/react": "^1.5.0",
     "@fontsource-variable/raleway": "^5.2.8",
     "@icons-pack/react-simple-icons": "^13.13.0",
+    "@schedule-x/calendar": "^4.6.0",
+    "@schedule-x/react": "^4.1.0",
+    "@schedule-x/scroll-controller": "^4.6.0",
+    "@schedule-x/theme-shadcn": "^4.6.0",
     "@tanstack/react-query": "^5.100.14",
     "@tanstack/react-router": "^1.170.8",
     "axios": "^1.16.1",
@@ -23,7 +27,8 @@
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "temporal-polyfill": "^0.3.2"
   },
   "devDependencies": {
     "@rolldown/plugin-babel": "^0.2.3",

src/components/ui/popover.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}

src/index.css

@@ -108,6 +108,8 @@
   --brand-text-hero: #cde8f0;
   --brand-navbar: #0d3b4a;
   --brand-footer: rgba(8, 71, 80, 0.95);
+
+  scrollbar-color: var(--muted-foreground) transparent;
 }
 /*
   ---break---
@@ -185,6 +187,22 @@
   }
 }
 
+/* Weird CSS stuff/fixes we have to modify thanks to Schedule-X */
+.sx__time-grid-event-inner .sx__time-grid-event-time,
+.sx__time-grid-event-inner .sx__time-grid-event-location {
+  display: inline;
+}
+.sx__time-grid-event-inner .sx__time-grid-event-time .sx__event-icon,
+.sx__time-grid-event-inner .sx__time-grid-event-location .sx__event-icon {
+  display: none;
+}
+.sx__time-grid-event-inner .sx__time-grid-event-location::before {
+  content: ", ";
+}
+.sx__date-picker-popup.sx__date-picker-popup {
+  overflow: auto;
+}
+
 /* Hero scroll cue: pulses opacity and offsets vertically (CSS animation, not motion-react,
    to keep the work on the GPU/compositor instead of the JS main thread). */
 @keyframes scroll-cue {

src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SigsRouteImport } from './routes/sigs'
 import { Route as ProjectsRouteImport } from './routes/projects'
+import { Route as EventsRouteImport } from './routes/events'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ProjectProjectIdRouteImport } from './routes/project/$projectId'
@@ -25,6 +26,11 @@ const ProjectsRoute = ProjectsRouteImport.update({
   path: '/projects',
   getParentRoute: () => rootRouteImport,
 } as any)
+const EventsRoute = EventsRouteImport.update({
+  id: '/events',
+  path: '/events',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const AboutRoute = AboutRouteImport.update({
   id: '/about',
   path: '/about',
@@ -44,13 +50,15 @@ const ProjectProjectIdRoute = ProjectProjectIdRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/events': typeof EventsRoute
   '/projects': typeof ProjectsRoute
   '/sigs': typeof SigsRoute
   '/project/$projectId': typeof ProjectProjectIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/events': typeof EventsRoute
   '/projects': typeof ProjectsRoute
   '/sigs': typeof SigsRoute
   '/project/$projectId': typeof ProjectProjectIdRoute
@@ -59,19 +67,27 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/events': typeof EventsRoute
   '/projects': typeof ProjectsRoute
   '/sigs': typeof SigsRoute
   '/project/$projectId': typeof ProjectProjectIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/about' | '/projects' | '/sigs' | '/project/$projectId'
+  fullPaths:
+    | '/'
+    | '/about'
+    | '/events'
+    | '/projects'
+    | '/sigs'
+    | '/project/$projectId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/projects' | '/sigs' | '/project/$projectId'
+  to: '/' | '/about' | '/events' | '/projects' | '/sigs' | '/project/$projectId'
   id:
     | '__root__'
     | '/'
     | '/about'
+    | '/events'
     | '/projects'
     | '/sigs'
     | '/project/$projectId'
@@ -80,6 +96,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutRoute: typeof AboutRoute
+  EventsRoute: typeof EventsRoute
   ProjectsRoute: typeof ProjectsRoute
   SigsRoute: typeof SigsRoute
   ProjectProjectIdRoute: typeof ProjectProjectIdRoute
@@ -101,6 +118,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ProjectsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/events': {
+      id: '/events'
+      path: '/events'
+      fullPath: '/events'
+      preLoaderRoute: typeof EventsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/about': {
       id: '/about'
       path: '/about'
@@ -128,6 +152,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutRoute: AboutRoute,
+  EventsRoute: EventsRoute,
   ProjectsRoute: ProjectsRoute,
   SigsRoute: SigsRoute,
   ProjectProjectIdRoute: ProjectProjectIdRoute,