Merge pull request #2967 from ever-co/develop

Release

apps/web/app/hooks/features/useTimer.ts

@@ -370,15 +370,15 @@ export function useTimer() {
 
 	useEffect(() => {
 		let syncTimerInterval: NodeJS.Timeout;
-		if (timerStatus?.running) {
+		if (timerStatus?.running && firstLoad) {
 			syncTimerInterval = setInterval(() => {
 				syncTimer();
 			}, 60000);
 		}
 		return () => {
 			if (syncTimerInterval) clearInterval(syncTimerInterval);
 		};
-	}, [syncTimer, timerStatus]);
+	}, [syncTimer, timerStatus, firstLoad]);
 
 	// If active team changes then stop the timer
 	useEffect(() => {
@@ -402,9 +402,9 @@ export function useTimer() {
 	// If active task changes then stop the timer
 	useEffect(() => {
 		const taskId = activeTeamTask?.id;
-		const canStop = lastActiveTaskId.current !== null && taskId !== lastActiveTaskId.current && firstLoad;
+		const canStop = lastActiveTaskId.current !== null && taskId !== lastActiveTaskId.current;
 
-		if (canStop && timerStatusRef.current?.running) {
+		if (canStop && timerStatusRef.current?.running && firstLoad) {
 			// If timer is started at some other source keep the timer running...
 			// If timer is started in the browser Stop the timer on Task Change
 			if (timerStatusRef.current.lastLog?.source === TimerSource.TEAMS) {

apps/web/lib/components/lazy-render.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
 type Props<T> = {
 	items: T[];
@@ -12,7 +12,8 @@ type Props<T> = {
  * @param param0
  * @returns
  */
-export function LazyRender<T extends object>({ items, children, itemsPerPage = 20 }: Props<T>) {
+export function LazyRender<T extends object>({ items, children, itemsPerPage = 10 }: Props<T>) {
+	const itemsRef = useRef(items);
 	const [slicedItems, setSlicedItems] = useState<T[]>([]);
 	const [page, setPage] = useState(1);
 
@@ -22,6 +23,12 @@ export function LazyRender<T extends object>({ items, children, itemsPerPage = 2
 			return;
 		}
 
+		if (itemsRef.current !== items && page > 1) {
+			itemsRef.current = items;
+			setPage(1);
+			return;
+		}
+
 		let cancelableIdlCallback = requestIdleCallback(function callback(deadline) {
 			console.log('Called Lazy Render');
 			if (deadline.timeRemaining() < 1) {
@@ -31,9 +38,13 @@ export function LazyRender<T extends object>({ items, children, itemsPerPage = 2
 
 			const newItems = items.slice(0, itemsPerPage * page);
 
-			if (items.length > newItems.length) {
-				setSlicedItems((prevItems) => (prevItems.length === newItems.length ? prevItems : newItems));
+			setSlicedItems((prevItems) =>
+				prevItems.length === newItems.length && itemsRef.current === items ? prevItems : newItems
+			);
+
+			itemsRef.current = items;
 
+			if (items.length > newItems.length) {
 				// Increment the page to trigger the next render
 				setPage((p) => p + 1);
 			}
@@ -42,7 +53,7 @@ export function LazyRender<T extends object>({ items, children, itemsPerPage = 2
 		return () => {
 			window.cancelIdleCallback(cancelableIdlCallback);
 		};
-	}, [page, items]);
+	}, [page, items, itemsRef]);
 
 	return (
 		<>

apps/web/lib/features/all-teams-members-block-view.tsx

@@ -29,7 +29,13 @@ export default function AllTeamsMembersBlockView({ teams }: { teams: IOrganizati
 	return (
 		<>
 			{employeesArray.length > 0 ? (
-				employeesArray.map((employee) => <UserTeamBlockCard key={employee.id} member={employee} />)
+				<div className="flex w-full flex-wrap items-start">{
+					employeesArray.map((employee) =>
+						<div className="px-2" key={employee.id}>
+							<UserTeamBlockCard key={employee.id} member={employee} />
+						</div>
+					)
+				}</div>
 			) : (
 				<div className="text-center font-medium w-full">There is no member for filtered value</div>
 			)}

apps/web/lib/features/all-teams-members-card-view.tsx

@@ -22,9 +22,15 @@ export default function TeamsMembersCardView({ teams }: { teams: IOrganizationTe
 
 							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme flex flex-col gap-2 mt-4">
 								{team.members.length > 0 ? (
-									team.members.map((member) => {
-										return <UserTeamCard key={`${member.id}${team.id}`} member={member} />;
-									})
+									<ul>
+										{team.members.map((member) => {
+											return (
+												<li key={member.id} className='mb-4'>
+													<UserTeamCard key={`${member.id}${team.id}`} member={member} />
+												</li>
+											)
+										})}
+									</ul>
 								) : (
 									<div className="text-center font-medium">
 										There is no member for filtered value in the team{' '}

apps/web/lib/features/all-teams/all-team-members-filter.tsx

@@ -68,7 +68,7 @@ export function MemberFilter() {
 					{({ open }) => {
 						return (
 							<>
-								<Listbox.Button as="div" className="cursor-pointer">
+								<Listbox.Button as="div" className="cursor-pointer border rounded-lg dark:border-dark-lighter">
 									<MemberFilterOption
 										label={value.label}
 										icon={

apps/web/lib/features/task/task-input.tsx

@@ -477,7 +477,7 @@ function TaskCard({
 			<Card
 				shadow="custom"
 				className={clsxm(
-					'rounded-xl md:px-4 md:py-4',
+					'rounded-xl md:px-4 md:py-4 overflow-hidden',
 					!cardWithoutShadow && ['shadow-xlcard'],
 					fullWidth ? ['w-full'] : ['md:w-[500px]'],
 					fullHeight ? 'h-full' : 'max-h-96'

apps/web/lib/features/task/task-status.tsx

@@ -980,7 +980,8 @@ export function StatusDropdown<T extends TStatusItem>({
 					: 'bg-[#F2F2F2] ',
 				'dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33]',
 				taskStatusClassName,
-				isVersion && 'dark:text-white'
+				isVersion && 'dark:text-white',
+				'h-full'
 			)}
 			titleClassName={clsxm(hasBtnIcon && ['whitespace-nowrap overflow-hidden max-w-[90%]'])}
 			isVersion={isVersion}
@@ -1002,7 +1003,7 @@ export function StatusDropdown<T extends TStatusItem>({
 	);
 
 	const dropdown = (
-		<Tooltip label={disabledReason} enabled={!enabled} placement="auto">
+		<Tooltip className="h-full" label={disabledReason} enabled={!enabled} placement="auto">
 			<div className={clsxm('relative', className)}>
 				<Listbox
 					value={value?.value || value?.name || (multiple ? [] : null)}

apps/web/lib/settings/task-statuses-form.tsx

@@ -138,8 +138,8 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 							</Text>
 						)}
 
-						<div className="flex flex-col items-center sm:items-start">
-							<div className="flex">
+						<div className="flex flex-col gap-2  items-center sm:items-start">
+							<div className="flex gap-2">
 								{!createNew && !edit && (
 									<Button
 										variant="outline"
@@ -153,7 +153,7 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 										{t('pages.settingsTeam.CREATE_NEW_STATUS')}
 									</Button>
 								)}
-								<Button onClick={openModal} variant="outline" className="mx-2 rounded-[10px]">
+								<Button onClick={openModal} variant="outline" className="rounded-[10px]">
 									Sort
 								</Button>
 							</div>
@@ -165,20 +165,20 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 									</Text>
 									<div
 										className={clsxm(
-											'flex w-full gap-x-5 items-stretch mt-3',
+											'flex w-full gap-x-5 items-center mt-3',
 											formOnly && ['flex-wrap space-y-2']
 										)}
 									>
 										<InputField
 											type="text"
 											placeholder={t('pages.settingsTeam.CREATE_NEW_STATUS')}
-											className="mb-0 min-w-[350px]"
-											wrapperClassName="mb-0 rounded-lg"
+											className="mb-0 w-full"
+											wrapperClassName="mb-0 rounded-lg flex-grow"
 											{...register('name')}
 										/>
 										<StandardTaskStatusDropDown
 											onValueChange={(status) => setValue('template', status)}
-											className="h-[53px] w-[265px]"
+											className=" h-14 shrink-0"
 										/>
 										<IconPopover
 											iconList={iconList}
@@ -192,6 +192,7 @@ export const TaskStatusesForm = ({ formOnly = false, onCreated }: StatusForm) =>
 										<ColorPicker
 											defaultColor={edit ? edit.color : undefined}
 											onChange={(color) => setValue('color', color)}
+											className=" shrink-0"
 										/>
 									</div>
 									<div className="flex mt-5 gap-x-4">