From 96fa5747a75b14ad097d860bf383ce47384d33de Mon Sep 17 00:00:00 2001
From: Nate Goldman <nate@ngoldman.me>
Date: Mon, 7 Mar 2016 15:28:19 -0800
Subject: [PATCH] add empty list state

---
 renderer/index.css             | 15 ++++++++++++++-
 renderer/views/torrent-list.js | 10 ++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/renderer/index.css b/renderer/index.css
index c0edf4c7..24a565f3 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -253,7 +253,20 @@ body.drag::before {
  */
 
 .torrent-list {
-  margin-top: 37px;
+  padding-top: 37px;
+}
+
+.get-started {
+  opacity: .5;
+  padding: 24px;
+  margin: 6px;
+  text-align: center;
+  border: 5px #444 dashed;
+  flex: 1 1 auto;
+}
+
+.lead {
+  font-size: 150%;
 }
 
 .torrent {
diff --git a/renderer/views/torrent-list.js b/renderer/views/torrent-list.js
index 79bc55aa..6321753b 100644
--- a/renderer/views/torrent-list.js
+++ b/renderer/views/torrent-list.js
@@ -8,9 +8,19 @@ var prettyBytes = require('pretty-bytes')
 
 function TorrentList (state, dispatch) {
   var list = state.client.torrents.map((torrent) => renderTorrent(torrent, dispatch))
+  if (list.length === 0) list = emptyList()
   return hx`<div class='torrent-list'>${list}</div>`
 }
 
+function emptyList () {
+  return hx`
+    <div class="get-started">
+      <p>No torrents here yet.</p>
+      <p>Drop a file or paste an address to get started!</p>
+    </div>
+  `
+}
+
 // Renders a torrent in the torrent list
 // Includes name, download status, play button, background image
 // May be expanded for additional info, including the list of files inside