Use url state for task panel and showing deleted

Author: arjunkomath

app/(dashboard)/[tenant]/projects/[projectId]/tasklists/[tasklistId]/page.tsx

@@ -15,9 +15,14 @@ import { toStartOfDay } from "@/lib/utils/date";
 import { useTRPC } from "@/trpc/client";
 import { useQueries } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
+import { parseAsBoolean, useQueryState } from "nuqs";
 
 export default function TaskLists() {
 	const { projectId, tasklistId } = useParams();
+	const [showDeleted, setShowDeleted] = useQueryState(
+		"showDeleted",
+		parseAsBoolean.withDefault(false),
+	);
 
 	const trpc = useTRPC();
 	const [{ data: list }, { data: timezone }, { data: project }] = useQueries({
@@ -127,6 +132,8 @@ export default function TaskLists() {
 						id={list.id}
 						hideHeader
 						canEdit={project.canEdit}
+						showDeleted={showDeleted}
+						onShowDeletedChange={setShowDeleted}
 					/>
 				</TasksProvider>
 

components/core/panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as Dialog from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { memo } from "react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
@@ -10,11 +11,13 @@ export const Panel = memo(function Panel({
 	setOpen,
 	children,
 	className,
+	title = "Panel",
 }: {
 	open: boolean;
 	setOpen?: (open: boolean) => void;
 	children: React.ReactNode;
 	className?: string;
+	title?: string;
 }) {
 	const isMobile = useIsMobile();
 
@@ -31,6 +34,9 @@ export const Panel = memo(function Panel({
 						className,
 					)}
 				>
+					<VisuallyHidden>
+						<Dialog.Title>{title}</Dialog.Title>
+					</VisuallyHidden>
 					{children}
 				</Dialog.Content>
 			</Dialog.Portal>

components/project/tasklist/task/task-item.tsx

@@ -6,7 +6,8 @@ import { Close, Title } from "@radix-ui/react-dialog";
 import { useQueries } from "@tanstack/react-query";
 import { AlignJustifyIcon, CalendarClock, FileIcon, X } from "lucide-react";
 import { useParams } from "next/navigation";
-import { useMemo, useState } from "react";
+import { parseAsInteger, useQueryState } from "nuqs";
+import { useMemo } from "react";
 import { toast } from "sonner";
 import { Panel } from "@/components/core/panel";
 import { ConfirmButton } from "@/components/form/button";
@@ -44,7 +45,11 @@ export const TaskItem = ({
 	canEdit?: boolean;
 }) => {
 	const { projectId } = useParams();
-	const [detailsOpen, setDetailsOpen] = useState(false);
+	const [selectedTaskId, setSelectedTaskId] = useQueryState(
+		"task",
+		parseAsInteger,
+	);
+	const detailsOpen = selectedTaskId === task.id;
 	const { attributes, listeners, setNodeRef, transform, transition } =
 		useSortable({ id: task.id });
 
@@ -113,7 +118,7 @@ export const TaskItem = ({
 						creating ? "text-muted-foreground" : "",
 					)}
 					onClick={() => {
-						if (!creating) setDetailsOpen(true);
+						if (!creating) setSelectedTaskId(task.id);
 					}}
 				>
 					<div
@@ -155,7 +160,12 @@ export const TaskItem = ({
 				) : null}
 			</div>
 
-			<Panel open={detailsOpen} setOpen={setDetailsOpen}>
+			<Panel
+				open={detailsOpen}
+				setOpen={(open) => {
+					if (!open) setSelectedTaskId(null);
+				}}
+			>
 				<Title>
 					<div className="flex items-center px-4 h-14 border-b">
 						<div className="flex items-center flex-1">
@@ -372,7 +382,7 @@ export const TaskItem = ({
 																				"Error while copying, please try again.",
 																		},
 																	);
-																	setDetailsOpen(false);
+																	setSelectedTaskId(null);
 																}}
 															>
 																<button

components/project/tasklist/tasklist.tsx

@@ -31,11 +31,15 @@ export const TaskListItem = ({
 	hideHeader = false,
 	compact = false,
 	canEdit = true,
+	showDeleted,
+	onShowDeletedChange,
 }: {
 	id: number;
 	hideHeader?: boolean;
 	compact?: boolean;
 	canEdit?: boolean;
+	showDeleted?: boolean;
+	onShowDeletedChange?: (showDeleted: boolean) => void;
 }) => {
 	const trpc = useTRPC();
 	const { data: taskList, isLoading } = useQuery(
@@ -63,7 +67,6 @@ export const TaskListItem = ({
 		[taskList?.tasks],
 	);
 
-	const [showDeleted, setShowDeleted] = useState(false);
 	const deletedItems = useMemo(
 		() =>
 			taskList?.tasks.filter((task) => task.status === TaskStatus.DELETED) ??
@@ -204,7 +207,7 @@ export const TaskListItem = ({
 									<Button
 										variant="ghost"
 										size="sm"
-										onClick={() => setShowDeleted((x) => !x)}
+										onClick={() => onShowDeletedChange?.(!showDeleted)}
 									>
 										{showDeleted ? "Hide" : "Show"}
 									</Button>

lib/utils/mentionNotifications.ts

@@ -8,7 +8,8 @@ interface MentionContext {
 	type: "project" | "task" | "tasklist" | "event" | "comment" | "post";
 	entityName: string;
 	entityId: number;
-	projectId?: number; // For linking back to project
+	projectId?: number;
+	taskListId?: number;
 	orgSlug: string;
 	fromUserId: string;
 }
@@ -47,7 +48,7 @@ export async function sendMentionNotifications(
 
 		case "task":
 			message = `${fromUserName} mentioned you in task "${context.entityName}"`;
-			target = `/${context.orgSlug}/projects/${context.projectId}`;
+			target = `/${context.orgSlug}/projects/${context.projectId}/tasklists/${context.taskListId}?task=${context.entityId}`;
 			break;
 
 		case "tasklist":

trpc/routers/tasks.ts

@@ -331,6 +331,7 @@ export const tasksRouter = createTRPCRouter({
 					entityName: input.name || "Untitled Task",
 					entityId: createdTask[0].id,
 					projectId: taskListDetails.projectId,
+					taskListId: input.taskListId,
 					orgSlug: ctx.orgSlug,
 					fromUserId: ctx.userId,
 				});
@@ -447,6 +448,7 @@ export const tasksRouter = createTRPCRouter({
 						entityName: oldTask.name,
 						entityId: input.id,
 						projectId: oldTask.taskList.projectId,
+						taskListId: oldTask.taskListId,
 						orgSlug: ctx.orgSlug,
 						fromUserId: ctx.userId,
 					});