feat: add in prettier and format code for consistency (#168)

components/Sidebar/Folder.tsx

@@ -1,7 +1,14 @@
-import { ChatFolder, Conversation, KeyValuePair } from "@/types";
-import { IconCaretDown, IconCaretRight, IconCheck, IconPencil, IconTrash, IconX } from "@tabler/icons-react";
-import { FC, KeyboardEvent, useEffect, useState } from "react";
-import { ConversationComponent } from "./Conversation";
+import { ChatFolder, Conversation, KeyValuePair } from '@/types';
+import {
+  IconCaretDown,
+  IconCaretRight,
+  IconCheck,
+  IconPencil,
+  IconTrash,
+  IconX,
+} from '@tabler/icons-react';
+import { FC, KeyboardEvent, useEffect, useState } from 'react';
+import { ConversationComponent } from './Conversation';
 
 interface Props {
   searchTerm: string;
@@ -14,7 +21,10 @@ interface Props {
   loading: boolean;
   onSelectConversation: (conversation: Conversation) => void;
   onDeleteConversation: (conversation: Conversation) => void;
-  onUpdateConversation: (conversation: Conversation, data: KeyValuePair) => void;
+  onUpdateConversation: (
+    conversation: Conversation,
+    data: KeyValuePair,
+  ) => void;
 }
 
 export const Folder: FC<Props> = ({
@@ -28,15 +38,15 @@ export const Folder: FC<Props> = ({
   loading,
   onSelectConversation,
   onDeleteConversation,
-  onUpdateConversation
+  onUpdateConversation,
 }) => {
   const [isDeleting, setIsDeleting] = useState(false);
   const [isRenaming, setIsRenaming] = useState(false);
-  const [renameValue, setRenameValue] = useState("");
+  const [renameValue, setRenameValue] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
   const handleEnterDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       e.preventDefault();
       handleRename();
     }
@@ -44,7 +54,7 @@ export const Folder: FC<Props> = ({
 
   const handleRename = () => {
     onUpdateFolder(currentFolder.id, renameValue);
-    setRenameValue("");
+    setRenameValue('');
     setIsRenaming(false);
   };
 
@@ -52,10 +62,10 @@ export const Folder: FC<Props> = ({
     if (e.dataTransfer) {
       setIsOpen(true);
 
-      const conversation = JSON.parse(e.dataTransfer.getData("conversation"));
-      onUpdateConversation(conversation, { key: "folderId", value: folder.id });
+      const conversation = JSON.parse(e.dataTransfer.getData('conversation'));
+      onUpdateConversation(conversation, { key: 'folderId', value: folder.id });
 
-      e.target.style.background = "none";
+      e.target.style.background = 'none';
     }
   };
 
@@ -64,11 +74,11 @@ export const Folder: FC<Props> = ({
   };
 
   const highlightDrop = (e: any) => {
-    e.target.style.background = "#343541";
+    e.target.style.background = '#343541';
   };
 
   const removeHighlight = (e: any) => {
-    e.target.style.background = "none";
+    e.target.style.background = 'none';
   };
 
   useEffect(() => {
@@ -90,7 +100,7 @@ export const Folder: FC<Props> = ({
   return (
     <div>
       <div
-        className={`mb-1 flex gap-3 items-center px-3 py-2 text-sm rounded-lg hover:bg-[#343541]/90 transition-colors duration-200 cursor-pointer`}
+        className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
         onClick={() => setIsOpen(!isOpen)}
         onDrop={(e) => handleDrop(e, currentFolder)}
         onDragOver={allowDrop}
@@ -101,7 +111,7 @@ export const Folder: FC<Props> = ({
 
         {isRenaming ? (
           <input
-            className="flex-1 bg-transparent border-b border-neutral-400 focus:border-neutral-100 text-left overflow-hidden overflow-ellipsis pr-1 outline-none text-white"
+            className="flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
             type="text"
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
@@ -109,11 +119,13 @@ export const Folder: FC<Props> = ({
             autoFocus
           />
         ) : (
-          <div className="overflow-hidden whitespace-nowrap overflow-ellipsis pr-1 flex-1 text-left">{currentFolder.name}</div>
+          <div className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap pr-1 text-left">
+            {currentFolder.name}
+          </div>
         )}
 
         {(isDeleting || isRenaming) && (
-          <div className="flex gap-1 -ml-2">
+          <div className="-ml-2 flex gap-1">
             <IconCheck
               className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
               size={16}
@@ -144,7 +156,7 @@ export const Folder: FC<Props> = ({
         )}
 
         {!isDeleting && !isRenaming && (
-          <div className="flex gap-1 ml-2">
+          <div className="ml-2 flex gap-1">
             <IconPencil
               className="min-w-[20px] text-neutral-400 hover:text-neutral-100"
               size={18}
@@ -171,10 +183,7 @@ export const Folder: FC<Props> = ({
         ? conversations.map((conversation, index) => {
             if (conversation.folderId === currentFolder.id) {
               return (
-                <div
-                  key={index}
-                  className="ml-5 pl-2 border-l gap-2 pt-2"
-                >
+                <div key={index} className="ml-5 gap-2 border-l pl-2 pt-2">
                   <ConversationComponent
                     selectedConversation={selectedConversation}
                     conversation={conversation}