add minimal star reminder

Author: ahmedkhaleel2004

package.json

@@ -36,11 +36,13 @@
     "lucide-react": "^0.468.0",
     "mermaid": "^11.4.1",
     "next": "^15.0.1",
+    "next-themes": "^0.4.6",
     "postgres": "^3.4.4",
     "posthog-js": "^1.203.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "sonner": "^2.0.3",
     "svg-pan-zoom": "^3.6.2",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",

pnpm-lock.yaml

@@ -8,10 +8,15 @@ import { useDiagram } from "~/hooks/useDiagram";
 import { ApiKeyDialog } from "~/components/api-key-dialog";
 import { ApiKeyButton } from "~/components/api-key-button";
 import { useState } from "react";
+import { useStarReminder } from "~/hooks/useStarReminder";
 
 export default function Repo() {
   const [zoomingEnabled, setZoomingEnabled] = useState(false);
   const params = useParams<{ username: string; repo: string }>();
+
+  // Use the star reminder hook
+  useStarReminder();
+
   const {
     diagram,
     error,

src/app/[username]/[repo]/page.tsx

@@ -5,6 +5,7 @@ import { type Metadata } from "next";
 import { Header } from "~/components/header";
 import { Footer } from "~/components/footer";
 import { CSPostHogProvider } from "./providers";
+import { Toaster } from "~/components/ui/sonner";
 
 export const metadata: Metadata = {
   title: "GitDiagram",
@@ -81,6 +82,7 @@ export default function RootLayout({
           <Header />
           <main className="flex-grow">{children}</main>
           <Footer />
+          <Toaster />
         </body>
       </CSPostHogProvider>
     </html>

src/app/layout.tsx

@@ -18,7 +18,7 @@ export function Header() {
   }, []);
 
   const formatStarCount = (count: number | null) => {
-    if (!count) return "3.0k"; // Default to 2.0k if count is null (it can only go up from here)
+    if (!count) return "6.0k"; // Default to 2.0k if count is null (it can only go up from here)
     if (count >= 1000) {
       return `${(count / 1000).toFixed(1)}k`;
     }