From 222b690fbad9a2800a2783730ed76a0d31833010 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 14 Oct 2025 12:19:28 -0500
Subject: [PATCH] feat: action buttons

---
 packages/i18n/strings/en.json                 |  8 +++--
 .../src/components/PlaylistActions.tsx        | 33 +++++++++++++++++++
 .../website/src/components/PlaylistOrder.tsx  | 15 ++-------
 .../website/src/components/PlaylistTable.tsx  |  4 +++
 .../src/components/PlaylistTankEntry.tsx      | 10 +++++-
 5 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 packages/website/src/components/PlaylistActions.tsx

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 1b7b3c9d3..35dce2336 100644
--- a/packages/i18n/strings/en.json
+++ b/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",
diff --git a/packages/website/src/components/PlaylistActions.tsx b/packages/website/src/components/PlaylistActions.tsx
new file mode 100644
index 000000000..12fc319e9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/website/src/components/PlaylistOrder.tsx b/packages/website/src/components/PlaylistOrder.tsx
index 514e9d206..d90448881 100644
--- a/packages/website/src/components/PlaylistOrder.tsx
+++ b/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
-        onClick={() => {
-          Playlist.mutate((draft) => {
-            draft.list = undefined;
-          });
-        }}
-      >
-        {strings.website.tools.playlist.clear}
-      </Button>
+      <PlaylistActions />
 
       <Box flexGrow="1" width="100%" position="relative">
         <PlaylistTable />
diff --git a/packages/website/src/components/PlaylistTable.tsx b/packages/website/src/components/PlaylistTable.tsx
index 92ed64efb..dcd91cd63 100644
--- a/packages/website/src/components/PlaylistTable.tsx
+++ b/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" />
diff --git a/packages/website/src/components/PlaylistTankEntry.tsx b/packages/website/src/components/PlaylistTankEntry.tsx
index 923adba00..ff59e54a0 100644
--- a/packages/website/src/components/PlaylistTankEntry.tsx
+++ b/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) => {