Merge branch 'main' into feature/error-handling

app/[locale]/dashboard/news/components/EventContainer.tsx

@@ -14,6 +14,7 @@ interface Props {
 	date?: Date | null;
 	setOpenMoreModal?: (openMoreModal: string | null) => void;
 	openMoreModal?: string | null;
+	monthview: boolean;
 }
 
 export default function EventContainer({
@@ -24,6 +25,7 @@ export default function EventContainer({
 	date,
 	openMoreModal,
 	setOpenMoreModal,
+	monthview,
 }: Props) {
 	const parentRef = useRef<HTMLDivElement>(null);
 
@@ -49,7 +51,9 @@ export default function EventContainer({
 					}
 				}}
 			>
-				<Marquee parentRef={parentRef}>{title}</Marquee>
+				<Marquee parentRef={parentRef} monthview={monthview}>
+					{title}
+				</Marquee>
 			</div>
 			{showMoreEvents && openMoreModal == date?.toISOString() && (
 				<div className="fixed z-50 flex justify-center items-center">

app/[locale]/dashboard/news/components/ExtraEventContainer.tsx

@@ -24,7 +24,9 @@ export default function ExtraEventContainer({ index, onClickEvent, event }: Prop
 				}
 			}}
 		>
-			<Marquee parentRef={parentRef}>{event.title}</Marquee>
+			<Marquee parentRef={parentRef} monthview={true}>
+				{event.title}
+			</Marquee>
 		</div>
 	);
 }

app/[locale]/dashboard/news/components/Marquee.tsx

@@ -3,9 +3,10 @@ import React, { useRef, useLayoutEffect } from 'react';
 interface Props {
 	children: string;
 	parentRef: React.RefObject<HTMLDivElement>;
+	monthview: boolean;
 }
 
-export default function Marquee({ children, parentRef }: Props) {
+export default function Marquee({ children, parentRef, monthview }: Props) {
 	const marqueeRef = useRef<HTMLDivElement>(null);
 
 	useLayoutEffect(() => {
@@ -20,5 +21,9 @@ export default function Marquee({ children, parentRef }: Props) {
 		}
 	}, [children, parentRef]);
 
-	return <span ref={marqueeRef}>{children}</span>;
+	return (
+		<span className={`${monthview ? 'truncate' : ''}`} ref={marqueeRef}>
+			{children}
+		</span>
+	);
 }

app/[locale]/dashboard/news/components/NewsCalendar.tsx

@@ -180,6 +180,7 @@ export default function NewsCalendar({ events, locale, handleEventSelect, activi
 						start: startOfDay.toDate(),
 						end: endOfDay.toDate(),
 						allDay: isAllDay,
+						groupId: event.cardId,
 						color: getColorForActivityArea(colors, event),
 					});
 
@@ -192,6 +193,7 @@ export default function NewsCalendar({ events, locale, handleEventSelect, activi
 					title: event.title,
 					start: startDate.toDate(),
 					end: endDate.toDate(),
+					groupId: event.cardId,
 					allDay: isAllDay,
 					color: getColorForActivityArea(colors, event),
 				});
@@ -293,13 +295,14 @@ export default function NewsCalendar({ events, locale, handleEventSelect, activi
 									date={arg.event.start}
 									setOpenMoreModal={setOpenMoreModal}
 									openMoreModal={openMoreModal}
+									monthview={true}
 								/>
 							</div>
 						);
 					} else {
 						return (
 							<div className="p-1 cursor-pointer w-full text-center z-0">
-								<EventContainer title={arg.event.title} />
+								<EventContainer title={arg.event.title} monthview={viewType == 'dayGridMonth'} />
 							</div>
 						);
 					}

app/[locale]/globals.css

@@ -195,3 +195,8 @@
 .fc .fc-daygrid-event {
 	z-index: unset;
 }
+
+.fc-event-main {
+	overflow: hidden;
+	cursor: pointer;
+}

components/Avatar.tsx

@@ -23,6 +23,13 @@ export default function Avatar({ size, textSize, color, userProfile }: Props) {
 
 	useEffect(() => {
 		setUsePlaceholder(false);
+		setLoading(true);
+
+		const timeoutId = setTimeout(() => {
+			setLoading(false);
+		}, 2000);
+
+		return () => clearTimeout(timeoutId);
 	}, [user]);
 
 	return (