feat: code split icons, suspense error boundaries

package.json

@@ -57,6 +57,7 @@
 		"pdfjs-dist": "^4.0.379",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-error-boundary": "^4.0.13",
 		"react-helmet-async": "^2.0.4",
 		"react-i18next": "^14.1.0",
 		"react-icons": "^5.0.1",

src/components/chats/conversation/input.tsx

@@ -2,7 +2,7 @@ import { memo, useState, useCallback, useMemo, useRef, useEffect } from "react"
 import { withReact, ReactEditor, Slate, Editable } from "slate-react"
 import { withHistory, type HistoryEditor } from "slate-history"
 import { createEditor, Editor, type BaseEditor, Transforms } from "slate"
-import Icon from "@/components/icon"
+import { PlusCircle, XCircle } from "lucide-react"
 import worker from "@/lib/worker"
 import { type ChatConversation } from "@filen/sdk/dist/types/api/v3/chat/conversations"
 import { useChatsStore } from "@/stores/chats.store"
@@ -360,8 +360,7 @@ export const Input = memo(({ conversation }: { conversation: ChatConversation })
 			id="chat-input-container"
 		>
 			<div className="absolute z-50">
-				<Icon
-					name="plus-circle"
+				<PlusCircle
 					size={24}
 					className="cursor-pointer mt-[12px] ml-[10px] text-muted-foreground hover:text-foreground"
 				/>
@@ -380,8 +379,7 @@ export const Input = memo(({ conversation }: { conversation: ChatConversation })
 								{replyMessage.senderNickName.length > 0 ? replyMessage.senderNickName : replyMessage.senderEmail}
 							</p>
 						</div>
-						<Icon
-							name="x-circle"
+						<XCircle
 							size={16}
 							className="cursor-pointer"
 							onClick={() => setReplyMessage(null)}

src/components/chats/conversation/markAsRead.tsx

@@ -3,7 +3,7 @@ import { type ChatConversation } from "@filen/sdk/dist/types/api/v3/chat/convers
 import { type UseQueryResult } from "@tanstack/react-query"
 import worker from "@/lib/worker"
 import useElementDimensions from "@/hooks/useElementDimensions"
-import Icon from "@/components/icon"
+import { Loader, Check } from "lucide-react"
 import { type ChatLastFocusValues } from "@filen/sdk/dist/types/api/v3/chat/lastFocusUpdate"
 import { type ChatMessage } from "@filen/sdk/dist/types/api/v3/chat/messages"
 import useSDKConfig from "@/hooks/useSDKConfig"
@@ -109,18 +109,14 @@ export const MarkAsRead = memo(
 				</p>
 				<p className="line-clamp-1 text-ellipsis break-all flex flex-row items-center gap-2 shrink-0">
 					{markingAsRead ? (
-						<Icon
-							name="loader"
+						<Loader
 							className="animate-spin-medium"
 							size={18}
 						/>
 					) : (
 						<>
 							{t("chats.markAsRead")}
-							<Icon
-								name="check"
-								size={18}
-							/>
+							<Check size={18} />
 						</>
 					)}
 				</p>

src/components/chats/conversation/message/contextMenu.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/context-menu"
 import { useTranslation } from "react-i18next"
 import { type ChatMessage } from "@filen/sdk/dist/types/api/v3/chat/messages"
-import Icon from "@/components/icon"
+import { Reply, Copy, Text, Delete } from "lucide-react"
 import useSDKConfig from "@/hooks/useSDKConfig"
 import worker from "@/lib/worker"
 import useLoadingToast from "@/hooks/useLoadingToast"
@@ -131,20 +131,14 @@ export const ContextMenu = memo(({ message, children }: { message: ChatMessage;
 					onClick={reply}
 					className="cursor-pointer gap-3"
 				>
-					<Icon
-						name="reply"
-						size={iconSize}
-					/>
+					<Reply size={iconSize} />
 					{t("chats.message.reply")}
 				</ContextMenuItem>
 				<ContextMenuItem
 					onClick={copyText}
 					className="cursor-pointer gap-3"
 				>
-					<Icon
-						name="copy"
-						size={iconSize}
-					/>
+					<Copy size={iconSize} />
 					{t("chats.message.copyText")}
 				</ContextMenuItem>
 				{userId === message.senderId && (
@@ -154,20 +148,14 @@ export const ContextMenu = memo(({ message, children }: { message: ChatMessage;
 							onClick={edit}
 							className="cursor-pointer gap-3"
 						>
-							<Icon
-								name="text"
-								size={iconSize}
-							/>
+							<Text size={iconSize} />
 							{t("chats.message.edit")}
 						</ContextMenuItem>
 						<ContextMenuItem
 							onClick={deleteMessage}
 							className="cursor-pointer gap-3 text-red-500"
 						>
-							<Icon
-								name="delete"
-								size={iconSize}
-							/>
+							<Delete size={iconSize} />
 							{t("chats.message.delete")}
 						</ContextMenuItem>
 					</>
@@ -177,10 +165,7 @@ export const ContextMenu = memo(({ message, children }: { message: ChatMessage;
 					onClick={copyId}
 					className="cursor-pointer gap-3"
 				>
-					<Icon
-						name="copy"
-						size={iconSize}
-					/>
+					<Copy size={iconSize} />
 					{t("chats.message.copyId")}
 				</ContextMenuItem>
 			</ContextMenuContent>

src/components/chats/conversation/topBar.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo, useCallback } from "react"
 import { type ChatConversation } from "@filen/sdk/dist/types/api/v3/chat/conversations"
 import useSDKConfig from "@/hooks/useSDKConfig"
 import Avatar from "@/components/avatar"
-import Icon from "@/components/icon"
+import { ChevronRight, ChevronLeft } from "lucide-react"
 import { TOOLTIP_POPUP_DELAY } from "@/constants"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { useTranslation } from "react-i18next"
@@ -47,7 +47,7 @@ export const TopBar = memo(({ conversation }: { conversation: ChatConversation }
 							className="hover:bg-secondary rounded-lg p-1 cursor-pointer"
 							onClick={toggleParticipantsContainer}
 						>
-							<Icon name={conversationParticipantsContainerOpen ? "chevron-right" : "chevron-left"} />
+							{conversationParticipantsContainerOpen ? <ChevronRight /> : <ChevronLeft />}
 						</div>
 					</TooltipTrigger>
 					<TooltipContent side="left">

src/components/chats/conversation/typing.tsx

@@ -3,7 +3,7 @@ import { type ChatConversation } from "@filen/sdk/dist/types/api/v3/chat/convers
 import { useTranslation } from "react-i18next"
 import { type SocketEvent } from "@filen/sdk"
 import socket from "@/lib/socket"
-import Icon from "@/components/icon"
+import { MoreHorizontal } from "lucide-react"
 
 export type TypingUser = {
 	id: number
@@ -20,10 +20,7 @@ export const Typing = memo(({ conversation }: { conversation: ChatConversation }
 	const typing = useMemo((): React.ReactNode => {
 		return (
 			<>
-				<Icon
-					name="more-horizontal"
-					className="animate-pulse"
-				/>
+				<MoreHorizontal className="animate-pulse" />
 				<p>{`${typingUsers.map(user => (user.nickName.length > 0 ? user.nickName : user.email)).join(",")} `}</p>
 				<p className="text-muted-foreground">{`${t(typingUsers.length <= 1 ? "chats.input.typing" : "chats.input.typingMultiple")}`}</p>
 			</>

src/components/chats/participants/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useRef } from "react"
 import { type ChatConversation } from "@filen/sdk/dist/types/api/v3/chat/conversations"
-import Icon from "@/components/icon"
+import { Plus, Crown } from "lucide-react"
 import { TOOLTIP_POPUP_DELAY } from "@/constants"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { useTranslation } from "react-i18next"
@@ -35,7 +35,7 @@ export const Participants = memo(({ conversation }: { conversation: ChatConversa
 								className="hover:bg-secondary rounded-lg p-1 cursor-pointer"
 								onClick={() => {}}
 							>
-								<Icon name="plus" />
+								<Plus />
 							</div>
 						</TooltipTrigger>
 						<TooltipContent side="left">
@@ -80,8 +80,7 @@ export const Participants = memo(({ conversation }: { conversation: ChatConversa
 											<div className="flex flex-row items-center gap-3">
 												<p className="line-clamp-1 text-ellipsis break-all">{participant.email}</p>
 												{participant.userId === conversation.ownerId && (
-													<Icon
-														name="crown"
+													<Crown
 														size={16}
 														className="text-yellow-500 shrink-0"
 													/>

src/components/dialogs/previewDialog/index.tsx

@@ -9,15 +9,12 @@ import PDF from "./pdf"
 import Image from "./image"
 import Video from "./video"
 import DocX from "./docx"
-import Icon from "@/components/icon"
+import { Loader as LoaderIcon, X } from "lucide-react"
 
 export const Loader = memo(() => {
 	return (
 		<div className="flex flex-col items-center justify-center w-full h-full">
-			<Icon
-				name="loader"
-				className="animate-spin-medium"
-			/>
+			<LoaderIcon className="animate-spin-medium" />
 		</div>
 	)
 })
@@ -113,8 +110,7 @@ export const PreviewDialog = memo(() => {
 					<div className="absolute w-screen h-screen flex flex-col">
 						<div className="flex flex-row border-b h-12 shadow-md bg-secondary w-full items-center justify-between px-4 -mt-[1px]">
 							{item.name}
-							<Icon
-								name="x"
+							<X
 								className="h-4 w-4 opacity-70 hover:opacity-100 cursor-pointer"
 								onClick={() => setOpen(false)}
 							/>

src/components/dialogs/selectDriveDestination/breadcrumbs/item.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useState, useMemo } from "react"
-import Icon from "@/components/icon"
+import { ChevronRight } from "lucide-react"
 import { directoryUUIDToNameCache } from "@/cache"
 import { getItem } from "@/lib/localForage"
 import { useTranslation } from "react-i18next"
@@ -91,8 +91,7 @@ export const Item = memo(
 					{name}
 				</p>
 				{index < components.length - 1 && (
-					<Icon
-						name="chevron-right"
+					<ChevronRight
 						size={16}
 						className="select-none mx-[1px]"
 					/>

src/components/dialogs/selectDriveDestination/list/listItem.tsx

@@ -2,7 +2,7 @@ import { memo, useState, useCallback } from "react"
 import { type DriveCloudItem } from "@/components/drive"
 import { type VirtualItem } from "@tanstack/react-virtual"
 import FolderIcon from "@/assets/fileExtensionIcons/svg/folder.svg?react"
-import Icon from "@/components/icon"
+import { ChevronRight } from "lucide-react"
 import { formatBytes } from "@/utils"
 import { directorySizeCache } from "@/cache"
 import worker from "@/lib/worker"
@@ -72,10 +72,7 @@ export const ListItem = memo(
 				</div>
 				<div className="flex flex-row items-center gap-2 text-primary shrink-0 select-none">
 					<p>{formatBytes(size)}</p>
-					<Icon
-						name="chevron-right"
-						size={18}
-					/>
+					<ChevronRight size={18} />
 				</div>
 			</div>
 		)

src/components/drive/list/item/contextMenu/moveTree.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo } from "react"
 import { ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem } from "@/components/ui/context-menu"
 import worker from "@/lib/worker"
 import { useQuery } from "@tanstack/react-query"
-import Icon from "@/components/icon"
+import { Loader } from "lucide-react"
 import { useDriveItemsStore } from "@/stores/drive.store"
 import { move as moveAction } from "./actions"
 import { orderItemsByType } from "@/components/drive/utils"
@@ -80,8 +80,7 @@ export const MoveTree = memo(({ parent, name }: { parent: string; name: string }
 					}}
 					className="cursor-pointer"
 				>
-					<Icon
-						name="loader"
+					<Loader
 						size={18}
 						className="animate-spin-medium"
 					/>

src/components/drive/list/item/index.tsx

@@ -12,7 +12,7 @@ import eventEmitter from "@/lib/eventEmitter"
 import { generateThumbnail } from "@/lib/worker/proxy"
 import { fileNameToThumbnailType, fileNameToPreviewType } from "@/components/dialogs/previewDialog/utils"
 import { cn } from "@/lib/utils"
-import Icon from "@/components/icon"
+import { Heart } from "lucide-react"
 import useMountedEffect from "@/hooks/useMountedEffect"
 import { type CloudItemReceiver } from "@filen/sdk/dist/types/cloud"
 import { THUMBNAIL_MAX_FETCH_SIZE } from "@/constants"
@@ -316,8 +316,7 @@ export const ListItem = memo(
 								</div>
 								<div className="flex flex-row dragselect-start-disallowed items-center gap-2">
 									{item.favorited && (
-										<Icon
-											name="heart"
+										<Heart
 											size={18}
 											className="dragselect-start-disallowed shrink-0"
 										/>