reimplement collapsing

1 files changed, 10 insertions, 4 deletions

diff --git a/src/ui/Note.js b/src/ui/Note.js
index b7387a8..36691d4 100644
--- a/src/ui/Note.js
+++ b/src/ui/Note.js
@@ -2,6 +2,7 @@ import { render, h, Fragment } from 'preact';
 import { useRef, useLayoutEffect } from 'preact/hooks';
 import ColorHash from 'color-hash';
 import { formatRelative } from 'date-fns';
+import cn from 'classnames';
 import css from './css';
 
 const now = new Date();
@@ -121,7 +122,7 @@ section.collapsed > main {
 const colors = new ColorHash({ lightness: 0.8 });
 export const Note = ({
 	id, type, attributedTo, published, content,
-	smallHeader = false, position,
+	smallHeader = false, collapsed = false, position,
 	onHide, onSize,
 }) => {
 	const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
@@ -131,6 +132,11 @@ export const Note = ({
 		onSize(id, root.current.offsetWidth, root.current.offsetHeight);
 	});
 
+	const onClickHeader = (e) => {
+		e.preventDefault();
+		onHide(id);
+	};
+
 	return (
 		<section
 			style={{
@@ -139,13 +145,13 @@ export const Note = ({
 				'top': position && `${position[1] - root.current.offsetHeight / 2}px`,
 				'visibility': position ? 'visible' : 'hidden',
 			}}
-			className={`type-${type}`}
+			class={cn(`type-${type}`, collapsed && 'collapsed')}
 			data-id={id}
 			ref={root}
 		>
 			{smallHeader
-				? <header className="small" onClick={onHide} />
-				: <Header onClick={onHide} user={attributedTo} published={published} />
+				? <header className="small" onClick={onClickHeader} />
+				: <Header onClick={onClickHeader} user={attributedTo} published={published} />
 			}
 			<main>
 				{content}