From c049fa88651c73623b1bd1778d22879c8202de8d Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Sun, 24 Sep 2023 15:42:49 +0700 Subject: [PATCH] wip: update browse user screen --- package.json | 2 + pnpm-lock.yaml | 48 ++++++++++++++++++++++ src/app/browse/components/userDrawer.tsx | 42 ++++++++++--------- src/app/browse/components/userDropable.tsx | 22 ++++++++++ src/app/browse/index.tsx | 2 +- src/app/browse/users.tsx | 31 ++++++++++---- src/index.css | 4 ++ src/shared/user.tsx | 4 ++ 8 files changed, 128 insertions(+), 27 deletions(-) create mode 100644 src/app/browse/components/userDropable.tsx diff --git a/package.json b/package.json index 5ffc56ba..2dc4681f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "**/*.{ts, tsx, css, md, html, json}": "prettier --cache --write" }, "dependencies": { + "@dnd-kit/core": "^6.0.8", "@getalby/sdk": "^2.4.0", "@nostr-dev-kit/ndk": "^1.2.1", "@nostr-fetch/adapter-ndk": "^0.12.2", @@ -57,6 +58,7 @@ "react-router-dom": "^6.16.0", "react-textarea-autosize": "^8.5.3", "react-virtuoso": "^4.6.0", + "react-zoom-pan-pinch": "^3.1.0", "remark-gfm": "^3.0.1", "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql#v1", "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 18dafd98..665e47b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@dnd-kit/core': + specifier: ^6.0.8 + version: 6.0.8(react-dom@18.2.0)(react@18.2.0) '@getalby/sdk': specifier: ^2.4.0 version: 2.4.0 @@ -122,6 +125,9 @@ dependencies: react-virtuoso: specifier: ^4.6.0 version: 4.6.0(react-dom@18.2.0)(react@18.2.0) + react-zoom-pan-pinch: + specifier: ^3.1.0 + version: 3.1.0(react-dom@18.2.0)(react@18.2.0) remark-gfm: specifier: ^3.0.1 version: 3.0.1 @@ -374,6 +380,37 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@dnd-kit/accessibility@3.0.1(react@18.2.0): + resolution: {integrity: sha512-HXRrwS9YUYQO9lFRc/49uO/VICbM+O+ZRpFDe9Pd1rwVv2PCNkRiTZRdxrDgng/UkvdC3Re9r2vwPpXXrWeFzg==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + + /@dnd-kit/core@6.0.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-lYaoP8yHTQSLlZe6Rr9qogouGUz9oRUj4AHhDQGQzq/hqaJRpFo65X+JKsdHf8oUFBzx5A+SJPUvxAwTF2OabA==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@dnd-kit/accessibility': 3.0.1(react@18.2.0) + '@dnd-kit/utilities': 3.2.1(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.6.2 + dev: false + + /@dnd-kit/utilities@3.2.1(react@18.2.0): + resolution: {integrity: sha512-OOXqISfvBw/1REtkSK2N3Fi2EQiLMlWUlqnOK/UpOISqBZPWpE6TqL+jcPtMOkE8TqYGiURvRdPSI9hltNUjEA==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 18.2.0 + tslib: 2.6.2 + dev: false + /@emotion/babel-plugin@11.11.0: resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==} dependencies: @@ -5407,6 +5444,17 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-zoom-pan-pinch@3.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-a3LlP8QPgTikvteCNkZ3X6wIWC0lrg1geP5WkUJyx2MXXAhHQek3r17N1nT/esOiWGuPIECnsd9AGoK8jOeGcg==} + engines: {node: '>=8', npm: '>=5'} + peerDependencies: + react: '*' + react-dom: '*' + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/src/app/browse/components/userDrawer.tsx b/src/app/browse/components/userDrawer.tsx index 9ad9d8ed..f4234a2a 100644 --- a/src/app/browse/components/userDrawer.tsx +++ b/src/app/browse/components/userDrawer.tsx @@ -1,10 +1,10 @@ +import { useDraggable } from '@dnd-kit/core'; import * as Dialog from '@radix-ui/react-dialog'; import { memo, useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useStorage } from '@libs/storage/provider'; -import { PlusIcon } from '@shared/icons'; import { Image } from '@shared/image'; import { NIP05 } from '@shared/nip05'; import { TextNote } from '@shared/notes'; @@ -18,9 +18,19 @@ export const UserDrawer = memo(function UserDrawer({ pubkey }: { pubkey: string const { db } = useStorage(); const { status, user } = useProfile(pubkey); const { addContact, removeContact } = useNostr(); + const { attributes, listeners, setNodeRef, transform } = useDraggable({ + id: pubkey, + }); const [followed, setFollowed] = useState(false); + const style = transform + ? { + transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`, + zIndex: 20, + } + : undefined; + const followUser = (pubkey: string) => { try { addContact(pubkey); @@ -51,26 +61,20 @@ export const UserDrawer = memo(function UserDrawer({ pubkey }: { pubkey: string return ( -
- - - -
-
- -
-
-
+ + + -
+
{status === 'loading' ? (

Loading...

diff --git a/src/app/browse/components/userDropable.tsx b/src/app/browse/components/userDropable.tsx new file mode 100644 index 00000000..b642f5a2 --- /dev/null +++ b/src/app/browse/components/userDropable.tsx @@ -0,0 +1,22 @@ +import { useDroppable } from '@dnd-kit/core'; +import { twMerge } from 'tailwind-merge'; + +import { PlusIcon } from '@shared/icons'; + +export function UserDropable() { + const { isOver, setNodeRef } = useDroppable({ + id: 'newBlock', + }); + + return ( +
+ +
+ ); +} diff --git a/src/app/browse/index.tsx b/src/app/browse/index.tsx index a98e4b50..56db7b7d 100644 --- a/src/app/browse/index.tsx +++ b/src/app/browse/index.tsx @@ -37,7 +37,7 @@ export function BrowseScreen() {
-
+
diff --git a/src/app/browse/users.tsx b/src/app/browse/users.tsx index d5e4d079..522b003e 100644 --- a/src/app/browse/users.tsx +++ b/src/app/browse/users.tsx @@ -1,6 +1,8 @@ +import { DndContext } from '@dnd-kit/core'; import { useMemo } from 'react'; import { UserDrawer } from '@app/browse/components/userDrawer'; +import { UserDropable } from '@app/browse/components/userDropable'; import { useStorage } from '@libs/storage/provider'; @@ -10,16 +12,31 @@ import { getMultipleRandom } from '@utils/transform'; export function BrowseUsersScreen() { const { db } = useStorage(); + const data = useMemo(() => getMultipleRandom(db.account.follows, 10), []); + const handleDragEnd = (event) => { + console.log(event.id); + }; + return ( -
- -
- {data.map((user) => ( - - ))} + +
+
+
+

Follows

+
+ {data.map((user) => ( + + ))} +
+
+
+ + +
+
-
+ ); } diff --git a/src/index.css b/src/index.css index 1fa57e42..645cad4a 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +.border { + background-clip: padding-box; +} + .scrollbar-hide::-webkit-scrollbar { display: none; } diff --git a/src/shared/user.tsx b/src/shared/user.tsx index 9bf7a764..f086c748 100644 --- a/src/shared/user.tsx +++ b/src/shared/user.tsx @@ -35,6 +35,10 @@ export const User = memo(function User({ const createdAt = time ? formatCreatedAt(time, variant === 'chat') : 0; if (status === 'loading') { + if (variant === 'avatar') { +
; + } + if (variant === 'mention') { return (