Adds an app skeleton. Still needs some work.

src/components/app/index.tsx

@@ -0,0 +1,110 @@
+import { h, Component } from 'preact';
+import { updater, toggle, When } from '../../lib/util';
+import Fab from '../fab';
+import Header from '../header';
+// import Drawer from 'async!../drawer';
+import Home from '../home';
+import * as style from './style.scss';
+
+type Props = {
+	url?: String
+}
+
+type FileObj = {
+	id: any,
+	data: any,
+	error: Error | DOMError | String,
+	file: File,
+	loading: Boolean
+};
+
+type State = {
+	showDrawer: Boolean,
+	showFab: Boolean,
+	files: FileObj[]
+};
+
+let counter = 0;
+
+export default class App extends Component<Props, State> {
+	state: State = {
+		showDrawer: false,
+		showFab: true,
+		files: []
+	};
+
+	loadFile = (file: File) => {
+		let fileObj = {
+			id: ++counter,
+			file,
+			error: null,
+			loading: true,
+			data: null
+		};
+
+		this.setState({
+			files: [fileObj]
+		});
+
+		let fr = new FileReader();
+		// fr.readAsArrayBuffer();
+		fr.onerror = () => {
+			let files = this.state.files.slice();
+			files.splice(0, files.indexOf(fileObj), {
+				...fileObj,
+				error: fr.error,
+				loading: false
+			});
+			this.setState({ files });
+		};
+		fr.onloadend = () => {
+			let files = this.state.files.slice();
+			files.splice(0, files.indexOf(fileObj), {
+				...fileObj,
+				data: fr.result,
+				loading: false
+			});
+			this.setState({ files });
+		};
+		fr.readAsDataURL(file);
+	};
+
+	enableDrawer = false;
+
+	openDrawer = updater(this, 'showDrawer', true);
+	closeDrawer = updater(this, 'showDrawer', false);
+	toggleDrawer = updater(this, 'showDrawer', toggle);
+
+	openFab = updater(this, 'showFab', true);
+	closeFab = updater(this, 'showFab', false);
+	toggleFab = updater(this, 'showFab', toggle);
+
+	render({ url }, { showDrawer, showFab, files }) {
+		if (showDrawer) this.enableDrawer = true;
+		return (
+			<div id="app" class={style.app}>
+				<Fab showing={showFab} />
+
+				<Header toggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
+				
+				{/* Avoid loading & rendering the drawer until the first time it is shown. */}
+				{/*
+				<When value={showDrawer}>
+					<Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
+				</When>
+				*/}
+
+				{/*
+					Note: this is normally where a <Router> with auto code-splitting goes.
+					Since we don't seem to need one (yet?), it's omitted.
+				*/}
+				<div class={style.content}>
+					<Home files={files} />
+				</div>
+
+				{/* This ends up in the body when prerendered, which makes it load async. */}
+				<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+			</div>
+		);
+	}
+}