feat(ui): recent projects in top bar dropdown

Author: Guillaume Chau

packages/@vue/cli-ui/apollo-server/connectors/projects.js

@@ -383,6 +383,11 @@ async function open (id, context) {
   // Load plugins
   plugins.list(project.path, context)
 
+  // Date
+  context.db.get('projects').find({ id }).assign({
+    openDate: Date.now()
+  }).write()
+
   // Save for next time
   context.db.set('config.lastOpenProject', id).write()
 

packages/@vue/cli-ui/apollo-server/schema/project.js

@@ -33,6 +33,7 @@ type Project {
   plugins: [Plugin]
   tasks: [Task]
   homepage: String
+  openDate: JSON
 }
 
 enum ProjectType {

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

@@ -163,6 +163,7 @@
         "top-bar": {
           "no-favorites": "No favorite projects",
           "favorite-projects": "Favorite projects",
+          "recent-projects": "Recent projects",
           "homepage": "Home page"
         },
         "view-badge": {

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

@@ -7,6 +7,8 @@
       icon-right="arrow_drop_down"
       button-class="flat round"
     >
+      <!-- Current project options -->
+
       <template v-if="projectCurrent">
         <VueSwitch
           :value="projectCurrent.favorite"
@@ -34,6 +36,8 @@
 
       <div class="dropdown-separator"/>
 
+      <!-- Favorites -->
+
       <div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
 
       <template v-else>
@@ -50,6 +54,24 @@
         />
       </template>
 
+      <!-- Recents -->
+
+      <template v-if="recentProjects.length">
+        <div class="dropdown-separator"/>
+
+        <div class="section-title">
+          {{ $t('org.vue.components.top-bar.recent-projects') }}
+        </div>
+
+        <VueDropdownButton
+          v-for="project of recentProjects"
+          :key="project.id"
+          :label="project.name"
+          icon-left="restore"
+          @click="openProject(project)"
+        />
+      </template>
+
       <div class="dropdown-separator"/>
 
       <VueDropdownButton
@@ -92,6 +114,13 @@ export default {
       return this.projects.filter(
         p => p.favorite && (!this.projectCurrent || this.projectCurrent.id !== p.id)
       )
+    },
+
+    recentProjects () {
+      if (!this.projects) return []
+      return this.projects.filter(
+        p => !p.favorite && (!this.projectCurrent || this.projectCurrent.id !== p.id)
+      ).sort((a, b) => b.openDate - a.openDate).slice(0, 3)
     }
   },
 

packages/@vue/cli-ui/src/graphql/projectFragment.gql

@@ -5,4 +5,5 @@ fragment project on Project {
   path
   favorite
   homepage
+  openDate
 }