Refactor towards tabs.

client/src/App.tsx

@@ -8,7 +8,7 @@ import {
   Switch,
   Route
 } from "react-router-dom";
-import Window from './components/Window';
+import MainWindow from './components/MainWindow';
 
 function App() {
   return (
@@ -16,7 +16,7 @@ function App() {
       <DndProvider backend={HTML5Backend}>
         <Switch>
           <Route path="/">
-            <Window/>
+            <MainWindow/>
           </Route>
         </Switch>
 

client/src/components/MainWindow.tsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+import { ThemeProvider, CssBaseline, createMuiTheme, Box, LinearProgress } from '@material-ui/core';
+import { QueryElem, toApiQuery } from '../lib/query/Query';
+import QueryBuilder from './querybuilder/QueryBuilder';
+import * as serverApi from '../api';
+import { SongTable } from './tables/ResultsTable';
+import stringifyList from '../lib/stringifyList';
+import { getArtists, getSongTitles, getAlbums, getTags } from '../lib/query/Getters';
+import { grey } from '@material-ui/core/colors';
+import AppBar from './appbar/AppBar';
+import QueryWindow from './windows/QueryWindow';
+var _ = require('lodash');
+
+const darkTheme = createMuiTheme({
+    palette: {
+        type: 'dark',
+        primary: {
+            main: grey[100],
+        }
+    },
+});
+
+export default function MainWindow(props: any) {
+    return <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <AppBar />
+        <QueryWindow />
+    </ThemeProvider>
+}

client/src/components/appbar/AppBar.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AppBar as MuiAppBar, Box } from '@material-ui/core';
+
+export interface IProps {
+
+}
+
+export default function AppBar(props: IProps) {
+    return <MuiAppBar position="static" style={{ background: 'grey' }}>
+        <Box m={0.5} display="flex" alignItems="center">
+            <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
+        </Box>
+    </MuiAppBar>
+}

client/src/components/windows/QueryWindow.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { ThemeProvider, CssBaseline, createMuiTheme, AppBar, Box, LinearProgress } from '@material-ui/core';
-import { QueryElem, toApiQuery } from '../lib/query/Query';
-import QueryBuilder from './querybuilder/QueryBuilder';
-import * as serverApi from '../api';
-import { SongTable } from './tables/ResultsTable';
-import stringifyList from '../lib/stringifyList';
-import { getArtists, getSongTitles, getAlbums, getTags } from '../lib/query/Getters';
+import { createMuiTheme, Box, LinearProgress } from '@material-ui/core';
+import { QueryElem, toApiQuery } from '../../lib/query/Query';
+import QueryBuilder from '../querybuilder/QueryBuilder';
+import * as serverApi from '../../api';
+import { SongTable } from '../tables/ResultsTable';
+import stringifyList from '../../lib/stringifyList';
+import { getArtists, getSongTitles, getAlbums, getTags } from '../../lib/query/Getters';
 import { grey } from '@material-ui/core/colors';
 var _ = require('lodash');
 
@@ -18,7 +18,7 @@ const darkTheme = createMuiTheme({
     },
 });
 
-export default function Window(props: any) {
+export default function QueryWindow(props: any) {
     interface ResultsFor {
         for: QueryElem,
         results: any[],
@@ -87,14 +87,7 @@ export default function Window(props: any) {
         }
     }, [query]);
 
-    return <ThemeProvider theme={darkTheme}>
-        <CssBaseline />
-        <AppBar position="static" style={{ background: 'grey' }}>
-            <Box m={0.5} display="flex" alignItems="center">
-                <img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img>
-            </Box>
-        </AppBar>
-        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+    return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box
             m={1}
             width="80%"
@@ -121,6 +114,4 @@ export default function Window(props: any) {
             {loading && <LinearProgress />}
         </Box>
     </Box>
-
-    </ThemeProvider>
 }