nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

update navigation bar

Browse Source
This commit is contained in:
Ren Amamiya 2023-05-07 17:13:31 +07:00
parent 7a10d6a3d9
commit b7addfccfb
11 changed files with 70 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/note/components/content.tsx
View File

@ -12,7 +12,7 @@ export const NoteContent = ({ content }: { content: any }) => {
<ReactMarkdown
remarkPlugins={[[remarkGfm]]}
linkTarget="_blank"
className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
components={{
em: ({ ...props }) => <MentionUser {...props} />,
}}

10
src/renderer/shell.tsx
View File

@ -1,7 +1,7 @@
import { PageContext } from '@lume/renderer/types';
import RelayProvider from '@lume/shared/relayProvider';
import { PageContextProvider } from '@lume/utils/hooks/usePageContext';
import { PageContext } from '@renderer/types';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { LayoutDefault } from './layoutDefault';
@ -13,11 +13,11 @@ export function Shell({ children, pageContext }: { children: React.ReactNode; pa
return (
<PageContextProvider pageContext={pageContext}>
<Layout>
<RelayProvider>
<RelayProvider>
<Layout>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</RelayProvider>
</Layout>
</Layout>
</RelayProvider>
</PageContextProvider>
);
}

5
src/shared/accounts/active.tsx
View File

@ -5,11 +5,12 @@ export default function ActiveAccount({ user }: { user: any }) {
const userData = JSON.parse(user.metadata);
return (
<button className="relative h-10 w-10 rounded-lg">
<button className="relative h-10 w-10 overflow-hidden rounded-lg">
<Image
src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar"
className="h-10 w-10 rounded-lg object-cover"
loading="auto"
className="h-10 w-10 object-cover"
/>
</button>
);

22
src/shared/eventCollector.tsx
View File

@ -1,4 +1,4 @@
import { NetworkStatusIndicator } from '@lume/shared/networkStatusIndicator';
import HeartBeatIcon from '@lume/shared/icons/heartbeat';
import { RelayContext } from '@lume/shared/relayProvider';
import { READONLY_RELAYS } from '@lume/stores/constants';
import { hasNewerNoteAtom } from '@lume/stores/note';
@ -20,12 +20,13 @@ export default function EventCollector() {
const { account, isLoading, isError } = useActiveAccount();
useSWRSubscription(!isLoading && !isError && account ? ['eventCollector', account] : null, ([, key], {}) => {
const follows = nip02ToArray(JSON.parse(key.follows));
const follows = JSON.parse(key.follows);
const followsAsArray = nip02ToArray(follows);
const unsubscribe = pool.subscribe(
[
{
kinds: [1, 6],
authors: follows,
authors: followsAsArray,
since: dateToUnix(now.current),
},
{
@ -37,6 +38,10 @@ export default function EventCollector() {
'#p': [key.pubkey],
since: dateToUnix(now.current),
},
{
kinds: [30023],
since: dateToUnix(now.current),
},
],
READONLY_RELAYS,
(event: any) => {
@ -85,6 +90,11 @@ export default function EventCollector() {
event.id
);
break;
// long post
case 30023:
// insert event to local database
createNote(event.id, account.id, event.pubkey, event.kind, event.tags, event.content, event.created_at, '');
break;
default:
break;
}
@ -96,5 +106,9 @@ export default function EventCollector() {
};
});
return <NetworkStatusIndicator />;
return (
<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200">
<HeartBeatIcon width={14} height={14} />
</div>
);
}

12
src/shared/icons/compose.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SVGProps } from 'react';
export default function ComposeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M12.75 8.25L12.2197 7.71967C12.079 7.86032 12 8.05109 12 8.25H12.75ZM12.75 11.25H12C12 11.6642 12.3358 12 12.75 12V11.25ZM15.75 11.25V12C15.9489 12 16.1397 11.921 16.2803 11.7803L15.75 11.25ZM18.75 2.25L19.2803 1.71967C18.9874 1.42678 18.5126 1.42678 18.2197 1.71967L18.75 2.25ZM21.75 5.25L22.2803 5.78033C22.5732 5.48744 22.5732 5.01256 22.2803 4.71967L21.75 5.25ZM20.25 20.25V21C20.6642 21 21 20.6642 21 20.25H20.25ZM3.75 20.25H3C3 20.6642 3.33579 21 3.75 21V20.25ZM3.75 3.75V3C3.33579 3 3 3.33579 3 3.75H3.75ZM11.25 4.5C11.6642 4.5 12 4.16421 12 3.75C12 3.33579 11.6642 3 11.25 3V4.5ZM21 12.75C21 12.3358 20.6642 12 20.25 12C19.8358 12 19.5 12.3358 19.5 12.75H21ZM12 8.25V11.25H13.5V8.25H12ZM12.75 12H15.75V10.5H12.75V12ZM13.2803 8.78033L19.2803 2.78033L18.2197 1.71967L12.2197 7.71967L13.2803 8.78033ZM18.2197 2.78033L21.2197 5.78033L22.2803 4.71967L19.2803 1.71967L18.2197 2.78033ZM21.2197 4.71967L15.2197 10.7197L16.2803 11.7803L22.2803 5.78033L21.2197 4.71967ZM20.25 19.5H3.75V21H20.25V19.5ZM4.5 20.25V3.75H3V20.25H4.5ZM3.75 4.5H11.25V3H3.75V4.5ZM19.5 12.75V20.25H21V12.75H19.5Z"
fill="currentColor"
/>
</svg>
);
}

15
src/shared/icons/heartbeat.tsx Normal file
View File

@ -0,0 +1,15 @@
import { SVGProps } from 'react';
export default function HeartBeatIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M1.75 11.75H6L9 2.75L15 21.25L18 11.75H22.25"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

2
src/shared/multiAccounts.tsx
View File

@ -17,7 +17,7 @@ export default function MultiAccounts() {
return (
<div className="flex h-full flex-col items-center justify-between pb-4 pt-3">
<div className="flex flex-col items-center">
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-2">
<>
{!activeAccount ? (
<div className="group relative flex h-10 w-10 shrink animate-pulse cursor-pointer items-center justify-center rounded-lg bg-zinc-900"></div>

11
src/shared/navigation.tsx
View File

@ -1,6 +1,8 @@
import ChannelsList from '@lume/app/channel/components/list';
import ChatsList from '@lume/app/chat/components/list';
import ActiveLink from '@lume/shared/activeLink';
import EventCollector from '@lume/shared/eventCollector';
import ComposeIcon from '@lume/shared/icons/compose';
import MyspaceIcon from '@lume/shared/icons/myspace';
import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
import ThreadsIcon from '@lume/shared/icons/threads';
@ -10,7 +12,14 @@ import { Disclosure } from '@headlessui/react';
export default function Navigation() {
return (
<div className="relative flex h-full flex-col gap-3 overflow-hidden pt-3">
<div className="relative flex h-full flex-col gap-3 pt-1.5">
<div className="flex h-11 items-center justify-between px-3.5">
<button className="inline-flex h-7 w-max items-center justify-center gap-1 rounded-md bg-fuchsia-500 px-2.5 text-xs font-medium text-zinc-200 shadow-button hover:bg-fuchsia-600">
<ComposeIcon width={14} height={14} />
Compose
</button>
<EventCollector />
</div>
{/* Newsfeed */}
<div className="flex flex-col gap-0.5 px-1.5">
<div className="px-2.5">

2
src/utils/hooks/useChannelProfile.tsx
View File

@ -20,7 +20,7 @@ export const useChannelProfile = (id: string, channelPubkey: string) => {
const { data: cache, isLoading } = useSWR(['channel-cache-profile', id], fetcher);
const { data, error } = useSWRSubscription(
!isLoading && !cache ? ['channel-profile', id] : null,
!isLoading && cache ? ['channel-profile', id] : null,
([, key], { next }) => {
// subscribe to channel
const unsubscribe = pool.subscribe(

2
src/utils/parser.tsx
View File

@ -35,7 +35,7 @@ export const noteParser = (event: Event) => {
// map hashtag to em
content.original.match(/#(\w+)(?!:\/\/)/g)?.forEach((item) => {
content.parsed = content.parsed.replace(item, `[${item}](https://primal.net/search/${item})`);
content.parsed = content.parsed.replace(item, ` [${item}](https://primal.net/search/${item})`);
});
// handle nostr mention

6
tailwind.config.js
View File

@ -31,9 +31,9 @@ module.exports = {
0 8px 24px rgb(4 4 7 / 60%)
`,
button: `
rgba(112, 26, 117, 0.5) 0px 2px 8px,
rgb(112, 26, 117) 0px 2px 4px,
rgb(112, 26, 117) 0px 0px 0px 1px,
rgba(74, 4, 78, 0.5) 0px 2px 8px,
rgb(74, 4, 78) 0px 2px 4px,
rgb(74, 4, 78) 0px 0px 0px 1px,
rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset
`,
},