feat(ui): toggle favorite in top bar

Author: Guillaume Chau

packages/@vue/cli-ui/locales/en.json

@@ -148,7 +148,8 @@
           }
         },
         "top-bar": {
-          "no-favorites": "No favorite projects"
+          "no-favorites": "No favorite projects",
+          "favorite-projects": "Favorite projects"
         },
         "view-badge": {
           "labels": {

packages/@vue/cli-ui/src/components/TopBar.vue

@@ -7,16 +7,35 @@
       icon-right="arrow_drop_down"
       button-class="flat round"
     >
-      <VueDropdownButton
-        v-for="project of favoriteProjects"
-        :key="project.id"
-        :label="project.name"
-        icon-left="star"
-        @click="openProject(project)"
-      />
+      <template v-if="projectCurrent">
+        <VueSwitch
+          :value="projectCurrent.favorite"
+          :icon="projectCurrent.favorite ? 'star' : 'star_border'"
+          class="extend-left"
+          @input="toggleCurrentFavorite()"
+        >
+          {{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
+        </VueSwitch>
+      </template>
+
+      <div class="dropdown-separator"/>
 
       <div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
 
+      <template v-else>
+        <div class="section-title">
+          {{ $t('org.vue.components.top-bar.favorite-projects') }}
+        </div>
+
+        <VueDropdownButton
+          v-for="project of favoriteProjects"
+          :key="project.id"
+          :label="project.name"
+          icon-left="star"
+          @click="openProject(project)"
+        />
+      </template>
+
       <div class="dropdown-separator"/>
 
       <VueDropdownButton
@@ -44,6 +63,7 @@ import { resetApollo } from '../vue-apollo'
 import PROJECT_CURRENT from '../graphql/projectCurrent.gql'
 import PROJECTS from '../graphql/projects.gql'
 import PROJECT_OPEN from '../graphql/projectOpen.gql'
+import PROJECT_SET_FAVORITE from '../graphql/projectSetFavorite.gql'
 
 export default {
   apollo: {
@@ -72,6 +92,18 @@ export default {
       })
 
       await resetApollo()
+    },
+
+    async toggleCurrentFavorite () {
+      if (this.projectCurrent) {
+        await this.$apollo.mutate({
+          mutation: PROJECT_SET_FAVORITE,
+          variables: {
+            id: this.projectCurrent.id,
+            favorite: this.projectCurrent.favorite ? 0 : 1
+          }
+        })
+      }
     }
   }
 }