Refactor component imports to use "type" for better type checking

Author: Royal-lobster

src/components/QuickMenu/index.tsx

@@ -81,7 +81,11 @@ export const QuickMenu = ({ selectedText, setMenuOpen }: QuickMenuProps) => {
               </DropdownMenu.Label>
             )}
             {noCategoryPrompts.map((item) => (
-              <RecursiveItem item={item} handleGenerate={handleGenerate} />
+              <RecursiveItem
+                item={item}
+                key={item.id}
+                handleGenerate={handleGenerate}
+              />
             ))}
           </DropdownMenu.Group>
         </DropdownMenu.Content>

src/components/Settings/Elements/FieldWrapper.tsx

@@ -22,9 +22,9 @@ const FieldWrapper = ({
       onSubmit={onSubmit}
     >
       <div>
-        <label className="cdx-text-xl dark:cdx-text-neutral-200 cdx-text-neutral-700">
+        <div className="cdx-text-xl dark:cdx-text-neutral-200 cdx-text-neutral-700">
           {title}
-        </label>
+        </div>
         {description && (
           <p className="cdx-text-sm cdx-mt-2 cdx-text-neutral-400">
             {description}

src/components/Settings/Elements/QuickMenuCustomize.tsx

@@ -1,12 +1,12 @@
 import {
   FolderTreeItemWrapper,
   SortableTree,
-  TreeItemComponentProps,
-  TreeItems,
+  type TreeItemComponentProps,
+  type TreeItems,
 } from 'dnd-kit-sortable-tree'
 import React from 'react'
 import { IoMove } from 'react-icons/io5'
-import { Prompt, usePrompts } from '../../../hooks/usePrompts'
+import { type Prompt, usePrompts } from '../../../hooks/usePrompts'
 import { AddItemButton } from './AddItemButton'
 import { DeletePromptButton } from './DeletePromptButton'
 import { EditPromptButton } from './EditPromptButton'

src/components/Settings/Sections/GeneralSettings.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 import SectionHeading from '../Elements/SectionHeading'
 import FieldWrapper from '../Elements/FieldWrapper'
 import { useSettings } from '../../../hooks/useSettings'

src/components/Settings/Sections/QuickMenuSettings.tsx

@@ -1,5 +1,5 @@
 import * as Switch from '@radix-ui/react-switch'
-import React from 'react'
+import type React from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { useSettings } from '../../../hooks/useSettings'
 import FieldWrapper from '../Elements/FieldWrapper'
@@ -41,7 +41,7 @@ const QuickMenuSettings = () => {
       <SectionHeading title="Quick Menu" />
 
       {/* =========================
-        Enable Visible Quick Menu 
+        Enable Visible Quick Menu
       ===========================*/}
       <FieldWrapper
         title="Enable Quick Menu"

src/components/Sidebar/chat/ChatList.tsx

@@ -24,6 +24,7 @@ const ChatList = ({
 }: ChatListProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This is intentional, we need this for scroll to bottom
   useEffect(() => {
     if (containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight

src/components/Sidebar/chat/FilePreviewBar.tsx

@@ -1,5 +1,5 @@
 import { RiCloseLine } from 'react-icons/ri'
-import { MessageFile } from '../../../hooks/useMessageDraft'
+import type { MessageFile } from '../../../hooks/useMessageDraft'
 
 interface FilePreviewBarProps {
   files: MessageFile[]

src/components/Sidebar/chat/InsertPromptToDraftButton.tsx

@@ -53,7 +53,11 @@ const InsertPromptToDraftButton = ({
               </DropdownMenu.Label>
             )}
             {noCategoryPrompts.map((item) => (
-              <RecursiveItem item={item} handleGenerate={setMessageDraftText} />
+              <RecursiveItem
+                item={item}
+                key={item.id}
+                handleGenerate={setMessageDraftText}
+              />
             ))}
           </DropdownMenu.Group>
         </DropdownMenu.Content>

src/components/Sidebar/chat/markdown-components/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import { CodeProps } from 'react-markdown/lib/ast-to-react'
+import type { CodeProps } from 'react-markdown/lib/ast-to-react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import {
   atomDark,
@@ -8,9 +8,8 @@ import {
 const isDarkMode = () => {
   if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
     return true
-  } else {
-    return false
   }
+  return false
 }
 
 const CodeBlock = (props: CodeProps) => {

src/components/Sidebar/chat/markdown-components/Table.tsx

@@ -1,4 +1,4 @@
-import { ReactMarkdownProps } from 'react-markdown/lib/ast-to-react'
+import type { ReactMarkdownProps } from 'react-markdown/lib/ast-to-react'
 
 type TableType =
   | keyof JSX.IntrinsicElements