Make appbar state poppable with the back arrow

packages/gallery/src/interface/allImages.js

@@ -136,9 +136,11 @@ export function AllImagesView(vm, params, key, { appbar }) {
 				la.subscribe(res => images.splice(0, images.length, ...res)),
 				appbar.subscribe(({ newState, oldState }) => {
 					appbarState(newState);
+					if (!newState.selectMode && hasSelectedIDs()) {
+						selectedIds.clear();
+					}
 				}),
 				hasSelectedIDs.subscribe(selected => {
-					console.log('hasSelectedIDs subscription');
 					if (selected && !selectMode()) {
 						pushAppBarState();
 					} else if (!selected && appbarState().selectMode) {

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

@@ -17,10 +17,7 @@ export function AppBarView(vm, params, key, opts) {
 	const title = computed(state => state.title || '', [currentState]);
 	const renderButtons = computed(state => state.buttons, [currentState]);
 	const hasBackButton = computed(stack => stack.length > 1, [stateStack]);
-	const stateChange = computed((c, p) => ({ newState: c, oldState: p }), [
+	const stateChange = computed(c => ({ newState: c, oldState: previousState() }), [currentState]);
-		currentState,
-		previousState
-	]);
 
 	const boxShadowStyle = computed(
 		t => (t === 0 ? 'none' : `0px ${Math.min(t / 10, 3)}px 3px rgba(0, 0, 0, .2)`),
@@ -32,15 +29,13 @@ export function AppBarView(vm, params, key, opts) {
 	}
 
 	function pushState(newState) {
-		const oldState = currentState() || {};
+		previousState(currentState());
 		stateStack.unshift(Object.assign({ _seq: seq++ }, newState));
-		previousState(oldState);
 	}
 
 	function popState() {
-		const oldState = currentState();
+		previousState(currentState());
 		stateStack.shift();
-		previousState(oldState);
 	}
 
 	opts.appbar = {
@@ -61,15 +56,20 @@ export function AppBarView(vm, params, key, opts) {
 			},
 			[
 				hasBackButton()
-					? backButtonContainer([
+					? backButtonContainer(
-							Icon({
+							{
-								name: 'arrow_left',
+								onclick: popState
-								size: 0.75,
+							},
-								attrs: {
+							[
-									onclick: popState
+								Icon({
-								}
+									name: 'arrow_left',
-							})
+									size: 0.75,
-					  ])
+									attrs: {
+										onclick: popState
+									}
+								})
+							]
+					  )
 					: null,
 				titleContainer(title()),
 				headerRight(_buttons())