Merge pull request #18 from ostyjs/note-enhancements

Note enhancements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-osty",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "license": "MIT",
   "author": "Sepehr Safari",

templates/react-shadcn/src/features/note-widget/components/note-header/hooks/index.ts

@@ -1,17 +1,32 @@
+import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { useProfile } from 'nostr-hooks';
+import { neventEncode } from 'nostr-tools/nip19';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCopyToClipboard } from 'usehooks-ts';
 
-export const useNoteHeader = (pubkey: string) => {
+export const useNoteHeader = (event: NDKEvent) => {
   const [, copy] = useCopyToClipboard();
 
-  const { profile } = useProfile({ pubkey });
+  const { profile } = useProfile({ pubkey: event.pubkey });
 
   const navigate = useNavigate();
 
+  const nevent = useMemo(
+    () =>
+      neventEncode({
+        id: event.id,
+        author: event.author.pubkey,
+        kind: event.kind,
+        relays: event.onRelays.map((relay) => relay.url),
+      }),
+    [event],
+  );
+
   return {
     profile,
     copy,
     navigate,
+    nevent,
   };
 };

templates/react-shadcn/src/features/note-widget/components/note-header/index.tsx

@@ -17,7 +17,7 @@ import { NoteParentPreview } from '../note-parent-preview';
 import { useNoteHeader } from './hooks';
 
 export const NoteHeader = ({ event }: { event: NDKEvent }) => {
-  const { copy, navigate, profile } = useNoteHeader(event.pubkey);
+  const { copy, navigate, profile, nevent } = useNoteHeader(event);
 
   return (
     <>
@@ -68,7 +68,7 @@ export const NoteHeader = ({ event }: { event: NDKEvent }) => {
                 Reactions
               </DropdownMenuItem>
 
-              <DropdownMenuItem onClick={() => copy(window.location.href)}>
+              <DropdownMenuItem onClick={() => copy(`${window.location.origin}/note/${nevent}`)}>
                 <LinkIcon className="w-4 h-4 mr-2" />
                 Copy note link
               </DropdownMenuItem>
@@ -78,7 +78,7 @@ export const NoteHeader = ({ event }: { event: NDKEvent }) => {
                 Copy note text
               </DropdownMenuItem>
 
-              <DropdownMenuItem onClick={() => copy(event.id)}>
+              <DropdownMenuItem onClick={() => copy(nevent)}>
                 <TagIcon className="w-4 h-4 mr-2" />
                 Copy note ID
               </DropdownMenuItem>

templates/react-shadcn/src/pages/index.tsx

@@ -67,7 +67,7 @@ const Layout = () => {
 };
 
 const HomePage = () => import('./home');
-const NotesFeedPage = () => import('./notes-feed');
+const NotePage = () => import('./note');
 const ProfilePage = () => import('./profile');
 
 export const router = createBrowserRouter([
@@ -82,9 +82,9 @@ export const router = createBrowserRouter([
         },
       },
       {
-        path: '/notes/:noteId',
+        path: '/note/:noteId',
         async lazy() {
-          return { Component: (await NotesFeedPage()).NotesFeedPage };
+          return { Component: (await NotePage()).NotePage };
         },
       },
       {

templates/react-shadcn/src/pages/note/index.tsx

@@ -0,0 +1,13 @@
+import { useParams } from 'react-router-dom';
+
+import { NoteByNoteId } from '@/features/note-widget';
+
+export const NotePage = () => {
+  const { noteId } = useParams();
+
+  return (
+    <div className="pt-2">
+      <NoteByNoteId noteId={noteId} />
+    </div>
+  );
+};