Merge branch 'deep-ketch' into development

src/features/badges/server.ts

@@ -1,5 +1,6 @@
 import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
 import { superTokensAdminFunctionMiddleware, superTokensFunctionMiddleware } from "@/utils/supertokens";
+import { serverFnLoggingMiddleware } from "@/utils/activities";
 import { createServerFn } from "@tanstack/react-start";
 import { pbAdmin } from "@/lib/pocketbase/client";
 import { z } from "zod";
@@ -14,7 +15,7 @@ export const getPlayerBadges = createServerFn()
   );
 
 export const migrateBadgeProgress = createServerFn()
-  .middleware([superTokensAdminFunctionMiddleware])
+  .middleware([superTokensAdminFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async () =>
     toServerResult(async () => startBadgeMigration())
   );
@@ -40,7 +41,7 @@ export const awardManualBadge = createServerFn()
     playerId: z.string(),
     badgeId: z.string(),
   }))
-  .middleware([superTokensAdminFunctionMiddleware])
+  .middleware([superTokensAdminFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ data }) =>
     toServerResult(async () => {
       const result = await pbAdmin.awardManualBadge(data.playerId, data.badgeId);

src/features/core/components/header.tsx

@@ -1,15 +1,57 @@
+import { useLayoutEffect, useRef } from "react";
 import { Title, AppShell, Flex } from "@mantine/core";
 import { useLingui } from "@lingui/react";
 import { HeaderConfig } from "../types/header-config";
 import BackButton from "./back-button";
 
+const MIN_TITLE_SCALE = 0.55;
+
 const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig) => {
   const { i18n } = useLingui();
+  const titleRef = useRef<HTMLHeadingElement>(null);
   const resolvedTitle =
     typeof title === "string" || title === undefined
       ? title
       : i18n._({ ...title, values: titleValues });
 
+  useLayoutEffect(() => {
+    const el = titleRef.current;
+    if (!el) return;
+    let cancelled = false;
+
+    const textWidth = () => {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      return range.getBoundingClientRect().width;
+    };
+
+    const fit = () => {
+      el.style.fontSize = "";
+      const available = el.clientWidth - 1;
+      if (available <= 0) return;
+      let needed = textWidth();
+      if (needed <= available) return;
+      const natural = parseFloat(getComputedStyle(el).fontSize);
+      let scale = Math.max(available / needed, MIN_TITLE_SCALE);
+      el.style.fontSize = `${natural * scale}px`;
+      for (let i = 0; i < 3 && scale > MIN_TITLE_SCALE && textWidth() > available; i++) {
+        scale = Math.max(scale * 0.98, MIN_TITLE_SCALE);
+        el.style.fontSize = `${natural * scale}px`;
+      }
+    };
+
+    fit();
+    document.fonts?.ready.then(() => {
+      if (!cancelled) fit();
+    });
+    const observer = new ResizeObserver(fit);
+    observer.observe(el);
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [resolvedTitle]);
+
   return (
     <AppShell.Header
       id='app-header'
@@ -20,8 +62,20 @@ const Header = ({ collapsed, title, titleValues, withBackButton }: HeaderConfig)
       }}
     >
       { withBackButton && <BackButton /> }
-      <Flex justify='center' px='md' mt={8}>
-        <Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
+      <Flex justify='center' px={48} mt={8} w='100%'>
+        <Title
+          ref={titleRef}
+          order={1}
+          lts='0.08em'
+          style={{
+            userSelect: 'none',
+            width: '100%',
+            textAlign: 'center',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+        >
           {resolvedTitle?.toLocaleUpperCase()}
         </Title>
       </Flex>

src/features/core/hooks/use-visual-viewport-size.ts

@@ -5,11 +5,10 @@ const eventListerOptions = {
 };
 
 const useVisualViewportSize = () => {
-  const windowExists = typeof window !== 'undefined';
   const [windowSize, setWindowSize] = useState({
-    width: windowExists ? window.visualViewport?.width || 0 : 0,
-    height: windowExists ? window.visualViewport?.height || 0 : 0,
-    top: windowExists ? window.visualViewport?.offsetTop || 0 : 0,
+    width: 0,
+    height: 0,
+    top: 0,
   });
   const rafRef = useRef<number | null>(null);
 

src/features/players/server.ts

@@ -84,7 +84,7 @@ export const updatePlayer = createServerFn()
 
 export const createPlayer = createServerFn()
   .validator(playerInputSchema)
-  .middleware([superTokensFunctionMiddleware])
+  .middleware([superTokensFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ context, data }) =>
     toServerResult(async () => {
       const userAuthId = context.userAuthId;

src/features/tournaments/server.ts

@@ -148,7 +148,7 @@ export const generateRandomTeams = createServerFn()
     tournamentId: z.string(),
     seed: z.number().optional()
   }))
-  .middleware([superTokensAdminFunctionMiddleware])
+  .middleware([superTokensAdminFunctionMiddleware, serverFnLoggingMiddleware])
   .handler(async ({ data }) =>
     toServerResult(async () => {
       const freeAgents = await pbAdmin.getFreeAgents(data.tournamentId);