mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
update nip-05 and user profile component styles
This commit is contained in:
parent
a945f04959
commit
8aa2ef39c5
@ -5,7 +5,6 @@
|
|||||||
|
|
||||||
use keyring::Entry;
|
use keyring::Entry;
|
||||||
use std::time::Duration;
|
use std::time::Duration;
|
||||||
use tauri::Manager;
|
|
||||||
use tauri_plugin_autostart::MacosLauncher;
|
use tauri_plugin_autostart::MacosLauncher;
|
||||||
use tauri_plugin_sql::{Migration, MigrationKind};
|
use tauri_plugin_sql::{Migration, MigrationKind};
|
||||||
use webpage::{Webpage, WebpageOptions};
|
use webpage::{Webpage, WebpageOptions};
|
||||||
@ -149,12 +148,6 @@ fn main() {
|
|||||||
MacosLauncher::LaunchAgent,
|
MacosLauncher::LaunchAgent,
|
||||||
Some(vec!["--flag1", "--flag2"]),
|
Some(vec!["--flag1", "--flag2"]),
|
||||||
))
|
))
|
||||||
.plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
|
|
||||||
println!("{}, {argv:?}, {cwd}", app.package_info().name);
|
|
||||||
app
|
|
||||||
.emit_all("single-instance", Payload { args: argv, cwd })
|
|
||||||
.unwrap();
|
|
||||||
}))
|
|
||||||
.plugin(tauri_plugin_upload::init())
|
.plugin(tauri_plugin_upload::init())
|
||||||
.plugin(tauri_plugin_store::Builder::default().build())
|
.plugin(tauri_plugin_store::Builder::default().build())
|
||||||
.invoke_handler(tauri::generate_handler![
|
.invoke_handler(tauri::generate_handler![
|
||||||
|
@ -110,6 +110,13 @@ export default function App() {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'personal',
|
||||||
|
async lazy() {
|
||||||
|
const { PersonalScreen } = await import('@app/personal');
|
||||||
|
return { Component: PersonalScreen };
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
9
src/app/personal/index.tsx
Normal file
9
src/app/personal/index.tsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
|
import { UserProfile } from '@shared/userProfile';
|
||||||
|
|
||||||
|
export function PersonalScreen() {
|
||||||
|
const { db } = useStorage();
|
||||||
|
|
||||||
|
return <div></div>;
|
||||||
|
}
|
@ -1,4 +1,6 @@
|
|||||||
import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
|
import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
|
||||||
|
import * as Avatar from '@radix-ui/react-avatar';
|
||||||
|
import { minidenticon } from 'minidenticons';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
@ -9,7 +11,6 @@ import { UserStats } from '@app/users/components/stats';
|
|||||||
import { useNDK } from '@libs/ndk/provider';
|
import { useNDK } from '@libs/ndk/provider';
|
||||||
import { useStorage } from '@libs/storage/provider';
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
import { Image } from '@shared/image';
|
|
||||||
import { NIP05 } from '@shared/nip05';
|
import { NIP05 } from '@shared/nip05';
|
||||||
|
|
||||||
import { useProfile } from '@utils/hooks/useProfile';
|
import { useProfile } from '@utils/hooks/useProfile';
|
||||||
@ -22,6 +23,9 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
|
|
||||||
const [followed, setFollowed] = useState(false);
|
const [followed, setFollowed] = useState(false);
|
||||||
|
|
||||||
|
const svgURI =
|
||||||
|
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
|
||||||
|
|
||||||
const follow = async (pubkey: string) => {
|
const follow = async (pubkey: string) => {
|
||||||
try {
|
try {
|
||||||
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
|
||||||
@ -85,11 +89,23 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-7 flex w-full flex-col items-center px-5">
|
<div className="-mt-7 flex w-full flex-col items-center px-5">
|
||||||
<Image
|
<Avatar.Root className="shrink-0">
|
||||||
src={user.picture || user.image}
|
<Avatar.Image
|
||||||
alt={pubkey}
|
src={user?.picture || user?.image}
|
||||||
className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
|
alt={pubkey}
|
||||||
/>
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
style={{ contentVisibility: 'auto' }}
|
||||||
|
className="h-14 w-14 rounded-lg bg-white ring-2 ring-neutral-100 dark:ring-neutral-900"
|
||||||
|
/>
|
||||||
|
<Avatar.Fallback delayMs={300}>
|
||||||
|
<img
|
||||||
|
src={svgURI}
|
||||||
|
alt={pubkey}
|
||||||
|
className="h-14 w-14 rounded-lg bg-black dark:bg-white"
|
||||||
|
/>
|
||||||
|
</Avatar.Fallback>
|
||||||
|
</Avatar.Root>
|
||||||
<div className="mt-2 flex flex-1 flex-col gap-6">
|
<div className="mt-2 flex flex-1 flex-col gap-6">
|
||||||
<div className="flex flex-col items-center gap-1">
|
<div className="flex flex-col items-center gap-1">
|
||||||
<div className="inline-flex flex-col items-center">
|
<div className="inline-flex flex-col items-center">
|
||||||
@ -100,7 +116,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
|
|||||||
<NIP05
|
<NIP05
|
||||||
pubkey={pubkey}
|
pubkey={pubkey}
|
||||||
nip05={user?.nip05}
|
nip05={user?.nip05}
|
||||||
className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400"
|
className="text-neutral-600 dark:text-neutral-400"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
|
<span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">
|
||||||
|
@ -6,15 +6,22 @@ import { compactNumber } from '@utils/number';
|
|||||||
|
|
||||||
export function UserStats({ pubkey }: { pubkey: string }) {
|
export function UserStats({ pubkey }: { pubkey: string }) {
|
||||||
const { status, data } = useQuery({
|
const { status, data } = useQuery({
|
||||||
queryKey: ['user-metadata', pubkey],
|
queryKey: ['user-stats', pubkey],
|
||||||
|
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||||
|
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`, {
|
||||||
|
signal,
|
||||||
|
});
|
||||||
|
|
||||||
...async () => {
|
|
||||||
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
throw new Error('Error');
|
throw new Error('Error');
|
||||||
}
|
}
|
||||||
|
|
||||||
return await res.json();
|
return await res.json();
|
||||||
},
|
},
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchOnReconnect: false,
|
||||||
|
staleTime: Infinity,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (status === 'pending') {
|
if (status === 'pending') {
|
||||||
|
@ -70,7 +70,6 @@ export function UserScreen() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-full w-full overflow-y-auto">
|
<div className="relative h-full w-full overflow-y-auto">
|
||||||
<div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
|
|
||||||
<UserProfile pubkey={pubkey} />
|
<UserProfile pubkey={pubkey} />
|
||||||
<div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
|
<div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
|
||||||
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
<h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">
|
||||||
|
@ -25,7 +25,7 @@ export function ActiveAccount() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
<div className="flex flex-col gap-1 rounded-lg bg-neutral-100 p-1 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800">
|
||||||
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
|
<Link to="/personal" className="relative inline-block">
|
||||||
<Avatar.Root>
|
<Avatar.Root>
|
||||||
<Avatar.Image
|
<Avatar.Image
|
||||||
src={user?.picture || user?.image}
|
src={user?.picture || user?.image}
|
||||||
@ -38,14 +38,14 @@ export function ActiveAccount() {
|
|||||||
<Avatar.Fallback delayMs={150}>
|
<Avatar.Fallback delayMs={150}>
|
||||||
<img
|
<img
|
||||||
src={svgURI}
|
src={svgURI}
|
||||||
alt={db.account.pubkeypubkey}
|
alt={db.account.pubkey}
|
||||||
className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
|
className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
|
||||||
/>
|
/>
|
||||||
</Avatar.Fallback>
|
</Avatar.Fallback>
|
||||||
</Avatar.Root>
|
</Avatar.Root>
|
||||||
<NetworkStatusIndicator />
|
<NetworkStatusIndicator />
|
||||||
</Link>
|
</Link>
|
||||||
<AccountMoreActions pubkey={db.account.pubkey} />
|
<AccountMoreActions />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,14 @@
|
|||||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||||
import { useState } from 'react';
|
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { useStorage } from '@libs/storage/provider';
|
||||||
|
|
||||||
import { HorizontalDotsIcon } from '@shared/icons';
|
import { HorizontalDotsIcon } from '@shared/icons';
|
||||||
import { Logout } from '@shared/logout';
|
import { Logout } from '@shared/logout';
|
||||||
|
|
||||||
export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
export function AccountMoreActions() {
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger asChild>
|
<DropdownMenu.Trigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -20,14 +19,6 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
|
|||||||
</DropdownMenu.Trigger>
|
</DropdownMenu.Trigger>
|
||||||
<DropdownMenu.Portal>
|
<DropdownMenu.Portal>
|
||||||
<DropdownMenu.Content className="ml-2 flex w-[200px] flex-col overflow-hidden rounded-xl bg-blue-500 p-2 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-blue-600 focus:outline-none"
|
|
||||||
>
|
|
||||||
Profile
|
|
||||||
</Link>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item asChild>
|
<DropdownMenu.Item asChild>
|
||||||
<Link
|
<Link
|
||||||
to={`/settings/backup`}
|
to={`/settings/backup`}
|
||||||
|
@ -22,7 +22,7 @@ export const NIP05 = memo(function NIP05({
|
|||||||
}) {
|
}) {
|
||||||
const { status, data } = useQuery({
|
const { status, data } = useQuery({
|
||||||
queryKey: ['nip05', nip05],
|
queryKey: ['nip05', nip05],
|
||||||
queryFn: async () => {
|
queryFn: async ({ signal }: { signal: AbortSignal }) => {
|
||||||
try {
|
try {
|
||||||
const localPath = nip05.split('@')[0];
|
const localPath = nip05.split('@')[0];
|
||||||
const service = nip05.split('@')[1];
|
const service = nip05.split('@')[1];
|
||||||
@ -33,11 +33,13 @@ export const NIP05 = memo(function NIP05({
|
|||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json; charset=utf-8',
|
'Content-Type': 'application/json; charset=utf-8',
|
||||||
},
|
},
|
||||||
|
signal,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
|
if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
|
||||||
|
|
||||||
const data: NIP05 = await res.json();
|
const data: NIP05 = await res.json();
|
||||||
|
|
||||||
if (data.names) {
|
if (data.names) {
|
||||||
if (data.names[localPath] !== pubkey) return false;
|
if (data.names[localPath] !== pubkey) return false;
|
||||||
return true;
|
return true;
|
||||||
@ -58,15 +60,19 @@ export const NIP05 = memo(function NIP05({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={twMerge('inline-flex items-center gap-1', className)}>
|
<div className="inline-flex items-center gap-1">
|
||||||
<p className="text-sm">{nip05}</p>
|
<p className={twMerge('text-sm font-medium', className)}>{nip05}</p>
|
||||||
<div className="shrink-0">
|
{data === true ? (
|
||||||
{data === true ? (
|
<div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1 rounded-full bg-teal-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
|
||||||
<VerifiedIcon className="h-3 w-3 text-green-500" />
|
<VerifiedIcon className="h-4 w-4" />
|
||||||
) : (
|
Verified
|
||||||
<UnverifiedIcon className="h-3 w-3 text-red-500" />
|
</div>
|
||||||
)}
|
) : (
|
||||||
</div>
|
<div className="inline-flex h-5 w-max shrink-0 items-center justify-center gap-1.5 rounded-full bg-red-500 pl-0.5 pr-1.5 text-xs font-medium text-white">
|
||||||
|
<UnverifiedIcon className="h-4 w-4" />
|
||||||
|
Unverified
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { NDKEvent, NDKFilter, NDKKind } from '@nostr-dev-kit/ndk';
|
import { NDKEvent, NDKFilter, NDKKind, NDKSubscription } from '@nostr-dev-kit/ndk';
|
||||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useCallback, useEffect, useMemo } from 'react';
|
import { useCallback, useEffect, useMemo } from 'react';
|
||||||
import { VList } from 'virtua';
|
import { VList } from 'virtua';
|
||||||
@ -25,7 +25,6 @@ export function NewsfeedWidget() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const { db } = useStorage();
|
const { db } = useStorage();
|
||||||
const { sub } = useNostr();
|
|
||||||
const { relayUrls, ndk, fetcher } = useNDK();
|
const { relayUrls, ndk, fetcher } = useNDK();
|
||||||
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
|
||||||
useInfiniteQuery({
|
useInfiniteQuery({
|
||||||
@ -112,6 +111,8 @@ export function NewsfeedWidget() {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let sub: NDKSubscription = undefined;
|
||||||
|
|
||||||
if (status === 'success' && db.account && db.account.circles.length > 0) {
|
if (status === 'success' && db.account && db.account.circles.length > 0) {
|
||||||
queryClient.fetchQuery({ queryKey: ['notification'] });
|
queryClient.fetchQuery({ queryKey: ['notification'] });
|
||||||
|
|
||||||
@ -121,21 +122,21 @@ export function NewsfeedWidget() {
|
|||||||
since: Math.floor(Date.now() / 1000),
|
since: Math.floor(Date.now() / 1000),
|
||||||
};
|
};
|
||||||
|
|
||||||
sub(
|
sub = ndk.subscribe(filter, { closeOnEose: false, groupable: false });
|
||||||
filter,
|
sub.addListener('event', async (event: NDKEvent) => {
|
||||||
async (event) => {
|
await queryClient.setQueryData(
|
||||||
queryClient.setQueryData(
|
['newsfeed'],
|
||||||
['newsfeed'],
|
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
|
||||||
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
|
...prev,
|
||||||
...prev,
|
pages: [[event], ...prev.pages],
|
||||||
pages: [[event], ...prev.pages],
|
})
|
||||||
})
|
);
|
||||||
);
|
});
|
||||||
},
|
|
||||||
false,
|
|
||||||
'newsfeed'
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (sub) sub.stop();
|
||||||
|
};
|
||||||
}, [status]);
|
}, [status]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -54,6 +54,10 @@ export function NotificationWidget() {
|
|||||||
return lastEvent.created_at - 1;
|
return lastEvent.created_at - 1;
|
||||||
},
|
},
|
||||||
enabled: false,
|
enabled: false,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
refetchOnMount: false,
|
||||||
|
refetchOnReconnect: false,
|
||||||
|
staleTime: Infinity,
|
||||||
});
|
});
|
||||||
|
|
||||||
const allEvents = useMemo(
|
const allEvents = useMemo(
|
||||||
|
Loading…
Reference in New Issue
Block a user