feat: improve home screen

packages/ui/src/box.tsx

@@ -13,7 +13,7 @@ export function Box({
       <div className="h-full w-full flex-1 px-2 pb-2">
         <div
           className={cn(
-            "h-full w-full overflow-hidden overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5",
+            "h-full w-full overflow-y-auto rounded-xl bg-white shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:bg-black dark:shadow-none dark:ring-1 dark:ring-white/5",
             className,
           )}
         >

packages/ui/src/emptyFeed.tsx

@@ -1,34 +0,0 @@
-import { InfoIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { useTranslation } from "react-i18next";
-
-export function EmptyFeed({
-  text,
-  subtext,
-  className,
-}: {
-  text?: string;
-  subtext?: string;
-  className?: string;
-}) {
-  const { t } = useTranslation();
-
-  return (
-    <div
-      className={cn(
-        "flex w-full flex-col items-center justify-center gap-2 rounded-xl bg-neutral-50 py-3 dark:bg-neutral-950",
-        className,
-      )}
-    >
-      <InfoIcon className="size-8 text-blue-500" />
-      <div className="text-center">
-        <p className="text-lg font-semibold">
-          {text ? text : t("global.emptyFeedTitle")}
-        </p>
-        <p className="text-sm leading-tight">
-          {subtext ? subtext : t("global.emptyFeedSubtitle")}
-        </p>
-      </div>
-    </div>
-  );
-}

packages/ui/src/index.ts

@@ -1,7 +1,6 @@
 export * from "./user";
 export * from "./note";
 export * from "./column";
-export * from "./emptyFeed";
 
 // UI
 export * from "./container";

packages/ui/src/note/content.tsx

@@ -5,7 +5,6 @@ import {
   NOSTR_EVENTS,
   NOSTR_MENTIONS,
   VIDEOS,
-  canPreview,
   cn,
 } from "@lume/utils";
 import { NIP89 } from "./nip89";
@@ -18,7 +17,6 @@ import { MentionNote } from "./mentions/note";
 import { Hashtag } from "./mentions/hashtag";
 import { VideoPreview } from "./preview/video";
 import { stripHtml } from "string-strip-html";
-import getUrl from "get-urls";
 import { ImagePreview } from "./preview/image";
 
 export function NoteContent({ className }: { className?: string }) {
@@ -26,7 +24,6 @@ export function NoteContent({ className }: { className?: string }) {
   const content = useMemo(() => {
     const text = stripHtml(event.content.trim()).result;
     const words = text.split(/( |\n)/);
-    const urls = [...getUrl(text)];
 
     // @ts-ignore, kaboom !!!
     let parsedContent: ReactNode[] = text;

packages/ui/src/note/menu.tsx

@@ -4,6 +4,7 @@ import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 import { useTranslation } from "react-i18next";
 import { useNoteContext } from "./provider";
 import { useArk } from "@lume/ark";
+import { toast } from "sonner";
 
 export function NoteMenu() {
   const ark = useArk();
@@ -13,20 +14,24 @@ export function NoteMenu() {
 
   const copyID = async () => {
     await writeText(await ark.event_to_bech32(event.id, [""]));
+    toast.success("Copied");
   };
 
   const copyRaw = async () => {
     await writeText(JSON.stringify(event));
+    toast.success("Copied");
   };
 
   const copyNpub = async () => {
     await writeText(await ark.user_to_bech32(event.pubkey, [""]));
+    toast.success("Copied");
   };
 
   const copyLink = async () => {
     await writeText(
       `https://njump.me/${await ark.event_to_bech32(event.id, [""])}`,
     );
+    toast.success("Copied");
   };
 
   return (

packages/ui/src/note/preview/image.tsx

@@ -37,7 +37,7 @@ export function ImagePreview({ url }: { url: string }) {
     // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
     <div
       onClick={open}
-      className="group relative my-1 overflow-hidden rounded-xl"
+      className="group relative my-1 overflow-hidden rounded-xl ring-1 ring-neutral-100 dark:ring-neutral-900"
     >
       <img
         src={url}

packages/ui/src/note/preview/video.tsx

@@ -21,7 +21,7 @@ export function VideoPreview({ url }: { url: string }) {
         <MediaControlBar>
           <MediaPlayButton />
           <MediaTimeRange />
-          <MediaTimeDisplay showDuration />
+          <MediaTimeDisplay />
           <MediaMuteButton />
         </MediaControlBar>
       </MediaController>

packages/ui/src/note/root.tsx

@@ -2,18 +2,15 @@ import { cn } from "@lume/utils";
 import { ReactNode } from "react";
 
 export function NoteRoot({
-	children,
-	className,
+  children,
+  className,
 }: {
-	children: ReactNode;
-	className?: string;
+  children: ReactNode;
+  className?: string;
 }) {
-	return (
-		<div
-			className={cn("h-min w-full overflow-hidden", className)}
-			contentEditable={false}
-		>
-			{children}
-		</div>
-	);
+  return (
+    <div className={cn("h-min w-full", className)} contentEditable={false}>
+      {children}
+    </div>
+  );
 }