From 8751ba26ebf7b7761b9e237f2bf3453623dd1018 Mon Sep 17 00:00:00 2001 From: polwex Date: Mon, 6 Oct 2025 10:13:39 +0700 Subject: added frontend WS connection for demonstration purposes --- gui/src/pages/Feed.tsx | 182 ++++++++++++++++++++++++++++++++ gui/src/pages/Settings.tsx | 255 +++++++++++++++++++++++++++++++++++++++++++++ gui/src/pages/Thread.tsx | 127 ++++++++++++++++++++++ gui/src/pages/User.tsx | 212 +++++++++++++++++++++++++++++++++++++ 4 files changed, 776 insertions(+) create mode 100644 gui/src/pages/Feed.tsx create mode 100644 gui/src/pages/Settings.tsx create mode 100644 gui/src/pages/Thread.tsx create mode 100644 gui/src/pages/User.tsx (limited to 'gui/src/pages') diff --git a/gui/src/pages/Feed.tsx b/gui/src/pages/Feed.tsx new file mode 100644 index 0000000..66acc66 --- /dev/null +++ b/gui/src/pages/Feed.tsx @@ -0,0 +1,182 @@ +// import spinner from "@/assets/icons/spinner.svg"; +import "@/styles/trill.css"; +import "@/styles/feed.css"; +import UserLoader from "./User"; +import PostList from "@/components/feed/PostList"; +import useLocalState from "@/state/state"; +import { useParams } from "wouter"; +import spinner from "@/assets/triangles.svg"; +import { useState } from "react"; +import Composer from "@/components/composer/Composer"; +import Icon from "@/components/Icon"; +import toast from "react-hot-toast"; +import { eventsToFc } from "@/logic/nostrill"; +import { ErrorPage } from "@/Router"; + +type FeedType = "global" | "following" | "nostr"; +function Loader() { + // const { api } = useLocalState(); + const params = useParams(); + console.log({ params }); + // const [loc, navigate] = useLocation(); + // console.log({ loc }); + // const our = api!.airlock.ship; + if (params.taip === "global") return ; + if (params.taip === "nostr") return ; + // else if (param === FeedType.Rumors) return ; + // else if (param === FeedType.Home) return ; + else if (params.taip) return ; + else return ; +} +function FeedPage({ t }: { t: FeedType }) { + const [active, setActive] = useState(t); + return ( +
+
+
setActive("global")} + > + Global +
+
setActive("following")} + > + Following +
+
setActive("nostr")} + > + Nostr +
+
+
+ + {active === "global" ? ( + + ) : active === "following" ? ( + + ) : active === "nostr" ? ( + + ) : null} +
+
+ ); +} +// {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 Nostr() { + const { nostrFeed, api } = useLocalState((s) => ({ + nostrFeed: s.nostrFeed, + api: s.api, + })); + const [isSyncing, setIsSyncing] = useState(false); + const feed = eventsToFc(nostrFeed); + console.log({ feed }); + const refetch = () => feed; + + const handleResync = async () => { + if (!api) return; + + setIsSyncing(true); + try { + await api.syncRelays(); + toast.success("Nostr feed sync initiated"); + } catch (error) { + toast.error("Failed to sync Nostr feed"); + console.error("Sync error:", error); + } finally { + setIsSyncing(false); + } + }; + + // Show empty state with resync option when no feed data + if (!feed || !feed.feed || Object.keys(feed.feed).length === 0) { + return ( +
+
+ +

No Nostr Posts

+

+ Your Nostr feed appears to be empty. Try syncing with your relays to + fetch the latest posts. +

+ +
+
+ ); + } + + // Show feed with resync button in header + return ( +
+
+
+

Nostr Feed

+ + {Object.keys(feed.feed).length} posts + +
+ +
+ +
+ ); +} + +export default Loader; +// TODO +type MixFeed = any; + +function Inner({ data, refetch }: { data: MixFeed; refetch: Function }) { + return ; +} diff --git a/gui/src/pages/Settings.tsx b/gui/src/pages/Settings.tsx new file mode 100644 index 0000000..abf0022 --- /dev/null +++ b/gui/src/pages/Settings.tsx @@ -0,0 +1,255 @@ +import useLocalState from "@/state/state"; +import { useState } from "react"; +import toast from "react-hot-toast"; +import { ThemeSwitcher } from "@/styles/ThemeSwitcher"; +import Icon from "@/components/Icon"; +import "@/styles/Settings.css"; +import WebSocketWidget from "@/components/WsWidget"; + +function Settings() { + const { key, relays, api, addNotification } = useLocalState((s) => ({ + key: s.pubkey, + relays: s.relays, + api: s.api, + addNotification: s.addNotification, + })); + const [newRelay, setNewRelay] = useState(""); + const [isAddingRelay, setIsAddingRelay] = useState(false); + const [isCyclingKey, setIsCyclingKey] = useState(false); + + async function removeRelay(url: string) { + try { + await api?.deleteRelay(url); + toast.success("Relay removed"); + } catch (error) { + toast.error("Failed to remove relay"); + console.error("Remove relay error:", error); + } + } + + async function addNewRelay() { + if (!newRelay.trim()) { + toast.error("Please enter a relay URL"); + return; + } + + setIsAddingRelay(true); + try { + const valid = ["wss:", "ws:"]; + const url = new URL(newRelay); + if (!valid.includes(url.protocol)) { + toast.error("Invalid Relay URL - must use wss:// or ws://"); + return; + } + + await api?.addRelay(newRelay); + toast.success("Relay added"); + setNewRelay(""); + } catch (error) { + toast.error("Invalid relay URL or failed to add relay"); + console.error("Add relay error:", error); + } finally { + setIsAddingRelay(false); + } + } + + async function cycleKey() { + setIsCyclingKey(true); + try { + await api?.cycleKeys(); + toast.success("Key cycled successfully"); + } catch (error) { + toast.error("Failed to cycle key"); + console.error("Cycle key error:", error); + } finally { + setIsCyclingKey(false); + } + } + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + addNewRelay(); + } + }; + + return ( +
+
+

Settings

+

Manage your Nostrill configuration and preferences

+
+ +
+ + {/* Notifications Test Section - Remove in production */} +
+
+ +

Test Notifications

+
+
+
+
+ +

Generate test notifications to see how they work

+
+
+ +
+
+
+
+ + {/* Appearance Section */} +
+
+ +

Appearance

+
+
+
+
+ +

Choose your preferred color theme

+
+
+ +
+
+
+
+ + {/* Identity Section */} +
+
+ +

Identity

+
+
+
+
+ +

Your unique identifier on the Nostr network

+
+
+
+ {key || "No key generated"} + +
+
+
+
+
+ + {/* Nostr Relays Section */} +
+
+ +

Nostr Relays

+
+
+
+
+ +

Manage your Nostr relay connections

+
+
+
+ {Object.keys(relays).length === 0 ? ( +
+ +

No relays configured

+
+ ) : ( + Object.keys(relays).map((url) => ( +
+
+ {url} + Connected +
+ +
+ )) + )} + +
+
+ setNewRelay(e.target.value)} + onKeyPress={handleKeyPress} + placeholder="wss://relay.example.com" + className="relay-input" + /> + +
+
+
+
+
+
+
+
+
+ ); +} +export default Settings; diff --git a/gui/src/pages/Thread.tsx b/gui/src/pages/Thread.tsx new file mode 100644 index 0000000..8296f07 --- /dev/null +++ b/gui/src/pages/Thread.tsx @@ -0,0 +1,127 @@ +import { useParams } from "wouter"; +import { useQuery } from "@tanstack/react-query"; +import useLocalState from "@/state/state"; +import PostList from "@/components/feed/PostList"; +import Composer from "@/components/composer/Composer"; +import Icon from "@/components/Icon"; +import spinner from "@/assets/triangles.svg"; +import { ErrorPage } from "@/Router"; +import "@/styles/trill.css"; +import "@/styles/feed.css"; +import Post from "@/components/post/Post"; +import { toFlat } from "@/logic/trill/helpers"; + +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, refetch } = 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) { + return ( +
+
+

Loading Thread...

+
+
+ Loading +
+
+ ); + } + + if (error) { + return ( +
+
+

Error Loading Thread

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

Thread Not Found

+
+ +
+ ); + } + + return ( +
+
+
+ +
+

Thread

+
+ ~{params.host} + • + #{params.id} +
+
+ +
+ +
+ +
+
+
+ ); +} +// 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 new file mode 100644 index 0000000..b73cd96 --- /dev/null +++ b/gui/src/pages/User.tsx @@ -0,0 +1,212 @@ +// 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 type { UserType } from "@/types/nostrill"; +import { isValidPatp } from "urbit-ob"; +import { isValidNostrPubkey } from "@/logic/nostrill"; +import { ErrorPage } from "@/Router"; + +function UserLoader({ userString }: { userString: string }) { + const { api, pubkey } = useLocalState((s) => ({ + api: s.api, + pubkey: s.pubkey, + })); + // auto updating on SSE doesn't work if we do shallow + + const user = isValidPatp(userString) + ? { urbit: userString } + : isValidNostrPubkey(userString) + ? { nostr: userString } + : { error: "" }; + + const isOwnProfile = + "urbit" in user + ? user.urbit === api?.airlock.our + : "nostr" in user + ? pubkey === user.nostr + : false; + if ("error" in user) return ; + else + return ; +} + +function UserFeed({ + user, + userString, + isMe, +}: { + user: UserType; + userString: string; + isMe: boolean; +}) { + const { api, addProfile, addNotification, lastFact } = useLocalState((s) => ({ + api: s.api, + addProfile: s.addProfile, + addNotification: s.addNotification, + lastFact: s.lastFact, + })); + // 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 isFollowing = following.has(userString); + + const [isFollowLoading, setIsFollowLoading] = useState(false); + const [isAccessLoading, setIsAccessLoading] = useState(false); + const [fc, setFC] = useState(); + + useEffect(() => { + console.log("fact", lastFact); + console.log(isFollowLoading); + if (!isFollowLoading) return; + const follow = lastFact?.fols; + if (!follow) return; + if ("new" in follow) { + if (userString !== follow.new.user) return; + toast.success(`Now following ${userString}`); + setIsFollowLoading(false); + addNotification({ + type: "follow", + from: userString, + message: `You are now following ${userString}`, + }); + } else if ("quit" in follow) { + toast.success(`Unfollowed ${userString}`); + setIsFollowLoading(false); + addNotification({ + type: "unfollow", + from: userString, + message: `You unfollowed ${userString}`, + }); + } + }, [lastFact, userString, isFollowLoading]); + + const handleFollow = async () => { + if (!api) return; + + setIsFollowLoading(true); + try { + if (isFollowing) { + await api.unfollow(user); + } else { + await api.follow(user); + toast.success(`Follow request sent to ${userString}`); + } + } catch (error) { + toast.error( + `Failed to ${isFollowing ? "unfollow" : "follow"} ${userString}`, + ); + setIsFollowLoading(false); + console.error("Follow error:", error); + } + }; + + const handleRequestAccess = async () => { + if (!api) return; + if (!("urbit" in user)) return; + + setIsAccessLoading(true); + try { + const res = await api.peekFeed(user.urbit); + toast.success(`Access request sent to ${user.urbit}`); + addNotification({ + type: "access_request", + from: userString, + message: `Access request sent to ${userString}`, + }); + if ("error" in res) toast.error(res.error); + else { + console.log("peeked", res.ok.feed); + setFC(res.ok.feed); + if (res.ok.profile) addProfile(userString, res.ok.profile); + } + } catch (error) { + toast.error(`Failed to request access from ${user.urbit}`); + console.error("Access request error:", error); + } finally { + setIsAccessLoading(false); + } + }; + console.log({ user, userString, feed, fc }); + + return ( +
+ + + {!isMe && ( +
+ + + +
+ )} + + {feed && hasFeed ? ( +
+ + +
+ ) : fc ? ( +
+ + +
+ ) : null} + + {!isMe && !feed && !fc && ( +
+
+ +

No Posts Available

+

+ This user's posts are not publicly visible. + {!isFollowing && " Try following them"} or request temporary + access to see their content. +

+
+
+ )} +
+ ); +} + +export default UserLoader; -- cgit v1.2.3