Redesigned events directory

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 
 .idea
 .neon
+.vscode

src/app/admin/clubs/[slug]/events/page.tsx

@@ -38,7 +38,7 @@ export default async function Page({ params, searchParams }: Props) {
       includePast,
       currentTime: now,
     }),
-    api.event.countByClubId({
+    api.event.count({
       clubId: club.id,
       includePast,
       currentTime: now,

src/app/events/(directory)/calendar/page.tsx

@@ -0,0 +1,14 @@
+const Events = async () => {
+  return (
+    <main className="font-bold relative select-none h-72">
+      <h1 className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[200px] text-slate-200 dark:text-slate-800">
+        WIP
+      </h1>
+      <h2 className="absolute bottom-1/2 left-1/2 -translate-x-1/2 translate-y-20 text-3xl text-slate-800 dark:text-slate-200">
+        Coming soon!
+      </h2>
+    </main>
+  );
+};
+
+export default Events;

src/app/events/(directory)/layout.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import EventsTitle from '@src/components/events/directory/EventsTitle';
+import { EventHeader } from '@src/components/header/Header';
+
+type EventDirectoryLayoutProps = {
+  children: ReactNode;
+};
+
+export default async function EventDirectoryLayout({
+  children,
+}: EventDirectoryLayoutProps) {
+  return (
+    <>
+      <EventHeader />
+      <main className="mb-5 flex flex-col sm:px-4 max-w-6xl mx-auto">
+        {/* EventsTitle should be in layout.tsx so that it doesn't re-render between pages */}
+        <EventsTitle />
+        <div className="flex flex-col gap-y-4 max-sm:px-4">{children}</div>
+      </main>
+    </>
+  );
+}

src/app/events/(directory)/page.tsx

@@ -0,0 +1,47 @@
+import { type Metadata } from 'next';
+import { redirect } from 'next/navigation';
+import EventsBody from '@src/components/events/directory/EventsBody';
+import { api } from '@src/trpc/server';
+import { eventFiltersSchema, EventParamsSchema } from '@src/utils/eventFilter';
+
+export const metadata: Metadata = {
+  title: 'Events',
+  description: 'The place to find events at UTD.',
+  alternates: {
+    canonical: 'https://clubs.utdnebula.com/events',
+  },
+  openGraph: {
+    url: 'https://clubs.utdnebula.com/events',
+    description: 'The place to find events at UTD.',
+  },
+};
+const Events = async (props: { searchParams: Promise<EventParamsSchema> }) => {
+  const searchParams = await props.searchParams;
+  const parsed = eventFiltersSchema.parse(searchParams);
+
+  // Server-side query to avoid client-side fetching on load
+  const results = await Promise.allSettled([
+    api.event.findByFilters({ filters: parsed }),
+    api.event.count({ includePast: true }),
+  ]);
+
+  const initialEvents =
+    results[0].status === 'fulfilled' ? results[0].value : undefined;
+  const count = results[1].status === 'fulfilled' ? results[1].value : 0;
+
+  // If error fetching events with current filters, clear all filters and reload page
+  if (
+    results[0].status === 'rejected' &&
+    Object.keys(searchParams).length > 0
+  ) {
+    redirect('/events');
+  }
+
+  return (
+    <>
+      <EventsBody initialQueryData={initialEvents} total={count} />
+    </>
+  );
+};
+
+export default Events;

src/app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
 
 const baiJamjuree = Bai_Jamjuree({
   subsets: ['latin'],
-  weight: ['500', '700'],
+  weight: ['500', '600', '700'],
   variable: '--font-display',
 });
 

src/app/manage/[slug]/events/page.tsx

@@ -41,7 +41,7 @@ export default async function Page({
     currentTime: now,
   });
 
-  const totalCount = await api.event.countByClubId({
+  const totalCount = await api.event.count({
     clubId: club.id,
     includePast,
     currentTime: now,

src/components/club/listing/ClubDetailsCard.tsx

@@ -109,18 +109,20 @@ export default function ClubDetailsCard({
   }
 
   return (
-    <Panel className="text-sm !gap-1" id={id} smallPadding heading="Details">
-      {items.length ? (
-        items.flatMap((item, index) => {
-          const row = [item];
-          if (index < items.length - 1) {
-            row.push(<Divider key={index} />);
-          }
-          return row;
-        })
-      ) : (
-        <span className="text-slate-600 dark:text-slate-400">No details</span>
-      )}
+    <Panel className="text-sm" id={id} smallPadding heading="Details">
+      <div className="flex flex-col gap-1">
+        {items.length ? (
+          items.flatMap((item, index) => {
+            const row = [item];
+            if (index < items.length - 1) {
+              row.push(<Divider key={index} />);
+            }
+            return row;
+          })
+        ) : (
+          <span className="text-slate-600 dark:text-slate-400">No details</span>
+        )}
+      </div>
     </Panel>
   );
 }

src/components/club/listing/OfficerList.tsx

@@ -36,7 +36,7 @@ export default function OfficerList({
       // The height of the officer card at start should be the distance between officer's top and the right side's bottom
       const targetHeight = rightBottom - officerTop; // will be negative in mobile -> sets truncation to true, but maxHeight is default 300px
       const contentHeight = contentRef.current.scrollHeight + 80; // height of the full officer card + padding/header space
-      setMaxHeight(targetHeight > 300 ? targetHeight : 300); // at least 300px to show 2 officers
+      setMaxHeight(Math.max(targetHeight, 230)); // at least 230px to show 2 officers
       setNeedsTruncation(contentHeight > targetHeight && officers.length > 0); // if no officers, no truncation -- just show error text
     };
 
@@ -50,23 +50,25 @@ export default function OfficerList({
     return () => observer.disconnect();
   }, [officers, id]);
 
-  // dynamically determine css height in expanded or normal states
-  const containerStyle =
-    isExpanded || !needsTruncation
-      ? { height: 'auto' }
-      : maxHeight
-        ? { height: `${maxHeight}px` }
-        : { height: 'auto' };
-
   return (
     <Panel
       className="text-sm"
+      slotClassNames={{ collapse: 'relative' }}
       id={id}
       smallPadding
       heading="Officers"
-      style={containerStyle}
+      enableCollapsing={
+        needsTruncation
+          ? {
+              toggleOnHeadingClick: true,
+              collapsedSize: maxHeight ?? undefined,
+            }
+          : false
+      }
+      collapse={needsTruncation && !isExpanded}
+      onCollapseClick={() => setIsExpanded((prev) => !prev)}
     >
-      <div className="relative flex-1 min-h-0 overflow-hidden">
+      <div className="flex-1 min-h-0 overflow-hidden">
         <div ref={contentRef} className="flex flex-col gap-4">
           {officers.length > 0 ? (
             officers.map((officer) => (
@@ -78,21 +80,24 @@ export default function OfficerList({
             </span>
           )}
         </div>
-
-        {/* fade overlay only shows if content is taller than right side AND not expanded */}
-        {needsTruncation && !isExpanded && (
-          <div className="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-white dark:from-neutral-800 to-transparent pointer-events-none" />
-        )}
       </div>
 
       {needsTruncation && (
-        <div className="mt-2 pt-2 border-t border-slate-300 dark:border-slate-700 z-10">
-          <button
-            onClick={() => setIsExpanded(!isExpanded)}
-            className="w-full text-sm font-semibold text-royal dark:text-cornflower-300 hover:text-royalDark dark:hover:text-cornflower-400 underline decoration-transparent hover:decoration-inherit transition text-center"
-          >
-            {isExpanded ? 'Show less' : 'See all officers'}
-          </button>
+        <div
+          className={`${needsTruncation && !isExpanded ? 'absolute' : ''} bottom-0 left-0 w-full`}
+        >
+          {/* fade overlay only shows if content is taller than right side AND not expanded */}
+          {!isExpanded && (
+            <div className="h-16 bg-gradient-to-t from-white dark:from-neutral-800 to-transparent pointer-events-none" />
+          )}
+          <div className="bg-white dark:bg-neutral-800 pt-2 border-t border-slate-300 dark:border-slate-700 z-10">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="w-full text-sm font-semibold text-royal dark:text-cornflower-300 hover:text-royalDark dark:hover:text-cornflower-400 underline decoration-transparent hover:decoration-inherit transition text-center"
+            >
+              {isExpanded ? 'Show less' : 'See all officers'}
+            </button>
+          </div>
         </div>
       )}
     </Panel>