watchers and stargazers pages

frontend/locales/en.ts

@@ -55,6 +55,8 @@ const msgs: LocaleMessageObject = {
         },
     },
     project: {
+        stargazers: 'Stargazers',
+        watchers: 'Watchers',
         category: {
             info: 'Category: {0}',
             admin_tools: 'Admin Tools',

frontend/pages/_author/_slug/stars.vue

@@ -1,13 +1,31 @@
 <template>
-    <div>{{ $nuxt.$route.name }}</div>
+    <v-card>
+        <v-card-title>
+            {{ $t('project.stargazers') }}
+        </v-card-title>
+        <v-card-text>
+            <v-row>
+                <v-col v-for="stargazer in stargazers" :key="stargazer.name" md="4">
+                    <UserAvatar clazz="user-avatar-xs" :username="stargazer.name" :avatar-url="$util.avatarUrl(stargazer.name)"></UserAvatar>
+                    {{ stargazer.name }}
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
+import { User } from 'hangar-api';
+import UserAvatar from '~/components/UserAvatar.vue';
 
-// TODO implement ProjectStarsPage
-@Component
-export default class ProjectStarsPage extends Vue {}
+@Component({
+    components: { UserAvatar },
+})
+export default class ProjectStarsPage extends Vue {
+    // todo load stargazers from server
+    stargazers: Array<User> = [this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser()];
+}
 </script>
 
 <style lang="scss" scoped></style>

frontend/pages/_author/_slug/watchers.vue

@@ -1,13 +1,31 @@
 <template>
-    <div>{{ $nuxt.$route.name }}</div>
+    <v-card>
+        <v-card-title>
+            {{ $t('project.watchers') }}
+        </v-card-title>
+        <v-card-text>
+            <v-row>
+                <v-col v-for="watcher in watchers" :key="watcher.name" md="4">
+                    <UserAvatar clazz="user-avatar-xs" :username="watcher.name" :avatar-url="$util.avatarUrl(watcher.name)"></UserAvatar>
+                    {{ watcher.name }}
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'nuxt-property-decorator';
+import { User } from 'hangar-api';
+import UserAvatar from '~/components/UserAvatar.vue';
 
-// TODO implement ProjectWatchersPage
-@Component
-export default class ProjectWatchersPage extends Vue {}
+@Component({
+    components: { UserAvatar },
+})
+export default class ProjectWatchersPage extends Vue {
+    // todo load watchers from server
+    watchers: Array<User> = [this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser(), this.$util.dummyUser()];
+}
 </script>
 
 <style lang="scss" scoped></style>