summaryrefslogtreecommitdiff
path: root/front/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'front/src/components')
-rw-r--r--front/src/components/composer/Composer.tsx198
-rw-r--r--front/src/components/composer/Snippets.tsx82
-rw-r--r--front/src/components/post/Body.tsx2
-rw-r--r--front/src/components/post/Footer.tsx62
-rw-r--r--front/src/components/post/Loader.tsx124
-rw-r--r--front/src/components/post/Reactions.tsx4
6 files changed, 301 insertions, 171 deletions
diff --git a/front/src/components/composer/Composer.tsx b/front/src/components/composer/Composer.tsx
index 43d38cd..81d0358 100644
--- a/front/src/components/composer/Composer.tsx
+++ b/front/src/components/composer/Composer.tsx
@@ -1,28 +1,44 @@
import useLocalState from "@/state/state";
import type { Poast } from "@/types/trill";
import Sigil from "@/components/Sigil";
-import { useState, type FormEvent } from "react";
-import type { ComposerData } from "@/types/ui";
+import { useState, useEffect, useRef, type FormEvent } from "react";
import Snippets, { ReplySnippet } from "./Snippets";
import toast from "react-hot-toast";
-import { useLocation } from "wouter";
+import Icon from "@/components/Icon";
+import { wait } from "@/logic/utils";
-function Composer({
- isAnon,
- replying,
-}: {
- isAnon?: boolean;
- replying?: Poast;
-}) {
- const [loc, navigate] = useLocation();
- const { api, composerData, addNotification, setComposerData } = useLocalState((s) => ({
- api: s.api,
- composerData: s.composerData,
- addNotification: s.addNotification,
- setComposerData: s.setComposerData,
- }));
+function Composer({ isAnon }: { isAnon?: boolean }) {
+ const { api, composerData, addNotification, setComposerData } = useLocalState(
+ (s) => ({
+ api: s.api,
+ composerData: s.composerData,
+ addNotification: s.addNotification,
+ setComposerData: s.setComposerData,
+ }),
+ );
const our = api!.airlock.our!;
- const [input, setInput] = useState(replying ? `${replying}: ` : "");
+ const [input, setInput] = useState("");
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [isLoading, setLoading] = useState(false);
+ const inputRef = useRef<HTMLInputElement>(null);
+
+ useEffect(() => {
+ if (composerData) {
+ setIsExpanded(true);
+ if (
+ composerData.type === "reply" &&
+ composerData.post &&
+ "trill" in composerData.post
+ ) {
+ const author = composerData.post.trill.author;
+ setInput(`${author} `);
+ }
+ // Auto-focus input when composer opens
+ setTimeout(() => {
+ inputRef.current?.focus();
+ }, 100); // Small delay to ensure the composer is rendered
+ }
+ }, [composerData]);
async function poast(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
// TODO
@@ -39,13 +55,32 @@ function Composer({
// tags: input.match(HASHTAGS_REGEX) || [],
// };
// TODO make it user choosable
- const res = await api!.addPost(input);
- if (res) {
- // Check for mentions in the post (ship names starting with ~)
+ setLoading(true);
+
+ const res =
+ composerData?.type === "reply" && "trill" in composerData.post
+ ? api!.addReply(
+ input,
+ composerData.post.trill.host,
+ composerData.post.trill.id,
+ composerData.post.trill.thread || composerData.post.trill.id,
+ )
+ : composerData?.type === "quote" && "trill" in composerData.post
+ ? api!.addQuote(input, {
+ ship: composerData.post.trill.host,
+ id: composerData.post.trill.id,
+ })
+ : !composerData
+ ? api!.addPost(input)
+ : wait(500);
+ const ares = await res;
+ if (ares) {
+ // // Check for mentions in the post (ship names starting with ~)
const mentions = input.match(/~[a-z-]+/g);
if (mentions) {
- mentions.forEach(mention => {
- if (mention !== our) { // Don't notify self-mentions
+ mentions.forEach((mention) => {
+ if (mention !== our) {
+ // Don't notify self-mentions
addNotification({
type: "mention",
from: our,
@@ -56,40 +91,113 @@ function Composer({
}
// If this is a reply, add notification
- if (composerData?.type === "reply" && composerData.post?.trill?.author !== our) {
- addNotification({
- type: "reply",
- from: our,
- message: `You replied to ${composerData.post.trill.author}'s post`,
- postId: composerData.post.trill.id,
- });
+ if (
+ composerData?.type === "reply" &&
+ composerData.post &&
+ "trill" in composerData.post
+ ) {
+ if (composerData.post.trill.author !== our) {
+ addNotification({
+ type: "reply",
+ from: our,
+ message: `You replied to ${composerData.post.trill.author}'s post`,
+ postId: composerData.post.trill.id,
+ });
+ }
}
setInput("");
setComposerData(null); // Clear composer data after successful post
toast.success("post sent");
- navigate(`/feed/${our}`);
+ setIsExpanded(false);
}
}
- const placeHolder = isAnon ? "> be me" : "What's going on in Urbit";
+ const placeHolder =
+ composerData?.type === "reply"
+ ? "Write your reply..."
+ : composerData?.type === "quote"
+ ? "Add your thoughts..."
+ : isAnon
+ ? "> be me"
+ : "What's going on in Urbit";
+
+ const clearComposer = (e: React.MouseEvent) => {
+ e.preventDefault();
+ setComposerData(null);
+ setInput("");
+ setIsExpanded(false);
+ };
+
return (
- <form id="composer" onSubmit={poast}>
+ <form
+ id="composer"
+ className={`${isExpanded ? "expanded" : ""} ${composerData ? "has-context" : ""}`}
+ onSubmit={poast}
+ >
<div className="sigil avatar">
<Sigil patp={our} size={46} />
</div>
- {composerData && composerData.type === "reply" && (
- <ReplySnippet post={composerData?.post} />
- )}
- <input
- value={input}
- onInput={(e) => setInput(e.currentTarget.value)}
- placeholder={placeHolder}
- />
- {composerData && composerData.type === "quote" && (
- <Snippets post={composerData?.post} />
- )}
- <button type="submit">Post</button>
+ <div className="composer-content">
+ {/* Reply snippets appear above input */}
+ {composerData && composerData.type === "reply" && (
+ <div className="composer-context reply-context">
+ <div className="context-header">
+ <span className="context-type">
+ <Icon name="reply" size={14} /> Replying to
+ </span>
+ <button
+ className="clear-context"
+ onClick={clearComposer}
+ title="Clear"
+ type="button"
+ >
+ ×
+ </button>
+ </div>
+ <ReplySnippet post={composerData.post} />
+ </div>
+ )}
+
+ {/* Quote context header above input (without snippet) */}
+ {composerData && composerData.type === "quote" && (
+ <div className="quote-header">
+ <div className="context-header">
+ <span className="context-type">
+ <Icon name="quote" size={14} /> Quote posting
+ </span>
+ <button
+ className="clear-context"
+ onClick={clearComposer}
+ title="Clear"
+ type="button"
+ >
+ ×
+ </button>
+ </div>
+ </div>
+ )}
+
+ <div className="composer-input-row">
+ <input
+ ref={inputRef}
+ value={input}
+ onInput={(e) => setInput(e.currentTarget.value)}
+ onFocus={() => setIsExpanded(true)}
+ placeholder={placeHolder}
+ />
+ <button type="submit" disabled={!input.trim()} className="post-btn">
+ Post
+ </button>
+ </div>
+
+ {/* Quote snippets appear below input */}
+ {composerData && composerData.type === "quote" && (
+ <div className="composer-context quote-context">
+ <Snippets post={composerData.post} />
+ </div>
+ )}
+ </div>
</form>
);
}
diff --git a/front/src/components/composer/Snippets.tsx b/front/src/components/composer/Snippets.tsx
index 30498d0..49d9b88 100644
--- a/front/src/components/composer/Snippets.tsx
+++ b/front/src/components/composer/Snippets.tsx
@@ -1,5 +1,5 @@
import Quote from "@/components/post/Quote";
-import type { ComposerData, SPID } from "@/types/ui";
+import type { SPID } from "@/types/ui";
import { NostrSnippet } from "../post/wrappers/Nostr";
export default Snippets;
@@ -20,43 +20,67 @@ export function ComposerSnippet({
}) {
function onc(e: React.MouseEvent) {
e.stopPropagation();
- onClick();
+ if (onClick) onClick();
}
return (
<div className="composer-snippet">
- <div className="pop-snippet-icon cp" role="link" onClick={onc}></div>
+ {onClick && (
+ <div className="pop-snippet-icon cp" role="link" onClick={onc}>
+ ×
+ </div>
+ )}
{children}
</div>
);
}
function PostSnippet({ post }: { post: SPID }) {
- if ("trill" in post) return <Quote data={post.trill} nest={0} />;
- else if ("nostr" in post) return <NostrSnippet {...post.nostr} />;
- // else if ("twatter" in post)
- // return (
- // <div id={`composer-${type}`}>
- // <Tweet tweet={post.post} quote={true} />
- // </div>
- // );
- // else if ("rumors" in post)
- // return (
- // <div id={`composer-${type}`}>
- // <div className="rumor-quote f1">
- // <img src={rumorIcon} alt="" />
- // <Body poast={post.post} refetch={() => {}} />
- // <span>{date_diff(post.post.time, "short")}</span>
- // </div>
- // </div>
- // );
- else return <></>;
+ if (!post) return <div className="snippet-error">No post data</div>;
+
+ try {
+ if ("trill" in post) return <Quote data={post.trill} nest={0} />;
+ else if ("nostr" in post) return <NostrSnippet {...post.nostr} />;
+ // else if ("twatter" in post)
+ // return (
+ // <div id={`composer-${type}`}>
+ // <Tweet tweet={post.post} quote={true} />
+ // </div>
+ // );
+ // else if ("rumors" in post)
+ // return (
+ // <div id={`composer-${type}`}>
+ // <div className="rumor-quote f1">
+ // <img src={rumorIcon} alt="" />
+ // <Body poast={post.post} refetch={() => {}} />
+ // <span>{date_diff(post.post.time, "short")}</span>
+ // </div>
+ // </div>
+ // );
+ else return <div className="snippet-error">Unsupported post type</div>;
+ } catch (error) {
+ console.error("Error rendering post snippet:", error);
+ return <div className="snippet-error">Failed to load post</div>;
+ }
}
export function ReplySnippet({ post }: { post: SPID }) {
- if ("trill" in post)
- return (
- <div id="reply">
- <Quote data={post.trill} nest={0} />
- </div>
- );
- else return <div />;
+ if (!post) return <div className="snippet-error">No post to reply to</div>;
+
+ try {
+ if ("trill" in post)
+ return (
+ <div id="reply" className="reply-snippet">
+ <Quote data={post.trill} nest={0} />
+ </div>
+ );
+ else if ("nostr" in post)
+ return (
+ <div id="reply" className="reply-snippet">
+ <NostrSnippet {...post.nostr} />
+ </div>
+ );
+ else return <div className="snippet-error">Cannot reply to this post type</div>;
+ } catch (error) {
+ console.error("Error rendering reply snippet:", error);
+ return <div className="snippet-error">Failed to load reply context</div>;
+ }
}
diff --git a/front/src/components/post/Body.tsx b/front/src/components/post/Body.tsx
index e8b659c..b4f1bb2 100644
--- a/front/src/components/post/Body.tsx
+++ b/front/src/components/post/Body.tsx
@@ -161,7 +161,7 @@ function Heading({ string, num }: { string: string; num: number }) {
}
function Ref({ r, nest }: { r: Reference; nest: number }) {
- if (r.ref.type === "nostril") {
+ if (r.ref.type === "trill") {
const comp = PostData({
host: r.ref.ship,
id: r.ref.path.slice(1),
diff --git a/front/src/components/post/Footer.tsx b/front/src/components/post/Footer.tsx
index d16f4fc..5b79da0 100644
--- a/front/src/components/post/Footer.tsx
+++ b/front/src/components/post/Footer.tsx
@@ -13,33 +13,33 @@ function Footer({ poast, refetch }: PostProps) {
const [_showMenu, setShowMenu] = useState(false);
const [location, navigate] = useLocation();
const [reposting, _setReposting] = useState(false);
- const { api, setComposerData, setModal, addNotification } = useLocalState((s) => ({
- api: s.api,
- setComposerData: s.setComposerData,
- setModal: s.setModal,
- addNotification: s.addNotification,
- }));
+ const { api, setComposerData, setModal, addNotification } = useLocalState(
+ (s) => ({
+ api: s.api,
+ setComposerData: s.setComposerData,
+ setModal: s.setModal,
+ addNotification: s.addNotification,
+ }),
+ );
const our = api!.airlock.our!;
function doReply(e: React.MouseEvent) {
+ console.log("do reply");
e.stopPropagation();
+ e.preventDefault();
setComposerData({ type: "reply", post: { trill: poast } });
- // Only add notification if replying to someone else's post
- if (poast.author !== our) {
- addNotification({
- type: "reply",
- from: our,
- message: `You replied to ${poast.author}'s post`,
- postId: poast.id,
- });
- }
+ // Scroll to top where composer is located
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ // Focus will be handled by the composer component
}
function doQuote(e: React.MouseEvent) {
e.stopPropagation();
+ e.preventDefault();
setComposerData({
type: "quote",
post: { trill: poast },
});
- navigate("/composer");
+ // Scroll to top where composer is located
+ window.scrollTo({ top: 0, behavior: "smooth" });
}
const childrenCount = poast.children
? poast.children.length
@@ -49,6 +49,7 @@ function Footer({ poast, refetch }: PostProps) {
const myRP = poast.engagement.shared.find((r) => r.pid.ship === our);
async function cancelRP(e: React.MouseEvent) {
e.stopPropagation();
+ e.preventDefault();
const r = await api!.deletePost(our);
if (r) toast.success("Repost deleted");
refetch();
@@ -57,6 +58,7 @@ function Footer({ poast, refetch }: PostProps) {
async function sendRP(e: React.MouseEvent) {
// TODO update backend because contents are only markdown now
e.stopPropagation();
+ e.preventDefault();
// const c = [
// {
// ref: {
@@ -85,6 +87,7 @@ function Footer({ poast, refetch }: PostProps) {
}
function doReact(e: React.MouseEvent) {
e.stopPropagation();
+ e.preventDefault();
const modal = <TrillReactModal poast={poast} />;
setModal(modal);
}
@@ -138,13 +141,17 @@ function Footer({ poast, refetch }: PostProps) {
<span role="link" onMouseUp={showReplyCount} className="reply-count">
{displayCount(childrenCount)}
</span>
- <Icon name="reply" size={20} onClick={doReply} />
+ <div className="icon-wrapper" role="link" onMouseUp={doReply}>
+ <Icon name="reply" size={20} />
+ </div>
</div>
<div className="icon">
<span role="link" onMouseUp={showQuoteCount} className="quote-count">
{displayCount(poast.engagement.quoted.length)}
</span>
- <Icon name="quote" size={20} onClick={doQuote} />
+ <div className="icon-wrapper" role="link" onMouseUp={doQuote}>
+ <Icon name="quote" size={20} />
+ </div>
</div>
<div className="icon">
<span
@@ -157,15 +164,18 @@ function Footer({ poast, refetch }: PostProps) {
{reposting ? (
<p>...</p>
) : myRP ? (
- <Icon
- name="repost"
- size={20}
- className="my-rp"
- onClick={cancelRP}
- title="cancel repost"
- />
+ <div className="icon-wrapper" role="link" onMouseUp={cancelRP}>
+ <Icon
+ name="repost"
+ size={20}
+ className="my-rp"
+ title="cancel repost"
+ />
+ </div>
) : (
- <Icon name="repost" size={20} onClick={sendRP} title="repost" />
+ <div className="icon-wrapper" role="link" onMouseUp={sendRP}>
+ <Icon name="repost" size={20} title="repost" />
+ </div>
)}
</div>
<div className="icon" role="link" onMouseUp={doReact}>
diff --git a/front/src/components/post/Loader.tsx b/front/src/components/post/Loader.tsx
index a23bea1..e45e01a 100644
--- a/front/src/components/post/Loader.tsx
+++ b/front/src/components/post/Loader.tsx
@@ -2,23 +2,30 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
import spinner from "@/assets/triangles.svg";
import { useEffect, useRef, useState } from "react";
import useLocalState from "@/state/state";
-import type { PostID } from "@/types/trill";
+import type { FullNode, PostID } from "@/types/trill";
import type { Ship } from "@/types/urbit";
+import type { AsyncRes } from "@/types/ui";
+import { toFlat } from "@/logic/trill/helpers";
-function PostData(props: {
+type Props = {
host: Ship;
id: PostID;
+ nest?: number; // nested quotes
rter?: Ship;
rtat?: number;
rtid?: PostID;
- nest?: number; // nested quotes
className?: string;
-}) {
- const { api } = useLocalState((s) => ({ api: s.api }));
+};
+function PostData(props: Props) {
+ const { api } = useLocalState((s) => ({
+ api: s.api,
+ }));
+
const { host, id, nest } = props;
- const [enest, setEnest] = useState(nest);
+
+ const [enest, setEnest] = useState(nest || 0);
useEffect(() => {
- setEnest(nest);
+ if (nest) setEnest(nest);
}, [nest]);
return function (Component: React.ElementType) {
@@ -39,61 +46,52 @@ function PostData(props: {
dataRef.current = data;
}, [data]);
- async function fetchNode(): Promise<any> {
- const res = await api!.scryPost(host, id, null, null);
- if ("fpost" in res) return res;
+ async function fetchNode(): AsyncRes<FullNode> {
+ let error = "";
+ const res = await api!.scryThread(host, id);
+ console.log("scry res", res);
+ if ("error" in res) error = res.error;
+ if ("ok" in res) return res;
else {
- const existing = queryClient.getQueryData(["trill-thread", host, id]);
- const existingData = existing || data;
- if ("bugen" in res) {
- // we peek for the actual node
- peekTheNode();
- // if we have a cache we don't invalidate it
- if (existingData && "fpost" in existingData) return existingData;
- // if we don't have a cache then we show the loading screen
- else return res;
- }
- if ("no-node" in res) {
- if (existingData && "fpost" in existingData) return existingData;
- else return res;
- }
+ const res2 = await api!.peekThread(host, id);
+ return res2;
}
}
- function peekTheNode() {
- let timer;
- peekNode({ ship: host, id });
- timer = setTimeout(() => {
- const gotPost = dataRef.current && "fpost" in dataRef.current;
- setDead(!gotPost);
- // clearTimeout(timer);
- }, 10_000);
+ async function peekTheNode() {
+ // let timer;
+ // peekNode({ ship: host, id });
+ // timer = setTimeout(() => {
+ // const gotPost = dataRef.current && "fpost" in dataRef.current;
+ // setDead(!gotPost);
+ // // clearTimeout(timer);
+ // }, 10_000);
}
- useEffect(() => {
- const path = `${host}/${id}`;
- if (path in peekedPosts) {
- queryClient.setQueryData(["trill-thread", host, id], {
- fpost: peekedPosts[path],
- });
- } else if (path in deniedPosts) {
- setDenied(true);
- }
- }, [peekedPosts]);
- useEffect(() => {
- const path = `${host}/${id}`;
- if (path in deniedPosts) setDenied(true);
- }, [deniedPosts]);
+ // useEffect(() => {
+ // const path = `${host}/${id}`;
+ // if (path in peekedPosts) {
+ // queryClient.setQueryData(["trill-thread", host, id], {
+ // fpost: peekedPosts[path],
+ // });
+ // } else if (path in deniedPosts) {
+ // setDenied(true);
+ // }
+ // }, [peekedPosts]);
+ // useEffect(() => {
+ // const path = `${host}/${id}`;
+ // if (path in deniedPosts) setDenied(true);
+ // }, [deniedPosts]);
- useEffect(() => {
- const l = lastThread;
- if (l && l.thread == id) {
- queryClient.setQueryData(["trill-thread", host, id], { fpost: l });
- }
- }, [lastThread]);
+ // useEffect(() => {
+ // const l = lastThread;
+ // if (l && l.thread == id) {
+ // queryClient.setQueryData(["trill-thread", host, id], { fpost: l });
+ // }
+ // }, [lastThread]);
function retryPeek(e: React.MouseEvent) {
- e.stopPropagation();
- setDead(false);
- peekTheNode();
+ // e.stopPropagation();
+ // setDead(false);
+ // peekTheNode();
}
if (enest > 3)
return (
@@ -122,24 +120,14 @@ function PostData(props: {
{host} denied you access to this post
</p>
</div>
- ) : "no-node" in data || "bucun" in data ? (
+ ) : "error" in data ? (
<div className={props.className}>
<p className="x-center not-found">Post not found</p>
- </div>
- ) : "bugen" in data ? (
- <div className={props.className}>
- <div className="x-center not-found">
- <p className="x-center">Post not found, requesting...</p>
- <img src={spinner} className="x-center s-100" alt="" />
- </div>
- </div>
- ) : "fpost" in data && data.fpost.contents === null ? (
- <div className={props.className}>
- <p className="x-center not-found">Post deleted</p>
+ <p className="x-center not-found">{data.error}</p>
</div>
) : (
<Component
- data={data.fpost}
+ data={toFlat(data.ok)}
refetch={refetch}
{...props}
nest={enest}
diff --git a/front/src/components/post/Reactions.tsx b/front/src/components/post/Reactions.tsx
index ee40d26..ae75d8c 100644
--- a/front/src/components/post/Reactions.tsx
+++ b/front/src/components/post/Reactions.tsx
@@ -20,7 +20,7 @@ import Modal from "../modals/Modal";
import useLocalState from "@/state/state";
export function ReactModal({ send }: { send: (s: string) => Promise<number> }) {
- const { setModal } = useLocalState();
+ const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
async function sendReact(e: React.MouseEvent, s: string) {
e.stopPropagation();
const res = await send(s);
@@ -115,7 +115,7 @@ export function TrillReactModal({ poast }: { poast: Poast }) {
addNotification: s.addNotification,
}));
const our = api!.airlock.our!;
-
+
async function sendReact(s: string) {
const result = await api!.addReact(poast.host, poast.id, s);
// Only add notification if reacting to someone else's post
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-25 23:04:28 +0000