reorganize components and add root import plugin

src/components/Conversations/Conversation.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import RenameButton from './RenameButton';
 import DeleteButton from './DeleteButton';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation } from '../../store/convoSlice';
-import { setMessages } from '../../store/messageSlice';
+import { setConversation } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
 import useSWRMutation from 'swr/mutation';
 
 const fetcher = (url) => fetch(url).then((res) => res.json());

src/components/Conversations/DeleteButton.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import TrashIcon from '../svg/TrashIcon';
 
 export default function DeleteButton({ onClick, disabled }) {
   return (
     <button className="p-1 hover:text-white">
-      <svg
+      <TrashIcon />
+      {/* <svg
         stroke="currentColor"
         fill="none"
         strokeWidth="2"
@@ -29,7 +31,7 @@ export default function DeleteButton({ onClick, disabled }) {
           x2="14"
           y2="17"
         />
-      </svg>
+      </svg> */}
     </button>
   );
 }

src/components/Nav/NavLinks.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import NavLink from './NavLink';
-import TrashIcon from './svg/TrashIcon';
-import DarkModeIcon from './svg/DarkModeIcon';
-import LogOutIcon from './svg/LogOutIcon';
+import TrashIcon from '../svg/TrashIcon';
+import DarkModeIcon from '../svg/DarkModeIcon';
+import LogOutIcon from '../svg/LogOutIcon';
 
 export default function NavLinks() {
   return (

src/components/Nav/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import NewChat from './NewChat';
-import Conversations from './Conversations';
+import Conversations from '../Conversations';
 import NavLinks from './NavLinks';
 
 export default function Nav({ conversations }) {

src/components/main/TextChat.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import SubmitButton from './SubmitButton';
 import TextareaAutosize from 'react-textarea-autosize';
-import handleSubmit from '../utils/handleSubmit';
+import handleSubmit from '~/utils/handleSubmit';
 import { useSelector, useDispatch } from 'react-redux';
-import { setConversation } from '../../store/convoSlice';
-import { setMessages } from '../../store/messageSlice';
+import { setConversation } from '~/store/convoSlice';
+import { setMessages } from '~/store/messageSlice';
 
 export default function TextChat({ messages, reloadConvos }) {
   const [text, setText] = useState('');

src/components/svg/DarkModeIcon.jsx

@@ -14,7 +14,7 @@ export default function DarkModeIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
     </svg>
   );
 }

src/components/svg/LogOutIcon.jsx

@@ -14,14 +14,14 @@ export default function LogOutIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
-      <polyline points="16 17 21 12 16 7"></polyline>
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
       <line
         x1="21"
         y1="12"
         x2="9"
         y2="12"
-      ></line>
+      />
     </svg>
   );
 }

src/components/svg/TrashIcon.jsx

@@ -14,20 +14,20 @@ export default function TrashIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <polyline points="3 6 5 6 21 6"></polyline>
-      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
       <line
         x1="10"
         y1="11"
         x2="10"
         y2="17"
-      ></line>
+      />
       <line
         x1="14"
         y1="11"
         x2="14"
         y2="17"
-      ></line>
+      />
     </svg>
   );
 }