Add vue-router support

docs/.vitepress/theme/index.ts

 import { createI18n } from 'vue-i18n'
-import Funkwhale from '~/main'
 
 import DefaultTheme from 'vitepress/theme'
 import en from '~/locales/en.yaml'
+import Funkwhale from '~/main'
 
 export default {
   ...DefaultTheme,

package.json

@@ -31,6 +31,7 @@
 		"vitepress": "^1.0.0-alpha.13",
 		"vitest": "^0.22.1",
 		"vue-i18n": "9",
+		"vue-router": "^4.1.5",
 		"vue-tsc": "^0.40.6"
 	}
 }

src/components/card/radio/Card.vue

 <script setup lang="ts">
 import { type PastelProps, usePastel } from '~/composables/usePastels'
-import { FwCard } from '~/components'
+import { FwCard, FwButton } from '~/components'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 
 interface Radio {
+  id: number
   name: string
   description: string
 }
 
+interface Events {
+  (e: 'play', radio: Radio): void
+}
+
 interface Props extends PastelProps {
   radio: Radio
   small?: boolean
@@ -22,19 +28,35 @@ interface Props extends PastelProps {
   yellow?: boolean
 }
 
+const emit = defineEmits<Events>()
 const props = defineProps<Props>()
 
 const pastel = usePastel(props)
+
+let navigate = () => {}
+
+if (import.meta.env.PROD) {
+  const router = useRouter()
+  navigate = () => router.push({ name: 'library.radios.detail', params: { id: props.radio.id } })
+}
 </script>
 
 <template>
   <fw-card
     :title="radio.name"
     :class="pastel"
+    @click="navigate"
     class="radio-card"
   >
     <div class="radio-cover">
-      <div class="cover-name">{{ t('vui.radio') }}</div>
+      <div class="cover-name">
+        {{ t('vui.radio') }}
+        <fw-button
+          @click="emit('play', props.radio)"
+          icon="bi-play-fill"
+          round
+        />
+      </div>
     </div>
     <div
       v-if="!small"

src/components/card/radio/style.scss

@@ -8,6 +8,13 @@
     width: 208px;
     background: var(--fw-bg-color);
 
+    &:hover {
+      .funkwhale.button {
+        opacity: 1 !important;
+        transform: translateX(6px) !important;
+      }
+    }
+
     > .card-title {
       position: absolute;
       padding: 22px 16px 0;
@@ -23,12 +30,34 @@
 
       > .cover-name {
         position: absolute;
-        bottom: 16px;
+        bottom: 10px;
+        right: 16px;
         left: 16px;
 
         font-size: 1.5rem;
         font-weight: 300;
         pointer-events: auto;
+        display: flex;
+        align-items: center;
+
+        > .funkwhale.button {
+          --fw-bg-color: #fff;
+          --fw-text-color: var(--fw-grey-600);
+
+          opacity: 0;
+          margin-left: auto;
+          transform: translateX(0);
+          transition: all .2s ease;
+          font-size: 0.6rem;
+
+          i {
+            font-size: 2rem;
+          }
+
+          &:hover {
+            --fw-text-color: var(--fw-pastel-4);
+          }
+        }
       }
     }
 

yarn.lock

@@ -376,7 +376,7 @@
     "@vue/compiler-dom" "3.2.38"
     "@vue/shared" "3.2.38"
 
-"@vue/devtools-api@^6.2.1":
+"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
   integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
@@ -1720,6 +1720,13 @@ vue-i18n@9:
     "@intlify/vue-devtools" "9.2.2"
     "@vue/devtools-api" "^6.2.1"
 
+vue-router@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.5.tgz#256f597e3f5a281a23352a6193aa6e342c8d9f9a"
+  integrity sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==
+  dependencies:
+    "@vue/devtools-api" "^6.1.4"
+
 vue-tsc@^0.40.6:
   version "0.40.6"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.40.6.tgz#156340663c2afb59a1d707f54d1a3e1e9559ff95"