mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-02 09:50:47 +00:00
wip
This commit is contained in:
Ren Amamiya
parent
09b3eeda99
commit
a2e3247432
@ -40,6 +40,7 @@
|
||||
"@tiptap/react": "^2.1.11",
|
||||
"@tiptap/starter-kit": "^2.1.11",
|
||||
"@tiptap/suggestion": "^2.1.11",
|
||||
"@vidstack/react": "^1.0.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"destr": "^2.0.1",
|
||||
"html-to-text": "^9.0.5",
|
||||
@ -55,7 +56,6 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.46.2",
|
||||
"react-markdown": "^8.0.7",
|
||||
"react-player": "^2.13.0",
|
||||
"react-router-dom": "^6.16.0",
|
||||
"react-textarea-autosize": "^8.5.3",
|
||||
"reactflow": "^11.9.2",
|
||||
|
||||
@ -71,6 +71,9 @@ dependencies:
|
||||
'@tiptap/suggestion':
|
||||
specifier: ^2.1.11
|
||||
version: 2.1.11(@tiptap/core@2.1.11)(@tiptap/pm@2.1.11)
|
||||
'@vidstack/react':
|
||||
specifier: ^1.0.2
|
||||
version: 1.0.2(@types/react@18.2.23)(react@18.2.0)
|
||||
dayjs:
|
||||
specifier: ^1.11.10
|
||||
version: 1.11.10
|
||||
@ -116,9 +119,6 @@ dependencies:
|
||||
react-markdown:
|
||||
specifier: ^8.0.7
|
||||
version: 8.0.7(@types/react@18.2.23)(react@18.2.0)
|
||||
react-player:
|
||||
specifier: ^2.13.0
|
||||
version: 2.13.0(react@18.2.0)
|
||||
react-router-dom:
|
||||
specifier: ^6.16.0
|
||||
version: 6.16.0(react-dom@18.2.0)(react@18.2.0)
|
||||
@ -133,16 +133,16 @@ dependencies:
|
||||
version: 3.0.1
|
||||
tauri-plugin-sql-api:
|
||||
specifier: github:tauri-apps/tauri-plugin-sql#v1
|
||||
version: github.com/tauri-apps/tauri-plugin-sql/533198dd3b6cfca36d876918d22efcdaac43065a
|
||||
version: github.com/tauri-apps/tauri-plugin-sql/1c79471feb06366fe1c11cb1cb6c67bcdb80c215
|
||||
tauri-plugin-store-api:
|
||||
specifier: github:tauri-apps/tauri-plugin-store#v1
|
||||
version: github.com/tauri-apps/tauri-plugin-store/66e06b7830037fdae0b42b5499e23334eaf4e017
|
||||
version: github.com/tauri-apps/tauri-plugin-store/1a741b721ed1eae0de0d811ecfe86fc6ad54fb73
|
||||
tauri-plugin-stronghold-api:
|
||||
specifier: github:tauri-apps/tauri-plugin-stronghold#v1
|
||||
version: github.com/tauri-apps/tauri-plugin-stronghold/4684fed1f5e7eb01885e40114accdcecb61962ed
|
||||
version: github.com/tauri-apps/tauri-plugin-stronghold/d87b778f48ee12435efcf3f82d2e5efbb9541759
|
||||
tauri-plugin-upload-api:
|
||||
specifier: github:tauri-apps/tauri-plugin-upload#v1
|
||||
version: github.com/tauri-apps/tauri-plugin-upload/40c0bc302a9dd8304762951e450ee84d53c2037b
|
||||
version: github.com/tauri-apps/tauri-plugin-upload/5348082f7436b01f0b5c08d6ddfc4f760abbac7e
|
||||
tippy.js:
|
||||
specifier: ^6.3.7
|
||||
version: 6.3.7
|
||||
@ -1892,11 +1892,6 @@ packages:
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@tauri-apps/api@1.4.0:
|
||||
resolution: {integrity: sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==}
|
||||
engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
|
||||
dev: false
|
||||
|
||||
/@tauri-apps/api@1.5.0:
|
||||
resolution: {integrity: sha512-yQY9wpVNuiYhLLuyDlu1nBpqJELT1fGp7OctN4rW9I2W1T2p7A3tqPxsEzQprEwneQRBAlPM9vC8NsnMbct+pg==}
|
||||
engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
|
||||
@ -2708,6 +2703,18 @@ packages:
|
||||
eslint-visitor-keys: 3.4.3
|
||||
dev: true
|
||||
|
||||
/@vidstack/react@1.0.2(@types/react@18.2.23)(react@18.2.0):
|
||||
resolution: {integrity: sha512-ZBTaEFtxmaFX/oB5I9o8qvoQ39jmwTySFxsFfBN7tkcWxKdTOUhwlIgIlFM5H/alJ/qxw13AZvxK2MW6q+le3g==}
|
||||
engines: {node: '>=18'}
|
||||
peerDependencies:
|
||||
'@types/react': ^18.0.0
|
||||
react: ^18.0.0
|
||||
dependencies:
|
||||
'@types/react': 18.2.23
|
||||
media-captions: 1.0.0
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@vitejs/plugin-react-swc@3.4.0(vite@4.4.9):
|
||||
resolution: {integrity: sha512-m7UaA4Uvz82N/0EOVpZL4XsFIakRqrFKeSNxa1FBLSXGvWrWRBwmZb4qxk+ZIVAZcW3c3dn5YosomDgx62XWcQ==}
|
||||
peerDependencies:
|
||||
@ -4460,10 +4467,6 @@ packages:
|
||||
wrap-ansi: 8.1.0
|
||||
dev: true
|
||||
|
||||
/load-script@1.0.0:
|
||||
resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
|
||||
dev: false
|
||||
|
||||
/locate-path@6.0.0:
|
||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||
engines: {node: '>=10'}
|
||||
@ -4674,8 +4677,9 @@ packages:
|
||||
resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
|
||||
dev: false
|
||||
|
||||
/memoize-one@5.2.1:
|
||||
resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
|
||||
/media-captions@1.0.0:
|
||||
resolution: {integrity: sha512-605d9sXW+DtJBNzzfL4N6NpOIjigN+kpzS+V1QaCiNNPB7G015/peyw6wfv9iCp8GAP6R5NPyAICZKeuqWPAQQ==}
|
||||
engines: {node: '>=16'}
|
||||
dev: false
|
||||
|
||||
/merge-stream@2.0.0:
|
||||
@ -5612,10 +5616,6 @@ packages:
|
||||
scheduler: 0.23.0
|
||||
dev: false
|
||||
|
||||
/react-fast-compare@3.2.2:
|
||||
resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
|
||||
dev: false
|
||||
|
||||
/react-hook-form@7.46.2(react@18.2.0):
|
||||
resolution: {integrity: sha512-x1DWmHQchV7x2Rq9l99M/cQHC8JGchAnw9Z0uTz5KrPa0bTl/Inm1NR7ceOARfIrkNuQNAhuSuZPYa6k7QYn3Q==}
|
||||
engines: {node: '>=12.22.0'}
|
||||
@ -5659,19 +5659,6 @@ packages:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/react-player@2.13.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-gkY7ZdbVFztlKFFhCPcnDrFQm+L399b8fhWsKatZ+b2wpKJwfUHBXQFMRxqYQGT0ic1/wQ7D7EZEWy7ZBqk2pw==}
|
||||
peerDependencies:
|
||||
react: '>=16.6.0'
|
||||
dependencies:
|
||||
deepmerge: 4.3.1
|
||||
load-script: 1.0.0
|
||||
memoize-one: 5.2.1
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
react-fast-compare: 3.2.2
|
||||
dev: false
|
||||
|
||||
/react-remove-scroll-bar@2.3.4(@types/react@18.2.23)(react@18.2.0):
|
||||
resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
|
||||
engines: {node: '>=10'}
|
||||
@ -6758,34 +6745,34 @@ packages:
|
||||
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
|
||||
dev: false
|
||||
|
||||
github.com/tauri-apps/tauri-plugin-sql/533198dd3b6cfca36d876918d22efcdaac43065a:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-sql/tar.gz/533198dd3b6cfca36d876918d22efcdaac43065a}
|
||||
github.com/tauri-apps/tauri-plugin-sql/1c79471feb06366fe1c11cb1cb6c67bcdb80c215:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-sql/tar.gz/1c79471feb06366fe1c11cb1cb6c67bcdb80c215}
|
||||
name: tauri-plugin-sql-api
|
||||
version: 0.0.0
|
||||
dependencies:
|
||||
'@tauri-apps/api': 1.4.0
|
||||
'@tauri-apps/api': 1.5.0
|
||||
dev: false
|
||||
|
||||
github.com/tauri-apps/tauri-plugin-store/66e06b7830037fdae0b42b5499e23334eaf4e017:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-store/tar.gz/66e06b7830037fdae0b42b5499e23334eaf4e017}
|
||||
github.com/tauri-apps/tauri-plugin-store/1a741b721ed1eae0de0d811ecfe86fc6ad54fb73:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-store/tar.gz/1a741b721ed1eae0de0d811ecfe86fc6ad54fb73}
|
||||
name: tauri-plugin-store-api
|
||||
version: 0.0.0
|
||||
dependencies:
|
||||
'@tauri-apps/api': 1.4.0
|
||||
'@tauri-apps/api': 1.5.0
|
||||
dev: false
|
||||
|
||||
github.com/tauri-apps/tauri-plugin-stronghold/4684fed1f5e7eb01885e40114accdcecb61962ed:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-stronghold/tar.gz/4684fed1f5e7eb01885e40114accdcecb61962ed}
|
||||
github.com/tauri-apps/tauri-plugin-stronghold/d87b778f48ee12435efcf3f82d2e5efbb9541759:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-stronghold/tar.gz/d87b778f48ee12435efcf3f82d2e5efbb9541759}
|
||||
name: tauri-plugin-stronghold-api
|
||||
version: 0.0.0
|
||||
dependencies:
|
||||
'@tauri-apps/api': 1.4.0
|
||||
'@tauri-apps/api': 1.5.0
|
||||
dev: false
|
||||
|
||||
github.com/tauri-apps/tauri-plugin-upload/40c0bc302a9dd8304762951e450ee84d53c2037b:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-upload/tar.gz/40c0bc302a9dd8304762951e450ee84d53c2037b}
|
||||
github.com/tauri-apps/tauri-plugin-upload/5348082f7436b01f0b5c08d6ddfc4f760abbac7e:
|
||||
resolution: {tarball: https://codeload.github.com/tauri-apps/tauri-plugin-upload/tar.gz/5348082f7436b01f0b5c08d6ddfc4f760abbac7e}
|
||||
name: tauri-plugin-upload-api
|
||||
version: 0.0.0
|
||||
dependencies:
|
||||
'@tauri-apps/api': 1.4.0
|
||||
'@tauri-apps/api': 1.5.0
|
||||
dev: false
|
||||
|
||||
61
src/app.tsx
61
src/app.tsx
@ -1,11 +1,12 @@
|
||||
import { message } from '@tauri-apps/api/dialog';
|
||||
import { RouterProvider, createBrowserRouter, redirect } from 'react-router-dom';
|
||||
import { fetch } from '@tauri-apps/api/http';
|
||||
import '@vidstack/react/player/styles/default/theme.css';
|
||||
import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
|
||||
import 'reactflow/dist/style.css';
|
||||
|
||||
import { AuthCreateScreen } from '@app/auth/create';
|
||||
import { AuthImportScreen } from '@app/auth/import';
|
||||
import { OnboardingScreen } from '@app/auth/onboarding';
|
||||
import { BrowseScreen } from '@app/browse';
|
||||
import { ErrorScreen } from '@app/error';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
@ -50,6 +51,17 @@ export default function App() {
|
||||
}
|
||||
};
|
||||
|
||||
const relayLoader = async ({ params }) => {
|
||||
return defer({
|
||||
relay: fetch(`https://${params.url}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Accept: 'application/nostr+json',
|
||||
},
|
||||
}).then((res) => res.data),
|
||||
});
|
||||
};
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
@ -64,27 +76,6 @@ export default function App() {
|
||||
return { Component: SpaceScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'browse',
|
||||
element: <BrowseScreen />,
|
||||
errorElement: <ErrorScreen />,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
async lazy() {
|
||||
const { BrowseUsersScreen } = await import('@app/browse/users');
|
||||
return { Component: BrowseUsersScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'relays',
|
||||
async lazy() {
|
||||
const { BrowseRelaysScreen } = await import('@app/browse/relays');
|
||||
return { Component: BrowseRelaysScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'users/:pubkey',
|
||||
async lazy() {
|
||||
@ -113,6 +104,30 @@ export default function App() {
|
||||
return { Component: NWCScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'explore',
|
||||
async lazy() {
|
||||
const { ExploreScreen } = await import('@app/explore');
|
||||
return { Component: ExploreScreen };
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'relays',
|
||||
async lazy() {
|
||||
const { RelaysScreen } = await import('@app/relays');
|
||||
return { Component: RelaysScreen };
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: ':url',
|
||||
loader: relayLoader,
|
||||
async lazy() {
|
||||
const { RelayScreen } = await import('@app/relays/relay');
|
||||
return { Component: RelayScreen };
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
import { NavLink, Outlet } from 'react-router-dom';
|
||||
import { ReactFlowProvider } from 'reactflow';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
export function BrowseScreen() {
|
||||
return (
|
||||
<ReactFlowProvider>
|
||||
<div className="relative h-full w-full">
|
||||
<div className="absolute left-0 right-0 top-4 z-30 flex w-full items-center justify-between px-3">
|
||||
<div className="w-10" />
|
||||
<div className="inline-flex gap-1 rounded-full border-t border-white/10 bg-white/20 p-1 backdrop-blur-xl">
|
||||
<NavLink
|
||||
to="/browse/"
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-7 w-20 items-center justify-center rounded-full text-sm font-semibold',
|
||||
isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
|
||||
)
|
||||
}
|
||||
>
|
||||
Users
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/browse/relays"
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'inline-flex h-7 w-20 items-center justify-center rounded-full text-sm font-semibold',
|
||||
isActive ? 'bg-white/10 hover:bg-white/20' : ' hover:bg-white/5'
|
||||
)
|
||||
}
|
||||
>
|
||||
Relays
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="w-10" />
|
||||
</div>
|
||||
<div className="relative z-20 h-full w-full">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
export function BrowseRelaysScreen() {
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3">
|
||||
<div className="col-span-2 border-r border-white/5 pt-16">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div className="col-span-1 px-3 pt-6">
|
||||
<h3 className="font-semibold text-white">Your relays</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { Handle, Position } from 'reactflow';
|
||||
|
||||
import { UserWithDrawer } from '@app/browse/components/userWithDrawer';
|
||||
import { UserWithDrawer } from '@app/explore/components/userWithDrawer';
|
||||
|
||||
import { GroupTitle } from './groupTitle';
|
||||
|
||||
@ -2,16 +2,17 @@ import { useCallback, useMemo, useRef } from 'react';
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
ConnectionMode,
|
||||
ReactFlowProvider,
|
||||
addEdge,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
useReactFlow,
|
||||
} from 'reactflow';
|
||||
|
||||
import { Edge } from '@app/browse//components/edge';
|
||||
import { UserGroupNode } from '@app/browse//components/userGroupNode';
|
||||
import { Line } from '@app/browse/components/line';
|
||||
import { UserNode } from '@app/browse/components/userNode';
|
||||
import { Edge } from '@app/explore/components/edge';
|
||||
import { Line } from '@app/explore/components/line';
|
||||
import { UserGroupNode } from '@app/explore/components/userGroupNode';
|
||||
import { UserNode } from '@app/explore/components/userNode';
|
||||
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
@ -23,7 +24,7 @@ const getId = () => `${id++}`;
|
||||
const nodeTypes = { user: UserNode, userGroup: UserGroupNode };
|
||||
const edgeTypes = { buttonedge: Edge };
|
||||
|
||||
export function BrowseUsersScreen() {
|
||||
export function ExploreScreen() {
|
||||
const { db } = useStorage();
|
||||
const { getContactsByPubkey } = useNostr();
|
||||
const { project } = useReactFlow();
|
||||
@ -91,26 +92,28 @@ export function BrowseUsersScreen() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full" ref={reactFlowWrapper}>
|
||||
<ReactFlow
|
||||
proOptions={{ hideAttribution: true }}
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
connectionLineComponent={Line}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
onConnectStart={onConnectStart}
|
||||
onConnectEnd={onConnectEnd}
|
||||
connectionMode={ConnectionMode.Loose}
|
||||
minZoom={0.8}
|
||||
maxZoom={1.2}
|
||||
fitView
|
||||
>
|
||||
<Background color="#3f3f46" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
<ReactFlowProvider>
|
||||
<div className="h-full w-full" ref={reactFlowWrapper}>
|
||||
<ReactFlow
|
||||
proOptions={{ hideAttribution: true }}
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
connectionLineComponent={Line}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
onConnectStart={onConnectStart}
|
||||
onConnectEnd={onConnectEnd}
|
||||
connectionMode={ConnectionMode.Loose}
|
||||
minZoom={0.8}
|
||||
maxZoom={1.2}
|
||||
fitView
|
||||
>
|
||||
<Background color="#3f3f46" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
}
|
||||
89
src/app/relays/components/relayList.tsx
Normal file
89
src/app/relays/components/relayList.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { VList } from 'virtua';
|
||||
|
||||
import { LoaderIcon, PlusIcon, ShareIcon } from '@shared/icons';
|
||||
import { User } from '@shared/user';
|
||||
|
||||
import { useNostr } from '@utils/hooks/useNostr';
|
||||
|
||||
export function RelayList() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { getAllRelaysByUsers } = useNostr();
|
||||
const { status, data } = useQuery(
|
||||
['relays'],
|
||||
async () => {
|
||||
return await getAllRelaysByUsers();
|
||||
},
|
||||
{ refetchOnMount: false }
|
||||
);
|
||||
|
||||
const openRelay = (relayUrl: string) => {
|
||||
const url = new URL(relayUrl);
|
||||
navigate(`/relays/${url.hostname}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-span-2 border-r border-white/5">
|
||||
{status === 'loading' ? (
|
||||
<div className="flex h-full w-full items-center justify-center pb-10">
|
||||
<div className="inline-flex flex-col items-center justify-center gap-2">
|
||||
<LoaderIcon className="h-5 w-5 animate-spin text-white" />
|
||||
<p>Loading relay...</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<VList className="scrollbar-hide mt-20 h-full">
|
||||
<div className="inline-flex h-16 w-full items-center border-b border-white/5 px-3">
|
||||
<h3 className="bg-gradient-to-r from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text font-semibold text-transparent">
|
||||
All relays used by your follows
|
||||
</h3>
|
||||
</div>
|
||||
{[...data].map(([key, value]) => (
|
||||
<div
|
||||
key={key}
|
||||
className="flex h-14 w-full items-center justify-between border-b border-white/5 px-3"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 divide-x divide-white/10">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openRelay(key)}
|
||||
className="inline-flex h-6 items-center justify-center gap-1 rounded bg-white/10 px-1.5 text-sm font-medium hover:bg-white/20"
|
||||
>
|
||||
<ShareIcon className="h-3 w-3" />
|
||||
Inspect
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-white/10"
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 pl-3">
|
||||
<span className="text-sm font-semibold text-white/70">Relay: </span>
|
||||
<span className="max-w-[200px] truncate text-sm font-medium text-white">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="isolate flex -space-x-2">
|
||||
{value.slice(0, 4).map((item) => (
|
||||
<User key={item} pubkey={item} variant="stacked" />
|
||||
))}
|
||||
{value.length > 4 ? (
|
||||
<div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-black/80 ring-1 ring-white/10 backdrop-blur-xl">
|
||||
<span className="text-xs font-semibold">+{value.length}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="h-16" />
|
||||
</VList>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/app/relays/components/userRelay.tsx
Normal file
46
src/app/relays/components/userRelay.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { useNDK } from '@libs/ndk/provider';
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
export function UserRelay() {
|
||||
const { relayUrls } = useNDK();
|
||||
const { db } = useStorage();
|
||||
const { status, data } = useQuery(
|
||||
['user-relay'],
|
||||
async () => {
|
||||
return await db.getExplicitRelayUrls();
|
||||
},
|
||||
{ refetchOnWindowFocus: false }
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-3 px-3">
|
||||
{status === 'loading' ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{data.map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="inline-flex h-10 items-center gap-2.5 rounded-lg bg-white/10 px-3"
|
||||
>
|
||||
{relayUrls.includes(item) ? (
|
||||
<span className="relative flex h-3 w-3">
|
||||
<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-3 w-3 rounded-full bg-green-500"></span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75"></span>
|
||||
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
|
||||
</span>
|
||||
)}
|
||||
<p className="text-sm font-medium">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
16
src/app/relays/index.tsx
Normal file
16
src/app/relays/index.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { RelayList } from '@app/relays/components/relayList';
|
||||
import { UserRelay } from '@app/relays/components/userRelay';
|
||||
|
||||
export function RelaysScreen() {
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3">
|
||||
<RelayList />
|
||||
<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">Connected relays</h3>
|
||||
</div>
|
||||
<UserRelay />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
src/app/relays/relay.tsx
Normal file
19
src/app/relays/relay.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Suspense } from 'react';
|
||||
import { Await, useLoaderData } from 'react-router-dom';
|
||||
|
||||
export function RelayScreen() {
|
||||
const data: { relay?: { [key: string]: string } } = useLoaderData();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Suspense fallback={<p>Loading...</p>}>
|
||||
<Await
|
||||
resolve={data.relay}
|
||||
errorElement={<div>Could not load relay information 😬</div>}
|
||||
>
|
||||
{(resolvedRelay) => <p>{JSON.stringify(resolvedRelay)}</p>}
|
||||
</Await>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { useStorage } from '@libs/storage/provider';
|
||||
|
||||
import { PlusIcon } from '@shared/icons';
|
||||
import { HandArrowDownIcon, PlusIcon } from '@shared/icons';
|
||||
|
||||
import { WidgetKinds, useWidgets } from '@stores/widgets';
|
||||
|
||||
@ -9,17 +9,22 @@ export function ToggleWidgetList() {
|
||||
const setWidget = useWidgets((state) => state.setWidget);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
|
||||
}
|
||||
className="inline-flex items-center gap-2 text-white"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-white" />
|
||||
<p className="text-sm font-bold leading-none">Add widget</p>
|
||||
</button>
|
||||
<div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
|
||||
<div className="relative">
|
||||
<div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
|
||||
<HandArrowDownIcon className="text-white/5" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setWidget(db, { kind: WidgetKinds.tmp.list, title: '', content: '' })
|
||||
}
|
||||
className="inline-flex h-9 items-center gap-2 rounded-lg border-t border-white/10 bg-white/20 px-3 text-white hover:bg-white/30"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-white" />
|
||||
<p className="text-sm font-semibold leading-none">Add widget</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
29
src/shared/icons/handArrowDown.tsx
Normal file
29
src/shared/icons/handArrowDown.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import { SVGProps } from 'react';
|
||||
|
||||
export function HandArrowDownIcon(
|
||||
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
|
||||
) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="130"
|
||||
height="130"
|
||||
fill="none"
|
||||
viewBox="0 0 130 130"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M59.95 53.86c.109.564.326 1.126.543 1.687.976 3.028 2.062 6.56 4.015 9.168 2.604 3.419 5.534 4.74 8.463 4.711 4.123-.044 8.355-3.086 10.959-7.254 2.604-4.13 3.69-9.301 2.062-13.466-1.085-2.855-3.472-5.291-7.596-6.62-4.665-1.532-9.114-.278-13.02 2.422-1.52 1.014-2.821 2.233-4.123 3.577-.326-1.768-.652-3.553-.977-5.363-.869-5.925-1.086-12.154-.76-18.127.325-7.901 1.954-15.46 4.992-22.763.217-.674-.109-1.447-.76-1.725-.651-.276-1.41.045-1.736.72-3.146 7.59-4.883 15.446-5.209 23.658-.217 6.146-.107 12.555.87 18.653.433 2.526.867 5.005 1.41 7.457-2.496 3.216-4.45 6.789-5.643 9.827-7.596 20.325 2.278 47.693 12.044 66.11a1.26 1.26 0 001.737.549c.65-.342.867-1.141.542-1.786-9.44-17.825-19.206-44.269-11.828-63.94.868-2.313 2.28-4.968 4.015-7.494zm2.062-2.63c.217 1.161.542 2.315.976 3.465.977 2.776 1.845 6.037 3.58 8.426 1.954 2.581 4.125 3.684 6.295 3.663 3.472-.036 6.727-2.651 8.789-6.022 2.17-3.409 3.255-7.656 1.845-11.094-.868-2.214-2.713-4.04-5.86-5.07-3.906-1.261-7.595-.142-10.742 2.084-1.844 1.238-3.472 2.816-4.883 4.548z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M66.784 126.734c-.542-.384-1.085-.956-1.628-1.53-1.085-1.104-2.061-2.274-2.93-2.89-5.208-3.796-11.501-8.282-17.686-10.272-.65-.225-1.41.156-1.627.85-.217.694.108 1.439.867 1.664 5.86 1.909 11.828 6.255 16.928 9.898.868.666 2.061 2.077 3.146 3.207.977.959 1.954 1.724 2.93 2.002.543.196 1.52-.021 2.17-1.243.868-1.732 1.629-6.541 1.737-7.007 1.085-4.715 2.17-8.865 6.293-11.842.543-.429.651-1.257.326-1.846-.434-.589-1.303-.719-1.845-.289-4.666 3.394-6.185 8.041-7.379 13.416 0 .343-.434 3.218-1.085 5.215-.108.216-.108.454-.217.667z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -66,3 +66,4 @@ export * from './stars';
|
||||
export * from './nwc';
|
||||
export * from './timeline';
|
||||
export * from './dots';
|
||||
export * from './handArrowDown';
|
||||
|
||||
@ -90,7 +90,7 @@ export function Navigation() {
|
||||
Home
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/browse/"
|
||||
to="/relays"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
@ -104,7 +104,24 @@ export function Navigation() {
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<WorldIcon className="h-4 w-4 text-white" />
|
||||
</span>
|
||||
Browse
|
||||
Relays
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/explore"
|
||||
preventScrollReset={true}
|
||||
className={({ isActive }) =>
|
||||
twMerge(
|
||||
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-3',
|
||||
isActive
|
||||
? 'border-fuchsia-500 bg-white/5 text-white'
|
||||
: 'border-transparent text-white/70'
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
||||
<WorldIcon className="h-4 w-4 text-white" />
|
||||
</span>
|
||||
Explore
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/notifications"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
||||
import ReactPlayer from 'react-player';
|
||||
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Image } from '@shared/image';
|
||||
@ -25,15 +25,16 @@ export function FileNote(props: { event?: NDKEvent }) {
|
||||
if (type === 'video') {
|
||||
return (
|
||||
<div className="mb-2 mt-3">
|
||||
<ReactPlayer
|
||||
<MediaPlayer
|
||||
key={url}
|
||||
url={url}
|
||||
width="100%"
|
||||
height="auto"
|
||||
className="!h-auto overflow-hidden rounded-lg object-fill"
|
||||
controls={true}
|
||||
pip={true}
|
||||
/>
|
||||
src={url}
|
||||
poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
||||
load="visible"
|
||||
aspectRatio="16/9"
|
||||
crossorigin=""
|
||||
>
|
||||
<MediaProvider />
|
||||
</MediaPlayer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,6 @@ import { downloadDir } from '@tauri-apps/api/path';
|
||||
import { download } from 'tauri-plugin-upload-api';
|
||||
|
||||
import { DownloadIcon } from '@shared/icons';
|
||||
import { Image } from '@shared/image';
|
||||
|
||||
export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
|
||||
const downloadImage = async (url: string) => {
|
||||
@ -16,12 +15,15 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
|
||||
<div className="flex flex-col gap-2">
|
||||
{urls.map((url) => (
|
||||
<div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
|
||||
<Image
|
||||
<img
|
||||
src={url}
|
||||
alt={url}
|
||||
className={`${
|
||||
truncate ? 'h-auto max-h-[300px]' : 'h-auto'
|
||||
} w-full rounded-lg border border-white/10 object-cover`}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -1,28 +1,19 @@
|
||||
import ReactPlayer from 'react-player/es6';
|
||||
import { MediaPlayer, MediaProvider } from '@vidstack/react';
|
||||
|
||||
export function VideoPreview({ urls }: { urls: string[] }) {
|
||||
return (
|
||||
<div className="relative mt-3 flex w-full flex-col gap-2">
|
||||
{urls.map((url) => (
|
||||
<ReactPlayer
|
||||
<MediaPlayer
|
||||
key={url}
|
||||
url={url}
|
||||
width="100%"
|
||||
height="auto"
|
||||
className="!h-auto overflow-hidden rounded-lg object-fill"
|
||||
controls={true}
|
||||
pip={true}
|
||||
light={
|
||||
<img
|
||||
src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
||||
alt={url}
|
||||
className="aspect-video h-full w-full bg-white object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
src={url}
|
||||
poster={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
|
||||
load="visible"
|
||||
aspectRatio="16/9"
|
||||
crossorigin=""
|
||||
>
|
||||
<MediaProvider />
|
||||
</MediaPlayer>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -29,7 +29,8 @@ export const User = memo(function User({
|
||||
| 'chat'
|
||||
| 'large'
|
||||
| 'thread'
|
||||
| 'avatar';
|
||||
| 'avatar'
|
||||
| 'stacked';
|
||||
embedProfile?: string;
|
||||
}) {
|
||||
const { status, user } = useProfile(pubkey, embedProfile);
|
||||
@ -186,6 +187,28 @@ export const User = memo(function User({
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === 'stacked') {
|
||||
return (
|
||||
<Avatar.Root>
|
||||
<Avatar.Image
|
||||
src={user?.picture || user?.image}
|
||||
alt={pubkey}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
style={{ contentVisibility: 'auto' }}
|
||||
className="inline-block h-8 w-8 rounded-full ring-1 ring-black"
|
||||
/>
|
||||
<Avatar.Fallback delayMs={300}>
|
||||
<img
|
||||
src={svgURI}
|
||||
alt={pubkey}
|
||||
className="inline-block h-8 w-8 rounded-full bg-black ring-1 ring-black"
|
||||
/>
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === 'repost') {
|
||||
return (
|
||||
<div className="flex gap-3">
|
||||
|
||||
@ -19,7 +19,7 @@ export function EventLoader({ firstTime }: { firstTime: boolean }) {
|
||||
useEffect(() => {
|
||||
async function getEvents() {
|
||||
const events = await getAllEventsSinceLastLogin();
|
||||
console.log('total event found: ', events.data.length);
|
||||
console.log('total new events has found: ', events.data.length);
|
||||
|
||||
const promises = await Promise.all(
|
||||
events.data.map(async (event) => await db.createEvent(event))
|
||||
|
||||
@ -305,6 +305,31 @@ export function useNostr() {
|
||||
return events as unknown as NDKEvent[];
|
||||
};
|
||||
|
||||
const getAllRelaysByUsers = async () => {
|
||||
const relayMap = new Map<string, string[]>();
|
||||
const relayEvents = fetcher.fetchLatestEventsPerAuthor(
|
||||
{
|
||||
authors: db.account.follows,
|
||||
relayUrls: relayUrls,
|
||||
},
|
||||
{ kinds: [NDKKind.RelayList] },
|
||||
5
|
||||
);
|
||||
|
||||
for await (const { author, events } of relayEvents) {
|
||||
if (events[0]) {
|
||||
events[0].tags.forEach((tag) => {
|
||||
const users = relayMap.get(tag[1]);
|
||||
|
||||
if (!users) return relayMap.set(tag[1], [author]);
|
||||
return users.push(author);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return relayMap;
|
||||
};
|
||||
|
||||
const publish = async ({
|
||||
content,
|
||||
kind,
|
||||
@ -450,5 +475,6 @@ export function useNostr() {
|
||||
upload,
|
||||
getContactsByPubkey,
|
||||
getEventsByPubkey,
|
||||
getAllRelaysByUsers,
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user