feat: spotify like table

packages/website/src/components/PlaylistTankEntry.tsx

@@ -1,18 +1,31 @@
-import type { TankDefinition } from "@blitzkit/core";
-import { DragHandleDots2Icon, MinusCircledIcon } from "@radix-ui/react-icons";
-import { Checkbox, Flex, IconButton, Table, Text } from "@radix-ui/themes";
-import { Playlist } from "../stores/playlist";
+import { MinusCircledIcon } from "@radix-ui/react-icons";
+import { Checkbox, IconButton, Table } from "@radix-ui/themes";
+import { useLocale } from "../hooks/useLocale";
+import { Playlist, type PlaylistEntry } from "../stores/playlist";
 import { TankRowHeaderCell } from "./TankRowHeaderCell";
 
-interface Props {
-  tank: TankDefinition;
-  checked: boolean;
+interface Props extends PlaylistEntry {
   index: number;
 }
 
-export function PlaylistTankEntry({ tank, checked, index }: Props) {
+export function PlaylistTankEntry({ tank, checked, last, index }: Props) {
+  const { locale, strings } = useLocale();
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const nowDays = Date.now() / (1000 * 60 * 60 * 24);
+  const lastDays = last ? last / (60 * 60 * 24) : undefined;
+
   return (
     <Table.Row>
+      <Table.Cell>{index + 1}</Table.Cell>
+
+      <TankRowHeaderCell tank={tank} />
+
+      <Table.Cell>
+        {lastDays
+          ? rtf.format(Math.floor(lastDays - nowDays), "day")
+          : strings.website.tools.playlist.table.never}
+      </Table.Cell>
+
       <Table.Cell
         onClick={() => {
           Playlist.mutate((draft) => {
@@ -23,41 +36,18 @@ export function PlaylistTankEntry({ tank, checked, index }: Props) {
         <Checkbox variant="classic" checked={checked} />
       </Table.Cell>
 
-      <TankRowHeaderCell tank={tank} />
-
       <Table.Cell>
-        <Flex
-          align="center"
-          height="calc(100% + 2 * var(--space-3) - 2px)"
-          gap="4"
-          pl="2"
-          my="-3"
-          mr="-3"
+        <IconButton
+          variant="ghost"
+          size="1"
+          onClick={() => {
+            Playlist.mutate((draft) => {
+              draft.list!.splice(index, 1);
+            });
+          }}
         >
-          <IconButton
-            variant="ghost"
-            size="1"
-            onClick={() => {
-              Playlist.mutate((draft) => {
-                draft.list!.splice(index, 1);
-              });
-            }}
-          >
-            <MinusCircledIcon />
-          </IconButton>
-
-          <Flex
-            width="5rem"
-            justify="center"
-            align="center"
-            height="100%"
-            style={{ cursor: "grab", backgroundColor: "var(--gray-1)" }}
-          >
-            <Text color="gray" trim="end">
-              <DragHandleDots2Icon />
-            </Text>
-          </Flex>
-        </Flex>
+          <MinusCircledIcon />
+        </IconButton>
       </Table.Cell>
     </Table.Row>
   );