feat: categories and option search

src/components/ModTitlecard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Chip from 'primevue/chip';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { Package } from '../types';
 import { needsUpdate } from '../util';
@@ -7,6 +8,7 @@ const props = defineProps({
     pkg: Object as () => Package,
     showNamespace: Boolean,
     showVersion: Boolean,
+    showCategories: Boolean,
 });
 
 const iconSrc = () => {
@@ -34,6 +36,18 @@ const iconSrc = () => {
             <span class="text-lg">
                 {{ pkg?.name ?? 'Untitled' }}
             </span>
+            <span
+                v-if="pkg?.rmt?.deprecated"
+                v-tooltip="'deprecated'"
+                class="pi pi-exclamation-circle ml-1 text-amber-400"
+            >
+            </span>
+            <span
+                v-if="pkg?.rmt?.nsfw"
+                v-tooltip="'NSFW'"
+                class="pi pi-exclamation-triangle ml-1 text-red-400"
+            >
+            </span>
             <span
                 v-if="showNamespace && pkg?.namespace"
                 class="text-sm opacity-75"
@@ -58,5 +72,17 @@ const iconSrc = () => {
         <div class="text-sm opacity-75">
             {{ pkg?.description ?? 'No description' }}
         </div>
+        <div v-if="showCategories" class="mt-1 flex gap-1">
+            <span class="text-xs" v-for="c in pkg?.rmt?.categories"
+                ><Chip :label="c"
+            /></span>
+        </div>
     </label>
 </template>
+
+<style scoped>
+.p-chip {
+    padding: 0.4rem !important;
+    font-size: 0.66rem !important;
+}
+</style>