refactor(front): make secondary default for pills and display raised tagslist on cards

front/src/components/tags/List.vue

@@ -36,21 +36,18 @@ const tags = computed(() => {
 </script>
 
 <template>
-  <Layout flex style="gap: 8px" class="component-tags-list">
+  <Layout flex gap-8 class="component-tags-list">
     <router-link
       v-for="tag in tags"
       :key="tag"
       :to="{name: props.detailRoute, params: { id: tag } }"
       :class="props.labelClasses"
     >
-      <Pill solid raised secondary>
+      <Pill raised>
         #{{ truncate(tag, props.truncateSize) }}
       </Pill>
     </router-link>
     <Pill
-      solid
-      raised
-      secondary
       v-if="props.showMore && tags.length < props.tags.length"
       @click.prevent="honorLimit = false"
     >

front/src/components/ui/Card.vue

@@ -5,7 +5,7 @@ import { type RouterLinkProps, RouterLink } from 'vue-router';
 import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color'
 import { type WidthProps, width } from '~/composables/width'
 
-import Pill from './Pill.vue'
+import TagsList from '~/components/tags/List.vue'
 import Alert from './Alert.vue'
 import { type Props as AlertProps } from './Alert.vue'
 import Layout from './Layout.vue';
@@ -89,15 +89,13 @@ const attributes = computed(() =>
     </Alert>
 
     <Layout flex gap-4 v-if="tags" :class="$style.tags">
-      <Pill
-        solid
-        raised
-        secondary
-        v-for="tag in tags"
-        :key="tag"
-      >
-        #{{ tag }}
-      </Pill>
+      <TagsList
+        label-classes="tiny"
+        :truncate-size="8"
+        :limit="2"
+        :show-more="false"
+        :tags="tags"
+      />
     </Layout>
 
     <Layout no-gap v-if="$slots.default" :class="$style.content">

front/src/components/ui/Pill.vue

@@ -16,7 +16,7 @@ const model = defineModel<string>()
     class="funkwhale pill"
     :class="props.noUnderline && 'no-underline'"
     :is="model ? 'label' : 'button'"
-    v-bind="color(props, ['interactive', 'outline'])()"
+    v-bind="color(props, ['interactive', 'secondary'])()"
     @click.stop="handleClick"
   >
     <div v-if="!!$slots.image" class="pill-image">