1 files changed, 25 insertions, 13 deletions

diff --git a/src/ui.js b/src/ui.js
index 8e20e4d..ce707b7 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1,3 +1,5 @@
+import { render, h, Fragment } from 'preact';
+import { useRef, useLayoutEffect } from 'preact/hooks';
 import ColorHash from 'color-hash';
 import { formatRelative } from 'date-fns';
 import * as dom from './dom';
@@ -53,7 +55,7 @@ section {
   border-radius: 0.4em;
 }
 
-section.tombstone {
+section.type-Tombstone {
   color: var(--theme-note-bg);
   background: var(--theme-note-fg);
 }
@@ -127,23 +129,38 @@ section.collapsed > main {
 `;
 
 const colors = new ColorHash({ lightness: 0.8 });
-export const Note = ({ id, type, attributedTo, published, content, smallHeader = false, onHide }) => {
+export const Note = ({
+  id, type, attributedTo, published, content,
+  smallHeader = false, position,
+  onHide, onSize,
+}) => {
   const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
   const username = attributedTo.name || attributedTo.preferredUsername;
 
+  const root = useRef(null);
+	useLayoutEffect(() => {
+		onSize(id, root.current.offsetWidth, root.current.offsetHeight);
+	});
+
   return (
     <section
-      css={{ '--theme-header-bg': backgroundColor }}
-      class={type === 'Tombstone' ? 'tombstone' : ''}
-      dataset={{ id }}
+      style={{
+        '--theme-header-bg': backgroundColor,
+        'left': position && `${position[0] - root.current.offsetWidth / 2}px`,
+        'top': position && `${position[1] - root.current.offsetHeight / 2}px`,
+        'visibility': position ? 'visible' : 'hidden',
+      }}
+      className={`type-${type}`}
+      data-id={id}
+      ref={root}
     >
       {smallHeader
-        ? <header class="small" onClick={onHide} />
+        ? <header className="small" onClick={onHide} />
         : <header onClick={onHide}>
             <img src={new URL(attributedTo.icon.url, attributedTo.id)} />
-            <span class="user">{username}</span>
+            <span className="user">{username}</span>
             <Space />
-            <span class="time"><Time time={published} /></span>
+            <span className="time"><Time time={published} /></span>
           </header>
       }
       <main>
@@ -152,8 +169,3 @@ export const Note = ({ id, type, attributedTo, published, content, smallHeader =
     </section>
   );
 };
-
-export const updateColor = (note, { attributedTo }) => {
-  const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
-  note.style.setProperty('--theme-header-bg', backgroundColor);
-};