From 18b7201d044db0398fda648ebbc7524f2c48b816 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Thu, 26 Aug 2021 15:15:49 +0300
Subject: [PATCH] feat(frontend): various

---
 packages/frontend/package-lock.json           |  21 ++-
 packages/frontend/package.json                |   1 +
 packages/frontend/src/App.vue                 |   5 +
 .../src/components/ErrorPlaceholder.vue       |  44 +++--
 .../src/components/LatestBlogposts.vue        |  76 +++++++++
 .../src/components/ListItemActivity.vue       | 158 ++++++++++--------
 .../src/components/NoDataPlaceholder.vue      | 107 ++++++------
 packages/frontend/src/components/Renderer.vue |   8 +-
 packages/frontend/src/components/UserPill.vue |   6 +-
 .../components/dialogs/ServerInviteDialog.vue |  74 ++++----
 .../components/dialogs/StreamNewDialog.vue    |   2 +
 packages/frontend/src/views/Timeline.vue      | 112 +++++++------
 .../frontend/src/views/stream/Activity.vue    |   3 +-
 packages/frontend/src/views/stream/Branch.vue |   2 +-
 .../src/views/stream/Collaborators.vue        |   0
 .../frontend/src/views/stream/Details_re.vue  |   4 +-
 16 files changed, 382 insertions(+), 241 deletions(-)
 create mode 100644 packages/frontend/src/components/LatestBlogposts.vue
 delete mode 100644 packages/frontend/src/views/stream/Collaborators.vue

diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
index 2408029cd..d1e48dd51 100644
--- a/packages/frontend/package-lock.json
+++ b/packages/frontend/package-lock.json
@@ -1873,6 +1873,14 @@
         "three": "0.124.0"
       }
     },
+    "@tryghost/content-api": {
+      "version": "1.5.12",
+      "resolved": "https://registry.npmjs.org/@tryghost/content-api/-/content-api-1.5.12.tgz",
+      "integrity": "sha512-Ys0QiYu3EKQm+TPDW5kApH+SUYB9Nt8sBqltZ+2f8Trr+xL1/tBcNl82UyEuSZDd6dbzCO3aTDiFi/c7XKvntQ==",
+      "requires": {
+        "axios": "^0.21.1"
+      }
+    },
     "@types/accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@@ -3805,6 +3813,14 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -7613,7 +7629,6 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
       "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==",
-      "dev": true,
       "requires": {
         "debug": "^3.0.0"
       },
@@ -7622,7 +7637,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -10091,8 +10105,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "multicast-dns": {
       "version": "6.2.3",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 781db5ef4..71e4c7ef5 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@speckle/viewer": "^2.0.5",
+    "@tryghost/content-api": "^1.5.12",
     "@vuejs-community/vue-filter-date-format": "^1.6.3",
     "@vuejs-community/vue-filter-date-parse": "^1.1.6",
     "apexcharts": "^3.26.3",
diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 4eee6a2b9..30e3dfbf2 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -23,6 +23,11 @@ export default {
 }
 </script>
 <style lang="css">
+
+.v-timeline:before{
+  top: 40px !important;
+}
+
 .marked-preview h1 {
   padding-bottom: 10px;
   padding-top: 10px;
diff --git a/packages/frontend/src/components/ErrorPlaceholder.vue b/packages/frontend/src/components/ErrorPlaceholder.vue
index 7c19a80cc..895f0dbb7 100644
--- a/packages/frontend/src/components/ErrorPlaceholder.vue
+++ b/packages/frontend/src/components/ErrorPlaceholder.vue
@@ -5,27 +5,37 @@
         <v-card flat tile color="transparent" class="pa-0">
           <div class="d-flex flex-column justify-space-between align-center mb-10">
             <v-img contain max-height="200" src="@/assets/emptybox.png" v-if="!errorType"></v-img>
-            <v-img contain max-height="200" src="@/assets/lockbox.png" v-else-if="errorType=='access'"></v-img>
-            <v-img contain max-height="200" src="@/assets/404box.png" v-else-if="errorType=='404'"></v-img>
+            <v-img
+              contain
+              max-height="200"
+              src="@/assets/lockbox.png"
+              v-else-if="errorType == 'access'"
+            ></v-img>
+            <v-img
+              contain
+              max-height="200"
+              src="@/assets/404box.png"
+              v-else-if="errorType == '404'"
+            ></v-img>
           </div>
           <div class="pl-4 text-center mb-2 space-grotesk">
             <slot name="default"></slot>
           </div>
-          <slot name="actions">
-            <v-list rounded class="transparent">
-              <v-list-item link class="primary mb-4" dark to="/">
-                <v-list-item-icon>
-                  <v-icon>mdi-home</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>Home</v-list-item-title>
-                  <v-list-item-subtitle class="caption">
-                    Go to the homepage
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </slot>
+          <v-container style="max-width: 500px">
+            <slot name="actions">
+              <v-list rounded class="transparent">
+                <v-list-item link class="primary mb-4" dark to="/">
+                  <v-list-item-icon>
+                    <v-icon>mdi-home</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>Home</v-list-item-title>
+                    <v-list-item-subtitle class="caption">Go to the homepage</v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </slot>
+          </v-container>
         </v-card>
       </v-col>
     </v-row>
diff --git a/packages/frontend/src/components/LatestBlogposts.vue b/packages/frontend/src/components/LatestBlogposts.vue
new file mode 100644
index 000000000..1460e6bb1
--- /dev/null
+++ b/packages/frontend/src/components/LatestBlogposts.vue
@@ -0,0 +1,76 @@
+<template>
+	<v-card rounded="lg" style="overflow: hidden" class="transparent elevation-0">
+		<p class="caption">Latest Tutorials:</p>
+		<div v-for="post in posts" :key="post.uuid">
+			<v-hover v-slot="{ hover }">
+				<v-card class="my-5">
+					<v-img
+						:src="post.feature_image"
+						height="100"
+						:gradient="`to top right, ${
+							$vuetify.theme.dark
+								? 'rgba(100,115,201,.33), rgba(25,32,72,.7)'
+								: 'rgba(100,115,231,.15), rgba(25,32,72,.05)'
+						}`"
+					></v-img>
+					<v-toolbar flat>
+						<v-toolbar-title class="body-2">
+							<a :href="post.url" target="_blank" class="text-decoration-none">
+								<b>{{ post.title }}</b>
+							</a>
+							<br />
+							<div class="caption grey--text">
+								{{ post.excerpt }}
+							</div>
+						</v-toolbar-title>
+						<v-spacer />
+						<v-btn icon :href="post.url" target="_blank">
+							<v-icon small>mdi-open-in-new</v-icon>
+						</v-btn>
+						<v-spacer></v-spacer>
+					</v-toolbar>
+				</v-card>
+			</v-hover>
+		</div>
+		<v-toolbar class="my-4" rounded="lg" dense flat>
+			<v-toolbar-title class="body-2">
+				<a href="https://speckle.systems/tutorials" target="_blank" class="text-decoration-none">
+					More Tutorials
+				</a>
+			</v-toolbar-title>
+			<v-btn icon href="https://speckle.systems/tutorials" target="_blank">
+				<v-icon small>mdi-arrow-right</v-icon>
+			</v-btn>
+		</v-toolbar>
+	</v-card>
+</template>
+<script>
+import GhostContentAPI from '@tryghost/content-api'
+
+export default {
+	data() {
+		return {
+			posts: []
+		}
+	},
+	mounted() {
+		this.api = new GhostContentAPI({
+			url: 'https://speckle.systems',
+			key: 'bf4ca76b9606d0c13b0edf5dc1',
+			version: 'v3'
+		})
+
+		this.api.posts
+			.browse({
+				filter: 'tag:tutorials',
+				limit: 4
+			})
+			.then((posts) => {
+				this.posts = posts
+			})
+			.catch((err) => {
+				console.log(err)
+			})
+	}
+}
+</script>
diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index 713b54b56..d3099db5c 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-timeline-item>
+  <v-timeline-item medium>
     <template #icon>
-      <user-avatar v-if="user" :id="user.id" :avatar="user.avatar" :name="user.name" :size="30" />
+      <user-avatar v-if="user" :id="user.id" :avatar="user.avatar" :name="user.name" />
     </template>
     <v-row class="pt-1 timeline-activity">
       <v-col cols="12" class="mb-0 pb-0">
@@ -22,51 +22,53 @@
         <v-card
           v-if="lastActivity.actionType.includes('stream_permissions') && stream"
           class="activity-card"
-          flat
+          :flat="$vuetify.theme.dark"
         >
           <v-card-text class="pa-5 body-1">
-            <v-row
-              v-for="activityItem in activityGroup"
-              :key="activityItem.time"
-              class="align-center"
-            >
-              <v-col cols="12" md="10">
-                <user-pill
-                  class="mr-3"
-                  :user-id="activityItem.info.targetUser"
-                  :color="
-                    lastActivity.actionType === 'stream_permissions_add' ? 'success' : 'error'
-                  "
-                ></user-pill>
+            <v-container>
+              <v-row
+                v-for="activityItem in activityGroup"
+                :key="activityItem.time"
+                class="align-center"
+              >
+                <v-col cols="12" md="10">
+                  <user-pill
+                    class="mr-3"
+                    :user-id="activityItem.info.targetUser"
+                    :color="
+                      lastActivity.actionType === 'stream_permissions_add' ? 'success' : 'error'
+                    "
+                  ></user-pill>
 
-                <span v-if="$vuetify.breakpoint.smAndUp" class="mr-3 body-2 font-italic">
-                  {{
-                    lastActivity.actionType === 'stream_permissions_add'
-                      ? 'user added as'
-                      : 'user removed'
-                  }}
-                </span>
-                <v-chip v-if="activityItem.info.role" small outlined class="my-2">
-                  <v-icon small left>mdi-account-key-outline</v-icon>
-                  {{ activityItem.info.role.split(':')[1] }}
-                </v-chip>
-              </v-col>
-              <v-col v-if="$vuetify.breakpoint.mdAndUp" cols="2" class="text-right">
-                <v-btn
-                  v-if="
-                    activityItem.info.targetUser &&
-                    activityItem.actionType === `stream_permissions_add`
-                  "
-                  text
-                  outlined
-                  small
-                  :to="'/profile/' + activityItem.info.targetUser"
-                  color="primary"
-                >
-                  view
-                </v-btn>
-              </v-col>
-            </v-row>
+                  <span v-if="$vuetify.breakpoint.smAndUp" class="mr-3 body-2 font-italic">
+                    {{
+                      lastActivity.actionType === 'stream_permissions_add'
+                        ? 'user added as'
+                        : 'user removed'
+                    }}
+                  </span>
+                  <v-chip v-if="activityItem.info.role" small outlined class="my-2">
+                    <v-icon small left>mdi-account-key-outline</v-icon>
+                    {{ activityItem.info.role.split(':')[1] }}
+                  </v-chip>
+                </v-col>
+                <v-col v-if="$vuetify.breakpoint.mdAndUp" cols="2" class="text-right">
+                  <v-btn
+                    v-if="
+                      activityItem.info.targetUser &&
+                      activityItem.actionType === `stream_permissions_add`
+                    "
+                    text
+                    outlined
+                    small
+                    :to="'/profile/' + activityItem.info.targetUser"
+                    color="primary"
+                  >
+                    view
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-container>
           </v-card-text>
         </v-card>
 
@@ -74,34 +76,36 @@
         <v-card
           v-else-if="lastActivity.resourceType === 'stream' && stream"
           class="activity-card"
-          flat
+          :flat="$vuetify.theme.dark"
         >
           <v-card-text class="pa-5 body-1">
-            <v-row class="align-center">
-              <router-link :to="url" class="title">
-                <v-icon color="primary" small>mdi-compare-vertical</v-icon>
-                {{ stream.name }}
-              </router-link>
-              <span class="ml-3 body-2 font-italic">{{ lastActivityBrief.actionText }}</span>
+            <v-container>
+              <v-row class="align-center">
+                <router-link :to="url" class="title">
+                  <v-icon color="primary" small>mdi-compare-vertical</v-icon>
+                  {{ stream.name }}
+                </router-link>
+                <span class="ml-3 body-2 font-italic">{{ lastActivityBrief.actionText }}</span>
 
-              <v-spacer />
+                <v-spacer />
 
-              <v-btn
-                v-if="
-                  (lastActivity.actionType === `stream_create` ||
-                    lastActivity.actionType === `stream_update`) &&
-                  $vuetify.breakpoint.mdAndUp
-                "
-                text
-                outlined
-                small
-                exact
-                :to="url"
-                color="primary"
-              >
-                view
-              </v-btn>
-            </v-row>
+                <v-btn
+                  v-if="
+                    (lastActivity.actionType === `stream_create` ||
+                      lastActivity.actionType === `stream_update`) &&
+                    $vuetify.breakpoint.mdAndUp
+                  "
+                  text
+                  outlined
+                  small
+                  exact
+                  :to="url"
+                  color="primary"
+                >
+                  view
+                </v-btn>
+              </v-row>
+            </v-container>
 
             <div class="mt-3">
               <div
@@ -157,16 +161,20 @@
         </v-card>
 
         <!-- BRANCHES -->
-        <v-card v-else-if="lastActivity.resourceType === 'branch'" class="activity-card" flat>
-          <v-card-text>
+        <v-card
+          v-else-if="lastActivity.resourceType === 'branch'"
+          class="activity-card"
+          :flat="$vuetify.theme.dark"
+        >
+          <v-card-text class="pa-5 body-1">
             <v-chip :to="url" :color="lastActivityBrief.color">
               <v-icon small class="mr-2 float-left" light>{{ lastActivityBrief.icon }}</v-icon>
               {{ branchName }}
             </v-chip>
-            <!-- <span class="ml-3 body-2 font-italic">{{ lastActivityBrief.actionText }}</span> -->
+            <span class="ml-3 body-2 font-italic">{{ lastActivityBrief.actionText }}</span>
             <div class="mt-3">
               <div
-                v-for="activityItem in activityGroup.slice(0, 1)"
+                v-for="activityItem in activityGroup"
                 :key="activityItem.time"
                 v-html="updatedDescription(activityItem)"
               ></div>
@@ -175,7 +183,11 @@
         </v-card>
 
         <!-- COMMITS -->
-        <v-card v-else-if="lastActivity.resourceType === 'commit'" class="activity-card" flat>
+        <v-card
+          v-else-if="lastActivity.resourceType === 'commit'"
+          class="activity-card"
+          :flat="$vuetify.theme.dark"
+        >
           <v-container>
             <v-row class="align-center">
               <v-col sm="10" cols="12">
diff --git a/packages/frontend/src/components/NoDataPlaceholder.vue b/packages/frontend/src/components/NoDataPlaceholder.vue
index abb7ebd87..8166aa04d 100644
--- a/packages/frontend/src/components/NoDataPlaceholder.vue
+++ b/packages/frontend/src/components/NoDataPlaceholder.vue
@@ -9,57 +9,68 @@
           <div class="pl-4 text-center mb-2 space-grotesk">
             <slot name="default"></slot>
           </div>
-          <slot name="actions">
-            <v-list rounded class="transparent">
-              <v-list-item link class="primary mb-4" dark>
-                <v-list-item-icon>
-                  <v-icon>mdi-swap-horizontal</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>Connectors</v-list-item-title>
-                  <v-list-item-subtitle class="caption">
-                    Learn how to send data from various software.
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
+          <v-container style="max-width: 500px">
+            <slot name="actions">
+              <v-list rounded class="transparent">
+                <v-list-item link class="primary mb-4" dark>
+                  <v-list-item-icon>
+                    <v-icon>mdi-swap-horizontal</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>Connectors</v-list-item-title>
+                    <v-list-item-subtitle class="caption">
+                      Learn how to send data from various software.
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
 
-              <v-list-item link :class="`grey ${ $vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`">
-                <v-list-item-icon>
-                  <v-icon>mdi-school</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>Tutorials</v-list-item-title>
-                  <v-list-item-subtitle class="caption">
-                    Tips, tricks and how-to guides.
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
+                <v-list-item
+                  link
+                  :class="`grey ${$vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`"
+                >
+                  <v-list-item-icon>
+                    <v-icon>mdi-school</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>Tutorials</v-list-item-title>
+                    <v-list-item-subtitle class="caption">
+                      Tips, tricks and how-to guides.
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
 
-              <v-list-item link :class="`grey ${ $vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`">
-                <v-list-item-icon>
-                  <v-icon>mdi-book-open-variant</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>Docs</v-list-item-title>
-                  <v-list-item-subtitle class="caption">
-                    Documentation and training material for all connectors.
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
+                <v-list-item
+                  link
+                  :class="`grey ${$vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`"
+                >
+                  <v-list-item-icon>
+                    <v-icon>mdi-book-open-variant</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>Docs</v-list-item-title>
+                    <v-list-item-subtitle class="caption">
+                      Documentation and training material for all connectors.
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
 
-              <v-list-item link :class="`grey ${ $vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`">
-                <v-list-item-icon>
-                  <v-icon>mdi-forum</v-icon>
-                </v-list-item-icon>
-                <v-list-item-content>
-                  <v-list-item-title>Community</v-list-item-title>
-                  <v-list-item-subtitle class="caption">
-                    Our community is friendly and here to help!
-                  </v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </slot>
+                <v-list-item
+                  link
+                  :class="`grey ${$vuetify.theme.dark ? 'darken-4' : 'lighten-4'} mb-4`"
+                >
+                  <v-list-item-icon>
+                    <v-icon>mdi-forum</v-icon>
+                  </v-list-item-icon>
+                  <v-list-item-content>
+                    <v-list-item-title>Community</v-list-item-title>
+                    <v-list-item-subtitle class="caption">
+                      Our community is friendly and here to help!
+                    </v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </slot>
+          </v-container>
         </v-card>
       </v-col>
     </v-row>
diff --git a/packages/frontend/src/components/Renderer.vue b/packages/frontend/src/components/Renderer.vue
index d055396fc..061b59fc9 100644
--- a/packages/frontend/src/components/Renderer.vue
+++ b/packages/frontend/src/components/Renderer.vue
@@ -161,9 +161,13 @@
             </template>
             Show viewer help
           </v-tooltip>
-          <v-dialog v-model="showObjectDetails" width="500">
+          <v-dialog v-model="showObjectDetails" width="500" :fullscreen="$vuetify.breakpoint.smAndDown">
             <v-card>
-              <v-card-title>Selection Details</v-card-title>
+              <v-toolbar>
+                <v-toolbar-title>Selection Details</v-toolbar-title>
+                <v-spacer></v-spacer>
+                <v-btn icon @click="showObjectDetails=false"><v-icon>mdi-close</v-icon></v-btn>
+              </v-toolbar>
               <v-sheet>
                 <div v-if="selectedObjects.length !== 0">
                   <object-simple-viewer
diff --git a/packages/frontend/src/components/UserPill.vue b/packages/frontend/src/components/UserPill.vue
index b7596a49e..e015be7c2 100644
--- a/packages/frontend/src/components/UserPill.vue
+++ b/packages/frontend/src/components/UserPill.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- <v-chip v-if="targetUser" pill :color="color"> -->
+  <v-chip v-if="targetUser" pill :color="color">
     <v-avatar left>
       <user-avatar
         :id="targetUser.id"
@@ -9,8 +9,8 @@
       />
     </v-avatar>
 
-    <!-- {{ targetUser.name }} -->
-  <!-- </v-chip> -->
+    {{ targetUser.name }}
+  </v-chip>
 </template>
 <script>
 import gql from 'graphql-tag'
diff --git a/packages/frontend/src/components/dialogs/ServerInviteDialog.vue b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
index 19f0d6590..b99cb246f 100644
--- a/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
+++ b/packages/frontend/src/components/dialogs/ServerInviteDialog.vue
@@ -1,43 +1,39 @@
 <template>
-  <div>
-    <v-dialog v-model="showDialog" max-width="400">
-      <v-card>
-        <v-toolbar color="primary" dark>
-          <v-app-bar-nav-icon style="pointer-events: none">
-            <v-icon>mdi-email</v-icon>
-          </v-app-bar-nav-icon>
-          <v-toolbar-title>Invite Colleagues!</v-toolbar-title>
-        </v-toolbar>
-        <v-alert v-model="showError" dismissible type="error" :class="`${success ? 'mb-0' : ''}`">
-          {{ error }}
-        </v-alert>
-        <v-alert v-model="success" timeout="3000" dismissible type="success">
-          Great! An invite link has been sent.
-        </v-alert>
-        <v-form ref="form" v-model="valid" class="px-2" @submit.prevent="sendInvite">
-          <v-card-text class="pb-0 mb-0">
-            Speckle will send a server invite link to the email below. You can also add a personal
-            message if you want to.
-          </v-card-text>
-          <v-card-text class="pt-0 mt-0">
-            <v-text-field
-              v-model="email"
-              :rules="validation.emailRules"
-              label="email"
-            ></v-text-field>
-            <v-text-field
-              v-model="message"
-              :rules="validation.messageRules"
-              label="message"
-            ></v-text-field>
-          </v-card-text>
-          <v-card-actions class="pb-3">
-            <v-btn block large color="primary" type="submit">Send invite</v-btn>
-          </v-card-actions>
-        </v-form>
-      </v-card>
-    </v-dialog>
-  </div>
+  <v-dialog v-model="showDialog" max-width="400" :fullscreen="$vuetify.breakpoint.smAndDown">
+    <v-card>
+      <v-toolbar color="primary" dark>
+        <v-app-bar-nav-icon style="pointer-events: none">
+          <v-icon>mdi-email</v-icon>
+        </v-app-bar-nav-icon>
+        <v-toolbar-title>Invite Colleagues!</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="showDialog = false"><v-icon>mdi-close</v-icon></v-btn>
+      </v-toolbar>
+      <v-alert v-model="showError" dismissible type="error" :class="`${success ? 'mb-0' : ''}`">
+        {{ error }}
+      </v-alert>
+      <v-alert v-model="success" timeout="3000" dismissible type="success">
+        Great! An invite link has been sent.
+      </v-alert>
+      <v-form ref="form" v-model="valid" class="px-2" @submit.prevent="sendInvite">
+        <v-card-text class="pb-0 mb-0">
+          Speckle will send a server invite link to the email below. You can also add a personal
+          message if you want to.
+        </v-card-text>
+        <v-card-text class="pt-0 mt-0">
+          <v-text-field v-model="email" :rules="validation.emailRules" label="email"></v-text-field>
+          <v-text-field
+            v-model="message"
+            :rules="validation.messageRules"
+            label="message"
+          ></v-text-field>
+        </v-card-text>
+        <v-card-actions class="pb-3">
+          <v-btn block large color="primary" type="submit">Send invite</v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
 </template>
 <script>
 import gql from 'graphql-tag'
diff --git a/packages/frontend/src/components/dialogs/StreamNewDialog.vue b/packages/frontend/src/components/dialogs/StreamNewDialog.vue
index 18a782e50..f3c32e68b 100644
--- a/packages/frontend/src/components/dialogs/StreamNewDialog.vue
+++ b/packages/frontend/src/components/dialogs/StreamNewDialog.vue
@@ -5,6 +5,8 @@
         <v-icon>mdi-plus-box</v-icon>
       </v-app-bar-nav-icon>
       <v-toolbar-title>Create a New Stream</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn icon @click="$emit('close')"><v-icon>mdi-close</v-icon></v-btn>
     </v-toolbar>
     <v-form ref="form" v-model="valid" lazy-validation class="px-2" @submit.prevent="createStream">
       <v-card-text>
diff --git a/packages/frontend/src/views/Timeline.vue b/packages/frontend/src/views/Timeline.vue
index 89cc92dcb..97eca5e69 100644
--- a/packages/frontend/src/views/Timeline.vue
+++ b/packages/frontend/src/views/Timeline.vue
@@ -57,6 +57,7 @@
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
+
     <v-app-bar app style="padding-left: 56px" flat>
       <v-app-bar-nav-icon
         @click="activityNav = !activityNav"
@@ -75,66 +76,71 @@
     </v-app-bar>
 
     <server-invite-dialog ref="serverInviteDialog" />
-    <v-dialog v-model="newStreamDialog" max-width="500">
+    <v-dialog v-model="newStreamDialog" max-width="500" :fullscreen="$vuetify.breakpoint.smAndDown">
       <stream-new-dialog
         v-if="streams"
         :open="newStreamDialog"
         :redirect="streams.items.length > 0"
         @created="newStreamDialog = false"
+        @close="newStreamDialog = false"
       />
     </v-dialog>
 
-    <v-row>
-      <v-col cols="12">
-        <v-row>
-          <v-col cols="12">
-            <getting-started-wizard />
-          </v-col>
-          <v-col v-if="$apollo.loading && !timeline">
-            <div class="my-5">
-              <v-timeline align-top dense>
-                <v-timeline-item v-for="i in 6" :key="i" medium>
-                  <v-skeleton-loader type="article"></v-skeleton-loader>
-                </v-timeline-item>
-              </v-timeline>
-            </div>
-          </v-col>
+    <v-row class="pr-4">
+      <!-- <v-col cols="12"> -->
+        <!-- <getting-started-wizard /> -->
+      <!-- </v-col> -->
+      <v-col v-if="$apollo.loading && !timeline">
+        <div class="my-5">
+          <v-timeline align-top dense>
+            <v-timeline-item v-for="i in 6" :key="i" medium>
+              <v-skeleton-loader type="article"></v-skeleton-loader>
+            </v-timeline-item>
+          </v-timeline>
+        </div>
+      </v-col>
 
-          <v-col v-else-if="timeline && timeline.items.length > 0">
-            <div>
-              <div v-if="timeline" key="activity-list">
-                <v-timeline align-top dense>
-                  <list-item-activity
-                    v-for="activity in groupedTimeline"
-                    :key="activity.time"
-                    :activity="activity"
-                    :activity-group="activity"
-                    class="my-1"
-                  ></list-item-activity>
-                  <infinite-loading
-                    v-if="timeline && timeline.items.length < timeline.totalCount"
-                    @infinite="infiniteHandler"
-                  >
-                    <div slot="no-more">This is all your activity!</div>
-                    <div slot="no-results">There are no ctivities to load</div>
-                  </infinite-loading>
-                </v-timeline>
-              </div>
-            </div>
-          </v-col>
-          <v-col v-else cols="12">
-            <div class="ma-5 headline justify-center text-center">
-              🎈
-              <br />
-              Your feed is empty!
+      <v-col cols="12" lg="9" v-else-if="timeline && timeline.items.length > 0" class="pr-5">
+        <div>
+          <div v-if="timeline" key="activity-list">
+            <v-timeline align-top dense>
+              <list-item-activity
+                v-for="activity in groupedTimeline"
+                :key="activity.time"
+                :activity="activity"
+                :activity-group="activity"
+                class="my-1"
+              ></list-item-activity>
+              <infinite-loading
+                v-if="timeline && timeline.items.length < timeline.totalCount"
+                @infinite="infiniteHandler"
+              >
+                <div slot="no-more">This is all your activity!</div>
+                <div slot="no-results">There are no ctivities to load</div>
+              </infinite-loading>
+            </v-timeline>
+          </div>
+        </div>
+      </v-col>
+      <v-col v-else cols="12">
+        <div class="ma-5 headline justify-center text-center">
+          🎈
+          <br />
+          Your feed is empty!
 
-              <br />
-              <span class="subtitle-2 font-italic">
-                Try creating a stream, sending data etc and your activity will show up here.
-              </span>
-            </div>
-          </v-col>
-        </v-row>
+          <br />
+          <span class="subtitle-2 font-italic">
+            Try creating a stream, sending data etc and your activity will show up here.
+          </span>
+        </div>
+      </v-col>
+      <v-col cols="12" lg="3" xl="3" v-show="$vuetify.breakpoint.lgAndUp" class="mt-7">
+        <latest-blogposts></latest-blogposts>
+        <v-card rounded="lg" class="mt-2">
+          <v-card-text class="caption">
+            <p class="mb-0">At <a href="https://speckle.systems" target="_blank" class="text-decoration-none">Speckle</a>, we're working tirelessly to bring you the best open source data platform for AEC. Tell us what you think on our <a href="https://speckle.community" target="_blank" class="text-decoration-none">forum</a>, and don't forget to give us a ⭐️ on <a href="https://github.com/specklesystems/speckle-sharp" target="_blank" class="text-decoration-none">Github</a>!</p>
+          </v-card-text>
+        </v-card>
       </v-col>
     </v-row>
   </v-container>
@@ -149,6 +155,7 @@ import GettingStartedWizard from '../components/GettingStartedWizard'
 import ServerInviteDialog from '@/components/dialogs/ServerInviteDialog.vue'
 import StreamNewDialog from '@/components/dialogs/StreamNewDialog'
 import SearchBar from '@/components/SearchBar'
+import LatestBlogposts from '@/components/LatestBlogposts'
 
 export default {
   name: 'Timeline',
@@ -158,7 +165,8 @@ export default {
     ServerInviteDialog,
     StreamNewDialog,
     GettingStartedWizard,
-    SearchBar
+    SearchBar,
+    LatestBlogposts
   },
   props: {
     type: String
@@ -195,6 +203,7 @@ export default {
                 resourceType
                 time
                 info
+                message
               }
             }
           }
@@ -249,6 +258,7 @@ export default {
         }
         return prev
       }, [])
+      // console.log(groupedTimeline)
       this.groupedTimeline = groupedTimeline
     },
     showServerInviteDialog() {
diff --git a/packages/frontend/src/views/stream/Activity.vue b/packages/frontend/src/views/stream/Activity.vue
index 95969c9da..76c32472f 100644
--- a/packages/frontend/src/views/stream/Activity.vue
+++ b/packages/frontend/src/views/stream/Activity.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <v-timeline v-if="stream" align-top dense clipped>
+      <v-timeline v-if="stream" align-top dense>
         <list-item-activity
           v-for="activity in groupedActivity"
           :key="activity.time"
@@ -62,6 +62,7 @@ export default {
                 resourceType
                 time
                 info
+                message
               }
             }
           }
diff --git a/packages/frontend/src/views/stream/Branch.vue b/packages/frontend/src/views/stream/Branch.vue
index 3125ada7c..943169bfa 100644
--- a/packages/frontend/src/views/stream/Branch.vue
+++ b/packages/frontend/src/views/stream/Branch.vue
@@ -28,7 +28,7 @@
         <branch-edit-dialog ref="editBranchDialog" />
 
         <div style="height: 60vh" v-if="latestCommitObjectUrl">
-          <renderer :object-url="latestCommitObjectUrl" />
+          <renderer :object-url="latestCommitObjectUrl" show-selection-helper/>
         </div>
 
         <v-list class="pa-0 ma-0" v-if="stream.branch.commits.items.length > 0">
diff --git a/packages/frontend/src/views/stream/Collaborators.vue b/packages/frontend/src/views/stream/Collaborators.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/frontend/src/views/stream/Details_re.vue b/packages/frontend/src/views/stream/Details_re.vue
index 226b0c62c..c49925847 100644
--- a/packages/frontend/src/views/stream/Details_re.vue
+++ b/packages/frontend/src/views/stream/Details_re.vue
@@ -6,7 +6,7 @@
     <v-row v-if="stream && stream.commits.totalCount !== 0" no-gutters>
       <v-col cols="12" class="pa-0 ma-0">
         <div style="height: 60vh" v-if="latestCommitObjectUrl">
-          <renderer :object-url="latestCommitObjectUrl" />
+          <renderer :object-url="latestCommitObjectUrl" show-selection-helper/>
         </div>
 
         <v-list class="pa-0 ma-0">
@@ -56,7 +56,7 @@
           </v-row>
         </v-card>
       </v-col>
-      <v-col cols="12">
+      <v-col cols="12" class="pr-10">
         <v-card class="transparent elevation-0">
           <v-card-title>Stream Activity</v-card-title>
           <v-card-text class="caption">Recent event log</v-card-text>