Add extension-style program countdown to web

.github/workflows/nextjs.yml

@@ -43,6 +43,19 @@ jobs:
           NEXT_PUBLIC_BASE_PATH: ""
           NEXT_PUBLIC_ENABLE_ANALYTICS: "true"
           NEXT_PUBLIC_GA_ID: "G-SJNYKL2864"
+          WXT_FIREBASE_API_KEY: ${{ secrets.WXT_FIREBASE_API_KEY || vars.WXT_FIREBASE_API_KEY }}
+          WXT_FIREBASE_AUTH_DOMAIN: ${{ secrets.WXT_FIREBASE_AUTH_DOMAIN || vars.WXT_FIREBASE_AUTH_DOMAIN }}
+          WXT_FIREBASE_PROJECT_ID: ${{ secrets.WXT_FIREBASE_PROJECT_ID || vars.WXT_FIREBASE_PROJECT_ID }}
+          WXT_FIREBASE_STORAGE_BUCKET: ${{ secrets.WXT_FIREBASE_STORAGE_BUCKET || vars.WXT_FIREBASE_STORAGE_BUCKET }}
+          WXT_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.WXT_FIREBASE_MESSAGING_SENDER_ID || vars.WXT_FIREBASE_MESSAGING_SENDER_ID }}
+          WXT_FIREBASE_APP_ID: ${{ secrets.WXT_FIREBASE_APP_ID || vars.WXT_FIREBASE_APP_ID }}
+          WXT_FIREBASE_FETCH_INTERVAL_MS: ${{ secrets.WXT_FIREBASE_FETCH_INTERVAL_MS || vars.WXT_FIREBASE_FETCH_INTERVAL_MS }}
+          WXT_FIREBASE_FETCH_TIMEOUT_MS: ${{ secrets.WXT_FIREBASE_FETCH_TIMEOUT_MS || vars.WXT_FIREBASE_FETCH_TIMEOUT_MS }}
+          WXT_COUNTDOWN_DEADLINE_FACILITATOR: ${{ secrets.WXT_COUNTDOWN_DEADLINE_FACILITATOR || vars.WXT_COUNTDOWN_DEADLINE_FACILITATOR }}
+          WXT_COUNTDOWN_ENABLED_FACILITATOR: ${{ secrets.WXT_COUNTDOWN_ENABLED_FACILITATOR || vars.WXT_COUNTDOWN_ENABLED_FACILITATOR }}
+          WXT_COUNTDOWN_DEADLINE_ARCADE: ${{ secrets.WXT_COUNTDOWN_DEADLINE_ARCADE || vars.WXT_COUNTDOWN_DEADLINE_ARCADE }}
+          WXT_COUNTDOWN_ENABLED_ARCADE: ${{ secrets.WXT_COUNTDOWN_ENABLED_ARCADE || vars.WXT_COUNTDOWN_ENABLED_ARCADE }}
+          WXT_FORCE_REMOTE_CONFIG: ${{ secrets.WXT_FORCE_REMOTE_CONFIG || vars.WXT_FORCE_REMOTE_CONFIG }}
         run: yarn build
 
       - name: Verify production asset paths and analytics

.github/workflows/pr-preview.yml

@@ -112,6 +112,19 @@ jobs:
           NEXT_PUBLIC_ENABLE_ANALYTICS: "false"
           NEXT_PUBLIC_GA_ID: ""
           NEXT_PUBLIC_COOKIE_CONSENT_PREVIEW: "true"
+          WXT_FIREBASE_API_KEY: ${{ secrets.WXT_FIREBASE_API_KEY || vars.WXT_FIREBASE_API_KEY }}
+          WXT_FIREBASE_AUTH_DOMAIN: ${{ secrets.WXT_FIREBASE_AUTH_DOMAIN || vars.WXT_FIREBASE_AUTH_DOMAIN }}
+          WXT_FIREBASE_PROJECT_ID: ${{ secrets.WXT_FIREBASE_PROJECT_ID || vars.WXT_FIREBASE_PROJECT_ID }}
+          WXT_FIREBASE_STORAGE_BUCKET: ${{ secrets.WXT_FIREBASE_STORAGE_BUCKET || vars.WXT_FIREBASE_STORAGE_BUCKET }}
+          WXT_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.WXT_FIREBASE_MESSAGING_SENDER_ID || vars.WXT_FIREBASE_MESSAGING_SENDER_ID }}
+          WXT_FIREBASE_APP_ID: ${{ secrets.WXT_FIREBASE_APP_ID || vars.WXT_FIREBASE_APP_ID }}
+          WXT_FIREBASE_FETCH_INTERVAL_MS: ${{ secrets.WXT_FIREBASE_FETCH_INTERVAL_MS || vars.WXT_FIREBASE_FETCH_INTERVAL_MS }}
+          WXT_FIREBASE_FETCH_TIMEOUT_MS: ${{ secrets.WXT_FIREBASE_FETCH_TIMEOUT_MS || vars.WXT_FIREBASE_FETCH_TIMEOUT_MS }}
+          WXT_COUNTDOWN_DEADLINE_FACILITATOR: ${{ secrets.WXT_COUNTDOWN_DEADLINE_FACILITATOR || vars.WXT_COUNTDOWN_DEADLINE_FACILITATOR }}
+          WXT_COUNTDOWN_ENABLED_FACILITATOR: ${{ secrets.WXT_COUNTDOWN_ENABLED_FACILITATOR || vars.WXT_COUNTDOWN_ENABLED_FACILITATOR }}
+          WXT_COUNTDOWN_DEADLINE_ARCADE: ${{ secrets.WXT_COUNTDOWN_DEADLINE_ARCADE || vars.WXT_COUNTDOWN_DEADLINE_ARCADE }}
+          WXT_COUNTDOWN_ENABLED_ARCADE: ${{ secrets.WXT_COUNTDOWN_ENABLED_ARCADE || vars.WXT_COUNTDOWN_ENABLED_ARCADE }}
+          WXT_FORCE_REMOTE_CONFIG: ${{ secrets.WXT_FORCE_REMOTE_CONFIG || vars.WXT_FORCE_REMOTE_CONFIG }}
         run: |
           yarn install --frozen-lockfile --non-interactive
           yarn build

app/[locale]/page.tsx

@@ -7,6 +7,7 @@ import FacilitatorAnalyzerOption from "@/components/arcade/facilitator-analyzer-
 import FacilitatorPanelGate from "@/components/arcade/facilitator-panel-gate"
 import FreshScoreCheckEnhancer from "@/components/arcade/fresh-score-check-enhancer"
 import MonthlyGamesPanelGate from "@/components/arcade/monthly-games-panel-gate"
+import ProgramCountdown from "@/components/arcade/program-countdown"
 import ShareProfileEnhancer from "@/components/arcade/share-profile-enhancer"
 import TierStatusIconEnhancer from "@/components/arcade/tier-status-icon-enhancer"
 import ArcadeRouteLinks from "@/components/app/arcade-route-links"
@@ -83,6 +84,7 @@ export default async function LocalizedPage({ params }: LocalizedPageProps) {
     <>
       <section className="sr-only" lang={localeInfo.htmlLang}><h1>{title}</h1><p>{description}</p></section>
       <RedesignCalculator />
+      <ProgramCountdown />
       <FreshScoreCheckEnhancer />
       <TierStatusIconEnhancer />
       <MonthlyGamesPanelGate />

app/layout.tsx

@@ -11,6 +11,7 @@ import "./styles/redesign-dashboard.css"
 import "./styles/redesign-results.css"
 import "./styles/redesign-components.css"
 import "./styles/redesign-responsive.css"
+import "./styles/program-countdown.css"
 import "./styles/monthly-games.css"
 import "./styles/monthly-games-mobile-deadline.css"
 import "./styles/facilitator-panel.css"

app/page.tsx

@@ -3,6 +3,7 @@ import FacilitatorAnalyzerOption from "@/components/arcade/facilitator-analyzer-
 import FacilitatorPanelGate from "@/components/arcade/facilitator-panel-gate"
 import FreshScoreCheckEnhancer from "@/components/arcade/fresh-score-check-enhancer"
 import MonthlyGamesPanelGate from "@/components/arcade/monthly-games-panel-gate"
+import ProgramCountdown from "@/components/arcade/program-countdown"
 import ShareProfileEnhancer from "@/components/arcade/share-profile-enhancer"
 import TierStatusIconEnhancer from "@/components/arcade/tier-status-icon-enhancer"
 import ArcadeRouteLinks from "@/components/app/arcade-route-links"
@@ -29,6 +30,7 @@ export default function Page() {
   return (
     <>
       <RedesignCalculator />
+      <ProgramCountdown />
       <FreshScoreCheckEnhancer />
       <TierStatusIconEnhancer />
       <MonthlyGamesPanelGate />

app/styles/program-countdown.css

@@ -0,0 +1,228 @@
+.program-countdown-host{
+  position:relative;
+  z-index:2;
+  width:min(1280px,calc(100% - 40px));
+  margin:0 auto 18px;
+}
+
+.program-countdown-grid{
+  display:grid;
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:12px;
+}
+
+.program-countdown-grid.is-single{
+  grid-template-columns:minmax(0,1fr);
+}
+
+.program-countdown-card{
+  --countdown-accent:var(--arcade-orange);
+  --countdown-accent-soft:rgba(255,159,28,.18);
+  --countdown-border:rgba(255,159,28,.30);
+  display:grid;
+  grid-template-columns:minmax(190px,.85fr) minmax(340px,1.15fr);
+  align-items:center;
+  gap:18px;
+  min-height:112px;
+  padding:16px 18px;
+  border:1px solid var(--countdown-border);
+  border-radius:14px;
+  background:
+    radial-gradient(circle at 10% 10%,var(--countdown-accent-soft),transparent 52%),
+    linear-gradient(145deg,rgba(12,23,48,.94),rgba(7,14,31,.96));
+  box-shadow:0 20px 55px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.025);
+}
+
+.program-countdown-card.tone-blue{
+  --countdown-accent:var(--arcade-cyan);
+  --countdown-accent-soft:rgba(34,211,238,.14);
+  --countdown-border:rgba(34,211,238,.26);
+}
+
+.program-countdown-card.is-ended{
+  opacity:.72;
+}
+
+.program-countdown-heading{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  min-width:0;
+}
+
+.program-countdown-icon{
+  display:grid;
+  place-items:center;
+  flex:0 0 auto;
+  width:42px;
+  height:42px;
+  border:1px solid var(--countdown-border);
+  border-radius:11px;
+  background:var(--countdown-accent-soft);
+  color:var(--countdown-accent);
+}
+
+.program-countdown-icon svg{
+  width:21px;
+  height:21px;
+}
+
+.program-countdown-heading>div{
+  min-width:0;
+  display:grid;
+  gap:5px;
+}
+
+.program-countdown-heading strong{
+  color:#f7f9ff;
+  font-size:.83rem;
+  font-weight:800;
+  letter-spacing:.02em;
+}
+
+.program-countdown-heading span{
+  overflow:hidden;
+  color:var(--arcade-muted);
+  font-size:.68rem;
+  line-height:1.45;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.program-countdown-heading span b{
+  color:var(--countdown-accent);
+  font-weight:700;
+}
+
+.program-countdown-timer{
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+  gap:6px;
+  min-width:0;
+}
+
+.program-countdown-part-wrap{
+  display:flex;
+  align-items:center;
+  gap:6px;
+  min-width:0;
+}
+
+.program-countdown-part{
+  display:grid;
+  place-items:center;
+  min-width:66px;
+  padding:9px 8px 8px;
+  border:1px solid rgba(148,163,184,.14);
+  border-radius:10px;
+  background:rgba(3,10,25,.52);
+}
+
+.program-countdown-part strong{
+  color:var(--countdown-accent);
+  font-variant-numeric:tabular-nums;
+  font-size:1.08rem;
+  line-height:1;
+}
+
+.program-countdown-part span{
+  max-width:62px;
+  margin-top:5px;
+  overflow:hidden;
+  color:#899ab6;
+  font-size:.61rem;
+  line-height:1.1;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.program-countdown-separator{
+  color:var(--countdown-accent);
+  font-size:.9rem;
+  font-weight:800;
+  opacity:.7;
+}
+
+.light .program-countdown-card{
+  background:
+    radial-gradient(circle at 10% 10%,var(--countdown-accent-soft),transparent 52%),
+    linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,248,255,.98));
+  box-shadow:0 14px 35px rgba(37,51,82,.10);
+}
+
+.light .program-countdown-heading strong{
+  color:#172039;
+}
+
+.light .program-countdown-heading span{
+  color:#66718a;
+}
+
+.light .program-countdown-part{
+  border-color:rgba(100,116,139,.18);
+  background:rgba(255,255,255,.72);
+}
+
+.light .program-countdown-part span{
+  color:#66718a;
+}
+
+@media (max-width:1160px){
+  .program-countdown-grid{
+    grid-template-columns:1fr;
+  }
+}
+
+@media (max-width:720px){
+  .program-countdown-host{
+    width:min(100% - 24px,1280px);
+    margin-bottom:14px;
+  }
+
+  .program-countdown-card{
+    grid-template-columns:1fr;
+    gap:13px;
+    min-height:0;
+    padding:14px;
+  }
+
+  .program-countdown-timer{
+    justify-content:stretch;
+    gap:4px;
+  }
+
+  .program-countdown-part-wrap{
+    flex:1 1 0;
+    gap:4px;
+  }
+
+  .program-countdown-part{
+    flex:1 1 0;
+    min-width:0;
+    padding:9px 4px 8px;
+  }
+
+  .program-countdown-part strong{
+    font-size:1rem;
+  }
+
+  .program-countdown-part span{
+    max-width:48px;
+    font-size:.56rem;
+  }
+}
+
+@media (max-width:390px){
+  .program-countdown-heading span{
+    white-space:normal;
+  }
+
+  .program-countdown-part strong{
+    font-size:.92rem;
+  }
+
+  .program-countdown-separator{
+    font-size:.75rem;
+  }
+}