reorganize components and add root import plugin

src/components/Conversations/Conversation.jsx

@@ -0,0 +1,58 @@
+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 useSWRMutation from 'swr/mutation';
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function Conversation({ id, parentMessageId, title = 'New conversation' }) {
+  const dispatch = useDispatch();
+  const conversationId = useSelector((state) => state.convo.conversationId);
+
+  const { trigger, isMutating } = useSWRMutation(
+    `http://localhost:3050/messages/${id}`,
+    fetcher,
+    {
+      onSuccess: function (res) {
+        dispatch(setMessages(res));
+      }
+    }
+  );
+
+  const onConvoClick = (id, parentMessageId) => {
+    dispatch(setConversation({ conversationId: id, parentMessageId }));
+    trigger();
+  };
+
+  return (
+    <a
+      onClick={() => onConvoClick(id, parentMessageId)}
+      className="animate-flash group relative flex cursor-pointer items-center gap-3 break-all rounded-md bg-gray-800 py-3 px-3 pr-14 hover:bg-gray-800"
+    >
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-4 w-4"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+      </svg>
+      <div className="relative max-h-5 flex-1 overflow-hidden text-ellipsis break-all">
+        {title}
+      </div>
+      <div className="visible absolute right-1 z-10 flex text-gray-300">
+        {id === conversationId && <RenameButton />}
+        {id === conversationId && <DeleteButton />}
+      </div>
+    </a>
+  );
+}

src/components/Conversations/DeleteButton.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import TrashIcon from '../svg/TrashIcon';
+
+export default function DeleteButton({ onClick, disabled }) {
+  return (
+    <button className="p-1 hover:text-white">
+      <TrashIcon />
+      {/* <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-4 w-4"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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
+          x1="14"
+          y1="11"
+          x2="14"
+          y2="17"
+        />
+      </svg> */}
+    </button>
+  );
+}

src/components/Conversations/RenameButton.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default function RenameButton({ onClick, disabled }) {
+  return (
+    <button className="p-1 hover:text-white">
+      <svg
+        stroke="currentColor"
+        fill="none"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-4 w-4"
+        height="1em"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M12 20h9" />
+        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+      </svg>
+    </button>
+  );
+}

src/components/Conversations/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Conversation from './Conversation';
+
+export default function Conversations({ conversations }) {
+  return (
+    <div className="-mr-2 flex-1 flex-col overflow-y-auto border-b border-white/20">
+      <div className="flex flex-col gap-2 text-sm text-gray-100">
+        {conversations &&
+          conversations.map((convo, i) => (
+            <Conversation
+              key={convo.conversationId}
+              id={convo.conversationId}
+              parentMessageId={convo.parentMessageId}
+              title={convo.title}
+            />
+          ))}
+        {conversations && conversations.length >= 12 && (
+          <button className="btn btn-dark btn-small m-auto mb-2 flex justify-center gap-2">
+            Show more
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}