reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re-enable nip-04 with more polish, prepare for nip-44

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-24 09:05:34 +07:00
parent 3455eb701f
commit 4893ebd932
19 changed files with 376 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/shared/avatarUploader.tsx
View File

@@ -1,10 +1,16 @@
import { useState } from 'react';
import { Dispatch, SetStateAction, useState } from 'react';
import { LoaderIcon, PlusIcon } from '@shared/icons';
import { useImageUploader } from '@utils/hooks/useUploader';
export function AvatarUploader({ setPicture }: { setPicture: any }) {
export function AvatarUploader({
setPicture,
}: {
setPicture: Dispatch<
SetStateAction<{ url: undefined | string; error?: undefined | string }>
>;
}) {
const upload = useImageUploader();
const [loading, setLoading] = useState(false);

10
src/shared/bannerUploader.tsx
View File

@@ -1,10 +1,16 @@
import { useState } from 'react';
import { Dispatch, SetStateAction, useState } from 'react';
import { LoaderIcon, PlusIcon } from '@shared/icons';
import { useImageUploader } from '@utils/hooks/useUploader';
export function BannerUploader({ setBanner }: { setBanner: any }) {
export function BannerUploader({
setBanner,
}: {
setBanner: Dispatch<
SetStateAction<{ url: undefined | string; error?: undefined | string }>
>;
}) {
const upload = useImageUploader();
const [loading, setLoading] = useState(false);

50
src/shared/mediaUploader.tsx
View File

@@ -1,50 +0,0 @@
import * as Tooltip from '@radix-ui/react-tooltip';
import { useState } from 'react';
import { LoaderIcon, MediaIcon } from '@shared/icons';
import { useImageUploader } from '@utils/hooks/useUploader';
export function MediaUploader({ setState }: { setState: any }) {
const upload = useImageUploader();
const [loading, setLoading] = useState(false);
const uploadMedia = async () => {
const image = await upload(null);
if (image.url) {
// update state
setState((prev: string) => `${prev}\n${image.url}`);
// stop loading
setLoading(false);
}
};
return (
<Tooltip.Provider>
<Tooltip.Root delayDuration={150}>
<Tooltip.Trigger asChild>
<button
type="button"
onClick={() => uploadMedia()}
className="group inline-flex h-8 w-8 items-center justify-center rounded hover:bg-white/10"
>
{loading ? (
<LoaderIcon className="h-5 w-5 animate-spin text-black dark:text-white" />
) : (
<MediaIcon className="h-5 w-5 text-white/50 group-hover:text-white" />
)}
</button>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content
className="-left-10 select-none rounded-md bg-black px-3.5 py-1.5 text-sm leading-none text-white will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
sideOffset={5}
>
Upload media
<Tooltip.Arrow className="fill-black" />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}

38
src/shared/navigation.tsx
View File

@@ -1,9 +1,9 @@
import * as Collapsible from '@radix-ui/react-collapsible';
import { useState } from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
// import { ChatsList } from '@app/chats/components/list';
import { ChatsList } from '@app/chats/components/list';
import { ComposerModal } from '@shared/composer/modal';
import {
ArrowLeftIcon,
@@ -14,11 +14,13 @@ import {
} from '@shared/icons';
import { LumeBar } from '@shared/lumeBar';
import { useSidebar } from '@stores/sidebar';
export function Navigation() {
const navigate = useNavigate();
const [feeds, setFeeds] = useState(true);
// const [chats, setChats] = useState(true);
const [feeds, toggleFeeds] = useSidebar((state) => [state.feeds, state.toggleFeeds]);
const [chats, toggleChats] = useSidebar((state) => [state.chats, state.toggleChats]);
return (
<div className="relative h-full w-[232px] bg-black/80">
@@ -43,7 +45,7 @@ export function Navigation() {
</button>
</div>
</div>
<Collapsible.Root open={feeds} onOpenChange={setFeeds}>
<Collapsible.Root open={feeds} onOpenChange={toggleFeeds}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
@@ -80,7 +82,7 @@ export function Navigation() {
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<SpaceIcon className="h-3 w-3 text-white" />
</span>
<span className="text-sm font-medium">Space</span>
Space
</NavLink>
<NavLink
to="/notifications"
@@ -95,12 +97,34 @@ export function Navigation() {
<span className="inline-flex h-6 w-6 items-center justify-center rounded bg-white/10">
<BellIcon className="h-3 w-3 text-white" />
</span>
<span className="text-sm font-medium">Notifications</span>
Notifications
</NavLink>
</div>
</Collapsible.Content>
</div>
</Collapsible.Root>
<Collapsible.Root open={chats} onOpenChange={toggleChats}>
<div className="flex flex-col gap-1 px-2">
<Collapsible.Trigger asChild>
<button className="flex items-center gap-1">
<div
className={twMerge(
'inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out',
open ? '' : 'rotate-180'
)}
>
<NavArrowDownIcon className="h-3 w-3 text-white/50" />
</div>
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Chats
</h3>
</button>
</Collapsible.Trigger>
<Collapsible.Content>
<ChatsList />
</Collapsible.Content>
</div>
</Collapsible.Root>
</div>
<LumeBar />
</div>

1
src/shared/notes/kinds/text.tsx
View File

@@ -25,6 +25,7 @@ export function TextNote({ event }: { event: NDKEvent }) {
components={{
del: ({ children }) => {
const key = children[0] as string;
if (!key) return;
if (key.startsWith('pub') && key.length > 50 && key.length < 100)
return <MentionUser pubkey={key.replace('pub-', '')} />;
if (key.startsWith('tag')) return <Hashtag tag={key.replace('tag-', '')} />;