groups: add highlighted tabs

.eslintrc

@@ -30,6 +30,7 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "jsx-a11y/no-autofocus": "off",
     "react/react-in-jsx-scope": "off",
     "import/no-unresolved": "error",
     "no-unused-vars": "off",

src/pages/popup/NewGroup.tsx

@@ -0,0 +1,59 @@
+import { getCurrentTabs } from '@src/utils/tabs';
+import toast from '@src/utils/toast';
+import React, {
+  useCallback, useEffect, useState,
+} from 'react';
+import {
+  FaCheckCircle,
+} from 'react-icons/fa';
+import { FaCircleXmark } from 'react-icons/fa6';
+
+type NewGroupProps = {
+  onSubmit: (data: {name: string; urls: string[]}) => void;
+  onCancel: () => void
+}
+
+export function NewGroup({ onSubmit, onCancel }: NewGroupProps) {
+  const [name, setName] = useState<string>('');
+  const [urls, setUrls] = useState<string[]>([]);
+
+  const getTabs = useCallback(async () => {
+    const tabs = await getCurrentTabs(true);
+    setUrls(tabs.map((item) => item.url!));
+  }, []);
+
+  const submit = () => {
+    if (!name || urls.length === 0) {
+      toast({ title: 'Invalid!', icon: 'error' });
+      return;
+    }
+    onSubmit({ name, urls });
+  };
+
+  const onUrlsChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newUrls = e.target.value.split(',').map((item) => item.trim());
+    setUrls(newUrls);
+  };
+
+  useEffect(() => {
+    getTabs();
+  }, [getTabs]);
+
+  return (
+    <div className="my-4">
+      <div className="flex flex-row items-center gap-4">
+        <input
+          autoFocus
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="flex flex-1 px-4 w-full text-sm border border-gray-400 rounded"
+          type="text"
+          placeholder="New group"
+        />
+        <FaCircleXmark className="hover:cursor-pointer text-gray-500" onClick={onCancel} title="Cancel" />
+        <FaCheckCircle className="hover:cursor-pointer text-blue-500" onClick={submit} title="Save" />
+      </div>
+      <textarea className="text-[10px] w-full h-[200px] p-2 border rounded-lg mt-3" value={urls.join(',\n')} onChange={onUrlsChange} />
+    </div>
+  );
+}

src/pages/popup/PopupGroups.tsx

@@ -7,19 +7,30 @@ import toast from '@src/utils/toast';
 import {
   useCallback, useEffect, useState,
 } from 'react';
-import { FaEdit, FaPlusCircle } from 'react-icons/fa';
+import {
+  FaEdit, FaPlusCircle,
+} from 'react-icons/fa';
 import Modal from 'react-modal';
 import GroupView from './GroupView';
+import { NewGroup } from './NewGroup';
 import useError from './useError';
 
 export default function PopupGroups({ isEditMode }:{isEditMode: boolean}): JSX.Element {
   const [groups, setGroups] = useState<Groups>({});
   const [filteredGroups, setFilteredGroups] = useState<Groups>();
   const [query, setQuery] = useState('');
   const [selectedGroup, setSelectGroup] = useState<string|null>(null);
+  const [showsNewGroup, setShowsNewGroup] = useState(false);
   const { error, onError } = useError();
   const filteredGroupNames = Object.keys(filteredGroups ?? {});
 
+  const showNewGroup = () => {
+    setShowsNewGroup(true);
+  };
+  const hideNewGroup = () => {
+    setShowsNewGroup(false);
+  };
+
   const getDatabase = useCallback(async () => {
     const storage = await getValue();
     const db: Groups = storage?.groups ?? [];
@@ -57,6 +68,18 @@ export default function PopupGroups({ isEditMode }:{isEditMode: boolean}): JSX.E
     setSelectGroup(null);
   };
 
+  const addGroup = async ({ name, urls }:{name: string, urls: string[]}) => {
+    const temp = { ...groups };
+    if (!temp[name]) {
+      temp[name] = urls;
+      setGroups(temp);
+      hideNewGroup();
+      toast({ title: 'Success!', text: `Group ${name.toUpperCase()} added`, icon: 'success' });
+    } else {
+      toast({ title: 'Error!', text: `${name.toUpperCase()} existed!`, icon: 'error' });
+    }
+  };
+
   const openEditPage = () => {
     createTab(chrome.runtime.getURL('groups/index.html'), true);
     setTimeout(() => {
@@ -130,10 +153,16 @@ export default function PopupGroups({ isEditMode }:{isEditMode: boolean}): JSX.E
         // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
         />
+        <FaPlusCircle className="hover:cursor-pointer" onClick={showNewGroup} />
         {!isEditMode ? (
           <FaEdit className="hover:cursor-pointer" onClick={openEditPage} />
         ) : null}
       </div>
+      {showsNewGroup
+        ? (
+          <NewGroup onSubmit={addGroup} onCancel={hideNewGroup} />
+        )
+        : null}
       <div className="flex flex-col mt-4">
         {filteredGroupNames.map((groupName) => (
           <GroupView