feat: better landing screen

packages/website/src/components/PlaylistOrder.tsx

@@ -1,16 +1,26 @@
-import { Checkbox, Flex, Table } from "@radix-ui/themes";
+import { Button, Checkbox, Flex, Table } from "@radix-ui/themes";
 import { useLocale } from "../hooks/useLocale";
 import { Playlist } from "../stores/playlist";
 import { TankRowHeaderCell } from "./TankRowHeaderCell";
 
 export function PlaylistOrder() {
-  const { unwrap, strings } = useLocale();
+  const { strings } = useLocale();
   const list = Playlist.use((state) => state.list);
 
   if (!list) return null;
 
   return (
-    <Flex justify="center" flexGrow="1" flexBasis="0">
+    <Flex direction="column" gap="4" align="center" flexGrow="1" flexBasis="0">
+      <Button
+        onClick={() => {
+          Playlist.mutate((draft) => {
+            draft.list = undefined;
+          });
+        }}
+      >
+        {strings.website.tools.playlist.clear}
+      </Button>
+
       <Table.Root variant="surface">
         <Table.Header>
           <Table.Row>