mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
update navigation bar
This commit is contained in:
parent
7a10d6a3d9
commit
b7addfccfb
@ -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} />,
|
||||
}}
|
||||
|
@ -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>
|
||||
<Layout>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</RelayProvider>
|
||||
</Layout>
|
||||
</RelayProvider>
|
||||
</PageContextProvider>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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
12
src/shared/icons/compose.tsx
Normal 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
15
src/shared/icons/heartbeat.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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(
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
`,
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user