Merge pull request #405 from ACM-VIT/dev

Dev

Author: theg1239

.gitignore

@@ -64,4 +64,5 @@ packages/cli/node_modules
 .asc
 mobile/android/keystore.properties
 mobile/android/keystores/examcooker-upload.jks
-.deepsec
+.deepsec
+.wrangler

app/(app)/client-side.tsx

@@ -1,5 +1,6 @@
 "use client";
 import React, { Suspense, useCallback, useEffect, useState } from "react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import NavBar from "@/app/components/nav-bar";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -14,6 +15,12 @@ import {
     PaperSplitViewProvider,
     usePaperSplitView,
 } from "@/app/components/past_papers/paper-split-view";
+import { POSTHOG_FEATURE_FLAGS } from "@/lib/posthog/shared";
+import { usePostHogFeatureFlagEnabled } from "@/lib/posthog/use-feature-flag-enabled";
+
+const CommandPalette = dynamic(() => import("@/app/components/command-palette"), {
+    ssr: false,
+});
 
 function RouteEffects({ onPathChange }: { onPathChange: () => void }) {
     const pathname = usePathname();
@@ -174,11 +181,30 @@ function ClientShell({
     children,
     isNavOn,
     toggleNavbar,
+    commandPaletteOpen,
+    setCommandPaletteOpen,
 }: {
     children: React.ReactNode;
     isNavOn: boolean;
     toggleNavbar: () => void;
+    commandPaletteOpen: boolean;
+    setCommandPaletteOpen: (open: boolean) => void;
 }) {
+    const commandPaletteEnabled =
+        usePostHogFeatureFlagEnabled(POSTHOG_FEATURE_FLAGS.commandPalette) ?? false;
+
+    useEffect(() => {
+        if (!commandPaletteEnabled && commandPaletteOpen) {
+            setCommandPaletteOpen(false);
+        }
+    }, [commandPaletteEnabled, commandPaletteOpen, setCommandPaletteOpen]);
+
+    const openCommandPalette = useCallback(() => {
+        if (commandPaletteEnabled) {
+            setCommandPaletteOpen(true);
+        }
+    }, [commandPaletteEnabled, setCommandPaletteOpen]);
+
     return (
         <Suspense fallback={<div className="relative flex" />}>
             <NavFromProvider>
@@ -192,8 +218,19 @@ function ClientShell({
                             />
                         }
                     >
-                        <NavBar isNavOn={isNavOn} toggleNavbar={toggleNavbar} />
+                        <NavBar
+                            isNavOn={isNavOn}
+                            toggleNavbar={toggleNavbar}
+                            commandPaletteEnabled={commandPaletteEnabled}
+                            onOpenCommandPalette={openCommandPalette}
+                        />
                     </Suspense>
+                    {commandPaletteEnabled ? (
+                        <CommandPalette
+                            open={commandPaletteOpen}
+                            onOpenChange={setCommandPaletteOpen}
+                        />
+                    ) : null}
                     <main className="ec-app-main min-w-0 flex-1 pb-[calc(4.25rem+env(safe-area-inset-bottom))] pt-[env(safe-area-inset-top)] lg:pb-0 lg:pl-14 lg:pt-0">
                         <PaperSplitViewProvider>
                             <Suspense fallback={null}>
@@ -217,6 +254,7 @@ export default function ClientSide({
     children: React.ReactNode;
 }) {
     const [isNavOn, setIsNavOn] = useState(false);
+    const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
 
     useEffect(() => {
         if (typeof window === "undefined") return;
@@ -251,6 +289,8 @@ export default function ClientSide({
         <ClientShell
             isNavOn={isNavOn}
             toggleNavbar={toggleNavbar}
+            commandPaletteOpen={commandPaletteOpen}
+            setCommandPaletteOpen={setCommandPaletteOpen}
         >
             <Suspense fallback={null}>
                 <RouteEffects onPathChange={handlePathChange} />

app/(app)/home/exams-marquee.tsx

@@ -17,9 +17,9 @@ function MarqueeItem({
             href={`/past_papers/${encodeURIComponent(item.courseCode)}`}
             prefetch={prefetch}
             transitionTypes={["nav-forward"]}
-            className="group inline-flex items-center gap-3 whitespace-nowrap text-base text-black/75 transition-colors hover:text-[#253EE0] dark:text-[#D5D5D5]/70 dark:hover:text-[#3BF4C7] md:text-lg md:text-white/85 md:hover:text-[#3BF4C7] dark:md:text-white/85"
+            className="ec-home-marquee-link group inline-flex items-center gap-3 whitespace-nowrap text-base text-black/75 transition-colors hover:text-[#253EE0] dark:text-[#D5D5D5]/70 dark:hover:text-[#3BF4C7] md:text-lg md:text-white/85 md:hover:text-[#3BF4C7] dark:md:text-white/85"
         >
-            <span className="font-mono text-xs font-semibold uppercase tracking-[0.16em] text-black/55 dark:text-[#D5D5D5]/55 group-hover:text-current md:text-sm md:text-white/65 dark:md:text-white/65">
+            <span className="ec-home-marquee-code font-mono text-xs font-semibold uppercase tracking-[0.16em] text-black/55 dark:text-[#D5D5D5]/55 group-hover:text-current md:text-sm md:text-white/65 dark:md:text-white/65">
                 {item.courseCode}
             </span>
             <span className="font-semibold underline-offset-4 decoration-1 group-hover:underline">
@@ -53,7 +53,7 @@ function MarqueeRow({
                         <MarqueeItem item={item} prefetch={prefetch === true && copy === "base"} />
                         <span
                             aria-hidden="true"
-                            className="select-none text-xs text-black/25 dark:text-[#D5D5D5]/20 md:text-white/30 dark:md:text-white/30"
+                            className="ec-home-marquee-divider select-none text-xs text-black/25 dark:text-[#D5D5D5]/20 md:text-white/30 dark:md:text-white/30"
                         >
                             ◆
                         </span>

app/(app)/home/hero-backdrop-video.tsx

@@ -1,14 +1,19 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import ReactPlayer from "react-player";
 import { scheduleIdleWork } from "@/lib/schedule-idle-work";
 
+const PixelBlast = dynamic(() => import("./pixel-bg"), { ssr: false });
+export type HeroBackdropKind = "local" | "youtube" | "pixel";
+
 const VIDEOS = [
     { kind: "local", webm: "/rainy.webm", mp4: "/rainy.mp4", poster: "/rainy.jpg" },
     { kind: "local", webm: "/midnight.webm", mp4: "/midnight.mp4", poster: "/midnight.jpg" },
     { kind: "local", webm: "/night.webm", mp4: "/night.mp4", poster: "/night.jpg" },
     { kind: "local", webm: "/night-city.webm", mp4: "/night-city.mp4", poster: "/night-city.jpg" },
+    { kind: "pixel" },
     {
         kind: "youtube",
         id: "AUQKjgKQF7w",
@@ -20,9 +25,10 @@ const TABLET_MIN_WIDTH_MEDIA = "(min-width: 600px)";
 interface Props {
     onReady?: () => void;
     onYouTubeEngaged?: () => void;
+    onVariantChange?: (kind: HeroBackdropKind | null) => void;
 }
 
-export default function HeroBackdropVideo({ onReady, onYouTubeEngaged }: Props) {
+export default function HeroBackdropVideo({ onReady, onYouTubeEngaged, onVariantChange }: Props) {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const [isVisible, setIsVisible] = useState(false);
     const [video, setVideo] = useState<(typeof VIDEOS)[number] | null>(null);
@@ -96,6 +102,15 @@ export default function HeroBackdropVideo({ onReady, onYouTubeEngaged }: Props)
         onYouTubeEngaged?.();
     }, [isYouTubeEngaged, onYouTubeEngaged]);
 
+    useEffect(() => {
+        onVariantChange?.(video?.kind ?? null);
+    }, [onVariantChange, video]);
+
+    useEffect(() => {
+        if (video?.kind !== "pixel") return;
+        onReady?.();
+    }, [onReady, video]);
+
     const handleYouTubeReady = () => {
         setIsYouTubeReady(true);
         onReady?.();
@@ -149,6 +164,38 @@ export default function HeroBackdropVideo({ onReady, onYouTubeEngaged }: Props)
         );
     }
 
+    if (video.kind === "pixel") {
+        return (
+            <div
+                ref={containerRef}
+                className="absolute inset-0 overflow-hidden"
+                aria-hidden="true"
+            >
+                <div className="relative h-full w-full">
+                    <PixelBlast
+                        variant="square"
+                        pixelSize={4}
+                        color="#B497CF"
+                        patternScale={2}
+                        patternDensity={1}
+                        pixelSizeJitter={0}
+                        enableRipples
+                        rippleSpeed={0.4}
+                        rippleThickness={0.12}
+                        rippleIntensityScale={1.5}
+                        liquid={false}
+                        liquidStrength={0.12}
+                        liquidRadius={1.2}
+                        liquidWobbleSpeed={5}
+                        speed={0.5}
+                        edgeFade={0.25}
+                        transparent
+                    />
+                </div>
+            </div>
+        );
+    }
+
     return (
         <div ref={containerRef} className="absolute inset-0" aria-hidden="true">
             <video

app/(app)/home/hero-frame.tsx

@@ -1,18 +1,21 @@
 "use client";
 
 import { ReactNode, useCallback, useState } from "react";
-import HeroBackdropVideo from "./hero-backdrop-video";
+import HeroBackdropVideo, { type HeroBackdropKind } from "./hero-backdrop-video";
 
 export default function HeroFrame({ children }: { children: ReactNode }) {
     const [videoReady, setVideoReady] = useState(false);
     const [youtubeEngaged, setYoutubeEngaged] = useState(false);
+    const [backdropKind, setBackdropKind] = useState<HeroBackdropKind | null>(null);
     const handleBackdropReady = useCallback(() => setVideoReady(true), []);
     const handleYouTubeEngaged = useCallback(() => setYoutubeEngaged(true), []);
+    const isPixelBackdrop = backdropKind === "pixel";
 
     return (
         <div
+            data-hero-backdrop={backdropKind ?? undefined}
             className={`relative transition-colors duration-500 ${
-                videoReady ? "min-[600px]:text-white dark:min-[600px]:text-white" : ""
+                videoReady && !isPixelBackdrop ? "min-[600px]:text-white dark:min-[600px]:text-white" : ""
             }`}
         >
             <div
@@ -22,6 +25,7 @@ export default function HeroFrame({ children }: { children: ReactNode }) {
                 <HeroBackdropVideo
                     onReady={handleBackdropReady}
                     onYouTubeEngaged={handleYouTubeEngaged}
+                    onVariantChange={setBackdropKind}
                 />
                 <div
                     className={`absolute inset-0 transition-colors duration-700 ${

app/(app)/home/home.tsx

@@ -30,7 +30,7 @@ async function HomeMarqueeSection() {
 }
 
 const subtitleClass =
-    "text-sm sm:text-base lg:text-xl text-black/70 dark:text-[#D5D5D5]/70 md:text-white/85 dark:md:text-white/85 mb-6 sm:mb-8 lg:mb-10 max-w-2xl mx-auto";
+    "ec-home-subtitle text-sm sm:text-base lg:text-xl text-black/70 dark:text-[#D5D5D5]/70 md:text-white/85 dark:md:text-white/85 mb-6 sm:mb-8 lg:mb-10 max-w-2xl mx-auto";
 
 function HomeSubtitle({ userName }: { userName: string | null }) {
     if (!userName) {