mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 09:50:47 +00:00
wip: new composer
This commit is contained in:
parent
cade8c8b4c
commit
b1a44f2cbf
@ -31,6 +31,7 @@
|
|||||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||||
"@radix-ui/react-hover-card": "^1.0.7",
|
"@radix-ui/react-hover-card": "^1.0.7",
|
||||||
"@radix-ui/react-popover": "^1.0.7",
|
"@radix-ui/react-popover": "^1.0.7",
|
||||||
|
"@radix-ui/react-toolbar": "^1.0.4",
|
||||||
"@radix-ui/react-tooltip": "^1.0.7",
|
"@radix-ui/react-tooltip": "^1.0.7",
|
||||||
"@tanstack/react-query": "^4.36.1",
|
"@tanstack/react-query": "^4.36.1",
|
||||||
"@tauri-apps/api": "2.0.0-alpha.8",
|
"@tauri-apps/api": "2.0.0-alpha.8",
|
||||||
@ -48,6 +49,7 @@
|
|||||||
"@tauri-apps/plugin-updater": "2.0.0-alpha.1",
|
"@tauri-apps/plugin-updater": "2.0.0-alpha.1",
|
||||||
"@tauri-apps/plugin-upload": "2.0.0-alpha.1",
|
"@tauri-apps/plugin-upload": "2.0.0-alpha.1",
|
||||||
"@tauri-apps/plugin-window": "2.0.0-alpha.1",
|
"@tauri-apps/plugin-window": "2.0.0-alpha.1",
|
||||||
|
"@tiptap/extension-character-count": "^2.1.12",
|
||||||
"@tiptap/extension-image": "^2.1.12",
|
"@tiptap/extension-image": "^2.1.12",
|
||||||
"@tiptap/extension-mention": "^2.1.12",
|
"@tiptap/extension-mention": "^2.1.12",
|
||||||
"@tiptap/extension-placeholder": "^2.1.12",
|
"@tiptap/extension-placeholder": "^2.1.12",
|
||||||
|
114
pnpm-lock.yaml
114
pnpm-lock.yaml
@ -44,6 +44,9 @@ dependencies:
|
|||||||
'@radix-ui/react-popover':
|
'@radix-ui/react-popover':
|
||||||
specifier: ^1.0.7
|
specifier: ^1.0.7
|
||||||
version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-toolbar':
|
||||||
|
specifier: ^1.0.4
|
||||||
|
version: 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@radix-ui/react-tooltip':
|
'@radix-ui/react-tooltip':
|
||||||
specifier: ^1.0.7
|
specifier: ^1.0.7
|
||||||
version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
version: 1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
@ -95,6 +98,9 @@ dependencies:
|
|||||||
'@tauri-apps/plugin-window':
|
'@tauri-apps/plugin-window':
|
||||||
specifier: 2.0.0-alpha.1
|
specifier: 2.0.0-alpha.1
|
||||||
version: 2.0.0-alpha.1
|
version: 2.0.0-alpha.1
|
||||||
|
'@tiptap/extension-character-count':
|
||||||
|
specifier: ^2.1.12
|
||||||
|
version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
|
||||||
'@tiptap/extension-image':
|
'@tiptap/extension-image':
|
||||||
specifier: ^2.1.12
|
specifier: ^2.1.12
|
||||||
version: 2.1.12(@tiptap/core@2.1.12)
|
version: 2.1.12(@tiptap/core@2.1.12)
|
||||||
@ -1551,6 +1557,27 @@ packages:
|
|||||||
react-dom: 18.2.0(react@18.2.0)
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.23.2
|
||||||
|
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@types/react': 18.2.29
|
||||||
|
'@types/react-dom': 18.2.14
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@radix-ui/react-slot@1.0.2(@types/react@18.2.29)(react@18.2.0):
|
/@radix-ui/react-slot@1.0.2(@types/react@18.2.29)(react@18.2.0):
|
||||||
resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
|
resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -1566,6 +1593,83 @@ packages:
|
|||||||
react: 18.2.0
|
react: 18.2.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.23.2
|
||||||
|
'@radix-ui/primitive': 1.0.1
|
||||||
|
'@radix-ui/react-context': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@types/react': 18.2.29
|
||||||
|
'@types/react-dom': 18.2.14
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.23.2
|
||||||
|
'@radix-ui/primitive': 1.0.1
|
||||||
|
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@types/react': 18.2.29
|
||||||
|
'@types/react-dom': 18.2.14
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
|
/@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
||||||
|
resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==}
|
||||||
|
peerDependencies:
|
||||||
|
'@types/react': '*'
|
||||||
|
'@types/react-dom': '*'
|
||||||
|
react: ^16.8 || ^17.0 || ^18.0
|
||||||
|
react-dom: ^16.8 || ^17.0 || ^18.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
'@types/react':
|
||||||
|
optional: true
|
||||||
|
'@types/react-dom':
|
||||||
|
optional: true
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.23.2
|
||||||
|
'@radix-ui/primitive': 1.0.1
|
||||||
|
'@radix-ui/react-context': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.29)(react@18.2.0)
|
||||||
|
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-separator': 1.0.3(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0)
|
||||||
|
'@types/react': 18.2.29
|
||||||
|
'@types/react-dom': 18.2.14
|
||||||
|
react: 18.2.0
|
||||||
|
react-dom: 18.2.0(react@18.2.0)
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
/@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.2.14)(@types/react@18.2.29)(react-dom@18.2.0)(react@18.2.0):
|
||||||
resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
|
resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
@ -2279,6 +2383,16 @@ packages:
|
|||||||
'@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
|
'@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@tiptap/extension-character-count@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
|
||||||
|
resolution: {integrity: sha512-+GFbBG13nvF8mFIeisSERG/Q3CuRsTNwVZIRbJTLgGdbHXFqPhJh4Xfm7cv7OaOYevUlVyO+z5pGD7wIl1bLqQ==}
|
||||||
|
peerDependencies:
|
||||||
|
'@tiptap/core': ^2.0.0
|
||||||
|
'@tiptap/pm': ^2.0.0
|
||||||
|
dependencies:
|
||||||
|
'@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
|
||||||
|
'@tiptap/pm': 2.1.12
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@tiptap/extension-code-block@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
|
/@tiptap/extension-code-block@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
|
||||||
resolution: {integrity: sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==}
|
resolution: {integrity: sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
124
src/app/notes/components/editor/article.tsx
Normal file
124
src/app/notes/components/editor/article.tsx
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||||
|
import CharacterCount from '@tiptap/extension-character-count';
|
||||||
|
import Image from '@tiptap/extension-image';
|
||||||
|
import Placeholder from '@tiptap/extension-placeholder';
|
||||||
|
import { EditorContent, useEditor } from '@tiptap/react';
|
||||||
|
import StarterKit from '@tiptap/starter-kit';
|
||||||
|
import { convert } from 'html-to-text';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
|
||||||
|
import { MediaUploader, MentionPopup } from '@shared/composer';
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
|
export function ArticleEditor() {
|
||||||
|
const { ndk } = useNDK();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [
|
||||||
|
StarterKit.configure(),
|
||||||
|
Placeholder.configure({ placeholder: 'Type something...' }),
|
||||||
|
Image.configure({
|
||||||
|
HTMLAttributes: {
|
||||||
|
class:
|
||||||
|
'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
CharacterCount.configure(),
|
||||||
|
],
|
||||||
|
content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
|
||||||
|
editorProps: {
|
||||||
|
attributes: {
|
||||||
|
class:
|
||||||
|
'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onUpdate: ({ editor }) => {
|
||||||
|
const jsonContent = JSON.stringify(editor.getJSON());
|
||||||
|
localStorage.setItem('editor-post', jsonContent);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// get plaintext content
|
||||||
|
const html = editor.getHTML();
|
||||||
|
const serializedContent = convert(html, {
|
||||||
|
selectors: [
|
||||||
|
{ selector: 'a', options: { linkBrackets: false } },
|
||||||
|
{ selector: 'img', options: { linkBrackets: false } },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
// define tags
|
||||||
|
const tags: string[][] = [];
|
||||||
|
|
||||||
|
// add hashtag to tags if present
|
||||||
|
const hashtags = serializedContent
|
||||||
|
.split(/\s/gm)
|
||||||
|
.filter((s: string) => s.startsWith('#'));
|
||||||
|
hashtags?.forEach((tag: string) => {
|
||||||
|
tags.push(['t', tag.replace('#', '')]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// publish message
|
||||||
|
const event = new NDKEvent(ndk);
|
||||||
|
event.content = serializedContent;
|
||||||
|
event.kind = NDKKind.Article;
|
||||||
|
event.tags = tags;
|
||||||
|
|
||||||
|
const publishedRelays = await event.publish();
|
||||||
|
if (publishedRelays) {
|
||||||
|
toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
|
||||||
|
// update state
|
||||||
|
setLoading(false);
|
||||||
|
// reset editor
|
||||||
|
editor.commands.clearContent();
|
||||||
|
localStorage.setItem('editor-post', '{}');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLoading(false);
|
||||||
|
toast.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-full flex-col justify-between">
|
||||||
|
<EditorContent
|
||||||
|
editor={editor}
|
||||||
|
spellCheck="false"
|
||||||
|
autoComplete="off"
|
||||||
|
autoCorrect="off"
|
||||||
|
autoCapitalize="off"
|
||||||
|
/>
|
||||||
|
<div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
|
||||||
|
<span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
|
||||||
|
{editor?.storage?.characterCount.characters()}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="inline-flex items-center gap-2">
|
||||||
|
<MediaUploader editor={editor} />
|
||||||
|
<MentionPopup editor={editor} />
|
||||||
|
</div>
|
||||||
|
<div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
|
||||||
|
<button
|
||||||
|
onClick={() => submit()}
|
||||||
|
disabled={editor && editor.isEmpty}
|
||||||
|
className="inline-flex h-9 w-max items-center justify-center rounded-lg bg-blue-500 px-2.5 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading === true ? (
|
||||||
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
||||||
|
) : (
|
||||||
|
'Publish article'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
162
src/app/notes/components/editor/file.tsx
Normal file
162
src/app/notes/components/editor/file.tsx
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||||
|
import { message, open } from '@tauri-apps/plugin-dialog';
|
||||||
|
import { readBinaryFile } from '@tauri-apps/plugin-fs';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
|
export function FileEditor() {
|
||||||
|
const { ndk } = useNDK();
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [isPublish, setIsPublish] = useState(false);
|
||||||
|
const [metadata, setMetadata] = useState(null);
|
||||||
|
const [caption, setCaption] = useState('');
|
||||||
|
|
||||||
|
const uploadFile = async () => {
|
||||||
|
try {
|
||||||
|
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 data = json.data[0];
|
||||||
|
|
||||||
|
setMetadata([
|
||||||
|
['url', data.url],
|
||||||
|
['m', data.mime ?? 'application/octet-stream'],
|
||||||
|
['x', data.sha256 ?? ''],
|
||||||
|
['size', data.size.toString() ?? '0'],
|
||||||
|
['dim', `${data.dimensions.width}x${data.dimensions.height}` ?? '0'],
|
||||||
|
['blurhash', data.blurhash ?? ''],
|
||||||
|
['thumb', data.thumbnail ?? ''],
|
||||||
|
]);
|
||||||
|
|
||||||
|
// stop loading
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// stop loading
|
||||||
|
setLoading(false);
|
||||||
|
await message(`Upload failed, error: ${e}`, { title: 'Lume', type: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
try {
|
||||||
|
setIsPublish(true);
|
||||||
|
|
||||||
|
const event = new NDKEvent(ndk);
|
||||||
|
event.content = caption;
|
||||||
|
event.kind = 1063;
|
||||||
|
event.tags = metadata;
|
||||||
|
|
||||||
|
const publishedRelays = await event.publish();
|
||||||
|
if (publishedRelays) {
|
||||||
|
setMetadata(null);
|
||||||
|
setIsPublish(false);
|
||||||
|
toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setIsPublish(false);
|
||||||
|
toast.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={uploadFile}
|
||||||
|
className="flex h-72 w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-neutral-200 bg-neutral-100 hover:border-blue-500 hover:text-blue-500 dark:border-neutral-800 dark:bg-neutral-900"
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<LoaderIcon className="h-5 w-5 animate-spin text-neutral-900 dark:text-neutral-100" />
|
||||||
|
) : !metadata ? (
|
||||||
|
<div className="flex flex-col text-center">
|
||||||
|
<h5 className="text-lg font-semibold">
|
||||||
|
Click or drag a file to this area to upload
|
||||||
|
</h5>
|
||||||
|
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
||||||
|
Supports: jpg, png, webp, gif, mov, mp4 or mp3
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src={metadata[0][1]}
|
||||||
|
alt={metadata[1][1]}
|
||||||
|
className="h-56 w-56 rounded-lg object-cover shadow-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<div className="mx-auto w-full max-w-sm">
|
||||||
|
<div className="inline-flex w-full items-center gap-2">
|
||||||
|
<input
|
||||||
|
name="caption"
|
||||||
|
type="text"
|
||||||
|
value={caption}
|
||||||
|
onChange={(e) => setCaption(e.target.value)}
|
||||||
|
spellCheck={false}
|
||||||
|
autoComplete="off"
|
||||||
|
autoCorrect="off"
|
||||||
|
autoCapitalize="off"
|
||||||
|
placeholder="Caption (Optional)..."
|
||||||
|
className="h-11 flex-1 rounded-lg bg-neutral-100 px-3 placeholder:text-neutral-500 dark:bg-neutral-900 dark:placeholder:text-neutral-400"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={submit}
|
||||||
|
disabled={!metadata}
|
||||||
|
className="inline-flex h-11 w-20 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isPublish ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Share'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
@ -1,25 +1,39 @@
|
|||||||
|
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||||
|
import CharacterCount from '@tiptap/extension-character-count';
|
||||||
import Image from '@tiptap/extension-image';
|
import Image from '@tiptap/extension-image';
|
||||||
import Placeholder from '@tiptap/extension-placeholder';
|
import Placeholder from '@tiptap/extension-placeholder';
|
||||||
import { EditorContent, useEditor } from '@tiptap/react';
|
import { EditorContent, useEditor } from '@tiptap/react';
|
||||||
import StarterKit from '@tiptap/starter-kit';
|
import StarterKit from '@tiptap/starter-kit';
|
||||||
|
import { convert } from 'html-to-text';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
|
|
||||||
|
import { MediaUploader, MentionPopup } from '@shared/composer';
|
||||||
|
import { LoaderIcon } from '@shared/icons';
|
||||||
|
|
||||||
export function PostEditor() {
|
export function PostEditor() {
|
||||||
|
const { ndk } = useNDK();
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
extensions: [
|
extensions: [
|
||||||
StarterKit.configure(),
|
StarterKit.configure(),
|
||||||
Placeholder.configure({ placeholder: 'Type something...' }),
|
Placeholder.configure({ placeholder: 'Sharing some thoughts...' }),
|
||||||
Image.configure({
|
Image.configure({
|
||||||
HTMLAttributes: {
|
HTMLAttributes: {
|
||||||
class:
|
class:
|
||||||
'rounded-lg w-full h-auto border border-white/10 outline outline-2 outline-offset-0 outline-white/20 ml-1',
|
'rounded-lg w-full object-cover h-auto max-h-[400px] border border-neutral-200 dark:border-neutral-800 outline outline-1 outline-offset-0 outline-neutral-300 dark:outline-neutral-700',
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
|
CharacterCount.configure(),
|
||||||
],
|
],
|
||||||
content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
|
content: JSON.parse(localStorage.getItem('editor-post') || '{}'),
|
||||||
editorProps: {
|
editorProps: {
|
||||||
attributes: {
|
attributes: {
|
||||||
class:
|
class:
|
||||||
'h-full outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
|
'outline-none prose prose-lg prose-neutral max-w-none select-text whitespace-pre-line break-words dark:prose-invert hover:prose-a:text-blue-500',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onUpdate: ({ editor }) => {
|
onUpdate: ({ editor }) => {
|
||||||
@ -28,13 +42,79 @@ export function PostEditor() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const submit = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
// get plaintext content
|
||||||
|
const html = editor.getHTML();
|
||||||
|
const serializedContent = convert(html, {
|
||||||
|
selectors: [
|
||||||
|
{ selector: 'a', options: { linkBrackets: false } },
|
||||||
|
{ selector: 'img', options: { linkBrackets: false } },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
// define tags
|
||||||
|
const tags: string[][] = [];
|
||||||
|
|
||||||
|
// add hashtag to tags if present
|
||||||
|
const hashtags = serializedContent
|
||||||
|
.split(/\s/gm)
|
||||||
|
.filter((s: string) => s.startsWith('#'));
|
||||||
|
hashtags?.forEach((tag: string) => {
|
||||||
|
tags.push(['t', tag.replace('#', '')]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// publish message
|
||||||
|
const event = new NDKEvent(ndk);
|
||||||
|
event.content = serializedContent;
|
||||||
|
event.kind = NDKKind.Text;
|
||||||
|
event.tags = tags;
|
||||||
|
|
||||||
|
const publishedRelays = await event.publish();
|
||||||
|
if (publishedRelays) {
|
||||||
|
toast.success(`Broadcasted to ${publishedRelays.size} relays successfully.`);
|
||||||
|
// update state
|
||||||
|
setLoading(false);
|
||||||
|
// reset editor
|
||||||
|
editor.commands.clearContent();
|
||||||
|
localStorage.setItem('editor-post', '{}');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
setLoading(false);
|
||||||
|
toast.error(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EditorContent
|
<div className="flex h-full flex-col justify-between">
|
||||||
editor={editor}
|
<EditorContent
|
||||||
spellCheck="false"
|
editor={editor}
|
||||||
autoComplete="off"
|
spellCheck="false"
|
||||||
autoCorrect="off"
|
autoComplete="off"
|
||||||
autoCapitalize="off"
|
autoCorrect="off"
|
||||||
/>
|
autoCapitalize="off"
|
||||||
|
/>
|
||||||
|
<div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
|
||||||
|
<span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
|
||||||
|
{editor?.storage?.characterCount.characters()}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="inline-flex items-center gap-2">
|
||||||
|
<MediaUploader editor={editor} />
|
||||||
|
<MentionPopup editor={editor} />
|
||||||
|
</div>
|
||||||
|
<div className="mx-3 h-6 w-px bg-neutral-200 dark:bg-neutral-800" />
|
||||||
|
<button
|
||||||
|
onClick={() => submit()}
|
||||||
|
disabled={editor && editor.isEmpty}
|
||||||
|
className="inline-flex h-9 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-medium text-white hover:bg-blue-600 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loading === true ? <LoaderIcon className="h-5 w-5 animate-spin" /> : 'Post'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1 +1,3 @@
|
|||||||
export * from './editor/post';
|
export * from './editor/post';
|
||||||
|
export * from './editor/article';
|
||||||
|
export * from './editor/file';
|
||||||
|
@ -2,73 +2,84 @@ import { useState } from 'react';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
import { PostEditor } from '@app/notes/components';
|
import { ArticleEditor, FileEditor, PostEditor } from '@app/notes/components';
|
||||||
|
|
||||||
import { ArrowLeftIcon } from '@shared/icons';
|
import { ArrowLeftIcon } from '@shared/icons';
|
||||||
|
|
||||||
export function NewNoteScreen() {
|
export function NewNoteScreen() {
|
||||||
const [type, setType] = useState<'post' | 'article' | 'file' | 'raw'>('post');
|
const [type, setType] = useState<'post' | 'article' | 'file' | 'raw'>('post');
|
||||||
|
|
||||||
|
const renderEditor = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'post':
|
||||||
|
return <PostEditor />;
|
||||||
|
case 'article':
|
||||||
|
return <ArticleEditor />;
|
||||||
|
case 'file':
|
||||||
|
return <FileEditor />;
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full pt-4">
|
<div className="container mx-auto grid grid-cols-8 px-4">
|
||||||
<div className="container mx-auto grid grid-cols-8 px-4">
|
<div className="col-span-1">
|
||||||
<div className="col-span-1">
|
<Link
|
||||||
<Link
|
to="/"
|
||||||
to="/"
|
className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900"
|
||||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900"
|
>
|
||||||
>
|
<ArrowLeftIcon className="h-5 w-5" />
|
||||||
<ArrowLeftIcon className="h-5 w-5" />
|
</Link>
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-6">
|
|
||||||
<div className="mb-8 flex items-center gap-3">
|
|
||||||
<div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setType('post')}
|
|
||||||
className={twMerge(
|
|
||||||
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
|
||||||
type === 'post' ? 'bg-white shadow' : 'bg-transparent'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Post
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setType('article')}
|
|
||||||
className={twMerge(
|
|
||||||
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
|
||||||
type === 'article' ? 'bg-white shadow' : 'bg-transparent'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Article
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setType('file')}
|
|
||||||
className={twMerge(
|
|
||||||
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
|
||||||
type === 'file' ? 'bg-white shadow' : 'bg-transparent'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
File
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setType('raw')}
|
|
||||||
className={twMerge(
|
|
||||||
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
|
||||||
type === 'file' ? 'bg-white shadow' : 'bg-transparent'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
Raw (advance)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{type === 'post' ? <PostEditor /> : null}
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="relative col-span-6 flex flex-col">
|
||||||
|
<div className="mb-8 flex h-10 shrink-0 items-center gap-3">
|
||||||
|
<div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setType('post')}
|
||||||
|
className={twMerge(
|
||||||
|
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
||||||
|
type === 'post' ? 'bg-white shadow' : 'bg-transparent'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Post
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setType('article')}
|
||||||
|
className={twMerge(
|
||||||
|
'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
|
||||||
|
type === 'article' ? 'bg-white shadow' : 'bg-transparent'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Article
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setType('file')}
|
||||||
|
className={twMerge(
|
||||||
|
'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium',
|
||||||
|
type === 'file' ? 'bg-white shadow' : 'bg-transparent'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
File Sharing
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setType('raw')}
|
||||||
|
className={twMerge(
|
||||||
|
'inline-flex h-9 w-32 items-center justify-center rounded-lg text-sm font-medium',
|
||||||
|
type === 'raw' ? 'bg-white shadow' : 'bg-transparent'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Raw (advance)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-full min-h-0 w-full">{renderEditor()}</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-span-1" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -52,10 +52,10 @@ export class LumeStorage {
|
|||||||
const account = results[0];
|
const account = results[0];
|
||||||
|
|
||||||
if (typeof account.follows === 'string')
|
if (typeof account.follows === 'string')
|
||||||
account.follows = JSON.parse(account.follows);
|
account.follows = JSON.parse(account.follows) ?? [];
|
||||||
|
|
||||||
if (typeof account.circles === 'string')
|
if (typeof account.circles === 'string')
|
||||||
account.circles = JSON.parse(account.circles);
|
account.circles = JSON.parse(account.circles) ?? [];
|
||||||
|
|
||||||
if (typeof account.last_login_at === 'string')
|
if (typeof account.last_login_at === 'string')
|
||||||
account.last_login_at = parseInt(account.last_login_at);
|
account.last_login_at = parseInt(account.last_login_at);
|
||||||
|
@ -16,7 +16,7 @@ root.render(
|
|||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<StorageProvider>
|
<StorageProvider>
|
||||||
<NDKProvider>
|
<NDKProvider>
|
||||||
<Toaster position="top-center" />
|
<Toaster position="top-center" closeButton />
|
||||||
<App />
|
<App />
|
||||||
</NDKProvider>
|
</NDKProvider>
|
||||||
</StorageProvider>
|
</StorageProvider>
|
||||||
|
@ -1,24 +1,61 @@
|
|||||||
import { UnlistenFn, listen } from '@tauri-apps/api/event';
|
import { message, open } from '@tauri-apps/plugin-dialog';
|
||||||
import { message } from '@tauri-apps/plugin-dialog';
|
import { readBinaryFile } from '@tauri-apps/plugin-fs';
|
||||||
import { Editor } from '@tiptap/react';
|
import { Editor } from '@tiptap/react';
|
||||||
import { useEffect, useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
import { MediaIcon } from '@shared/icons';
|
import { MediaIcon } from '@shared/icons';
|
||||||
|
|
||||||
import { useNostr } from '@utils/hooks/useNostr';
|
|
||||||
|
|
||||||
export function MediaUploader({ editor }: { editor: Editor }) {
|
export function MediaUploader({ editor }: { editor: Editor }) {
|
||||||
const { upload } = useNostr();
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
const uploadToNostrBuild = async (file?: string) => {
|
const uploadToNostrBuild = async () => {
|
||||||
try {
|
try {
|
||||||
// start loading
|
// start loading
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
const image = await upload(file, true);
|
const selected = await open({
|
||||||
if (image.url) {
|
multiple: false,
|
||||||
editor.commands.setImage({ src: image.url });
|
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];
|
||||||
|
|
||||||
|
editor.commands.setImage({ src: content.url });
|
||||||
editor.commands.createParagraphNear();
|
editor.commands.createParagraphNear();
|
||||||
|
|
||||||
// stop loading
|
// stop loading
|
||||||
@ -31,29 +68,11 @@ export function MediaUploader({ editor }: { editor: Editor }) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let unlisten: UnlistenFn;
|
|
||||||
|
|
||||||
async function listenDnD() {
|
|
||||||
unlisten = await listen('tauri://file-drop', (event) => {
|
|
||||||
uploadToNostrBuild(event.payload[0]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// start listen drag and drop event
|
|
||||||
listenDnD();
|
|
||||||
|
|
||||||
// clean up
|
|
||||||
return () => {
|
|
||||||
unlisten();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => uploadToNostrBuild()}
|
onClick={() => uploadToNostrBuild()}
|
||||||
className="ml-2 inline-flex h-10 w-max items-center justify-center gap-1.5 rounded-lg px-2 text-sm font-medium text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-400"
|
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" />
|
<MediaIcon className="h-5 w-5" />
|
||||||
{loading ? 'Uploading...' : 'Add media'}
|
{loading ? 'Uploading...' : 'Add media'}
|
||||||
|
@ -19,18 +19,29 @@ export function MentionPopup({ editor }: { editor: Editor }) {
|
|||||||
<Popover.Trigger asChild>
|
<Popover.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-800"
|
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"
|
||||||
>
|
>
|
||||||
<MentionIcon className="h-5 w-5" />
|
<MentionIcon className="h-5 w-5" />
|
||||||
|
Mention
|
||||||
</button>
|
</button>
|
||||||
</Popover.Trigger>
|
</Popover.Trigger>
|
||||||
<Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-neutral-400 focus:outline-none dark:bg-neutral-600">
|
<Popover.Content
|
||||||
|
side="top"
|
||||||
|
sideOffset={5}
|
||||||
|
className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg border border-neutral-200 bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:bg-neutral-900"
|
||||||
|
>
|
||||||
<div className="flex flex-col gap-1 py-1">
|
<div className="flex flex-col gap-1 py-1">
|
||||||
{db.account.follows.map((item) => (
|
{db.account.follows.length > 0 ? (
|
||||||
<button key={item} type="button" onClick={() => insertMention(item)}>
|
db.account.follows.map((item) => (
|
||||||
<MentionItem pubkey={item} />
|
<button key={item} type="button" onClick={() => insertMention(item)}>
|
||||||
</button>
|
<MentionItem pubkey={item} />
|
||||||
))}
|
</button>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div className="flex h-16 items-center justify-center">
|
||||||
|
Contact list is empty
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Popover.Content>
|
</Popover.Content>
|
||||||
</Popover.Root>
|
</Popover.Root>
|
||||||
|
@ -7,13 +7,13 @@ export function AuthLayout() {
|
|||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
|
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
|
||||||
{db.platform !== 'macos' ? (
|
{db.platform !== 'macos' ? (
|
||||||
<WindowTitlebar />
|
<WindowTitlebar />
|
||||||
) : (
|
) : (
|
||||||
<div data-tauri-drag-region className="h-9" />
|
<div data-tauri-drag-region className="h-9" />
|
||||||
)}
|
)}
|
||||||
<div className="h-full w-full">
|
<div className="flex h-full min-h-0 w-full">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
</div>
|
</div>
|
||||||
|
@ -7,13 +7,14 @@ export function NoteLayout() {
|
|||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
|
<div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
|
||||||
{db.platform !== 'macos' ? (
|
{db.platform !== 'macos' ? (
|
||||||
<WindowTitlebar />
|
<WindowTitlebar />
|
||||||
) : (
|
) : (
|
||||||
<div data-tauri-drag-region className="h-9" />
|
<div data-tauri-drag-region className="h-9" />
|
||||||
)}
|
)}
|
||||||
<div className="h-full w-full">
|
<div data-tauri-drag-region className="h-6" />
|
||||||
|
<div className="flex h-full min-h-0 w-full">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
<ScrollRestoration />
|
<ScrollRestoration />
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,7 +5,7 @@ import { VList } from 'virtua';
|
|||||||
|
|
||||||
import { useStorage } from '@libs/storage/provider';
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
|
import { ArrowRightCircleIcon, ArrowRightIcon, LoaderIcon } from '@shared/icons';
|
||||||
import {
|
import {
|
||||||
MemoizedArticleNote,
|
MemoizedArticleNote,
|
||||||
MemoizedFileNote,
|
MemoizedFileNote,
|
||||||
@ -18,7 +18,7 @@ import { NoteSkeleton } from '@shared/notes/skeleton';
|
|||||||
import { TitleBar } from '@shared/titleBar';
|
import { TitleBar } from '@shared/titleBar';
|
||||||
import { EventLoader, WidgetWrapper } from '@shared/widgets';
|
import { EventLoader, WidgetWrapper } from '@shared/widgets';
|
||||||
|
|
||||||
import { useWidgets } from '@stores/widgets';
|
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||||
|
|
||||||
import { useNostr } from '@utils/hooks/useNostr';
|
import { useNostr } from '@utils/hooks/useNostr';
|
||||||
import { toRawEvent } from '@utils/rawEvent';
|
import { toRawEvent } from '@utils/rawEvent';
|
||||||
@ -36,6 +36,7 @@ export function LocalNetworkWidget() {
|
|||||||
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
getNextPageParam: (lastPage) => lastPage.nextCursor,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const setWidget = useWidgets((state) => state.setWidget);
|
||||||
const isFetched = useWidgets((state) => state.isFetched);
|
const isFetched = useWidgets((state) => state.isFetched);
|
||||||
const dbEvents = useMemo(
|
const dbEvents = useMemo(
|
||||||
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
() => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
|
||||||
@ -83,10 +84,18 @@ export function LocalNetworkWidget() {
|
|||||||
[dbEvents]
|
[dbEvents]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const openTrendingWidgets = async () => {
|
||||||
|
setWidget(db, {
|
||||||
|
kind: WidgetKinds.nostrBand.trendingAccounts,
|
||||||
|
title: 'Trending Accounts',
|
||||||
|
content: '',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// subscribe for new event
|
// subscribe for new event
|
||||||
// sub will be managed by lru-cache
|
// sub will be managed by lru-cache
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (db.account && db.account.circles && dbEvents.length > 0) {
|
if (db.account && db.account.circles.length > 0 && dbEvents.length > 0) {
|
||||||
const filter: NDKFilter = {
|
const filter: NDKFilter = {
|
||||||
kinds: [NDKKind.Text, NDKKind.Repost],
|
kinds: [NDKKind.Text, NDKKind.Repost],
|
||||||
authors: db.account.circles,
|
authors: db.account.circles,
|
||||||
@ -100,6 +109,31 @@ export function LocalNetworkWidget() {
|
|||||||
}
|
}
|
||||||
}, [data]);
|
}, [data]);
|
||||||
|
|
||||||
|
if (db.account.circles.length < 1) {
|
||||||
|
return (
|
||||||
|
<WidgetWrapper>
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="px-8 text-center">
|
||||||
|
<p className="mb-2 text-3xl">👋</p>
|
||||||
|
<h1 className="text-lg font-semibold">You have not follow anyone yet</h1>
|
||||||
|
<h5 className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
If you are new to Nostr, you can click button below to open trending users
|
||||||
|
and start follow some of theme
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => openTrendingWidgets()}
|
||||||
|
className="mt-4 inline-flex h-9 w-max items-center justify-center gap-2 rounded-lg bg-blue-500 px-3 font-semibold text-white hover:bg-blue-600"
|
||||||
|
>
|
||||||
|
Open trending
|
||||||
|
<ArrowRightIcon className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</WidgetWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WidgetWrapper>
|
<WidgetWrapper>
|
||||||
<TitleBar id="9999" />
|
<TitleBar id="9999" />
|
||||||
|
@ -8,6 +8,5 @@ export function toRawEvent(event: NDKEvent) {
|
|||||||
delete event.isParamReplaceable;
|
delete event.isParamReplaceable;
|
||||||
delete event.isReplaceable;
|
delete event.isReplaceable;
|
||||||
delete event.repost;
|
delete event.repost;
|
||||||
delete event.relay;
|
|
||||||
return event;
|
return event;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user