:recycle: incorporated Wave Card and Drawer components to home screen

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-w-app(style="display:flex; flex-direction:row-reverse; gap: 40px; justify-content: flex-end;")
+w-app(style="margin:12px;")
     //- w-drawer(v-model="openDrawer")
     //- w-flex.my12(:gap="3" align-center wrap)
     //-     w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info

frontend/src/components/ProfileCardList.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-section.profile-card-list
+section.profile-card-list(:style="{'display': 'flex'}")
     .swipe(
         v-if="!isGrid"
         :config="config"
@@ -8,8 +8,13 @@ section.profile-card-list
         v-for="(profile, i) in loadedProfiles"
         :style="{ 'z-index': 1000-i }"
     )
-        .card.randomize(
-            :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
+
+        //- .card.randomize(
+        //-     :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
+        //- )
+        w-card.card.randomize(
+            :image="`${profile.avatar}`"
+            :style="{'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)`}"
         )
             .card--content
                 p(style="color: magenta;") profile: {{ profile.pid }}

frontend/src/main.js

@@ -28,8 +28,8 @@ router.beforeEach((to, from, next) => {
 
 const run = entry => {
     const siimee = createApp(App)
-    // siimee.use(WaveUI, { components })
-    // new WaveUI(siimee)
+    siimee.use(WaveUI, { components })
+    new WaveUI(siimee)
 
     siimee.use(router)
     siimee.component('MainNav', MainNav)

frontend/src/views/HomeView.vue

@@ -1,16 +1,19 @@
 <template lang="pug">
-main(class="view--home"  style="display:flex; flex-direction:row; gap: 40px")
-    div
+main.view--home(style="display:flex; flex-direction:column; gap: 40px")
+    div.view--nav(style="display: flex; justify-content: space-between;")
         header
             h2 home - profile: {{ pid }}
+        w-drawer(v-model="openDrawer")
+        w-button(@click="openDrawer = true" outline="")
+            | Active Chats
   
-        article(v-if="cards.length && !loading")
-            ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
-  
-        p(v-else) Loading...
+    h2 Match Queue
+    article(v-if="cards.length && !loading")
+        ProfileCardList(:profiles="cards" :pid="pid" @reload="getCards")
 
-    MainNav(@show-sidebar="$emit('show-sidebar')")
+    p(v-else) Loading...
 
+    h2 Matches
     article(v-if="matches.length && !loading")
         ProfileCardList(:profiles="matches" :pid="pid" @reload="getCards")
     
@@ -59,6 +62,9 @@ export default {
     name: 'HomeView',
     components: { ProfileCardList },
     mixins: [mixins.pidMixin, mixins.cardMixin],
+    data: () => ({
+        openDrawer: false,
+    }),
     methods: {
         /** Gets called from cardMixin */
         async getCards() {