[WIP] refactor(front): radio pages

front/src/components/radios/Button.vue

@@ -13,6 +13,7 @@ interface Props {
   clientOnly?: boolean
   objectId?: ObjectId | number | string | null
   radioConfig?: RadioConfig | null
+  playOnly?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,7 +21,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: '',
   clientOnly: false,
   objectId: null,
-  radioConfig: null
+  radioConfig: null,
+  playOnly: false
 })
 
 const store = useStore()
@@ -70,7 +72,8 @@ const toggleRadio = () => {
     objectId: props.objectId,
     customRadioId: props.customRadioId,
     clientOnly: props.clientOnly,
-    config: props.radioConfig
+    config: props.radioConfig,
+    playOnly: props.playOnly
   })
 }
 </script>
@@ -78,10 +81,12 @@ const toggleRadio = () => {
 <template>
   <Button
     :is-active="running"
-    solid primary
-    icon="bi-boombox-fill"
+    :primary="!playOnly"
+    :secondary="playOnly"
+    :round="playOnly"
+    icon="bi-play-fill"
     @click="toggleRadio"
   >
-    {{ buttonLabel }}
+    <div v-if="!playOnly">{{ buttonLabel }}</div>
   </Button>
 </template>

front/src/components/radios/Card.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 
 import RadioButton from './Button.vue'
 import Card from '~/components/ui/Card.vue'
+import Button from '~/components/ui/Button.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
 interface Props {
@@ -49,23 +50,26 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
       {{ radio.description }}
     </div>
     <Spacer />
+    <template #topright>
+      <radio-button
+        :type="type"
+        :custom-radio-id="customRadioId"
+        :object-id="objectId"
+        playOnly
+      />
+    </template>
     <div class="extra content">
       <user-link
         v-if="radio.user"
         :user="radio.user"
         class="left floated"
       />
-      <radio-button
-        class="right floated button"
-        :type="type"
-        :custom-radio-id="customRadioId"
-        :object-id="objectId"
-      />
     </div>
     <template #action>
       <Button
         v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
-        class="ui success button right floated"
+        primary
+        full
         :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
       >
         {{ t('components.radios.Card.button.edit') }}
@@ -99,7 +103,8 @@ const customRadioId = computed(() => props.customRadio?.id ?? null)
     <template #action>
       <Button
         v-if="store.state.auth.authenticated && type === 'custom' && radio.user.id === store.state.auth.profile?.id"
-        class="ui success button right floated"
+        primary
+        full
         :to="{name: 'library.radios.edit', params: {id: customRadioId }}"
       >
         {{ t('components.radios.Card.button.edit') }}