Breakout album rendering to a separate file so albums can use it too

packages/gallery/src/interface/allImages.js

@@ -5,6 +5,7 @@ import { subscribeToRender, defineView, defineElement as el } from '../utils/dom
 import { ImageType } from '../data/image.js';
 import { pouchDocArrayHash, pouchDocHash } from '../utils/conversion.js';
 import { ThumbnailTemplate } from './components/thumbnail.js';
+import { AlbumTemplate } from './components/albumTemplate.js';
 import { injectStyle, styled } from '../services/style.js';
 
 export function uploadImages(evt, files) {
@@ -60,8 +61,10 @@ export function AllImagesView(vm, params, key, opts) {
 	}
 
 	return function() {
-		const album = model();
-
-		return el('div', images().map(i => ThumbnailTemplate(i, deleteImage, i._hash())));
+		return AlbumTemplate({
+			title: 'Test',
+			id: 1,
+			photos: []
+		});
 	};
 }

packages/gallery/src/interface/components/albumTemplate.js

@@ -0,0 +1,57 @@
+import { defineView as vw, defineElement as el } from '../../utils/domvm.js';
+import { injectStyle, styled } from '../../services/style.js';
+
+import { Icon } from './icon.js';
+import { AttachmentImageView } from './attachmentImage.js';
+
+function setRefStyle(ref, style, evt, node, vm) {
+	vm.refs[ref].patch({ style });
+}
+
+export function AlbumTemplate(params) {
+	const { id, title, photos } = params;
+
+	return Album(
+		{
+			onmouseenter: [setRefStyle, 'selectButton', 'opacity: 0.7;'],
+			onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0;']
+		},
+		[
+			albumTitle([
+				title,
+				albumSelectButton(
+					{
+						_ref: 'selectButton',
+						onmouseenter: [setRefStyle, 'selectButton', 'opacity: 1;'],
+						onmouseleave: [setRefStyle, 'selectButton', 'opacity: 0.7;']
+					},
+					[Icon({ name: 'check_circle', size: 0.25 })]
+				)
+			]),
+			albumContent()
+		]
+	);
+}
+
+const Album = styled({
+	margin: '10px'
+});
+
+const albumTitle = styled({
+	display: 'flex',
+	alignItems: 'center'
+});
+
+const albumContent = styled({
+	display: 'flex',
+	alignItems: 'flex-start',
+	userSelect: 'none'
+});
+
+const albumSelectButton = styled({
+	paddingLeft: '0.5em',
+	cursor: 'pointer',
+	opacity: 0, // TODO onhover 0.7
+	transition:
+		'transform 0.135s cubic-bezier(0, 0, 0.2, 1), opacity 0.135s cubic-bezier(0, 0, 0.2, 1)'
+});