5 files changed, 46 insertions, 30 deletions
diff --git a/client/components/Browser/Files/FileListView.jsx b/client/components/Browser/Files/FileListView.jsx
index 4615cf7..df59a1d 100644
--- a/client/components/Browser/Files/FileListView.jsx
+++ b/client/components/Browser/Files/FileListView.jsx
@@ -21,7 +21,7 @@ export default function FileListView (props) {
     return (
       <div key={i} class={props.selected === file ? 'selected' : ''}>
         <span class='name'><FileLink file={file}>{file.name}</FileLink></span>
-        <span class='mime'>{file.processed ? file.mime : 'working...'}</span>
+        <span class='mime'>{file.processed ? file.mime : '(waiting)'}</span>
         <span class='duration'>{file.duration ? (file.duration.toFixed(1) + 's') : ''}</span>
         <span class='actions'>
           <TaskContentLink file={file}>content</TaskContentLink>
@@ -39,7 +39,7 @@ export default function FileListView (props) {
           <button onClick={props.onClose}>&times;</button>
         </div>
       </div>
-      <div class='list'>
+      <div class='files list'>
         {files}
       </div>
     </div>
diff --git a/client/components/Browser/Folders/FolderListView.jsx b/client/components/Browser/Folders/FolderListView.jsx
index 0a0d0e2..e9d2d44 100644
--- a/client/components/Browser/Folders/FolderListView.jsx
+++ b/client/components/Browser/Folders/FolderListView.jsx
@@ -3,7 +3,7 @@ import { h, Component } from 'preact'
 export default function FolderListView (props) {
   const folders = props.folders.map( (folder, i) => (
     <div key={i} onClick={() => props.openFolder(folder)}>
-      <span class='name'>{folder.name}</span>
+      <a class='name'>{folder.name}</a>
     </div>
   ))
   
@@ -15,7 +15,7 @@ export default function FolderListView (props) {
           <button onClick={props.initNewFolder}>+ folder</button>
         </div>
       </div>
-      <div class='list'>
+      <div class='folders list'>
         {folders}
       </div>
     </div>
diff --git a/client/components/Tasks/TaskListView.jsx b/client/components/Tasks/TaskListView.jsx
index 47be794..b93ecc3 100644
--- a/client/components/Tasks/TaskListView.jsx
+++ b/client/components/Tasks/TaskListView.jsx
@@ -1,24 +1,51 @@
 import { h, Component } from 'preact'
 
+import format from '../../vendor/format.js'
 import FileLink from '../../containers/fileLink.js'
 
 export default function TaskListView (props) {
   const tasks = (props.tasks || []).map( (task, i) => {
-    return (
-      <div key={i}>
-        <span>{task.id}</span>
-        <span>{task.created_at}</span>
+    const created_at = format.verboseDate(task.created_at)
+    let files = []
+    let cancel
+    if (task.content_file) {
+      files.push(
         <span class='name'><FileLink file={task.content_file} /></span>
+      )
+    }
+    if (task.style_file) {
+      files.push(
         <span class='name'><FileLink file={task.style_file} /></span>
-        <span>α={task.alpha}</span>
-        <span class='name'><FileLink file={task.output_file} /></span>
+      )
+    }
+    if (! task.output_file && ! task.processing) {
+      cancel = (
+        <span class='cancel' onClick={() => props.cancelTask(task)}>x</span>
+      )
+    }
+    const completed = task.completed ? 'completed' : ''
+    let filename = task.output_file ? task.output_file.name :
+                   task.processing ? '(processing)' : '(waiting)'
+    return (
+      <div key={i}>
+        <div class='row'>
+          <span class='date'>{created_at.date}</span>
+          <span class='time'>{created_at.time}</span>
+          <span class={'name output ' + completed}><FileLink file={task.output_file}>{filename}</FileLink></span>
+          {cancel}
+        </div>
+        <div class='row'>
+          <span class='alpha'>α={task.alpha}</span>
+          {files}
+        </div>
       </div>
     )
         // <span class='name'>{task.result_file.name}</span>
   })
   return (
-    <div class='list'>
+    <div class='tasks list'>
       {tasks}
     </div>
   )
 }
+
diff --git a/client/components/UI/AudioPlayerView.jsx b/client/components/UI/AudioPlayerView.jsx
index d2c9982..e715c27 100644
--- a/client/components/UI/AudioPlayerView.jsx
+++ b/client/components/UI/AudioPlayerView.jsx
@@ -1,19 +1,21 @@
 import { h, Component } from 'preact'
-
+import { pngpath, mp3path } from '../../vendor/paths'
 const audio = document.createElement('audio')
 
 export default function AudioPlayerView (props) {
   if (props.file) {
     document.body.style.backgroundImage = 'url(' + pngpath(props.file) + ')'
     audio.src = mp3path(props.file)
+    audio.currentTime = 0
     audio.play()
     return (
-      <div class='audioPlayer'>
+      <div class='audioPlayer' onClick={() => audio.paused ? audio.play() : audio.pause()}>
         Playing {props.file.name}
       </div>
     )
   }
   else {
+    audio.pause()
     return (
       <div class='audioPlayer'>
         Not Playing
@@ -21,16 +23,3 @@ export default function AudioPlayerView (props) {
     )
   }
 }
-
-function filepath (file) {
-  return '/data/' + file.folder_id + '/' + encodeURIComponent(file.name)
-}
-function mp3path (file) {
-  if (file.mime !== 'audio/mp3') {
-    return filepath(file) + '.mp3'
-  }
-  return filepath(file)
-}
-function pngpath (file) {
-  return filepath(file) + '.png'
-}
diff --git a/client/components/UI/Link.jsx b/client/components/UI/Link.jsx
index d71582b..b4d2d28 100644
--- a/client/components/UI/Link.jsx
+++ b/client/components/UI/Link.jsx
@@ -2,15 +2,15 @@ import { h, Component } from 'preact'
 import React from 'react'
 // import PropTypes from 'prop-types'
 
-const Link = ({ active, children, onClick, disabled }) => {
+const Link = ({ href, active, children, onClick, selected, disabled }) => {
   if (active) {
     return <span>{children}</span>
   }
-  const className = disabled ? 'disabled' : ''
-
+  const className = disabled ? 'disabled' :
+                    selected ? 'selected' : ''
   return (
     // eslint-disable-next-line
-    <a href="#"
+    <a href={href || '#'}
        class={className}
        onClick={e => {
          e.preventDefault()