Initial mock.

client/src/App.tsx

@@ -14,6 +14,8 @@ import {
   useLocation,
   Redirect
 } from "react-router-dom";
+import { Typography } from '@material-ui/core';
+import Mockup from './components/Mockup';
 
 const JSURL = require('jsurl');
 
@@ -121,11 +123,15 @@ function AppBody() {
   );
 }
 
+function AppMockup() {
+  return <Mockup/>
+}
+
 function App() {
   return (
     <Router>
       <DndProvider backend={HTML5Backend}>
-        <AppBody />
+        <AppMockup />
       </DndProvider>
     </Router>
   );

client/src/components/Mockup.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Box from '@material-ui/core/Box';
+import SearchIcon from '@material-ui/icons/Search';
+import { IconButton, Button, Typography, Chip, Link, Card, CardContent, CssBaseline } from '@material-ui/core';
+
+export function MockTable() {
+
+    const rows = [
+        ['No One Knows', "Queens of the Stone Age", "Blabla", "Tag"],
+        ['Ice cream sandwich', "My man", "What?", 37],
+        ['Eclair', "George Baker", "Bakeroo", 24],
+        ['Cupcake', "The Sweetie Pies", "Bla", "Bloo"],
+        ['Gingerbread', "Is ahead", "But you'll get", "Vury fet"],
+    ];
+
+    const useTableStyles = makeStyles({
+        table: {
+            minWidth: 650,
+        },
+    });
+    const classes = useTableStyles();
+
+    return (
+        <TableContainer component={Paper}>
+            <Table className={classes.table} aria-label="a dense table">
+                <TableHead>
+                    <TableRow>
+                        <TableCell align="left">Title</TableCell>
+                        <TableCell align="left">Artist</TableCell>
+                        <TableCell align="left">Album</TableCell>
+                        <TableCell align="right">Tags</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow key={row[0]}>
+                            <TableCell align="left">{row[0]}</TableCell>
+                            <TableCell align="left">{row[1]}</TableCell>
+                            <TableCell align="left">{row[2]}</TableCell>
+                            <TableCell align="right">{row[3]}</TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+}
+
+export function QueryContainer(props: any) {
+    return <Paper elevation={3}>
+        {props.children}
+    </Paper>
+}
+
+export function QueryElem(props: any) {
+    return <>
+        <Chip label={props.children} />
+    </>
+}
+
+export function QueryBar() {
+    return <Box display="flex" alignItems="center">
+        <Box m={2}>
+            <IconButton>
+                <SearchIcon style={{ fontSize: 80 }} />
+            </IconButton>
+        </Box>
+        <Box m={2}>
+            <QueryContainer>
+                <Box display="flex" flexDirection="column" alignItems="center">
+                    <Box m={0.5} />
+                    <Box m={0.5}>
+                        <QueryElem>
+                            <Typography>By <Link color="inherit" href="#">Queens of the Stone Age</Link></Typography>
+                        </QueryElem>
+                    </Box>
+                    <Box m={0.5}>
+                        <Typography variant="button">And</Typography>
+                    </Box>
+                    <Box m={0.5}>
+                        <QueryElem>
+                            <Typography>Released before 2020</Typography>
+                        </QueryElem>
+                    </Box>
+                    <Box m={0.5} />
+                </Box>
+            </QueryContainer>
+        </Box>
+        <Box m={2}>
+            <Typography variant="button">Or</Typography>
+        </Box>
+        <Box m={2}>
+            <Box m={0.5}>
+                <QueryElem>
+                    <Typography>Genre: "Awesome"</Typography>
+                </QueryElem>
+            </Box>
+        </Box>
+    </Box >
+}
+
+function MockupBody() {
+    return <>
+        <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
+            <Box
+                m={1}
+                width="80%"
+            >
+                <Paper>
+                    <QueryBar />
+                </Paper>
+            </Box>
+            <Box
+                m={1}
+                width="80%"
+            >
+                <Paper>
+                    <MockTable />
+                </Paper>
+            </Box>
+        </Box>
+    </>
+}
+
+
+const darkTheme = createMuiTheme({
+    palette: {
+        type: 'dark'
+    },
+});
+
+export default function Mockup() {
+    return <>
+        <ThemeProvider theme={darkTheme}>
+            <CssBaseline/>
+            <MockupBody />
+        </ThemeProvider>
+    </>
+}

server/knexfile.ts

@@ -12,6 +12,6 @@ export default <Record<string,any>> {
 
   // In production, we base the config on an environment
   // variable setting.
-  production: JSON.parse(process.env.MUDBASE_DB_CONFIG || "")
+  production: JSON.parse(process.env.MUDBASE_DB_CONFIG || "{}")
 
 };