feat: improve home screen

packages/icons/index.ts

@@ -118,3 +118,5 @@ export * from "./src/arrowDown";
 export * from "./src/link";
 export * from "./src/local";
 export * from "./src/global";
+export * from "./src/infoCircle";
+export * from "./src/cancelCircle";

packages/icons/src/cancelCircle.tsx

@@ -0,0 +1,12 @@
+export function CancelCircleIcon(props: JSX.IntrinsicElements["svg"]) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

packages/icons/src/checkCircle.tsx

@@ -1,22 +1,15 @@
-import { SVGProps } from 'react';
+import { SVGProps } from "react";
 
 export function CheckCircleIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
   return (
-    <svg
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.5805 9.97493C15.8428 9.65434 15.7955 9.18183 15.4749 8.91953C15.1543 8.65724 14.6818 8.70449 14.4195 9.02507L10.4443 13.8837L9.03033 12.4697C8.73744 12.1768 8.26256 12.1768 7.96967 12.4697C7.67678 12.7626 7.67678 13.2374 7.96967 13.5303L9.96967 15.5303C10.1195 15.6802 10.3257 15.7596 10.5374 15.7491C10.749 15.7385 10.9463 15.6389 11.0805 15.4749L15.5805 9.97493Z"
         fill="currentColor"
+        fillRule="evenodd"
+        d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm3.774 8.133a1 1 0 0 0-1.548-1.266l-3.8 4.645-1.219-1.22a1 1 0 0 0-1.414 1.415l2 2a1 1 0 0 0 1.481-.074l4.5-5.5Z"
+        clipRule="evenodd"
       />
     </svg>
   );

packages/icons/src/infoCircle.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from "react";
+
+export function InfoCircleIcon(
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm-2 9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-4a1 1 0 0 1-1-1Zm2-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

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>
+  );
 }