refactor(front): profile base tabs routerview

front/src/views/auth/ProfileActivity.vue

@@ -2,9 +2,11 @@
 import type { Actor } from '~/types'
 
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import PlaylistWidget from '~/components/playlists/Widget.vue'
 import TrackWidget from '~/components/audio/track/Widget.vue'
+import AlbumWidget from '~/components/album/Widget.vue'
 import RadioButton from '~/components/radios/Button.vue'
 
 interface Props {
@@ -14,49 +16,52 @@ interface Props {
 defineProps<Props>()
 
 const recentActivity = ref(0)
+
+const { t } = useI18n()
 </script>
 
 <template>
-  <section>
+  <Layout stack>
-    <div>
+    <radio-button
-      <radio-button
+      v-if="recentActivity > 0"
-        v-if="recentActivity > 0"
+      class="right floated"
-        class="right floated"
+      type="account"
-        type="account"
+      :object-id="{username: object.preferred_username, fullUsername: object.full_username}"
-        :object-id="{username: object.preferred_username, fullUsername: object.full_username}"
+      :client-only="true"
-        :client-only="true"
+    />
-      />
+    <track-widget
-      <h2 class="ui header">
+      :url="'history/listenings/'"
-        {{ t('views.auth.ProfileActivity.header.recentlyListened') }}
+      :filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
-      </h2>
+      :websocket-handlers="['Listen']"
-      <div class="ui divider" />
+      @count="recentActivity = $event"
-      <track-widget
+    >
-        :url="'history/listenings/'"
+      <template #title>
-        :filters="{scope: `actor:${object.full_username}`, ordering: '-creation_date'}"
+        {{ t('components.library.Home.header.recentlyListened') }}
-        @count="recentActivity = $event"
+      </template>
-      />
+    </track-widget>
-    </div>
+
-    <div class="ui hidden divider" />
+    <track-widget
-    <div>
+      :url="'favorites/tracks/'"
-      <h2 class="ui header">
+      :filters="{scope: 'actor:${object.full_username}', ordering: '-creation_date'}"
-        {{ t('views.auth.ProfileActivity.header.recentlyFavorited') }}
+    >
-      </h2>
+      <template #title>
-      <div class="ui divider" />
+        {{ t('components.library.Home.header.recentlyFavorited') }}
-      <track-widget
+      </template>
-        :url="'favorites/tracks/'"
+    </track-widget>
-        :filters="{scope: `actor:${object.full_username}`, ordering: '-creation_date'}"
+
-      />
+    <playlist-widget
-    </div>
+      :url="'playlists/'"
-    <div class="ui hidden divider" />
+      :filters="{scope: `actor:${object.full_username}`, playable: true, ordering: '-modification_date'}"
-    <div>
+    >
-      <h2 class="ui header">
+      <template #title>
         {{ t('views.auth.ProfileActivity.header.playlists') }}
-      </h2>
+      </template>
-      <div class="ui divider" />
+    </playlist-widget>
-      <playlist-widget
+
-        :url="'playlists/'"
+    <album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
-        :filters="{scope: `actor:${object.full_username}`, playable: true, ordering: '-modification_date'}"
+      <template #title>
-      />
+        {{ t('components.library.Home.header.recentlyAdded') }}
-    </div>
+      </template>
-  </section>
+    </album-widget>
+  </Layout>
 </template>

front/src/views/auth/ProfileBase.vue

@@ -20,9 +20,6 @@ import Tabs from '~/components/ui/Tabs.vue'
 import Tab from '~/components/ui/Tab.vue'
 import LibraryWidget from '~/components/federation/LibraryWidget.vue'
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
-import AlbumWidget from '~/components/album/Widget.vue'
-import TrackWidget from '~/components/audio/track/Widget.vue'
-import PlaylistWidget from '~/components/playlists/Widget.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -133,10 +130,10 @@ const recentActivity = ref(0)
     <Tabs>
       <Tab :title="t('views.auth.ProfileBase.link.overview')" :to="{name: 'profile.overview', params: routerParams}">
         <h2>{{ t('views.auth.ProfileBase.link.overview') }}</h2>
-        <!-- <router-view
+        <router-view
           :object="object"
           @updated="fetchData"
-        /> -->
+        />
       </Tab>
 
       <Tab :title="t('views.auth.ProfileOverview.header.libraries')">
@@ -175,42 +172,10 @@ const recentActivity = ref(0)
       </Tab>
 
       <Tab :title="t('views.auth.ProfileBase.link.activity')" :to="{name: 'profile.activity', params: routerParams}">
-        <Layout stack>
+        <router-view
-          <track-widget
+          :object="object"
-            :url="'history/listenings/'"
+          @updated="fetchData"
-            :filters="{ scope: `actor:${object?.full_username}`, ordering: '-creation_date', ...qualityFilters}"
+        />
-            :websocket-handlers="['Listen']"
-            @count="recentActivity = $event"
-          >
-            <template #title>
-              {{ t('components.library.Home.header.recentlyListened') }}
-            </template>
-          </track-widget>
-
-          <track-widget
-            :url="'favorites/tracks/'"
-            :filters="{scope: 'actor:${object.full_username}', ordering: '-creation_date'}"
-          >
-            <template #title>
-              {{ t('components.library.Home.header.recentlyFavorited') }}
-            </template>
-          </track-widget>
-
-          <playlist-widget
-            :url="'playlists/'"
-            :filters="{scope: `actor:${object.full_username}`, playable: true, ordering: '-modification_date'}"
-          >
-            <template #title>
-              {{ t('views.auth.ProfileActivity.header.playlists') }}
-            </template>
-          </playlist-widget>
-
-          <album-widget :filters="{scope: `actor:${object?.full_username}`, playable: true, ordering: '-creation_date', ...qualityFilters}">
-            <template #title>
-              {{ t('components.library.Home.header.recentlyAdded') }}
-            </template>
-          </album-widget>
-        </Layout>
       </Tab>
     </Tabs>
   </Layout>

front/src/views/auth/ProfileOverview.vue

@@ -58,7 +58,7 @@ const createForm = ref()
             href=""
             @click.stop.prevent="showCreateModal = true"
           >
-            <i class="plus icon" />
+            <i class="bi bi-plus" />
             {{ t('views.auth.ProfileOverview.link.addNew') }}
           </a>
         </div>
@@ -71,7 +71,7 @@ const createForm = ref()
           class="actions"
         >
           <router-link :to="{name: 'content.libraries.index'}">
-            <i class="plus icon" />
+            <i class="bi bi-plus" />
             {{ t('views.auth.ProfileOverview.link.addNew') }}
           </router-link>
         </div>