From a697df351b7c331ab92e3fd7fe1e1dc6420e2813 Mon Sep 17 00:00:00 2001
From: Gamebrary <contact@gamebrary.com>
Date: Mon, 24 May 2021 20:40:59 -0700
Subject: [PATCH] use b-dropdown-item-button and clean up boards dropdown

---
 src/components/BoardsDropdown.vue | 71 +++++++++++++++++--------------
 1 file changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/components/BoardsDropdown.vue b/src/components/BoardsDropdown.vue
index 3f562e00..c7302b04 100644
--- a/src/components/BoardsDropdown.vue
+++ b/src/components/BoardsDropdown.vue
@@ -10,45 +10,52 @@
         <i class="fas fa-caret-down fa-fw" aria-hidden />
       </template>
 
-      <div class="d-flex align-items-center justify-content-between">
-        <span class="ml-2">
-          {{ board.name }}
-        </span>
+      <b-dropdown-item-button
+        size="sm"
+        v-b-modal:edit-board
+      >
+        <i class="fas fa-pencil-alt fa-fw" aria-hidden />
+        Edit board
+      </b-dropdown-item-button>
 
-        <b-button
-          variant="secondary"
-          size="sm"
-          v-b-modal:edit-board
-        >
-          <i class="fas fa-pencil-alt fa-fw" aria-hidden />
-        </b-button>
-      </div>
+      <b-dropdown-divider />
+
+      <b-dropdown-item-button
+        size="sm"
+        v-b-modal:create-board
+      >
+        <i class="fas fa-plus fa-fw" aria-hidden></i>
+        Create new board
+      </b-dropdown-item-button>
 
       <!-- TODO: create array map with url already fetched -->
       <!-- TODO: filter out current board -->
-      <b-dropdown-divider />
 
-      <span class="m-2">Other boards</span>
+      <template v-if="filteredBoards.length">
+        <b-dropdown-divider />
 
-      <b-dropdown-item
-        v-for="{ id, name, backgroundColor, backgroundUrl } in boards"
-        :key="id"
-        :active="board.name === name"
-        @click.native="viewBoard(id)"
-      >
-        <b-avatar
-          rounded
-          :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
-          :title="name"
-          text=" "
-          :style="`
-            ${getWallpaperUrl(backgroundUrl)}
-            background-color: ${backgroundColor ? backgroundColor : ''}
-            `"
-        />
+        <span class="m-2 text-muted">Other boards:</span>
 
-        {{ name }}
-      </b-dropdown-item>
+        <b-dropdown-item-button
+          v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
+          :key="id"
+          :active="board.name === name"
+          @click="viewBoard(id)"
+        >
+          <b-avatar
+            rounded
+            :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
+            :title="name"
+            text=" "
+            :style="`
+              ${getWallpaperUrl(backgroundUrl)}
+              background-color: ${backgroundColor ? backgroundColor : ''}
+              `"
+          />
+
+          {{ name }}
+        </b-dropdown-item-button>
+      </template>
     </b-dropdown>
   </portal>
 </template>