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 (
+
+
+
+
+
+
+
+ );
+}
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 (
-
+
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}
+
+ {strings.website.tools.playlist.table.battles}
+
+
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}
+ {battles}
+
{
Playlist.mutate((draft) => {