From 428d52f1758cc23c911030cc0f968f8edd8a65ad Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Tue, 3 Oct 2023 16:24:09 +0700 Subject: [PATCH] wip --- src/app.tsx | 7 ++ src/app/communities/index.tsx | 7 ++ src/index.css | 4 +- src/shared/icons/explore.tsx | 23 +++++ src/shared/icons/explore2.tsx | 21 +++++ src/shared/icons/home.tsx | 21 +++++ src/shared/icons/index.ts | 3 + src/shared/icons/nwc.tsx | 9 +- src/shared/icons/relay.tsx | 15 +-- src/shared/icons/space.tsx | 15 +-- src/shared/navigation.tsx | 170 +++++++--------------------------- src/stores/sidebar.ts | 4 + src/utils/parser.ts | 8 +- 13 files changed, 146 insertions(+), 161 deletions(-) create mode 100644 src/app/communities/index.tsx create mode 100644 src/shared/icons/explore.tsx create mode 100644 src/shared/icons/explore2.tsx create mode 100644 src/shared/icons/home.tsx diff --git a/src/app.tsx b/src/app.tsx index 748c54d3..201bae85 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -128,6 +128,13 @@ export default function App() { return { Component: RelayScreen }; }, }, + { + path: 'communities', + async lazy() { + const { CommunitiesScreen } = await import('@app/communities'); + return { Component: CommunitiesScreen }; + }, + }, ], }, { diff --git a/src/app/communities/index.tsx b/src/app/communities/index.tsx new file mode 100644 index 00000000..420e920b --- /dev/null +++ b/src/app/communities/index.tsx @@ -0,0 +1,7 @@ +export function CommunitiesScreen() { + return ( +
+

TODO

+
+ ); +} diff --git a/src/index.css b/src/index.css index 0ef94e8f..6d57156e 100644 --- a/src/index.css +++ b/src/index.css @@ -50,11 +50,11 @@ input::-ms-clear { } .markdown { - @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; + @apply prose prose-white max-w-none select-text text-white prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-0 prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; } .markdown-article { - @apply prose prose-white max-w-none select-text hyphens-auto text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; + @apply prose prose-white max-w-none select-text text-white/80 prose-headings:mb-1 prose-headings:mt-3 prose-headings:text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-pre:bg-white/10 prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2; } .markdown-simple { diff --git a/src/shared/icons/explore.tsx b/src/shared/icons/explore.tsx new file mode 100644 index 00000000..90237a10 --- /dev/null +++ b/src/shared/icons/explore.tsx @@ -0,0 +1,23 @@ +import { SVGProps } from 'react'; + +export function ExploreIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + + + + + + + + ); +} diff --git a/src/shared/icons/explore2.tsx b/src/shared/icons/explore2.tsx new file mode 100644 index 00000000..536f3955 --- /dev/null +++ b/src/shared/icons/explore2.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from 'react'; + +export function Explore2Icon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/home.tsx b/src/shared/icons/home.tsx new file mode 100644 index 00000000..13648efd --- /dev/null +++ b/src/shared/icons/home.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from 'react'; + +export function HomeIcon(props: JSX.IntrinsicAttributes & SVGProps) { + return ( + + + + ); +} diff --git a/src/shared/icons/index.ts b/src/shared/icons/index.ts index d0dd3ebc..dbc104cb 100644 --- a/src/shared/icons/index.ts +++ b/src/shared/icons/index.ts @@ -68,3 +68,6 @@ export * from './timeline'; export * from './dots'; export * from './handArrowDown'; export * from './relay'; +export * from './explore'; +export * from './explore2'; +export * from './home'; diff --git a/src/shared/icons/nwc.tsx b/src/shared/icons/nwc.tsx index ed4a434e..e97629a1 100644 --- a/src/shared/icons/nwc.tsx +++ b/src/shared/icons/nwc.tsx @@ -13,10 +13,15 @@ export function NwcIcon(props: JSX.IntrinsicAttributes & SVGProps + - ); } diff --git a/src/shared/icons/relay.tsx b/src/shared/icons/relay.tsx index 3c30c9c6..a8813ed6 100644 --- a/src/shared/icons/relay.tsx +++ b/src/shared/icons/relay.tsx @@ -10,19 +10,12 @@ export function RelayIcon(props: JSX.IntrinsicAttributes & SVGProps - + fillRule="evenodd" + d="M4 5a3 3 0 013-3h10a3 3 0 013 3v11c0 .889-.386 1.687-1 2.236V20a2 2 0 01-2 2H7a2 2 0 01-2-2v-1.75-.014c-.614-.55-1-1.348-1-2.236V5zm3-1a1 1 0 00-1 1v11a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1H7zm0 2a1 1 0 011-1h8a1 1 0 011 1v6a1 1 0 01-1 1H8a1 1 0 01-1-1V6zm6 9a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z" + clipRule="evenodd" + > ); } diff --git a/src/shared/icons/space.tsx b/src/shared/icons/space.tsx index af9a67a7..31b9c70f 100644 --- a/src/shared/icons/space.tsx +++ b/src/shared/icons/space.tsx @@ -3,17 +3,18 @@ import { SVGProps } from 'react'; export function SpaceIcon(props: JSX.IntrinsicAttributes & SVGProps) { return ( ); diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx index 5e1f29d7..65a128df 100644 --- a/src/shared/navigation.tsx +++ b/src/shared/navigation.tsx @@ -1,9 +1,6 @@ -import * as Collapsible from '@radix-ui/react-collapsible'; import { NavLink, useNavigate } from 'react-router-dom'; import { twMerge } from 'tailwind-merge'; -import { ChatsList } from '@app/chats/components/list'; - import { useStorage } from '@libs/storage/provider'; import { ActiveAccount } from '@shared/accounts/active'; @@ -12,30 +9,14 @@ import { Frame } from '@shared/frame'; import { ArrowLeftIcon, ArrowRightIcon, - BellIcon, - NavArrowDownIcon, - NwcIcon, + ExploreIcon, + HomeIcon, RelayIcon, - SpaceIcon, - WorldIcon, } from '@shared/icons'; -import { useActivities } from '@stores/activities'; -import { useSidebar } from '@stores/sidebar'; - -import { compactNumber } from '@utils/number'; - export function Navigation() { const { db } = useStorage(); - const navigate = useNavigate(); - const totalNewActivities = useActivities((state) => state.totalNewActivities); - - const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]); - const [integrations, toggleIntegrations] = useSidebar((state) => [ - state.integrations, - state.toggleIntegrations, - ]); return ( - {db.platform !== 'darwin' ? ( -
- - -
- ) : ( -
- )} +
+ + +
twMerge( - 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3', + 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium', isActive ? 'border-fuchsia-500 bg-white/5 text-white' : 'border-transparent text-white/70' ) } > - - + + Home @@ -95,15 +77,15 @@ export function Navigation() { preventScrollReset={true} className={({ isActive }) => twMerge( - 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3', + 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium', isActive ? 'border-fuchsia-500 bg-white/5 text-white' : 'border-transparent text-white/70' ) } > - - + + Relays @@ -112,107 +94,19 @@ export function Navigation() { preventScrollReset={true} className={({ isActive }) => twMerge( - 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3', + 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3 font-medium', isActive ? 'border-fuchsia-500 bg-white/5 text-white' : 'border-transparent text-white/70' ) } > - - + + Explore - - twMerge( - 'flex h-10 items-center justify-between rounded-r-lg border-l-2 pl-4 pr-3', - isActive - ? 'border-fuchsia-500 bg-white/5 text-white' - : 'border-transparent text-white/70' - ) - } - > -
- {totalNewActivities > 0 ? ( -
-

- {compactNumber.format(totalNewActivities)} -

- -
- ) : ( - - - - )} - Notifications -
-
- -
- - - - - - twMerge( - 'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3', - isActive - ? 'border-fuchsia-500 bg-white/5 text-white' - : 'border-transparent text-white/70' - ) - } - > - - - - Wallet Connect - - -
- - -
- - - - - - -
-
diff --git a/src/stores/sidebar.ts b/src/stores/sidebar.ts index 58ed7056..f8486e1e 100644 --- a/src/stores/sidebar.ts +++ b/src/stores/sidebar.ts @@ -4,9 +4,11 @@ import { createJSONStorage, persist } from 'zustand/middleware'; interface SidebarState { feeds: boolean; chats: boolean; + communities: boolean; integrations: boolean; toggleFeeds: () => void; toggleChats: () => void; + toggleCommunities: () => void; toggleIntegrations: () => void; } @@ -15,9 +17,11 @@ export const useSidebar = create()( (set) => ({ feeds: true, chats: false, + communities: true, integrations: true, toggleFeeds: () => set((state) => ({ feeds: !state.feeds })), toggleChats: () => set((state) => ({ chats: !state.chats })), + toggleCommunities: () => set((state) => ({ communities: !state.communities })), toggleIntegrations: () => set((state) => ({ integrations: !state.integrations })), }), { diff --git a/src/utils/parser.ts b/src/utils/parser.ts index 3e6e9994..9419ac1a 100644 --- a/src/utils/parser.ts +++ b/src/utils/parser.ts @@ -60,10 +60,16 @@ export function parser(eventContent: string) { } // boost - if (word.startsWith('$') && word.length > 1) { + if (word.startsWith('$prism') && word.length > 1) { return word.replace(word, `~boost-${word}~`); } + // nostr account references (depreciated) + if (word.startsWith('@npub1')) { + const npub = word.replace('@', '').replace(/[^a-zA-Z0-9 ]/g, ''); + return word.replace(word, `~pub-${nip19.decode(npub).data}~`); + } + // nostr account references if (word.startsWith('nostr:npub1') || word.startsWith('npub1')) { const npub = word.replace('nostr:', '').replace(/[^a-zA-Z0-9 ]/g, '');