feat: some cleanup

packages/i18n/strings/en.json

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

packages/website/src/components/PlaylistActions.tsx

@@ -1,6 +1,6 @@
 import { fisherYates } from "@blitzkit/core";
 import { CaretDownIcon } from "@radix-ui/react-icons";
-import { Button, DropdownMenu, Flex } from "@radix-ui/themes";
+import { Button, DropdownMenu, Flex, Spinner } from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
 import { App } from "../stores/app";
 import { Playlist } from "../stores/playlist";
@@ -10,83 +10,96 @@ export function PlaylistActions() {
   const wargaming = App.use((state) => state.logins.wargaming);
 
   return (
-    <Flex gap="2">
-      <Button
-        variant="outline"
-        color="red"
-        onClick={() => {
-          Playlist.mutate((draft) => {
-            draft.list = undefined;
-          });
-        }}
-      >
-        {strings.website.tools.playlist.reset}
-      </Button>
+    <>
+      <Flex gap="2">
+        <Button
+          size={{ initial: "1", xs: "2" }}
+          variant="outline"
+          color="red"
+          onClick={() => {
+            Playlist.mutate((draft) => {
+              draft.list = undefined;
+            });
+          }}
+        >
+          {strings.website.tools.playlist.reset}
+        </Button>
 
-      <Button
-        variant={wargaming ? "outline" : undefined}
-        onClick={() => {
-          Playlist.mutate((draft) => {
-            if (draft.list) fisherYates(draft.list);
-          });
-        }}
-      >
-        {strings.website.tools.playlist.shuffle}
-      </Button>
+        <Button
+          size={{ initial: "1", xs: "2" }}
+          variant={wargaming ? "outline" : undefined}
+          onClick={() => {
+            Playlist.mutate((draft) => {
+              if (draft.list) fisherYates(draft.list);
+            });
+          }}
+        >
+          {strings.website.tools.playlist.shuffle}
+        </Button>
+
+        {wargaming && (
+          <>
+            <Button
+              size={{ initial: "1", xs: "2" }}
+              variant="outline"
+              onClick={() => {
+                Playlist.mutate((draft) => {
+                  draft.list = draft.list?.filter(
+                    (entry) =>
+                      !entry.now ||
+                      !entry.then ||
+                      entry.now.battles === entry.then.battles
+                  );
+                });
+              }}
+            >
+              {strings.website.tools.playlist.remove}
+            </Button>
+
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <Button size={{ initial: "1", xs: "2" }}>
+                  {strings.website.tools.playlist.sort.button}
+                  <CaretDownIcon />
+                </Button>
+              </DropdownMenu.Trigger>
+
+              <DropdownMenu.Content>
+                <DropdownMenu.Item
+                  onClick={() => {
+                    Playlist.mutate((draft) => {
+                      draft.list = draft.list?.sort(
+                        (a, b) => (a.then?.last ?? 0) - (b.then?.last ?? 0)
+                      );
+                    });
+                  }}
+                >
+                  {strings.website.tools.playlist.sort.last_played}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  onClick={() => {
+                    Playlist.mutate((draft) => {
+                      draft.list = draft.list?.sort(
+                        (a, b) =>
+                          (a.then?.battles ?? 0) - (b.then?.battles ?? 0)
+                      );
+                    });
+                  }}
+                >
+                  {strings.website.tools.playlist.sort.least_played}
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </>
+        )}
+      </Flex>
 
       {wargaming && (
-        <>
-          <Button
-            variant="outline"
-            onClick={() => {
-              Playlist.mutate((draft) => {
-                draft.list = draft.list?.filter(
-                  (entry) =>
-                    !entry.now ||
-                    !entry.then ||
-                    entry.now.battles === entry.then.battles
-                );
-              });
-            }}
-          >
-            {strings.website.tools.playlist.remove}
-          </Button>
-
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <Button>
-                {strings.website.tools.playlist.sort.button}
-                <CaretDownIcon />
-              </Button>
-            </DropdownMenu.Trigger>
-
-            <DropdownMenu.Content>
-              <DropdownMenu.Item
-                onClick={() => {
-                  Playlist.mutate((draft) => {
-                    draft.list = draft.list?.sort(
-                      (a, b) => (a.then?.last ?? 0) - (b.then?.last ?? 0)
-                    );
-                  });
-                }}
-              >
-                {strings.website.tools.playlist.sort.last_played}
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                onClick={() => {
-                  Playlist.mutate((draft) => {
-                    draft.list = draft.list?.sort(
-                      (a, b) => (a.then?.battles ?? 0) - (b.then?.battles ?? 0)
-                    );
-                  });
-                }}
-              >
-                {strings.website.tools.playlist.sort.least_played}
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </>
+        <Flex gap="2" align="center">
+          <Spinner />
+          {strings.website.tools.playlist.tracking}
+        </Flex>
       )}
-    </Flex>
+    </>
   );
 }

packages/website/src/components/PlaylistTable.tsx

@@ -20,6 +20,7 @@ export function PlaylistTable() {
         height: "100%",
         width: "100%",
         borderRadius: 0,
+        whiteSpace: "nowrap",
       }}
       variant="surface"
     >

packages/website/src/components/PlaylistTankEntry.tsx

@@ -35,6 +35,7 @@ export const PlaylistTankEntry = memo<Props>(
           }}
         >
           <Checkbox
+            size="3"
             variant="classic"
             checked={
               (checked === undefined &&

packages/website/src/components/StickyRowHeaderCell.tsx

@@ -5,7 +5,6 @@ export function StickyRowHeaderCell({ style, ...props }: RowHeaderCellProps) {
   return (
     <Table.RowHeaderCell
       style={{
-        display: "flex",
         position: "sticky",
         left: 0,
         backgroundColor: "var(--color-panel)",

packages/website/src/components/TankRowHeaderCell.tsx

@@ -1,4 +1,5 @@
 import { type TankDefinition, tankIcon, TankType } from "@blitzkit/core";
+import { Box, Flex } from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
 import { classIcons } from "./ClassIcon";
 import { ExperimentIcon } from "./ExperimentIcon";
@@ -15,20 +16,6 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
 
   return (
     <StickyRowHeaderCell style={{ overflow: "hidden" }}>
-      <LinkI18n locale={locale} href={`/tanks/${tank.slug}`} tabIndex={-1}>
-        <img
-          alt={unwrap(tank.name)}
-          draggable={false}
-          src={tankIcon(tank.id)}
-          style={{
-            margin: "calc(-1 * var(--table-cell-padding)) 0",
-            height: "calc(100% + 2 * var(--table-cell-padding))",
-            aspectRatio: "4 / 3",
-            objectFit: "cover",
-          }}
-        />
-      </LinkI18n>
-
       <LinkI18n
         locale={locale}
         color={
@@ -42,28 +29,34 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
         underline="hover"
         wrap="nowrap"
         href={`/tanks/${tank.slug}`}
-        style={{
-          paddingLeft: "var(--space-2)",
-          display: "flex",
-          alignItems: "center",
-          gap: "var(--space-1)",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-        }}
+        style={{ height: "100%" }}
         size={{ initial: "1", sm: "2" }}
       >
-        <Icon
-          width="1em"
-          height="1em"
-          style={{ minWidth: "1em", minHeight: "1em" }}
-        />
+        <Flex height="100%" align="center" gap="1">
+          <Box
+            draggable={false}
+            height="calc(100% + 2 * var(--table-cell-padding))"
+            style={{
+              aspectRatio: "4 / 3",
+              backgroundImage: `url(${tankIcon(tank.id)})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+            }}
+          />
 
-        {tank.testing && (
-          <ExperimentIcon style={{ width: "1em", height: "1em" }} />
-        )}
+          <Icon
+            width="1em"
+            height="1em"
+            style={{ minWidth: "1em", minHeight: "1em" }}
+          />
 
-        {unwrap(tank.name)}
+          {tank.testing && (
+            <ExperimentIcon style={{ width: "1em", height: "1em" }} />
+          )}
+
+          {unwrap(tank.name)}
+        </Flex>
       </LinkI18n>
     </StickyRowHeaderCell>
   );

packages/website/tsconfig.json

@@ -3,10 +3,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "types": [
-      "vite/client",
-      "vite-plugin-pwa/info.d.ts",
-      "vite-plugin-pwa/client.d.ts"
-    ]
+    "types": ["vite/client"]
   }
 }