wip: refactor

pnpm-lock.yaml

@@ -2789,7 +2789,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001521
-      electron-to-chromium: 1.4.493
+      electron-to-chromium: 1.4.494
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11(browserslist@4.21.10)
     dev: true
@@ -3174,8 +3174,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
-  /electron-to-chromium@1.4.493:
+  /electron-to-chromium@1.4.494:
-    resolution: {integrity: sha512-T1k9mhYPdjnmS4VAz4J1oKVn6/M6LxoqQEVtYRL0swJVj73bA2NzqF0HjwxGsW3zL3ir0oPmLfd7lyi/RYzreg==}
+    resolution: {integrity: sha512-KF7wtsFFDu4ws1ZsSOt4pdmO1yWVNWCFtijVYZPUeW4SV7/hy/AESjLn/+qIWgq7mHscNOKAwN5AIM1+YAy+Ww==}
     dev: true
 
   /emoji-regex@8.0.0:

src-tauri/Cargo.lock

@@ -182,9 +182,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.74"
+version = "1.0.75"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8c6f84b74db2535ebae81eede2f39b947dcbf01d093ae5f791e5dd414a1bf289"
+checksum = "a4668cab20f66d8d020e1fbc0ebe47217433c1b6c8f2040faf858554e394ace6"
 
 [[package]]
 name = "arboard"
@@ -320,7 +320,7 @@ checksum = "0e97ce7de6cf12de5d7226c73f5ba9811622f4db3a5b91b55c53e987e5f91cba"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -337,7 +337,7 @@ checksum = "bc00ceb34980c03614e35a3a4e218276a0a824e911d07651cd0d858a51e8c0f0"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -793,7 +793,7 @@ dependencies = [
  "heck",
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1101,7 +1101,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13b588ba4ac1a99f7f2964d24b3d896ddc6bf847ee3855dbd4366f058cfcd331"
 dependencies = [
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1123,36 +1123,6 @@ dependencies = [
  "cipher 0.3.0",
 ]
 
-[[package]]
-name = "curl"
-version = "0.4.44"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "509bd11746c7ac09ebd19f0b17782eae80aadee26237658a6b4808afb5c11a22"
-dependencies = [
- "curl-sys",
- "libc",
- "openssl-probe",
- "openssl-sys",
- "schannel",
- "socket2 0.4.9",
- "winapi",
-]
-
-[[package]]
-name = "curl-sys"
-version = "0.4.65+curl-8.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "961ba061c9ef2fe34bbd12b807152d96f0badd2bebe7b90ce6c8c8b7572a0986"
-dependencies = [
- "cc",
- "libc",
- "libz-sys",
- "openssl-sys",
- "pkg-config",
- "vcpkg",
- "winapi",
-]
-
 [[package]]
 name = "curve25519-dalek"
 version = "3.2.0"
@@ -1187,7 +1157,7 @@ dependencies = [
  "proc-macro2",
  "quote",
  "strsim",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1198,7 +1168,7 @@ checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5"
 dependencies = [
  "darling_core",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1427,7 +1397,7 @@ checksum = "5e9a1f9f7d83e59740248a6e14ecf93929ade55027844dfcea78beafccc15745"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1596,7 +1566,7 @@ checksum = "1a5c6c585bc94aaf2c7b51dd4c2ba22680844aba4c687be581871a6f518c5742"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -1712,7 +1682,7 @@ checksum = "89ca545a94061b6365f2c7355b4b32bd20df3ff95f02da9329b34ccc3bd6ee72"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -2665,18 +2635,6 @@ dependencies = [
  "vcpkg",
 ]
 
-[[package]]
-name = "libz-sys"
-version = "1.1.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d97137b25e321a73eef1418d1d5d2eda4d77e12813f8e6dead84bc52c5870a7b"
-dependencies = [
- "cc",
- "libc",
- "pkg-config",
- "vcpkg",
-]
-
 [[package]]
 name = "line-wrap"
 version = "0.1.1"
@@ -2733,7 +2691,6 @@ dependencies = [
 name = "lume"
 version = "1.2.0"
 dependencies = [
- "rand 0.8.5",
  "rust-argon2",
  "serde",
  "serde_json",
@@ -2757,7 +2714,6 @@ dependencies = [
  "tauri-plugin-updater",
  "tauri-plugin-upload",
  "tauri-plugin-window",
- "webpage",
 ]
 
 [[package]]
@@ -2802,18 +2758,6 @@ dependencies = [
  "tendril",
 ]
 
-[[package]]
-name = "markup5ever_rcdom"
-version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b9521dd6750f8e80ee6c53d65e2e4656d7de37064f3a7a5d2d11d05df93839c2"
-dependencies = [
- "html5ever",
- "markup5ever",
- "tendril",
- "xml5ever",
-]
-
 [[package]]
 name = "matchers"
 version = "0.1.0"
@@ -3211,24 +3155,6 @@ dependencies = [
  "pathdiff",
 ]
 
-[[package]]
-name = "openssl-probe"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff011a302c396a5197692431fc1948019154afc178baf7d8e37367442a4601cf"
-
-[[package]]
-name = "openssl-sys"
-version = "0.9.91"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "866b5f16f90776b9bb8dc1e1802ac6f0513de3a7a7465867bfbc563dc737faac"
-dependencies = [
- "cc",
- "libc",
- "pkg-config",
- "vcpkg",
-]
-
 [[package]]
 name = "ordered-stream"
 version = "0.2.0"
@@ -3496,7 +3422,7 @@ checksum = "4359fd9c9171ec6e8c62926d6faaf553a8dc3f64e1507e76da7911b4f6a04405"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -3694,9 +3620,9 @@ dependencies = [
 
 [[package]]
 name = "quote"
-version = "1.0.32"
+version = "1.0.33"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "50f3b39ccfb720540debaa0164757101c08ecb8d326b15358ce76a62c7e85965"
+checksum = "5267fca4496028628a95160fc423a33e8b2e6af8a5302579e322e4b520293cae"
 dependencies = [
  "proc-macro2",
 ]
@@ -4150,15 +4076,6 @@ dependencies = [
  "winapi-util",
 ]
 
-[[package]]
-name = "schannel"
-version = "0.1.22"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0c3733bf4cf7ea0880754e19cb5a462007c4a8c1914bff372ccc95b464f1df88"
-dependencies = [
- "windows-sys 0.48.0",
-]
-
 [[package]]
 name = "scoped-tls"
 version = "1.0.1"
@@ -4227,7 +4144,7 @@ checksum = "aafe972d60b0b9bee71a91b92fee2d4fb3c9d7e8f6b179aa99f27203d99a4816"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -4249,7 +4166,7 @@ checksum = "8725e1dfadb3a50f7e5ce0b1a540466f6ed3fe7a0fca2ac2b8b831d31316bd00"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -4299,7 +4216,7 @@ dependencies = [
  "darling",
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -4913,9 +4830,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "2.0.28"
+version = "2.0.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04361975b3f5e348b2189d8dc55bc942f278b2d482a6a0365de5bdd62d351567"
+checksum = "c324c494eba9d92503e6f1ef2e6df781e78f6a7705a0202d9801b198807d518a"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -5505,22 +5422,22 @@ checksum = "8eaa81235c7058867fa8c0e7314f33dcce9c215f535d1913822a2b3f5e289f3c"
 
 [[package]]
 name = "thiserror"
-version = "1.0.46"
+version = "1.0.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d9207952ae1a003f42d3d5e892dac3c6ba42aa6ac0c79a6a91a2b5cb4253e75c"
+checksum = "97a802ec30afc17eee47b2855fc72e0c4cd62be9b4efe6591edde0ec5bd68d8f"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.46"
+version = "1.0.47"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f1728216d3244de4f14f14f8c15c79be1a7c67867d28d69b719690e2a19fb445"
+checksum = "6bb623b56e39ab7dcd4b1b98bb6c8f8d907ed255b18de254088016b27a8ee19b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -5612,7 +5529,7 @@ checksum = "630bdcf245f78637c13ec01ffae6187cca34625e8c63150d424b59e55af2675e"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -5701,7 +5618,7 @@ checksum = "5f4f31f56159e98206da9efd823404b79b6ef3143b4a7ab76e67b1751b25a4ab"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -5983,7 +5900,7 @@ dependencies = [
  "once_cell",
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
  "wasm-bindgen-shared",
 ]
 
@@ -6017,7 +5934,7 @@ checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]
@@ -6095,19 +6012,6 @@ dependencies = [
  "system-deps",
 ]
 
-[[package]]
-name = "webpage"
-version = "1.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8598785beeb5af95abe95e7bb20c7e747d1188347080d6811d5a56d2b9a5f368"
-dependencies = [
- "curl",
- "html5ever",
- "markup5ever_rcdom",
- "serde",
- "serde_json",
-]
-
 [[package]]
 name = "webpki-roots"
 version = "0.24.0"
@@ -6138,7 +6042,7 @@ checksum = "ac1345798ecd8122468840bcdf1b95e5dc6d2206c5e4b0eafa078d061f59c9bc"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]
@@ -6630,17 +6534,6 @@ dependencies = [
  "winapi",
 ]
 
-[[package]]
-name = "xml5ever"
-version = "0.17.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4034e1d05af98b51ad7214527730626f019682d797ba38b51689212118d8e650"
-dependencies = [
- "log",
- "mac",
- "markup5ever",
-]
-
 [[package]]
 name = "zbus"
 version = "3.14.1"
@@ -6724,7 +6617,7 @@ checksum = "ce36e65b0d2999d2aafac989fb249189a141aee1f53c612c1f37d72631959f69"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.28",
+ "syn 2.0.29",
 ]
 
 [[package]]

src-tauri/Cargo.toml

@@ -40,8 +40,6 @@ sqlx-cli = { version = "0.7.0", default-features = false, features = [
   "sqlite",
 ] }
 rust-argon2 = "1.0"
-rand = "0.8.5"
-webpage = { version = "1.1", features = ["serde"] }
 
 [dependencies.tauri-plugin-sql]
 git = "https://github.com/tauri-apps/plugins-workspace"

src-tauri/src/main.rs

@@ -3,9 +3,6 @@
   windows_subsystem = "windows"
 )]
 
-mod opg;
-
-use opg::opengraph;
 use tauri::Manager;
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_sql::{Migration, MigrationKind};
@@ -184,7 +181,7 @@ fn main() {
     .plugin(tauri_plugin_window::init())
     .plugin(tauri_plugin_store::Builder::default().build())
     .plugin(tauri_plugin_shell::init())
-    .invoke_handler(tauri::generate_handler![close_splashscreen, opengraph])
+    .invoke_handler(tauri::generate_handler![close_splashscreen])
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src-tauri/src/opg.rs

@@ -1,67 +0,0 @@
-use std::time::Duration;
-use webpage::{Webpage, WebpageOptions};
-
-#[derive(serde::Serialize)]
-pub struct OpenGraphResponse {
-  title: String,
-  description: String,
-  url: String,
-  image: String,
-}
-
-async fn fetch_opengraph(url: String) -> OpenGraphResponse {
-  let options = WebpageOptions {
-    allow_insecure: false,
-    max_redirections: 3,
-    timeout: Duration::from_secs(15),
-    useragent: "lume - desktop app".to_string(),
-    ..Default::default()
-  };
-
-  let result = match Webpage::from_url(&url, options) {
-    Ok(webpage) => webpage,
-    Err(_) => {
-      return OpenGraphResponse {
-        title: "".to_string(),
-        description: "".to_string(),
-        url: "".to_string(),
-        image: "".to_string(),
-      }
-    }
-  };
-
-  let html = result.html;
-
-  return OpenGraphResponse {
-    title: html
-      .opengraph
-      .properties
-      .get("title")
-      .cloned()
-      .unwrap_or_default(),
-    description: html
-      .opengraph
-      .properties
-      .get("description")
-      .cloned()
-      .unwrap_or_default(),
-    url: html
-      .opengraph
-      .properties
-      .get("url")
-      .cloned()
-      .unwrap_or_default(),
-    image: html
-      .opengraph
-      .images
-      .get(0)
-      .and_then(|i| Some(i.url.clone()))
-      .unwrap_or_default(),
-  };
-}
-
-#[tauri::command]
-pub async fn opengraph(url: String) -> OpenGraphResponse {
-  let result = fetch_opengraph(url).await;
-  return result;
-}

src/app.tsx

@@ -245,7 +245,6 @@ export default function App() {
           <LoaderIcon className="h-6 w-6 animate-spin text-white" />
         </div>
       }
-      future={{ v7_startTransition: true }}
     />
   );
 }

src/app/auth/unlock.tsx

@@ -46,9 +46,17 @@ export function UnlockScreen() {
   } = useForm<FormValues>({ resolver });
 
   const onSubmit = async (data: { [x: string]: string }) => {
-    setLoading(true);
+    if (data.password.length < 3) {
-    if (data.password.length > 3) {
+      setError('password', {
+        type: 'custom',
+        message: 'Password is required and must be greater than 3',
+      });
+      return;
+    }
+
     try {
+      setLoading(true);
+
       const dir = await appConfigDir();
       const stronghold = await Stronghold.load(`${dir}/lume.stronghold`, data.password);
 
@@ -66,13 +74,6 @@ export function UnlockScreen() {
         message: e,
       });
     }
-    } else {
-      setLoading(false);
-      setError('password', {
-        type: 'custom',
-        message: 'Password is required and must be greater than 3',
-      });
-    }
   };
 
   return (
@@ -89,7 +90,7 @@ export function UnlockScreen() {
             <div className="relative">
               <input
                 {...register('password', { required: true })}
-                type={showPassword ? 'text' : 'password'}
+                type={'password'}
                 placeholder="Password"
                 className="relative h-12 w-full rounded-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
               />

src/app/events/index.tsx

@@ -31,12 +31,12 @@ export function EventScreen() {
         ) : (
           <div className="h-min w-full px-3 pt-1.5">
             <div className="rounded-xl bg-white/10 px-3 pt-3">
-              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
               <div className="mt-2">
-                <NoteContent content={data.content} />
+                <NoteContent content={data.richContent} />
               </div>
               <div>
-                <NoteActions id={id} pubkey={data.pubkey} noOpenThread={true} />
+                <NoteActions id={id} pubkey={data.event.pubkey} noOpenThread={true} />
                 <NoteStats id={id} />
               </div>
             </div>

src/app/space/components/widgets/thread.tsx

@@ -31,14 +31,14 @@ export function ThreadBlock({ params }: { params: Widget }) {
         ) : (
           <div className="h-min w-full px-3 pt-1.5">
             <div className="rounded-xl bg-white/10 px-3 pt-3">
-              <ThreadUser pubkey={data.pubkey} time={data.created_at} />
+              <ThreadUser pubkey={data.event.pubkey} time={data.event.created_at} />
               <div className="mt-2">
-                <NoteContent content={data.content} />
+                <NoteContent content={data.richContent} />
               </div>
               <div>
                 <NoteActions
                   id={params.content}
-                  pubkey={data.pubkey}
+                  pubkey={data.event.pubkey}
                   noOpenThread={true}
                 />
                 <NoteStats id={params.content} />

src/shared/notes/content.tsx

@@ -10,9 +10,9 @@ import {
   VideoPreview,
 } from '@shared/notes';
 
-import { Content } from '@utils/types';
+import { RichContent } from '@utils/types';
 
-export function NoteContent({ content, long }: { content: Content; long?: boolean }) {
+export function NoteContent({ content, long }: { content: RichContent; long?: boolean }) {
   if (long) {
     return (
       <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>

src/shared/notes/kinds/kind1063.tsx

@@ -4,12 +4,10 @@ import { Image } from '@shared/image';
 import { NoteActions, NoteMetadata } from '@shared/notes';
 import { User } from '@shared/user';
 
-function isImage(url: string) {
+import { isImage } from '@utils/isImage';
-  return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
-}
 
 export function NoteKind_1063({ event }: { event: NDKEvent }) {
-  const url = event.tags[0][1];
+  const url = event.tags.find((el) => el[0] === 'url')[1];
 
   return (
     <div className="h-min w-full px-3 py-1.5">

src/shared/notes/kinds/repost.tsx

@@ -46,13 +46,17 @@ export function Repost({ event }: { event: NDKEvent }) {
         <div className="relative flex flex-col">
           <div className="isolate flex flex-col -space-y-4">
             <RepostUser pubkey={event.pubkey} />
-            <User pubkey={data.pubkey} time={data.created_at} isRepost={true} />
+            <User
+              pubkey={data.event.pubkey}
+              time={data.event.created_at}
+              isRepost={true}
+            />
           </div>
           <div className="flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="relative z-20 flex-1">
-              <NoteContent content={data.content} />
+              <NoteContent content={data.richContent} />
-              <NoteActions id={repostID} pubkey={data.pubkey} />
+              <NoteActions id={repostID} pubkey={data.event.pubkey} />
             </div>
           </div>
           <NoteMetadata id={repostID} />

src/shared/notes/kinds/sub.tsx

@@ -26,12 +26,12 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
     <>
       <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
       <div className="mb-5 flex flex-col">
-        <User pubkey={data.pubkey} time={data.created_at} />
+        <User pubkey={data.event.pubkey} time={data.event.created_at} />
         <div className="-mt-6 flex items-start gap-3">
           <div className="w-11 shrink-0" />
           <div className="relative z-20 flex-1">
-            <NoteContent content={data.content} long={data.kind === 30023} />
+            <NoteContent content={data.richContent} long={data.event.kind === 30023} />
-            <NoteActions id={data.id} pubkey={data.pubkey} root={root} />
+            <NoteActions id={data.event.id} pubkey={data.event.pubkey} root={root} />
           </div>
         </div>
       </div>

src/shared/notes/mentions/note.tsx

@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import { useStorage } from '@libs/storage/provider';
 
+import { Image } from '@shared/image';
 import { MentionUser, NoteSkeleton } from '@shared/notes';
 import { User } from '@shared/user';
 
@@ -11,6 +12,7 @@ import { widgetKinds } from '@stores/constants';
 import { useWidgets } from '@stores/widgets';
 
 import { useEvent } from '@utils/hooks/useEvent';
+import { isImage } from '@utils/isImage';
 
 export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
   const { db } = useStorage();
@@ -27,28 +29,10 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
-  if (!id) {
+  const renderItem = useCallback(() => {
+    switch (data.event.kind) {
+      case 1: {
         return (
-      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
-        <p className="break-all">Failed to get event with id: {id}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      onClick={(e) => openThread(e, id)}
-      onKeyDown={(e) => openThread(e, id)}
-      role="button"
-      tabIndex={0}
-      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
-    >
-      {status === 'loading' ? (
-        <NoteSkeleton />
-      ) : status === 'success' ? (
-        <>
-          <User pubkey={data.pubkey} time={data.created_at} size="small" />
-          <div className="mt-2">
           <ReactMarkdown
             className="markdown"
             remarkPlugins={[remarkGfm]}
@@ -68,15 +52,50 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
               },
             }}
           >
-              {data?.content.length > 160
+            {data.richContent.parsed.length > 160
-                ? data.content.substring(0, 160) + '...'
+              ? data.richContent.parsed.substring(0, 160) + '...'
-                : data.content}
+              : data.richContent.parsed}
           </ReactMarkdown>
-          </div>
+        );
-        </>
+      }
-      ) : (
+      case 1063: {
-        <p className="break-all">Failed to get event with id: {id}</p>
+        const url = data.event.tags.find((el) => el[0] === 'url')[1];
+        return (
+          <div>
+            {isImage(url) && (
+              <Image
+                src={url}
+                fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
+                alt="image"
+                className="h-auto w-full rounded-lg object-cover"
+              />
             )}
           </div>
         );
+      }
+      default:
+        break;
+    }
+  }, [data]);
+
+  if (status === 'loading') {
+    return (
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+        <NoteSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={(e) => openThread(e, id)}
+      onKeyDown={(e) => openThread(e, id)}
+      role="button"
+      tabIndex={0}
+      className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3"
+    >
+      <User pubkey={data.event.pubkey} time={data.event.created_at} size="small" />
+      <div className="mt-2">{renderItem()}</div>
+    </div>
+  );
 });

src/utils/hooks/useEvent.tsx

@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useNDK } from '@libs/ndk/provider';
 
 import { parser } from '@utils/parser';
+import { RichContent } from '@utils/types';
 
 export function useEvent(id: string, embed?: string) {
   const { ndk } = useNDK();
@@ -12,18 +13,18 @@ export function useEvent(id: string, embed?: string) {
     async () => {
       if (embed) {
         const event: NDKEvent = JSON.parse(embed);
-        // @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
+        let richContent: RichContent;
-        if (event.kind === 1) event.content = parser(event);
+        if (event.kind === 1) richContent = parser(event);
 
-        return event as unknown as NDKEvent;
+        return { event: event as NDKEvent, richContent: richContent };
       }
 
       const event = (await ndk.fetchEvent(id)) as NDKEvent;
       if (!event) throw new Error('event not found');
-      // @ts-expect-error, #TODO: convert NDKEvent to ExNDKEvent
+      let richContent: RichContent;
-      if (event.kind === 1) event.content = parser(event);
+      if (event.kind === 1) richContent = parser(event);
 
-      return event as NDKEvent;
+      return { event: event as NDKEvent, richContent: richContent };
     },
     {
       staleTime: Infinity,

src/utils/isImage.tsx

@@ -0,0 +1,3 @@
+export function isImage(url: string) {
+  return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
+}

src/utils/parser.tsx

@@ -1,7 +1,6 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import getUrls from 'get-urls';
 import { Event, parseReferences } from 'nostr-tools';
-import ReactPlayer from 'react-player';
 
 import { RichContent } from '@utils/types';
 
@@ -26,19 +25,23 @@ export function parser(event: NDKEvent) {
       content.images.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else if (ReactPlayer.canPlay(url)) {
+    }
+
+    if (url.match(/\.(mp4|mov|webm|wmv|flv|mts|avi|ogv|mkv|mp3|m3u8)$/)) {
       // video
       content.videos.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
-    } else {
+    }
+
+    /*
     if (content.links.length < 1) {
       // push to store
       content.links.push(url);
       // remove url from original content
       content.parsed = content.parsed.replace(url, '');
     }
-    }
+    */
   });
 
   // parse hashtag