From 3b3529c69fbf2eab46bf9d8c70c4dccde6214c91 Mon Sep 17 00:00:00 2001
From: Artur Lozovski <arccik@gmail.com>
Date: Sat, 16 Dec 2023 19:25:27 +0000
Subject: [PATCH] checking multi-select

---
 .../webui/src/components/TorrentsList.tsx        | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/crates/librqbit/webui/src/components/TorrentsList.tsx b/crates/librqbit/webui/src/components/TorrentsList.tsx
index 600c5819..2f604fc1 100644
--- a/crates/librqbit/webui/src/components/TorrentsList.tsx
+++ b/crates/librqbit/webui/src/components/TorrentsList.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { TorrentId } from "../api-types";
 import { Spinner } from "./Spinner";
 import { Torrent } from "./Torrent";
@@ -6,6 +7,14 @@ export const TorrentsList = (props: {
   torrents: Array<TorrentId> | null;
   loading: boolean;
 }) => {
+  const [selectedRows, setSelectedRows] = useState<TorrentId[]>([]);
+  const handleTorrentClick = (torrent: TorrentId) => {
+    if (selectedRows.includes(torrent)) {
+      setSelectedRows((prev) => prev.filter((t) => t !== torrent));
+    } else {
+      setSelectedRows((prev) => [...prev, torrent]);
+    }
+  };
   return (
     <div className="flex flex-col gap-2 mx-2 pb-3 sm:px-7">
       {props.torrents === null ? (
@@ -16,9 +25,12 @@ export const TorrentsList = (props: {
         <p className="text-center">No existing torrents found.</p>
       ) : (
         props.torrents.map((t: TorrentId) => (
-          <>
+          <div
+            className={selectedRows.includes(t) ? "bg-red-300" : "bg-none"}
+            onClick={() => handleTorrentClick(t)}
+          >
             <Torrent id={t.id} key={t.id} torrent={t} />
-          </>
+          </div>
         ))
       )}
     </div>