Update descriptions, protobufs & bugfixes

src/components/Dropdown.tsx

@@ -3,25 +3,36 @@ import type React from "react";
 import { Disclosure } from "@headlessui/react";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 
+import { Mono } from "./Mono.js";
+
 export interface DropdownProps {
   title: string;
+  stat?: number;
   icon: JSX.Element;
+  defaultOpen?: boolean;
   children: React.ReactNode;
 }
 
 export const Dropdown = ({
   title,
+  stat,
   icon,
+  defaultOpen,
   children,
 }: DropdownProps): JSX.Element => {
   return (
-    <Disclosure defaultOpen>
+    <Disclosure defaultOpen={defaultOpen}>
       {({ open }) => (
         <>
-          <Disclosure.Button className="flex h-8 justify-between bg-slate-100 px-2 hover:bg-slate-200">
+          <Disclosure.Button className="group flex h-8 justify-between bg-slate-100 px-2 hover:bg-slate-200">
             <div className="my-auto flex gap-2 text-slate-700">
               <div className="my-auto">{icon}</div>
               <span className="text-lg font-medium">{title}</span>
+              {stat !== undefined && (
+                <span className="my-auto flex rounded-full bg-slate-200 px-3 py-0.5 group-hover:bg-slate-300">
+                  <Mono>{stat}</Mono>
+                </span>
+              )}
             </div>
             <div className="my-auto text-slate-600">
               {open ? (