1 files changed, 90 insertions, 0 deletions
diff --git a/src/ui/Selection.js b/src/ui/Selection.js
new file mode 100644
index 0000000..d6e62ab
--- /dev/null
+++ b/src/ui/Selection.js
@@ -0,0 +1,90 @@
+import { h } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import cn from 'classnames';
+import css from './css';
+import { Note } from './Note';
+
+css`
+.drawer {
+	background: var(--theme-note-fg);
+
+	flex: 0 0 auto;
+
+	/* wtf webkit */
+  -webkit-backface-visibility: hidden;
+}
+
+.drawer .handle {
+	height: 2rem;
+	margin-bottom: 1rem;
+}
+
+.drawer .handle button {
+	display: block;
+
+	height: 2rem;
+	line-height: 2rem;
+	margin: -1rem auto 0;
+	padding: 0.25rem;
+	background: var(--theme-note-bg);
+	border-radius: 0.4rem;
+}
+
+.drawer .scroller {
+	display: flex;
+	overflow: auto;
+	width: 100%;
+
+	transition: max-height 0.3s;
+}
+
+.drawer .contents {
+	display: flex;
+
+	align-items: flex-start;
+
+	gap: 1rem;
+	padding: 0 2rem;
+}
+
+.drawer .contents > * {
+	flex: 0 0 auto;
+}
+`;
+
+export const Drawer = ({ height, children }) => {
+	const [ hidden, setHidden ] = useState(true);
+
+	return (
+		<div class="drawer">
+			<div class="handle">
+				<button onClick={() => setHidden(!hidden)}>
+					###
+				</button>
+			</div>
+			<div
+				class="scroller"
+				style={{
+					height,
+					'max-height': hidden ? '0' : height,
+				}}
+			>
+				<div class="contents">
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const Selection = ({ items, toggleSelected }) => (
+	<Drawer height="12rem" style={{ }} >
+		{items.map((item) => (
+			<Note
+				{...item}
+				ellipsis
+				onSelect={toggleSelected}
+			/>
+		))}
+	</Drawer>
+);