1 files changed, 107 insertions, 41 deletions

diff --git a/src/ui/Note.js b/src/ui/Note.js
index 6bdec04..404979c 100644
--- a/src/ui/Note.js
+++ b/src/ui/Note.js
@@ -17,44 +17,59 @@ css`
 	margin: 0;
 }
 `;
-const Space = () => <div class="flex-space" />;
+const Space = (props) => <div class="flex-space" {...props} />;
 
 css`
 section > header {
 	display: flex;
 	flex-direction: row;
 
-	height: 1.75rem;
+	height: 2.5rem;
 
 	color: var(--theme-header-fg);
 	background: var(--theme-header-bg);
-
-	cursor: pointer;
-	transition: opacity 0.3s;
-}
-
-section > header:hover {
-	opacity: 0.5;
 }
 
 section > header.small {
-	height: 0.5em;
+	height: 0.75rem;
 }
 
 section > header > * {
-	margin: 0 0.5em;
+	margin: 0 0.5rem;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	line-height: 1.75rem;
+	line-height: 2.5rem;
 }
 
-section > header > img {
-	height: 1.5rem;
-	width: 1.5rem;
-	flex: 0 0 1.5rem;
-	margin: 0.125rem;
-	border-radius: 0.2rem;
+section > header > .avatar {
+	height: 2rem;
+	width: 2rem;
+	flex: 0 0 auto;
+	margin: 0.25rem;
+	border-radius: 0.3rem;
+}
+section > header > .avatar img {
+	width: inherit;
+	height: inherit;
+}
+section > header > .collapse {
+	height: 1rem;
+	width: 1rem;
+	flex: 0 0 auto;
+	margin: 0.6rem 0.5rem;
+	border-radius: 0.3rem;
+	border: 0.05rem solid var(--theme-header-fg);
+
+	line-height: 0.8rem;
+	text-align: center;
+	text-decoration: none;
+	text-weight: bold;
+
+	transition: background 0.3s;
+}
+section > header > .collapse:hover {
+	background: var(--theme-note-bg);
 }
 
 section > header > .user {
@@ -67,30 +82,45 @@ section > header > .time {
 	color: #363636;
 }
 `;
-const Header = ({ user, published, onClick }) => {
+const Header = ({ id, user, published, collapsed, onCollapse }) => {
 	const username = user.name || user.preferredUsername;
 
+	const onClick = onCollapse && ((e) => {
+		e.preventDefault();
+		onCollapse(id);
+	});
+
 	return (
-		<header onClick={onClick}>
-			<img src={new URL(user.icon.url, user.id)} />
-			<span className="user">{username}</span>
+		<header>
+			<a class="avatar" href={user.id}>
+				<img src={new URL(user.icon.url, user.id)} />
+			</a>
+			<span class="user">{username}</span>
 			<Space />
-			<span className="time"><Time time={published} /></span>
+			<a class="time" href={id}>
+				<Time time={published} />
+			</a>
+			<a class="collapse" href="#" onClick={onClick}>
+				{collapsed ? '+' : '-'}
+			</a>
 		</header>
 	);
 };
 
 css`
 section {
-	position: absolute;
-	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 
-	width: 22em;
+	width: 22rem;
+
+	overflow: hidden;
 	color: var(--theme-note-fg);
 	background: var(--theme-note-bg);
 	box-shadow: rgba(0,0,0, 0.7) 2px 4px 5px;
 
-	border-radius: 0.4em;
+	border-radius: 0.4rem;
 }
 
 section.type-Tombstone {
@@ -99,7 +129,9 @@ section.type-Tombstone {
 }
 
 section > main {
-	padding: 1em;
+	position: relative;
+	padding: 0.75rem;
+	overflow: hidden;
 	font-family: serif;
 }
 
@@ -124,43 +156,77 @@ section.collapsed {
 section.collapsed > main {
 	display: none;
 }
+
+section.ellipsis > main {
+	max-height: 7em;
+}
+section.ellipsis > main::after {
+	position: absolute;
+	display: block;
+	content: '';
+
+	pointer-events: none;
+
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 1.25em;
+	background: linear-gradient(0deg, var(--theme-note-bg) 5%, var(--theme-note-bg-trans) 100%);
+}
+section.type-Tombstone.ellipsis > main::after {
+	background: linear-gradient(0deg, var(--theme-note-fg) 5%, var(--theme-note-fg-trans) 100%);
+}
 `;
 
 const colors = new ColorHash({ lightness: 0.8 });
 export const Note = ({
 	id, type, attributedTo, published, content,
-	smallHeader = false, collapsed = false, position,
-	onHide, onSize,
+	smallHeader = false, collapsed = false, ellipsis = false, position,
+	onCollapse, onSelect, onSize,
 }) => {
 	const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
 
+	const onClick = onSelect && ((e) => {
+		e.preventDefault();
+		onSelect(id);
+	});
+
 	const root = useRef(null);
-	useLayoutEffect(() => {
+	onSize && useLayoutEffect(() => {
 		onSize(id, root.current.offsetWidth, root.current.offsetHeight);
 	});
 
-	const onClickHeader = (e) => {
-		e.preventDefault();
-		onHide(id);
-	};
-
 	return (
 		<section
 			style={{
 				'--theme-header-bg': backgroundColor,
+				'position': position && 'absolute',
 				'left': position && `${position[0] - root.current.offsetWidth / 2}px`,
 				'top': position && `${position[1] - root.current.offsetHeight / 2}px`,
-				'visibility': position ? 'visible' : 'hidden',
+				'visibility': onSize && !position ? 'hidden' : 'visible',
 			}}
-			class={cn(`type-${type}`, collapsed && 'collapsed')}
+			class={cn(
+				`type-${type}`,
+				collapsed && 'collapsed',
+				ellipsis && 'ellipsis',
+			)}
 			data-id={id}
 			ref={root}
 		>
 			{smallHeader
-				? <header className="small" onClick={onClickHeader} />
-				: <Header onClick={onClickHeader} user={attributedTo} published={published} />
+				? <header className="small" onClick={onCollapse} />
+				: <Header
+						id={id}
+						user={attributedTo}
+						published={published}
+						collapsed={collapsed}
+						onCollapse={onCollapse}
+					/>
 			}
-			<main innerHTML={content} />
+			<main
+				innerHTML={content}
+				onClick={onClick}
+			/>
 		</section>
 	);
 };