feat: add post / upload status

src/components/PostDialog.tsx

···
-import { Component, createSignal, Signal } from "solid-js";
+import { createSignal, Signal } from "solid-js";
 
 import { CaptionsIcon, SendIcon, XIcon } from "lucide-solid";
-import { Stack } from "styled-system/jsx";
+import { HStack, Stack, VStack } from "styled-system/jsx";
 import { IconButton } from "~/components/ui/icon-button";
 import { Spinner } from "~/components/ui/spinner";
 import { Text } from "~/components/ui/text";
···
 
 import { parseCanonicalResourceUri } from "@atcute/lexicons/syntax";
 import { css } from "styled-system/css";
-import { sendPost } from "~/lib/at";
+import { sendPost, UploadStatus } from "~/lib/at";
 import { toaster } from "~/components/Toaster";
 import { Dialog } from "~/components/ui/dialog";
 import { Textarea } from "~/components/ui/textarea";
 import { Account } from "~/lib/accounts";
 import { Popover } from "./ui/popover";
+import { Progress } from "./ui/progress";
 
 const PostDialog = (props: {
   result: Blob;
···
     props.initialAltText ?? "",
   );
   const [posting, setPosting] = createSignal(false);
+  const [uploadStatus, setUploadStatus] = createSignal<UploadStatus | null>(
+    null,
+  );
   const [open, setOpen] = props.openSignal;
 
+  const getStatusMessage = () => {
+    const status = uploadStatus();
+    if (!status) return "";
+
+    switch (status.stage) {
+      case "auth":
+        return "authenticating...";
+      case "uploading":
+        return "uploading video...";
+      case "processing":
+        return status.progress
+          ? `processing video... ${Math.round(status.progress)}%`
+          : "processing video...";
+      case "posting":
+        return "creating post...";
+      case "complete":
+        return "complete!";
+      default:
+        return "";
+    }
+  };
+
+  const getProgressValue = () => {
+    const status = uploadStatus();
+    if (!status) return 0;
+
+    switch (status.stage) {
+      case "auth":
+        return 5;
+      case "uploading":
+        return 10;
+      case "processing":
+        return status.progress ? 10 + status.progress * 0.6 : 40;
+      case "posting":
+        return 90;
+      case "complete":
+        return 100;
+      default:
+        return 0;
+    }
+  };
+
   return (
     <Dialog.Root open={open()} onOpenChange={(e) => setOpen(e.open)}>
       <Dialog.Backdrop />
···
                 border="none"
                 borderTop="1px solid var(--colors-border-muted)"
                 boxShadow={{ base: "none", _focus: "none" }}
+                disabled={posting()}
               />
             </Stack>
             <Stack
···
                       {...triggerProps()}
                       variant={altText() ? "solid" : "ghost"}
                       size="sm"
+                      disabled={posting()}
                     >
                       <CaptionsIcon />
                     </IconButton>
···
                 disabled={posting()}
                 onClick={() => {
                   setPosting(true);
+                  setUploadStatus(null);
                   sendPost(
                     props.account?.did!,
                     props.result,
                     postContent(),
                     altText(),
+                    (status) => setUploadStatus(status),
                   )
                     .then((result) => {
                       const parsedUri = parseCanonicalResourceUri(result.uri);
···
                       toaster.create({
                         title: "post sent",
                         description: (
-                          <>
-                            <Text>view post </Text>
+                          <HStack gap="1">
+                            <Text>view post</Text>
                             <Link
                               href={`https://bsky.app/profile/${repo}/post/${rkey}`}
                               color={{
···
                             >
                               here
                             </Link>
-                          </>
+                          </HStack>
                         ),
                         type: "success",
                       });
···
                     })
                     .finally(() => {
                       setPosting(false);
+                      setUploadStatus(null);
                     });
                 }}
                 variant="ghost"
···
                 <SendIcon />
               </IconButton>
             </Stack>
+            {posting() && uploadStatus() && (
+              <VStack
+                gap="2"
+                p="2"
+                borderTop="1px solid var(--colors-border-muted)"
+              >
+                <Text fontSize="sm" color="fg.muted">
+                  {getStatusMessage()}
+                </Text>
+                <Progress
+                  value={getProgressValue()}
+                  max={100}
+                  colorPalette="blue"
+                />
+              </VStack>
+            )}
           </Stack>
         </Dialog.Content>
       </Dialog.Positioner>

src/index.tsx

···
 import { toaster } from "./components/Toaster";
 import { autoTranscribe } from "./lib/settings";
 import { preloadModel } from "./lib/transcribe";
+import { Text } from "~/components/ui/text";
+import { Link } from "~/components/ui/link";
+import { HStack } from "styled-system/jsx";
 
 const root = document.getElementById("root");
 

src/lib/at.ts

···
   };
 };
 
+export type UploadStatus = {
+  stage: "auth" | "uploading" | "processing" | "posting" | "complete";
+  progress?: number;
+};
+
 export const sendPost = async (
   did: AtprotoDid,
   blob: Blob,
   postContent: string,
   altText?: string,
+  onStatus?: (status: UploadStatus) => void,
 ) => {
   const login = await getSessionClient(did);
 
+  onStatus?.({ stage: "auth" });
   const serviceAuthUrl = new URL(
     `${login.pds}/xrpc/com.atproto.server.getServiceAuth`,
   );
···
   const serviceAuth = await serviceAuthResponse.json();
   const token = serviceAuth.token;
 
+  onStatus?.({ stage: "uploading" });
   const uploadUrl = new URL(
     "https://video.bsky.app/xrpc/app.bsky.video.uploadVideo",
   );
···
   const jobStatus = await uploadResponse.json();
   let videoBlobRef = jobStatus.blob;
 
+  onStatus?.({ stage: "processing" });
   while (!videoBlobRef) {
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
···
 
     if (!statusResponse.ok) {
       const error = await statusResponse.json();
+      // reuse blob
       if (error.error === "already_exists" && error.blob) {
         videoBlobRef = error.blob;
         break;
···
       videoBlobRef = status.jobStatus.blob;
     } else if (status.jobStatus.state === "JOB_STATE_FAILED") {
       throw `video processing failed: ${status.jobStatus.error || "unknown error"}`;
+    } else if (status.jobStatus.progress !== undefined) {
+      onStatus?.({
+        stage: "processing",
+        progress: status.jobStatus.progress,
+      });
     }
   }
 
+  onStatus?.({ stage: "posting" });
   const record: AppBskyFeedPost.Main = {
     $type: "app.bsky.feed.post",
     text: postContent,
···
   });
 
   if (!result.ok) throw `failed to upload post: ${result.data.error}`;
+
+  onStatus?.({ stage: "complete" });
   return result.data;
 };