Problem: UI uses too much space

Solution: use smaller buttons and simplify language

src/components/Channels.vue

@@ -3,7 +3,7 @@
     <div class="channels--channel" v-for="channel in channels" :key="channel.uid">
       <slot :channel="channel"></slot>
     </div>
-    <button class="button is-primary" @click="open">+ New Channel</button>
+    <button class="button is-primary is-small" @click="open">New Channel</button>
   </div>
 </template>
 

src/components/Timeline.vue

@@ -4,6 +4,9 @@
       <TimelineEntry :item="item" @debug="debug" @markRead="markRead(channel.uid, ...arguments)" @followFeed="$emit('followFeed', arguments[0])"
                      :is-main-entry="true"/>
     </div>
+    <div v-if="items.length === 0">
+      <p class="text-center">No items in this timeline</p>
+    </div>
     <div class="level">
       <div class="level-item">
         <button class="button" @click="prevPage" v-if="timeline.paging.before">Prev Page</button>

src/store.js

@@ -179,6 +179,9 @@ export default new Vuex.Store({
       commit('clearTimeline', {channel: channel})
     },
     fetchTimeline({commit}, channel) {
+      if (!channel.uid) {
+        channel.uid = 'home';
+      }
       let url = this.state.microsubEndpoint + '?action=timeline&channel=' + channel.uid
       if (channel.after) {
         url += '&after=' + channel.after;

src/views/Home.vue

@@ -11,14 +11,14 @@
     </div>
 
     <div class="timeline column is-three-fifths">
-      <div class="level">
+      <div class="level is-mobile">
         <div class="level-left">
           <h1 class="title is-5">{{ channel.name }}</h1>
         </div>
         <div class="level-right timeline-buttons">
           <div class="level-item">
-            <button class="button" @click.prevent="openPost">New Post</button>
+            <button class="button is-small" @click.prevent="openPost">New Post</button>
-            <button class="button" @click.prevent="openFeedFollower('')">Add feed</button>
+            <button class="button is-small" @click.prevent="openFeedFollower('')">Add feed</button>
           </div>
         </div>
       </div>