Minor(modeling-commons): Use h4 only for tags pages headers and add number of times tagged

Author: omargfh

apps/modeling-commons-frontend/app/components/model/list/ModelsListing.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-8">
-    <slot name="header" />
+    <slot name="header" :total-count="totalCount" />
 
     <div class="flex gap-2 w-full flex-1">
       <SearchBar v-if="props.showSearch" v-model="searchQuery" placeholder="Search models..." />

apps/modeling-commons-frontend/app/pages/tags/[name].vue

@@ -1,7 +1,7 @@
 <template>
   <UContainer>
     <ModelsListing :filters="filters">
-      <template #header>
+      <template #header="{ totalCount}">
         <div v-if="tagStatus === 'pending'" class="space-y-2">
           <div class="h-8 w-48 bg-accented rounded animate-pulse" />
           <div class="h-4 w-64 bg-muted rounded animate-pulse" />
@@ -11,8 +11,7 @@
 
         <div v-else-if="tag" class="space-y-2">
           <div class="flex items-center gap-3 flex-wrap">
-            <TagChip :name="tag.name" :display-name="tag.displayName" :linkable="false" />
-            <h4 class="tracking-tight">{{ tag.displayName }}</h4>
+            <h4 class="tracking-tight">{{ tag.displayName }} <span v-if="totalCount" class="text-md text-muted">(tagged {{ pluralizeWithCount(totalCount, 'time') }})</span></h4>
           </div>
           <p class="text-sm text-muted">
             Models tagged with <span class="font-medium">{{ tag.displayName }}</span>

apps/modeling-commons-frontend/app/utils/formatters.ts

@@ -72,6 +72,11 @@ export function pluralize(count: number, singular: string, plural?: string): str
   return `${numberFormatter.format(count)} ${plural || singular + "s"}`;
 }
 
+export function pluralizeWithCount(count: number, singular: string, plural?: string): string {
+  if (count === 1) return `1 ${singular}`;
+  return `${numberFormatter.format(count)} ${plural || singular + "s"}`;
+}
+
 export function capitalize(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }