Merge pull request #409 from ACM-VIT/dev

Dev

Author: theg1239

app/(app)/client-side.tsx

@@ -114,7 +114,7 @@ function MobileChromeHeader({
                     aria-label={isNavOn ? "Close tools menu" : "Open tools menu"}
                     aria-expanded={isNavOn}
                     style={{ viewTransitionName: "persistent-menu-button" }}
-                    className={`pointer-events-auto flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-black/65 transition-colors active:bg-black/[0.08] dark:text-[#D5D5D5]/85 dark:active:bg-white/[0.07] ${isNavOn ? "pointer-events-none opacity-0" : "opacity-100"}`}
+                    className={`ec-icon-button pointer-events-auto flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-black/65 active:bg-black/[0.08] dark:text-[#D5D5D5]/85 dark:active:bg-white/[0.07] ${isNavOn ? "pointer-events-none opacity-0" : "opacity-100"}`}
                 >
                     <MoreHorizontal className="h-6 w-6" strokeWidth={2.25} aria-hidden />
                 </button>

app/(app)/home/course-search.tsx

@@ -272,7 +272,7 @@ export default function CourseSearch({ courses }: CourseSearchProps) {
     return (
         <div className="mx-auto w-full min-w-0 text-left">
             <div className="relative">
-                <div className="relative flex h-12 sm:h-14 lg:h-16 w-full min-w-0 items-center overflow-hidden bg-white pl-4 pr-2 dark:bg-[#3D414E] border border-black/25 dark:border-[#D5D5D5]/30">
+                <div className="ec-focus-ring relative flex h-12 sm:h-14 lg:h-16 w-full min-w-0 items-center overflow-hidden bg-white pl-4 pr-2 dark:bg-[#3D414E] border border-black/25 dark:border-[#D5D5D5]/30">
                     <Image src={SearchIcon} alt="search" className="dark:invert-[.835] h-5 w-5 sm:h-6 sm:w-6 shrink-0" />
                     {nativeSearchAvailable ? (
                         <button
@@ -311,8 +311,8 @@ export default function CourseSearch({ courses }: CourseSearchProps) {
                     )}
                     <button
                         onClick={clearSelection}
-                        className={`inline-flex h-9 w-9 shrink-0 items-center justify-center text-black/60 transition-colors hover:text-black dark:text-[#D5D5D5]/70 dark:hover:text-[#3BF4C7] ${query ? "visible" : "invisible pointer-events-none w-0 overflow-hidden"
-                            }`}
+                        data-hidden={query ? "false" : "true"}
+                        className="ec-collapse-toggle ec-icon-button inline-flex h-9 w-9 shrink-0 items-center justify-center text-black/60 hover:text-black dark:text-[#D5D5D5]/70 dark:hover:text-[#3BF4C7]"
                         type="button"
                         aria-label="Clear search"
                         tabIndex={query ? 0 : -1}
@@ -361,7 +361,8 @@ export default function CourseSearch({ courses }: CourseSearchProps) {
                                             resultIndex: index,
                                         })
                                     }
-                                    className={`w-full px-4 py-3 text-left flex justify-between items-center gap-3 transition-colors border-b border-black/10 dark:border-[#D5D5D5]/15 last:border-b-0 hover:bg-[#5FC4E7]/25 dark:hover:bg-[#3BF4C7]/10 ${highlightedIndex === index
+                                    style={{ ["--ec-row-index" as string]: index } as React.CSSProperties}
+                                    className={`ec-row-reveal w-full px-4 py-3 text-left flex justify-between items-center gap-3 transition-colors border-b border-black/10 dark:border-[#D5D5D5]/15 last:border-b-0 hover:bg-[#5FC4E7]/25 dark:hover:bg-[#3BF4C7]/10 ${highlightedIndex === index
                                             ? 'bg-[#5FC4E7]/25 dark:bg-[#3BF4C7]/10'
                                             : ''
                                         }`}

app/components/command-palette.tsx

@@ -874,7 +874,7 @@ function ActionRow({
       value={action.id}
       keywords={action.keywords}
       onSelect={() => onSelect(action)}
-      className="flex min-h-[3.1rem] cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-left outline-none transition-colors data-[selected=true]:bg-[#DDEFF4] dark:data-[selected=true]:bg-white/[0.09]"
+      className="ec-command-row flex min-h-[3.1rem] cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-left outline-none transition-colors data-[selected=true]:bg-[#DDEFF4] dark:data-[selected=true]:bg-white/[0.09]"
     >
       <span className="min-w-0 flex-1">
         <span className="block truncate text-sm font-semibold text-black dark:text-[#F3F7FA]">
@@ -901,7 +901,7 @@ function UnavailableCourseRow({
   resource: CommandResourceIntent;
 }) {
   return (
-    <div className="mx-1 mb-1 rounded-md border border-black/10 bg-black/[0.03] px-3 py-2.5 dark:border-white/10 dark:bg-white/[0.045]">
+    <div className="ec-command-row mx-1 mb-1 rounded-md border border-black/10 bg-black/[0.03] px-3 py-2.5 dark:border-white/10 dark:bg-white/[0.045]">
       <div className="text-sm font-semibold text-black dark:text-[#F3F7FA]">
         No {getResourceLabel(resource)} for {course.title}
       </div>
@@ -940,7 +940,7 @@ function PaperRow({
         String(paper.year ?? ""),
       ]}
       onSelect={() => onSelect(paper.href)}
-      className="flex min-h-[3.1rem] cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-left outline-none transition-colors data-[selected=true]:bg-[#DDEFF4] dark:data-[selected=true]:bg-white/[0.09]"
+      className="ec-command-row flex min-h-[3.1rem] cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-left outline-none transition-colors data-[selected=true]:bg-[#DDEFF4] dark:data-[selected=true]:bg-white/[0.09]"
     >
       <span className="min-w-0 flex-1">
         <span className="block truncate text-sm font-semibold text-black dark:text-[#F3F7FA]">
@@ -957,6 +957,29 @@ function PaperRow({
   );
 }
 
+function RecentSkeletonRow({ widthHint }: { widthHint: "lg" | "md" | "sm" }) {
+  const titleWidth =
+    widthHint === "lg" ? "w-7/12" : widthHint === "md" ? "w-6/12" : "w-5/12";
+  const metaWidth =
+    widthHint === "lg" ? "w-4/12" : widthHint === "md" ? "w-3/12" : "w-3/12";
+  return (
+    <div
+      aria-hidden="true"
+      className="ec-command-skeleton-row flex min-h-[3.1rem] items-center justify-between gap-3 rounded-md px-3 py-2"
+    >
+      <span className="min-w-0 flex-1">
+        <span
+          className={`block h-2.5 ${titleWidth} rounded-full bg-black/[0.10] dark:bg-white/[0.12]`}
+        />
+        <span
+          className={`mt-2 block h-2 ${metaWidth} rounded-full bg-black/[0.07] dark:bg-white/[0.08]`}
+        />
+      </span>
+      <span className="h-4 w-12 shrink-0 rounded border border-black/10 bg-black/[0.05] dark:border-white/10 dark:bg-white/[0.06]" />
+    </div>
+  );
+}
+
 function CommandSuspenseFallback({
   label,
 }: {
@@ -1015,8 +1038,9 @@ export default function CommandPalette({ open, onOpenChange }: CommandPalettePro
   }, [isSupportedViewport]);
 
   useEffect(() => {
+    if (!isSupportedViewport) return;
+
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (!isSupportedViewport) return;
       if (event.key.toLowerCase() !== "k" || (!event.metaKey && !event.ctrlKey)) {
         return;
       }
@@ -1026,7 +1050,7 @@ export default function CommandPalette({ open, onOpenChange }: CommandPalettePro
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [isSupportedViewport]);
 
   if (!isSupportedViewport) {
     return null;
@@ -1379,6 +1403,10 @@ function CommandPaletteSession({
     !hasVisibleResults &&
     !shouldShowResolvingFallback &&
     (courseStatus === "ready" || courseStatus === "error");
+  const showRecentSkeletons =
+    !hasSearch &&
+    recentCourseActions.length === 0 &&
+    (courseStatus === "idle" || courseStatus === "loading");
 
   const rememberCoursePreference = (action: CommandAction) => {
     if (!action.courseCode || !action.courseTitle) return;
@@ -1486,11 +1514,11 @@ function CommandPaletteSession({
       <Dialog.Portal forceMount>
         <Dialog.Overlay
           forceMount
-          className="fixed inset-0 z-[95] bg-[#19323A]/28 backdrop-blur-sm data-[state=closed]:hidden dark:bg-black/42"
+          className="ec-command-dialog-overlay fixed inset-0 z-[95] bg-[#19323A]/28 backdrop-blur-sm dark:bg-black/42"
         />
         <Dialog.Content
           forceMount
-          className="ec-command-dialog-panel fixed left-1/2 top-1/2 z-[96] h-[min(20rem,calc(100dvh-2rem))] w-[calc(100vw-2rem)] max-w-[34rem] overflow-hidden rounded-lg border border-[#BED0D7] bg-[#FBFDFE]/98 shadow-[0_24px_70px_rgba(20,54,66,0.24)] outline-none backdrop-blur-xl data-[state=closed]:hidden dark:border-white/14 dark:bg-[#11151D]/98 dark:shadow-[0_24px_90px_rgba(0,0,0,0.62)]"
+          className="ec-command-dialog-panel fixed left-1/2 top-1/2 z-[96] h-[min(20rem,calc(100dvh-2rem))] w-[calc(100vw-2rem)] max-w-[34rem] overflow-hidden rounded-lg border border-[#BED0D7] bg-[#FBFDFE]/98 shadow-[0_24px_70px_rgba(20,54,66,0.24)] outline-none backdrop-blur-xl dark:border-white/14 dark:bg-[#11151D]/98 dark:shadow-[0_24px_90px_rgba(0,0,0,0.62)]"
         >
           <Dialog.Title className="sr-only">ExamCooker command menu</Dialog.Title>
           <Dialog.Description className="sr-only">
@@ -1522,6 +1550,14 @@ function CommandPaletteSession({
             </div>
 
             <Command.List className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 py-2">
+              {showRecentSkeletons ? (
+                <>
+                  <RecentSkeletonRow widthHint="lg" />
+                  <RecentSkeletonRow widthHint="md" />
+                  <RecentSkeletonRow widthHint="sm" />
+                </>
+              ) : null}
+
               {requestedResource
                 ? unavailableCourses.map((course) => (
                     <UnavailableCourseRow

app/components/mobile-tab-bar.tsx

@@ -202,23 +202,28 @@ export default function MobileTabBar({ toolsSheetOpen = false }: Props) {
       }`}
     >
       <ul
-        className={`mx-auto flex max-w-lg items-stretch justify-between ${
+        className={`ec-tab-bar-frame mx-auto flex max-w-lg items-stretch justify-between ${
           nativeAndroid ? "gap-0 px-2 py-2" : "gap-1 px-1 pt-1"
         }`}
       >
+        <span
+          aria-hidden
+          className="ec-tab-pill"
+          data-variant={nativeAndroid ? "android" : "web"}
+        />
         {APP_NAV_LINKS.map((link) => {
           const isActive = link.matches
             ? link.matches(pathname)
             : pathname === link.href;
           return (
-            <li key={link.href} className="min-w-0 flex-1">
+            <li key={link.href} className="relative z-[1] min-w-0 flex-1">
               <Link
                 href={link.href}
                 prefetch
                 transitionTypes={isActive ? undefined : ["nav-lateral"]}
                 onClickCapture={(event) => setNavTransitionOrigin(event.currentTarget)}
                 onClick={(event) => handleTabClick(event, link.href, isActive)}
-                className={`flex flex-col items-center rounded-xl font-semibold leading-tight tracking-tight transition-[background-color,color,transform] active:scale-[0.98] ${
+                className={`flex flex-col items-center rounded-xl font-semibold leading-tight tracking-tight transition-[color,transform] active:scale-[0.98] ${
                   nativeAndroid
                     ? `gap-1 px-1 py-1 text-[11px] ${
                         isActive
@@ -234,24 +239,23 @@ export default function MobileTabBar({ toolsSheetOpen = false }: Props) {
                 aria-current={isActive ? "page" : undefined}
               >
                 <span
-                  className={`flex items-center justify-center transition-colors ${
+                  data-variant={nativeAndroid ? "android" : "web"}
+                  className={`relative z-[1] flex items-center justify-center ${
+                    isActive ? "ec-tab-anchor-active" : ""
+                  } ${
                     nativeAndroid
-                      ? `h-8 min-w-[3.5rem] rounded-full px-3 ${
-                          isActive
-                            ? "bg-[#D6EEF5] dark:bg-[#113446]"
-                            : "bg-transparent"
-                        }`
-                      : `h-10 w-10 rounded-xl ${isActive ? "bg-black/[0.06] dark:bg-white/[0.07]" : ""}`
+                      ? "h-8 min-w-[3.5rem] rounded-full px-3"
+                      : "h-10 w-10 rounded-xl"
                   }`}
                 >
                   <Image
                     src={link.svgSource}
                     alt=""
                     width={22}
                     height={22}
-                    className={`shrink-0 dark:invert-[.835] ${
+                    className={`shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] dark:invert-[.835] ${
                       nativeAndroid ? "h-6 w-6" : "h-[22px] w-[22px]"
-                    } ${isActive ? "opacity-100" : "opacity-85"}`}
+                    } ${isActive ? "scale-[1.08] opacity-100" : "opacity-85"}`}
                   />
                 </span>
                 <span className={`max-w-full truncate ${nativeAndroid ? "text-[12px]" : ""}`}>

app/components/nav-bar.tsx

@@ -442,10 +442,11 @@ const NavBar: React.FC<Props> = ({
             <div className="hidden min-h-[2.5rem] lg:block" aria-hidden />
           </div>
 
-          <div className={`order-2 grid ${toolGridClassName} gap-3 border-b border-black/10 px-5 py-4 dark:border-white/10 lg:order-3 lg:mt-auto lg:flex lg:w-full lg:flex-col lg:items-stretch lg:gap-0 lg:border-b-0 lg:px-1 lg:py-2`}>
+          <div className={`ec-tools-grid order-2 grid ${toolGridClassName} gap-3 border-b border-black/10 px-5 py-4 dark:border-white/10 lg:order-3 lg:mt-auto lg:flex lg:w-full lg:flex-col lg:items-stretch lg:gap-0 lg:border-b-0 lg:px-1 lg:py-2`}>
+            <span aria-hidden className="ec-tool-pill" />
             {commandPaletteEnabled ? (
-              <div className="group/action hidden flex-col items-center gap-2 md:flex lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
-                <div className="flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
+              <div className="ec-tool-action group/action relative z-[1] hidden flex-col items-center gap-2 md:flex lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
+                <div className="ec-tool-action-target flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
                   <button
                     type="button"
                     title="Search"
@@ -464,8 +465,8 @@ const NavBar: React.FC<Props> = ({
             ) : null}
 
             {voiceAgentEnabled ? (
-              <div className="group/action flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
-                <div className="flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
+              <div className="ec-tool-action group/action relative z-[1] flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
+                <div className="ec-tool-action-target flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
                   <div className="flex lg:w-full">
                     {voiceRuntimeRequested ? (
                       <VoiceAgentEntry
@@ -500,7 +501,7 @@ const NavBar: React.FC<Props> = ({
               </div>
             ) : null}
 
-            <div className="group/action flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
+            <div className="ec-tool-action group/action relative z-[1] flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
               <div className="flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
                 <ThemeToggleSwitch
                   className={navActionButtonClassName}
@@ -514,8 +515,8 @@ const NavBar: React.FC<Props> = ({
               </span>
             </div>
 
-            <div className="group/action flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
-              <div className="relative z-10 flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
+            <div className="ec-tool-action group/action relative z-[1] flex flex-col items-center gap-2 lg:m-2 lg:min-h-8 lg:flex-row lg:gap-0 lg:px-2 lg:py-1">
+              <div className="ec-tool-action-target relative z-10 flex min-h-10 items-center justify-center lg:min-h-0 lg:w-full">
                 {isAuthed ? (
                   <div className="lg:w-full" ref={profileRef}>
                     <button
@@ -564,7 +565,8 @@ const NavBar: React.FC<Props> = ({
             </div>
           </div>
 
-          <div className="order-3 hidden min-h-0 flex-1 flex-col items-stretch overflow-y-auto px-2 py-2 lg:order-2 lg:flex lg:justify-center lg:overflow-visible lg:px-1 lg:py-2">
+          <div className="ec-nav-rail order-3 hidden min-h-0 flex-1 flex-col items-stretch overflow-y-auto px-2 py-2 lg:order-2 lg:flex lg:justify-center lg:overflow-visible lg:px-1 lg:py-2">
+            <span aria-hidden className="ec-nav-pill" />
             {APP_NAV_LINKS.map((link) => {
               const isActive = link.matches
                 ? link.matches(pathname)
@@ -576,7 +578,7 @@ const NavBar: React.FC<Props> = ({
                   prefetch
                   transitionTypes={isActive ? undefined : ["nav-lateral"]}
                   onClick={(event) => handleNavLinkClick(event, link.href, isActive)}
-                  className={`group/action m-2 flex min-h-8 items-center rounded-md px-2 py-1 ${isActive ? "bg-[#ffffff]/20" : ""}`}
+                  className={`group/action relative z-[1] m-2 flex min-h-8 items-center rounded-md px-2 py-1 ${isActive ? "ec-nav-anchor-active" : ""}`}
                 >
                   <div className="flex items-center cursor-pointer">
                     <div className="flex-shrink-0 flex items-center justify-center">