adding new moon and full moon tags, changing highlight strategy

sky-pi-app/packages/webapp/src/app/page.tsx

@@ -1,12 +1,14 @@
+import { isSameDay } from "date-fns";
 import { ForecastCard } from "~/components/ForecastCard";
 import { MiscCard } from "~/components/MiscCard";
 import { MoonPhaseCard } from "~/components/MoonPhaseCard";
 import { api } from "~/trpc/server";
+import { MoonPhaseData } from "~/types/moonphase";
 
 export default async function Home() {
   const clientGeoData = await api.forecast.getGeoData();
   const [
-    moonPhaseCycle,
+    { moonPhaseCycle, nextApexEvent },
     { rainChance, skyCover, snowChance, sunRsttData, currTemp },
   ] = await Promise.all([
     api.forecast.getMoonPhases(),
@@ -26,12 +28,22 @@ export default async function Home() {
         {skyCoverForecasts.map((skyCoverForDay, i) => {
           const sunRsttDataForDay = sunRsttData[i];
           const rainChanceForDay = rainChance[i];
+          let phaseEventOnDate: MoonPhaseData | undefined = undefined;
+          if (nextApexEvent) {
+            phaseEventOnDate = isSameDay(
+              nextApexEvent.date,
+              skyCoverForDay[0]?.validTime.date as Date,
+            )
+              ? phaseEventOnDate
+              : undefined;
+          }
           return (
             <ForecastCard
               key={`forecast-card-${i}`}
               skyCoverData={skyCoverForDay}
               rainChanceData={rainChanceForDay}
               sunRsttData={sunRsttDataForDay}
+              phaseEventOnDate={phaseEventOnDate}
               now={now}
               className="border-2 border-slate-400 shadow-none"
             />

sky-pi-app/packages/webapp/src/components/ForecastCard.tsx

@@ -12,26 +12,30 @@ import {
   CloudSunRain,
   Sun,
   Umbrella,
+  Moon,
 } from "lucide-react";
 import { percentToSkyShade } from "~/lib/utils/tailwind";
 import { useCallback } from "react";
 import { Cloudy } from "~/components/icons/cloudy";
 import { cn } from "~/lib/utils/ui";
 import { SunRsttData } from "~/types/riseSetTransitTimes";
+import { MoonPhaseData } from "~/types/moonphase";
 
 type ForecastCardProps = React.HTMLAttributes<HTMLDivElement> & {
   skyCoverData: NWSDataPoint[];
   rainChanceData: NWSDataPoint[] | undefined;
   sunRsttData: SunRsttData | undefined;
   now: Date;
+  phaseEventOnDate?: MoonPhaseData;
 };
 
 export const ForecastCard = ({
+  className,
   skyCoverData,
   rainChanceData,
   sunRsttData,
-  className,
   now,
+  phaseEventOnDate,
 }: ForecastCardProps) => {
   const day = skyCoverData[0]?.validTime.date;
 
@@ -82,11 +86,25 @@ export const ForecastCard = ({
   return (
     <Card className={className}>
       <CardHeader className="space-y-0.5 px-3 pb-0.5 pt-3">
-        <div className="flex flex-row gap-2">
-          <CardTitle>{dayOfWeek}</CardTitle>
-          <Badge className="bg-slate-900 hover:bg-slate-900">
-            <h3 className="text-slate-200">{date}</h3>
-          </Badge>
+        <div className="flex flex-row justify-between gap-2">
+          <div className="flex flex-row gap-2">
+            <CardTitle>{dayOfWeek}</CardTitle>
+            <Badge className="bg-slate-900 hover:bg-slate-900">
+              <h3 className="text-slate-200">{date}</h3>
+            </Badge>
+          </div>
+          {phaseEventOnDate && (
+            <Badge
+              className={cn(
+                "flex items-center gap-1 border-0 bg-gradient-to-r",
+                phaseEventOnDate.name === "New Moon" && "from-indigo-500",
+                phaseEventOnDate.name === "Full Moon" && "from-cyan-600",
+              )}
+            >
+              <Moon size={16} />
+              {phaseEventOnDate.name}
+            </Badge>
+          )}
         </div>
       </CardHeader>
       <CardContent className="space-y-0.5 px-3 pb-3 pt-0.5">
@@ -120,28 +138,25 @@ export const ForecastCard = ({
               <div
                 className={cn(
                   "flex flex-col items-center justify-end rounded-lg",
+                  shouldHighlight && "bg-slate-500",
                   isCurrentHour && "bg-slate-900",
                 )}
                 key={`sky-cover-${forecastDate.valueOf()}`}
               >
                 <p
                   className={cn(
                     "text-slate-500",
-                    isCurrentHour && "text-slate-100",
+                    (shouldHighlight || isCurrentHour) && "text-slate-100",
                   )}
                 >
                   {hour === 0 ? 12 : hour}
                 </p>
                 <div
                   className={cn(
-                    "flex flex-col items-center rounded-lg border-2",
-                    shouldHighlight && "border-slate-400 bg-slate-200",
-                    !shouldHighlight && "border-transparent",
+                    "flex flex-col items-center rounded-lg p-0.5",
+                    shouldHighlight && "bg-slate-200",
                     duringSunRiseOrSet && "bg-amber-400",
-                    duringNightTime && "bg-cyan-800",
-                    duringNightTime &&
-                      shouldHighlight &&
-                      "border-transparent bg-cyan-950",
+                    duringNightTime && "bg-sky-950",
                   )}
                 >
                   <Icon

sky-pi-app/packages/webapp/src/server/api/routers/forecast.ts

@@ -148,6 +148,7 @@ export const forecastRouter = createTRPCRouter({
     );
 
     const moonPhaseCycle: MoonPhaseCycle = {};
+    let nextApexEvent: MoonPhaseData | undefined = undefined;
     phasesResp.data.phasedata.forEach((phase) => {
       const phaseName = phase.phase;
       const [hoursStr, minutesStr] = phase.time.split(":");
@@ -165,6 +166,13 @@ export const forecastRouter = createTRPCRouter({
         name: phaseName,
       };
 
+      if (
+        nextApexEvent === null &&
+        (phaseData.name === "Full Moon" || phaseData.name === "New Moon")
+      ) {
+        nextApexEvent = phaseData;
+      }
+
       if (phaseName === "First Quarter") {
         moonPhaseCycle.firstQuarter = phaseData;
       } else if (phaseName === "Full Moon") {
@@ -176,7 +184,10 @@ export const forecastRouter = createTRPCRouter({
       }
     });
 
-    return moonPhaseCycle;
+    return { moonPhaseCycle, nextApexEvent } as {
+      moonPhaseCycle: MoonPhaseCycle;
+      nextApexEvent?: MoonPhaseData;
+    };
   }),
 
   getGeoData: publicProcedure.query(async () => {

sky-pi-app/packages/webapp/src/types/moonphase.ts

@@ -33,7 +33,7 @@ export type RawMoonPhaseData = z.infer<typeof zRawMoonPhaseData>;
 
 export type MoonPhaseData = {
   date: Date;
-  name: string;
+  name: MoonPhase;
 };
 
 export type MoonPhaseCycle = {