From f8f0a24b99a2928cdd87f42122a73f439cfa8abb Mon Sep 17 00:00:00 2001
From: Harry Yu <yupakhei456@gmail.com>
Date: Fri, 26 Apr 2024 04:55:44 -0400
Subject: [PATCH] add index to each items to avoid command selecting more than
 one elements with the same name

---
 src/components/BookmarkList.tsx   |  3 ++-
 src/components/CommandActions.tsx | 34 +++++++++++++++++--------------
 src/components/ListItem.tsx       | 13 +++++++++---
 src/components/SearchListItem.tsx |  1 +
 src/components/SearchingList.tsx  |  8 +++++---
 src/components/TabList.tsx        |  4 ++--
 src/components/ThemeListItem.tsx  |  1 +
 7 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx
index 3911fc9..a557525 100644
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -7,13 +7,14 @@ const BookmarkList = ({
 }) => {
     return (
         <>
-            {bookmarkData.map((bookmark) => {
+            {bookmarkData.map((bookmark, index) => {
                 return (
                     <ListItem
                         key={`bookmark-${bookmark.id}`}
                         type="bookmark"
                         item={bookmark}
                         keywords={[bookmark.url ?? "", "bookmarks"]}
+                        index={index}
                     />
                 );
             })}
diff --git a/src/components/CommandActions.tsx b/src/components/CommandActions.tsx
index c159ee1..f7bbcc3 100644
--- a/src/components/CommandActions.tsx
+++ b/src/components/CommandActions.tsx
@@ -1,5 +1,5 @@
 import { Button } from "./ui/button";
-import { MdDelete } from "react-icons/md";
+import { MdDelete, MdFolderCopy } from "react-icons/md";
 import {
     Command,
     CommandInput,
@@ -87,22 +87,26 @@ const CommandActions = ({
                                     }}
                                     className="flex items-center gap-2"
                                 >
-                                    <MdDelete className="size-4" />
+                                    <MdDelete className="size-4 p-0" />
                                     Close Tab
                                 </CommandItem>
-                                {/* TODO: Duplicate item name */}
-                                {/* <CommandItem
-                  onSelect={() => {
-                    chrome.tabs
-                      .duplicate(target.id ?? chrome.tabs.TAB_ID_NONE)
-                      .catch((error) => {
-                        console.log(error);
-                      });
-                    window.close();
-                  }}
-                >
-                  Copy Tab
-                </CommandItem> */}
+                                <CommandItem
+                                    onSelect={() => {
+                                        chrome.tabs
+                                            .duplicate(
+                                                target.id ??
+                                                    chrome.tabs.TAB_ID_NONE
+                                            )
+                                            .catch((error) => {
+                                                console.log(error);
+                                            });
+                                        window.close();
+                                    }}
+                                    className="flex items-center gap-2"
+                                >
+                                    <MdFolderCopy className="size-4 p-0" />
+                                    Copy Tab
+                                </CommandItem>
                             </>
                         ) : target && itemType === "bookmark" ? (
                             <>
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index 468296b..0ec20fd 100644
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -29,9 +29,16 @@ interface CmdItem {
 
 type ListItemProps = (BookmarkItem | TabItem | CmdItem) & {
     forceMount?: boolean;
+    index: number;
 };
 
-const ListItem = ({ type, item, forceMount, keywords }: ListItemProps) => {
+const ListItem = ({
+    type,
+    item,
+    forceMount,
+    keywords,
+    index,
+}: ListItemProps) => {
     const onSelectHandler = () => {
         switch (type) {
             case "tab":
@@ -66,9 +73,9 @@ const ListItem = ({ type, item, forceMount, keywords }: ListItemProps) => {
             className="flex w-full items-center justify-between"
             onSelect={onSelectHandler}
             value={
-                type === "command"
+                (type === "command"
                     ? `command-${item.name}`
-                    : `${type}-${item.title}`
+                    : `${type}-${item.title}`) + `-${index}`
             }
             forceMount={forceMount}
             keywords={keywords}
diff --git a/src/components/SearchListItem.tsx b/src/components/SearchListItem.tsx
index 3dc58da..bb1e913 100644
--- a/src/components/SearchListItem.tsx
+++ b/src/components/SearchListItem.tsx
@@ -25,6 +25,7 @@ const SearchListItem = ({ searchText }: SearchListItemProps) => {
                 },
             }}
             keywords={[]}
+            index={0}
         />
     );
 };
diff --git a/src/components/SearchingList.tsx b/src/components/SearchingList.tsx
index 980b1e6..645b772 100644
--- a/src/components/SearchingList.tsx
+++ b/src/components/SearchingList.tsx
@@ -58,9 +58,11 @@ const SearchingList = () => {
         commandList?.scrollTo(0, 0);
     }, [searchText]);
 
-    const item = currentItem.indexOf("-");
-    const itemType = currentItem.slice(0, item) as ItemType;
-    const itemValue = currentItem.slice(item + 1);
+    const prefixIndex = currentItem.indexOf("-");
+    const suffixIndex = currentItem.lastIndexOf("-");
+    const itemType = currentItem.slice(0, prefixIndex) as ItemType;
+    const itemValue = currentItem.slice(prefixIndex + 1, suffixIndex);
+    // const itemIdentifier = currentItem.slice(suffixIndex + 1);
 
     return (
         <Command
diff --git a/src/components/TabList.tsx b/src/components/TabList.tsx
index de6c7c6..0dbdfeb 100644
--- a/src/components/TabList.tsx
+++ b/src/components/TabList.tsx
@@ -1,16 +1,16 @@
-import useTabs from "@/hooks/useTabs";
 import ListItem from "./ListItem";
 
 const TabList = ({ tabData }: { tabData: chrome.tabs.Tab[] }) => {
     return (
         <>
-            {tabData.map((tab) => {
+            {tabData.map((tab, index) => {
                 return (
                     <ListItem
                         key={`tab-${tab.id}`}
                         type="tab"
                         item={tab}
                         keywords={[tab.url ?? "", "tabs"]}
+                        index={index}
                     />
                 );
             })}
diff --git a/src/components/ThemeListItem.tsx b/src/components/ThemeListItem.tsx
index ba1c618..d6875b6 100644
--- a/src/components/ThemeListItem.tsx
+++ b/src/components/ThemeListItem.tsx
@@ -26,6 +26,7 @@ const ThemeListItem = ({ targetTheme }: { targetTheme: Theme }) => {
                 },
             }}
             keywords={[`${targetTheme} mode`]}
+            index={targetTheme.length}
         />
     );
 };