From 649d0d79eba2cf3778e022555218219ab44a78a4 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Thu, 23 May 2024 16:43:01 -0700
Subject: [PATCH] [FEAT] Thread bulk edit UX improvements (#1520)

* update thread bulk edit ux to hold cmd/ctrl to appear + rename default new thread to avoid confusion

* revert new thread defualt name change

* unset undelete threads

* comment

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>
---
 .../ActiveWorkspaces/ThreadContainer/index.jsx   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
index f3c0ac2a..d1c0ba8c 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/ThreadContainer/index.jsx
@@ -22,11 +22,17 @@ export default function ThreadContainer({ workspace }) {
     fetchThreads();
   }, [workspace.slug]);
 
-  // Enable toggling of meta-key (ctrl on win and cmd/fn on others)
+  // Enable toggling of bulk-deletion by holding meta-key (ctrl on win and cmd/fn on others)
   useEffect(() => {
     const handleKeyDown = (event) => {
       if (["Control", "Meta"].includes(event.key)) {
-        setCtrlPressed((prev) => !prev);
+        setCtrlPressed(true);
+      }
+    };
+
+    const handleKeyUp = (event) => {
+      if (["Control", "Meta"].includes(event.key)) {
+        setCtrlPressed(false);
         // when toggling, unset bulk progress so
         // previously marked threads that were never deleted
         // come back to life.
@@ -37,9 +43,13 @@ export default function ThreadContainer({ workspace }) {
         );
       }
     };
+
     window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
     };
   }, []);
 
@@ -56,7 +66,6 @@ export default function ThreadContainer({ workspace }) {
     const slugs = threads.filter((t) => t.deleted === true).map((t) => t.slug);
     await Workspace.threads.deleteBulk(workspace.slug, slugs);
     setThreads((prev) => prev.filter((t) => !t.deleted));
-    setCtrlPressed(false);
   };
 
   function removeThread(threadId) {
@@ -89,6 +98,7 @@ export default function ThreadContainer({ workspace }) {
   )
     ? threads.findIndex((thread) => thread?.slug === threadSlug) + 1
     : 0;
+
   return (
     <div className="flex flex-col" role="list" aria-label="Threads">
       <ThreadItem