feat: action buttons

packages/i18n/strings/en.json

@@ -860,12 +860,16 @@
 
     "tools": {
       "playlist": {
-        "clear": "Clear",
+        "reset": "Reset",
+        "shuffle": "Shuffle",
+        "sort": "Sort by",
+
         "table": {
           "index": "#",
           "never": "Never",
           "tank": "Tank",
-          "last_played": "Last played"
+          "last_played": "Last played",
+          "battles": "Battles"
         },
         "no_login_warning": "You are not logged in. BlitzKit will not keep track of your played tanks.",
         "generate": "Generate playlist",

packages/website/src/components/PlaylistActions.tsx

@@ -0,0 +1,33 @@
+import { CaretDownIcon } from "@radix-ui/react-icons";
+import { Button, Flex } from "@radix-ui/themes";
+import { useLocale } from "../hooks/useLocale";
+import { Playlist } from "../stores/playlist";
+
+export function PlaylistActions() {
+  const { strings } = useLocale();
+
+  return (
+    <Flex gap="2">
+      <Button
+        variant="outline"
+        color="red"
+        onClick={() => {
+          Playlist.mutate((draft) => {
+            draft.list = undefined;
+          });
+        }}
+      >
+        {strings.website.tools.playlist.reset}
+      </Button>
+
+      <Button variant="outline">
+        {strings.website.tools.playlist.shuffle}
+      </Button>
+
+      <Button>
+        {strings.website.tools.playlist.sort}
+        <CaretDownIcon />
+      </Button>
+    </Flex>
+  );
+}

packages/website/src/components/PlaylistOrder.tsx

@@ -1,11 +1,10 @@
-import { Box, Button, Flex } from "@radix-ui/themes";
+import { Box, Flex } from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
-import { Playlist } from "../stores/playlist";
 import { CurrentlyPlaying } from "./CurrentlyPlaying";
+import { PlaylistActions } from "./PlaylistActions";
 import { PlaylistTable } from "./PlaylistTable";
 
 export function PlaylistOrder() {
-  const { strings } = useLocale();
 
   return (
     <Flex
@@ -18,15 +17,7 @@ export function PlaylistOrder() {
     >
       <CurrentlyPlaying />
 
-      <Button
+      <PlaylistActions />
-        onClick={() => {
-          Playlist.mutate((draft) => {
-            draft.list = undefined;
-          });
-        }}
-      >
-        {strings.website.tools.playlist.clear}
-      </Button>
 
       <Box flexGrow="1" width="100%" position="relative">
         <PlaylistTable />

packages/website/src/components/PlaylistTable.tsx

@@ -39,6 +39,10 @@ export function PlaylistTable() {
             {strings.website.tools.playlist.table.last_played}
           </StickyColumnHeaderCell>
 
+          <StickyColumnHeaderCell width="1">
+            {strings.website.tools.playlist.table.battles}
+          </StickyColumnHeaderCell>
+
           <StickyColumnHeaderCell width="0" />
 
           <StickyColumnHeaderCell width="0" />

packages/website/src/components/PlaylistTankEntry.tsx

@@ -8,7 +8,13 @@ interface Props extends PlaylistEntry {
   index: number;
 }
 
-export function PlaylistTankEntry({ tank, checked, last, index }: Props) {
+export function PlaylistTankEntry({
+  tank,
+  checked,
+  last,
+  battles,
+  index,
+}: Props) {
   const { locale, strings } = useLocale();
   const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
   const nowDays = Date.now() / (1000 * 60 * 60 * 24);
@@ -26,6 +32,8 @@ export function PlaylistTankEntry({ tank, checked, last, index }: Props) {
           : strings.website.tools.playlist.table.never}
       </Table.Cell>
 
+      <Table.Cell>{battles}</Table.Cell>
+
       <Table.Cell
         onClick={() => {
           Playlist.mutate((draft) => {