Infoscreen for guild room (#565)

* wip: info screen

* Add files to branch after big fuckup

* add fetcher

* debug

* Hello

* hups

* Add debug message

* fix process.env.* functioning

* Fix issue where events next year show as the first events on the list :D

* something

* Change PUBLIC_**_URL to NEXT_PUBLIC...

* More infonäyttö things

- Fixed scrolling between pages
- Store state at parent component
- Misc things

* fix: Formatted infonäyttö files

* fix: Changed rest of PUBLIC_ env variable references to NEXT_PUBLIC_

* Change PUBLIC_**_URL to NEXT_PUBLIC_

* fix: Align stop names on HSL schedule with grid

* Refactor folder structure for infoscreen components

* remove hsl page

* format

* add kanttiinit functionality

* Add kanttiinit stuff

* feat: Update Kanttiinit implementation

- Now it works :D
- Created separate API endpoints for accessing Kanttiinit API
- Changed types for Kanttiinit
- Updated almost all files that touch Kanttiinit on infoscreen

* feat: Added basic styling to Kanttiinit on infoscreen

* Something

* Make infoscreen fullscreen capable

* fix some typecheck issues

* format and lint

* Fix Raide-Jokeri writing form

* fix: Fixed typecheck errors in Infoscreen

- Full screen button now only works on new browsers (Safari 2023+, most others 2020+)
- Removed unused Event component
- Better error response for Kanttiinit api handler

* Removed Enter Fullscreen button from InfoScreen

* fix: Fixed formatting

* Revert global env variable changes

* Remove non-relevant files, fixed some issues

* Removed commented code, console.logs etc

* Fixed Header logo on Infoscreen, 2025 payload update to make tests pass, removed unused json-stable-stringify

* Fixed formatting and some warnings

* Moved dependency to correct package.json

* Added one newline to fix formatting :)

* Fix several warnings

* Move types, small refactoring, etc

* Revert infoscreen layout/page structure change

- It seems that it is mandatory to have both layout and page files

* Refactored infonaytto contents file

* Convert HSL & Kanttiinit to Server Components on infoscreen

- Event page is currently not working

* chore: cleanup for hsl stuff mostly

* chore: Add caching for Kanttiinit API, fix arrivalTimeUnix parameter name

* feat: Initial event display support for infoscreen

* feat: Refactor Infoscreen events page to use global event components

- Added new EventCardCompact component

* feat: Add localization to infoscreen, minor layout fixes

* feat: Fetch localized Kantiinit menus, change infoscreen path

- Infoscreen is now /infoscreen instead of /infonaytto/naytto
- Kanttiinit menus are now fetched in Finnish and English depending on locale

* refactor: Update infoscreen component structure

- Renamed `kanttiinit-combined` to just `kanttiinit`
- Combined kanttiinit helper functions to `kanttiinit/fetcher.ts`
- Moved locale handling to kanttiinit React component
- Combined `hsl-schedules-combined` and `hsl-schedule` to `hsl-schedules`
- Update event grouping week logic on infoscreen
- Revert the change to NEXT_PUBLIC_ILMOMASIINA_URL
- Revert moving of `globals.css`

* Fix: uncomment HSL and Kanttiinit screens in InfoScreenContents

---------

Co-authored-by: puhakkn2 <[email protected]>
Co-authored-by: IiroP <[email protected]>
Co-authored-by: Kalle Ahlström <[email protected]>
Co-authored-by: Kalle Ahlström <[email protected]>

.env.example

@@ -16,8 +16,8 @@ PAYLOAD_PUBLIC_LOCAL_DEVELOPMENT=true
 
 NEXT_REVALIDATION_KEY="veryprivatekey"
 
-# Digitransit API key for HSL traffic data for info screen www.digitransit.fi/en/developers/api-registration/
-DIGITRANSIT_SUBSCRIPTION_KEY="very secret stuff"
+# Digitransit API key for hsl traffic data for info screen www.digitransit.fi/en/developers/api-registration/
+DIGITRANSIT_SUBSCRIPTION_KEY="Replace me"
 
 PUBLIC_FRONTEND_URL="http://localhost:3000"
 PUBLIC_SERVER_URL="http://localhost:3001"

apps/web/package.json

@@ -26,6 +26,7 @@
     "react": "catalog:react19",
     "react-big-calendar": "^1.17.0",
     "react-dom": "catalog:react19",
+    "react-live-clock": "^6.1.22",
     "react-markdown": "^9.0.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",

apps/web/src/app/[locale]/(infoscreen)/infoscreen/layout.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+// eslint-disable-next-line camelcase -- Roboto_Mono name is set by next/font
+import { Inter, Roboto_Mono } from "next/font/google";
+import { cn } from "../../../../lib/utils.ts";
+import "../../globals.css";
+import { InfoScreenHeader } from "../../../../components/infoscreen/infoscreen-header/index.tsx";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+const robotoMono = Roboto_Mono({
+  subsets: ["latin"],
+  variable: "--font-roboto-mono",
+});
+
+export default function ScreenLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="fi">
+      <body
+        className={cn(
+          inter.variable,
+          robotoMono.variable,
+          "flex h-full flex-col bg-gray-200 font-mono",
+        )}
+      >
+        <InfoScreenHeader />
+        <div className="size-full p-4">{children}</div>
+      </body>
+    </html>
+  );
+}

apps/web/src/app/[locale]/(infoscreen)/infoscreen/page.tsx

@@ -0,0 +1,16 @@
+import { HSLcombinedSchedule } from "../../../../components/infoscreen/hsl-schedules";
+import { KanttiinitCombined } from "../../../../components/infoscreen/kanttiinit";
+import InfoScreenSwitcher from "../../../../components/infoscreen/infoscreen-switcher/index";
+import EventListInfoscreen from "../../../../components/infoscreen/events-list";
+
+export const dynamic = "force-dynamic";
+
+export default function InfoScreenContents() {
+  return (
+    <InfoScreenSwitcher>
+      <HSLcombinedSchedule />
+      <KanttiinitCombined />
+      <EventListInfoscreen />
+    </InfoScreenSwitcher>
+  );
+}

apps/web/src/app/[locale]/[...path]/page.tsx → apps/web/src/app/[locale]/(main)/[...path]/page.tsx

@@ -3,17 +3,17 @@ import type { Metadata } from "next";
 import { notFound, redirect } from "next/navigation";
 import type { Page as CMSPage } from "@tietokilta/cms-types/payload";
 import { Card } from "@tietokilta/ui";
-import { AdminBar } from "../../../components/admin-bar";
-import { LexicalSerializer } from "../../../components/lexical/lexical-serializer";
-import { TableOfContents } from "../../../components/table-of-contents";
-import { fetchPage } from "../../../lib/api/pages";
-import { getCurrentLocale, type Locale } from "../../../locales/server";
-import EventsPage from "../../../custom-pages/events-page";
-import AllEventsPage from "../../../custom-pages/all-events-page";
-import WeeklyNewsletterPage from "../../../custom-pages/weekly-newsletter-page";
-import { generateTocFromRichText } from "../../../lib/utils";
-import WeeklyNewslettersListPage from "../../../custom-pages/weekly-newsletters-list-page";
-import { openGraphImage } from "../../shared-metadata";
+import { AdminBar } from "../../../../components/admin-bar";
+import { LexicalSerializer } from "../../../../components/lexical/lexical-serializer";
+import { TableOfContents } from "../../../../components/table-of-contents";
+import { fetchPage } from "../../../../lib/api/pages";
+import { getCurrentLocale, type Locale } from "../../../../locales/server";
+import EventsPage from "../../../../custom-pages/events-page";
+import AllEventsPage from "../../../../custom-pages/all-events-page";
+import WeeklyNewsletterPage from "../../../../custom-pages/weekly-newsletter-page";
+import { generateTocFromRichText } from "../../../../lib/utils";
+import WeeklyNewslettersListPage from "../../../../custom-pages/weekly-newsletters-list-page";
+import { openGraphImage } from "../../../shared-metadata";
 
 interface NextPage<Params extends Record<string, unknown>> {
   params: Promise<Params>;

apps/web/src/app/[locale]/error.tsx → apps/web/src/app/[locale]/(main)/error.tsx

@@ -5,7 +5,7 @@ import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../locales/client";
+} from "../../../locales/client";
 
 function Error({
   error,

apps/web/src/app/[locale]/events/[slug]/page.tsx → apps/web/src/app/[locale]/(main)/events/[slug]/page.tsx

@@ -14,8 +14,8 @@ import {
   type EventQuestion,
   type QuotaSignup,
   type QuestionAnswer,
-} from "../../../../lib/api/external/ilmomasiina";
-import { signUp } from "../../../../lib/api/external/ilmomasiina/actions";
+} from "../../../../../lib/api/external/ilmomasiina";
+import { signUp } from "../../../../../lib/api/external/ilmomasiina/actions";
 import {
   cn,
   formatDateTimeSeconds,
@@ -24,12 +24,12 @@ import {
   formatDatetimeYearOptions,
   getLocalizedEventTitle,
   getQuotasWithOpenAndQueue,
-} from "../../../../lib/utils";
-import { BackButton } from "../../../../components/back-button";
-import { getCurrentLocale, getScopedI18n } from "../../../../locales/server";
-import { DateTime } from "../../../../components/datetime";
-import { openGraphImage } from "../../../shared-metadata";
-import { remarkI18n } from "../../../../lib/plugins/remark-i18n";
+} from "../../../../../lib/utils";
+import { BackButton } from "../../../../../components/back-button";
+import { getCurrentLocale, getScopedI18n } from "../../../../../locales/server";
+import { DateTime } from "../../../../../components/datetime";
+import { openGraphImage } from "../../../../shared-metadata";
+import { remarkI18n } from "../../../../../lib/plugins/remark-i18n";
 import { SignUpButton } from "./signup-button";
 
 async function SignUpText({

apps/web/src/app/[locale]/events/[slug]/signup-button.tsx → apps/web/src/app/[locale]/(main)/events/[slug]/signup-button.tsx

@@ -3,7 +3,7 @@
 import Form from "next/form";
 import { Button, type ButtonProps } from "@tietokilta/ui";
 import { useFormStatus } from "react-dom";
-import type { signUp } from "../../../../lib/api/external/ilmomasiina/actions";
+import type { signUp } from "../../../../../lib/api/external/ilmomasiina/actions";
 
 function StatusButton({ disabled, ...props }: ButtonProps) {
   const { pending } = useFormStatus();

apps/web/src/app/[locale]/global-error.tsx → apps/web/src/app/[locale]/(main)/global-error.tsx

@@ -5,7 +5,7 @@ import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../locales/client";
+} from "../../../locales/client";
 
 function GlobalError({
   error,

apps/web/src/app/[locale]/layout.tsx → apps/web/src/app/[locale]/(main)/layout.tsx

@@ -2,15 +2,15 @@ import type { Metadata, Viewport } from "next";
 // eslint-disable-next-line camelcase -- next/font/google
 import { Inter, Roboto_Mono } from "next/font/google";
 import NextTopLoader from "nextjs-toploader";
-import { Footer } from "../../components/footer";
-import { MainNav } from "../../components/main-nav";
-import { MobileNav } from "../../components/mobile-nav";
-import { SkipLink } from "../../components/skip-link";
-import { cn } from "../../lib/utils";
+import { Footer } from "../../../components/footer";
+import { MainNav } from "../../../components/main-nav";
+import { MobileNav } from "../../../components/mobile-nav";
+import { SkipLink } from "../../../components/skip-link";
+import { cn } from "../../../lib/utils";
 import "@tietokilta/ui/global.css";
-import "./globals.css";
-import { type Locale } from "../../locales/server";
-import { DigiCommitteeRecruitmentAlert } from "../../components/digi-committee-recruitment-alert";
+import "../globals.css";
+import { type Locale } from "../../../locales/server";
+import { DigiCommitteeRecruitmentAlert } from "../../../components/digi-committee-recruitment-alert";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const robotoMono = Roboto_Mono({

apps/web/src/app/[locale]/not-found.tsx → apps/web/src/app/[locale]/(main)/not-found.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { Button, Card } from "@tietokilta/ui";
 import Link from "next/link";
-import { DinoGame } from "../../components/dino-game";
+import { DinoGame } from "../../../components/dino-game";
 import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../locales/client";
+} from "../../../locales/client";
 
 function Page() {
   const t = useScopedI18n("not-found");

apps/web/src/app/[locale]/page.tsx → apps/web/src/app/[locale]/(main)/page.tsx

@@ -1,13 +1,13 @@
 import type { EditorState } from "@tietokilta/cms-types/lexical";
 import type { News, Page as CMSPage } from "@tietokilta/cms-types/payload";
 import { type Metadata } from "next";
-import { EventsDisplay } from "../../components/events-display";
-import { Hero, type ImageWithPhotographer } from "../../components/hero";
-import { LexicalSerializer } from "../../components/lexical/lexical-serializer";
-import { fetchLandingPage } from "../../lib/api/landing-page";
-import { AnnouncementCard } from "../../components/announcement-card";
-import { getCurrentLocale } from "../../locales/server";
-import { openGraphImage } from "../shared-metadata";
+import { EventsDisplay } from "../../../components/events-display";
+import { Hero, type ImageWithPhotographer } from "../../../components/hero";
+import { LexicalSerializer } from "../../../components/lexical/lexical-serializer";
+import { fetchLandingPage } from "../../../lib/api/landing-page";
+import { AnnouncementCard } from "../../../components/announcement-card";
+import { getCurrentLocale } from "../../../locales/server";
+import { openGraphImage } from "../../shared-metadata";
 
 function Content({ content }: { content?: EditorState }) {
   if (!content) return null;

apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/page.tsx → apps/web/src/app/[locale]/(main)/signups/[signupId]/[signupEditToken]/page.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable no-nested-ternary -- I like */
 import { notFound } from "next/navigation";
-import { getSignup } from "../../../../../lib/api/external/ilmomasiina";
-import { openGraphImage } from "../../../../shared-metadata";
+import { getSignup } from "../../../../../../lib/api/external/ilmomasiina";
+import { openGraphImage } from "../../../../../shared-metadata";
 import {
   deleteSignUpAction,
   saveSignUpAction,
-} from "../../../../../lib/api/external/ilmomasiina/actions";
-import { getCurrentLocale, getScopedI18n } from "../../../../../locales/server";
-import { getLocalizedEventTitle } from "../../../../../lib/utils";
+} from "../../../../../../lib/api/external/ilmomasiina/actions";
+import {
+  getCurrentLocale,
+  getScopedI18n,
+} from "../../../../../../locales/server";
+import { getLocalizedEventTitle } from "../../../../../../lib/utils";
 import { SignupForm } from "./signup-form";
 
 interface PageProps {

apps/web/src/app/[locale]/signups/[signupId]/[signupEditToken]/signup-form.tsx → apps/web/src/app/[locale]/(main)/signups/[signupId]/[signupEditToken]/signup-form.tsx

@@ -20,17 +20,17 @@ import {
   ilmomasiinaFieldErrors,
   type IlmomasiinaEvent,
   type IlmomasiinaSignupInfo,
-} from "../../../../../lib/api/external/ilmomasiina";
+} from "../../../../../../lib/api/external/ilmomasiina";
 import type {
   deleteSignUpAction,
   saveSignUpAction,
-} from "../../../../../lib/api/external/ilmomasiina/actions";
+} from "../../../../../../lib/api/external/ilmomasiina/actions";
 import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../../../../locales/client";
-import { cn, getLocalizedEventTitle } from "../../../../../lib/utils";
+} from "../../../../../../locales/client";
+import { cn, getLocalizedEventTitle } from "../../../../../../lib/utils";
 
 type FieldErrorI18n = ReturnType<typeof useScopedI18n>;
 

apps/web/src/app/[locale]/signups/not-found.tsx → apps/web/src/app/[locale]/(main)/signups/not-found.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { Button, Card } from "@tietokilta/ui";
 import Link from "next/link";
-import { DinoGame } from "../../../components/dino-game";
+import { DinoGame } from "../../../../components/dino-game";
 import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../../locales/client";
+} from "../../../../locales/client";
 
 function Page() {
   const t = useScopedI18n("not-found");

apps/web/src/app/[locale]/tapahtumat/not-found.tsx → apps/web/src/app/[locale]/(main)/tapahtumat/not-found.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { Button, Card } from "@tietokilta/ui";
 import Link from "next/link";
-import { DinoGame } from "../../../components/dino-game";
+import { DinoGame } from "../../../../components/dino-game";
 import {
   I18nProviderClient,
   useCurrentLocale,
   useScopedI18n,
-} from "../../../locales/client";
+} from "../../../../locales/client";
 
 function Page() {
   const t = useScopedI18n("not-found");

apps/web/src/app/[locale]/weekly-newsletters/[slug]/page.tsx → apps/web/src/app/[locale]/(main)/weekly-newsletters/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import WeeklyNewsletterPage from "../../../../custom-pages/weekly-newsletter-page";
+import WeeklyNewsletterPage from "../../../../../custom-pages/weekly-newsletter-page";
 
 interface PageProps {
   params: Promise<{