polish

.github/workflows/main.yml

@@ -1,8 +1,5 @@
 name: 'publish'
-on:
+on: workflow_dispatch
-  push:
-    branches:
-      - main
 
 env:
   CARGO_INCREMENTAL: 0
@@ -27,7 +24,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - uses: dtolnay/rust-toolchain@stable
         with:
           targets: aarch64-apple-darwin

src/app.tsx

@@ -54,13 +54,6 @@ const router = createBrowserRouter([
           return { Component: SpaceScreen };
         },
       },
-      {
-        path: 'trending',
-        async lazy() {
-          const { TrendingScreen } = await import('@app/trending');
-          return { Component: TrendingScreen };
-        },
-      },
       {
         path: 'events/:id',
         async lazy() {

src/app/auth/unlock.tsx

@@ -74,17 +74,17 @@ export function UnlockScreen() {
         <div className="mb-6 text-center">
           <h1 className="text-2xl font-semibold text-white">Enter password to unlock</h1>
         </div>
-        <div className="mb-4 w-full rounded-xl bg-white/5 p-4">
+        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-1">
-          <User pubkey={db.account.pubkey} />
+          <div className="flex flex-col rounded-lg bg-white/5">
-        </div>
+            <div className="w-full rounded-t-lg border-b border-white/10 bg-white/5 p-4">
-        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
+              <User pubkey={db.account.pubkey} />
-          <div className="flex flex-col gap-1">
+            </div>
             <div className="relative">
               <input
                 {...register('password', { required: true, minLength: 4 })}
                 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"
+                className="relative h-12 w-full rounded-b-lg bg-white/10 py-1 text-center text-white !outline-none placeholder:text-white/50"
               />
               <button
                 type="button"
@@ -98,11 +98,11 @@ export function UnlockScreen() {
                 )}
               </button>
             </div>
-            <span className="text-sm text-red-400">
-              {errors.password && <p>{errors.password.message}</p>}
-            </span>
           </div>
           <div className="flex flex-col items-center justify-center">
+            <span className="mb-3 text-sm text-red-400">
+              {errors.password && <p>{errors.password.message}</p>}
+            </span>
             <button
               type="submit"
               disabled={!isDirty || !isValid}

src/app/error.tsx

@@ -33,8 +33,8 @@ export function ErrorScreen() {
   }, []);
 
   return (
-    <div className="flex h-full w-full items-center justify-center bg-black/90">
+    <div className="flex h-full items-center justify-center bg-black/90">
-      <div className="flex flex-col gap-4">
+      <div className="flex max-w-lg flex-col gap-4">
         <div className="flex flex-col">
           <h1 className="mb-1 text-2xl font-semibold text-white">
             Sorry, an unexpected error has occurred.

src/app/space/components/userProfile.tsx

@@ -8,7 +8,12 @@ import { useSocial } from '@utils/hooks/useSocial';
 import { compactNumber } from '@utils/number';
 import { shortenKey } from '@utils/shortenKey';
 
-export function Profile({ data }: { data: any }) {
+export interface Profile {
+  pubkey: string;
+  profile: { content: string };
+}
+
+export function UserProfile({ data }: { data: Profile }) {
   const { status: socialStatus, userFollows, follow, unfollow } = useSocial();
   const { status, data: userStats } = useQuery(
     ['user-stats', data.pubkey],

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

@@ -15,11 +15,11 @@ import { useEvent } from '@utils/hooks/useEvent';
 import { Widget } from '@utils/types';
 
 export function ThreadBlock({ params }: { params: Widget }) {
-  const { status, data } = useEvent(params.content);
   const { db } = useStorage();
+  const { status, data } = useEvent(params.content);
 
   return (
-    <div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
+    <div className="scrollbar-hide h-full w-[400px] shrink-0 overflow-y-auto bg-white/10">
       <TitleBar id={params.id} title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (

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

@@ -1,20 +1,21 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 
 import { NoteKind_1 } from '@shared/notes';
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
-import { LumeEvent } from '@utils/types';
+import { Widget } from '@utils/types';
 
 interface Response {
-  notes: Array<{ event: LumeEvent }>;
+  notes: Array<{ event: NDKEvent }>;
 }
 
-export function TrendingNotes() {
+export function TrendingNotesWidget({ params }: { params: Widget }) {
   const { status, data } = useQuery(
     ['trending-notes'],
     async () => {
-      const res = await fetch('https://api.nostr.band/v0/trending/notes');
+      const res = await fetch(params.content);
       if (!res.ok) {
         throw new Error('failed to fecht trending notes');
       }
@@ -32,7 +33,7 @@ export function TrendingNotes() {
 
   return (
     <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
-      <TitleBar title="Trending Posts" />
+      <TitleBar title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
@@ -41,7 +42,13 @@ export function TrendingNotes() {
             </div>
           </div>
         ) : status === 'error' ? (
-          <p>Failed to fetch</p>
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
         ) : (
           <div className="relative flex w-full flex-col">
             {data.map((item) => (

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

@@ -1,24 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { Profile } from '@app/trending/components/profile';
+import { type Profile, UserProfile } from '@app/space/components/userProfile';
 
 import { NoteSkeleton } from '@shared/notes/skeleton';
 import { TitleBar } from '@shared/titleBar';
 
+import { Widget } from '@utils/types';
+
 interface Response {
   profiles: Array<{ pubkey: string }>;
 }
 
-export function TrendingProfiles() {
+export function TrendingProfilesWidget({ params }: { params: Widget }) {
   const { status, data } = useQuery(
     ['trending-profiles'],
     async () => {
-      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
+      const res = await fetch(params.content);
       if (!res.ok) {
         throw new Error('Error');
       }
       const json: Response = await res.json();
-      if (!json.profiles) return null;
+      if (!json.profiles) return [];
       return json.profiles;
     },
     {
@@ -31,7 +33,7 @@ export function TrendingProfiles() {
 
   return (
     <div className="scrollbar-hide relative h-full w-[400px] shrink-0 overflow-y-auto bg-white/10 pb-20">
-      <TitleBar title="Trending Profiles" />
+      <TitleBar title={params.title} />
       <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
@@ -40,11 +42,17 @@ export function TrendingProfiles() {
             </div>
           </div>
         ) : status === 'error' ? (
-          <p>Failed to fetch</p>
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl bg-white/10 px-3 py-3">
+              <p className="text-center text-sm font-medium text-white">
+                Sorry, an unexpected error has occurred.
+              </p>
+            </div>
+          </div>
         ) : (
           <div className="relative flex w-full flex-col gap-3 px-3 pt-1.5">
-            {data.map((item) => (
+            {data.map((item: Profile) => (
-              <Profile key={item.pubkey} data={item} />
+              <UserProfile key={item.pubkey} data={item} />
             ))}
           </div>
         )}

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

@@ -11,7 +11,7 @@ import { TitleBar } from '@shared/titleBar';
 import { UserProfile } from '@shared/userProfile';
 
 import { nHoursAgo } from '@utils/date';
-import { DBEvent, Widget } from '@utils/types';
+import { Widget } from '@utils/types';
 
 export function UserWidget({ params }: { params: Widget }) {
   const { ndk } = useNDK();
@@ -19,13 +19,18 @@ export function UserWidget({ params }: { params: Widget }) {
     ['user-widget', params.content],
     async () => {
       const events = await ndk.fetchEvents({
-        kinds: [1],
+        kinds: [1, 6],
         authors: [params.content],
         since: nHoursAgo(24),
       });
-      return [...events] as unknown as DBEvent[];
+      return [...events] as unknown as NDKEvent[];
     },
-    { refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false }
+    {
+      staleTime: Infinity,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    }
   );
 
   const parentRef = useRef<HTMLDivElement>(null);
@@ -87,7 +92,7 @@ export function UserWidget({ params }: { params: Widget }) {
           <div className="flex h-full w-full flex-col justify-between gap-1.5 pb-10">
             {status === 'loading' ? (
               <div className="px-3 py-1.5">
-                <div className="rounded-md bg-white/10 px-3 py-3">
+                <div className="rounded-xl bg-white/10 px-3 py-3">
                   <NoteSkeleton />
                 </div>
               </div>

src/app/space/index.tsx

@@ -68,7 +68,7 @@ export function SpaceScreen() {
           <HashtagModal />
         </div>
       </div>
-      <div className="w-[150px] shrink-0" />
+      <div className="w-[250px] shrink-0" />
     </div>
   );
 }

src/app/trending/index.tsx

@@ -1,11 +0,0 @@
-import { TrendingNotes } from '@app/trending/components/trendingNotes';
-import { TrendingProfiles } from '@app/trending/components/trendingProfiles';
-
-export function TrendingScreen() {
-  return (
-    <div className="scrollbar-hide flex h-full w-full flex-nowrap divide-x divide-white/5 overflow-x-auto overflow-y-hidden">
-      <TrendingProfiles />
-      <TrendingNotes />
-    </div>
-  );
-}

src/libs/storage/instance.ts

@@ -1,3 +1,4 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { BaseDirectory, removeFile } from '@tauri-apps/plugin-fs';
 import Database from '@tauri-apps/plugin-sql';
 import { Stronghold } from '@tauri-apps/plugin-stronghold';
@@ -114,16 +115,16 @@ export class LumeStorage {
 
   public async createWidget(kind: number, title: string, content: string | string[]) {
     const insert = await this.db.execute(
-      'INSERT OR IGNORE INTO widgets (account_id, kind, title, content) VALUES ($1, $2, $3, $4);',
+      'INSERT INTO widgets (account_id, kind, title, content) VALUES ($1, $2, $3, $4);',
       [this.account.id, kind, title, content]
     );
 
     if (insert) {
-      const widget: Widget = await this.db.select(
+      const widgets: Array<Widget> = await this.db.select(
         'SELECT * FROM widgets ORDER BY id DESC LIMIT 1;'
-      )?.[0];
+      );
-      if (!widget) console.error('get created widget failed');
+      if (widgets.length < 1) console.error('get created widget failed');
-      return widget;
+      return widgets[0];
     } else {
       console.error('create widget failed');
     }
@@ -150,12 +151,12 @@ export class LumeStorage {
 
   public async getEventByID(id: string) {
     const results: DBEvent[] = await this.db.select(
-      'SELECT * FROM events WHERE id = $1 ORDER BY id DESC LIMIT 1;',
+      'SELECT * FROM events WHERE id = $1 LIMIT 1;',
       [id]
     );
 
     if (results.length < 1) return null;
-    return results[0];
+    return JSON.parse(results[0].event as string) as NDKEvent;
   }
 
   public async countTotalEvents() {
@@ -175,7 +176,7 @@ export class LumeStorage {
     };
 
     const query: DBEvent[] = await this.db.select(
-      'SELECT * FROM events ORDER BY created_at DESC LIMIT $1 OFFSET $2;',
+      'SELECT * FROM events GROUP BY root_id ORDER BY created_at DESC LIMIT $1 OFFSET $2;',
       [limit, offset]
     );
 

src/shared/composer/composer.tsx

@@ -87,13 +87,13 @@ export function Composer() {
       if (reply.id && reply.pubkey) {
         if (reply.root && reply.root.length > 1) {
           tags = [
-            ['e', reply.root, 'wss://relayable.org', 'root'],
+            ['e', reply.root, '', 'root'],
-            ['e', reply.id, 'wss://relayable.org', 'reply'],
+            ['e', reply.id, '', 'reply'],
             ['p', reply.pubkey],
           ];
         } else {
           tags = [
-            ['e', reply.id, 'wss://relayable.org', 'reply'],
+            ['e', reply.id, '', 'reply'],
             ['p', reply.pubkey],
           ];
         }

src/shared/image.tsx

@@ -1,16 +1,12 @@
 import { minidenticon } from 'minidenticons';
 import { ImgHTMLAttributes, useState } from 'react';
-import { useMemo } from 'react';
 
 export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
   const [isError, setIsError] = useState(false);
 
   if (isError || !src) {
-    const svgURI = useMemo(
+    const svgURI =
-      () =>
+      'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50));
-        'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(props.alt, 90, 50)),
-      [props.alt]
-    );
     return (
       <img src={svgURI} alt={props.alt} {...props} style={{ backgroundColor: '#000' }} />
     );
@@ -20,7 +16,8 @@ export function Image({ src, ...props }: ImgHTMLAttributes<HTMLImageElement>) {
     <img
       {...props}
       src={src}
-      onError={() => {
+      onError={({ currentTarget }) => {
+        currentTarget.onerror = null;
         setIsError(true);
       }}
       decoding="async"

src/shared/navigation.tsx

@@ -3,15 +3,13 @@ import { useState } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { ChatsList } from '@app/chats/components/list';
+// import { ChatsList } from '@app/chats/components/list';
-
 import { ComposerModal } from '@shared/composer/modal';
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
   NavArrowDownIcon,
   SpaceIcon,
-  TrendingIcon,
 } from '@shared/icons';
 import { LumeBar } from '@shared/lumeBar';
 
@@ -19,7 +17,7 @@ export function Navigation() {
   const navigate = useNavigate();
 
   const [feeds, setFeeds] = useState(true);
-  const [chats, setChats] = useState(true);
+  // const [chats, setChats] = useState(true);
 
   return (
     <div className="relative h-full w-[232px] bg-black/80">
@@ -54,10 +52,15 @@ export function Navigation() {
                     open ? '' : 'rotate-180'
                   )}
                 >
-                  <NavArrowDownIcon className="h-3 w-3 text-white/50" />
+                  <NavArrowDownIcon
+                    className={twMerge(
+                      'h-3 w-3 text-white/50',
+                      feeds ? '' : 'rotate-180'
+                    )}
+                  />
                 </div>
                 <h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
-                  Feeds
+                  Personal
                 </h3>
               </button>
             </Collapsible.Trigger>
@@ -76,54 +79,12 @@ export function Navigation() {
                   <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
                     <SpaceIcon className="h-3 w-3 text-white" />
                   </span>
-                  <span className="font-medium">Spaces</span>
+                  <span className="font-medium">Space</span>
-                </NavLink>
-                <NavLink
-                  to="/trending"
-                  preventScrollReset={true}
-                  className={({ isActive }) =>
-                    twMerge(
-                      'flex h-9 items-center gap-2.5 rounded-md px-2 ',
-                      isActive ? 'bg-white/10 text-white' : 'text-white/80'
-                    )
-                  }
-                >
-                  <span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
-                    <TrendingIcon className="h-3 w-3 text-white" />
-                  </span>
-                  <span className="font-medium">Trending</span>
                 </NavLink>
               </div>
             </Collapsible.Content>
           </div>
         </Collapsible.Root>
-        {/* Channels
-				<Disclosure defaultOpen={true}>
-					{({ open }) => (
-						<div className="flex flex-col gap-0.5 px-1.5">
-							<Disclosure.Button className="flex items-center gap-1 px-3">
-								<div
-									className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-										open ? "" : "rotate-180"
-									}`}
-								>
-									<NavArrowDownIcon
-										width={12}
-										height={12}
-										className="text-zinc-700"
-									/>
-								</div>
-								<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">
-									Channels
-								</h3>
-							</Disclosure.Button>
-							<Disclosure.Panel>
-								<ChannelsList />
-							</Disclosure.Panel>
-						</div>
-					)}
-				</Disclosure>
-				 */}
       </div>
       <div className="absolute bottom-3 left-0 w-full px-10">
         <LumeBar />

src/shared/notes/replies/list.tsx

@@ -1,10 +1,13 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
 
 import { NoteSkeleton, Reply } from '@shared/notes';
 
-import { LumeEvent } from '@utils/types';
+interface ReplyEvent extends NDKEvent {
+  replies: Array<NDKEvent>;
+}
 
 export function RepliesList({ id }: { id: string }) {
   const { ndk } = useNDK();
@@ -12,10 +15,9 @@ export function RepliesList({ id }: { id: string }) {
     const events = await ndk.fetchEvents({
       kinds: [1],
       '#e': [id],
-      since: 0,
     });
 
-    const array = [...events] as unknown as LumeEvent[];
+    const array = [...events] as unknown as ReplyEvent[];
 
     if (array.length > 0) {
       const replies = new Set();
@@ -55,7 +57,7 @@ export function RepliesList({ id }: { id: string }) {
   }
 
   return (
-    <div className="mt-3">
+    <div className="mt-3 pb-10">
       <div className="mb-2">
         <h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
       </div>
@@ -71,8 +73,8 @@ export function RepliesList({ id }: { id: string }) {
           </div>
         ) : (
           data
-            ?.reverse()
+            .reverse()
-            .map((event: LumeEvent) => <Reply key={event.id} event={event} root={id} />)
+            .map((event: NDKEvent) => <Reply key={event.id} event={event} root={id} />)
         )}
       </div>
     </div>

src/shared/notification/modal.tsx

@@ -9,7 +9,6 @@ import { BellIcon, CancelIcon, LoaderIcon } from '@shared/icons';
 import { NotiMention, NotiReaction, NotiRepost } from '@shared/notification';
 
 import { nHoursAgo } from '@utils/date';
-import { LumeEvent } from '@utils/types';
 
 export function NotificationModal({ pubkey }: { pubkey: string }) {
   const { ndk } = useNDK();
@@ -23,10 +22,12 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
       });
       const filterSelf = [...events].filter((el) => el.pubkey !== pubkey);
       const sorted = filterSelf.sort((a, b) => a.created_at - b.created_at);
-      return sorted as unknown as LumeEvent[];
+      return sorted as unknown as NDKEvent[];
     },
     {
       refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
     }
   );
 
@@ -80,7 +81,7 @@ export function NotificationModal({ pubkey }: { pubkey: string }) {
                 <div className="inline-flex items-center justify-center px-4 py-3">
                   <LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
                 </div>
-              ) : data.length < 1 ? (
+              ) : data?.length < 1 ? (
                 <div className="flex h-full w-full flex-col items-center justify-center">
                   <p className="mb-1 text-4xl">🎉</p>
                   <p className="font-medium text-white/50">

src/shared/user.tsx

@@ -90,7 +90,7 @@ export function User({
       </div>
       <Popover.Portal>
         <Popover.Content
-          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-xl focus:outline-none"
+          className="w-[300px] overflow-hidden rounded-md bg-white/10 backdrop-blur-3xl focus:outline-none"
           sideOffset={5}
         >
           <div className="flex gap-2.5 border-b border-white/5 px-3 py-3">

src/stores/widgets.tsx

@@ -22,7 +22,7 @@ export const useWidgets = create<WidgetState>()(
 
         // default: add network widget
         dbWidgets.unshift({
-          id: String(dbWidgets.length + 1),
+          id: '9999',
           title: 'Network',
           content: '',
           kind: 9999,

src/utils/hooks/useEvent.tsx

@@ -2,29 +2,38 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
 
 import { parser } from '@utils/parser';
 import { RichContent } from '@utils/types';
 
 export function useEvent(id: string, embed?: string) {
+  const { db } = useStorage();
   const { ndk } = useNDK();
   const { status, data, error } = useQuery(
     ['event', id],
     async () => {
+      let richContent: RichContent;
+      // return embed event (nostr.band api)
       if (embed) {
         const event: NDKEvent = JSON.parse(embed);
-        let richContent: RichContent;
         if (event.kind === 1) richContent = parser(event);
 
-        return { event: event as NDKEvent, richContent: richContent };
+        return { event: event, richContent: richContent };
       }
 
-      const event = (await ndk.fetchEvent(id)) as NDKEvent;
+      // get event from db
-      if (!event) throw new Error('event not found');
+      const dbEvent = await db.getEventByID(id);
-      let richContent: RichContent;
+      if (dbEvent) {
-      if (event.kind === 1) richContent = parser(event);
+        if (dbEvent.kind === 1) richContent = parser(dbEvent);
+        return { event: dbEvent, richContent: richContent };
+      } else {
+        // get event from relay if event in db not present
+        const event = await ndk.fetchEvent(id);
+        if (event.kind === 1) richContent = parser(event);
 
-      return { event: event as NDKEvent, richContent: richContent };
+        return { event: event, richContent: richContent };
+      }
     },
     {
       staleTime: Infinity,