frontend: Small UI improvements

frontend/src/pages/TrackEditor.tsx

@@ -74,8 +74,8 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
     <Page>
       <Grid centered relaxed divided>
         <Grid.Row>
-          <Grid.Column width={8}>
-            <h2>Edit track</h2>
+          <Grid.Column width={10}>
+            <h2>Edit {track ? (track.title || 'Unnamed track') : 'track'}</h2>
             <Form loading={loading} key={track?.slug} onSubmit={onSubmit}>
               <Ref innerRef={findInput(register)}>
                 <Form.Input label="Title" name="title" defaultValue={track?.title} style={{fontSize: '120%'}} />
@@ -135,7 +135,7 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
               <Button type="submit">Save</Button>
             </Form>
           </Grid.Column>
-          <Grid.Column width={4}>
+          <Grid.Column width={6}>
             <h2>Danger zone</h2>
             <p>
               You can remove this track from your account and the portal if you like. However, if at any point you have

frontend/src/pages/TrackPage/TrackComments.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import {Segment, Form, Button, Loader, Header, Comment} from 'semantic-ui-react'
+import {Message, Segment, Form, Button, Loader, Header, Comment} from 'semantic-ui-react'
 import Markdown from 'react-markdown'
 
 import {FormattedDate} from 'components'
 
-
 function CommentForm({onSubmit}) {
   const [body, setBody] = React.useState('')
 
@@ -60,6 +59,8 @@ export default function TrackComments({comments, onSubmit, onDelete, login, hide
           </Comment>
         ))}
 
+        {comments != null && !comments.length && <Message>Nobody commented... yet</Message>}
+
         {login && comments != null && <CommentForm onSubmit={onSubmit} />}
       </Comment.Group>
     </Segment>

frontend/src/pages/TrackPage/index.tsx

@@ -136,7 +136,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
             <Segment>
               {track && (
                 <>
-                  <Header as="h1">{track.title}</Header>
+                  <Header as="h1">{track.title || 'Unnamed track'}</Header>
                   <TrackDetails {...{track, trackData, isAuthor}} />
                   {isAuthor && <TrackActions {...{slug}} />}
                 </>

frontend/src/pages/UploadPage.tsx

@@ -85,7 +85,7 @@ function FileUploadStatus({
 
   return (
     <span>
-      <Loader inline size="mini" active /> {progress < 1 ? (progress * 100).toFixed(0) + ' %' : 'Processing...'}
+      <Loader inline size="mini" active /> {progress < 1 ? `Uploading ${(progress * 100).toFixed(0)}%` : 'Processing...'}
     </span>
   )
 }
@@ -149,9 +149,8 @@ export default function UploadPage() {
             <Table.Row>
               <Table.HeaderCell>Filename</Table.HeaderCell>
               <Table.HeaderCell>Size</Table.HeaderCell>
-              <Table.HeaderCell>Status</Table.HeaderCell>
-              <Table.HeaderCell></Table.HeaderCell>
-              <Table.HeaderCell></Table.HeaderCell>
+              <Table.HeaderCell>Status / Title</Table.HeaderCell>
+              <Table.HeaderCell colSpan={2}></Table.HeaderCell>
             </Table.Row>
           </Table.Header>
 
@@ -164,16 +163,6 @@ export default function UploadPage() {
                 </Table.Cell>
                 <Table.Cell>{formatFileSize(size)}</Table.Cell>
                 <Table.Cell>
-                  {result ? (
-                    <>
-                      <Icon name="check" /> Uploaded
-                    </>
-                  ) : (
-                    <FileUploadStatus {...{id, file}} onComplete={onCompleteFileUpload} />
-                  )}
-                </Table.Cell>
-                <Table.Cell>
-                  {/* <pre>{JSON.stringify(result || null, null, 2)}</pre> */}
                   {result?.errors ? (
                     <List>
                       {_.sortBy(Object.entries(result.errors))
@@ -185,17 +174,17 @@ export default function UploadPage() {
                           </List.Item>
                         ))}
                     </List>
-                  ) : null}
-                </Table.Cell>
-                <Table.Cell>
-                  {result?.track ? (
+                  ) : result ? (
                     <>
-                      <Link to={`/tracks/${result.track.slug}`}>
-                        <Button size="small" icon="arrow right" />
-                      </Link>
-                      <Button size="small" icon="trash" onClick={() => onDeleteTrack(result.track.slug)} />
+                      <Icon name="check" /> {result.track?.title || 'Unnamed track'}
                     </>
-                  ) : null}
+                  ) : (
+                    <FileUploadStatus {...{id, file}} onComplete={onCompleteFileUpload} />
+                  )}
+                </Table.Cell>
+                <Table.Cell>{result?.track ? <Link to={`/tracks/${result.track.slug}`}>Show</Link> : null}</Table.Cell>
+                <Table.Cell>
+                  {result?.track ? <Link to={`/tracks/${result.track.slug}/edit`}>Edit</Link> : null}
                 </Table.Cell>
               </Table.Row>
             ))}