From babcd8698e3bcda4f1cece9a97b06b09e51b0751 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Wed, 2 Aug 2023 14:48:51 +0700 Subject: [PATCH] wip: port more component to new ui --- src/app/auth/reset.tsx | 110 ++++++------ src/app/auth/unlock.tsx | 14 +- src/app/chats/components/modal.tsx | 155 +++++++--------- src/app/chats/components/unknowns.tsx | 154 +++++++--------- src/app/space/index.tsx | 2 +- src/app/trending/components/profile.tsx | 40 ++--- src/app/trending/components/trendingNotes.tsx | 8 +- .../trending/components/trendingProfiles.tsx | 6 +- src/app/trending/index.tsx | 2 +- src/index.css | 2 +- src/shared/composer/composer.tsx | 25 ++- src/shared/composer/modal.tsx | 92 ++++------ src/shared/composer/user.tsx | 16 +- src/shared/logout.tsx | 142 ++++++--------- src/shared/navigation.tsx | 5 +- src/shared/notes/actions/reaction.tsx | 10 +- src/shared/notes/mentions/note.tsx | 2 +- src/shared/notes/preview/link.tsx | 5 +- src/shared/notification/modal.tsx | 12 +- src/shared/user.tsx | 167 +++++++++--------- 20 files changed, 410 insertions(+), 559 deletions(-) diff --git a/src/app/auth/reset.tsx b/src/app/auth/reset.tsx index e3ba0417..36691c13 100644 --- a/src/app/auth/reset.tsx +++ b/src/app/auth/reset.tsx @@ -102,74 +102,64 @@ export function ResetScreen() { return (
-
-

Reset unlock password

+
+

Reset unlock password

-
-
-
- -
- -
+ +
+ +
+
-
- -
- - -
- - {errors.password &&

{errors.password.message}

} - -
-
+
+
+ +
+
- -
+ + {errors.password &&

{errors.password.message}

} + +
+
+ +
+
); diff --git a/src/app/auth/unlock.tsx b/src/app/auth/unlock.tsx index e46ba2c4..0dd45ad3 100644 --- a/src/app/auth/unlock.tsx +++ b/src/app/auth/unlock.tsx @@ -84,7 +84,7 @@ export function UnlockScreen() {

Enter password to unlock

-
+
{passwordInput === 'password' ? ( - + ) : ( - + )}
diff --git a/src/app/chats/components/modal.tsx b/src/app/chats/components/modal.tsx index eb7abc43..c37eaad1 100644 --- a/src/app/chats/components/modal.tsx +++ b/src/app/chats/components/modal.tsx @@ -1,5 +1,5 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment, useState } from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { User } from '@app/auth/components/user'; @@ -10,114 +10,79 @@ import { useAccount } from '@utils/hooks/useAccount'; export function NewMessageModal() { const navigate = useNavigate(); - const [isOpen, setIsOpen] = useState(false); + const [open, setOpen] = useState(false); const { status, account } = useAccount(); + const follows = account ? JSON.parse(account.follows as string) : []; - const closeModal = () => { - setIsOpen(false); - }; - - const openModal = () => { - setIsOpen(true); - }; - const openChat = (pubkey: string) => { - closeModal(); + setOpen(false); navigate(`/app/chats/${pubkey}`); }; return ( - <> - - - - -
- -
- - -
-
-
- - New chat - + + + + + + + +
+
+
+
+ + New chat + + + + +
+ + All messages will be encrypted, but anyone can see who you chat + +
+
+
+ {status === 'loading' ? ( +
+ +
+ ) : ( + follows.map((follow) => ( +
+ +
- - All messages will be encrypted, but anyone can see who you chat -
-
-
- {status === 'loading' ? ( -
- -
- ) : ( - follows.map((follow) => ( -
- -
- -
-
- )) - )} -
- - + )) + )} +
-
- - + + + ); } diff --git a/src/app/chats/components/unknowns.tsx b/src/app/chats/components/unknowns.tsx index 92a33d0c..b838b918 100644 --- a/src/app/chats/components/unknowns.tsx +++ b/src/app/chats/components/unknowns.tsx @@ -1,115 +1,81 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment, useState } from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { User } from '@app/auth/components/user'; -import { CancelIcon, StrangersIcon } from '@shared/icons'; +import { CancelIcon, PlusIcon } from '@shared/icons'; import { compactNumber } from '@utils/number'; import { Chats } from '@utils/types'; export function UnknownsModal({ data }: { data: Chats[] }) { const navigate = useNavigate(); - const [isOpen, setIsOpen] = useState(false); - - const closeModal = () => { - setIsOpen(false); - }; - - const openModal = () => { - setIsOpen(true); - }; + const [open, setOpen] = useState(false); const openChat = (pubkey: string) => { - closeModal(); + setOpen(false); navigate(`/app/chats/${pubkey}`); }; return ( - <> - - - - -
- -
- - -
-
-
- - {data.length} unknowns - - -
- - All messages from people you not follow - + + + + + + + +
+
+
+
+ + {data.length} unknowns + + + + +
+ + All messages from people you not follow + +
+
+
+ {data.map((user) => ( +
+ +
+
-
- {data.map((user) => ( -
- -
- -
-
- ))} -
- - + ))} +
-
- - + + + ); } diff --git a/src/app/space/index.tsx b/src/app/space/index.tsx index d3db038a..7c38de10 100644 --- a/src/app/space/index.tsx +++ b/src/app/space/index.tsx @@ -85,7 +85,7 @@ export function SpaceScreen() {
-
+
); } diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx index d5f9da25..bfe84f0e 100644 --- a/src/app/trending/components/profile.tsx +++ b/src/app/trending/components/profile.tsx @@ -58,21 +58,19 @@ export function Profile({ data }: { data: any }) { ); return ( -
+
-
- -
+
-

+

{profile.display_name || profile.name}

-

+

{profile.nip05 || shortenKey(data.pubkey)}

@@ -81,15 +79,15 @@ export function Profile({ data }: { data: any }) { {socialStatus === 'loading' ? ( ) : followed ? ( @@ -97,7 +95,7 @@ export function Profile({ data }: { data: any }) { @@ -105,7 +103,7 @@ export function Profile({ data }: { data: any }) {
-

+

{profile.about || profile.bio}

@@ -115,26 +113,26 @@ export function Profile({ data }: { data: any }) { ) : (
- + {userStats.stats[data.pubkey].followers_pubkey_count ?? 0} - Followers + Followers
- + {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0} - Following + Following
- + {userStats.stats[data.pubkey].zaps_received ? compactNumber.format( userStats.stats[data.pubkey].zaps_received.msats / 1000 ) : 0} - Zaps received + Zaps received
)} diff --git a/src/app/trending/components/trendingNotes.tsx b/src/app/trending/components/trendingNotes.tsx index b41e6c8c..a33205f9 100644 --- a/src/app/trending/components/trendingNotes.tsx +++ b/src/app/trending/components/trendingNotes.tsx @@ -14,18 +14,18 @@ export function TrendingNotes() { }); return ( -
+
-
+
{error &&

Failed to fetch

} {status === 'loading' ? (
-
+
) : ( -
+
{data.notes.map((item) => ( ))} diff --git a/src/app/trending/components/trendingProfiles.tsx b/src/app/trending/components/trendingProfiles.tsx index f66f8307..96ea0e60 100644 --- a/src/app/trending/components/trendingProfiles.tsx +++ b/src/app/trending/components/trendingProfiles.tsx @@ -15,9 +15,9 @@ export function TrendingProfiles() { }); return ( -
+
-
+
{error &&

Failed to fetch

} {status === 'loading' ? (
@@ -26,7 +26,7 @@ export function TrendingProfiles() {
) : ( -
+
{data.profiles.map((item) => ( ))} diff --git a/src/app/trending/index.tsx b/src/app/trending/index.tsx index 284e9ea6..52dc4905 100644 --- a/src/app/trending/index.tsx +++ b/src/app/trending/index.tsx @@ -3,7 +3,7 @@ import { TrendingProfiles } from '@app/trending/components/trendingProfiles'; export function TrendingScreen() { return ( -
+
diff --git a/src/index.css b/src/index.css index 57d3e5af..229c68cd 100644 --- a/src/index.css +++ b/src/index.css @@ -19,7 +19,7 @@ button { } .ProseMirror p.is-empty::before { - @apply text-zinc-500; + @apply text-white/50; content: attr(data-placeholder); float: left; height: 0; diff --git a/src/shared/composer/composer.tsx b/src/shared/composer/composer.tsx index 7ba47db7..a8b7e956 100644 --- a/src/shared/composer/composer.tsx +++ b/src/shared/composer/composer.tsx @@ -14,7 +14,6 @@ import { CancelIcon, LoaderIcon, PlusCircleIcon } from '@shared/icons'; import { MentionNote } from '@shared/notes'; import { useComposer } from '@stores/composer'; -import { FULL_RELAYS } from '@stores/constants'; import { usePublish } from '@utils/hooks/usePublish'; import { useImageUploader } from '@utils/hooks/useUploader'; @@ -45,7 +44,7 @@ export function Composer() { Image.configure({ HTMLAttributes: { class: - 'rounded-lg w-2/3 h-auto border border-zinc-800 outline outline-2 outline-offset-0 outline-zinc-700 ml-1', + 'rounded-lg w-2/3 h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1', }, }), ], @@ -54,7 +53,7 @@ export function Composer() { attributes: { class: twMerge( 'scrollbar-hide markdown break-all max-h-[500px] overflow-y-auto outline-none pr-2', - `${reply.id ? '!min-h-42' : '!min-h-[100px]'}` + `${reply.id ? '!min-h-42' : '!min-h-[120px]'}` ), }, }, @@ -88,13 +87,13 @@ export function Composer() { if (reply.id && reply.pubkey) { if (reply.root && reply.root.length > 1) { tags = [ - ['e', reply.root, FULL_RELAYS[0], 'root'], - ['e', reply.id, FULL_RELAYS[0], 'reply'], + ['e', reply.root, 'wss://relayable.org', 'root'], + ['e', reply.id, 'wss://relayable.org', 'reply'], ['p', reply.pubkey], ]; } else { tags = [ - ['e', reply.id, FULL_RELAYS[0], 'reply'], + ['e', reply.id, 'wss://relayable.org', 'reply'], ['p', reply.pubkey], ]; } @@ -131,7 +130,7 @@ export function Composer() {
-
+
clearReply()} - className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center gap-2 rounded bg-zinc-800 px-2 hover:bg-zinc-700" + className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2" > - +
)} @@ -159,15 +158,15 @@ export function Composer() {
diff --git a/src/shared/composer/modal.tsx b/src/shared/composer/modal.tsx index ac8287f0..f3a0e4f8 100644 --- a/src/shared/composer/modal.tsx +++ b/src/shared/composer/modal.tsx @@ -1,5 +1,4 @@ -import { Dialog, Transition } from '@headlessui/react'; -import { Fragment } from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; import { useHotkeys } from 'react-hotkeys-hook'; import { Button } from '@shared/button'; @@ -27,64 +26,39 @@ export function ComposerModal() { useHotkeys(COMPOSE_SHORTCUT, () => toggle(true)); return ( - <> - - - - -
- -
- - -
-
- {account && } - - - -
- New Post - -
-
- + + + + + + + +
+
+
+ {account && } + + + +
+ New Post +
- - - +
+ closeModal()} + className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-zinc-800" + > + + +
+
-
- - + + + ); } diff --git a/src/shared/composer/user.tsx b/src/shared/composer/user.tsx index 75cea627..a85afd74 100644 --- a/src/shared/composer/user.tsx +++ b/src/shared/composer/user.tsx @@ -9,15 +9,13 @@ export function ComposerUser({ pubkey }: { pubkey: string }) { return (
-
- {pubkey} -
-
+ {pubkey} +
{user?.nip05 || user?.name || (
)} diff --git a/src/shared/logout.tsx b/src/shared/logout.tsx index c51d9325..a1056189 100644 --- a/src/shared/logout.tsx +++ b/src/shared/logout.tsx @@ -1,4 +1,4 @@ -import { Dialog, Transition } from '@headlessui/react'; +import * as Dialog from '@radix-ui/react-dialog'; import { useQueryClient } from '@tanstack/react-query'; import { relaunch } from '@tauri-apps/plugin-process'; import { Fragment, useState } from 'react'; @@ -29,91 +29,63 @@ export function Logout() { }; return ( - <> - - - - -
- -
- - -
-
-
- - Are you sure! - - -
- -

- When logout, all local data will be wiped, and restart app then - you need to start onboarding process again when you log in. -

-

- In the next version, Lume will support multi account, then you can - switch between all account s instead of logout -

- -
+ + + + + + + +
+
+
+
+ + Are you sure! + + + +
-
-
- - -
-
- - + +

+ When logout, all local data will be wiped, and restart app then you + need to start onboarding process again when you log in. +

+

+ In the next version, Lume will support multi account, then you can + switch between all account s instead of logout +

+ +
+
+
+
+ + +
+
-
- - + + + ); } diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx index 247fa442..707b9d68 100644 --- a/src/shared/navigation.tsx +++ b/src/shared/navigation.tsx @@ -23,6 +23,7 @@ export function Navigation() { return (
+
@@ -53,7 +54,7 @@ export function Navigation() { open ? '' : 'rotate-180' )} > - +

Feeds @@ -106,7 +107,7 @@ export function Navigation() { open ? '' : 'rotate-180' )} > - +

Chats diff --git a/src/shared/notes/actions/reaction.tsx b/src/shared/notes/actions/reaction.tsx index 6c7906fa..d0c56dfe 100644 --- a/src/shared/notes/actions/reaction.tsx +++ b/src/shared/notes/actions/reaction.tsx @@ -80,7 +80,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) { - -
- -
+ + +
+
@@ -96,8 +96,8 @@ export function NotificationModal({ pubkey }: { pubkey: string }) { data.map((event) => renderItem(event)) )}
- -
+
+ ); diff --git a/src/shared/user.tsx b/src/shared/user.tsx index c82613e9..98da8f94 100644 --- a/src/shared/user.tsx +++ b/src/shared/user.tsx @@ -1,6 +1,6 @@ -import { Popover, Transition } from '@headlessui/react'; -import { Fragment } from 'react'; +import * as Popover from '@radix-ui/react-popover'; import { Link } from 'react-router-dom'; +import { twMerge } from 'tailwind-merge'; import { VerticalDotsIcon } from '@shared/icons'; import { Image } from '@shared/image'; @@ -9,7 +9,7 @@ import { DEFAULT_AVATAR } from '@stores/constants'; import { formatCreatedAt } from '@utils/createdAt'; import { useProfile } from '@utils/hooks/useProfile'; -import { shortenKey } from '@utils/shortenKey'; +import { displayNpub, shortenKey } from '@utils/shortenKey'; export function User({ pubkey, @@ -50,99 +50,94 @@ export function User({ } return ( - - - {pubkey} - +
-
- {user?.nip05?.toLowerCase() || - user?.name || - user?.display_name || - shortenKey(pubkey)} -
-
- {createdAt} + + +
+
+ {user?.nip05?.toLowerCase() || + user?.name || + user?.display_name || + shortenKey(pubkey)} +
+ {createdAt}
- - -
-
- {pubkey} -
-
-
- {user?.displayName || user?.name || ( -
- )} -
- - {user?.nip05 || shortenKey(pubkey)} - -
-
-

- {user?.about} -

-
+ + +
+ {pubkey} +
+
+
+ {user?.displayName || user?.name} +
+ + {user?.nip05 || displayNpub(pubkey, 16)} + +
+
+

+ {user?.about} +

-
- - View profile - - - Message - -
- - - +
+ + View profile + + + Message + +
+ + + ); }