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

ready for alpha

Browse Source
This commit is contained in:
reya
2023-10-26 09:29:33 +07:00
parent 50f81a7d0b
commit 0c8dcef937
35 changed files with 426 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/shared/notes/index.ts
View File

@@ -27,3 +27,4 @@ export * from './mentions/invoice';
export * from './stats';
export * from './wrapper';
export * from './actions/more';
export * from './replies/replyMediaUploader';

2
src/shared/notes/kinds/articleDetail.tsx
View File

@@ -30,7 +30,7 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
return (
<ReactMarkdown
className="prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-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 hover:prose-a:text-blue-500"
className="break-p prose prose-neutral max-w-none select-text whitespace-pre-line leading-normal dark:prose-invert prose-headings:mb-1 prose-headings:mt-3 prose-p:mb-0 prose-p:mt-0 prose-p:last:mb-1 prose-a:font-normal prose-a:text-blue-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-blue-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap 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 hover:prose-a:text-blue-500"
remarkPlugins={[remarkGfm]}
components={{
a: ({ href }) => {

7
src/shared/notes/kinds/file.tsx
View File

@@ -13,8 +13,6 @@ import {
import { memo } from 'react';
import { Link } from 'react-router-dom';
import { Image } from '@shared/image';
import { fileType } from '@utils/nip94';
export function FileNote(props: { event?: NDKEvent }) {
@@ -24,10 +22,13 @@ export function FileNote(props: { event?: NDKEvent }) {
if (type === 'image') {
return (
<div className="mb-2 mt-3">
<Image
<img
src={url}
alt={props.event.content}
className="h-auto w-full rounded-lg object-cover"
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
/>
</div>
);

43
src/shared/notes/replies/form.tsx
View File

@@ -1,25 +1,33 @@
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useState } from 'react';
import { toast } from 'sonner';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { ReplyMediaUploader } from '@shared/notes';
import { User } from '@shared/user';
import { useNostr } from '@utils/hooks/useNostr';
export function NoteReplyForm({ id }: { id: string }) {
const { publish } = useNostr();
const { db } = useStorage();
const { ndk, relayUrls } = useNDK();
const [value, setValue] = useState('');
const submit = () => {
const tags = [['e', id, '', 'reply']];
const submit = async () => {
const tags = [['e', id, relayUrls[0], 'root']];
// publish event
publish({ content: value, kind: 1, tags });
const event = new NDKEvent(ndk);
event.content = value;
event.kind = NDKKind.Text;
event.tags = tags;
// reset form
setValue('');
const publishedRelays = await event.publish();
if (publishedRelays) {
toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
setValue('');
}
};
return (
@@ -30,16 +38,19 @@ export function NoteReplyForm({ id }: { id: string }) {
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Reply to this thread..."
className="relative h-24 w-full resize-none bg-transparent p-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
className="relative h-36 w-full resize-none bg-transparent px-5 py-4 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
spellCheck={false}
/>
<button
onClick={() => submit()}
disabled={value.length === 0 ? true : false}
className="mb-2 ml-auto mr-2 h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
>
Reply
</button>
<div className="inline-flex items-center justify-end gap-2 rounded-b-xl border-t border-neutral-200 p-2 dark:border-neutral-800">
<ReplyMediaUploader setValue={setValue} />
<button
onClick={() => submit()}
disabled={value.length === 0 ? true : false}
className="h-9 w-20 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50"
>
Reply
</button>
</div>
</div>
</div>
);

2
src/shared/notes/replies/item.tsx
View File

@@ -17,7 +17,7 @@ export function Reply({ event, root }: { event: NDKEventWithReplies; root?: stri
<User pubkey={event.pubkey} time={event.created_at} eventId={event.id} />
<div className="-mt-4 flex items-start gap-3">
<div className="w-10 shrink-0" />
<div className="flex-1">
<div className="relative z-10 flex-1">
<MemoizedTextNote content={event.content} />
<NoteActions
id={event.id}

2
src/shared/notes/replies/list.tsx
View File

@@ -48,7 +48,7 @@ export function ReplyList({ id }: { id: string }) {
return (
<div className="mt-3 flex flex-col gap-5">
{data?.length === 0 ? (
<div className="mt-2 flex w-full items-center justify-center rounded-xl bg-neutral-400 dark:bg-neutral-600">
<div className="mt-2 flex w-full items-center justify-center">
<div className="flex flex-col items-center justify-center gap-2 py-6">
<h3 className="text-3xl">👋</h3>
<p className="leading-none text-neutral-600 dark:text-neutral-400">

79
src/shared/notes/replies/replyMediaUploader.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { message, open } from '@tauri-apps/plugin-dialog';
import { readBinaryFile } from '@tauri-apps/plugin-fs';
import { useState } from 'react';
import { MediaIcon } from '@shared/icons';
export function ReplyMediaUploader({ setValue }) {
const [loading, setLoading] = useState(false);
const uploadToNostrBuild = async () => {
try {
// start loading
setLoading(true);
const selected = await open({
multiple: false,
filters: [
{
name: 'Media',
extensions: [
'png',
'jpeg',
'jpg',
'gif',
'mp4',
'mp3',
'webm',
'mkv',
'avi',
'mov',
],
},
],
});
if (!selected) {
setLoading(false);
return;
}
const file = await readBinaryFile(selected.path);
const blob = new Blob([file]);
const data = new FormData();
data.append('fileToUpload', blob);
data.append('submit', 'Upload Image');
const res = await fetch('https://nostr.build/api/v2/upload/files', {
method: 'POST',
body: data,
});
if (res.ok) {
const json = await res.json();
const content = json.data[0];
setValue((prev) => prev + ' ' + content.url);
// stop loading
setLoading(false);
}
} catch (e) {
// stop loading
setLoading(false);
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
}
};
return (
<button
type="button"
onClick={() => uploadToNostrBuild()}
className="inline-flex h-9 w-max items-center justify-center gap-1.5 rounded-lg bg-neutral-100 px-2 text-sm font-medium text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
<MediaIcon className="h-5 w-5" />
{loading ? 'Uploading...' : 'Add media'}
</button>
);
}