Feature/mobile UI upgrades

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 .env
 .vscode
+.mcp.json
 
 *.tsbuildinfo
 .tsbuildinfo

packages/api/src/services/auth/devLogin.ts

@@ -0,0 +1,48 @@
+import crypto from 'crypto';
+import { db } from 'db';
+import createDebug from 'debug';
+
+const debug = createDebug('backend-ts:auth');
+
+function generateSessionId(): string {
+  return crypto.randomBytes(16).toString('hex');
+}
+
+export async function devLogin(playerId: number): Promise<{ session: string }> {
+  debug(`Dev login for player ID: ${playerId}`);
+
+  // Verify player exists
+  const player = await db
+    .selectFrom('players')
+    .select(['id', 'nickname'])
+    .where('id', '=', playerId)
+    .executeTakeFirst();
+
+  if (!player) {
+    throw new Error(`Player with ID ${playerId} not found`);
+  }
+
+  debug(`Found player: ${player.nickname} (${player.id})`);
+
+  // Delete old sessions for this player
+  await db.deleteFrom('sessions').where('player', '=', player.id).execute();
+
+  // Create new session (valid for 2 weeks)
+  const now = new Date();
+  const sessionId = generateSessionId();
+  const validUntil = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
+
+  await db
+    .insertInto('sessions')
+    .values({
+      id: sessionId,
+      player: player.id,
+      established: now,
+      valid_until: validUntil,
+    })
+    .execute();
+
+  debug(`Created dev session for player ${player.id}`);
+
+  return { session: sessionId };
+}

packages/api/src/trpc/routes/auth.ts

@@ -1,8 +1,9 @@
+import { devLogin as devLoginService } from 'services/auth/devLogin';
 import { getRegistrationToken as getRegistrationTokenService } from 'services/auth/getRegistrationToken';
 import { loginWithGoogleCredential } from 'services/auth/googleLogin';
 import { logout as logoutService } from 'services/auth/logout';
 import { registerPlayer } from 'services/auth/register';
-import { publicProcedure, router } from 'trpc/trpc';
+import { devProcedure, publicProcedure, router } from 'trpc/trpc';
 import { z } from 'zod';
 
 export const loginGoogle = publicProcedure
@@ -44,9 +45,20 @@ export const logout = publicProcedure.mutation(async ({ ctx }) => {
   }
 });
 
+export const devLogin = devProcedure
+  .input(
+    z.object({
+      playerId: z.number(),
+    })
+  )
+  .mutation(({ input }) => {
+    return devLoginService(input.playerId);
+  });
+
 export const auth = router({
   loginGoogle,
   getRegistrationToken,
   register,
   logout,
+  devLogin,
 });

packages/api/src/trpc/trpc.ts

@@ -66,3 +66,13 @@ export const adminProcedure = t.procedure.use(async ({ ctx, next }) => {
   }
   return next({ ctx: { user: ctx.user } });
 });
+
+/**
+ * Dev procedure - only available in development mode
+ */
+export const devProcedure = t.procedure.use(async ({ next }) => {
+  if (process.env.NODE_ENV !== 'development') {
+    throw new TRPCError({ code: 'FORBIDDEN', message: 'Only available in development mode' });
+  }
+  return next();
+});

packages/web/src/App.tsx

@@ -12,6 +12,20 @@ import { queryClient } from 'utils/trpc';
 const theme = createTheme({
   autoContrast: true,
   primaryColor: 'gray',
+  breakpoints: {
+    xs: '30em',
+    sm: '48em',
+    md: '64em',
+    lg: '74em',
+    xl: '90em',
+  },
+  lineHeights: {
+    xs: '1.2',
+    sm: '1.3',
+    md: '1.4',
+    lg: '1.5',
+    xl: '1.6',
+  },
   spacing: {
     xxs: '0.25rem',
     xs: '0.625rem',

packages/web/src/components/Flag/Flag.tsx

@@ -5,12 +5,13 @@ import './flag.scss';
 interface FlagProps {
   region: string;
   className?: string;
+  size?: 'sm' | 'md';
 }
 
-export const Flag = memo(function Flag({ region, className }: FlagProps) {
+export const Flag = memo(function Flag({ region, className, size = 'md' }: FlagProps) {
   return (
     <img
-      className={`flag ${className ?? ''}`}
+      className={`flag flag--${size} ${className ?? ''}`}
       src={`https://osu.ppy.sh/images/flags/${region}.png`}
       alt={`${region} flag`}
     />

packages/web/src/components/Flag/flag.scss

@@ -1,6 +1,15 @@
 .flag {
-  width: 20px;
-  height: 15px;
   border-radius: 3px;
   opacity: 0.85;
+
+  &--md {
+    width: 20px;
+    height: 15px;
+  }
+
+  &--sm {
+    width: 16px;
+    height: 12px;
+    border-radius: 2px;
+  }
 }

packages/web/src/components/TopBar/top-bar.scss

@@ -45,9 +45,9 @@
 
 @media screen and (max-width: 500px) {
   .top-bar > nav > ul {
-    font-size: 4.4vw;
+    font-size: 16px;
     > li > a {
-      margin: 1vw;
+      margin: 4px;
     }
   }
 }

packages/web/src/features/leaderboards/components/charts/Chart.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Text } from '@mantine/core';
+import { ActionIcon, Group, Text } from '@mantine/core';
 import { useAtomValue } from 'jotai';
 import _ from 'lodash/fp';
 import { Fragment, memo, useState } from 'react';
@@ -9,8 +9,6 @@ import { useHighlightedPlayerIds } from 'features/leaderboards/hooks/useHighligh
 
 import { useUser } from 'hooks/useUser';
 
-import { useLanguage } from 'utils/context/translation';
-
 import type { ChartApiOutput } from '../../hooks/useChartsQuery';
 import { ChartHeader } from './ChartHeader/ChartHeader';
 import Result from './Result';
@@ -21,7 +19,6 @@ const Chart = memo(function _Chart({ chart }: { chart: ChartApiOutput }) {
   const filter = useAtomValue(filterAtom);
   const highlightedPlayerIds = useHighlightedPlayerIds();
   const [showHidden, setShowHidden] = useState(false);
-  const lang = useLanguage();
 
   const hiddenResultsCount = chart.results.reduce((sum, res) => (res.isHidden ? sum + 1 : sum), 0);
 
@@ -96,18 +93,13 @@ const Chart = memo(function _Chart({ chart }: { chart: ChartApiOutput }) {
     <div className="song-block">
       <ChartHeader chart={chart}>
         {hiddenResultsCount > 0 && (
-          <>
-            <Text size="xs" lh={1}>
-              {lang.HIDDEN}: {hiddenResultsCount}
-            </Text>
-            <ActionIcon
-              variant="subtle"
-              aria-label="Show all"
-              onClick={() => setShowHidden(!showHidden)}
-            >
-              <FaGlobeAmericas />
-            </ActionIcon>
-          </>
+          <ActionIcon
+            variant="subtle"
+            aria-label="Show all"
+            onClick={() => setShowHidden(!showHidden)}
+          >
+            <FaGlobeAmericas />
+          </ActionIcon>
         )}
       </ChartHeader>
       <div className="charts">

packages/web/src/features/leaderboards/components/charts/ChartHeader/ChartHeader.tsx

@@ -3,8 +3,6 @@ import qs from 'query-string';
 import { FaYoutube } from 'react-icons/fa';
 import { NavLink } from 'react-router-dom';
 
-import css from './chart-header.module.scss';
-
 import { ChartLabel } from 'components/ChartLabel/ChartLabel';
 
 import { colorByMix } from 'constants/colors';
@@ -26,45 +24,43 @@ export const ChartHeader = ({ chart, children = null }: ChartHeaderProps): JSX.E
   const [chartType, chartLevel] = labelToTypeLevel(chart.label);
 
   return (
-    <div className={css.songHeader}>
+    <Group p="xs" bdrs="xl" gap="sm" align="center">
       <ChartLabel type={chartType} level={chartLevel ?? '?'} />
-      <div className={css.songName}>
-        <Anchor
-          size="xl"
-          fw="bold"
-          component={NavLink}
-          to={routes.leaderboard.sharedChart.getPath({ sharedChartId: chart.id })}
-        >
-          {chart.songName}
-        </Anchor>{' '}
-        <Text component="span" c="dimmed">
-          {chart.difficulty ? `(${chart.difficulty.toFixed(1)}) ` : ''}
-        </Text>
-      </div>
-      <div className={css.youtubeLink}>
-        <a
-          href={`https://youtube.com/results?${qs.stringify({
-            search_query: `${chart.songName} ${chart.label}`.replace(/( -)|(- )/g, ' '),
-          })}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <FaYoutube />
-        </a>
-      </div>
-      <Group gap="xs" ml="auto" fz="sm">
-        {otherInstances.map((instance) => {
-          if (instance.level === chart.level) {
-            return null;
-          }
-          return (
-            <Badge key={instance.mix} color={colorByMix[instance.mix as keyof typeof colorByMix]}>
-              {Mixes[instance.mix as keyof typeof Mixes]}: {instance.label}
-            </Badge>
-          );
-        })}
-        {children}
-      </Group>
-    </div>
+      <Anchor
+        flex="1 1 0"
+        size="xl"
+        lh="xs"
+        fw="bold"
+        component={NavLink}
+        to={routes.leaderboard.sharedChart.getPath({ sharedChartId: chart.id })}
+      >
+        {chart.songName}
+      </Anchor>{' '}
+      <Text component="span" c="dimmed">
+        {chart.difficulty ? `(${chart.difficulty.toFixed(1)}) ` : ''}
+      </Text>
+      <Anchor
+        href={`https://youtube.com/results?${qs.stringify({
+          search_query: `${chart.songName} ${chart.label}`.replace(/( -)|(- )/g, ' '),
+        })}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        fz="xl"
+        lh={1}
+      >
+        <FaYoutube />
+      </Anchor>
+      {otherInstances.map((instance) => {
+        if (instance.level === chart.level) {
+          return null;
+        }
+        return (
+          <Badge key={instance.mix} color={colorByMix[instance.mix as keyof typeof colorByMix]}>
+            {Mixes[instance.mix as keyof typeof Mixes]}: {instance.label}
+          </Badge>
+        );
+      })}
+      {children}
+    </Group>
   );
 };