diff --git a/globalSettings.yml b/globalSettings.yml index d0372cc..99e25c9 100644 --- a/globalSettings.yml +++ b/globalSettings.yml @@ -4,18 +4,20 @@ courses: - path: ./1425/2025-fall-alex/modules/ name: "1425" - path: ./4850_AdvancedFE/2026-spring-alex/modules - name: Adv Frontend Spring + name: Adv Frontend - path: ./1400/2026_spring_alex/modules name: "1400" - path: ./1405/2026_spring_alex name: "1405" - - path: ./1810/2026-spring-alex/modules - name: Web Intro Spring - path: ./3840_Telemetry/2026_spring_alex - name: Telem and Ops New + name: Telem and Ops - path: ./4620_Distributed/2026-spring-alex/modules name: Distributed - path: ./4620_Distributed/2025Spring/modules/ name: distributed-old - path: ./3840_Telemetry/2025_spring_alex/modules/ name: telemetry-old + - path: ./4850_AdvancedFE/2025-fall-alex/modules/ + name: adv-frontend-old + - path: ./1810/2026-spring-alex/modules/ + name: Web Intro diff --git a/src/app/course/[courseName]/calendar/day/DayTitle.tsx b/src/app/course/[courseName]/calendar/day/DayTitle.tsx index 7fc805c..61f5d54 100644 --- a/src/app/course/[courseName]/calendar/day/DayTitle.tsx +++ b/src/app/course/[courseName]/calendar/day/DayTitle.tsx @@ -9,7 +9,7 @@ import { getLectureForDay } from "@/features/local/utils/lectureUtils"; import { useLecturesSuspenseQuery } from "@/features/local/lectures/lectureHooks"; import ClientOnly from "@/components/ClientOnly"; import { Tooltip } from "@/components/Tooltip"; -import { useRef, useState } from "react"; +import { useTooltip } from "@/components/useTooltip"; export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) { const { courseName } = useCourseContext(); @@ -17,8 +17,7 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) { const { setIsDragging } = useDragStyleContext(); const todaysLecture = getLectureForDay(weeks, dayAsDate); const modal = useModal(); - const linkRef = useRef(null); - const [tooltipVisible, setTooltipVisible] = useState(false); + const { visible, targetRef, showTooltip, hideTooltip } = useTooltip(); const lectureName = todaysLecture && (todaysLecture.name || "lecture"); @@ -44,9 +43,9 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) { setIsDragging(true); } }} - ref={linkRef} - onMouseEnter={() => setTooltipVisible(true)} - onMouseLeave={() => setTooltipVisible(false)} + ref={targetRef} + onMouseEnter={showTooltip} + onMouseLeave={hideTooltip} > {dayAsDate.getDate()} {lectureName} @@ -65,8 +64,8 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) { )} } - targetRef={linkRef} - visible={tooltipVisible} + targetRef={targetRef} + visible={visible} /> )} diff --git a/src/components/BreadCrumbs.tsx b/src/components/BreadCrumbs.tsx index 1933dd6..2d1edca 100644 --- a/src/components/BreadCrumbs.tsx +++ b/src/components/BreadCrumbs.tsx @@ -22,6 +22,16 @@ export const BreadCrumbs = () => { ? decodeURIComponent(pathSegments[3]) : null; + const lectureDateOnly = lectureDate + ? (() => { + const dateStr = lectureDate.split(" ")[0]; + const date = new Date(dateStr); + const month = date.toLocaleDateString("en-US", { month: "short" }); + const day = date.getDate(); + return `${month} ${day}`; + })() + : null; + const sharedBackgroundClassNames = ` group hover:bg-blue-900/30 @@ -86,7 +96,7 @@ export const BreadCrumbs = () => { shallow={true} className={sharedLinkClassNames} > - {lectureDate} + {lectureDateOnly} diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 2a8a3c5..18f9eff 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -18,10 +18,10 @@ export const Tooltip: React.FC<{ " absolute -translate-x-1/2 " + " bg-gray-900 text-slate-200 text-sm " + " rounded-md py-1 px-2 " + - " transition-all duration-400 " + + " transition-opacity duration-150 " + " border border-slate-700 shadow-[0px_0px_10px_5px] shadow-slate-500/20 " + " max-w-sm max-h-64 overflow-hidden " + - (visible ? " " : " hidden -z-50 ") + (visible ? " opacity-100 " : " opacity-0 pointer-events-none ") } role="tooltip" > diff --git a/src/components/useTooltip.ts b/src/components/useTooltip.ts new file mode 100644 index 0000000..78cfbf2 --- /dev/null +++ b/src/components/useTooltip.ts @@ -0,0 +1,28 @@ +import { useState, useRef, useCallback } from "react"; + +export const useTooltip = (delayMs: number = 150) => { + const [visible, setVisible] = useState(false); + const timeoutRef = useRef(null); + const targetRef = useRef(null); + + const showTooltip = useCallback(() => { + timeoutRef.current = setTimeout(() => { + setVisible(true); + }, delayMs); + }, [delayMs]); + + const hideTooltip = useCallback(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + timeoutRef.current = null; + } + setVisible(false); + }, []); + + return { + visible, + targetRef, + showTooltip, + hideTooltip, + }; +};