ui: Add persistent search parameters for date on events page

TheMythologist · TheMythologist · commit 4860385d68c4 · 2026-02-01T00:04:25.000-08:00
Also a few miscellaneous changes:
- Disables auto-focus for a few dialogs
- Slightly improves mobile navigation bar
- Fixes font weight on `LocalLoginButton`
- Use actual `Select` component for `IgModal`
diff --git a/components/DailyViewModal.tsx b/components/DailyViewModal.tsx
@@ -30,7 +30,10 @@ export default function DailyViewModal({
 }: DailyViewModalProps) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogContent aria-describedby={undefined}>
+      <DialogContent
+        aria-describedby={undefined}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
         <DialogHeader>
           <DialogTitle>
             {format(date, 'd MMMM').toUpperCase()} EVENTS
diff --git a/components/EventModal.tsx b/components/EventModal.tsx
@@ -90,7 +90,10 @@ export default function EventModal({
           if (!open) handleClose();
         }}
       >
-        <DialogContent aria-describedby={undefined}>
+        <DialogContent
+          aria-describedby={undefined}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <form
             onSubmit={form.handleSubmit(handleSubmitEvent)}
             className='flex flex-col gap-3 sm:max-w-md'
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -34,8 +34,8 @@ import { useAuth } from '@/lib/hooks/useAuth';
 import CustomDropdown from './custom-dropdown';
 
 export default function Header() {
-  const [mobileSubmenuOpen, setMobileSubmenuOpen] = useState(false);
-  const [adminSubmenuOpen, setAdminSubmenuOpen] = useState(false);
+  const [mobileSubmenuOpen, setMobileSubmenuOpen] = useState(true);
+  const [adminSubmenuOpen, setAdminSubmenuOpen] = useState(true);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   const isAuthenticated = useAuth();
@@ -89,7 +89,7 @@ export default function Header() {
                   <NavigationMenuItem className='w-full'>
                     {/* Student Life */}
                     <button
-                      className='flex w-full items-center justify-between'
+                      className='mb-1 flex w-full items-center justify-between'
                       onClick={() => setMobileSubmenuOpen((open) => !open)}
                     >
                       <span>STUDENT LIFE</span>
@@ -153,7 +153,7 @@ export default function Header() {
                     <NavigationMenuItem className='w-full'>
                       {/* Student Life */}
                       <button
-                        className='flex w-full items-center justify-between'
+                        className='mb-1 flex w-full items-center justify-between'
                         onClick={() => setAdminSubmenuOpen((open) => !open)}
                       >
                         <span>ADMIN</span>
diff --git a/components/admin/OrganisationModal.tsx b/components/admin/OrganisationModal.tsx
@@ -91,7 +91,10 @@ export default function OrganisationModal({
             </Button>
           )}
         </DialogTrigger>
-        <DialogContent aria-describedby={undefined}>
+        <DialogContent
+          aria-describedby={undefined}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <form
             onSubmit={form.handleSubmit(handleSubmitOrganisation)}
             className='flex flex-col gap-3 sm:max-w-md'
diff --git a/components/auth/LocalLoginButton.tsx b/components/auth/LocalLoginButton.tsx
@@ -1,8 +1,17 @@
 import './telegram-login-button.css';
 
+import { Roboto } from 'next/font/google';
+
+export const roboto = Roboto({
+  subsets: ['latin'],
+  weight: '400',
+});
+
 export default function LocalLoginButton() {
   return (
-    <body className={`widget_frame_base tgme_widget body_widget_login`}>
+    <div
+      className={`${roboto.className} widget_frame_base tgme_widget body_widget_login`}
+    >
       <div className='tgme_widget_login large'>
         <button
           className='btn tgme_widget_login_button'
@@ -17,6 +26,6 @@ export default function LocalLoginButton() {
           onClick={() => window.location.replace('/api/auth/callback')}
         />
       </div>
-    </body>
+    </div>
   );
 }
diff --git a/components/booking/BookingModal.tsx b/components/booking/BookingModal.tsx
@@ -98,7 +98,10 @@ export default function BookingModal({
           if (!open) handleClose();
         }}
       >
-        <DialogContent aria-describedby={undefined}>
+        <DialogContent
+          aria-describedby={undefined}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
           <form
             onSubmit={form.handleSubmit(handleSubmitBooking)}
             className='flex flex-col gap-3 sm:max-w-md'
diff --git a/components/booking/Bookings.tsx b/components/booking/Bookings.tsx
@@ -231,7 +231,7 @@ export default function Bookings({
       form.setValue('startTime', start);
       form.setValue('endTime', end);
     },
-    [],
+    [form, venues],
   );
 
   return (
diff --git a/components/event/CalendarGrid.tsx b/components/event/CalendarGrid.tsx
@@ -1,9 +1,9 @@
 import { isSameMonth, isSameWeek } from 'date-fns';
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch } from 'react';
 
 interface CalendarGridProps {
   currentDate: Date;
-  setCurrentDate: Dispatch<SetStateAction<Date>>;
+  setCurrentDate: Dispatch<Date>;
   viewMode: 'MONTH' | 'WEEK';
   calendarDays: Date[];
 }
diff --git a/components/event/Events.tsx b/components/event/Events.tsx
@@ -16,7 +16,8 @@ import {
   subWeeks,
 } from 'date-fns';
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { useActionState, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useActionState, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod/v4';
@@ -54,6 +55,7 @@ const today = getNext30Minutes();
 
 export default function Events({ events, userOrgs }: EventsProps) {
   const isAuthenticated = useAuth();
+  const searchParams = useSearchParams();
 
   const [createEventDate, setCreateEventDate] = useState<Date | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<EventView | null>(null);
@@ -62,7 +64,21 @@ export default function Events({ events, userOrgs }: EventsProps) {
 
   const [viewMode, setViewMode] = useState<'MONTH' | 'WEEK'>('MONTH');
 
-  const [currentDate, setCurrentDate] = useState<Date>(new Date());
+  const currentDate = useMemo(() => {
+    let date = new Date();
+    try {
+      let searchParamsDate: number | undefined = undefined;
+      const searchParamsMonth = searchParams.get('month');
+      if (searchParamsMonth) searchParamsDate = Date.parse(searchParamsMonth);
+
+      const searchParamsWeek = searchParams.get('date');
+      if (searchParamsWeek) searchParamsDate = Date.parse(searchParamsWeek);
+
+      if (searchParamsDate !== undefined && !isNaN(searchParamsDate))
+        date = new Date(searchParamsDate);
+    } catch {}
+    return date;
+  }, [searchParams]);
 
   const [isDailyViewOpen, setIsDailyViewOpen] = useState(false);
 
@@ -198,15 +214,41 @@ export default function Events({ events, userOrgs }: EventsProps) {
     form.setValue('endTime', addHours(date, 2));
   };
 
-  const handlePrevious = () =>
-    setCurrentDate((prev) =>
-      viewMode === 'MONTH' ? subMonths(prev, 1) : subWeeks(prev, 1),
+  const handlePrevious = () => {
+    const newDate =
+      viewMode === 'MONTH'
+        ? subMonths(currentDate, 1)
+        : subWeeks(currentDate, 1);
+    const params = new URLSearchParams(
+      viewMode === 'MONTH'
+        ? {
+            [viewMode.toLowerCase()]: newDate.toLocaleString('en-sg', {
+              month: 'long',
+              year: 'numeric',
+            }),
+          }
+        : { date: newDate.toDateString() },
     );
+    window.history.pushState(null, '', `?${params.toString()}`);
+  };
 
-  const handleNext = () =>
-    setCurrentDate((prev) =>
-      viewMode === 'MONTH' ? addMonths(prev, 1) : addWeeks(prev, 1),
+  const handleNext = () => {
+    const newDate =
+      viewMode === 'MONTH'
+        ? addMonths(currentDate, 1)
+        : addWeeks(currentDate, 1);
+    const params = new URLSearchParams(
+      viewMode === 'MONTH'
+        ? {
+            [viewMode.toLowerCase()]: newDate.toLocaleString('en-sg', {
+              month: 'long',
+              year: 'numeric',
+            }),
+          }
+        : { date: newDate.toDateString() },
     );
+    window.history.pushState(null, '', `?${params.toString()}`);
+  };
 
   const calendarStart = startOfWeek(startOfMonth(currentDate), {
     weekStartsOn: 1,
@@ -321,7 +363,19 @@ export default function Events({ events, userOrgs }: EventsProps) {
               <div className='relative grid grid-cols-7 gap-1'>
                 <CalendarGrid
                   currentDate={currentDate}
-                  setCurrentDate={setCurrentDate}
+                  // TODO: Update this
+                  setCurrentDate={(newDate) => {
+                    if (viewMode === 'WEEK') {
+                      const params = new URLSearchParams({
+                        date: newDate.toDateString(),
+                      });
+                      window.history.pushState(
+                        null,
+                        '',
+                        `?${params.toString()}`,
+                      );
+                    }
+                  }}
                   viewMode={viewMode}
                   // TODO: This is problematic
                   calendarDays={calendarDays}
@@ -382,15 +436,15 @@ export default function Events({ events, userOrgs }: EventsProps) {
             <Button
               variant='ghost'
               size='icon'
-              className='h-[38px] w-[38px] rounded-full bg-[#FF7D4E] text-white hover:bg-[#FF7D4E]/90'
+              className='h-9.5 w-9.5 rounded-full bg-[#FF7D4E] text-white hover:bg-[#FF7D4E]/90'
               onClick={handlePrevious}
             >
               <ChevronLeftIcon className='h-4 w-4' />
             </Button>
             <Button
               variant='ghost'
               size='icon'
-              className='h-[38px] w-[38px] rounded-full bg-[#FF7D4E] text-white hover:bg-[#FF7D4E]/90'
+              className='h-9.5 w-9.5 rounded-full bg-[#FF7D4E] text-white hover:bg-[#FF7D4E]/90'
               onClick={handleNext}
             >
               <ChevronRightIcon className='h-4 w-4' />
diff --git a/components/student-group/IgModal.tsx b/components/student-group/IgModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import CopyButton from '@/components/CopyButton';
 import {
@@ -10,6 +10,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import type { OrganisationView } from '@/lib/utils/server/organisation';
 
 interface ShowIGModalProps {
@@ -38,7 +46,7 @@ export default function ShowIGModal({ organisation }: ShowIGModalProps) {
 
   return (
     <Dialog>
-      <DialogTrigger className='mt-auto mr-auto rounded-md border-[#0C2C47] bg-[#0C2C47] px-6 py-1 text-xs text-white hover:bg-[#0C2C47]/90'>
+      <DialogTrigger className='mr-auto rounded-md border-[#0C2C47] bg-[#0C2C47] px-6 py-1 text-xs text-white hover:bg-[#0C2C47]/90'>
         SHOW MORE
       </DialogTrigger>
       <DialogContent aria-describedby={undefined}>
@@ -61,7 +69,7 @@ export default function ShowIGModal({ organisation }: ShowIGModalProps) {
             <label className='mb-2 block text-sm font-medium text-gray-700'>
               Description
             </label>
-            <div className='min-h-[80px] rounded-md border bg-gray-50 p-3'>
+            <div className='min-h-20 rounded-md border bg-gray-50 p-3'>
               <p className='text-sm leading-relaxed text-gray-900'>
                 {organisation.description || 'No description available.'}
               </p>
@@ -76,20 +84,20 @@ export default function ShowIGModal({ organisation }: ShowIGModalProps) {
               IG Head
             </label>
             {igHeads.length > 1 ? (
-              <select
-                value={selectedIGHead}
-                onChange={(e) => setSelectedIGHead(e.target.value)}
-                className='w-full rounded-md border border-gray-300 bg-white p-3 text-sm text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-hidden'
-              >
-                <option value=''>Select an IG Head</option>
-                {igHeads.map((head) => (
-                  <option key={head.name} value={head.name}>
-                    {head.name}
-                  </option>
-                ))}
-              </select>
+              <Select value={selectedIGHead} onValueChange={setSelectedIGHead}>
+                <SelectTrigger className='rounded-md border border-gray-300 bg-white p-3 text-sm text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-hidden'>
+                  <SelectValue placeholder='Select an IG Head' />
+                </SelectTrigger>
+                <SelectContent>
+                  {igHeads.map((head) => (
+                    <SelectItem key={head.name} value={head.name}>
+                      {head.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             ) : (
-              <div className='rounded-md border bg-gray-50 p-3'>
+              <div className='rounded-md border bg-gray-50 p-3 py-2'>
                 <p className='text-sm text-gray-900'>
                   {igHeads.length > 0 ? igHeads[0].name : 'No IG Head assigned'}
                 </p>
@@ -104,7 +112,7 @@ export default function ShowIGModal({ organisation }: ShowIGModalProps) {
                 IG Head&apos;s Telegram
               </label>
               <div className='flex items-center gap-2'>
-                <div className='flex-1 rounded-md border bg-gray-50 p-3'>
+                <div className='flex-1 rounded-md border bg-gray-50 p-3 py-2'>
                   <p className='text-sm text-gray-900'>
                     {getSelectedIGHeadTelegram()}
                   </p>
diff --git a/components/student-group/StudentGroupCard.tsx b/components/student-group/StudentGroupCard.tsx
@@ -22,7 +22,7 @@ export default function StudentGroupCard({
       <h3 className='mb-3 text-center text-xl font-bold text-gray-900'>
         {organisation.name}
       </h3>
-      <p className='mb-4 line-clamp-6 text-sm leading-relaxed text-gray-500'>
+      <p className='mb-4 line-clamp-6 grow text-sm leading-relaxed text-gray-500'>
         {organisation.description || 'No description available.'}
       </p>
 
