src/components/generic/PageIndicator.vue

@@ -15,7 +15,6 @@
         return new Array(this.paginator.numberOfPages).fill(0).map((_, index) => index + 1)
       },
       shouldDisplay () {
-        console.log(this.paginator.collection, this.paginator.useTouch, this.paginator.behavior === 'replace', this.paginator.numberOfPages)
         return this.paginator.useTouch && this.paginator.behavior === 'replace' && this.paginator.numberOfPages > 1
       }
     },

src/views/ProfilePage.vue

 <template>
-  <app-page :title="$t('profile_page_title')">
+  <app-page :title="$t('profile_page.title')">
     <app-container class="my-5">
       <app-section>
-        <app-header :title="$t('profile_page_title')"/>
+        <app-header :title="$t('profile_page.title')" class="mb-5"/>
+          <app-paginator :collection="dataSources.recordings" :min-height="300" id="saved_recordings"
+                         :page-size="savedRecordingSize.count" :filters="savedRecordingFilters"
+                         :empty-message="$t('profile_page.no_saved_recordings')">
+            <template v-slot:header>
+              <app-header :title="$t('profile_page.saved_recordings')" :level="2" class="mb-3">
+                <app-paginator-nav/>
+              </app-header>
+            </template>
+            <template v-slot:default="{ items }">
+              <app-auto-grid :default-size="savedRecordingSize.columns" tag="ul">
+                <li v-for="recording in items" :key="recording.id">
+                  <RecordingPreview :recording="recording"/>
+                </li>
+              </app-auto-grid>
+            </template>
+          </app-paginator>
       </app-section>
     </app-container>
   </app-page>
 </template>
 
 <script>
-  export default {}
+  import RecordingPreview from '../components/model/RecordingPreview'
+  import { mapState } from '../store'
+
+  export default {
+    components: { RecordingPreview },
+    computed: {
+      ...mapState({
+        bookmarks: state => state.bookmarks
+      }),
+      savedRecordingSize () {
+        return {
+          xs: { count: 3, columns: 1 },
+          md: { count: 9, columns: 3 }
+        }[this.$mq] || { count: 12, columns: 4 }
+      },
+      savedRecordingFilters () {
+        return {
+          id: this.bookmarks.recordings.length > 0
+            ? this.bookmarks.recordings.join(',')
+            // this id is never assigned so we can
+            // use it to empty the result set
+            : '-1'
+        }
+      }
+    },
+    inject: ['dataSources']
+  }
 </script>
 
 <i18n lang="yaml">
   en:
-    profile_page_title: Profile
+    profile_page.title: Profile
+    profile_page.saved_recordings: Saved Posts
+    profile_page.no_saved_recordings: >
+      You haven’t saved any posts yet. Show some love
+      and press that little heart button if you like a post! 🥰
 
   de:
-    profile_page_title: Profil
+    profile_page.title: Profil
+    profile_page.saved_recordings: Gespeicherte Beiträge
+    profile_page.no_saved_recordings: >
+      Du hast dir bisher keine Beiträge gemerkt. Zeig ein wenig Liebe
+      und drücke den kleinen Herz-Button, wenn dir ein Beitrag gefällt. 🥰
 </i18n>