feat: tracked orgs dialog + search suggestion banner

Add "Tracked Orgs" navbar button that shows all ~40 candidate
organizations in a scrollable grid. Add suggestion banner in the
search dialog that prompts users to request adding an untracked
org when its activity qualifies for the top 16.

src/components/Navbar.tsx

@@ -1,12 +1,28 @@
-import React from "react";
+import React, { useMemo } from "react";
 import UserSearchDialog from "./UserSearchDialog";
+import TrackedOrgsDialog from "./TrackedOrgsDialog";
+import { CandidateSummary } from "../types/heatmap";
+
+interface NavbarProps {
+  allCandidates: CandidateSummary[];
+  minActivityCount: number;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ allCandidates, minActivityCount }) => {
+  const candidateAuthors = useMemo(
+    () => allCandidates.map((c) => c.author),
+    [allCandidates]
+  );
 
-const Navbar: React.FC = () => {
   return (
     <nav className="w-full mt-4">
       <div className="max-w-6xl mx-auto px-4 py-3">
-        <div className="flex items-center justify-end">
-          <UserSearchDialog />
+        <div className="flex items-center justify-end gap-4">
+          <TrackedOrgsDialog allCandidates={allCandidates} />
+          <UserSearchDialog
+            candidateAuthors={candidateAuthors}
+            minActivityCount={minActivityCount}
+          />
         </div>
       </div>
     </nav>

src/components/TrackedOrgsDialog.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { CandidateSummary } from "../types/heatmap";
+import { LEADERBOARD_SIZE } from "../constants/organizations";
+
+interface TrackedOrgsDialogProps {
+  allCandidates: CandidateSummary[];
+}
+
+const TrackedOrgsDialog: React.FC<TrackedOrgsDialogProps> = ({
+  allCandidates,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <button className="text-sm text-foreground hover:text-blue-500 transition-colors duration-200">
+          Tracked Orgs
+        </button>
+      </DialogTrigger>
+      <DialogContent className="w-full max-w-[95vw] sm:max-w-2xl p-4 sm:p-6 max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="text-lg sm:text-xl mb-2">
+            Tracked Organizations
+          </DialogTitle>
+          <p className="text-sm text-muted-foreground">
+            Tracking {allCandidates.length} organizations, showing top{" "}
+            {LEADERBOARD_SIZE} by activity on the leaderboard.
+          </p>
+        </DialogHeader>
+        <div className="flex-grow overflow-y-auto mt-4">
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+            {allCandidates.map((candidate) => (
+              <a
+                key={candidate.author}
+                href={`https://huggingface.co/${candidate.author}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 p-2 rounded-lg border border-border/40 bg-background/60 hover:bg-muted/50 hover:border-blue-500/40 transition-all duration-200"
+              >
+                {candidate.avatarUrl ? (
+                  <img
+                    src={candidate.avatarUrl}
+                    alt={candidate.fullName}
+                    className="w-7 h-7 rounded-md flex-shrink-0"
+                  />
+                ) : (
+                  <div className="w-7 h-7 rounded-md bg-muted flex items-center justify-center text-xs font-bold text-muted-foreground flex-shrink-0">
+                    {candidate.fullName.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <span className="text-sm font-medium text-foreground truncate">
+                  {candidate.fullName}
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TrackedOrgsDialog;

src/components/UserSearchDialog.tsx

@@ -12,8 +12,17 @@ import { fetchAllAuthorsData, fetchOrganizationData } from "../utils/authors";
 import { generateCalendarData } from "../utils/calendar";
 import Heatmap from "./Heatmap";
 import { ModelData } from "../types/heatmap";
+import { LEADERBOARD_SIZE } from "../constants/organizations";
 
-const UserSearchDialog = () => {
+interface UserSearchDialogProps {
+  candidateAuthors: string[];
+  minActivityCount: number;
+}
+
+const UserSearchDialog: React.FC<UserSearchDialogProps> = ({
+  candidateAuthors,
+  minActivityCount,
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [searchInput, setSearchInput] = useState("");
@@ -90,6 +99,27 @@ const UserSearchDialog = () => {
     return null;
   }, [searchedData, currentSearchTerm, userInfo]);
 
+  const suggestionBanner = useMemo(() => {
+    if (!searchedHeatmapData || !currentSearchTerm) return null;
+    const isTracked = candidateAuthors.some(
+      (a) => a.toLowerCase() === currentSearchTerm.toLowerCase()
+    );
+    if (isTracked) return null;
+    const totalActivity = searchedHeatmapData.reduce(
+      (sum, day) => sum + day.count,
+      0
+    );
+    if (totalActivity < minActivityCount) return null;
+    const title = encodeURIComponent(
+      `Add ${currentSearchTerm} to tracked organizations`
+    );
+    const description = encodeURIComponent(
+      `${currentSearchTerm} has ${totalActivity} new repos in the last year and qualifies for the top 16.`
+    );
+    const url = `https://huggingface.co/spaces/v1an1/model-release-heatmap/discussions/new?title=${title}&description=${description}`;
+    return { totalActivity, url };
+  }, [searchedHeatmapData, currentSearchTerm, candidateAuthors, minActivityCount]);
+
   const handleDialogOpenChange = (open: boolean) => {
     setIsOpen(open);
     if (!open) {
@@ -141,6 +171,23 @@ const UserSearchDialog = () => {
                     authorId={currentSearchTerm}
                   />
                 </div>
+                {suggestionBanner && (
+                  <div className="rounded-lg border border-blue-500/40 bg-blue-500/10 px-4 py-3 flex flex-col sm:flex-row sm:items-center gap-2">
+                    <p className="text-sm text-foreground flex-grow">
+                      <strong>{currentSearchTerm}</strong> has{" "}
+                      {suggestionBanner.totalActivity} repos this year and
+                      qualifies for the top {LEADERBOARD_SIZE}!
+                    </p>
+                    <a
+                      href={suggestionBanner.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm font-medium text-blue-500 hover:text-blue-400 whitespace-nowrap transition-colors"
+                    >
+                      Request to add &rarr;
+                    </a>
+                  </div>
+                )}
                 <div>
                   <div className="flex justify-between items-center mb-2">
                     <h3 className="font-semibold text-sm sm:text-base">

src/pages/index.tsx

@@ -1,5 +1,9 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { ProviderInfo, CompactCalendarData } from "../types/heatmap";
+import {
+  ProviderInfo,
+  CompactCalendarData,
+  CandidateSummary,
+} from "../types/heatmap";
 import OrganizationButton from "../components/OrganizationButton";
 import HeatmapGrid from "../components/HeatmapGrid";
 import Navbar from "../components/Navbar";
@@ -10,9 +14,16 @@ import { CANDIDATES } from "../constants/organizations";
 interface PageProps {
   compactData: CompactCalendarData;
   providers: ProviderInfo[];
+  allCandidates: CandidateSummary[];
+  minActivityCount: number;
 }
 
-function Page({ compactData, providers }: PageProps) {
+function Page({
+  compactData,
+  providers,
+  allCandidates,
+  minActivityCount,
+}: PageProps) {
   const [isLoading, setIsLoading] = useState(true);
 
   const calendarData = useMemo(
@@ -28,7 +39,10 @@ function Page({ compactData, providers }: PageProps) {
 
   return (
     <div className="w-full">
-      <Navbar />
+      <Navbar
+        allCandidates={allCandidates}
+        minActivityCount={minActivityCount}
+      />
 
       <div className="w-full p-4 py-16">
         <div className="text-center mb-16 max-w-4xl mx-auto">
@@ -75,12 +89,15 @@ function Page({ compactData, providers }: PageProps) {
 
 export async function getStaticProps() {
   try {
-    const { calendarData, providers } = await getProviders(CANDIDATES);
+    const { calendarData, providers, allCandidates, minActivityCount } =
+      await getProviders(CANDIDATES);
 
     return {
       props: {
         compactData: compactCalendarData(calendarData),
         providers,
+        allCandidates,
+        minActivityCount,
       },
       revalidate: 3600,
     };
@@ -90,6 +107,8 @@ export async function getStaticProps() {
       props: {
         compactData: {},
         providers: [],
+        allCandidates: [],
+        minActivityCount: 0,
       },
       revalidate: 60,
     };

src/types/heatmap.ts

@@ -59,3 +59,9 @@ export interface OrgCandidate {
   authors: string[];
   color?: string;
 }
+
+export interface CandidateSummary {
+  author: string;
+  fullName: string;
+  avatarUrl: string | null;
+}

src/utils/ranking.ts

@@ -3,6 +3,7 @@ import {
   CalendarData,
   ModelData,
   OrgCandidate,
+  CandidateSummary,
 } from "../types/heatmap";
 import { generateCalendarData } from "./calendar";
 import { fetchAllProvidersData, fetchAllAuthorsData } from "./authors";
@@ -100,8 +101,22 @@ export const getProviders = async (candidates: OrgCandidate[]) => {
     }
   }
 
+  const lastProvider = coloredProviders[coloredProviders.length - 1];
+  const lastKey = lastProvider?.authors[0];
+  const minActivityCount = lastKey
+    ? (filteredCalendar[lastKey] || []).reduce((s, d) => s + d.count, 0)
+    : 0;
+
+  const allCandidates: CandidateSummary[] = sorted.map((p) => ({
+    author: p.authors[0],
+    fullName: p.fullName || p.authors[0],
+    avatarUrl: p.avatarUrl || null,
+  }));
+
   return {
     calendarData: filteredCalendar,
     providers: coloredProviders,
+    allCandidates,
+    minActivityCount,
   };
 };