feat: UI overhaul

apps/api/src/modules/events/schema.ts

@@ -30,6 +30,24 @@ export const EventsQueryFilterSchema = QueryFilterSchema.extend({
     .enum(["true", "false"])
     .optional()
     .transform((val) => val === "true"),
+  search: z
+    .string()
+    .trim()
+    .min(1)
+    .max(200)
+    .optional(),
+  sigs: z
+    .string()
+    .optional()
+    .transform((val) =>
+      val
+        ? val
+            .split(",")
+            .map((s) => s.trim())
+            .filter(Boolean)
+        : undefined,
+    ),
+  date: z.iso.date().optional(),
 });
 
 export type EventId = z.infer<typeof EventIdSchema>;

apps/api/src/modules/events/store.ts

@@ -1,4 +1,4 @@
-import { eq, gte, and, SQL } from "drizzle-orm";
+import { eq, gte, lt, and, ilike, inArray, SQL } from "drizzle-orm";
 import { SqlContext } from "../../db/db.js";
 import { CreateEvent, EventId, EventsQueryFilter, UpdateEvent } from "./schema.js";
 import { eventsTable, registrationsTable } from "../../db/schema.js";
@@ -35,15 +35,27 @@ export const eventStore = {
   },
 
   async get({ db, filters }: { db: SqlContext; filters: EventsQueryFilter }) {
-    const { page, limit, state, includePast } = filters;
+    const { page, limit, state, includePast, search, sigs, date } = filters;
     const offset = (page - 1) * limit;
 
     const today = new Date();
     today.setUTCHours(0, 0, 0, 0);
 
+    let dayStart: Date | null = null;
+    let dayEnd: Date | null = null;
+    if (date) {
+      dayStart = new Date(`${date}T00:00:00.000Z`);
+      dayEnd = new Date(dayStart);
+      dayEnd.setUTCDate(dayEnd.getUTCDate() + 1);
+    }
+
     const conditions = [
       state ? eq(eventsTable.state, state) : null,
-      !includePast ? gte(eventsTable.date, today) : null,
+      !includePast && !date ? gte(eventsTable.date, today) : null,
+      search ? ilike(eventsTable.title, `%${search}%`) : null,
+      sigs && sigs.length > 0 ? inArray(eventsTable.organiser, sigs) : null,
+      dayStart ? gte(eventsTable.date, dayStart) : null,
+      dayEnd ? lt(eventsTable.date, dayEnd) : null,
     ].filter((condition): condition is SQL => condition !== null);
 
     return db

apps/web/src/components/event-card.tsx

@@ -1,43 +1,53 @@
 import { Link } from '@tanstack/react-router'
-import { ArrowUpRight, CalendarIcon, MapPin } from 'lucide-react'
+import { MapPin, Users } from 'lucide-react'
 import type { Event } from '@events.comp-soc.com/shared'
 import { SigBadge } from '@/components/sigs-badge.tsx'
 import { formatEventDate } from '@/lib/utils.ts'
 
 interface EventCardProps {
   event: Event
+  pinned?: boolean
 }
 
-function EventCard({ event }: EventCardProps) {
+function EventCard({ event, pinned = false }: EventCardProps) {
   const { full: date } = formatEventDate(event.date)
 
   return (
     <Link
       to="/events/$eventId"
       params={{ eventId: String(event.id) }}
-      className="block"
+      className="block group"
     >
-      <div className="group relative bg-surface border border-neutral-800 hover:border-neutral-600 rounded-md p-4 sm:p-5 transition-all duration-200 hover:shadow-lg hover:bg-neutral-800/30 cursor-pointer">
-        <div className="flex justify-between items-start gap-2">
-          <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-1.5 sm:gap-2 mb-2 flex-wrap">
-              <SigBadge sig={event.organiser} size="sm" />
+      <div
+        className={`relative overflow-hidden border rounded-md p-5 transition-shadow duration-150 cursor-pointer ring-2 ring-transparent group-hover:ring-primary group-hover:border-primary ${
+          pinned
+            ? 'bg-card-hover border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]'
+            : 'bg-card border-card-border'
+        }`}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="text-xs text-neutral-500">{date}</div>
+
+          <h3 className="text-xl sm:text-2xl font-bold text-neutral-100 leading-tight wrap-break-word">
+            {event.title}
+          </h3>
+
+          <div className="flex items-center gap-3 flex-wrap text-sm text-neutral-400 mt-1">
+            <div className="flex items-center gap-1.5 min-w-0">
+              <MapPin className="w-3.5 h-3.5 shrink-0 text-neutral-500" />
+              <span className="truncate">{event.location}</span>
             </div>
-            <h3 className="text-base sm:text-lg font-bold text-neutral-100 group-hover:text-white mb-1 wrap-break-word">
-              {event.title}
-            </h3>
-          </div>
-          <ArrowUpRight className="w-4 h-4 sm:w-5 sm:h-5 text-neutral-600 group-hover:text-white transition-colors shrink-0" />
-        </div>
 
-        <div className="flex flex-col gap-1 sm:gap-1.5 mt-2 sm:mt-3 text-xs sm:text-sm text-neutral-400">
-          <div className="flex items-center gap-1.5 sm:gap-2">
-            <CalendarIcon className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0" />
-            <span className="truncate">{date}</span>
-          </div>
-          <div className="flex items-center gap-1.5 sm:gap-2">
-            <MapPin className="w-3 h-3 sm:w-3.5 sm:h-3.5 shrink-0" />
-            <span className="truncate">{event.location}</span>
+            {event.capacity != null && (
+              <div className="flex items-center gap-1.5 text-neutral-400">
+                <Users className="w-3.5 h-3.5 text-neutral-500" />
+                <span className="tabular-nums">{event.capacity}</span>
+              </div>
+            )}
+
+            <div className="ml-auto">
+              <SigBadge sig={event.organiser} size="sm" />
+            </div>
           </div>
         </div>
       </div>

apps/web/src/components/layout/auth-window.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { WindowControls } from '@/components/layout/window/window-bar.tsx'
+import { WindowControls } from '@/components/layout/window-bar.tsx'
 
 interface AuthWindowProps {
   children: ReactNode
@@ -10,8 +10,8 @@ export function AuthWindow({ children, title }: AuthWindowProps) {
   return (
     <div className="flex items-center justify-center min-h-[80vh] m-2">
       <div className="w-full max-w-md animate-in fade-in slide-in-from-bottom-4 duration-500">
-        <div className="bg-window border border-neutral-800 rounded-lg shadow-2xl overflow-hidden">
-          <div className="flex items-center h-10 px-3 bg-window border-b border-neutral-800 relative">
+        <div className="bg-navigation border border-card-border rounded-lg shadow-2xl overflow-hidden">
+          <div className="flex items-center h-10 px-3 bg-navigation border-b border-card-border relative">
             <WindowControls />
             <div className="absolute left-1/2 -translate-x-1/2 text-xs font-bold text-neutral-400 tracking-wide">
               {title}