feat: add Entries and Tag count badge

package-lock.json

@@ -11,7 +11,7 @@
         "@radix-ui/react-collapsible": "^1.1.7",
         "@radix-ui/react-dialog": "^1.1.10",
         "@radix-ui/react-separator": "^1.1.4",
-        "@radix-ui/react-slot": "^1.2.0",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tooltip": "^1.2.3",
         "@tailwindcss/vite": "^4.1.4",
         "@tanstack/react-query": "^5.83.0",
@@ -1131,6 +1131,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.7.tgz",
@@ -1311,6 +1329,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.4.tgz",
@@ -1335,9 +1371,10 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.0",
+      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
       },
@@ -1384,6 +1421,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
+      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",

package.json

@@ -13,7 +13,7 @@
     "@radix-ui/react-collapsible": "^1.1.7",
     "@radix-ui/react-dialog": "^1.1.10",
     "@radix-ui/react-separator": "^1.1.4",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.3",
     "@tailwindcss/vite": "^4.1.4",
     "@tanstack/react-query": "^5.83.0",

src/components/EntriesListSidebar.tsx

@@ -1,9 +1,8 @@
 import { FileText, ChevronRight } from "lucide-react"
-
 import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
 import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { CollapsibleContent } from "../components/ui/collapsible"
-
+import { Badge } from "./ui/badge"
 import { useQuery } from "@tanstack/react-query"
 import api from "../api/eolas-api"
 
@@ -22,6 +21,9 @@ export default function EntriesListSidebar() {
                   <a href="#">
                      <FileText />
                      <span>Entries</span>
+                     <Badge className="ml-0" variant="secondary">
+                        {entries?.count}
+                     </Badge>
                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                   </a>
                </SidebarMenuButton>
@@ -31,7 +33,7 @@ export default function EntriesListSidebar() {
                   {entries?.entries.map((item, i) => (
                      <SidebarMenuItem key={i}>
                         <a>
-                           <span className="text-xs">{item.title}</span>
+                           <span className="text-xs">{item.title.replace(/_/g, " ")}</span>
                         </a>
                      </SidebarMenuItem>
                   ))}

src/components/TagListSidebar.tsx

@@ -5,39 +5,44 @@ import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { CollapsibleContent } from "../components/ui/collapsible"
 import { useQuery } from "@tanstack/react-query"
 import api from "../api/eolas-api"
+import { Badge } from "./ui/badge"
 
 export default function TagListSidebar() {
-	const { data: tags, isLoading } = useQuery({
+   const { data: tags, isLoading } = useQuery({
-		queryKey: ["tag_list"],
+      queryKey: ["tag_list"],
-		queryFn: () => api.get("/tags").then((res) => res.data),
+      queryFn: () => api.get("/tags").then((res) => res.data),
-	})
+   })
 
-	console.log(tags)
+   console.log(tags)
 
-	return (
+   return (
-		<Collapsible className="group/collapsible">
+      <Collapsible className="group/collapsible">
-			<SidebarMenuItem key="tags">
+         <SidebarMenuItem key="tags">
-				<CollapsibleTrigger asChild>
+            <CollapsibleTrigger asChild>
-					<SidebarMenuButton asChild>
+               <SidebarMenuButton asChild>
-						<a href="#">
+                  <a href="#">
-							<Tags />
+                     <Tags />
-							<span>Tags</span>
+                     <span>Tags</span>
-							<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                     <Badge className="ml-0" variant="secondary">
-						</a>
+                        {tags?.count}
-					</SidebarMenuButton>
+                     </Badge>
-				</CollapsibleTrigger>
+
-				<CollapsibleContent>
+                     <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-					<SidebarMenuSub>
+                  </a>
-						{tags?.tags.map((item, i) => (
+               </SidebarMenuButton>
-							<SidebarMenuItem key={i}>
+            </CollapsibleTrigger>
-								<a>
+            <CollapsibleContent>
-									<span className="text-xs">{item}</span>
+               <SidebarMenuSub>
-								</a>
+                  {tags?.tags.map((item, i) => (
-							</SidebarMenuItem>
+                     <SidebarMenuItem key={i}>
-						))}
+                        <a>
-					</SidebarMenuSub>
+                           <span className="text-xs">{item}</span>
-				</CollapsibleContent>
+                        </a>
-			</SidebarMenuItem>
+                     </SidebarMenuItem>
-		</Collapsible>
+                  ))}
-	)
+               </SidebarMenuSub>
+            </CollapsibleContent>
+         </SidebarMenuItem>
+      </Collapsible>
+   )
 }

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }