Time zone info in list view

TODO.md

@@ -11,8 +11,8 @@ Calendar
 - [x] Add tags to the seed
 - [ ] Tags should be clickable and apply a filter (also many tags)
 - [ ] Page to add a new event
-  - [ ] Different fields to submit depending on if future date or past date
-- [ ] Edit page (add winners this way)
+- [ ] Edit page
+- [ ] Add winners page
 - [ ] Winners on the event info page
 - [ ] There should be a banner on the list page if you have past tournaments to report
 - [ ] On the user page tab showing past results
@@ -22,6 +22,7 @@ Calendar
 
 - [ ] Maybe make bracket URL mandatory?
 - [ ] components render twice on state change?
+- [ ] If week has no events show some text + don't show time zone text
 - [x] flatMap -> React.fragment
 - [x] Event page layout shift with time not taking space before mount (only if one day)
 - [x] WeekLinks make opaque blocks not take space on mobile

app/routes/calendar/index.tsx

@@ -125,12 +125,24 @@ export default function CalendarPage() {
   return (
     <main className="stack lg">
       <WeekLinks />
-      {user && (
-        <LinkButton to="new" className="calendar__add-new-button">
-          Add new
-        </LinkButton>
-      )}
-      {isMounted ? <EventsList /> : <div className="calendar__placeholder" />}
+      <div className="stack">
+        {user && (
+          <LinkButton to="new" className="calendar__add-new-button" tiny>
+            Add new
+          </LinkButton>
+        )}
+        {isMounted ? (
+          <>
+            <EventsList />
+            <div className="calendar__time-zone-info">
+              All times in your local time zone:{" "}
+              {Intl.DateTimeFormat().resolvedOptions().timeZone}
+            </div>
+          </>
+        ) : (
+          <div className="calendar__placeholder" />
+        )}
+      </div>
     </main>
   );
 }

app/styles/calendar.css

@@ -145,3 +145,10 @@
   width: 50rem;
   margin: 0 auto;
 }
+
+.calendar__time-zone-info {
+  color: var(--text-lighter);
+  font-size: var(--fonts-xs);
+  padding-block-end: var(--s-2);
+  text-align: center;
+}