style(front): Section component on explore, small playbutton dropdown-only's

front/src/components/audio/PlayButton.vue

@@ -106,6 +106,7 @@ const isOpen = ref(false)
   >
     <OptionsButton
       v-if="dropdownOnly"
+      v-bind="$attrs"
       @click="isOpen = !isOpen"
       :isGhost="discrete"
     />

front/src/components/audio/track/Widget.vue

@@ -17,6 +17,7 @@ import Section from '~/components/ui/Section.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Loader from '~/components/ui/Loader.vue'
+import Heading from '~/components/ui/Heading.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -108,7 +109,6 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
 
 <template>
 <!-- TODO: Use activity.vue -->
-  <div class="component-track-widget">
   <h2 v-if="!!$slots.title">
     <slot name="title" />
     <span
@@ -125,7 +125,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
     {{ t('components.audio.track.Widget.empty.noResults') }}
     <Loader v-if="isLoading" />
   </Alert>
-    <Section
+  <template
     v-if="count > 0"
     medium-items
   >
@@ -157,14 +157,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         <!-- TODO: Add Playbutton overlay -->
       </div>
       <div class="activity-content">
-          <div class="track-title">
           <router-link
             class="funkwhale link artist"
             :to="{name: 'library.tracks.detail', params: {id: object.track.id}}"
           >
-              {{ object.track.title }}
+            <Heading :h3="object.track.title" title />
           </router-link>
-          </div>
+          <Spacer :size="2"/>
         <div
           v-if="object.track.artist_credit"
           class="funkwhale link artist"
@@ -189,7 +188,7 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           :show-more="false"
           :tags="object.track.tags"
         />
-
+        <Spacer :size="4"/>
         <div
           v-if="isActivity"
           class="extra"
@@ -207,9 +206,10 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
         :account="object.actor"
         :dropdown-only="true"
         :track="object.track"
+        square-small
       />
     </div>
-    </Section>
+  </template>
   <Loader v-if="isLoading" />
   <template v-if="nextPage">
     <Spacer :size="16"/>
@@ -220,15 +220,15 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       {{ t('components.audio.track.Widget.button.more') }}
     </Button>
   </template>
-  </div>
 </template>
 
 
 <style lang="scss" scoped>
 .funkwhale {
   &.activity {
-    padding: 12px 0;
+    padding-top: 14px;
     border-top: 1px solid;
+    margin: -11px 0;
 
     @include light-theme {
       border-color: var(--fw-gray-300);
@@ -259,7 +259,8 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       }
 
       > i {
-        font-size: 36px;
+        font-size: 40px;
+        line-height: 36px;
       }
 
       > .play-button {

front/src/components/library/Home.vue

@@ -90,20 +90,22 @@ fetchData()
   <Section
     alignLeft
     :h2="t('components.library.Home.header.recentlyListened')"
-  />
+  >
     <track-widget
       :url="'history/listenings/'"
       :filters="{ scope, ordering: '-creation_date', ...qualityFilters}"
       :websocket-handlers="['Listen']"
     />
+  </Section>
   <Section
     alignLeft
     :h2="t('components.library.Home.header.recentlyFavorited')"
-  />
+  >
     <track-widget
       :url="'favorites/tracks/'"
       :filters="{scope: scope, ordering: '-creation_date'}"
     />
+  </Section>
   <Section
     alignLeft
     :h2="t('components.library.Home.header.recentlyAdded')"

front/src/components/ui/Heading.vue

@@ -8,7 +8,7 @@ const size = Object.entries(props).find(([key, value]) => value && key!==level)?
 </script>
 
 <template>
-  <component :is="level" :class="size" style="margin: 0; padding:0; line-height: 40px; vertical-align: baseline;">
+  <component :is="level" :class="size" style="margin: 0; padding: 0; vertical-align: baseline;">
     {{ title }}
     <slot />
   </component>
@@ -28,7 +28,7 @@ const size = Object.entries(props).find(([key, value]) => value && key!==level)?
   .caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; }
 
   /* Tab title, Channel title, Card title, Activity title */
-  .title { font-size: 16px; font-weight: 700;  }
+  .title { font-size: 16px; font-weight: 700; line-height: 18px; }
 
   /* Primary radio title */
   .radio { font-size: 28px; font-weight: 900; letter-spacing: -.5px; }

front/src/components/ui/button/Options.vue

@@ -15,6 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <Button
     icon="bi-three-dots-vertical"
+    v-bind="$attrs"
     :class="['options-button', {'is-ghost': isGhost}]"
     :secondary="!isGhost"
     :ghost="isGhost"