reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add DVM feeds

Browse Source
This commit is contained in:
reya
2024-11-07 09:26:28 +07:00
parent 4b79e559d2
commit ece6bcc125
13 changed files with 542 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/commands.gen.ts
View File

@@ -360,6 +360,38 @@ async getAllEventsFrom(url: string, until: string | null) : Promise<Result<RichE
else return { status: "error", error: e as any };
}
},
async getAllEventsByKind(kind: number, until: string | null) : Promise<Result<string[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_all_events_by_kind", { kind, until }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async getAllProviders() : Promise<Result<string[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_all_providers") };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async requestEventsFromProvider(provider: string) : Promise<Result<string, string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("request_events_from_provider", { provider }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async getAllEventsByRequest(id: string, provider: string) : Promise<Result<RichEvent[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_all_events_by_request", { id, provider }) };
} catch (e) {
if(e instanceof Error) throw e;
else return { status: "error", error: e as any };
}
},
async getLocalEvents(until: string | null) : Promise<Result<RichEvent[], string>> {
try {
return { status: "ok", data: await TAURI_INVOKE("get_local_events", { until }) };

2
src/components/column.tsx
View File

@@ -20,7 +20,7 @@ export function Column({ column }: { column: LumeColumn }) {
y: rect.y,
width: rect.width,
height: rect.height,
url: `${column.url}?label=${column.label}&name=${column.name}`,
url: `${column.url}?label=${column.label}&name=${column.name}&account=${column.account}`,
});
if (res.status === "error") {

10
src/components/note/buttons/repost.tsx
View File

@@ -105,13 +105,11 @@ export function NoteRepost({
if (signer.status === "ok") {
if (!signer.data) {
if (!signer.data) {
const res = await commands.setSigner(account);
const res = await commands.setSigner(account);
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
}

24
src/components/user/button.tsx
View File

@@ -101,25 +101,19 @@ export function UserButton({ className }: { className?: string }) {
const submit = (account: string) => {
startTransition(async () => {
if (!status) {
const signer = await commands.hasSigner(account);
const signer = await commands.hasSigner(account);
if (signer.status === "ok") {
if (!signer.data) {
if (!signer.data) {
const res = await commands.setSigner(account);
if (signer.status === "ok") {
if (!signer.data) {
const res = await commands.setSigner(account);
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
}
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
toggleFollow.mutate();
} else {
return;
}
toggleFollow.mutate();
} else {
return;
}

31
src/routes.gen.ts
View File

@@ -75,6 +75,9 @@ const ColumnsLayoutNotificationIdLazyImport = createFileRoute(
const ColumnsLayoutLaunchpadIdLazyImport = createFileRoute(
'/columns/_layout/launchpad/$id',
)()
const ColumnsLayoutDvmIdLazyImport = createFileRoute(
'/columns/_layout/dvm/$id',
)()
// Create/Update Routes
@@ -315,6 +318,14 @@ const ColumnsLayoutLaunchpadIdLazyRoute =
import('./routes/columns/_layout/launchpad.$id.lazy').then((d) => d.Route),
)
const ColumnsLayoutDvmIdLazyRoute = ColumnsLayoutDvmIdLazyImport.update({
id: '/dvm/$id',
path: '/dvm/$id',
getParentRoute: () => ColumnsLayoutRoute,
} as any).lazy(() =>
import('./routes/columns/_layout/dvm.$id.lazy').then((d) => d.Route),
)
const ColumnsLayoutStoriesIdRoute = ColumnsLayoutStoriesIdImport.update({
id: '/stories/$id',
path: '/stories/$id',
@@ -597,6 +608,13 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof ColumnsLayoutStoriesIdImport
parentRoute: typeof ColumnsLayoutImport
}
'/columns/_layout/dvm/$id': {
id: '/columns/_layout/dvm/$id'
path: '/dvm/$id'
fullPath: '/columns/dvm/$id'
preLoaderRoute: typeof ColumnsLayoutDvmIdLazyImport
parentRoute: typeof ColumnsLayoutImport
}
'/columns/_layout/launchpad/$id': {
id: '/columns/_layout/launchpad/$id'
path: '/launchpad/$id'
@@ -694,6 +712,7 @@ interface ColumnsLayoutRouteChildren {
ColumnsLayoutInterestsIdRoute: typeof ColumnsLayoutInterestsIdRoute
ColumnsLayoutNewsfeedIdRoute: typeof ColumnsLayoutNewsfeedIdRoute
ColumnsLayoutStoriesIdRoute: typeof ColumnsLayoutStoriesIdRoute
ColumnsLayoutDvmIdLazyRoute: typeof ColumnsLayoutDvmIdLazyRoute
ColumnsLayoutLaunchpadIdLazyRoute: typeof ColumnsLayoutLaunchpadIdLazyRoute
ColumnsLayoutNotificationIdLazyRoute: typeof ColumnsLayoutNotificationIdLazyRoute
ColumnsLayoutRelaysUrlLazyRoute: typeof ColumnsLayoutRelaysUrlLazyRoute
@@ -718,6 +737,7 @@ const ColumnsLayoutRouteChildren: ColumnsLayoutRouteChildren = {
ColumnsLayoutInterestsIdRoute: ColumnsLayoutInterestsIdRoute,
ColumnsLayoutNewsfeedIdRoute: ColumnsLayoutNewsfeedIdRoute,
ColumnsLayoutStoriesIdRoute: ColumnsLayoutStoriesIdRoute,
ColumnsLayoutDvmIdLazyRoute: ColumnsLayoutDvmIdLazyRoute,
ColumnsLayoutLaunchpadIdLazyRoute: ColumnsLayoutLaunchpadIdLazyRoute,
ColumnsLayoutNotificationIdLazyRoute: ColumnsLayoutNotificationIdLazyRoute,
ColumnsLayoutRelaysUrlLazyRoute: ColumnsLayoutRelaysUrlLazyRoute,
@@ -772,6 +792,7 @@ export interface FileRoutesByFullPath {
'/columns/interests/$id': typeof ColumnsLayoutInterestsIdRoute
'/columns/newsfeed/$id': typeof ColumnsLayoutNewsfeedIdRoute
'/columns/stories/$id': typeof ColumnsLayoutStoriesIdRoute
'/columns/dvm/$id': typeof ColumnsLayoutDvmIdLazyRoute
'/columns/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
'/columns/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
'/columns/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
@@ -810,6 +831,7 @@ export interface FileRoutesByTo {
'/columns/interests/$id': typeof ColumnsLayoutInterestsIdRoute
'/columns/newsfeed/$id': typeof ColumnsLayoutNewsfeedIdRoute
'/columns/stories/$id': typeof ColumnsLayoutStoriesIdRoute
'/columns/dvm/$id': typeof ColumnsLayoutDvmIdLazyRoute
'/columns/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
'/columns/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
'/columns/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
@@ -851,6 +873,7 @@ export interface FileRoutesById {
'/columns/_layout/interests/$id': typeof ColumnsLayoutInterestsIdRoute
'/columns/_layout/newsfeed/$id': typeof ColumnsLayoutNewsfeedIdRoute
'/columns/_layout/stories/$id': typeof ColumnsLayoutStoriesIdRoute
'/columns/_layout/dvm/$id': typeof ColumnsLayoutDvmIdLazyRoute
'/columns/_layout/launchpad/$id': typeof ColumnsLayoutLaunchpadIdLazyRoute
'/columns/_layout/notification/$id': typeof ColumnsLayoutNotificationIdLazyRoute
'/columns/_layout/relays/$url': typeof ColumnsLayoutRelaysUrlLazyRoute
@@ -892,6 +915,7 @@ export interface FileRouteTypes {
| '/columns/interests/$id'
| '/columns/newsfeed/$id'
| '/columns/stories/$id'
| '/columns/dvm/$id'
| '/columns/launchpad/$id'
| '/columns/notification/$id'
| '/columns/relays/$url'
@@ -929,6 +953,7 @@ export interface FileRouteTypes {
| '/columns/interests/$id'
| '/columns/newsfeed/$id'
| '/columns/stories/$id'
| '/columns/dvm/$id'
| '/columns/launchpad/$id'
| '/columns/notification/$id'
| '/columns/relays/$url'
@@ -968,6 +993,7 @@ export interface FileRouteTypes {
| '/columns/_layout/interests/$id'
| '/columns/_layout/newsfeed/$id'
| '/columns/_layout/stories/$id'
| '/columns/_layout/dvm/$id'
| '/columns/_layout/launchpad/$id'
| '/columns/_layout/notification/$id'
| '/columns/_layout/relays/$url'
@@ -1081,6 +1107,7 @@ export const routeTree = rootRoute
"/columns/_layout/interests/$id",
"/columns/_layout/newsfeed/$id",
"/columns/_layout/stories/$id",
"/columns/_layout/dvm/$id",
"/columns/_layout/launchpad/$id",
"/columns/_layout/notification/$id",
"/columns/_layout/relays/$url",
@@ -1183,6 +1210,10 @@ export const routeTree = rootRoute
"filePath": "columns/_layout/stories.$id.tsx",
"parent": "/columns/_layout"
},
"/columns/_layout/dvm/$id": {
"filePath": "columns/_layout/dvm.$id.lazy.tsx",
"parent": "/columns/_layout"
},
"/columns/_layout/launchpad/$id": {
"filePath": "columns/_layout/launchpad.$id.lazy.tsx",
"parent": "/columns/_layout"

8
src/routes/columns/_layout/create-newsfeed.tsx
View File

@@ -1,16 +1,8 @@
import { cn } from "@/commons";
import type { ColumnRouteSearch } from "@/types";
import { Link, Outlet } from "@tanstack/react-router";
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/columns/_layout/create-newsfeed")({
validateSearch: (search: Record<string, string>): ColumnRouteSearch => {
return {
account: search.account,
label: search.label,
name: search.name,
};
},
component: Screen,
});

108
src/routes/columns/_layout/dvm.$id.lazy.tsx Normal file
View File

@@ -0,0 +1,108 @@
import { commands } from "@/commands.gen";
import { toLumeEvents } from "@/commons";
import { RepostNote, Spinner, TextNote } from "@/components";
import type { LumeEvent } from "@/system";
import { Kind } from "@/types";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { useQuery } from "@tanstack/react-query";
import { createLazyFileRoute } from "@tanstack/react-router";
import { type RefObject, useCallback, useRef } from "react";
import { Virtualizer } from "virtua";
export const Route = createLazyFileRoute("/columns/_layout/dvm/$id")({
component: Screen,
});
function Screen() {
const { id } = Route.useParams();
const { account } = Route.useSearch();
const { isLoading, isError, error, data } = useQuery({
queryKey: ["job-result", id],
queryFn: async () => {
if (!account) {
throw new Error("Account is required");
}
const res = await commands.getAllEventsByRequest(account, id);
if (res.status === "error") {
throw new Error(res.error);
}
return toLumeEvents(res.data);
},
refetchOnWindowFocus: false,
});
const ref = useRef<HTMLDivElement>(null);
const renderItem = useCallback(
(event: LumeEvent) => {
if (!event) {
return;
}
switch (event.kind) {
case Kind.Repost: {
const repostId = event.repostId;
return (
<RepostNote
key={repostId + event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
default:
return (
<TextNote
key={event.id}
event={event}
className="border-b-[.5px] border-neutral-300 dark:border-neutral-700"
/>
);
}
},
[data],
);
return (
<ScrollArea.Root
type={"scroll"}
scrollHideDelay={300}
className="overflow-hidden size-full px-3"
>
<ScrollArea.Viewport
ref={ref}
className="relative h-full bg-white dark:bg-neutral-800 rounded-t-xl shadow shadow-neutral-300/50 dark:shadow-none border-[.5px] border-neutral-300 dark:border-neutral-700"
>
<Virtualizer scrollRef={ref as unknown as RefObject<HTMLElement>}>
{isLoading ? (
<div className="flex items-center justify-center w-full h-16 gap-2">
<Spinner className="size-4" />
<span className="text-sm font-medium">Requesting events...</span>
</div>
) : isError ? (
<div className="flex items-center justify-center w-full h-16 gap-2">
<span className="text-sm font-medium">{error?.message}</span>
</div>
) : !data?.length ? (
<div className="mb-3 flex items-center justify-center h-20 text-sm">
🎉 Yo. You're catching up on all latest notes.
</div>
) : (
data.map((item) => renderItem(item))
)}
</Virtualizer>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
orientation="vertical"
>
<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
</ScrollArea.Scrollbar>
<ScrollArea.Corner className="bg-transparent" />
</ScrollArea.Root>
);
}

160
src/routes/columns/_layout/launchpad.$id.lazy.tsx
View File

@@ -11,7 +11,8 @@ import { resolveResource } from "@tauri-apps/api/path";
import { message } from "@tauri-apps/plugin-dialog";
import { readTextFile } from "@tauri-apps/plugin-fs";
import { nanoid } from "nanoid";
import { useCallback, useState, useTransition } from "react";
import { memo, useCallback, useState, useTransition } from "react";
import { minidenticon } from "minidenticons";
export const Route = createLazyFileRoute("/columns/_layout/launchpad/$id")({
component: Screen,
@@ -28,6 +29,7 @@ function Screen() {
<Newsfeeds />
<Relayfeeds />
<Interests />
<ContentDiscovery />
<Core />
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
@@ -436,22 +438,20 @@ function Interests() {
</User.Provider>
<h5 className="text-xs font-medium">{name}</h5>
</div>
<div className="flex items-center gap-3">
<button
type="button"
onClick={() =>
LumeWindow.openColumn({
label,
name,
account: id,
url: `/columns/interests/${item.id}`,
})
}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
Add
</button>
</div>
<button
type="button"
onClick={() =>
LumeWindow.openColumn({
label,
name,
account: id,
url: `/columns/interests/${item.id}`,
})
}
className="h-6 w-16 inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white"
>
Add
</button>
</div>
</div>
);
@@ -522,6 +522,132 @@ function Interests() {
);
}
function ContentDiscovery() {
const { isLoading, isError, error, data } = useQuery({
queryKey: ["content-discovery"],
queryFn: async () => {
const res = await commands.getAllProviders();
if (res.status === "ok") {
const events: NostrEvent[] = res.data.map((item) => JSON.parse(item));
return events;
} else {
throw new Error(res.error);
}
},
refetchOnWindowFocus: false,
});
return (
<div className="mb-12 flex flex-col gap-3">
<div className="flex items-center justify-between px-2">
<h3 className="font-semibold">Content Discovery</h3>
</div>
<div className="flex flex-col gap-3">
{isLoading ? (
<div className="inline-flex items-center gap-1.5">
<Spinner className="size-4" />
Loading...
</div>
) : isError ? (
<div className="flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
<p className="text-center">{error?.message ?? "Error"}</p>
</div>
) : !data ? (
<div className="flex flex-col items-center justify-center h-16 w-full rounded-xl overflow-hidden bg-neutral-200/50 dark:bg-neutral-800/50">
<p className="text-center">Empty.</p>
</div>
) : (
<div className="flex flex-col rounded-xl overflow-hidden bg-white dark:bg-neutral-800/50 shadow-lg shadow-primary dark:ring-1 dark:ring-neutral-800">
<div className="flex flex-col gap-2 p-2">
{data?.map((item) => (
<Provider key={item.id} event={item} />
))}
</div>
</div>
)}
</div>
</div>
);
}
const Provider = memo(function Provider({ event }: { event: NostrEvent }) {
const { id } = Route.useParams();
const [isPending, startTransition] = useTransition();
const metadata: { [key: string]: string } = JSON.parse(event.content);
const fallback = `data:image/svg+xml;utf8,${encodeURIComponent(
minidenticon(event.id, 60, 50),
)}`;
const request = (name: string | undefined, provider: string) => {
startTransition(async () => {
// Ensure signer
const signer = await commands.hasSigner(id);
if (signer.status === "ok") {
if (!signer.data) {
const res = await commands.setSigner(id);
if (res.status === "error") {
await message(res.error, { kind: "error" });
return;
}
}
// Send request event to provider
const res = await commands.requestEventsFromProvider(provider);
if (res.status === "ok") {
// Open column
await LumeWindow.openColumn({
label: `dvm_${provider.slice(0, 6)}`,
name: name || "Content Discovery",
account: id,
url: `/columns/dvm/${provider}`,
});
return;
} else {
await message(res.error, { kind: "error" });
return;
}
} else {
await message(signer.error, { kind: "error" });
return;
}
});
};
return (
<div className="group px-3 flex gap-2 items-center justify-between h-16 rounded-lg bg-neutral-100 dark:bg-neutral-800">
<div className="shrink-0 size-10 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
<img
src={metadata.picture || fallback}
alt={event.id}
className="size-10 object-cover"
/>
</div>
<div className="flex-1 flex flex-col truncate">
<h5 className="text-sm font-medium">{metadata.name}</h5>
<p className="w-full text-sm truncate text-neutral-600 dark:text-neutral-400">
{metadata.about}
</p>
</div>
<button
type="button"
onClick={() => request(metadata.name, event.pubkey)}
disabled={isPending}
className={cn(
"h-6 w-16 group-hover:visible inline-flex items-center justify-center gap-1 text-xs font-semibold rounded-full bg-neutral-200 dark:bg-neutral-700 hover:bg-blue-500 hover:text-white",
isPending ? "" : "invisible",
)}
>
{isPending ? <Spinner className="size-3" /> : "Add"}
</button>
</div>
);
});
function Core() {
const { id } = Route.useParams();
const { data } = useQuery({