some initial work to make it possible to use "unregistered" timelines, i.e. not

reserving a timeline by name, instead just passing timeline object itself.

src/components/timeline/timeline.js

@@ -7,7 +7,6 @@ import { throttle } from 'lodash'
 const Timeline = {
   props: [
     'timeline',
-    'timelineName',
     'title',
     'userId',
     'tag',
@@ -55,7 +54,7 @@ const Timeline = {
     timelineFetcher.fetchAndUpdate({
       store,
       credentials,
-      timeline: this.timelineName,
+      timeline: this.timeline,
       showImmediately,
       userId: this.userId,
       tag: this.tag
@@ -70,32 +69,32 @@ const Timeline = {
   destroyed () {
     window.removeEventListener('scroll', this.scrollLoad)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
-    this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
+    this.$store.commit('setLoading', { timeline: this.timeline, value: false })
   },
   methods: {
     showNewStatuses () {
       if (this.timeline.flushMarker !== 0) {
-        this.$store.commit('clearTimeline', { timeline: this.timelineName })
-        this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+        this.$store.commit('clearTimeline', { timeline: this.timeline })
+        this.$store.commit('queueFlush', { timeline: this.timeline, id: 0 })
         this.fetchOlderStatuses()
       } else {
-        this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+        this.$store.commit('showNewStatuses', { timeline: this.timeline })
         this.paused = false
       }
     },
     fetchOlderStatuses: throttle(function () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
-      store.commit('setLoading', { timeline: this.timelineName, value: true })
+      store.commit('setLoading', { timeline: this.timeline, value: true })
       timelineFetcher.fetchAndUpdate({
         store,
         credentials,
-        timeline: this.timelineName,
+        timeline: this.timeline,
         older: true,
         showImmediately: true,
         userId: this.userId,
         tag: this.tag
-      }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
+      }).then(() => store.commit('setLoading', { timeline: this.timeline, value: false }))
     }, 1000, this),
     scrollLoad (e) {
       const bodyBRect = document.body.getBoundingClientRect()

src/components/user_profile/user_profile.js

@@ -1,6 +1,7 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeline from '../timeline/timeline.vue'
+import { emptyTl } from '../../modules/statuses.js'
 
 const UserProfile = {
   created () {
@@ -13,6 +14,11 @@ const UserProfile = {
   destroyed () {
     this.$store.dispatch('stopFetching', 'user')
   },
+  data () {
+    return {
+      favorites: emptyTl({ type: 'favorites', userId: this.userId })
+    }
+  },
   computed: {
     timeline () {
       return this.$store.state.statuses.timelines.user

src/components/user_profile/user_profile.vue

@@ -20,6 +20,7 @@
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
+      <Timeline :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" :timeline="favorites"/>
     </tab-switcher>
   </div>
   <div v-else class="panel user-profile-placeholder">