From e86cd16ba48837c35180ee98072bc34529edb259 Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 2 May 2023 21:23:00 +0700 Subject: [PATCH] update navigation design --- src/app/channel/components/createModal.tsx | 4 +- src/app/channel/components/item.tsx | 13 ++-- src/app/channel/components/list.tsx | 33 ++++----- src/app/chat/components/item.tsx | 6 +- src/app/chat/components/list.tsx | 33 ++++----- src/app/chat/components/self.tsx | 9 +-- src/shared/icons/myspace.tsx | 15 ++++ src/shared/icons/threads.tsx | 12 ++++ src/shared/icons/world.tsx | 15 ++++ src/shared/multiAccounts.tsx | 9 +-- src/shared/navigation.tsx | 84 ++++++++++++---------- src/shared/preview/image.tsx | 14 ---- src/shared/preview/video.tsx | 14 ---- src/shared/preview/youtube.tsx | 19 ----- src/utils/hooks/useDecryptMessage.tsx | 6 +- 15 files changed, 134 insertions(+), 152 deletions(-) create mode 100644 src/shared/icons/myspace.tsx create mode 100644 src/shared/icons/threads.tsx create mode 100644 src/shared/icons/world.tsx delete mode 100644 src/shared/preview/image.tsx delete mode 100644 src/shared/preview/video.tsx delete mode 100644 src/shared/preview/youtube.tsx diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx index b98f5fcc..86f80cdd 100644 --- a/src/app/channel/components/createModal.tsx +++ b/src/app/channel/components/createModal.tsx @@ -82,13 +82,13 @@ export default function ChannelCreateModal() { diff --git a/src/app/channel/components/item.tsx b/src/app/channel/components/item.tsx index da5a5351..34c7d19a 100644 --- a/src/app/channel/components/item.tsx +++ b/src/app/channel/components/item.tsx @@ -1,4 +1,3 @@ -import { DEFAULT_AVATAR } from '@lume/stores/constants'; import { useChannelProfile } from '@lume/utils/hooks/useChannelProfile'; import { usePageContext } from '@lume/utils/hooks/usePageContext'; @@ -15,19 +14,15 @@ export default function ChannelsListItem({ data }: { data: any }) { -
- {data.event_id} +
+ #
-
{channel?.name}
+
{channel?.name}
 ); diff --git a/src/app/channel/components/list.tsx b/src/app/channel/components/list.tsx index 51774237..a93dc98c 100644 --- a/src/app/channel/components/list.tsx +++ b/src/app/channel/components/list.tsx @@ -10,24 +10,21 @@ export default function ChannelsList() { const { data, error }: any = useSWR('channels', fetcher); return ( -
- <> - {error &&
failed to fetch
} - {!data ? ( - <> -
-
-
-
-
-
-
-
- - ) : ( - data.map((item: { event_id: string }) => ) - )} - +
+ {!data || error ? ( + <> +
+
+
+
+
+
+
+
+ + ) : ( + data.map((item: { event_id: string }) => ) + )}
); diff --git a/src/app/chat/components/item.tsx b/src/app/chat/components/item.tsx index b8bd7aa3..5723c883 100644 --- a/src/app/chat/components/item.tsx +++ b/src/app/chat/components/item.tsx @@ -17,7 +17,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) { <> {isError &&
error
} {isLoading && !user ? ( -
+
@@ -27,7 +27,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) { @@ -35,7 +35,7 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) { {pubkey}
-
+
{user.display_name || user.name || shortenKey(pubkey)}
diff --git a/src/app/chat/components/list.tsx b/src/app/chat/components/list.tsx index 8b7ea009..adb3df4d 100644 --- a/src/app/chat/components/list.tsx +++ b/src/app/chat/components/list.tsx @@ -13,24 +13,21 @@ export default function ChatsList() { return (
- <> - - {error &&
failed to fetch
} - {!chats ? ( - <> -
-
-
-
-
-
-
-
- - ) : ( - chats.map((item: { pubkey: string }) => ) - )} - + + {!chats || error ? ( + <> +
+
+
+
+
+
+
+
+ + ) : ( + chats.map((item: { pubkey: string }) => ) + )}
); } diff --git a/src/app/chat/components/self.tsx b/src/app/chat/components/self.tsx index e97a2a29..476e7e32 100644 --- a/src/app/chat/components/self.tsx +++ b/src/app/chat/components/self.tsx @@ -18,7 +18,7 @@ export default function ChatsListSelfItem() { <> {isError &&
error
} {isLoading && !account ? ( -
+
-
- {profile?.display_name || profile?.name || shortenKey(account.pubkey)} (you) +
+ {profile?.display_name || profile?.name || shortenKey(account.pubkey)}{' '} + (you)
diff --git a/src/shared/icons/myspace.tsx b/src/shared/icons/myspace.tsx new file mode 100644 index 00000000..bf12582a --- /dev/null +++ b/src/shared/icons/myspace.tsx @@ -0,0 +1,15 @@ +import { SVGProps } from 'react'; + +export default function MyspaceIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/threads.tsx b/src/shared/icons/threads.tsx new file mode 100644 index 00000000..38d4de45 --- /dev/null +++ b/src/shared/icons/threads.tsx @@ -0,0 +1,12 @@ +import { SVGProps } from 'react'; + +export default function ThreadsIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/world.tsx b/src/shared/icons/world.tsx new file mode 100644 index 00000000..22849665 --- /dev/null +++ b/src/shared/icons/world.tsx @@ -0,0 +1,15 @@ +import { SVGProps } from 'react'; + +export default function WorldIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/multiAccounts.tsx b/src/shared/multiAccounts.tsx index aa5aca91..c2a63717 100644 --- a/src/shared/multiAccounts.tsx +++ b/src/shared/multiAccounts.tsx @@ -1,6 +1,5 @@ import ActiveAccount from '@lume/shared/accounts/active'; import InactiveAccount from '@lume/shared/accounts/inactive'; -import LumeIcon from '@lume/shared/icons/lume'; import PlusIcon from '@lume/shared/icons/plus'; import { APP_VERSION } from '@lume/stores/constants'; import { getAccounts } from '@lume/utils/storage'; @@ -13,14 +12,8 @@ export default function MultiAccounts() { const { data, error }: any = useSWR('allAccounts', fetcher); return ( -
+
- - - <> {error &&
failed to load
} {!data ? ( diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx index f0a23d3e..0bec15a2 100644 --- a/src/shared/navigation.tsx +++ b/src/shared/navigation.tsx @@ -1,53 +1,59 @@ import ChannelsList from '@lume/app/channel/components/list'; import ChatsList from '@lume/app/chat/components/list'; import ActiveLink from '@lume/shared/activeLink'; +import MyspaceIcon from '@lume/shared/icons/myspace'; import NavArrowDownIcon from '@lume/shared/icons/navArrowDown'; +import ThreadsIcon from '@lume/shared/icons/threads'; +import WorldIcon from '@lume/shared/icons/world'; import { Disclosure } from '@headlessui/react'; export default function Navigation() { return ( -
+
{/* Newsfeed */} - - {({ open }) => ( -
- -
- -
-

Newsfeed

- - - - # - Following - - - # - Circle - - -
- )} - +
+
+

Feeds

+
+
+ + + + + Daily + + + + + + Threads + + + + + + MySpace + +
+
{/* Channels */} {({ open }) => ( -
- +
+
{({ open }) => ( -
- +
+
- {url} -
- ); -} diff --git a/src/shared/preview/video.tsx b/src/shared/preview/video.tsx deleted file mode 100644 index ec5762bd..00000000 --- a/src/shared/preview/video.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { MediaOutlet, MediaPlayer } from '@vidstack/react'; - -export default function VideoPreview({ url, size }: { url: string; size: string }) { - return ( -
e.stopPropagation()} - className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`} - > - - - -
- ); -} diff --git a/src/shared/preview/youtube.tsx b/src/shared/preview/youtube.tsx deleted file mode 100644 index d5b42ed2..00000000 --- a/src/shared/preview/youtube.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import YouTube from 'react-youtube'; - -function getVideoId(url: string) { - const regex = /(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/gm; - return regex.exec(url)[3]; -} - -export default function YoutubePreview({ url, size }: { url: string; size: string }) { - const id = getVideoId(url); - - return ( -
e.stopPropagation()} - className={`relative mt-2 flex flex-col overflow-hidden rounded-lg ${size === 'large' ? 'w-4/5' : 'w-2/3'}`} - > - -
- ); -} diff --git a/src/utils/hooks/useDecryptMessage.tsx b/src/utils/hooks/useDecryptMessage.tsx index ee2e87bf..4866b2a5 100644 --- a/src/utils/hooks/useDecryptMessage.tsx +++ b/src/utils/hooks/useDecryptMessage.tsx @@ -1,5 +1,3 @@ -import { messageParser } from '@lume/utils/parser'; - import { nip04 } from 'nostr-tools'; import { useCallback, useEffect, useState } from 'react'; @@ -10,7 +8,7 @@ export const useDecryptMessage = ( eventTags: string[], encryptedContent: string ) => { - const [content, setContent] = useState(''); + const [content, setContent] = useState(null); const extractSenderKey = useCallback(() => { const keyInTags = eventTags.find(([k, v]) => k === 'p' && v && v !== '')[1]; @@ -32,5 +30,5 @@ export const useDecryptMessage = ( decrypt().catch(console.error); }, [decrypt]); - return content.length > 0 ? messageParser(content) : ''; + return content ? content : ''; };