Add global banner with new awards (#90)

src/app/GlobalNotifications.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Link from "next/link";
+
+import { trpc } from "~/app/_trpc/client";
+
+export function GlobalNotifications() {
+  const { data: awards } = trpc.awardRouter.getAllAwardsForProfile.useQuery();
+
+  const hasUnclaimedAwards = awards?.some((award) => !award.imageId) ?? false;
+
+  if (!hasUnclaimedAwards) return null;
+
+  return (
+    <div className="my-2 bg-yellow-300 p-2 text-yellow-800">
+      <p className="text-center">
+        <Link href="/awards">
+          <strong>You have unclaimed awards!</strong> Go to the awards page to
+          claim them.
+        </Link>
+      </p>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { getServerAuthSession } from "~/server/auth";
 
 import Provider from "./_trpc/Provider";
 import { NextAuthProvider } from "./authProvider";
+import { GlobalNotifications } from "./GlobalNotifications";
 
 import { UserMenuOrLogin } from "../components/UserMenuOrLogin";
 
@@ -40,6 +41,7 @@ export default async function RootLayout({
                   <UserMenuOrLogin />
                 </div>
               </header>
+              <GlobalNotifications />
               <main className="flex-1">
                 <div className="container flex max-w-[96rem] flex-col items-center gap-4 text-center">
                   {children}

src/components/SentenceQuestionPractice.tsx

@@ -135,6 +135,9 @@ export function SentenceQuestionPractice() {
 
     // get the next sentence by invalidating query
     await utils.questionRouter.getPossibleSentences.invalidate();
+
+    // this is needed to update the award banner
+    await utils.awardRouter.getAllAwardsForProfile.invalidate();
   };
 
   if (isLoadingSentences) {