Merge pull request #189 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/Avatar.tsx

@@ -1,10 +1,9 @@
 import * as RAvatar from "@radix-ui/react-avatar"
+import { CheckIcon, LockKeyholeIcon, UserRoundIcon, XIcon } from "lucide-react"
 import type React from "react"
+import { useMemo } from "react"
 import { twMerge } from "tailwind-merge"
-
 import { IconSizeHelper } from "./IconSizeHelper"
-import { XIcon, CheckIcon, LockKeyholeIcon, UserRoundIcon } from "lucide-react"
-import { useMemo } from "react"
 
 type PresenceStatus = "busy" | "focus" | "online" | "offline"
 type Status = "approved" | "declined" | "locked"
@@ -59,11 +58,22 @@ const statusStyles: { [status in Status]: string } = {
 	locked: "bg-icon",
 } as const
 
-const statusSVGs: { [status in Status]: JSX.Element } = {
-	approved: <CheckIcon aria-label="approved" size="12" strokeWidth={4} />,
-	declined: <XIcon aria-label="declined" size="12" strokeWidth={4} />,
-	locked: <LockKeyholeIcon aria-label="locked" size="12" strokeWidth={4} />,
-} as const
+const getStatusSVG = (status: Status): JSX.Element => {
+	switch (status) {
+		case "approved":
+			return <CheckIcon aria-label="approved" size="12" strokeWidth={4} />
+		case "declined":
+			return <XIcon aria-label="declined" size="12" strokeWidth={4} />
+		case "locked":
+			return (
+				<LockKeyholeIcon
+					aria-label="locked"
+					size="12"
+					strokeWidth={4}
+				/>
+			)
+	}
+}
 
 function PresenceIcon({
 	presence,
@@ -147,7 +157,7 @@ function StatusIcon({
 				padding: 1,
 			}}
 		>
-			{statusSVGs[status]}
+			{getStatusSVG(status)}
 		</IconSizeHelper>
 	)
 }

library/src/components/Collapsible.tsx

@@ -142,7 +142,7 @@ Trigger.displayName = "CollapsibleTrigger"
 
 function Panel({ className, role, ...props }: PanelProps) {
 	const classNameResolved = useCallback(
-		(state: CollapsibleRUI.Root.State) => {
+		(state: CollapsibleRUI.Panel.State) => {
 			const basicClassName =
 				"overflow-hidden h-[var(--collapsible-panel-height)] data-[starting-style]:h-0 border-border data-[ending-style]:h-0 origin-top border-0 data-[open]:border-x data-[open]:border-b data-[open]:border-t-0 bg-surface data-[open]:border-border border-solid transition-all ease-linear motion-reduce:transition-none"
 			if (typeof className === "function") {

library/src/components/timetable/ItemWrapper.tsx

@@ -105,10 +105,11 @@ export default function ItemWrapper<
 			style={{
 				left,
 				width,
-				height,
+				height: "auto",
 				maxHeight: height,
 				pointerEvents: "none",
 			}}
+			data-component="timetable-item-wrapper-outer"
 			{...mouseHandler}
 		>
 			{/** biome-ignore lint/a11y/useSemanticElements: should be div to be able to have buttons inside */}
@@ -119,10 +120,15 @@ export default function ItemWrapper<
 				style={{
 					pointerEvents: multiSelectionMode ? "none" : "auto",
 				}}
-				onClick={onTimeSlotItemClick ? (e) => {
-					e.stopPropagation()
-					if (onTimeSlotItemClick) onTimeSlotItemClick(group, item)
-				} : undefined}
+				onClick={
+					onTimeSlotItemClick
+						? (e) => {
+								e.stopPropagation()
+								if (onTimeSlotItemClick)
+									onTimeSlotItemClick(group, item)
+							}
+						: undefined
+				}
 				onKeyUp={(e) => {
 					if (e.key === "Enter") {
 						e.stopPropagation()
@@ -139,6 +145,7 @@ export default function ItemWrapper<
 				role="button"
 				tabIndex={-1}
 				id={id}
+				data-component="timetable-item-wrapper-inner"
 			>
 				<TimeSlotItemComponent
 					group={group}