5 files changed, 46 insertions, 14 deletions
diff --git a/animism-align/frontend/app/views/dashboard/dashboard.css b/animism-align/frontend/app/views/dashboard/dashboard.css
index 34bcb66..37034dd 100644
--- a/animism-align/frontend/app/views/dashboard/dashboard.css
+++ b/animism-align/frontend/app/views/dashboard/dashboard.css
@@ -3,7 +3,7 @@
 }
 
 .project-top {
-  padding: 1rem;
+  padding: 0 1rem 1rem 1rem;
 }
 .project-top h1 {
   margin: 0;
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
index 9d8dd64..8fb3d54 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
+++ b/animism-align/frontend/app/views/editor/align/components/sidebar/tableOfContents.component.js
@@ -11,7 +11,7 @@ class TableOfContents extends Component {
     if (loading || !order) return null
     const sectionIds = order.filter(id => lookup[id].type === "section_heading")
     return (
-      <div className="toc">
+      <div className="sidebar-content toc">
         {sectionIds.map((id, i) => (
           <div key={id} onClick={() => actions.align.setScrollPosition(lookup[id].start_ts)}>
             {ROMAN_NUMERALS[i]}{'. '}{lookup[id].text}
diff --git a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
index 5293ffd..e97d3cd 100644
--- a/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
+++ b/animism-align/frontend/app/views/editor/align/components/sidebar/waveUpload.component.js
@@ -4,14 +4,29 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 
-const WaveUpload = ({ peaks }) => {
-  return (
-    <div />
-  )
+class WaveUpload extends Component {
+  render() {
+    const { episode, peaks } = this.props
+    return (
+      <div className="sidebar-content wave-upload">
+        {peaks.length && (
+          <div>
+            Peaks: {peaks.length}
+          </div>
+        )}
+        {!episode.settings.audio && (
+          <div>
+            Upload an audio file
+          </div>
+        )}
+      </div>
+    )
+  }
 }
 
 const mapStateToProps = state => ({
   peaks: state.align.peaks,
+  episode: state.site.episode,
 })
 
 export default connect(mapStateToProps)(WaveUpload)
diff --git a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
index 10ebc03..8ff8181 100644
--- a/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
+++ b/animism-align/frontend/app/views/editor/align/containers/sidebar.container.js
@@ -6,6 +6,7 @@ import actions from 'app/actions'
 
 import Script from '../components/sidebar/script.component.js'
 import TableOfContents from '../components/sidebar/tableOfContents.component.js'
+import WaveUpload from '../components/sidebar/waveUpload.component.js'
 
 class Sidebar extends Component {
   state = {
@@ -28,6 +29,7 @@ class Sidebar extends Component {
         </div>
         {mode === 'toc' && <TableOfContents />}
         {mode === 'txt' && <Script />}
+        {mode === 'wav' && <WaveUpload />}
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/editor/align/sidebar.css b/animism-align/frontend/app/views/editor/align/sidebar.css
index 60e9321..e3edde8 100644
--- a/animism-align/frontend/app/views/editor/align/sidebar.css
+++ b/animism-align/frontend/app/views/editor/align/sidebar.css
@@ -1,4 +1,4 @@
-/* Script */
+/* Sidebar */
 
 .sidebar {
   position: absolute;
@@ -6,15 +6,17 @@
   right: 0;
   width: 15rem;
   z-index: 8;
+  padding-top: 2rem;
 }
-.sidebar textarea {
-  height: calc(100vh - 3.15rem);
-}
+
+/* sidebar header */
+
 .sidebar .buttons {
   position: absolute;
   top: 0;
   right: 0;
   width: 15rem;
+  height: 2rem;
   z-index: 9;
   display: flex;
   justify-content: flex-end;
@@ -28,14 +30,20 @@
 .sidebar .buttons button:hover {
   background: #333;
 }
-
-/* table of contents */
-
-.toc {
+.sidebar-content {
   background: #222;
   width: 15rem;
   padding: 0.5rem 0;
 }
+
+/* wavefile upload */
+
+.sidebar-content.wave-upload {
+  padding: 0.5rem 0.75rem;
+}
+
+/* table of contents */
+
 .toc div {
   width: 15rem;
   padding: 0.25rem 0.75rem;
@@ -44,3 +52,10 @@
 .toc div:hover {
   background: #213;
 }
+
+
+/* script */
+
+.sidebar textarea {
+  height: calc(100vh - 5.15rem);
+}