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,8 +10,10 @@ export function PlaylistActions() {
   const wargaming = App.use((state) => state.logins.wargaming);
 
   return (
+    <>
       <Flex gap="2">
         <Button
+          size={{ initial: "1", xs: "2" }}
           variant="outline"
           color="red"
           onClick={() => {
@@ -24,6 +26,7 @@ export function PlaylistActions() {
         </Button>
 
         <Button
+          size={{ initial: "1", xs: "2" }}
           variant={wargaming ? "outline" : undefined}
           onClick={() => {
             Playlist.mutate((draft) => {
@@ -37,6 +40,7 @@ export function PlaylistActions() {
         {wargaming && (
           <>
             <Button
+              size={{ initial: "1", xs: "2" }}
               variant="outline"
               onClick={() => {
                 Playlist.mutate((draft) => {
@@ -54,7 +58,7 @@ export function PlaylistActions() {
 
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
-              <Button>
+                <Button size={{ initial: "1", xs: "2" }}>
                   {strings.website.tools.playlist.sort.button}
                   <CaretDownIcon />
                 </Button>
@@ -76,7 +80,8 @@ export function PlaylistActions() {
                   onClick={() => {
                     Playlist.mutate((draft) => {
                       draft.list = draft.list?.sort(
-                      (a, b) => (a.then?.battles ?? 0) - (b.then?.battles ?? 0)
+                        (a, b) =>
+                          (a.then?.battles ?? 0) - (b.then?.battles ?? 0)
                       );
                     });
                   }}
@@ -88,5 +93,13 @@ export function PlaylistActions() {
           </>
         )}
       </Flex>
+
+      {wargaming && (
+        <Flex gap="2" align="center">
+          <Spinner />
+          {strings.website.tools.playlist.tracking}
+        </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,17 +29,22 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
         underline="hover"
         wrap="nowrap"
         href={`/tanks/${tank.slug}`}
-        style={{
+        style={{ height: "100%" }}
-          paddingLeft: "var(--space-2)",
-          display: "flex",
-          alignItems: "center",
-          gap: "var(--space-1)",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-        }}
         size={{ initial: "1", sm: "2" }}
       >
+        <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",
+            }}
+          />
+
           <Icon
             width="1em"
             height="1em"
@@ -64,6 +56,7 @@ export function TankRowHeaderCell({ tank }: TankRowHeaderCellProps) {
           )}
 
           {unwrap(tank.name)}
+        </Flex>
       </LinkI18n>
     </StickyRowHeaderCell>
   );

packages/website/tsconfig.json

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