feat: active cell and if-needed behavior (#474)

* fix: 🐛 centralize active range

* feat: ✨ deselect and if-needed italics

* fix: 🐛 increment if-needed

* chore: 🔧 rename unavailability

* refactor: ♻️ marker attribute

* chore: 🔧 remove dead code

* refactor: ♻️ separate tuple function

* chore: 🔧 follow Tailwind

* fix: 🐛 mui chips

Author: kylebtran

src/components/availability/availability.tsx

@@ -137,7 +137,6 @@ export function Availability({
 		googleCalendarEvents,
 		members,
 		pendingMembers,
-		anchorNormalizedDate,
 		importGridIsoSet,
 		doesntNeedDay,
 		currentPageAvailability,
@@ -283,7 +282,7 @@ export function Availability({
 						<div className="shrink-0 lg:hidden">
 							<AvailabilityActions {...actionsProps} />
 						</div>
-						<table className="w-full table-fixed">
+						<table data-availability-grid="" className="w-full table-fixed">
 							<AvailabilityTableHeader
 								currentPageAvailability={currentPageAvailability}
 								meetingType={meetingData.meetingType}
@@ -349,13 +348,12 @@ export function Availability({
 						>
 							<GroupResponses
 								availabilityDates={availabilityDates}
+								ifNeededDates={ifNeededDates}
 								fromTime={fromTimeMinutes}
 								members={members}
 								pendingMembers={pendingMembers}
 								timezone={userTimezone}
-								anchorNormalizedDate={anchorNormalizedDate}
 								currentPageAvailability={currentPageAvailability}
-								availabilityTimeBlocks={availabilityTimeBlocks}
 								doesntNeedDay={doesntNeedDay}
 							/>
 						</Paper>

src/components/availability/group-responses.tsx

@@ -2,15 +2,29 @@ import { Avatar, Button, Chip, Switch, Typography } from "@mui/material/";
 import { XIcon } from "lucide-react";
 import { useCallback, useMemo } from "react";
 import { useShallow } from "zustand/shallow";
-import { computeGroupMembersForRange } from "@/lib/availability/group-query";
-import { newZonedPageAvailAndDates } from "@/lib/availability/utils";
+import {
+	computeGroupMembersForRange,
+	type GroupMembersForRange,
+	type MemberRangeStatus,
+	statusForMember,
+} from "@/lib/availability/group-query";
+import { cloneDates } from "@/lib/availability/utils";
 import type { Member, SelectionStateType } from "@/lib/types/availability";
 import { cn } from "@/lib/utils";
 import { ZotDate } from "@/lib/zotdate";
-import { useAvailabilityStore } from "@/store/useAvailabilityStore";
+import {
+	useActiveSelectionRange,
+	useAvailabilityStore,
+} from "@/store/useAvailabilityStore";
 
 const EN_DASH = "\u2013";
 
+const RESPONDER_CHIP_CLASS: Record<MemberRangeStatus, string> = {
+	available: "",
+	"if-needed": "[&_.MuiChip-label]:italic",
+	unavailable: "[&_.MuiChip-label]:line-through",
+};
+
 /**
  * Formats a selection range for display in the sidebar. The range is a
  * rectangle in (day, time) space, not a continuous interval, so the day and
@@ -50,42 +64,48 @@ function formatRangeLabel(range: SelectionStateType, dates: ZotDate[]): string {
 
 interface GroupResponsesProps {
 	availabilityDates: ZotDate[];
+	ifNeededDates: ZotDate[];
 	members: Member[];
 	pendingMembers: Member[];
 	fromTime: number;
 	timezone: string;
-	anchorNormalizedDate: Date[];
 	currentPageAvailability: {
 		availabilities: (ZotDate | null)[];
 		ifNeeded: (ZotDate | null)[];
 	};
-	availabilityTimeBlocks: number[];
 	doesntNeedDay: boolean;
 }
 
 export function GroupResponses({
 	availabilityDates,
+	ifNeededDates,
 	fromTime,
 	members,
 	pendingMembers,
 	timezone,
 	currentPageAvailability,
 	doesntNeedDay,
 }: GroupResponsesProps) {
-	const [_newBlocks, newAvailDates] = newZonedPageAvailAndDates(
-		currentPageAvailability.availabilities,
-		availabilityDates,
-		doesntNeedDay,
+	const newAvailDates = useMemo(
+		() =>
+			cloneDates(
+				currentPageAvailability.availabilities,
+				availabilityDates,
+				doesntNeedDay,
+			),
+		[currentPageAvailability.availabilities, availabilityDates, doesntNeedDay],
 	);
-	const [_newIfNeededBlocks, newIfNeededDates] = newZonedPageAvailAndDates(
-		currentPageAvailability.ifNeeded,
-		availabilityDates,
-		doesntNeedDay,
+	const newIfNeededDates = useMemo(
+		() =>
+			cloneDates(
+				currentPageAvailability.ifNeeded,
+				ifNeededDates,
+				doesntNeedDay,
+			),
+		[currentPageAvailability.ifNeeded, ifNeededDates, doesntNeedDay],
 	);
 
 	const {
-		draftRange,
-		committedRange,
 		isMobileDrawerOpen,
 		setIsMobileDrawerOpen,
 		setHoveredMember,
@@ -96,8 +116,6 @@ export function GroupResponses({
 		setEnabled: setShowBestTimes,
 	} = useAvailabilityStore(
 		useShallow((state) => ({
-			draftRange: state.draftRange,
-			committedRange: state.committedRange,
 			isMobileDrawerOpen: state.isMobileDrawerOpen,
 			setIsMobileDrawerOpen: state.setIsMobileDrawerOpen,
 			setHoveredMember: state.setHoveredMember,
@@ -109,7 +127,7 @@ export function GroupResponses({
 		})),
 	);
 
-	const activeRange = draftRange ?? committedRange;
+	const activeRange = useActiveSelectionRange();
 
 	const handleClearSelected = useCallback(() => {
 		setSelectedMember([]);
@@ -129,39 +147,46 @@ export function GroupResponses({
 		[toggleSelectedMember],
 	);
 
-	const availableMembers = useMemo(() => {
-		if (!activeRange) return [] as Member[];
-		const { availableMemberIds } = computeGroupMembersForRange({
+	const respondedMembers = useMemo(() => {
+		const pendingMemberIds = new Set(pendingMembers.map((m) => m.memberId));
+		return members.filter((member) => !pendingMemberIds.has(member.memberId));
+	}, [members, pendingMembers]);
+
+	const groups = useMemo<GroupMembersForRange | null>(() => {
+		if (!activeRange) return null;
+		return computeGroupMembersForRange({
 			range: activeRange,
 			availabilityDates: newAvailDates,
 			ifNeededDates: newIfNeededDates,
 			fromTimeMinutes: fromTime,
 			timeZone: timezone,
 		});
-		const byId = new Map(members.map((m) => [m.memberId, m]));
-		return availableMemberIds
-			.map((id) => byId.get(id))
-			.filter((m): m is Member => Boolean(m));
-	}, [
-		activeRange,
-		newAvailDates,
-		newIfNeededDates,
-		fromTime,
-		timezone,
-		members,
-	]);
+	}, [activeRange, newAvailDates, newIfNeededDates, fromTime, timezone]);
 
-	const respondedMembers = useMemo(() => {
-		const pendingMemberIds = new Set(pendingMembers.map((m) => m.memberId));
-		return members.filter((member) => !pendingMemberIds.has(member.memberId));
-	}, [members, pendingMembers]);
+	const memberStatus = useMemo<ReadonlyMap<string, MemberRangeStatus>>(() => {
+		if (!groups) return new Map();
+		const map = new Map<string, MemberRangeStatus>();
+		for (const m of respondedMembers) {
+			map.set(m.memberId, statusForMember(m.memberId, groups));
+		}
+		return map;
+	}, [groups, respondedMembers]);
+
+	const availableCount = activeRange
+		? respondedMembers.filter(
+				(m) => memberStatus.get(m.memberId) !== "unavailable",
+			).length
+		: respondedMembers.length;
 
 	const blockInfoString = activeRange
 		? formatRangeLabel(activeRange, newAvailDates)
 		: "Select a cell to view";
 
 	return (
-		<div className="flex min-h-0 min-w-0 flex-1 flex-col lg:shrink-0">
+		<div
+			data-availability-sidebar=""
+			className="flex min-h-0 min-w-0 flex-1 flex-col lg:shrink-0"
+		>
 			<div
 				className={cn(
 					// Cap height so the flex row does not grow with responder count (see availability layout).
@@ -221,43 +246,39 @@ export function GroupResponses({
 					<div>
 						<h2 className="font-medium text-xl">Responders</h2>
 						<Typography variant="caption" color="textSecondary">
-							Available (
-							{activeRange ? availableMembers.length : respondedMembers.length})
+							Available ({availableCount})
 						</Typography>
 					</div>
 
 					<ul className="mt-3 flex flex-wrap gap-2">
-						{respondedMembers.map((member) => (
-							<Chip
-								key={member.memberId}
-								clickable
-								icon={
-									<Avatar
-										alt={member.displayName}
-										src={member.profilePicture ?? undefined}
-										slotProps={{ img: { referrerPolicy: "no-referrer" } }}
-										sx={{ width: 24, height: 24, fontSize: 12 }}
-									/>
-								}
-								label={member.displayName}
-								color={
-									selectedMembers.includes(member.memberId)
-										? "primary"
-										: "default"
-								}
-								variant="outlined"
-								sx={
-									activeRange
-										? availableMembers.includes(member)
-											? { maxWidth: "100%" }
-											: { textDecoration: "line-through", maxWidth: "100%" }
-										: { maxWidth: "100%" }
-								}
-								onMouseEnter={() => handleMemberHover(member.memberId)}
-								onMouseLeave={() => handleMemberHover(null)}
-								onClick={() => handleMemberSelect(member.memberId)}
-							/>
-						))}
+						{respondedMembers.map((member) => {
+							const status = memberStatus.get(member.memberId) ?? "available";
+							return (
+								<Chip
+									key={member.memberId}
+									clickable
+									icon={
+										<Avatar
+											alt={member.displayName}
+											src={member.profilePicture ?? undefined}
+											slotProps={{ img: { referrerPolicy: "no-referrer" } }}
+											sx={{ width: 24, height: 24, fontSize: 12 }}
+										/>
+									}
+									label={member.displayName}
+									color={
+										selectedMembers.includes(member.memberId)
+											? "primary"
+											: "default"
+									}
+									variant="outlined"
+									className={cn("max-w-full", RESPONDER_CHIP_CLASS[status])}
+									onMouseEnter={() => handleMemberHover(member.memberId)}
+									onMouseLeave={() => handleMemberHover(null)}
+									onClick={() => handleMemberSelect(member.memberId)}
+								/>
+							);
+						})}
 					</ul>
 					<div className="mt-4 ml-auto">
 						<Button

src/components/availability/table/availability-table-header.tsx

@@ -2,8 +2,8 @@ import { Typography } from "@mui/material";
 import React from "react";
 import type { SelectMeeting } from "@/db/schema";
 import {
+	cloneBlocks,
 	formatDateToUSNumeric,
-	newZonedPageAvailAndDates,
 	spacerBeforeDate,
 } from "@/lib/availability/utils";
 import type { ZotDate } from "@/lib/zotdate";
@@ -22,11 +22,8 @@ export function AvailabilityTableHeader({
 	meetingType,
 	doesntNeedDay,
 }: AvailabilityTableHeaderProps) {
-	//extra day calculation for day spillover
-	//put in here to prevent infinite adding, recalculates everytime something changes
-	const [newBlocks, _newAvailDates] = newZonedPageAvailAndDates(
+	const newBlocks = cloneBlocks(
 		currentPageAvailability.availabilities,
-		null,
 		doesntNeedDay,
 	);
 

src/hooks/use-availability-data.ts

@@ -132,7 +132,6 @@ export interface UseAvailabilityDataResult {
 	googleCalendarEvents: GoogleCalendarEvent[];
 	members: Member[];
 	pendingMembers: Member[];
-	anchorNormalizedDate: Date[];
 	importGridIsoSet: ReadonlySet<string>;
 	doesntNeedDay: boolean;
 	currentPageAvailability: {
@@ -364,7 +363,6 @@ export function useAvailabilityData({
 		googleCalendarEvents,
 		members,
 		pendingMembers,
-		anchorNormalizedDate,
 		importGridIsoSet,
 		doesntNeedDay,
 		currentPageAvailability,

src/hooks/use-grid-interaction.ts

@@ -50,6 +50,15 @@ function rangesEqual(
 	);
 }
 
+function isInsideInteractiveSurface(el: Element | null): boolean {
+	if (!el) return false;
+	return Boolean(
+		el.closest("[data-availability-grid]") ||
+			el.closest("[data-availability-sidebar]") ||
+			el.closest('[role="presentation"]'),
+	);
+}
+
 /**
  * Owns the interaction half of the availability feature:
  * - commit dispatcher (personal paint / schedule replace / group lock-unlock),
@@ -141,6 +150,19 @@ export function useGridInteraction({
 		setIsMobileDrawerOpen(true);
 	};
 
+	useEffect(() => {
+		if (availabilityView !== "group") return;
+		const onDocPointerDown = (e: PointerEvent) => {
+			if (isInsideInteractiveSurface(e.target as Element | null)) return;
+			if (useAvailabilityStore.getState().committedRange === undefined) return;
+			resetSelection();
+			setIsMobileDrawerOpen(false);
+		};
+		document.addEventListener("pointerdown", onDocPointerDown, true);
+		return () =>
+			document.removeEventListener("pointerdown", onDocPointerDown, true);
+	}, [availabilityView, resetSelection, setIsMobileDrawerOpen]);
+
 	const handlers = useGridDragSelection({
 		lockToStartRow: availabilityView === "schedule",
 		onDragStart: () => {