move group edit icon to groups container

paulcoding810 · Aug 25, 2024 · ccee5c4 · ccee5c4
1 parent a670de9
commit ccee5c4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/pages/popup/GroupView.tsx b/src/pages/popup/GroupView.tsx
@@ -1,8 +1,8 @@
 import { isDev } from '@src/utils/env';
-import { createTab, createTabs } from '@src/utils/tabs';
+import { createTabs } from '@src/utils/tabs';
 import { useState } from 'react';
 import {
-  FaCaretDown, FaCaretUp, FaEdit,
+  FaCaretDown, FaCaretUp,
   FaTrash,
 } from 'react-icons/fa';
 import GroupEdit from './GroupEdit';
@@ -29,10 +29,6 @@ export default function GroupView({
   const onCollapse = () => {
     setExpanded(false);
   };
-  const openEditPage = () => {
-    createTab(chrome.runtime.getURL('groups/index.html'), true);
-  };
-
   const updateGroup = (data: string[]) => {
     setUrls(data);
     onUpdate(data);
@@ -69,9 +65,6 @@ export default function GroupView({
           <FaCaretDown className="hover:cursor-pointer" onClick={onExpand} />
         )}
         <div className="flex-1" />
-        {!isEditMode ? (
-          <FaEdit onClick={openEditPage} />
-        ) : null}
         {onRemove ? (
           <FaTrash
             className="text-red-500 hover:cursor-pointer"

diff --git a/src/pages/popup/PopupGroups.tsx b/src/pages/popup/PopupGroups.tsx
@@ -2,11 +2,12 @@ import emptyIcon from '@assets/img/empty.svg';
 import loadingIcon from '@assets/img/loading.svg';
 import { Groups } from '@src/types';
 import { getValue, setValue } from '@src/utils/storage';
+import { createTab } from '@src/utils/tabs';
 import toast from '@src/utils/toast';
 import {
   useCallback, useEffect, useState,
 } from 'react';
-import { FaPlusCircle } from 'react-icons/fa';
+import { FaEdit, FaPlusCircle } from 'react-icons/fa';
 import Modal from 'react-modal';
 import GroupView from './GroupView';
 import useError from './useError';
@@ -65,6 +66,10 @@ export default function PopupGroups({ isEditMode }:{isEditMode: boolean}): JSX.E
     }
   };
 
+  const openEditPage = () => {
+    createTab(chrome.runtime.getURL('groups/index.html'), true);
+  };
+
   const closeModal = () => {
     setSelectGroup(null);
   };
@@ -158,6 +163,9 @@ export default function PopupGroups({ isEditMode }:{isEditMode: boolean}): JSX.E
           autoFocus
         />
         <FaPlusCircle onClick={() => { setNewGroup('New group'); }} />
+        {!isEditMode ? (
+          <FaEdit onClick={openEditPage} />
+        ) : null}
       </div>
       {renderNewGroup()}
       <div className="flex flex-col mt-4">