feat: landing page cleanup

packages/i18n/strings/en.json

@@ -863,7 +863,7 @@
         "reset": "Reset",
         "shuffle": "Shuffle",
         "remove": "Remove played",
-        "tracking": "BlitzKit is tracking your playlist",
+        "tracking": "BlitzKit is tracking your battles",
 
         "sort": {
           "button": "Sort by",
@@ -881,7 +881,6 @@
           "wins": "Wins"
         },
 
-        "no_login_warning": "You are not logged in. BlitzKit will not keep track of your played tanks.",
         "generate": "Generate playlist",
         "name": "Playlist",
         "description": "Tank playlist generator",

packages/website/src/components/PlaylistGenerator.tsx

@@ -1,7 +1,6 @@
 import { fisherYates, tankIcon } from "@blitzkit/core";
 import { literals } from "@blitzkit/i18n";
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { Box, Button, Flex, Grid, Skeleton, Text } from "@radix-ui/themes";
-import { Box, Button, Flex, Grid, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
 import usePromise from "react-promise-suspense";
 import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions";
@@ -10,6 +9,7 @@ import { generatePlaylist } from "../core/blitzkit/generatePlaylist";
 import { useLocale } from "../hooks/useLocale";
 import { App } from "../stores/app";
 import { TankFilters } from "../stores/tankFilters";
+import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
 import { LinkI18n } from "./LinkI18n";
 import { FilterControl } from "./TankSearch/components/FilterControl";
 
@@ -17,7 +17,7 @@ const tankDefinitions = await awaitableTankDefinitions;
 
 const POOL_HEIGHT = "16rem";
 
-export function PlaylistGenerator() {
+export function PlaylistGenerator({ skeleton }: MaybeSkeletonComponentProps) {
   const { strings, locale } = useLocale();
   const wargaming = App.use((state) => state.logins.wargaming);
   const filters = TankFilters.use();
@@ -47,15 +47,6 @@ export function PlaylistGenerator() {
           <Button onClick={generatePlaylist} size="3">
             {strings.website.tools.playlist.generate}
           </Button>
-
-          {!wargaming && (
-            <Text color="gray">
-              <Flex align="center" gap="1">
-                <ExclamationTriangleIcon />
-                {strings.website.tools.playlist.no_login_warning}
-              </Flex>
-            </Text>
-          )}
         </Flex>
 
         <Flex
@@ -73,21 +64,32 @@ export function PlaylistGenerator() {
             maxHeight={POOL_HEIGHT}
             width="100%"
           >
-            {tanksTrimmed.map((tank) => (
+            {tanksTrimmed.map((tank) =>
-              <LinkI18n
+              skeleton ? (
-                target="_blank"
+                <Box
-                locale={locale}
+                  width="100%"
-                href={`/tanks/${tank.slug}`}
+                  height="100%"
-                key={tank.id}
+                  style={{ aspectRatio: "4 / 3" }}
-                style={{
+                  p="1"
-                  aspectRatio: "4 / 3",
+                >
-                  backgroundSize: "cover",
+                  <Skeleton width="100%" height="100%" />
-                  backgroundPosition: "center",
+                </Box>
-                  backgroundImage: `url(${tankIcon(tank.id)})`,
+              ) : (
-                  backgroundRepeat: "no-repeat",
+                <LinkI18n
-                }}
+                  target="_blank"
-              />
+                  locale={locale}
-            ))}
+                  href={`/tanks/${tank.slug}`}
+                  key={tank.id}
+                  style={{
+                    aspectRatio: "4 / 3",
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundImage: `url(${tankIcon(tank.id)})`,
+                    backgroundRepeat: "no-repeat",
+                  }}
+                />
+              )
+            )}
 
             <Box
               position="absolute"

packages/website/src/pages/[...locale]/playlist/_index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { PageWrapper } from "../../../components/PageWrapper";
 import { PlaylistGenerator } from "../../../components/PlaylistGenerator";
 import { PlaylistOrder } from "../../../components/PlaylistOrder";
@@ -17,20 +16,13 @@ export function Page({
   skeleton,
 }: Props & MaybeSkeletonComponentProps) {
   const generated = Playlist.use((state) => state.list !== undefined);
-  const wargaming = App.use((state) => state.logins.wargaming);
 
-  useEffect(() => {
+  if (App.state.logins.wargaming) TankFilters.state.ownership = "owned";
-    if (wargaming) {
-      TankFilters.mutate((draft) => {
-        draft.ownership = "owned";
-      });
-    }
-  }, []);
 
   return (
     <LocaleProvider locale={locale}>
       <PageWrapper color="tomato" direction="row" maxWidth="unset" p="0">
-        {!generated && <PlaylistGenerator />}
+        {!generated && <PlaylistGenerator skeleton={skeleton} />}
         {generated && <PlaylistOrder />}
       </PageWrapper>
     </LocaleProvider>