Split out the AppBar

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

@@ -0,0 +1,38 @@
+import { defineElement as el } from '../../utils/domvm.js';
+import { prop, computed, bundle } from 'frptools';
+import { injectStyle, styled } from '../../services/style.js';
+
+export function AppBarView(vm, params, key, opts) {
+	if (opts.appbar) {
+		throw new Error('Cannot have more than one AppBar.');
+	}
+
+	const title = prop(params.title);
+	const renderButtons = prop(params.renderButtons);
+
+	return (vm, params) => {
+		const { title } = params;
+		return header([
+			el('div', { style: 'font-size: 20pt' }, title),
+			headerRight(
+				{
+					css: { visibility: /* selectMode */ true ? 'visible' : 'hidden' }
+				},
+				renderButtons()()
+			)
+		]);
+	};
+}
+
+const header = styled({
+	justifyContent: 'space-between',
+	padding: '1em',
+	zIndex: 1,
+	display: 'flex',
+	alignItems: 'center'
+});
+
+const headerRight = styled({
+	display: 'flex',
+	alignItems: 'center'
+});

packages/gallery/src/interface/gallery.js

@@ -7,6 +7,7 @@ import { ThumbnailTemplate } from './thumbnail.js';
 import { AlbumView } from './album.js';
 import { Dropzone } from './components/dropzone.js';
 import { Overlay } from './components/overlay.js';
+import { AppBarView } from './components/appbar.js';
 import { Icon } from './components/icon.js';
 import { router, routeChanged } from '../services/router.js';
 import { injectStyle, styled } from '../services/style.js';
@@ -30,6 +31,7 @@ export function GalleryView(vm) {
 
 	let data = null;
 	let laCleanup = null;
+	const context = {};
 	const title = prop('');
 
 	function uploadImages(evt, files) {
@@ -86,33 +88,41 @@ export function GalleryView(vm) {
 		];
 	}
 
+	function renderAppBarButtons() {
+		return [
+			el('button', [el('label', { for: 'uploadButton' }, 'Upload')]),
+			el('input', {
+				id: 'uploadButton',
+				name: 'uploadButton',
+				type: 'file',
+				multiple: true,
+				accept: '.png,.jpg,.jpeg', // no love for gifs yet
+				onchange: uploadImages,
+				class: injectStyle({ display: 'none' })
+			})
+		];
+	}
+
 	function renderMain() {
 		return [
-			header([
-				el('div', { style: 'font-size: 20pt' }, 'Gallery'),
-				headerRight(
-					{
-						css: { visibility: /* selectMode */ true ? 'visible' : 'hidden' }
-					},
-					[
-						el('button', [el('label', { for: 'uploadButton' }, 'Upload')]),
-						el('input', {
-							id: 'uploadButton',
-							name: 'uploadButton',
-							type: 'file',
-							multiple: true,
-							accept: '.png,.jpg,.jpeg', // no love for gifs yet
-							onchange: uploadImages,
-							class: injectStyle({ display: 'none' })
-						})
-					]
-				)
-			]),
-			...(data().length
-				? data().map(i => {
-						return ThumbnailTemplate(i, deleteImage, i._hash());
-				  })
-				: [renderWelcomePane()])
+			vw(
+				AppBarView,
+				{
+					title: 'Photos',
+					renderButtons: renderAppBarButtons
+				},
+				'appbar',
+				context
+			),
+			el(
+				'div',
+				{ class: fill },
+				data().length
+					? data().map(i => {
+							return ThumbnailTemplate(i, deleteImage, i._hash());
+					  })
+					: [renderWelcomePane()]
+			)
 		];
 	}
 
@@ -137,19 +147,6 @@ export function GalleryView(vm) {
 	};
 }
 
-const header = styled({
-	justifyContent: 'space-between',
-	padding: '1em',
-	zIndex: 1,
-	display: 'flex',
-	alignItems: 'center'
-});
-
-const headerRight = styled({
-	display: 'flex',
-	alignItems: 'center'
-});
-
 const fill = injectStyle({
 	display: 'flex',
 	flex: 1,