From 74d84cb2f22600b6246343e9ea606cf0db7517f0 Mon Sep 17 00:00:00 2001 From: polwex Date: Wed, 19 Nov 2025 05:47:30 +0700 Subject: Big GUI improvements on Nostr rendering and fetching --- gui/src/pages/Feed.tsx | 56 +++++--------- gui/src/pages/Thread.tsx | 187 +++++++++-------------------------------------- gui/src/pages/User.tsx | 40 +++++----- 3 files changed, 74 insertions(+), 209 deletions(-) (limited to 'gui/src/pages') diff --git a/gui/src/pages/Feed.tsx b/gui/src/pages/Feed.tsx index bb001d4..16a5ea1 100644 --- a/gui/src/pages/Feed.tsx +++ b/gui/src/pages/Feed.tsx @@ -8,13 +8,13 @@ import { useState } from "react"; import Composer from "@/components/composer/Composer"; import { ErrorPage } from "@/pages/Error"; import NostrFeed from "@/components/nostr/Feed"; +import { consolidateFeeds, disaggregate } from "@/logic/nostrill"; -type FeedType = "global" | "following" | "nostr"; +type FeedType = "urbit" | "following" | "nostr"; function Loader() { const params = useParams(); - console.log({ params }); if (!params.taip) return ; - if (params.taip === "global") return ; + // if (params.taip === "urbit") return ; if (params.taip === "following") return ; if (params.taip === "nostr") return ; // else if (param === FeedType.Rumors) return ; @@ -27,10 +27,10 @@ function FeedPage({ t }: { t: FeedType }) { <>
setActive("global")} + className={active === "urbit" ? "active" : ""} + onClick={() => setActive("urbit")} > - Global + Urbit
- {active === "global" ? ( - + {active === "urbit" ? ( + ) : active === "following" ? ( ) : active === "nostr" ? ( @@ -58,40 +58,22 @@ function FeedPage({ t }: { t: FeedType }) { ); } -// {active === "global" ? ( -// -// ) : active === "following" ? ( -// -// ) : ( -// -// )} -function Global() { - // const { api } = useLocalState(); - // const { isPending, data, refetch } = useQuery({ - // queryKey: ["globalFeed"], - // queryFn: () => { - // return api!.scryFeed(null, null); - // }, - // }); - // console.log(data, "scry feed data"); - // if (isPending) return ; - // else if ("bucun" in data) return

Error

; - // else return ; - return

Error

; +function Urbit() { + const following = useLocalState((s) => s.following); + const feed = disaggregate(following, "urbit"); + return ( +
+ {}} /> +
+ ); } function Following() { - const following = useLocalState((s) => s.following2); - console.log({ following }); - - // console.log(data, "scry feed data"); - // if (isPending) return ; - // else if ("bucun" in data) return

Error

; - // else return ; - + const following = useLocalState((s) => s.following); + const feed = consolidateFeeds(following); return (
- {}} /> + {}} />
); } diff --git a/gui/src/pages/Thread.tsx b/gui/src/pages/Thread.tsx index fc215f2..a3d2234 100644 --- a/gui/src/pages/Thread.tsx +++ b/gui/src/pages/Thread.tsx @@ -1,167 +1,52 @@ import { useParams } from "wouter"; -import { useQuery } from "@tanstack/react-query"; import useLocalState from "@/state/state"; -import Icon from "@/components/Icon"; -import spinner from "@/assets/triangles.svg"; import { ErrorPage } from "@/pages/Error"; import "@/styles/trill.css"; import "@/styles/feed.css"; -import Post from "@/components/post/Post"; -import { extractThread, toFlat } from "@/logic/trill/helpers"; -import type { FullNode } from "@/types/trill"; -import Composer from "@/components/composer/Composer"; +import { stringToUser } from "@/logic/nostrill"; +import TrillThread from "@/components/trill/Thread"; +import NostrThread from "@/components/nostr/Thread"; +import { decodeNostrKey } from "@/logic/nostr"; + +export default function ThreadLoader() { + const { profiles, following } = useLocalState((s) => ({ + profiles: s.profiles, + following: s.following, + })); -export default function Thread() { const params = useParams<{ host: string; id: string }>(); const { host, id } = params; - const { api } = useLocalState((s) => ({ api: s.api })); - - async function fetchThread() { - return await api!.scryThread(host, id); - } - const { isPending, data, error } = useQuery({ - queryKey: ["thread", params.host, params.id], - queryFn: fetchThread, - enabled: !!api && !!params.host && !!params.id, - }); - - console.log({ data }); - if (!params.host || !params.id) { - return ; - } - if (isPending) { + const uuser = stringToUser(host); + if ("error" in uuser) return ; + const feed = following.get(host); + const profile = profiles.get(host); + if ("urbit" in uuser.ok) return ( -
-
-

Loading Thread...

-
-
- Loading -
-
+ ); - } - - if (error) { + if ("nostr" in uuser.ok) return ( -
-
-

Error Loading Thread

-
- -
+ ); - } - - if (!data || "error" in data) { - return ( -
-
-

Thread Not Found

-
- -
- ); - } - console.log({ data }); - // TODO make Composer a modal when in Thread mode - return ( -
-
-
- -
-

Thread

-
- ~{params.host} - • - #{params.id} -
-
- -
- -
- -
-
- -
-
-
- ); + else return ; } -function ChildTree({ node }: { node: FullNode }) { - const { threadChildren, replies } = extractThread(node); - return ( - <> -
- {threadChildren.map((n) => { - return ; - })} -
-
- {replies.map((n) => ( - - ))} -
- - ); +export function NostrThreadLoader() { + const params = useParams<{ id: string }>(); + const { id } = params; + if (!id) return ; + const dec = decodeNostrKey(id); + if (!dec) return ; + return ; } - -function ReplyThread({ node }: { node: FullNode }) { - // const { threadChildren, replies } = extractThread(node); - const { replies } = extractThread(node); - return ( -
-
- -
-
- {replies.map((r) => ( - - ))} -
-
- ); -} - -// function OwnData(props: Props) { -// const { api } = useLocalState((s) => ({ -// api: s.api, -// })); -// const { host, id } = props; -// async function fetchThread() { -// return await api!.scryThread(host, id); -// } -// const { isLoading, isError, data, refetch } = useQuery({ -// queryKey: ["trill-thread", host, id], -// queryFn: fetchThread, -// }); -// return isLoading ? ( -//
-//
-//

Scrying Post, please wait...

-// -//
-//
-// ) : null; -// } -// function SomeoneElses(props: Props) { -// // const { api, following } = useLocalState((s) => ({ -// // api: s.api, -// // following: s.following, -// // })); -// return
ho
; -// } diff --git a/gui/src/pages/User.tsx b/gui/src/pages/User.tsx index 1611037..80fff05 100644 --- a/gui/src/pages/User.tsx +++ b/gui/src/pages/User.tsx @@ -1,18 +1,12 @@ -// import spinner from "@/assets/icons/spinner.svg"; -import Composer from "@/components/composer/Composer"; -import PostList from "@/components/feed/PostList"; import Profile from "@/components/profile/Profile"; import useLocalState, { useStore } from "@/state/state"; -import Icon from "@/components/Icon"; -import toast from "react-hot-toast"; -import { useEffect, useState } from "react"; -import type { FC } from "@/types/trill"; +import { useState } from "react"; import type { UserType } from "@/types/nostrill"; import { isValidPatp } from "urbit-ob"; import { ErrorPage } from "@/pages/Error"; import { useParams } from "wouter"; -import { isValidNostrKey } from "@/logic/nostr"; -import TrillFeed from "@/components/trill/User"; +import { decodeNostrKey } from "@/logic/nostr"; +import TrillFeed, { Inner } from "@/components/trill/User"; import NostrFeed from "@/components/nostr/User"; function UserLoader() { @@ -22,9 +16,12 @@ function UserLoader() { if (!userString) return ; else if (isValidPatp(userString)) return ; - else if (isValidNostrKey(userString)) - return ; - else return ; + else { + const nostrKey = decodeNostrKey(userString); + if (nostrKey) + return ; + else return ; + } } function UserFeed({ @@ -49,9 +46,8 @@ function UserFeed({ : false; // auto updating on SSE doesn't work if we do shallow const { following } = useStore(); - const feed = following.get(userString); - const hasFeed = !feed ? false : Object.entries(feed).length > 0; - const refetch = () => feed; + const userString2 = "urbit" in user ? user.urbit : user.nostr; + const feed = following.get(userString2); const [isFollowLoading, setIsFollowLoading] = useState(false); const [isAccessLoading, setIsAccessLoading] = useState(false); @@ -60,11 +56,10 @@ function UserFeed({
{isMe ? ( - + ) : "urbit" in user ? ( ) : "nostr" in user ? ( ; +function MyFeed({ our }: { our: string }) { + const following = useLocalState((s) => s.following); + const feed = following.get(our); + if (!feed) return ; + return {}} />; } -- cgit v1.2.3