mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
ok fine
This commit is contained in:
parent
489ab6bd0b
commit
939a72f945
@ -98,6 +98,13 @@ fn secure_load(key: String) -> Result<String, String> {
|
||||
}
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
fn secure_remove(key: String) -> Result<(), ()> {
|
||||
let entry = Entry::new("lume", &key).expect("Failed to create entry");
|
||||
let _ = entry.delete_password();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn main() {
|
||||
tauri::Builder::default()
|
||||
.plugin(tauri_plugin_app::init())
|
||||
@ -140,7 +147,8 @@ fn main() {
|
||||
.invoke_handler(tauri::generate_handler![
|
||||
opengraph,
|
||||
secure_save,
|
||||
secure_load
|
||||
secure_load,
|
||||
secure_remove
|
||||
])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
|
@ -46,7 +46,7 @@ input::-ms-clear {
|
||||
}
|
||||
|
||||
.ProseMirror p.is-empty::before {
|
||||
@apply text-white/50;
|
||||
@apply text-neutral-600 dark:text-neutral-400;
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
height: 0;
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { fetch } from '@tauri-apps/plugin-http';
|
||||
import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
|
||||
import { ReactFlowProvider } from 'reactflow';
|
||||
|
||||
|
@ -46,7 +46,7 @@ export function FollowList() {
|
||||
<User key={item} pubkey={item} variant="stacked" />
|
||||
))}
|
||||
{data.length > 16 ? (
|
||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-200 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-800">
|
||||
<span className="text-xs font-medium">+{data.length}</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { readText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import { motion } from 'framer-motion';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { useState } from 'react';
|
||||
@ -46,6 +47,11 @@ export function ImportAccountScreen() {
|
||||
}
|
||||
};
|
||||
|
||||
const pasteNsec = async () => {
|
||||
const tempNsec = await readText();
|
||||
setNsec(tempNsec);
|
||||
};
|
||||
|
||||
const submitNsec = async () => {
|
||||
if (savedPrivkey) return;
|
||||
if (nsec.length > 50 && nsec.startsWith('nsec1')) {
|
||||
@ -61,7 +67,7 @@ export function ImportAccountScreen() {
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full items-center justify-center">
|
||||
<div className="absolute left-[8px] top-4">
|
||||
<div className="absolute left-[8px] top-2">
|
||||
{!created ? (
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
@ -159,30 +165,45 @@ export function ImportAccountScreen() {
|
||||
Enter your private key (optional):
|
||||
</label>
|
||||
<div className="inline-flex w-full items-center gap-2">
|
||||
<input
|
||||
name="nsec"
|
||||
type="text"
|
||||
value={nsec}
|
||||
onChange={(e) => setNsec(e.target.value)}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="nsec1"
|
||||
className="h-11 flex-1 rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submitNsec}
|
||||
className={twMerge(
|
||||
'h-11 w-24 shrink-0 rounded-lg font-semibold text-white',
|
||||
!savedPrivkey
|
||||
? 'bg-blue-500 hover:bg-blue-600'
|
||||
: 'bg-teal-500 hover:bg-teal-600'
|
||||
)}
|
||||
>
|
||||
{savedPrivkey ? 'Saved' : 'Save'}
|
||||
</button>
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
name="nsec"
|
||||
type="text"
|
||||
value={nsec}
|
||||
onChange={(e) => setNsec(e.target.value)}
|
||||
spellCheck={false}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="nsec1"
|
||||
className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
|
||||
/>
|
||||
{nsec.length < 5 ? (
|
||||
<div className="absolute right-0 top-0 inline-flex h-11 items-center justify-center px-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={pasteNsec}
|
||||
className="rounded-md bg-neutral-300 px-2 py-1 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-600"
|
||||
>
|
||||
Paste
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{nsec.length > 5 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={submitNsec}
|
||||
className={twMerge(
|
||||
'h-11 w-24 shrink-0 rounded-lg font-semibold text-white',
|
||||
!savedPrivkey
|
||||
? 'bg-blue-500 hover:bg-blue-600'
|
||||
: 'bg-teal-500 hover:bg-teal-600'
|
||||
)}
|
||||
>
|
||||
{savedPrivkey ? 'Saved' : 'Save'}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 select-text">
|
||||
@ -195,12 +216,14 @@ export function ImportAccountScreen() {
|
||||
1. In case you store private key in Lume
|
||||
</h5>
|
||||
<p className="text-sm">
|
||||
Lume will put your nsec to{' '}
|
||||
{db.platform === 'macos'
|
||||
? 'Apple Keychain (macOS)'
|
||||
: db.platform === 'windows'
|
||||
? 'Credential Manager (Windows)'
|
||||
: 'Secret Service (Linux)'}
|
||||
Lume will put your private key to{' '}
|
||||
<b>
|
||||
{db.platform === 'macos'
|
||||
? 'Apple Keychain (macOS)'
|
||||
: db.platform === 'windows'
|
||||
? 'Credential Manager (Windows)'
|
||||
: 'Secret Service (Linux)'}
|
||||
</b>
|
||||
, it will be secured by your OS
|
||||
</p>
|
||||
<h5 className="mt-2 font-semibold">
|
||||
|
@ -29,12 +29,7 @@ export function ChatScreen() {
|
||||
const renderItem = useCallback(
|
||||
(message: NDKEvent) => {
|
||||
return (
|
||||
<ChatMessage
|
||||
message={message}
|
||||
userPubkey={db.account.pubkey}
|
||||
userPrivkey={''}
|
||||
self={message.pubkey === db.account.pubkey}
|
||||
/>
|
||||
<ChatMessage message={message} self={message.pubkey === db.account.pubkey} />
|
||||
);
|
||||
},
|
||||
[data]
|
||||
@ -91,17 +86,12 @@ export function ChatScreen() {
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<VList
|
||||
ref={listRef}
|
||||
className="h-full scrollbar-none"
|
||||
mode="reverse"
|
||||
shift={true}
|
||||
>
|
||||
<VList ref={listRef} className="h-full scrollbar-none" shift={true} reverse>
|
||||
{data.map((message) => renderItem(message))}
|
||||
</VList>
|
||||
)}
|
||||
</div>
|
||||
<div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-800">
|
||||
<div className="shrink-0 rounded-b-lg border-t border-neutral-300 bg-neutral-200 p-3 dark:border-neutral-700 dark:bg-neutral-800">
|
||||
<ChatForm
|
||||
receiverPubkey={pubkey}
|
||||
userPubkey={db.account.pubkey}
|
||||
|
@ -57,12 +57,12 @@ export function ChatForm({
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
placeholder="Message"
|
||||
className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-500 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
|
||||
className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={submit}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-500 dark:text-neutral-300"
|
||||
className="inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-neutral-600 dark:text-neutral-300"
|
||||
>
|
||||
<EnterIcon className="h-5 w-5" />
|
||||
Send
|
||||
|
@ -29,7 +29,7 @@ export function MediaUploader({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => uploadMedia()}
|
||||
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-500 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
|
||||
className="group inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-300 text-neutral-600 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600"
|
||||
>
|
||||
{loading ? (
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
|
@ -7,18 +7,8 @@ import { ImagePreview, LinkPreview, MentionNote, VideoPreview } from '@shared/no
|
||||
|
||||
import { parser } from '@utils/parser';
|
||||
|
||||
export function ChatMessage({
|
||||
message,
|
||||
userPubkey,
|
||||
userPrivkey,
|
||||
self,
|
||||
}: {
|
||||
message: NDKEvent;
|
||||
userPubkey: string;
|
||||
userPrivkey: string;
|
||||
self: boolean;
|
||||
}) {
|
||||
const decryptedContent = useDecryptMessage(message, userPubkey, userPrivkey);
|
||||
export function ChatMessage({ message, self }: { message: NDKEvent; self: boolean }) {
|
||||
const decryptedContent = useDecryptMessage(message);
|
||||
const richContent = parser(decryptedContent) ?? null;
|
||||
|
||||
return (
|
||||
@ -26,17 +16,15 @@ export function ChatMessage({
|
||||
className={twMerge(
|
||||
'my-2 w-max max-w-[400px] rounded-t-xl px-3 py-3',
|
||||
self
|
||||
? 'ml-auto rounded-l-xl bg-blue-500'
|
||||
: 'rounded-r-xl bg-neutral-200 dark:bg-neutral-800'
|
||||
? 'ml-auto rounded-l-xl bg-blue-500 text-white'
|
||||
: 'rounded-r-xl bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
|
||||
)}
|
||||
>
|
||||
{!richContent ? (
|
||||
<p className="text-neutral-900 dark:text-neutral-100">Decrypting...</p>
|
||||
<p>Decrypting...</p>
|
||||
) : (
|
||||
<div>
|
||||
<p className="select-text whitespace-pre-line text-neutral-900 dark:text-neutral-100">
|
||||
{richContent.parsed}
|
||||
</p>
|
||||
<p className="select-text whitespace-pre-line">{richContent.parsed}</p>
|
||||
<div>
|
||||
{richContent.images.length > 0 && <ImagePreview urls={richContent.images} />}
|
||||
{richContent.videos.length > 0 && <VideoPreview urls={richContent.videos} />}
|
||||
|
@ -11,7 +11,7 @@ export function useDecryptMessage(message: NDKEvent) {
|
||||
useEffect(() => {
|
||||
async function decryptContent() {
|
||||
try {
|
||||
const privkey = await db.secureLoad();
|
||||
const privkey = await db.secureLoad(db.account.pubkey);
|
||||
const sender =
|
||||
db.account.pubkey === message.pubkey
|
||||
? message.tags.find((el) => el[0] === 'p')[1]
|
||||
|
@ -36,9 +36,9 @@ export function ChatsScreen() {
|
||||
<div className="col-span-1 h-full overflow-y-auto border-r border-neutral-200 scrollbar-none dark:border-neutral-800">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="flex h-11 w-full shrink-0 items-center border-b border-white/5 px-3"
|
||||
className="flex h-11 w-full shrink-0 items-center border-b border-neutral-200 px-3 dark:border-neutral-800"
|
||||
>
|
||||
<h3 className="bg-gradient-to-r from-blue-400 via-red-400 to-orange-500 bg-clip-text font-semibold text-transparent dark:from-blue-200 dark:via-red-200 dark:to-orange-300">
|
||||
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
|
||||
All chats
|
||||
</h3>
|
||||
</div>
|
||||
|
@ -55,19 +55,21 @@ export function UserLatestPosts({ pubkey }: { pubkey: string }) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-4 border-t border-white/5 pt-3">
|
||||
<h3 className="mb-4 px-3 font-semibold text-white">Latest post</h3>
|
||||
<div className="mt-4 border-t border-neutral-300 pt-3 dark:border-neutral-700">
|
||||
<h3 className="mb-4 px-3 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Latest post
|
||||
</h3>
|
||||
<div>
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3">
|
||||
<div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-white/10 text-sm font-medium text-white/70">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||
<div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
Loading latest posts...
|
||||
</div>
|
||||
</div>
|
||||
) : data.length < 1 ? (
|
||||
<div className="px-3">
|
||||
<div className="inline-flex h-16 w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium text-white/70">
|
||||
<div className="inline-flex h-16 w-full items-center justify-center rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
|
||||
No posts from 24 hours ago
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
import { NIP05 } from '@shared/nip05';
|
||||
import { TextNote } from '@shared/notes';
|
||||
import { User } from '@shared/user';
|
||||
@ -61,7 +60,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all">
|
||||
<div className="h-full w-full overflow-y-auto rounded-lg border-t border-white/10 bg-white/20 py-3 backdrop-blur-3xl">
|
||||
<div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800">
|
||||
{status === 'loading' ? (
|
||||
<div>
|
||||
<p>Loading...</p>
|
||||
@ -69,35 +68,40 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col gap-3 px-3">
|
||||
<Image
|
||||
<img
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="h-12 w-12 rounded-lg"
|
||||
/>
|
||||
<div className="flex flex-1 flex-col gap-2">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h5 className="text-lg font-semibold leading-none">
|
||||
{user?.displayName || user?.name || 'No name'}
|
||||
</h5>
|
||||
{user?.nip05 ? (
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
nip05={user?.nip05}
|
||||
className="max-w-[15rem] truncate text-sm leading-none text-white/50"
|
||||
/>
|
||||
) : (
|
||||
<span className="max-w-[15rem] truncate text-sm leading-none text-white/50">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
)}
|
||||
<div>
|
||||
<h5 className="text-lg font-semibold">
|
||||
{user?.name || user?.display_name || user?.displayName}
|
||||
</h5>
|
||||
{user?.nip05 ? (
|
||||
<NIP05
|
||||
pubkey={pubkey}
|
||||
nip05={user?.nip05}
|
||||
className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400"
|
||||
/>
|
||||
) : (
|
||||
<span className="max-w-[15rem] truncate text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{displayNpub(pubkey, 16)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{user?.about ? <TextNote content={user?.about} /> : null}
|
||||
</div>
|
||||
<div className="mt-3 inline-flex items-center gap-2">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
{followed ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => unfollowUser(pubkey)}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||
className="inline-flex h-9 w-36 items-center justify-center rounded-lg bg-neutral-300 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-700"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
@ -105,14 +109,14 @@ export const UserWithDrawer = memo(function UserWithDrawer({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => followUser(pubkey)}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||
className="inline-flex h-9 w-36 items-center justify-center rounded-lg bg-neutral-300 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-700"
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
to={`/chats/${pubkey}`}
|
||||
className="inline-flex h-10 w-36 items-center justify-center rounded-md bg-white/10 text-sm font-medium backdrop-blur-xl hover:bg-blue-600"
|
||||
className="inline-flex h-9 w-36 items-center justify-center rounded-lg bg-neutral-300 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-700"
|
||||
>
|
||||
Message
|
||||
</Link>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { AddressPointer, EventPointer } from 'nostr-tools/lib/nip19';
|
||||
import { AddressPointer, EventPointer } from 'nostr-tools/lib/types/nip19';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
@ -58,7 +58,7 @@ export function ArticleNoteScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="scrollbar-none h-full w-full overflow-y-auto scroll-smooth">
|
||||
<div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none">
|
||||
<div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-5">
|
||||
<div className="col-span-1 pr-8">
|
||||
@ -66,20 +66,20 @@ export function ArticleNoteScreen() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5 text-white" />
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
|
||||
<div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={share}
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
|
||||
>
|
||||
{isCopy ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-500" />
|
||||
<CheckCircleIcon className="h-5 w-5 text-teal-500" />
|
||||
) : (
|
||||
<ShareIcon className="h-5 w-5 text-white" />
|
||||
<ShareIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
@ -87,7 +87,7 @@ export function ArticleNoteScreen() {
|
||||
onClick={scrollToReply}
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5 text-white" />
|
||||
<ReplyIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -101,19 +101,19 @@ export function ArticleNoteScreen() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="h-min w-full px-3">
|
||||
<div className="rounded-xl border-t border-white/10 bg-white/20 px-3 pt-3">
|
||||
<div className="flex h-min w-full flex-col gap-1 px-3">
|
||||
<div>
|
||||
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
<div className="mb-3 mt-3">
|
||||
<NoteActions
|
||||
id={data.id}
|
||||
pubkey={data.pubkey}
|
||||
extraButtons={false}
|
||||
/>
|
||||
<NoteStats id={data.id} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteStats id={data.id} />
|
||||
</div>
|
||||
<div ref={replyRef} className="px-3">
|
||||
<NoteReplyForm id={data.id} pubkey={db.account.pubkey} />
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
|
||||
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { EventPointer } from 'nostr-tools/lib/nip19';
|
||||
import { EventPointer } from 'nostr-tools/lib/types/nip19';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
@ -18,7 +18,6 @@ import {
|
||||
UnknownNote,
|
||||
} from '@shared/notes';
|
||||
import { RepliesList } from '@shared/notes/replies/list';
|
||||
import { NoteSkeleton } from '@shared/notes/skeleton';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useEvent } from '@utils/hooks/useEvent';
|
||||
@ -28,6 +27,9 @@ export function TextNoteScreen() {
|
||||
const replyRef = useRef(null);
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
console.log(id);
|
||||
|
||||
const { db } = useStorage();
|
||||
const { status, data } = useEvent(id);
|
||||
|
||||
@ -62,7 +64,7 @@ export function TextNoteScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="scrollbar-none h-full w-full overflow-y-auto scroll-smooth">
|
||||
<div className="h-full w-full overflow-y-auto scroll-smooth scrollbar-none">
|
||||
<div className="container mx-auto px-4 pt-16 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-5">
|
||||
<div className="col-span-1 pr-8">
|
||||
@ -70,20 +72,20 @@ export function TextNoteScreen() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(-1)}
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/5"
|
||||
className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-200 dark:bg-neutral-800"
|
||||
>
|
||||
<ArrowLeftIcon className="h-5 w-5 text-white" />
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<div className="flex flex-col divide-y divide-white/5 rounded-xl border border-white/10 bg-white/5">
|
||||
<div className="flex flex-col divide-y divide-neutral-300 rounded-xl bg-neutral-200 dark:divide-neutral-700 dark:bg-neutral-800">
|
||||
<button
|
||||
type="button"
|
||||
onClick={share}
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl "
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-t-xl"
|
||||
>
|
||||
{isCopy ? (
|
||||
<CheckCircleIcon className="h-5 w-5 text-green-500" />
|
||||
<CheckCircleIcon className="h-5 w-5 text-teal-500" />
|
||||
) : (
|
||||
<ShareIcon className="h-5 w-5 text-white" />
|
||||
<ShareIcon className="h-5 w-5" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
@ -91,7 +93,7 @@ export function TextNoteScreen() {
|
||||
onClick={scrollToReply}
|
||||
className="sticky top-16 inline-flex h-12 w-12 items-center justify-center rounded-b-xl"
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5 text-white" />
|
||||
<ReplyIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -99,20 +101,20 @@ export function TextNoteScreen() {
|
||||
<div className="col-span-3 flex flex-col gap-1.5">
|
||||
{status === 'loading' ? (
|
||||
<div className="px-3 py-1.5">
|
||||
<div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
|
||||
<NoteSkeleton />
|
||||
<div className="rounded-xl bg-neutral-100 px-3 py-3 dark:bg-neutral-900">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-min w-full px-3">
|
||||
<div className="rounded-xl bg-white/10 px-3 pt-3 backdrop-blur-xl">
|
||||
<div className="flex h-min w-full flex-col px-3">
|
||||
<div className="rounded-xl bg-neutral-100 px-3 pt-3 dark:bg-neutral-900">
|
||||
<User pubkey={data.pubkey} time={data.created_at} variant="thread" />
|
||||
<div className="mt-2">{renderKind(data)}</div>
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<NoteActions id={id} pubkey={data.pubkey} extraButtons={false} />
|
||||
<NoteStats id={id} />
|
||||
</div>
|
||||
</div>
|
||||
<NoteStats id={id} />
|
||||
</div>
|
||||
)}
|
||||
<div ref={replyRef} className="px-3">
|
||||
|
@ -56,24 +56,26 @@ export function NWCAlby() {
|
||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="inline-flex items-center gap-2.5">
|
||||
<div className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-orange-200">
|
||||
<div className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-neutral-200">
|
||||
<AlbyIcon className="h-8 w-8" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-semibold leading-tight text-white">Alby</h5>
|
||||
<p className="text-sm leading-tight text-white/50">Require alby account</p>
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">Alby</h5>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Require alby account
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
|
||||
className="inline-flex h-9 w-min items-center justify-center rounded-md bg-neutral-300 px-3 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-700"
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
</div>
|
||||
<Dialog.Portal className="relative z-10">
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
|
@ -71,12 +71,14 @@ export function NWCOther() {
|
||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="flex items-center justify-between pt-4">
|
||||
<div className="inline-flex items-center gap-2.5">
|
||||
<div className="inline-flex h-11 w-11 items-center justify-center rounded-md bg-white/10">
|
||||
<div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-700">
|
||||
<WorldIcon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="font-semibold leading-tight text-white">URI String</h5>
|
||||
<p className="text-sm leading-tight text-white/50">
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
URI String
|
||||
</h5>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Using format nostr+walletconnect:
|
||||
</p>
|
||||
</div>
|
||||
@ -84,14 +86,14 @@ export function NWCOther() {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-min items-center justify-center rounded-md border-t border-white/10 bg-white/20 px-3 text-sm font-medium text-white hover:bg-green-500"
|
||||
className="inline-flex h-9 w-min items-center justify-center rounded-md bg-neutral-300 px-3 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-700"
|
||||
>
|
||||
Connect
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
</div>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 backdrop-blur-2xl" />
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div className="relative h-min w-full max-w-xl rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="h-min w-full shrink-0 rounded-t-xl border-b border-white/10 bg-white/5 px-5 py-5">
|
||||
|
@ -1,36 +1,50 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { NWCAlby } from '@app/nwc/components/alby';
|
||||
import { NWCOther } from '@app/nwc/components/other';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { CheckCircleIcon } from '@shared/icons';
|
||||
|
||||
export function NWCScreen() {
|
||||
const walletConnectURL = 'test';
|
||||
const { db } = useStorage();
|
||||
const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
|
||||
|
||||
const remove = async () => {
|
||||
// setWalletConnectURL('');
|
||||
// await db.secureSave('walletConnectURL', '', 'nwc');
|
||||
await db.secureRemove('nwc');
|
||||
setWalletConnectURL(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function getNWC() {
|
||||
const nwc = await db.secureLoad('nwc');
|
||||
if (nwc) setWalletConnectURL(nwc);
|
||||
}
|
||||
|
||||
getNWC();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center bg-white/5">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex w-full flex-col gap-5">
|
||||
<div className="text-center">
|
||||
<h3 className="text-2xl font-bold leading-tight">
|
||||
Nostr Wallet Connect (Beta)
|
||||
</h3>
|
||||
<p className="leading-tight text-white/70">
|
||||
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
||||
Sending tips easily via Bitcoin Lightning.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto max-w-lg">
|
||||
{!walletConnectURL ? (
|
||||
<div className="flex w-full flex-col gap-4 divide-y divide-white/5 rounded-xl border-t border-white/10 bg-white/20 p-3">
|
||||
<div className="flex w-full flex-col gap-4 divide-y divide-neutral-200 rounded-xl bg-neutral-100 p-3 dark:divide-neutral-800 dark:bg-neutral-900">
|
||||
<NWCAlby />
|
||||
<NWCOther />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex w-full flex-col rounded-xl border-t border-white/10 bg-white/20 p-3">
|
||||
<div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500">
|
||||
<div className="flex w-full flex-col rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
|
||||
<div className="mb-1 inline-flex items-center gap-1.5 text-sm text-teal-500">
|
||||
<CheckCircleIcon className="h-4 w-4" />
|
||||
<p>You're using nostr wallet connect</p>
|
||||
</div>
|
||||
@ -38,12 +52,12 @@ export function NWCScreen() {
|
||||
<textarea
|
||||
readOnly
|
||||
value={walletConnectURL.substring(0, 120) + '****'}
|
||||
className="relative h-40 w-full resize-none rounded-lg bg-white/20 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
|
||||
className="relative h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove()}
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-red-500 hover:bg-white/20 focus:outline-none disabled:opacity-50"
|
||||
className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
|
||||
>
|
||||
Remove connection
|
||||
</button>
|
||||
@ -52,17 +66,19 @@ export function NWCScreen() {
|
||||
)}
|
||||
<div className="mt-5 flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h5 className="text-sm font-bold text-white">Introduction</h5>
|
||||
<p className="text-sm text-white/70">
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Introduction
|
||||
</h5>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Nostr Wallet Connect (NWC) is a way for applications like Nostr clients to
|
||||
access a remote Lightning wallet through a standardized protocol.
|
||||
</p>
|
||||
<p className="text-sm text-white/70">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
To learn more about the details have a look at{' '}
|
||||
<a
|
||||
href="https://github.com/getAlby/nips/blob/7-wallet-connect-patch/47.md"
|
||||
target="_blank"
|
||||
className="text-blue-300"
|
||||
className="text-blue-500"
|
||||
rel="noreferrer"
|
||||
>
|
||||
the specs (NIP47)
|
||||
@ -70,38 +86,42 @@ export function NWCScreen() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h5 className="text-sm font-bold text-white">About tipping</h5>
|
||||
<p className="text-sm text-white/70">
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
About tipping
|
||||
</h5>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Also known as Zap in other Nostr client.
|
||||
</p>
|
||||
<p className="text-sm text-white/70">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Lume doesn't take any commission or platform fees when you tip
|
||||
someone.
|
||||
</p>
|
||||
<p className="text-sm text-white/70">Lume doesn't hold your Bitcoin</p>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Lume doesn't hold your Bitcoin
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<h5 className="text-sm font-bold text-white">
|
||||
<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Recommend wallet that support NWC
|
||||
</h5>
|
||||
<p className="text-sm text-white/70">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Mutiny Wallet:{' '}
|
||||
<a
|
||||
href="https://www.mutinywallet.com/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-300"
|
||||
className="text-blue-500"
|
||||
>
|
||||
website
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-sm text-white/70">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
Self hosted NWC on Umbrel :{' '}
|
||||
<a
|
||||
href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-blue-300"
|
||||
className="text-blue-500"
|
||||
>
|
||||
website
|
||||
</a>
|
||||
|
@ -53,9 +53,9 @@ export function RelayList() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="mt-20 h-full scrollbar-none">
|
||||
<VList className="h-full scrollbar-none">
|
||||
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
|
||||
<h3 className="bg-gradient-to-r from-blue-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
||||
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
|
||||
All relays used by your follows
|
||||
</h3>
|
||||
</div>
|
||||
|
@ -40,7 +40,7 @@ export function UserRelay() {
|
||||
{relayUrls.includes(item) ? (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
|
||||
<span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500"></span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="relative flex h-2 w-2">
|
||||
|
@ -25,23 +25,27 @@ export function RelayScreen() {
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3">
|
||||
<div className="col-span-2 border-r border-white/5">
|
||||
<div className="inline-flex h-16 w-full items-center gap-2.5 border-b border-white/5 px-3">
|
||||
<div className="col-span-2 border-r border-neutral-100 dark:border-neutral-900">
|
||||
<div className="inline-flex h-16 w-full items-center gap-2.5 border-b border-neutral-100 px-3 dark:border-neutral-900">
|
||||
<button type="button" onClick={() => navigate(-1)}>
|
||||
<ArrowLeftIcon className="h-5 w-5 text-white/70 hover:text-white" />
|
||||
<ArrowLeftIcon className="h-5 w-5 text-neutral-500 hover:text-neutral-600 dark:text-neutral-600 dark:hover:text-neutral-500" />
|
||||
</button>
|
||||
<h3 className="font-semibold text-white">Global events</h3>
|
||||
<h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
|
||||
Global events
|
||||
</h3>
|
||||
</div>
|
||||
<RelayEventList relayUrl={url} />
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
|
||||
<h3 className="font-semibold text-white">Information</h3>
|
||||
<div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
|
||||
<h3 className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Information
|
||||
</h3>
|
||||
</div>
|
||||
<div className="mt-4 px-3">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-white">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
<LoaderIcon className="h-4 w-4 animate-spin" />
|
||||
Loading...
|
||||
</div>
|
||||
@ -58,24 +62,28 @@ export function RelayScreen() {
|
||||
{(resolvedRelay) => (
|
||||
<div className="flex flex-col gap-5">
|
||||
<div>
|
||||
<h3 className="font-semibold leading-tight text-white">
|
||||
<h3 className="font-semibold leading-tight text-neutral-900 dark:text-neutral-100">
|
||||
{resolvedRelay.name}
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-white/70">
|
||||
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-500">
|
||||
{resolvedRelay.description}
|
||||
</p>
|
||||
</div>
|
||||
{resolvedRelay.pubkey ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<h5 className="text-sm font-semibold text-white/70">Owner:</h5>
|
||||
<div className="w-full rounded-lg bg-white/10 px-2 py-2">
|
||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
Owner:
|
||||
</h5>
|
||||
<div className="w-full rounded-lg bg-neutral-100 px-2 py-2 dark:bg-neutral-900">
|
||||
<User pubkey={resolvedRelay.pubkey} variant="simple" />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{resolvedRelay.contact ? (
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-white/70">Contact:</h5>
|
||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
Contact:
|
||||
</h5>
|
||||
<a
|
||||
href={`mailto:${resolvedRelay.contact}`}
|
||||
target="_blank"
|
||||
@ -87,7 +95,9 @@ export function RelayScreen() {
|
||||
</div>
|
||||
) : null}
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-white/70">Software:</h5>
|
||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
Software:
|
||||
</h5>
|
||||
<a
|
||||
href={resolvedRelay.software}
|
||||
target="_blank"
|
||||
@ -100,7 +110,7 @@ export function RelayScreen() {
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-white/70">
|
||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
Supported NIPs:
|
||||
</h5>
|
||||
<div className="mt-2 grid grid-cols-7 gap-2">
|
||||
@ -110,7 +120,7 @@ export function RelayScreen() {
|
||||
href={`https://nips.be/${item}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-white/10 text-sm font-medium hover:bg-blue-600"
|
||||
className="inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
@ -119,7 +129,9 @@ export function RelayScreen() {
|
||||
</div>
|
||||
{resolvedRelay.limitation ? (
|
||||
<div>
|
||||
<h5 className="text-sm font-semibold text-white/70">Limitation</h5>
|
||||
<h5 className="text-sm font-semibold text-neutral-600 dark:text-neutral-400">
|
||||
Limitation
|
||||
</h5>
|
||||
<div className="flex flex-col gap-2 divide-y divide-white/5">
|
||||
{Object.keys(resolvedRelay.limitation).map((key, index) => {
|
||||
return (
|
||||
@ -127,10 +139,10 @@ export function RelayScreen() {
|
||||
key={index}
|
||||
className="flex items-baseline justify-between pt-2"
|
||||
>
|
||||
<p className="text-sm font-medium text-white">
|
||||
<p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
|
||||
{titleCase(key)}:
|
||||
</p>
|
||||
<p className="text-sm font-medium text-white/70">
|
||||
<p className="text-sm font-medium text-neutral-600 dark:text-neutral-400">
|
||||
{resolvedRelay.limitation[key].toString()}
|
||||
</p>
|
||||
</div>
|
||||
@ -149,7 +161,7 @@ export function RelayScreen() {
|
||||
>
|
||||
Open payment website
|
||||
</a>
|
||||
<span className="text-center text-xs text-white/70">
|
||||
<span className="text-center text-xs text-neutral-600 dark:text-neutral-400">
|
||||
You need to make a payment to connect this relay
|
||||
</span>
|
||||
</div>
|
||||
|
@ -22,12 +22,16 @@ export class LumeStorage {
|
||||
return await invoke('secure_save', { key, value });
|
||||
}
|
||||
|
||||
public async secureLoad(key?: string) {
|
||||
public async secureLoad(key: string) {
|
||||
const value: string = await invoke('secure_load', { key });
|
||||
if (!value) return null;
|
||||
return value;
|
||||
}
|
||||
|
||||
public async secureRemove(key: string) {
|
||||
return await invoke('secure_remove', { key });
|
||||
}
|
||||
|
||||
public async checkAccount() {
|
||||
const result: Array<{ total: string }> = await this.db.select(
|
||||
'SELECT COUNT(*) AS "total" FROM accounts;'
|
||||
|
@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { HorizontalDotsIcon } from '@shared/icons';
|
||||
import { AccountMoreActions } from '@shared/accounts/more';
|
||||
|
||||
import { useActivities } from '@stores/activities';
|
||||
|
||||
@ -80,9 +80,7 @@ export function ActiveAccount() {
|
||||
</Avatar.Root>
|
||||
<span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-teal-500 ring-2 ring-neutral-100 dark:ring-neutral-900" />
|
||||
</Link>
|
||||
<div className="inline-flex items-center justify-center rounded-md">
|
||||
<HorizontalDotsIcon className="h-4 w-4" />
|
||||
</div>
|
||||
<AccountMoreActions pubkey={db.account.pubkey} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -13,17 +13,17 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md hover:bg-white/10"
|
||||
className="inline-flex items-center justify-center rounded-md"
|
||||
>
|
||||
<HorizontalDotsIcon className="h-5 w-5 text-white/80 group-hover:text-white" />
|
||||
<HorizontalDotsIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-white/10 bg-white/20 p-2 backdrop-blur-3xl focus:outline-none">
|
||||
<DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 focus:outline-none">
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/users/${pubkey}`}
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
Profile
|
||||
</Link>
|
||||
@ -31,7 +31,7 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/settings/backup`}
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
Backup
|
||||
</Link>
|
||||
@ -39,7 +39,7 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
||||
<DropdownMenu.Item asChild>
|
||||
<Link
|
||||
to={`/settings/`}
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-white/10 focus:outline-none"
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
|
@ -41,7 +41,8 @@ export function Composer() {
|
||||
content: JSON.parse(localStorage.getItem('editor-content') || '{}'),
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class: 'h-full markdown break-all overflow-y-auto outline-none pr-2',
|
||||
class:
|
||||
'h-full 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 break-all overflow-y-auto outline-none pr-2',
|
||||
},
|
||||
},
|
||||
onUpdate: ({ editor }) => {
|
||||
@ -114,7 +115,7 @@ export function Composer() {
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex h-full w-full gap-3 px-4 pb-4">
|
||||
<div className="flex w-10 shrink-0 items-center justify-center">
|
||||
<div className="h-full w-[2px] bg-white/10 backdrop-blur-xl" />
|
||||
<div className="h-full w-[2px] bg-neutral-100 dark:bg-neutral-900" />
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<EditorContent
|
||||
@ -134,15 +135,15 @@ export function Composer() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => clearReply()}
|
||||
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-white/10 px-2 backdrop-blur-xl"
|
||||
className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-neutral-300 px-2 dark:bg-neutral-700"
|
||||
>
|
||||
<CancelIcon className="h-4 w-4 text-white" />
|
||||
<CancelIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-b-xl border-t border-white/10 bg-white/5 p-2">
|
||||
<div className="flex items-center justify-between rounded-b-xl border-t border-neutral-200 bg-neutral-100 p-2 dark:border-neutral-800 dark:bg-neutral-900">
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<MediaUploader editor={editor} />
|
||||
<MentionPopup editor={editor} />
|
||||
@ -150,13 +151,9 @@ export function Composer() {
|
||||
<button
|
||||
onClick={() => submit()}
|
||||
disabled={editor && editor.isEmpty}
|
||||
className="inline-flex h-10 w-20 items-center justify-center rounded-lg bg-blue-500 px-2 font-semibold hover:bg-blue-600 disabled:opacity-50"
|
||||
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 text-white" />
|
||||
) : (
|
||||
'Post'
|
||||
)}
|
||||
{loading === true ? <LoaderIcon className="h-5 w-5 animate-spin" /> : 'Post'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { UnlistenFn, listen } from '@tauri-apps/api/event';
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { Editor } from '@tiptap/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
@ -53,9 +53,9 @@ export function MediaUploader({ editor }: { editor: Editor }) {
|
||||
<button
|
||||
type="button"
|
||||
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-white/80 hover:bg-white/10 hover:backdrop-blur-xl"
|
||||
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"
|
||||
>
|
||||
<MediaIcon className="h-5 w-5 text-white/80" />
|
||||
<MediaIcon className="h-5 w-5" />
|
||||
{loading ? 'Uploading...' : 'Add media'}
|
||||
</button>
|
||||
);
|
||||
|
@ -19,9 +19,9 @@ export function MentionPopup({ editor }: { editor: Editor }) {
|
||||
<Popover.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg hover:bg-white/10 hover:backdrop-blur-xl"
|
||||
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"
|
||||
>
|
||||
<MentionIcon className="h-5 w-5 text-white/80" />
|
||||
<MentionIcon className="h-5 w-5" />
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
<Popover.Content className="h-full max-h-[200px] w-[250px] overflow-hidden overflow-y-auto rounded-lg bg-white/10 backdrop-blur-xl focus:outline-none">
|
||||
|
@ -1,5 +1,4 @@
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
@ -9,19 +8,13 @@ import {
|
||||
ChevronDownIcon,
|
||||
ChevronRightIcon,
|
||||
ComposeIcon,
|
||||
ExpandIcon,
|
||||
} from '@shared/icons';
|
||||
|
||||
import { useComposer } from '@stores/composer';
|
||||
|
||||
export function ComposerModal() {
|
||||
const { db } = useStorage();
|
||||
|
||||
const [toggleModal, open] = useComposer((state) => [state.toggleModal, state.open]);
|
||||
const [toggleExpand, expand] = useComposer((state) => [
|
||||
state.toggleExpand,
|
||||
state.expand,
|
||||
]);
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={toggleModal}>
|
||||
@ -34,35 +27,21 @@ export function ComposerModal() {
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-white dark:bg-black" />
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-xl dark:bg-white/50" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 flex min-h-full items-center justify-center">
|
||||
<div
|
||||
className={twMerge(
|
||||
'relative h-min w-full rounded-xl bg-neutral-100 dark:bg-neutral-900',
|
||||
expand ? 'max-w-4xl' : 'max-w-2xl'
|
||||
)}
|
||||
>
|
||||
<div className="relative h-min w-full max-w-2xl rounded-xl bg-white dark:bg-black">
|
||||
<div className="flex items-center justify-between px-4 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<ComposerUser pubkey={db.account.pubkey} />
|
||||
<ChevronRightIcon className="h-4 w-4 text-neutral-400 dark:text-neutral-600" />
|
||||
<ChevronRightIcon className="h-4 w-4 text-neutral-600 dark:text-neutral-400" />
|
||||
<div className="inline-flex h-7 w-max items-center justify-center gap-0.5 rounded bg-neutral-200 pl-3 pr-1.5 text-sm font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
|
||||
New Post
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleExpand()}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400"
|
||||
>
|
||||
<ExpandIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-400 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400">
|
||||
<CancelIcon className="h-5 w-5" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
<Dialog.Close className="inline-flex h-10 w-10 items-center justify-center rounded-lg text-neutral-600 hover:bg-neutral-200 hover:text-neutral-500 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-400">
|
||||
<CancelIcon className="h-5 w-5" />
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
<Composer />
|
||||
</div>
|
||||
|
@ -1,5 +1,3 @@
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
import { displayNpub } from '@utils/shortenKey';
|
||||
|
||||
@ -8,12 +6,12 @@ export function ComposerUser({ pubkey }: { pubkey: string }) {
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
<img
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-10 w-10 shrink-0 rounded-lg"
|
||||
/>
|
||||
<h5 className="font-medium text-white">
|
||||
<h5 className="font-medium text-neutral-900 dark:text-neutral-100">
|
||||
{user?.display_name || user?.name || user?.displayName || displayNpub(pubkey, 16)}
|
||||
</h5>
|
||||
</div>
|
||||
|
@ -1,10 +1,22 @@
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Outlet, ScrollRestoration } from 'react-router-dom';
|
||||
import { WindowTitlebar } from 'tauri-controls';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
export function NoteLayout() {
|
||||
const { db } = useStorage();
|
||||
|
||||
return (
|
||||
<div className="relative h-screen w-screen">
|
||||
<div className="absolute left-0 top-0 z-50 h-16 w-full" data-tauri-drag-region />
|
||||
<Outlet />
|
||||
<div className="h-screen w-screen bg-neutral-50 dark:bg-neutral-950">
|
||||
{db.platform !== 'macos' ? (
|
||||
<WindowTitlebar />
|
||||
) : (
|
||||
<div data-tauri-drag-region className="h-9" />
|
||||
)}
|
||||
<div className="h-full w-full">
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -3,8 +3,6 @@ import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { LogoutIcon } from '@shared/icons';
|
||||
|
||||
export function Logout() {
|
||||
const { db } = useStorage();
|
||||
|
||||
@ -22,9 +20,9 @@ export function Logout() {
|
||||
<AlertDialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-r-lg hover:bg-white/10"
|
||||
className="inline-flex h-10 items-center rounded-lg px-2 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none"
|
||||
>
|
||||
<LogoutIcon className="h-5 w-5 text-white" />
|
||||
Logout
|
||||
</button>
|
||||
</AlertDialog.Trigger>
|
||||
<AlertDialog.Portal>
|
||||
|
@ -61,9 +61,7 @@ export const NIP05 = memo(function NIP05({
|
||||
|
||||
return (
|
||||
<div className={twMerge('inline-flex items-center gap-1', className)}>
|
||||
<div>
|
||||
<p className="text-sm">{nip05}</p>
|
||||
</div>
|
||||
<p className="text-sm">{nip05}</p>
|
||||
<div className="shrink-0">
|
||||
{data === true ? (
|
||||
<VerifiedIcon className="h-3 w-3 text-green-500" />
|
||||
|
@ -1,8 +1,7 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import { nip19 } from 'nostr-tools';
|
||||
import { EventPointer } from 'nostr-tools/lib/nip19';
|
||||
import { EventPointer } from 'nostr-tools/lib/types/nip19';
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
@ -25,19 +24,20 @@ export function MoreActions({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
||||
<DropdownMenu.Trigger>
|
||||
<HorizontalDotsIcon className="h-5 w-5 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button type="button" className="inline-flex h-7 w-7 items-center justify-center">
|
||||
<HorizontalDotsIcon className="h-5 w-5 text-neutral-800 hover:text-blue-500 dark:text-neutral-200" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-300 bg-neutral-200 focus:outline-none dark:border-neutral-700 dark:bg-neutral-800">
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => copyLink()}
|
||||
<Link
|
||||
to={`/notes/text/${id}`}
|
||||
className="inline-flex h-10 items-center px-4 text-sm text-neutral-900 hover:bg-neutral-300 focus:outline-none dark:text-neutral-100 dark:hover:bg-neutral-700"
|
||||
>
|
||||
Focus
|
||||
</button>
|
||||
</Link>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item asChild>
|
||||
<button
|
||||
|
@ -62,7 +62,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
<Popover.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
{reaction ? (
|
||||
<img src={getReactionImage(reaction)} alt={reaction} className="h-5 w-5" />
|
||||
|
@ -21,7 +21,7 @@ export function NoteReply({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setReply(id, pubkey, root)}
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<ReplyIcon className="h-5 w-5 group-hover:text-blue-500" />
|
||||
</button>
|
||||
|
@ -44,7 +44,7 @@ export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
<AlertDialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<RepostIcon
|
||||
className={twMerge(
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { webln } from '@getalby/sdk';
|
||||
import { SendPaymentResponse } from '@getalby/sdk/dist/types';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { message } from '@tauri-apps/plugin-dialog';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
@ -79,9 +80,10 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
|
||||
useEffect(() => {
|
||||
async function getWalletConnectURL() {
|
||||
// const uri: string = await invoke('secure_load', { key: 'nwc' });
|
||||
setWalletConnectURL('todo');
|
||||
const uri: string = await invoke('secure_load', { key: 'nwc' });
|
||||
if (uri) setWalletConnectURL(uri);
|
||||
}
|
||||
|
||||
getWalletConnectURL();
|
||||
|
||||
return () => {
|
||||
@ -97,7 +99,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
<Dialog.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-500 dark:text-neutral-300"
|
||||
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
||||
>
|
||||
<ZapIcon className="h-5 w-5 group-hover:text-blue-500" />
|
||||
</button>
|
||||
|
@ -80,7 +80,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
|
||||
<>
|
||||
<div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
|
||||
<div className="mb-5 flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<User pubkey={data.pubkey} time={data.created_at} eventId={data.id} />
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
|
@ -1,7 +1,10 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { Link } from 'react-router-dom';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
|
||||
import { Boost, Hashtag, Invoice, MentionUser } from '@shared/notes';
|
||||
|
||||
export function ArticleDetailNote({ event }: { event: NDKEvent }) {
|
||||
/*const metadata = useMemo(() => {
|
||||
const title = event.tags.find((tag) => tag[0] === 'title')?.[1];
|
||||
@ -26,7 +29,38 @@ export function ArticleDetailNote({ event }: { event: NDKEvent }) {
|
||||
}, [event.id]);*/
|
||||
|
||||
return (
|
||||
<ReactMarkdown className="markdown-article" remarkPlugins={[remarkGfm]}>
|
||||
<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"
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ href }) => {
|
||||
const cleanURL = new URL(href);
|
||||
cleanURL.search = '';
|
||||
return (
|
||||
<Link to={href} target="_blank" className="w-max break-all hover:!underline">
|
||||
{cleanURL.hostname + cleanURL.pathname}
|
||||
</Link>
|
||||
);
|
||||
},
|
||||
del: ({ children }) => {
|
||||
const key = children[0] as string;
|
||||
if (typeof key !== 'string') 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-', '')} />;
|
||||
}
|
||||
if (key.startsWith('boost')) {
|
||||
return <Boost boost={key.replace('boost-', '')} />;
|
||||
}
|
||||
if (key.startsWith('lnbc')) {
|
||||
return <Invoice invoice={key.replace('lnbc-', '')} />;
|
||||
}
|
||||
},
|
||||
}}
|
||||
linkTarget={'_blank'}
|
||||
>
|
||||
{event.content}
|
||||
</ReactMarkdown>
|
||||
);
|
||||
|
@ -70,7 +70,11 @@ export function Repost({
|
||||
>
|
||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={embedEvent.pubkey} time={embedEvent.created_at} />
|
||||
<User
|
||||
pubkey={embedEvent.pubkey}
|
||||
time={embedEvent.created_at}
|
||||
eventId={embedEvent.id}
|
||||
/>
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
@ -147,7 +151,7 @@ export function Repost({
|
||||
>
|
||||
<User pubkey={event.pubkey} time={event.created_at} variant="repost" />
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={data.pubkey} time={data.created_at} />
|
||||
<User pubkey={data.pubkey} time={data.created_at} eventId={data.id} />
|
||||
<div className="-mt-4 flex items-start gap-3">
|
||||
<div className="w-10 shrink-0" />
|
||||
<div className="relative z-20 flex-1">
|
||||
|
@ -16,13 +16,13 @@ export function ImagePreview({ urls }: { urls: string[] }) {
|
||||
<div key={url} className="group relative">
|
||||
<img
|
||||
src={url}
|
||||
alt="image"
|
||||
className="h-auto w-full rounded-lg border border-neutral-200 object-cover dark:border-neutral-800"
|
||||
alt={url}
|
||||
className="h-auto w-full rounded-lg border border-neutral-300 object-cover dark:border-neutral-700"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => downloadImage(url)}
|
||||
className="absolute right-2 top-2 hidden h-8 w-8 items-center justify-center rounded-md bg-black/50 backdrop-blur-md group-hover:inline-flex hover:bg-black/40"
|
||||
className="absolute right-2 top-2 hidden h-10 w-10 items-center justify-center rounded-lg bg-black/50 backdrop-blur-xl group-hover:inline-flex hover:bg-blue-500"
|
||||
>
|
||||
<DownloadIcon className="h-5 w-5 text-white" />
|
||||
</button>
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Button } from '@shared/button';
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
import { useProfile } from '@utils/hooks/useProfile';
|
||||
@ -24,34 +23,32 @@ export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-3 flex flex-col rounded-xl bg-white/10 backdrop-blur-xl">
|
||||
<div className="mt-3 flex flex-col rounded-xl bg-neutral-200 dark:bg-neutral-800">
|
||||
<div className="relative w-full flex-1 overflow-hidden">
|
||||
<textarea
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Reply to this thread..."
|
||||
className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-white !outline-none placeholder:text-white/50"
|
||||
className=" relative h-24 w-full resize-none rounded-md bg-transparent px-3 py-3 text-base text-neutral-900 !outline-none placeholder:text-neutral-600 dark:text-neutral-100 dark:placeholder:text-neutral-400"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full border-t border-white/10 px-3 py-3">
|
||||
<div className="w-full border-t border-neutral-300 px-3 py-3 dark:border-neutral-700">
|
||||
{status === 'loading' ? (
|
||||
<div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div>Loading</div>
|
||||
) : (
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<div className="relative h-11 w-11 shrink-0 rounded">
|
||||
<Image
|
||||
<img
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
className="h-11 w-11 rounded-lg bg-white object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-1 text-sm leading-none text-white/50">Reply as</p>
|
||||
<p className="text-sm font-medium leading-none text-white">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">Reply as</p>
|
||||
<p className="font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{user?.name || displayNpub(pubkey, 16)}
|
||||
</p>
|
||||
</div>
|
||||
|
@ -30,7 +30,7 @@ export function NoteWrapper({
|
||||
<div className="relative">{root && <ChildNote id={root} />}</div>
|
||||
<div className="relative">{reply && <ChildNote id={reply} root={root} />}</div>
|
||||
<div className="relative flex flex-col">
|
||||
<User pubkey={event.pubkey} time={event.created_at} />
|
||||
<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="relative z-20 flex-1">
|
||||
|
@ -15,12 +15,12 @@ export function TitleBar({ id, title }: { id?: string; title?: string }) {
|
||||
{id === '9999' ? (
|
||||
<div className="isolate flex -space-x-2">
|
||||
{db.account.circles
|
||||
?.slice(0, 4)
|
||||
?.slice(0, 10)
|
||||
.map((item) => <User key={item} pubkey={item} variant="ministacked" />)}
|
||||
{db.account.circles?.length > 4 ? (
|
||||
<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
||||
{db.account.circles?.length > 10 ? (
|
||||
<div className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
|
||||
<span className="text-xs font-medium">
|
||||
+{db.account.circles?.length - 4}
|
||||
+{db.account.circles?.length - 10}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
@ -216,13 +216,13 @@ export const User = memo(function User({
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="inline-block h-8 w-8 rounded-full ring-1 ring-black"
|
||||
className="inline-block h-8 w-8 rounded-full ring-1 ring-neutral-200 dark:ring-neutral-800"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black dark:bg-white"
|
||||
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-neutral-200 dark:bg-white dark:ring-neutral-800"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
@ -313,7 +313,7 @@ export const User = memo(function User({
|
||||
<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{user?.name || user?.display_name || user?.displayName || 'Anon'}
|
||||
</h5>
|
||||
<div className="inline-flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-300">
|
||||
<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<span>{createdAt}</span>
|
||||
<span>·</span>
|
||||
<span>{displayNpub(pubkey, 16)}</span>
|
||||
|
@ -113,7 +113,7 @@ export function LocalNetworkWidget() {
|
||||
) : dbEvents.length === 0 ? (
|
||||
<EventLoader firstTime={true} />
|
||||
) : (
|
||||
<VList className="h-full scrollbar-none" shift={true}>
|
||||
<VList className="h-full scrollbar-none">
|
||||
{!isFetched ? <EventLoader firstTime={false} /> : null}
|
||||
{dbEvents.map((item) => renderItem(item))}
|
||||
<div className="flex items-center justify-center px-3 py-1.5">
|
||||
|
@ -202,8 +202,31 @@ export function useNostr() {
|
||||
|
||||
const getAllEventsSinceLastLogin = async (customSince?: number) => {
|
||||
try {
|
||||
let since: number;
|
||||
const dbEventsEmpty = await db.isEventsEmpty();
|
||||
const circleSetting = await db.getSettingValue('circles');
|
||||
|
||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||
const follows = await user.follows();
|
||||
const relayList = await user.relayList();
|
||||
|
||||
const followsAsArr = [];
|
||||
follows.forEach((user) => {
|
||||
followsAsArr.push(user.pubkey);
|
||||
});
|
||||
|
||||
// update user's follows
|
||||
await db.updateAccount('follows', JSON.stringify(followsAsArr));
|
||||
if (circleSetting !== '1')
|
||||
await db.updateAccount('circles', JSON.stringify(followsAsArr));
|
||||
|
||||
// update user's relay list
|
||||
if (relayList) {
|
||||
for (const relay of relayList.relays) {
|
||||
await db.createRelay(relay);
|
||||
}
|
||||
}
|
||||
|
||||
let since: number;
|
||||
|
||||
if (!customSince) {
|
||||
if (dbEventsEmpty || db.account.last_login_at === 0) {
|
||||
|
Loading…
Reference in New Issue
Block a user