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,15 +88,8 @@ export function GalleryView(vm) {
 		];
 	}
 
-	function renderMain() {
+	function renderAppBarButtons() {
 		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',
@@ -105,14 +100,29 @@ export function GalleryView(vm) {
 				onchange: uploadImages,
 				class: injectStyle({ display: 'none' })
 			})
-					]
-				)
-			]),
-			...(data().length
+		];
+	}
+
+	function renderMain() {
+		return [
+			vw(
+				AppBarView,
+				{
+					title: 'Photos',
+					renderButtons: renderAppBarButtons
+				},
+				'appbar',
+				context
+			),
+			el(
+				'div',
+				{ class: fill },
+				data().length
 					? data().map(i => {
 							return ThumbnailTemplate(i, deleteImage, i._hash());
 					  })
-				: [renderWelcomePane()])
+					: [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,