Attachment.tsx

src/components/Attachment.tsx

1. import { useEffect, useState } from 'react'
3. import type { AttachmentMeta } from '../ipc/gen/AttachmentMeta'
4. import { useStore } from '../state/store'
6. /** An image's bytes come from Rust as an ArrayBuffer and become a Blob URL. */
7. export function useAttachmentUrl(a: AttachmentMeta) {
8. const client = useStore((s) => s.client)
9. const [url, setUrl] = useState<string | null>(null)
10. useEffect(() => {
11. if (a.kind !== 'image' || !client) return
12. let revoked = false
13. let made: string | null = null
14. client.attachmentBytes(a.id).then((buf) => {
15. if (revoked) return
16. made = URL.createObjectURL(new Blob([buf], { type: a.mime }))
17. setUrl(made)
18. })
19. return () => {
20. revoked = true
21. if (made) URL.revokeObjectURL(made)
22. }
23. }, [a.id, a.kind, a.mime, client])
24. return url
25. }
27. export function AttachmentChip({ a, onRemove }: { a: AttachmentMeta; onRemove?: () => void }) {
28. const url = useAttachmentUrl(a)
29. return (
30. <div className={`chip ${a.kind}`} title={a.filename}>
31. {a.kind === 'image' ? (
32. url ? (
33. <img src={url} alt="" />
34. ) : (
35. <span className="chip-thumb" />
36. )
37. ) : (
38. <span className="chip-icon" aria-hidden>
39. TXT
40. </span>
41. )}
42. <span className="chip-name">{a.filename}</span>
43. {onRemove && (
44. <button className="chip-x" onClick={onRemove} aria-label={`Remove ${a.filename}`}>
45. ×
46. </button>
47. )}
48. </div>
49. )
50. }
52. export function AttachmentImage({ a }: { a: AttachmentMeta }) {
53. const url = useAttachmentUrl(a)
54. const ratio = a.width && a.height ? `${a.width} / ${a.height}` : '4 / 3'
55. return (
56. <figure className="msg-image" style={{ aspectRatio: ratio }}>
57. {url && <img src={url} alt={a.filename} />}
58. </figure>
59. )
60. }