calendar page mobile friendliness + other stuff

app/calendar/components/CalendarPage.tsx

@@ -1,10 +1,11 @@
 import { Button } from "@chakra-ui/button";
-import { Input } from "@chakra-ui/input";
+import { Input, InputGroup, InputLeftElement } from "@chakra-ui/input";
 import { Box } from "@chakra-ui/layout";
 import { t, Trans } from "@lingui/macro";
 import SubText from "components/common/SubText";
 import { useMyTheme } from "hooks/common";
 import { Fragment, useState } from "react";
+import { FiSearch } from "react-icons/fi";
 import { trpc } from "utils/trpc";
 import EventInfo from "./EventInfo";
 import { EventModal, FormData } from "./EventModal";
@@ -39,60 +40,67 @@ export default function CalendarPage() {
           />
         )}
       </div>
-      <Input
-        value={filter}
-        onChange={(e) => setFilter(e.target.value)}
-        mt={8}
-      />
-      {(events.data ?? []).map((event) => {
-        const printDateHeader =
-          !lastPrintedDate ||
-          lastPrintedDate[0] !== event.date.getDate() ||
-          lastPrintedDate[1] !== event.date.getMonth();
+      <InputGroup mt={8} maxW="24rem" mx="auto">
+        <InputLeftElement
+          pointerEvents="none"
+          children={<FiSearch color={gray} />}
+        />
+        <Input value={filter} onChange={(e) => setFilter(e.target.value)} />
+      </InputGroup>
+      {(events.data ?? [])
+        .filter((event) =>
+          event.name.toLowerCase().includes(filter.toLowerCase().trim())
+        )
+        .map((event) => {
+          const printDateHeader =
+            !lastPrintedDate ||
+            lastPrintedDate[0] !== event.date.getDate() ||
+            lastPrintedDate[1] !== event.date.getMonth();
 
-        if (printDateHeader) {
-          lastPrintedDate = [
-            event.date.getDate(),
-            event.date.getMonth(),
-            event.date,
-          ];
-        }
+          if (printDateHeader) {
+            lastPrintedDate = [
+              event.date.getDate(),
+              event.date.getMonth(),
+              event.date,
+            ];
+          }
 
-        const differenceInDays = Math.floor(
-          (lastPrintedDate![2].getTime() - new Date().getTime()) /
-            (1000 * 60 * 60 * 24)
-        );
+          const differenceInDays = Math.floor(
+            (lastPrintedDate![2].getTime() - new Date().getTime()) /
+              (1000 * 60 * 60 * 24)
+          );
 
-        return (
-          <Fragment key={event.id}>
-            {printDateHeader && (
-              <Box my={10}>
-                <SubText>
-                  {event.date.toLocaleDateString()} {getTime(differenceInDays)}
-                </SubText>
-              </Box>
-            )}
-            <div>
-              <EventInfo
-                event={event}
-                edit={() =>
-                  setEventToEdit({
-                    ...event,
-                    date: event.date.toISOString(),
-                    // TODO: remove this if later other event types than tournament are allowed
-                    // currently in the validator we accept the properties as if you can only submit
-                    // tournaments but database is prepared to accept other kind of events
-                    // this makes TS freak out a bit
-                    discordInviteUrl: event.discordInviteUrl!,
-                    tags: event.tags as any,
-                    format: event.format as any,
-                  })
-                }
-              />
-            </div>
-          </Fragment>
-        );
-      })}
+          return (
+            <Fragment key={event.id}>
+              {printDateHeader && (
+                <Box my={10}>
+                  <SubText>
+                    {event.date.toLocaleDateString()}{" "}
+                    {getTime(differenceInDays)}
+                  </SubText>
+                </Box>
+              )}
+              <div>
+                <EventInfo
+                  event={event}
+                  edit={() =>
+                    setEventToEdit({
+                      ...event,
+                      date: event.date.toISOString(),
+                      // TODO: remove this if later other event types than tournament are allowed
+                      // currently in the validator we accept the properties as if you can only submit
+                      // tournaments but database is prepared to accept other kind of events
+                      // this makes TS freak out a bit
+                      discordInviteUrl: event.discordInviteUrl!,
+                      tags: event.tags as any,
+                      format: event.format as any,
+                    })
+                  }
+                />
+              </div>
+            </Fragment>
+          );
+        })}
       <Box color={gray}>
         All events listed in your local time:{" "}
         {Intl.DateTimeFormat().resolvedOptions().timeZone}

app/calendar/components/EventInfo.tsx

@@ -84,14 +84,15 @@ const TournamentInfo = ({ event, edit }: EventInfoProps) => {
             </Flex>
           )}
           <Grid
-            templateColumns="2fr 4fr 2fr"
+            templateColumns={["1fr", "2fr 4fr 2fr"]}
             placeItems="center flex-start"
+            gridRowGap="0.5rem"
             maxW="32rem"
             mx="auto"
             mt={1}
             mb={3}
           >
-            <Flex placeItems="center" ml="auto">
+            <Flex placeItems="center" ml={[null, "auto"]} mx={["auto", null]}>
               <Box
                 as={FiClock}
                 mr="0.5em"
@@ -117,7 +118,7 @@ const TournamentInfo = ({ event, edit }: EventInfoProps) => {
                 {new URL(event.eventUrl).host}
               </MyLink>
             </Flex>
-            <Flex placeItems="center" mr="auto">
+            <Flex placeItems="center" mr={[null, "auto"]} mx={["auto", null]}>
               <UserAvatar
                 user={event.poster}
                 size="sm"
@@ -134,9 +135,10 @@ const TournamentInfo = ({ event, edit }: EventInfoProps) => {
         </Box>
 
         <Grid
-          templateColumns={canEdit ? "1fr 1fr 1fr" : "1fr 1fr"}
+          templateColumns={["1fr", canEdit ? "1fr 1fr 1fr" : "1fr 1fr"]}
+          gridRowGap="1rem"
           gridColumnGap="1rem"
-          maxW={canEdit ? "32rem" : "24rem"}
+          maxW={["12rem", canEdit ? "32rem" : "24rem"]}
           mx="auto"
           mt={4}
         >

app/calendar/components/EventModal.tsx

@@ -6,6 +6,7 @@ import {
   FormLabel,
 } from "@chakra-ui/form-control";
 import { Input } from "@chakra-ui/input";
+import { Box } from "@chakra-ui/layout";
 import {
   Modal,
   ModalBody,
@@ -21,6 +22,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import MarkdownTextarea from "components/common/MarkdownTextarea";
+import { useMyTheme } from "hooks/common";
 import { Controller, useForm } from "react-hook-form";
 import { FiTrash } from "react-icons/fi";
 import { getToastOptions } from "utils/getToastOptions";
@@ -41,6 +43,7 @@ export function EventModal({
   event?: { id: number } & FormData;
   refetchQuery: () => void;
 }) {
+  const { gray } = useMyTheme();
   const toast = useToast();
   const { i18n } = useLingui();
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
@@ -125,6 +128,13 @@ export function EventModal({
                   <Trans>Delete event</Trans>
                 </Button>
               )}
+
+              <Box fontSize="sm" color={gray} mb={4}>
+                <Trans>
+                  Add upcoming Splatoon events you are hosting to the calendar.
+                </Trans>
+              </Box>
+
               {/* <FormLabel htmlFor="isTournament">
                 <Trans>Type</Trans>
               </FormLabel>