diff --git a/.prettierrc b/.prettierrc index a1b792e6..830b7364 100644 --- a/.prettierrc +++ b/.prettierrc @@ -14,6 +14,7 @@ "^@components/(.*)$", "^@stores/(.*)$", "^@utils/(.*)$", + "^@assets/(.*)$", "", "^[./]" ], diff --git a/package.json b/package.json index 9a4b11b3..021c2f41 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@radix-ui/react-dialog": "^1.0.3", "@radix-ui/react-dropdown-menu": "^2.0.4", "@radix-ui/react-icons": "^1.2.0", + "@radix-ui/react-popover": "^1.0.5", "@radix-ui/react-tabs": "^1.0.3", "@rehooks/local-storage": "^2.4.4", "@supabase/supabase-js": "^2.10.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d3065de6..2f32817b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,7 @@ specifiers: '@radix-ui/react-dialog': ^1.0.3 '@radix-ui/react-dropdown-menu': ^2.0.4 '@radix-ui/react-icons': ^1.2.0 + '@radix-ui/react-popover': ^1.0.5 '@radix-ui/react-tabs': ^1.0.3 '@rehooks/local-storage': ^2.4.4 '@supabase/supabase-js': ^2.10.0 @@ -59,6 +60,7 @@ dependencies: '@radix-ui/react-dialog': 1.0.3_zula6vjvt3wdocc4mwcxqa6nzi '@radix-ui/react-dropdown-menu': 2.0.4_zula6vjvt3wdocc4mwcxqa6nzi '@radix-ui/react-icons': 1.2.0_react@18.2.0 + '@radix-ui/react-popover': 1.0.5_zula6vjvt3wdocc4mwcxqa6nzi '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y '@rehooks/local-storage': 2.4.4_react@18.2.0 '@supabase/supabase-js': 2.10.0 @@ -952,6 +954,35 @@ packages: - '@types/react' dev: false + /@radix-ui/react-popover/1.0.5_zula6vjvt3wdocc4mwcxqa6nzi: + resolution: + { integrity: sha512-GRHZ8yD12MrN2NLobHPE8Rb5uHTxd9x372DE9PPNnBjpczAQHcZ5ne0KXG4xpf+RDdXSzdLv9ym6mYJCDTaUZg== } + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + dependencies: + '@babel/runtime': 7.21.0 + '@radix-ui/primitive': 1.0.0 + '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0 + '@radix-ui/react-context': 1.0.0_react@18.2.0 + '@radix-ui/react-dismissable-layer': 1.0.3_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0 + '@radix-ui/react-focus-scope': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-id': 1.0.0_react@18.2.0 + '@radix-ui/react-popper': 1.1.1_zula6vjvt3wdocc4mwcxqa6nzi + '@radix-ui/react-portal': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-presence': 1.0.0_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-primitive': 1.0.2_biqbaboplfbrettd7655fr4n2y + '@radix-ui/react-slot': 1.0.1_react@18.2.0 + '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0 + aria-hidden: 1.2.3 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + react-remove-scroll: 2.5.5_pmekkgnqduwlme35zpnqhenc34 + transitivePeerDependencies: + - '@types/react' + dev: false + /@radix-ui/react-popper/1.1.1_zula6vjvt3wdocc4mwcxqa6nzi: resolution: { integrity: sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w== } diff --git a/src/assets/icons/comment.tsx b/src/assets/icons/comment.tsx new file mode 100644 index 00000000..aeab9590 --- /dev/null +++ b/src/assets/icons/comment.tsx @@ -0,0 +1,18 @@ +export default function CommentIcon({ className }: { className: string }) { + return ( + + + + ); +} diff --git a/src/assets/icons/like.tsx b/src/assets/icons/like.tsx new file mode 100644 index 00000000..686c9c87 --- /dev/null +++ b/src/assets/icons/like.tsx @@ -0,0 +1,18 @@ +export default function LikeIcon({ className }: { className: string }) { + return ( + + + + ); +} diff --git a/src/assets/icons/liked.tsx b/src/assets/icons/liked.tsx new file mode 100644 index 00000000..d5c0e920 --- /dev/null +++ b/src/assets/icons/liked.tsx @@ -0,0 +1,7 @@ +export default function LikedIcon({ className }: { className: string }) { + return ( + + + + ); +} diff --git a/src/components/columns/account/active.tsx b/src/components/columns/account/active.tsx index 24fcb139..fdbce148 100644 --- a/src/components/columns/account/active.tsx +++ b/src/components/columns/account/active.tsx @@ -69,7 +69,7 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any } Logout - diff --git a/src/components/note/content/index.tsx b/src/components/note/content/index.tsx index ab63320e..55df8dad 100644 --- a/src/components/note/content/index.tsx +++ b/src/components/note/content/index.tsx @@ -70,7 +70,7 @@ export const Content = memo(function Content({ data }: { data: any }) { <>{previewAttachment()} - + diff --git a/src/components/note/content/metadata.tsx b/src/components/note/content/metadata.tsx index 5a533e4a..a7d72763 100644 --- a/src/components/note/content/metadata.tsx +++ b/src/components/note/content/metadata.tsx @@ -5,7 +5,17 @@ import { LikesCounter } from '@components/note/counter/likes'; import { useLocalStorage } from '@rehooks/local-storage'; import { useContext, useMemo, useState } from 'react'; -export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) { +export default function NoteMetadata({ + eventID, + eventPubkey, + eventContent, + eventTime, +}: { + eventID: string; + eventPubkey: string; + eventTime: string; + eventContent: any; +}) { const relayPool: any = useContext(RelayContext); const [relays]: any = useLocalStorage('relays'); @@ -46,8 +56,14 @@ export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string return (
- - + +
); } diff --git a/src/components/note/counter/comments.tsx b/src/components/note/counter/comments.tsx index 7ac24662..5303b9b4 100644 --- a/src/components/note/counter/comments.tsx +++ b/src/components/note/counter/comments.tsx @@ -1,25 +1,175 @@ -import { memo } from 'react'; +import { RelayContext } from '@components/contexts/relay'; +import { ImageWithFallback } from '@components/imageWithFallback'; +import { UserExtend } from '@components/user/extend'; + +import { dateToUnix } from '@utils/getDate'; + +import CommentIcon from '@assets/icons/comment'; + +import * as Dialog from '@radix-ui/react-dialog'; +import { SizeIcon } from '@radix-ui/react-icons'; +import useLocalStorage from '@rehooks/local-storage'; +import { useRouter } from 'next/router'; +import { getEventHash, signEvent } from 'nostr-tools'; +import { memo, useContext, useState } from 'react'; + +export const CommentsCounter = memo(function CommentsCounter({ + count, + eventID, + eventPubkey, + eventContent, + eventTime, +}: { + count: number; + eventID: string; + eventPubkey: string; + eventTime: string; + eventContent: any; +}) { + const router = useRouter(); + const relayPool: any = useContext(RelayContext); + + const [relays]: any = useLocalStorage('relays'); + const [currentUser]: any = useLocalStorage('current-user'); + + const [open, setOpen] = useState(false); + const [value, setValue] = useState(''); + + const profile = JSON.parse(currentUser.metadata); + + const openThread = () => { + router.push({ + pathname: '/newsfeed/thread', + query: { id: eventID }, + }); + }; + + const submitEvent = () => { + const event: any = { + content: value, + created_at: dateToUnix(), + kind: 1, + pubkey: currentUser.id, + tags: [['e', eventID]], + }; + event.id = getEventHash(event); + event.sig = signEvent(event, currentUser.privkey); + + relayPool.publish(event, relays); + setOpen(false); + }; -export const CommentsCounter = memo(function CommentsCounter({ comments }: { comments: number }) { return ( -
-
- - - -
- {comments} -
+ + + + + + + +
+
+ {/* root note */} +
+
+ +
+
+
+ {eventContent} +
+
+ {/* divider */} +
+
+ {/* comment form */} +
+
+
+ +
+
+
+
+