+
{/* Left: Flyer */}
-
-
+
+
{/* Right: Event info */}
-
{event.flyerUrl ? (
- 
+
) : (
-
+
{/* Action buttons */}
-
-
+
+
+
{/* Org */}
{event.orgName && (
@@ -296,19 +284,16 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
{/* RSVP button */}
-
+ {isRsvped ? "Cancel RSVP" : "RSVP now"}
+
{/* Attendees */}
-
+
{/* Title */}
-
{event.isOwner && (
<>
-
-
-
+
-
-
-
+
{event.title}
-
+
{/* Org */}
{event.orgName && (
@@ -296,19 +284,16 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
{/* RSVP button */}
-
+ {isRsvped ? "Cancel RSVP" : "RSVP now"}
+
{/* Attendees */}
@@ -339,22 +324,27 @@ export function EventDetailClient({ event, similarEvents }: EventDetailClientPro
{/* Similar Events */}
{similarEvents.length > 0 && (
-
{/* Map placeholder */}
@@ -590,7 +579,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
className="w-full h-full object-cover"
/>
) : (
-
-
+
);
}
diff --git a/apps/web/src/app/(app)/events/create/create-event-form.tsx b/apps/web/src/app/(app)/events/create/create-event-form.tsx
index 26cf4bf..4f1ac3c 100644
--- a/apps/web/src/app/(app)/events/create/create-event-form.tsx
+++ b/apps/web/src/app/(app)/events/create/create-event-form.tsx
@@ -24,8 +24,11 @@ import { useRouter } from "next/navigation";
import { useCallback, useRef, useState, useTransition } from "react";
import { createEvent } from "~/actions/events";
import { getPresignedUploadUrl } from "~/actions/upload";
+import { FilterChip } from "~/components/common/filter-chip";
import { CoverPresetsPicker } from "~/components/events/cover-presets";
import { EventPreviewModal } from "~/components/events/event-preview-modal";
+import { PageShell } from "~/components/layout/page-shell";
+import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";
import { Input } from "~/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
@@ -219,35 +222,21 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
const handleSaveDraft = () => doCreate("draft");
return (
- Similar Events
-
+
+ Similar Events
+
+
)}
-
{similarEvents.map((se) => (
-
-
-
-
-
+
+
{se.title}
{se.datetime}
{se.datetime}
+ + ))}
+
{/* Top buttons */}
-
-
@@ -455,7 +444,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
className={cn(
"flex items-center gap-2 h-[40px] px-[14px] border border-forum-medium-gray rounded-[8px] text-[13px] font-dm-sans",
date ? "text-black" : "text-forum-placeholder",
- errors.date && "border-red-400",
+ errors.date && "border-forum-coral",
)}
>
-
-
+
{/* ── Affiliate Organizations ── */}
@@ -398,7 +387,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
@@ -433,11 +422,11 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
rows={8}
className={cn(
"border border-forum-medium-gray rounded-[8px] text-[14px] font-dm-sans placeholder:text-forum-placeholder resize-none focus:border-forum-cerulean",
- errors.description && "border-red-400",
+ errors.description && "border-forum-coral",
)}
/>
{errors.description && (
-
+
+
+
-
+
@@ -359,12 +348,12 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
placeholder="Super Interesting Event Title"
className={cn(
"flex-1 text-[32px] font-serif font-bold text-black placeholder:text-forum-placeholder/40 outline-none",
- errors.title && "placeholder:text-red-300",
+ errors.title && "placeholder:text-forum-coral/60",
)}
/>
- {errors.title && {errors.title}
} + {errors.title &&{errors.title}
}{errors.description}
+{errors.description}
)}{errors.date}
} + {errors.date &&{errors.date}
}
@@ -525,7 +514,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
placeholder="Search by keyword or address"
className={cn(
"w-full h-[40px] pl-[34px] pr-[14px] border border-forum-medium-gray rounded-[8px] text-[13px] font-dm-sans outline-none focus:border-forum-cerulean",
- errors.location && "border-red-400",
+ errors.location && "border-forum-coral",
)}
/>
@@ -549,7 +538,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
"w-full text-left px-3 py-2 rounded-md text-sm transition-colors",
locationId === loc.id
? "bg-forum-turquoise/20 text-black"
- : "text-forum-dark-gray hover:bg-gray-50",
+ : "text-forum-dark-gray hover:bg-forum-turquoise/10",
)}
>
{loc.name}
@@ -559,7 +548,7 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
{errors.location && (
- {errors.location}
+{errors.location}
)}
+
-
-
+
{/* ── External Links ── */}
{tags.map((tag) => (
-
+
-
{externalLink ? (
@@ -714,42 +705,28 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
{/* ── Bottom actions ── */}
-
-
+
);
}
diff --git a/apps/web/src/app/(app)/events/my-events-client.tsx b/apps/web/src/app/(app)/events/my-events-client.tsx
index 14560df..ac48303 100644
--- a/apps/web/src/app/(app)/events/my-events-client.tsx
+++ b/apps/web/src/app/(app)/events/my-events-client.tsx
@@ -1,17 +1,33 @@
"use client";
-import { Clock, MapPin, Plus } from "lucide-react";
+import { Clock, MapPin } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import type { FeedEvent } from "~/actions/events";
-import { getCategoryColor } from "~/components/events/event-card";
+import { Panel } from "~/components/common/panel";
+import { EmptyState } from "~/components/common/states";
import { EventCoverArt } from "~/components/events/event-cover-art";
-import { cn } from "~/lib/utils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
const TABS = [
- { id: "created", label: "Events Created" },
- { id: "rsvped", label: "Events RSVP'd" },
- { id: "saved", label: "Events Saved" },
+ {
+ id: "created",
+ label: "Events Created",
+ emptyTitle: "No events created yet",
+ emptyBody: "Share something with campus — create your first event.",
+ },
+ {
+ id: "rsvped",
+ label: "Events RSVP'd",
+ emptyTitle: "No RSVP'd events",
+ emptyBody: "Events you've RSVP'd to will show up here.",
+ },
+ {
+ id: "saved",
+ label: "Events Saved",
+ emptyTitle: "No saved events",
+ emptyBody: "Bookmark events you're interested in.",
+ },
] as const;
type TabId = (typeof TABS)[number]["id"];
@@ -23,61 +39,58 @@ interface MyEventsClientProps {
}
function EventListCard({ event }: { event: FeedEvent }) {
- const color = getCategoryColor(event.tags);
-
return (
-
- {/* Flyer thumbnail */}
-
-
@@ -773,6 +750,6 @@ export function CreateEventForm({ locations, userOrgs }: CreateEventFormProps) {
flyerPreview={flyerPreview}
coverPreset={coverPreset}
/>
-
- {event.flyerUrl ? (
-
- ) : (
-
-
- {/* Content */}
-
-
- {event.title} -
- -
- ("created");
const eventMap: Record = { created, rsvped, saved };
- const events = eventMap[activeTab];
return (
-
+ {event.flyerUrl ? (
+
+ ) : (
+
-
-
+ {/* Content */}
+
+
+
+
);
}
@@ -85,79 +98,34 @@ export function MyEventsClient({ created, rsvped, saved }: MyEventsClientProps)
const [activeTab, setActiveTab] = useState+ {event.title} +
- {event.tags.length > 0 && ( -
- {event.tags.slice(0, 3).map((tag) => (
-
- {tag}
-
- ))}
- {event.orgName && (
-
- {event.orgName}
-
- )}
+
-
+
+
+
- )}
-
+
+
+ {event.tags.length > 0 && (
+
+ {event.tags.slice(0, 3).map((tag) => (
+
+ {tag}
+
+ ))}
+ {event.orgName && (
+
+ {event.orgName}
+
+ )}
+
+ )}
+
- {/* Tab bar */}
-
+ {eventMap[id].length > 0 ? (
+
+ ))}
+
);
}
diff --git a/apps/web/src/app/(app)/events/page.tsx b/apps/web/src/app/(app)/events/page.tsx
index 393fa22..b393bd2 100644
--- a/apps/web/src/app/(app)/events/page.tsx
+++ b/apps/web/src/app/(app)/events/page.tsx
@@ -1,13 +1,28 @@
+import { Plus } from "lucide-react";
+import Link from "next/link";
import { getMyEvents } from "~/actions/events";
+import { PageHeading, PageShell } from "~/components/layout/page-shell";
+import { Button } from "~/components/ui/button";
import { MyEventsClient } from "./my-events-client";
export default async function MyEventsPage() {
const { created, rsvped, saved } = await getMyEvents();
return (
-
- setActiveTab(value as TabId)}>
+
+ {TABS.map(({ id, label }) => (
+
+ {label}
+
+ ))}
+
- {/* Create Event button */}
-
+ {TABS.map(({ id, emptyTitle, emptyBody }) => (
+
-
-
- {/* Event list */}
- {events.length > 0 ? (
-
- {TABS.map(({ id, label }) => (
-
- ))}
-
- {/* Active indicator line */}
-
-
- t.id === activeTab) * 100) / TABS.length}%`,
- }}
- />
-
-
- {events.map((event) => (
-
- ) : (
-
-
- )}
+ - {activeTab === "created" - ? "No events created yet" - : activeTab === "rsvped" - ? "No RSVP'd events" - : "No saved events"} -
-- {activeTab === "created" - ? "Share something with campus — create your first event." - : activeTab === "rsvped" - ? "Events you've RSVP'd to will show up here." - : "Bookmark events you're interested in."} -
-
-
-
-
+ {eventMap[id].map((event) => (
+
+ ) : (
+
-
+
+
+
+
);
}
diff --git a/apps/web/src/app/(app)/explore/explore-client.tsx b/apps/web/src/app/(app)/explore/explore-client.tsx
index 597ac9e..81916ad 100644
--- a/apps/web/src/app/(app)/explore/explore-client.tsx
+++ b/apps/web/src/app/(app)/explore/explore-client.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Expand, Plus, Search } from "lucide-react";
+import { Expand } from "lucide-react";
import Link from "next/link";
import { useCallback, useMemo, useState, useTransition } from "react";
import {
@@ -10,8 +10,12 @@ import {
toggleRsvp,
toggleSave,
} from "~/actions/events";
+import { Panel } from "~/components/common/panel";
+import { SearchInput } from "~/components/common/search-input";
+import { EmptyState, EventCardSkeletonList } from "~/components/common/states";
import { EventCard } from "~/components/events/event-card";
import { EventFilters } from "~/components/events/event-filters";
+import { PageHeading, PageShell, SectionHeading } from "~/components/layout/page-shell";
import { formatEventDateTime } from "~/lib/date-format";
interface ExploreClientProps {
@@ -118,56 +122,51 @@ export function ExploreClient({
);
return (
- Events
+
+
{/* CENTER — Feed */}
-
- {/* Greeting */}
-
-
+ - Hi - {firstName}, -
-
-
-
- Today is {getTodayString()}
-
+
+
+
+ Today is {getTodayString()}
+
+
+ }
+ >
+ Hi
+ {firstName},
+
- {/* Search */}
- setSearchQuery(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleSearch();
+ }}
+ />
- {/* Filters */}
-
-
+
-
-
-
+
- {events.length === 0 ? (
-
-
{/* RIGHT PANEL */}
-
- {isPending ? "Loading events..." : "No events found"} -
-- {activeFilters.length > 0 || searchQuery +
+ {isPending && events.length === 0 ? (
+ 0 || searchQuery
? "Try adjusting your filters or search."
- : "Events will appear here once they're created."}
-
-
+ : "Events will appear here once they're created."
+ }
+ />
) : (
events.map((event, index) => (
- {/* Create Event */}
-
-
+
-
- {/* Find My Friends */}
-
- 
);
@@ -37,7 +41,8 @@ function Avatar({
return (
-
-
-
- Find My Friends
-
+
-
+
{/* Upcoming Events */}
-
+
+
+
+
);
}
diff --git a/apps/web/src/app/(app)/friends/friends-client.tsx b/apps/web/src/app/(app)/friends/friends-client.tsx
index 44ffd43..d01b8da 100644
--- a/apps/web/src/app/(app)/friends/friends-client.tsx
+++ b/apps/web/src/app/(app)/friends/friends-client.tsx
@@ -1,6 +1,6 @@
"use client";
-import { Check, Clock, Search, UserMinus, UserPlus, Users, X } from "lucide-react";
+import { Check, Clock, Search, UserMinus, UserPlus, Users } from "lucide-react";
import { useCallback, useRef, useState, useTransition } from "react";
import {
type FriendProfile,
@@ -11,7 +11,11 @@ import {
searchUsers,
sendFriendRequest,
} from "~/actions/friends";
-import { cn } from "~/lib/utils";
+import { Panel } from "~/components/common/panel";
+import { SearchInput } from "~/components/common/search-input";
+import { EmptyState, LoadingState } from "~/components/common/states";
+import { Button } from "~/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
function Avatar({
name,
@@ -28,8 +32,8 @@ function Avatar({
return (
@@ -271,46 +259,41 @@ export function ExploreClient({
-
-
-
-
- Upcoming Events
-
+
+ Upcoming Events
+
{upcomingList.map((event) => (
-
-
+
-
{event.flyerUrl ? (
-
+
) : (
-
+
)}
- +
{event.title}
- + DETAILS ))} {upcomingList.length === 0 && ( -No upcoming events yet.
++ No upcoming events yet. +
)} -
{initial}
@@ -132,210 +137,194 @@ export function FriendsClient({ initialFriends, initialPending }: FriendsClientP
{ id: "requests" as const, label: "Requests", count: pending.incoming.length },
];
+ const isSearchActive = searchQuery.trim().length > 0;
+
return (
-
- {/* Tab bar */}
-
- setActiveTab(value as typeof activeTab)}
+ className="gap-6"
+ >
+
+ {tabs.map(({ id, label, count }) => (
+
+ {label}
+ {count > 0 && (
+
+ {count}
+
+ )}
+
+ ))}
+
- {/* Search bar */}
- handleSearch(e.target.value)}
+ />
- {/* Search results overlay */}
- {searchQuery.trim() && (
-
- {tabs.map(({ id, label, count }) => (
-
- ))}
-
-
-
+ t.id === activeTab) * 100) / tabs.length}%`,
- }}
- />
-
-
-
+
+ {/*
+ Search results replace the active tab's content rather than sitting on
+ top of it, so only one list is ever on screen.
+ */}
+ {isSearchActive ? (
+
{isSearching ? (
-
- Searching...
-
+
+
- )}
-
- {/* Tab content: Your Friends */}
- {activeTab === "friends" &&
- !searchQuery.trim() &&
- (friends.length > 0 ? (
- -
{searchResults.map((user) => {
const isFriend = friendIds.has(user.id);
const isPendingSent = sentIds.has(user.id);
return (
-
-
+
);
})}
- +
+
{isFriend ? (
- Friends
+
+ Friends
+
) : isPendingSent ? (
-
- {user.displayName}
-+
@{user.netId} {user.classYear && ` · '${user.classYear.slice(-2)}`}
- No users found
-
+
- {friends.map((friend) => (
-
+
- {/* Tab content: Requests */}
- {activeTab === "requests" &&
- !searchQuery.trim() &&
- (pending.incoming.length > 0 ? (
-
- {isMapRoute ? (
- /* Map route: full-bleed — the map client renders its own floating nav */
- {children}
);
}
diff --git a/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx b/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
index 343c15f..5ce4563 100644
--- a/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
+++ b/apps/web/src/app/(app)/map/_components/event-detail-modal.tsx
@@ -3,6 +3,7 @@
import { Bookmark, MapPin, Share2, X } from "lucide-react";
import { useEffect, useState, useTransition } from "react";
import { getEvent } from "~/actions/events";
+import { Button } from "~/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "~/components/ui/dialog";
import { getEventColor } from "../_lib/map-helpers";
@@ -51,8 +52,8 @@ export function EventDetailModal({ eventId, onClose }: EventDetailModalProps) {
{isPending || !event ? (
) : (
@@ -61,43 +62,33 @@ export function EventDetailModal({ eventId, onClose }: EventDetailModalProps) {
{/* Location + time */}
-
-
+ {friends.length > 0 ? (
+
- ) : (
-
-
-
+
+ ) : (
+ <>
+ - {friend.displayName} -
-- @{friend.netId} - {friend.classYear && ` · '${friend.classYear.slice(-2)}`} -
-
+ {friends.map((friend) => (
+
+
+ ))}
- ))}
-
+
+ {/*
+ Kept reachable by keyboard: the control is always in the
+ tab order and reveals itself on focus, not just on hover.
+ */}
+
+ + {friend.displayName} +
++ @{friend.netId} + {friend.classYear && ` · '${friend.classYear.slice(-2)}`} +
+
-
- ))}
+ ) : (
+ No friends yet
-- Search for classmates to start connecting. -
-
-
- )}
+ Find your classmates
-- Use the search bar above to find people by name or NetID. -
-
- {pending.incoming.map((req) => (
-
+ ) : (
+
-
+ {pending.incoming.length > 0 ? (
+
- ) : (
-
-
- - {req.displayName} ({req.netId}) sent you a - friend request. -
-
-
-
-
+
+ {pending.incoming.map((req) => (
+
+
+ ))}
- ))}
-
+
+ + {req.displayName} ({req.netId}) sent you + a friend request. +
+
+
+
+
+
-
- ))}
- All caught up
-No pending friend requests.
-
-
+ My Friends
+
);
}
diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index fa19921..a1889dc 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -1,33 +1,10 @@
import { SessionProvider } from "next-auth/react";
-import { headers } from "next/headers";
-import { GeometricBackground } from "~/components/layout/geometric-background";
-import { Sidebar } from "~/components/layout/sidebar";
-import { TopBar } from "~/components/layout/top-bar";
-
-export default async function AppLayout({ children }: { children: React.ReactNode }) {
- const headersList = await headers();
- const pathname = headersList.get("x-pathname") ?? "";
- const isMapRoute = pathname === "/map";
+import { AppChrome } from "~/components/layout/app-chrome";
+export default function AppLayout({ children }: { children: React.ReactNode }) {
return (
My Friends
+{children}
- ) : (
-
-
- )}
+
-
-
- {children}
-
-
-
-
-
- Loading event
+
+ Loading event
{event.orgName && (
-
{event.orgName}
+{event.orgName}
)} -{event.title}
+{event.title}
-
-
-
+
+
+
+
{event.locationName && (
-
)}
diff --git a/apps/web/src/app/(app)/map/_components/event-list-panel.tsx b/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
index eb7935e..459dc15 100644
--- a/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
+++ b/apps/web/src/app/(app)/map/_components/event-list-panel.tsx
@@ -1,10 +1,11 @@
"use client";
-import { Clock, MapPin, Maximize2, X } from "lucide-react";
-import Link from "next/link";
+import { MapPin, Maximize2, X } from "lucide-react";
import type { MapEvent } from "~/actions/map";
+import { EmptyState } from "~/components/common/states";
+import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";
-import { URGENCY_STYLES, getEventColor, getRelativeLabel } from "../_lib/map-helpers";
+import { getEventColor } from "../_lib/map-helpers";
interface EventListPanelProps {
events: MapEvent[];
@@ -24,27 +25,23 @@ export function EventListPanel({
return (
{event.description}
++ {event.description} +
)} {/* RSVP button */} - +
{/* Header */}
-
-
+
+
{events.length} event{events.length !== 1 ? "s" : ""}
-
+
{/* Event cards */}
{events.length === 0 && (
-
-
+ No events found
-Try adjusting your filters
-