nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-14 09:13:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

update nip-05 and user profile component styles

Browse Source
This commit is contained in:
reya 2023-11-02 13:47:44 +07:00
parent a945f04959
commit 8aa2ef39c5
11 changed files with 93 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src-tauri/src/main.rs
View File

@ -5,7 +5,6 @@
use keyring::Entry;
use std::time::Duration;
use tauri::Manager;
use tauri_plugin_autostart::MacosLauncher;
use tauri_plugin_sql::{Migration, MigrationKind};
use webpage::{Webpage, WebpageOptions};
@ -149,12 +148,6 @@ fn main() {
MacosLauncher::LaunchAgent,
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_store::Builder::default().build())
.invoke_handler(tauri::generate_handler![

7
src/app.tsx
View File

@ -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
View 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>;
}

30
src/app/users/components/profile.tsx
View File

@ -1,4 +1,6 @@
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 { Link } from 'react-router-dom';
import { toast } from 'sonner';
@ -9,7 +11,6 @@ import { UserStats } from '@app/users/components/stats';
import { useNDK } from '@libs/ndk/provider';
import { useStorage } from '@libs/storage/provider';
import { Image } from '@shared/image';
import { NIP05 } from '@shared/nip05';
import { useProfile } from '@utils/hooks/useProfile';
@ -22,6 +23,9 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
const [followed, setFollowed] = useState(false);
const svgURI =
'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
const follow = async (pubkey: string) => {
try {
const user = ndk.getUser({ hexpubkey: db.account.pubkey });
@ -85,11 +89,23 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
)}
</div>
<div className="-mt-7 flex w-full flex-col items-center px-5">
<Image
src={user.picture || user.image}
alt={pubkey}
className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
/>
<Avatar.Root className="shrink-0">
<Avatar.Image
src={user?.picture || user?.image}
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="flex flex-col items-center gap-1">
<div className="inline-flex flex-col items-center">
@ -100,7 +116,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
<NIP05
pubkey={pubkey}
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">

13
src/app/users/components/stats.tsx
View File

@ -6,15 +6,22 @@ import { compactNumber } from '@utils/number';
export function UserStats({ pubkey }: { pubkey: string }) {
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) {
throw new Error('Error');
}
return await res.json();
},
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
staleTime: Infinity,
});
if (status === 'pending') {

1
src/app/users/index.tsx
View File

@ -70,7 +70,6 @@ export function UserScreen() {
return (
<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} />
<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">

6
src/shared/accounts/active.tsx
View File

@ -25,7 +25,7 @@ export function ActiveAccount() {
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">
<Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
<Link to="/personal" className="relative inline-block">
<Avatar.Root>
<Avatar.Image
src={user?.picture || user?.image}
@ -38,14 +38,14 @@ export function ActiveAccount() {
<Avatar.Fallback delayMs={150}>
<img
src={svgURI}
alt={db.account.pubkeypubkey}
alt={db.account.pubkey}
className="aspect-square h-auto w-full rounded-md bg-black dark:bg-white"
/>
</Avatar.Fallback>
</Avatar.Root>
<NetworkStatusIndicator />
</Link>
<AccountMoreActions pubkey={db.account.pubkey} />
<AccountMoreActions />
</div>
);
}

17
src/shared/accounts/more.tsx
View File

@ -1,15 +1,14 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useStorage } from '@libs/storage/provider';
import { HorizontalDotsIcon } from '@shared/icons';
import { Logout } from '@shared/logout';
export function AccountMoreActions({ pubkey }: { pubkey: string }) {
const [open, setOpen] = useState(false);
export function AccountMoreActions() {
return (
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button
type="button"
@ -20,14 +19,6 @@ export function AccountMoreActions({ pubkey }: { pubkey: string }) {
</DropdownMenu.Trigger>
<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.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>
<Link
to={`/settings/backup`}

26
src/shared/nip05.tsx
View File

@ -22,7 +22,7 @@ export const NIP05 = memo(function NIP05({
}) {
const { status, data } = useQuery({
queryKey: ['nip05', nip05],
queryFn: async () => {
queryFn: async ({ signal }: { signal: AbortSignal }) => {
try {
const localPath = nip05.split('@')[0];
const service = nip05.split('@')[1];
@ -33,11 +33,13 @@ export const NIP05 = memo(function NIP05({
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
signal,
});
if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
const data: NIP05 = await res.json();
if (data.names) {
if (data.names[localPath] !== pubkey) return false;
return true;
@ -58,15 +60,19 @@ export const NIP05 = memo(function NIP05({
}
return (
<div className={twMerge('inline-flex items-center gap-1', className)}>
<p className="text-sm">{nip05}</p>
<div className="shrink-0">
{data === true ? (
<VerifiedIcon className="h-3 w-3 text-green-500" />
) : (
<UnverifiedIcon className="h-3 w-3 text-red-500" />
)}
</div>
<div className="inline-flex items-center gap-1">
<p className={twMerge('text-sm font-medium', className)}>{nip05}</p>
{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-4 w-4" />
Verified
</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>
);
});

33
src/shared/widgets/newsfeed.tsx
View File

@ -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 { useCallback, useEffect, useMemo } from 'react';
import { VList } from 'virtua';
@ -25,7 +25,6 @@ export function NewsfeedWidget() {
const queryClient = useQueryClient();
const { db } = useStorage();
const { sub } = useNostr();
const { relayUrls, ndk, fetcher } = useNDK();
const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery({
@ -112,6 +111,8 @@ export function NewsfeedWidget() {
}, []);
useEffect(() => {
let sub: NDKSubscription = undefined;
if (status === 'success' && db.account && db.account.circles.length > 0) {
queryClient.fetchQuery({ queryKey: ['notification'] });
@ -121,21 +122,21 @@ export function NewsfeedWidget() {
since: Math.floor(Date.now() / 1000),
};
sub(
filter,
async (event) => {
queryClient.setQueryData(
['newsfeed'],
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
...prev,
pages: [[event], ...prev.pages],
})
);
},
false,
'newsfeed'
);
sub = ndk.subscribe(filter, { closeOnEose: false, groupable: false });
sub.addListener('event', async (event: NDKEvent) => {
await queryClient.setQueryData(
['newsfeed'],
(prev: { pageParams: number; pages: Array<NDKEvent[]> }) => ({
...prev,
pages: [[event], ...prev.pages],
})
);
});
}
return () => {
if (sub) sub.stop();
};
}, [status]);
return (

4
src/shared/widgets/notification.tsx
View File

@ -54,6 +54,10 @@ export function NotificationWidget() {
return lastEvent.created_at - 1;
},
enabled: false,
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
staleTime: Infinity,
});
const allEvents = useMemo(