feat: v0.0.3

client/app/components/LastPlays.tsx

@@ -1,7 +1,8 @@
+import { useState } from "react"
 import { useQuery } from "@tanstack/react-query"
 import { timeSince } from "~/utils/utils"
 import ArtistLinks from "./ArtistLinks"
-import { getLastListens, type getItemsArgs } from "api/api"
+import { deleteListen, getLastListens, type getItemsArgs, type Listen } from "api/api"
 import { Link } from "react-router"
 
 interface Props {
@@ -11,47 +12,95 @@ interface Props {
     trackId?: number
     hideArtists?: boolean
 }
-  
-export default function LastPlays(props: Props) {
 
-    const { isPending, isError, data, error } = useQuery({ 
-        queryKey: ['last-listens', {limit: props.limit, period: 'all_time', artist_id: props.artistId, album_id: props.albumId, track_id: props.trackId}], 
+export default function LastPlays(props: Props) {
+    const { isPending, isError, data, error } = useQuery({
+        queryKey: ['last-listens', {
+            limit: props.limit,
+            period: 'all_time',
+            artist_id: props.artistId,
+            album_id: props.albumId,
+            track_id: props.trackId
+        }],
         queryFn: ({ queryKey }) => getLastListens(queryKey[1] as getItemsArgs),
     })
 
+    const [items, setItems] = useState<Listen[] | null>(null)
+
+    const handleDelete = async (listen: Listen) => {
+        if (!data) return 
+        try {
+            const res = await deleteListen(listen)
+            if (res.ok || (res.status >= 200 && res.status < 300)) {
+                setItems((prev) => (prev ?? data.items).filter((i) => i.time !== listen.time))
+            } else {
+                console.error("Failed to delete listen:", res.status)
+            }
+        } catch (err) {
+            console.error("Error deleting listen:", err)
+        }
+    }
+
     if (isPending) {
         return (
-            <div className="w-[400px] sm:w-[500px]">
+            <div className="w-[300px] sm:w-[500px]">
                 <h2>Last Played</h2>
                 <p>Loading...</p>
             </div>
         )
     }
     if (isError) {
-        return <p className="error">Error:{error.message}</p>
+        return <p className="error">Error: {error.message}</p>
     }
 
+    const listens = items ?? data.items
+
     let params = ''
     params += props.artistId ? `&artist_id=${props.artistId}` : ''
     params += props.albumId ? `&album_id=${props.albumId}` : ''
     params += props.trackId ? `&track_id=${props.trackId}` : ''
 
     return (
-        <div>
-            <h2 className="hover:underline"><Link to={`/listens?period=all_time${params}`}>Last Played</Link></h2>
-            <table>
+        <div className="text-sm sm:text-[16px]">
+            <h2 className="hover:underline">
+                <Link to={`/listens?period=all_time${params}`}>Last Played</Link>
+            </h2>
+            <table className="-ml-4">
                 <tbody>
-                {data.items.map((item) => (
-                    <tr key={`last_listen_${item.time}`}>
-                        <td className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0" title={new Date(item.time).toString()}>{timeSince(new Date(item.time))}</td>
-                        <td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
-                            {props.hideArtists ? <></> : <><ArtistLinks artists={item.track.artists} /> - </>}
-                            <Link className="hover:text-(--color-fg-secondary)" to={`/track/${item.track.id}`}>{item.track.title}</Link>
-                        </td>
-                    </tr>
-                ))}
+                    {listens.map((item) => (
+                        <tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]">
+                            <td className="w-[1px] pr-2 align-middle">
+                                <button
+                                    onClick={() => handleDelete(item)}
+                                    className="opacity-0 group-hover:opacity-100 transition-opacity text-(--color-fg-tertiary) hover:text-(--color-error)"
+                                    aria-label="Delete"
+                                >
+                                    ×
+                                </button>
+                            </td>
+                            <td
+                                className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0"
+                                title={new Date(item.time).toString()}
+                            >
+                                {timeSince(new Date(item.time))}
+                            </td>
+                            <td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
+                                {props.hideArtists ? null : (
+                                    <>
+                                        <ArtistLinks artists={item.track.artists} /> –{' '}
+                                    </>
+                                )}
+                                <Link
+                                    className="hover:text-[--color-fg-secondary]"
+                                    to={`/track/${item.track.id}`}
+                                >
+                                    {item.track.title}
+                                </Link>
+                            </td>
+                        </tr>
+                    ))}
                 </tbody>
             </table>
         </div>
     )
-}
+}