From 985fa2f7c99832cdf3c3351d2273c8fd05402b78 Mon Sep 17 00:00:00 2001 From: polwex Date: Wed, 17 Sep 2025 21:45:18 +0700 Subject: basic comms working --- front/src/pages/Feed.tsx | 84 +++++++++++++- front/src/pages/Settings.tsx | 257 +++++++++++++++++++++++++++++++------------ front/src/pages/User.tsx | 138 +++++++++++++++++++++-- 3 files changed, 397 insertions(+), 82 deletions(-) (limited to 'front/src/pages') diff --git a/front/src/pages/Feed.tsx b/front/src/pages/Feed.tsx index 65dee64..5902162 100644 --- a/front/src/pages/Feed.tsx +++ b/front/src/pages/Feed.tsx @@ -8,6 +8,8 @@ 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 UserFeed from "./User"; import { P404 } from "@/Router"; import { isValidPatp } from "urbit-ob"; @@ -88,11 +90,89 @@ function Global() { return

Error

; } function Nostr() { - const { nostrFeed } = useLocalState(); + 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; - return ; + + 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; diff --git a/front/src/pages/Settings.tsx b/front/src/pages/Settings.tsx index e0f1da9..6b6f7bd 100644 --- a/front/src/pages/Settings.tsx +++ b/front/src/pages/Settings.tsx @@ -1,89 +1,206 @@ import useLocalState from "@/state/state"; -import type { UserProfile } from "@/types/nostril"; import { useState } from "react"; +import toast from "react-hot-toast"; +import { ThemeSwitcher } from "@/styles/ThemeSwitcher"; +import Icon from "@/components/Icon"; +import "@/styles/Settings.css"; function Settings() { - const { UISettings, keys, profiles, relays, api } = useLocalState(); + const { key, relays, api } = useLocalState((s) => ({ + key: s.key, + relays: s.relays, + api: s.api, + })); const [newRelay, setNewRelay] = useState(""); - async function saveSetting( - bucket: string, - key: string, - value: string | boolean | number | string[], - ) { - const json = { - "put-entry": { - desk: "trill", - "bucket-key": bucket, - "entry-key": key, - value, - }, - }; - // const res = await poke("settings", "settings-event", json); - // if (res) refetchSettings(); - } + const [isAddingRelay, setIsAddingRelay] = useState(false); + const [isCyclingKey, setIsCyclingKey] = useState(false); + async function removeRelay(url: string) { - console.log({ url }); + 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() { - // - // await addnr(newRelay); - } - async function removeProfile(pubkey: string) { - api!.removeKey(pubkey); + 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 createProfile() { - // - api!.createKey(); + + 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

-
- - {keys.map((k) => { - const profile = profiles.get(k); - const profileDiv = !profile ? ( -
-
Pubkey: {k}
-

No profile set

) -
- ) : ( -
- {profile.picture && } -
Name: {profile.name}
-
Pubkey: {k}
-
About: {profile.about}
- +
+
+

Settings

+

Manage your Nostrill configuration and preferences

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

Appearance

+
+
+
+
+ +

Choose your preferred color theme

+
+
+ +
- ); - return ( -
- {profileDiv} +
+
+ + {/* Identity Section */} +
+
+ +

Identity

+
+
+
+
+ +

Your unique identifier on the Nostr network

+
+
+
+ {key || "No key generated"} + +
+
- ); - })} -
- +
-
-
- - {Object.keys(relays).map((r) => ( - // TODO: add connect button to connect and disc to relay one by one -
-
{r}
- + + {/* 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" + /> + +
+
+
+
+
- ))} -
- - setNewRelay(e.target.value)} - /> -
diff --git a/front/src/pages/User.tsx b/front/src/pages/User.tsx index a1e26f1..e209bb3 100644 --- a/front/src/pages/User.tsx +++ b/front/src/pages/User.tsx @@ -1,20 +1,138 @@ // import spinner from "@/assets/icons/spinner.svg"; import Composer from "@/components/composer/Composer"; import PostList from "@/components/feed/PostList"; -import useLocalState from "@/state/state"; +import ProfileEditor from "@/components/ProfileEditor"; +import useLocalState, { useStore } from "@/state/state"; import type { Ship } from "@/types/urbit"; +import "@/styles/ProfileEditor.css"; +import Icon from "@/components/Icon"; +import toast from "react-hot-toast"; +import { useState } from "react"; +import type { FC } from "@/types/trill"; function UserFeed({ p }: { p: Ship }) { - const { api, following } = useLocalState(); - const feed = following.get(api!.airlock.our!); + const { api } = useLocalState((s) => ({ + api: s.api, + })); + // auto updating on SSE doesn't work if we do shallow + const { following } = useStore(); + const feed = following.get(p); const refetch = () => feed; - if (p === api!.airlock.our) - return ( -
- - -
- ); + const isOwnProfile = p === api?.airlock.our; + const isFollowing = following.has(p); + + const [isFollowLoading, setIsFollowLoading] = useState(false); + const [isAccessLoading, setIsAccessLoading] = useState(false); + const [fc, setFC] = useState(); + + const handleFollow = async () => { + if (!api) return; + + setIsFollowLoading(true); + try { + if (isFollowing) { + await api.unfollow(p); + toast.success(`Unfollowed ${p}`); + } else { + await api.follow(p); + toast.success(`Now following ${p}`); + } + } catch (error) { + toast.error(`Failed to ${isFollowing ? "unfollow" : "follow"} ${p}`); + console.error("Follow error:", error); + } finally { + setIsFollowLoading(false); + } + }; + + const handleRequestAccess = async () => { + if (!api) return; + + setIsAccessLoading(true); + try { + const res = await api.peekFeed(p); + toast.success(`Access request sent to ${p}`); + if ("error" in res) toast.error(res.error); + else setFC(res.ok); + } catch (error) { + toast.error(`Failed to request access from ${p}`); + console.error("Access request error:", error); + } finally { + setIsAccessLoading(false); + } + }; + + return ( +
+ + + {!isOwnProfile && ( +
+ + + +
+ )} + + {feed ? ( +
+ + +
+ ) : fc ? ( +
+ + +
+ ) : null} + + {!isOwnProfile && !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 UserFeed; -- cgit v1.2.3