fix(ui): Split Playbutton

front/src/components/audio/PlayButton.vue

@@ -17,6 +17,7 @@ import PopoverItem from '~/components/ui/popover/PopoverItem.vue'
 
 
 interface Props extends PlayOptionsProps {
+  split?: boolean
   dropdownIconClasses?: string[]
   playIconClass?: string
   buttonClasses?: string[]
@@ -39,6 +40,7 @@ interface Props extends PlayOptionsProps {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  split: false,
   tracks: () => [],
   track: null,
   artist: null,
@@ -107,12 +109,11 @@ const title = computed(() => {
 })
 
 const isOpen = ref(false)
-
 </script>
 
 <template>
   <Popover
-    v-if="!discrete && !iconOnly && dropdownOnly"
+    v-if="split || (!discrete && !iconOnly && dropdownOnly)"
     v-model:open="isOpen"
   >
     <OptionsButton
@@ -242,16 +243,26 @@ const isOpen = ref(false)
     :aria-label="labels.replacePlay"
     :class="[...buttonClasses]"
     :isloading="isLoading"
-    :tiny="discrete"
+    :tiny="iconOnly && discrete"
     :icon="!playing ? playIconClass : 'bi-pause-fill'"
     :round="iconOnly"
-    :secondary="iconOnly"
+    :secondary="iconOnly && !discrete"
+    :ghost="discrete"
     @click.stop.prevent="replacePlay()"
   >
-    <template v-if="!discrete || !iconOnly">
+    <template v-if="!discrete && !iconOnly">
       <span>
         {{ t('components.audio.PlayButton.button.discretePlay') }}
       </span>
     </template>
   </Button>
 </template>
+
+<style lang="scss" scoped>
+.funkwhale.split-button {
+  &.button {
+    gap: 0px;
+    padding: 0px;
+  }
+}
+</style>