feat: app suggestions on welcome page

package.json

@@ -32,6 +32,7 @@
     "portal-vue": "^2.1.3",
     "prism-themes": "^1.0.1",
     "prismjs": "^1.15.0",
+    "shuffle-array": "^1.0.1",
     "vue": "^2.6.10",
     "vue-electron": "^1.0.6",
     "vue-prism-editor": "^0.1.2",

src/components/AppIcon.vue

@@ -61,4 +61,8 @@ export default {
 .size-6 {
   @apply w-6 h-6;
 }
+
+.size-8 {
+  @apply w-8 h-8;
+}
 </style>

src/components/SuggestedApps.vue

@@ -0,0 +1,112 @@
+<template>
+  <div :class="$style.wrap">
+    <button
+      v-for="app in apps"
+      :key="app.url"
+      :class="$style.btn"
+      @click="createTab(app)"
+    >
+      <div :class="$style.thumb">
+        <img
+          :class="$style.img"
+          :src="app.icon"
+          :alt="app.label"
+        >
+      </div>
+      <div :class="$style.label">
+        {{ app.label }}
+      </div>
+    </button>
+    <router-link
+      :class="$style.btn"
+      :to="{
+        name: 'tabs-create',
+      }"
+    >
+      <div :class="$style.thumb">
+        <app-icon
+          :size="8"
+          face="tab-plus"
+        />
+      </div>
+      <div :class="$style.label">
+        Create
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script>
+import shuffleArray from 'shuffle-array';
+import apps from '@/data/recommended-apps.json';
+
+export default {
+  computed: {
+    existingTabs() {
+      return this.$store.getters['Tabs/list'];
+    },
+    apps() {
+      const existing = this.existingTabs;
+      const filtered = apps.filter(app => !existing.some(e => e.url.includes(app.filter)));
+      return shuffleArray(filtered);
+    },
+  },
+  methods: {
+    createTab({ label, url }) {
+      this.$store.dispatch('Tabs/create', { label, url });
+    },
+  },
+};
+</script>
+
+<style lang="postcss" module>
+.wrap {
+  display: grid;
+  grid-column-gap: config('padding.8');
+  grid-row-gap: config('padding.4');
+  grid-template-columns: repeat(auto-fill, minmax(config('width.24'), 1fr));
+}
+
+.btn {
+  @apply
+    relative mb-8
+    text-center bg-grey-dark rounded shadow-lg;
+}
+
+.btn::before {
+  @apply block;
+  padding-top: 100%;
+  content: "";
+}
+
+.btn:hover::after {
+  @apply
+    absolute pin flex flex-col justify-center
+    text-4xl text-white leading-none
+    opacity-75 bg-grey-darker rounded;
+  content: "+";
+}
+
+.thumb {
+  @apply
+    absolute block p-3
+    text-4xl text-grey-darker leading-none
+    bg-grey-lightest rounded-full;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.img {
+  @apply block w-8 h-8 max-w-5xl;
+}
+
+.label {
+  @apply
+    absolute pt-2 min-w-0
+    text-center text-grey truncate;
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+</style>

src/data/recommended-apps.json

@@ -0,0 +1,68 @@
+[
+  {
+    "label": "Discord",
+    "url": "https://discordapp.com/",
+    "icon": "https://discordapp.com/assets/07dca80a102d4149e9736d4b162cff6f.ico",
+    "filter": "discordapp.com"
+  },
+  {
+    "label": "Facebook",
+    "url": "https://facebook.com/",
+    "icon": "https://www.facebook.com/images/fb_icon_325x325.png",
+    "filter": "facebook.com"
+  },
+  {
+    "label": "Gmail",
+    "url": "https://mail.google.com/",
+    "icon": "https://ssl.gstatic.com/ui/v1/icons/mail/images/favicon5.ico",
+    "filter": "mail.google.com"
+  },
+  {
+    "label": "Google Calendar",
+    "url": "https://calendar.google.com/",
+    "icon": "https://calendar.google.com/googlecalendar/images/favicon_v2018_256.png",
+    "filter": "calendar.google.com"
+  },
+  {
+    "label": "Messenger",
+    "url": "https://messenger.com/",
+    "icon": "https://static.xx.fbcdn.net/rsrc.php/y7/r/O6n_HQxozp9.ico",
+    "filter": "messenger.com"
+  },
+  {
+    "label": "Slack",
+    "url": "https://slack.com/",
+    "icon": "https://slack.com/favicon.ico",
+    "filter": "slack.com"
+  },
+  {
+    "label": "Trello",
+    "url": "https://trello.com/",
+    "icon": "https://trello.com/favicon.ico",
+    "filter": "trello.com"
+  },
+  {
+    "label": "Twitter",
+    "url": "https://twitter.com/",
+    "icon": "https://abs.twimg.com/favicons/favicon.ico",
+    "filter": "twitter.com"
+  },
+  {
+    "label": "WhatsApp",
+    "url": "https://web.whatsapp.com/",
+    "icon": "https://web.whatsapp.com/favicon.ico",
+    "filter": "web.whatsapp.com"
+  },
+  {
+    "label": "Wunderlist",
+    "url": "https://www.wunderlist.com/",
+    "icon": "https://www.wunderlist.com/icon.png",
+    "filter": "www.wunderlist.com"
+  },
+  {
+    "label": "Yahoo Mail",
+    "url": "https://mail.yahoo.com/",
+    "icon": "https://mail.yahoo.com/favicon.ico",
+    "filter": "mail.yahoo.com"
+  }
+]

src/views/Welcome.vue

@@ -1,9 +1,52 @@
 <template>
-  <div :class="$style.title">Welcome to Pigment.</div>
+  <app-content :class="$style.wrap">
+    <title-bar>
+      <title-bar-text>
+        Pigment
+      </title-bar-text>
+    </title-bar>
+    <div :class="$style.content">
+      <div :class="$style.title">Welcome to Pigment</div>
+    </div>
+    <div :class="$style.content">
+      <div :class="$style.title">Get started with these suggested apps</div>
+      <p>
+        Maybe some of these apps are interesting for you.
+        Just click on the icons of apps you like, to add them to Pigment.
+        Or create a custom tab by clicking on the "+"-Button
+        down below in the navigation.
+      </p>
+    </div>
+    <suggested-apps />
+  </app-content>
 </template>
 
+<script>
+import SuggestedApps from '@/components/SuggestedApps.vue';
+import TitleBar from '@/components/TitleBar.vue';
+import TitleBarText from '@/components/TitleBarText.vue';
+
+export default {
+  components: {
+    SuggestedApps,
+    TitleBar,
+    TitleBarText,
+  },
+
+};
+</script>
+
+
 <style lang="postcss" module>
+.wrap {
+  @apply p-8;
+}
+
+.content {
+  @apply mb-8;
+}
+
 .title {
-  @apply p-8 font-light text-3xl;
+  @apply mb-2 font-light text-3xl;
 }
 </style>