From 5ac1dea689eaac462c18c42a307d1e2b35a184db Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Sat, 4 Jul 2020 14:07:03 +0100
Subject: [PATCH] ui tweaks

---
 template/index.html                | 8 ++++----
 template/static/javascripts/app.js | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/template/index.html b/template/index.html
index 37f6460..a82f762 100644
--- a/template/index.html
+++ b/template/index.html
@@ -73,7 +73,7 @@
         </div>
         <div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
             <div class="my-2 mx-2">
-                <label class="nav-select mb-1" v-for="item in items" :class="{'text-muted': item.status === 'read'}">
+                <label class="nav-select mb-1" v-for="item in items" :class="{'text-muted': item.status === 'read'}" :key="item.id">
                     <input type="radio" name="item" :value="item.id" v-model="itemSelected">
                     <div class="menu-item p-2">
                         <div class="d-flex flex-column ml-4">
@@ -135,9 +135,9 @@
                 </form>
             </div>
             <div v-else-if="settings=='manage'">
-                <div v-for="folder in foldersWithFeeds" class="mb-4">
+                <div v-for="folder in foldersWithFeeds" class="mb-4" :key="folder.id">
                     <div class="d-flex align-items-center">
-                        <div class="w-100"><b>{{ folder.title || "Uncategorized" }}</b></div>
+                        <div class="w-100" v-if="folder.id"><b>{{ folder.title }}</b></div>
                         <div class="flex-shrink-0" v-if="folder.id">
                             <b-dropdown right no-caret lazy="true" variant="link" class="settings-dropdown" toggle-class="text-decoration-none">
                                 <template v-slot:button-content>
@@ -152,7 +152,7 @@
                             </b-dropdown>
                         </div>
                     </div>
-                    <div v-for="feed in folder.feeds" class="d-flex align-items-center">
+                    <div v-for="feed in folder.feeds" class="d-flex align-items-center" :key="feed.id">
                         <div class="w-100">
                             {{ feed.title }}
                         </div>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index ee1e653..150cb32 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -81,10 +81,12 @@ var vm = new Vue({
     },
     createFolder: function(event) {
       var form = event.target
-      var data = {'title': form.querySelector('input[name=title]').value}
+      var titleInput = form.querySelector('input[name=title]')
+      var data = {'title': titleInput.value}
       var vm = this
       api.folders.create(data).then(function(result) {
         vm.folders.push(result)
+        titleInput.value = ''
       })
     },
     renameFolder: function(folder) {