0 ? Math.round((stage.loaded / stage.total) * 100) : 0}%`,
- }}
+ {stage.kind === "done" && (
+ <>
+
+
+
-
- {formatSize(stage.loaded)} / {formatSize(stage.total)}
-
-
- )}
-
- {stage.kind === "done" && (
- <>
-
-
-
+
+
+ Ready to share
+
+
+ {stage.fileName}
+
+
+ Expires {new Date(stage.expiresAt).toLocaleDateString()} · one download
-
Ready to share
-
- {stage.fileName}
-
-
-
- {stage.shareUrl}
-
-
- Expires {new Date(stage.expiresAt).toLocaleDateString()}. One download by default —
- anyone who has the link can fetch it once.
-
-
-
- )}
+
- {stage.kind === "error" && (
- <>
-
Failed
-
- Could not complete the transfer
-
-
{stage.message}
-
-
- )}
-
+
+
+
+ {stage.shareUrl}
+
+
+ {stage.password && (
+
+
+ Password (share separately)
+
+
+ {stage.password}
+
+
+
+ )}
+
+
+
+ )}
+
+ {stage.kind === "error" && (
+ <>
+
Failed
+
+ Could not complete the transfer
+
+
{stage.message}
+
+
+ )}
);
}
+
+const inputCls =
+ "w-full px-3 py-2 bg-paper border border-paper-edge rounded-sm text-ink text-sm " +
+ "placeholder:text-ink-faint focus:outline-none focus:border-ink transition-colors " +
+ "duration-fast ease-crisp";
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+ return (
+
+ );
+}
diff --git a/web/src/components/Composer.tsx b/web/src/components/Composer.tsx
new file mode 100644
index 0000000..f61d0e1
--- /dev/null
+++ b/web/src/components/Composer.tsx
@@ -0,0 +1,105 @@
+import { useState } from "react";
+import DropZone from "./DropZone";
+
+interface ComposerProps {
+ recipientLabel: string;
+ onSendFiles: (files: File[]) => void;
+ onSendText: (text: string) => void;
+ onCancel: () => void;
+}
+
+function formatSize(bytes: number): string {
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+ return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+export default function Composer({
+ recipientLabel,
+ onSendFiles,
+ onSendText,
+ onCancel,
+}: ComposerProps) {
+ const [files, setFiles] = useState
([]);
+ const [text, setText] = useState("");
+
+ const hasContent = files.length > 0 || text.trim().length > 0;
+
+ const handleSend = () => {
+ if (files.length > 0) onSendFiles(files);
+ if (text.trim().length > 0) onSendText(text.trim());
+ setFiles([]);
+ setText("");
+ };
+
+ return (
+
+
+
+
+ Send to
+
+
+ {recipientLabel}
+
+
+
+
+
+ {files.length === 0 ? (
+
setFiles(f)} />
+ ) : (
+
+
+
+ {files.length} file{files.length > 1 ? "s" : ""}
+
+
+
+
+ {files.map((f, i) => (
+ -
+ {f.name}
+
+ {formatSize(f.size)}
+
+
+ ))}
+
+