update empty state

src/shared/icons/empty.tsx

@@ -0,0 +1,66 @@
+import { SVGProps } from "react";
+
+export function EmptyIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="120"
+			height="120"
+			fill="none"
+			viewBox="0 0 120 120"
+			{...props}
+		>
+			<g clipPath="url(#clip0_110_63)">
+				<path
+					fill="#27272A"
+					fillRule="evenodd"
+					d="M60 120c33.137 0 60-26.863 60-60S93.137 0 60 0C45.133 0 39.482 17.832 29 26.787 16.119 37.792 0 41.73 0 60c0 33.137 26.863 60 60 60z"
+					clipRule="evenodd"
+				/>
+				<g filter="url(#filter0_f_110_63)">
+					<path
+						fill="#18181B"
+						fillRule="evenodd"
+						d="M64 101c19.33 0 35-13.208 35-29.5S83.33 42 64 42c-8.672 0-11.969 8.767-18.083 13.17C38.403 60.58 29 62.517 29 71.5 29 87.792 44.67 101 64 101z"
+						clipRule="evenodd"
+					/>
+				</g>
+				<path
+					fill="#3F3F46"
+					fillRule="evenodd"
+					d="M82.941 59H65.06C59.504 59 55 63.476 55 68.997v4.871c0 5.521 4.504 9.997 10.059 9.997h18.879l5.779 4.685a2.02 2.02 0 002.83-.286c.293-.356.453-.803.453-1.263V68.997C93 63.476 88.496 59 82.941 59z"
+					clipRule="evenodd"
+				/>
+				<path
+					fill="#D4D4D8"
+					fillRule="evenodd"
+					d="M41.161 39h32.678C81.659 39 88 45.408 88 53.314v12.864c0 7.905-6.34 14.314-14.161 14.314H41.547l-9.186 7.742a3.244 3.244 0 01-4.603-.422A3.325 3.325 0 0127 85.697V53.314C27 45.408 33.34 39 41.161 39z"
+					clipRule="evenodd"
+				/>
+			</g>
+			<defs>
+				<filter
+					id="filter0_f_110_63"
+					width="92"
+					height="81"
+					x="18"
+					y="31"
+					colorInterpolationFilters="sRGB"
+					filterUnits="userSpaceOnUse"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+					<feGaussianBlur
+						result="effect1_foregroundBlur_110_63"
+						stdDeviation="5.5"
+					/>
+				</filter>
+				<clipPath id="clip0_110_63">
+					<path fill="#fff" d="M0 0H120V120H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

src/shared/icons/index.tsx

@@ -34,4 +34,5 @@ export * from "./world";
 export * from "./zap";
 export * from "./loader";
 export * from "./trending";
+export * from "./empty";
 // @endindex

src/shared/notes/kind1.tsx

@@ -1,8 +1,7 @@
-import { LinkPreview } from "./preview/link";
 import { MentionNote } from "@shared/notes/mentions/note";
 import { ImagePreview } from "@shared/notes/preview/image";
+import { LinkPreview } from "@shared/notes/preview/link";
 import { VideoPreview } from "@shared/notes/preview/video";
-import { truncateContent } from "@utils/transform";
 
 export function Kind1({
 	content,
@@ -11,7 +10,7 @@ export function Kind1({
 	return (
 		<>
 			<div
-				className={`select-text whitespace-pre-line break-words text-base text-zinc-100 ${
+				className={`select-text break-words text-base text-zinc-100 ${
 					truncate ? "line-clamp-3" : ""
 				}`}
 			>

src/shared/notes/replies/list.tsx

@@ -1,4 +1,5 @@
 import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { EmptyIcon } from "@shared/icons";
 import { Reply } from "@shared/notes/replies/item";
 import { RelayContext } from "@shared/relayProvider";
 import { useContext } from "react";
@@ -35,8 +36,11 @@ export function RepliesList({ id }: { id: string }) {
 					</div>
 				) : data.length === 0 ? (
 					<div className="px=3">
-						<div className="w-full h-24 flex items-center justify-center rounded-md bg-zinc-900">
-							<p className="text-zinc-300 font-medium">No replies...</p>
+						<div className="w-full flex items-center justify-center rounded-md bg-zinc-900">
+							<div className="py-6 flex flex-col items-center justify-center gap-2">
+								<EmptyIcon width={56} height={56} />
+								<p className="text-zinc-500 text-sm font-medium">No replies</p>
+							</div>
 						</div>
 					</div>
 				) : (