2 files changed, 129 insertions, 0 deletions
diff --git a/front/src/components/composer/Composer.tsx b/front/src/components/composer/Composer.tsx
new file mode 100644
index 0000000..795188e
--- /dev/null
+++ b/front/src/components/composer/Composer.tsx
@@ -0,0 +1,67 @@
+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 Snippets, { ReplySnippet } from "./Snippets";
+import toast from "react-hot-toast";
+import { useLocation } from "wouter";
+
+function Composer({
+  isAnon,
+  replying,
+}: {
+  isAnon?: boolean;
+  replying?: Poast;
+}) {
+  const [loc, navigate] = useLocation();
+  const { api, composerData } = useLocalState();
+  const our = api!.airlock.our!;
+  const [input, setInput] = useState(replying ? `${replying}: ` : "");
+  async function poast(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    // TODO
+    // const parent = replying ? replying : null;
+    // const tokens = tokenize(input);
+    // const post: SentPoast = {
+    //   host: parent ? parent.host : our,
+    //   author: our,
+    //   thread: parent ? parent.thread : null,
+    //   parent: parent ? parent.id : null,
+    //   contents: input,
+    //   read: openLock,
+    //   write: openLock,
+    //   tags: input.match(HASHTAGS_REGEX) || [],
+    // };
+    // TODO make it user choosable
+    const res = await api!.addPost(input);
+    if (res) {
+      setInput("");
+      toast.success("post sent");
+      navigate(`/feed/${our}`);
+    }
+  }
+  const placeHolder = isAnon ? "> be me" : "What's going on in Urbit";
+  return (
+    <form id="composer" onSubmit={poast}>
+      <div className="sigil">
+        <Sigil patp={our} size={48} />
+      </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>
+    </form>
+  );
+}
+
+export default Composer;
diff --git a/front/src/components/composer/Snippets.tsx b/front/src/components/composer/Snippets.tsx
new file mode 100644
index 0000000..30498d0
--- /dev/null
+++ b/front/src/components/composer/Snippets.tsx
@@ -0,0 +1,62 @@
+import Quote from "@/components/post/Quote";
+import type { ComposerData, SPID } from "@/types/ui";
+import { NostrSnippet } from "../post/wrappers/Nostr";
+
+export default Snippets;
+function Snippets({ post }: { post: SPID }) {
+  return (
+    <ComposerSnippet>
+      <PostSnippet post={post} />
+    </ComposerSnippet>
+  );
+}
+
+export function ComposerSnippet({
+  onClick,
+  children,
+}: {
+  onClick?: any;
+  children: any;
+}) {
+  function onc(e: React.MouseEvent) {
+    e.stopPropagation();
+    onClick();
+  }
+  return (
+    <div className="composer-snippet">
+      <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 <></>;
+}
+
+export function ReplySnippet({ post }: { post: SPID }) {
+  if ("trill" in post)
+    return (
+      <div id="reply">
+        <Quote data={post.trill} nest={0} />
+      </div>
+    );
+  else return <div />;
+}