v0.4.4

frontend/package.json

@@ -30,6 +30,7 @@
     "next": "15.4.10",
     "next-themes": "^0.4.6",
     "patch-package": "^8.0.1",
+    "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
     "react-day-picker": "^9.6.7",
     "react-dom": "^19.0.0",

frontend/src/app/(auth)/layout.tsx

@@ -1,41 +1,16 @@
-"use client";
+import { redirect } from "next/navigation";
 
-import { useEffect, useRef } from "react";
+import { getSession } from "@/lib/utils/get-session";
 
-import { useRouter } from "next/navigation";
-
-import Loading from "@/app/loading";
-import { useAccount } from "@/features/account/context";
-import { useToast } from "@/features/system-feedback";
-import { MESSAGES } from "@/lib/messages";
-
-export default function AuthLayout({
+export default async function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const { loginState } = useAccount();
-  const router = useRouter();
-  const { addToast } = useToast();
-  const hasBeenLoggedOutRef = useRef(false);
-
-  useEffect(() => {
-    if (loginState === "logged_out") {
-      hasBeenLoggedOutRef.current = true;
-    }
-
-    if (loginState === "logged_in") {
-      // Check if the user was logged out to avoid this triggering on login
-      if (!hasBeenLoggedOutRef.current) {
-        router.replace("/dashboard");
-        addToast("info", MESSAGES.INFO_ALREADY_LOGGED_IN);
-      }
-    }
-  }, [loginState, router, addToast]);
+  const session = await getSession();
 
-  if (loginState === "logged_in") {
-    // Logged in status is included to avoid flickering on redirect
-    return <Loading />;
+  if (session.isLoggedIn) {
+    redirect("/dashboard?alreadyLoggedIn=true");
   }
 
   return <>{children}</>;

frontend/src/app/(auth)/login/page.tsx

@@ -3,27 +3,29 @@
 import { useState } from "react";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 
 import Checkbox from "@/components/checkbox";
 import AuthPageLayout from "@/components/layout/auth-page";
 import LinkText from "@/components/link-text";
 import TextInputField from "@/components/text-input-field";
-import { useAccount } from "@/features/account/context";
 import ActionButton from "@/features/button/components/action";
 import { useFormErrors } from "@/lib/hooks/use-form-errors";
 import { MESSAGES } from "@/lib/messages";
 import { clientPost } from "@/lib/utils/api/client-fetch";
 import { ROUTES } from "@/lib/utils/api/endpoints";
 import { ApiErrorResponse } from "@/lib/utils/api/fetch-wrapper";
+import { getSafeRedirectUrl } from "@/lib/utils/url";
 
 export default function Page() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
-  const { login } = useAccount();
   const router = useRouter();
 
+  const searchParams = useSearchParams();
+  const callbackUrl = getSafeRedirectUrl(searchParams.get("callbackUrl"));
+
   // TOASTS AND ERROR STATES
   const { errors, handleError, clearAllErrors } = useFormErrors();
 
@@ -52,16 +54,13 @@ export default function Page() {
     }
 
     try {
-      const data = await clientPost(ROUTES.auth.login, {
+      await clientPost(ROUTES.auth.login, {
         email,
         password,
         remember_me: rememberMe,
       });
-      login({
-        email: data.email,
-        defaultName: data.default_display_name,
-      });
-      router.push("/dashboard");
+      router.push(callbackUrl);
+      router.refresh();
       return true;
     } catch (e) {
       const error = e as ApiErrorResponse;

frontend/src/app/(event)/[event-code]/page-client.tsx

@@ -4,24 +4,23 @@ import { useState } from "react";
 
 import { PencilIcon, ShareIcon, SquarePenIcon } from "lucide-react";
 
-import CopyToastButton from "@/components/copy-toast-button";
 import KebabMenu from "@/components/kebab-menu";
 import { EventInformation } from "@/core/event/types";
-import ActionButton from "@/features/button/components/action";
+import EmptyButton from "@/features/button/components/empty";
 import LinkButton from "@/features/button/components/link";
 import ScheduleGrid from "@/features/event/grid/grid";
-import AttendeesPanel from "@/features/event/results/attendee-panel/panel";
-import { getResultBanners } from "@/features/event/results/banners";
+import AttendeesPanel from "@/features/event/results/attendees/desktop-panel";
+import AttendeesDrawer from "@/features/event/results/attendees/mobile-drawer";
+import { getResultBanners } from "@/features/event/results/components/banners";
+import DisplaySettings from "@/features/event/results/components/display-settings";
 import {
   ResultsProvider,
   useResultsContext,
 } from "@/features/event/results/context";
-import DisplaySettings from "@/features/event/results/display-settings";
-import ResultsDrawer from "@/features/event/results/drawer";
 import { ResultsInformation } from "@/features/event/results/lib/types";
+import ShareMenu from "@/features/event/results/share-menu";
 import HeaderSpacer from "@/features/header/components/header-spacer";
-import { useToast } from "@/features/system-feedback";
-import { MESSAGES } from "@/lib/messages";
+import BaseDialog from "@/features/system-feedback/dialog/components/base";
 import { cn } from "@/lib/utils/classname";
 
 export default function ClientPage({
@@ -61,9 +60,6 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
     timeslots,
   } = eventData;
 
-  /* TOAST PROVIDER */
-  const { addToast } = useToast();
-
   /* TIMEZONE HANDLING */
   const handleTZChange = (newTZ: string | number) => {
     setTimezone(newTZ.toString());
@@ -110,44 +106,21 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
     />
   );
 
-  const shareButton = (buttonStyle: HeaderButtonStyle) => {
-    // Check if sharing is supported
-    if (typeof navigator !== "undefined" && !navigator.share) {
-      /* This condition means it will be rendered until mounted on the client, then it
-       * disappears if not supported. There are more browsers that support the API than
-       * don't, so this is a better trade-off than having the button appear after initial
-       * mount on supported browsers.
-       *
-       * This also won't be visible on mobile anyway, since the buttons are hidden in the
-       * kebab menu.
-       */
-      return null;
-    } else {
-      return (
-        <ActionButton
-          buttonStyle={buttonStyle}
+  const shareButton = (
+    <BaseDialog
+      title="Share Event"
+      description="Share this event with others"
+      trigger={
+        <EmptyButton
+          buttonStyle="secondary"
           icon={<ShareIcon />}
           label="Share Event"
-          onClick={async () => {
-            try {
-              await navigator.share({
-                title: eventTitle,
-                url: window.location.href,
-              });
-            } catch (error) {
-              // An error is thrown if sharing is cancelled, ignore that
-              if (error instanceof Error && error.name !== "AbortError") {
-                addToast("error", MESSAGES.ERROR_GENERIC);
-              }
-            }
-          }}
         />
-      );
-    }
-  };
-
-  const copyButton = (buttonStyle: HeaderButtonStyle) => (
-    <CopyToastButton code={eventCode} buttonStyle={buttonStyle} />
+      }
+      showCloseButton
+    >
+      <ShareMenu eventTitle={eventTitle} eventCode={eventCode} />
+    </BaseDialog>
   );
 
   return (
@@ -158,18 +131,15 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
       <div className="flex flex-row justify-between gap-2 md:flex-wrap">
         <h1 className="text-2xl font-bold">{eventTitle}</h1>
 
-        <div className="md:hidden">
-          <KebabMenu>
-            {isCreator && editButton("frosted glass inset")}
-            {shareButton("frosted glass inset")}
-            {copyButton("frosted glass inset")}
-          </KebabMenu>
-        </div>
+        {isCreator && (
+          <div className="md:hidden">
+            <KebabMenu>{editButton("frosted glass inset")}</KebabMenu>
+          </div>
+        )}
 
         <div className="ml-auto hidden flex-wrap justify-end gap-2 md:flex">
           {isCreator && editButton("secondary")}
-          {shareButton("secondary")}
-          {copyButton("secondary")}
+          {shareButton}
           {paintingButton}
         </div>
       </div>
@@ -188,16 +158,22 @@ function EventResults({ eventData }: { eventData: EventInformation }) {
           timeslots={timeslots}
         />
 
+        <div className="bg-panel shrink-0 rounded-3xl p-6 text-sm md:hidden">
+          <DisplaySettings
+            timezone={timezone}
+            onTimezoneChange={handleTZChange}
+          />
+        </div>
+
         {/* Mobile Spacer & Drawer */}
         <div
           className="w-full md:hidden"
           style={{ height: getSpacerHeight() }}
         />
         <div className="md:hidden">
-          <ResultsDrawer
-            timezone={timezone}
-            onTimezoneChange={handleTZChange}
+          <AttendeesDrawer
             onSnapChange={setDrawerSnap}
+            eventTitle={eventTitle}
             eventCode={eventCode}
           />
         </div>