Initial Commit

app/(platform)/(dashboard)/board/[boardId]/_components/board-navbar.tsx

@@ -0,0 +1,19 @@
+import { Board } from "@prisma/client";
+
+import { BoardTitleForm } from "./board-title-form";
+import { BoardOptions } from "./board-options";
+
+interface BoardNavbarProps {
+  data: Board;
+}
+
+export const BoardNavbar = async ({ data }: BoardNavbarProps) => {
+  return (
+    <div className="w-full h-14 z-[40] bg-black/50 fixed top-14 flex items-center px-6 gap-x-4 text-white">
+      <BoardTitleForm data={data} />
+      <div className="ml-auto">
+        <BoardOptions id={data.id} />
+      </div>
+    </div>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/board-options.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { MoreHorizontal, X } from "lucide-react";
+import { toast } from "sonner";
+
+import { deleteBoard } from "@/actions/delete-board";
+import { useAction } from "@/hooks/use-action";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+interface BoardOptionsProps {
+  id: string;
+}
+
+export const BoardOptions = ({ id }: BoardOptionsProps) => {
+  const { execute, isLoading } = useAction(deleteBoard, {
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onDelete = () => {
+    execute({ id });
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button className="h-auto w-auto p-2" variant="transparent">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
+        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+          Board Actions
+        </div>
+        <PopoverClose asChild>
+          <Button
+            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
+            variant="ghost"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </PopoverClose>
+        <Button
+          variant="ghost"
+          onClick={onDelete}
+          disabled={isLoading}
+          className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
+        >
+          Delete this board
+        </Button>
+      </PopoverContent>
+    </Popover>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/board-title-form.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { toast } from "sonner";
+import { ElementRef, useRef, useState } from "react";
+import { Board } from "@prisma/client";
+
+import { Button } from "@/components/ui/button";
+import { FormInput } from "@/components/form/form-input";
+import { updateBoard } from "@/actions/update-board";
+import { useAction } from "@/hooks/use-action";
+
+interface BoardTitleFormProps {
+  data: Board;
+}
+
+export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
+  const { execute } = useAction(updateBoard, {
+    onSuccess: (data) => {
+      toast.success(`Board "${data.title}" updated!`);
+      setTitle(data.title);
+      disableEditing();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const formRef = useRef<ElementRef<"form">>(null);
+  const inputRef = useRef<ElementRef<"input">>(null);
+
+  const [title, setTitle] = useState(data.title);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const enableEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  };
+
+  const disableEditing = () => {
+    setIsEditing(false);
+  };
+
+  const onSubmit = (formData: FormData) => {
+    const title = formData.get("title") as string;
+
+    execute({
+      title,
+      id: data.id,
+    });
+  };
+
+  const onBlur = () => {
+    formRef.current?.requestSubmit();
+  };
+
+  if (isEditing) {
+    return (
+      <form
+        action={onSubmit}
+        ref={formRef}
+        className="flex items-center gap-x-2"
+      >
+        <FormInput
+          ref={inputRef}
+          id="title"
+          onBlur={onBlur}
+          defaultValue={title}
+          className="text-lg font-bold px-[7px] py-1 h-7 bg-transparent focus-visible:outline-none focus-visible:ring-transparent border-none"
+        />
+      </form>
+    );
+  }
+
+  return (
+    <Button
+      onClick={enableEditing}
+      variant="transparent"
+      className="font-bold text-lg h-auto w-auto p-1 px-2"
+    >
+      {title}
+    </Button>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/card-form.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { Plus, X } from "lucide-react";
+import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from "react";
+import { useOnClickOutside, useEventListener } from "usehooks-ts";
+import { useParams } from "next/navigation";
+import { toast } from "sonner";
+
+import { useAction } from "@/hooks/use-action";
+import { createCard } from "@/actions/create-card";
+import { Button } from "@/components/ui/button";
+import { FormTextarea } from "@/components/form/form-textarea";
+import { FormSubmit } from "@/components/form/form-submit";
+
+interface CardFormProps {
+  listId: string;
+  isEditing: boolean;
+  enableEditing: () => void;
+  disableEditing: () => void;
+}
+
+export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
+  ({ listId, isEditing, enableEditing, disableEditing }, ref) => {
+    const params = useParams();
+    const formRef = useRef<ElementRef<"form">>(null);
+
+    const { execute, fieldErrors } = useAction(createCard, {
+      onSuccess: (data) => {
+        toast.success(`Card "${data.title}" created`);
+        formRef.current?.reset();
+      },
+      onError: (error) => {
+        toast.error(error);
+      },
+    });
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        disableEditing();
+      }
+    };
+
+    useOnClickOutside(formRef, disableEditing);
+    useEventListener("keydown", onKeyDown);
+
+    const onTextareaKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (
+      e
+    ) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        formRef.current?.requestSubmit();
+      }
+    };
+
+    const onSubmit = (formData: FormData) => {
+      const title = formData.get("title") as string;
+      const listId = formData.get("listId") as string;
+      const boardId = params.boardId as string;
+
+      execute({ title, listId, boardId });
+    };
+
+    if (isEditing) {
+      return (
+        <form
+          ref={formRef}
+          action={onSubmit}
+          className="m-1 py-0.5 px-1 space-y-4"
+        >
+          <FormTextarea
+            id="title"
+            onKeyDown={onTextareaKeyDown}
+            ref={ref}
+            placeholder="Enter a title for this card..."
+            errors={fieldErrors}
+          />
+          <input hidden id="listId" name="listId" value={listId} />
+          <div className="flex items-center gap-x-1">
+            <FormSubmit>Add card</FormSubmit>
+            <Button onClick={disableEditing} size="sm" variant="ghost">
+              <X className="w-5 h-5" />
+            </Button>
+          </div>
+        </form>
+      );
+    }
+
+    return (
+      <div className="pt-2 px-2">
+        <Button
+          onClick={enableEditing}
+          className="h-auto px-2 py-1.5 w-full justify-start text-muted-foreground text-sm"
+          size="sm"
+          variant="ghost"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Add a card
+        </Button>
+      </div>
+    );
+  }
+);
+
+CardForm.displayName = "CardForm";

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Draggable } from "@hello-pangea/dnd";
+import { Card } from "@prisma/client";
+
+import { useCardModal } from "@/hooks/use-card-modal";
+
+interface CardItemProps {
+  index: number;
+  data: Card;
+}
+
+export const CardItem = ({ index, data }: CardItemProps) => {
+  const cardModal = useCardModal();
+
+  return (
+    <Draggable draggableId={data.id} index={index}>
+      {(provided) => (
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+          role="button"
+          onClick={() => cardModal.onOpen(data.id)}
+          className="truncate border-2 border-transparent hover:border-black py-2 px-3 text-sm bg-white rounded-md shadow-sm"
+        >
+          {data.title}
+        </div>
+      )}
+    </Draggable>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-container.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { DragDropContext, Droppable } from "@hello-pangea/dnd";
+import { toast } from "sonner";
+
+import { useAction } from "@/hooks/use-action";
+import { updateListOrder } from "@/actions/update-list-order";
+import { updateCardOrder } from "@/actions/update-card-order";
+import { ListWithCards } from "@/types";
+
+import { ListForm } from "./list-form";
+import { ListItem } from "./list-item";
+
+interface ListContainerProps {
+  data: ListWithCards[];
+  boardId: string;
+}
+
+function reorder<T>(list: T[], startIndex: number, endIndex: number) {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+}
+
+export const ListContainer = ({ data, boardId }: ListContainerProps) => {
+  const [orderedData, setOrderedData] = useState(data);
+
+  const { execute: executeUpdateListOrder } = useAction(updateListOrder, {
+    onSuccess: () => {
+      toast.success("List reordered");
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const { execute: executeUpdateCardOrder } = useAction(updateCardOrder, {
+    onSuccess: () => {
+      toast.success("Card reordered");
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  useEffect(() => {
+    setOrderedData(data);
+  }, [data]);
+
+  const onDragEnd = (result: any) => {
+    const { destination, source, type } = result;
+
+    if (!destination) return;
+
+    // User drops the item in the same position
+    if (
+      destination.droppableId === source.droppableId &&
+      destination.index === source.index
+    )
+      return;
+
+    // User moves a list
+    if (type === "list") {
+      const items = reorder(orderedData, source.index, destination.index).map(
+        (item, index) => ({ ...item, order: index })
+      );
+      setOrderedData(items);
+      executeUpdateListOrder({ items, boardId });
+    }
+
+    // User moves a card
+    if (type === "card") {
+      let newOrderedData = [...orderedData];
+
+      // Get source and destination list
+      const sourceList = newOrderedData.find(
+        (list) => list.id === source.droppableId
+      );
+      const destinationList = newOrderedData.find(
+        (list) => list.id === destination.droppableId
+      );
+
+      if (!sourceList || !destinationList) return;
+
+      // Check if card exists on the sourceList
+      if (!sourceList.cards) sourceList.cards = [];
+
+      // Check if card exists on the destinationList
+      if (!destinationList.cards) destinationList.cards = [];
+
+      // Moving the card in the same list
+      if (source.droppableId === destination.droppableId) {
+        const reorderedCards = reorder(
+          sourceList.cards,
+          source.index,
+          destination.index
+        );
+
+        reorderedCards.forEach((card, index) => {
+          card.order = index;
+        });
+
+        sourceList.cards = reorderedCards;
+
+        setOrderedData(newOrderedData);
+        executeUpdateCardOrder({
+          boardId,
+          items: reorderedCards,
+        });
+      } else {
+        // Moving the card from one list to another
+
+        // Remove card from source list
+        const [movedCard] = sourceList.cards.splice(source.index, 1);
+
+        // Assign the new listId to the moved card
+        movedCard.listId = destination.droppableId;
+
+        // Add the card to the destination list
+        destinationList.cards.splice(destination.index, 0, movedCard);
+
+        sourceList.cards.forEach((card, index) => {
+          card.order = index;
+        });
+
+        // Update the order for each card in the destination list
+        destinationList.cards.forEach((card, index) => {
+          card.order = index;
+        });
+
+        setOrderedData(newOrderedData);
+        executeUpdateCardOrder({
+          boardId,
+          items: destinationList.cards,
+        });
+      }
+    }
+  };
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="lists" type="list" direction="horizontal">
+        {(provided) => (
+          <ol
+            {...provided.droppableProps}
+            ref={provided.innerRef}
+            className="flex gap-x-3 h-full"
+          >
+            {orderedData.map((list, index) => {
+              return <ListItem key={list.id} index={index} data={list} />;
+            })}
+            {provided.placeholder}
+            <ListForm />
+            <div className="flex-shrink-0 w-1" />
+          </ol>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { Plus, X } from "lucide-react";
+import { useState, useRef, ElementRef } from "react";
+import { useEventListener, useOnClickOutside } from "usehooks-ts";
+import { useParams, useRouter } from "next/navigation";
+import { toast } from "sonner";
+
+import { FormInput } from "@/components/form/form-input";
+import { FormSubmit } from "@/components/form/form-submit";
+import { Button } from "@/components/ui/button";
+import { useAction } from "@/hooks/use-action";
+import { createList } from "@/actions/create-list";
+
+import { ListWrapper } from "./list-wrapper";
+
+export const ListForm = () => {
+  const router = useRouter();
+  const params = useParams();
+
+  const formRef = useRef<ElementRef<"form">>(null);
+  const inputRef = useRef<ElementRef<"input">>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const enableEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      inputRef.current?.focus();
+    });
+  };
+
+  const disableEditing = () => {
+    setIsEditing(false);
+  };
+
+  const { execute, fieldErrors } = useAction(createList, {
+    onSuccess: (data) => {
+      toast.success(`List "${data.title}" created!`);
+      disableEditing();
+      router.refresh();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      disableEditing();
+    }
+  };
+
+  useEventListener("keydown", onKeyDown);
+  useOnClickOutside(formRef, disableEditing);
+
+  const onSubmit = (formData: FormData) => {
+    const title = formData.get("title") as string;
+    const boardId = formData.get("boardId") as string;
+
+    execute({ title, boardId });
+  };
+
+  if (isEditing) {
+    return (
+      <ListWrapper>
+        <form
+          action={onSubmit}
+          ref={formRef}
+          className="w-full p-3 rounded-md bg-white space-y-4 shadow-md"
+        >
+          <FormInput
+            ref={inputRef}
+            errors={fieldErrors}
+            id="title"
+            className="text-sm px-2 py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition"
+            placeholder="Enter list title..."
+          />
+          <input hidden value={params.boardId} name="boardId" />
+          <div className="flex items-center gap-x-1">
+            <FormSubmit>Add list</FormSubmit>
+            <Button onClick={disableEditing} size="sm" variant="ghost">
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+        </form>
+      </ListWrapper>
+    );
+  }
+
+  return (
+    <ListWrapper>
+      <button
+        onClick={enableEditing}
+        className="w-full rounded-md bg-white/80 hover:bg-white/50 transition p-3 flex items-center font-medium text-sm"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add a list
+      </button>
+    </ListWrapper>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useState, useRef, ElementRef } from "react";
+import { useEventListener } from "usehooks-ts";
+import { List } from "@prisma/client";
+import { toast } from "sonner";
+
+import { FormInput } from "@/components/form/form-input";
+import { useAction } from "@/hooks/use-action";
+import { updateList } from "@/actions/update-list";
+
+import { ListOptions } from "./list-options";
+
+interface ListHeaderProps {
+  data: List;
+  onAddCard: () => void;
+}
+
+export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
+  const [title, setTitle] = useState(data.title);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const formRef = useRef<ElementRef<"form">>(null);
+  const inputRef = useRef<ElementRef<"input">>(null);
+
+  const enableEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    });
+  };
+
+  const disableEditing = () => {
+    setIsEditing(false);
+  };
+
+  const { execute } = useAction(updateList, {
+    onSuccess: (data) => {
+      toast.success(`Renamed to "${data.title}"`);
+      setTitle(data.title);
+      disableEditing();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onSubmit = (formData: FormData) => {
+    const title = formData.get("title") as string;
+    const id = formData.get("id") as string;
+    const boardId = formData.get("boardId") as string;
+
+    if (title === data.title) return disableEditing();
+
+    execute({ title, id, boardId });
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      formRef.current?.requestSubmit();
+    }
+  };
+
+  const onBlur = () => {
+    formRef.current?.requestSubmit();
+  };
+
+  useEventListener("keydown", onKeyDown);
+
+  return (
+    <div className="pt-2 px-2 text-sm font-semibold flex justify-between items-start gap-x-2">
+      {isEditing ? (
+        <form ref={formRef} action={onSubmit} className="flex-1 px-[2px]">
+          <input hidden id="id" name="id" value={data.id} />
+          <input hidden id="boardId" name="boardId" value={data.boardId} />
+          <FormInput
+            ref={inputRef}
+            onBlur={onBlur}
+            id="title"
+            placeholder="Enter list title..."
+            defaultValue={title}
+            className="text-sm px-[7px] py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition truncate bg-transparent focus:bg-white"
+          />
+          <button hidden type="submit" />
+        </form>
+      ) : (
+        <div
+          onClick={enableEditing}
+          className="w-full text-sm px-2.5 py-1 h-7 font-medium border-transparent"
+        >
+          {title}
+        </div>
+      )}
+      <ListOptions onAddCard={onAddCard} data={data} />
+    </div>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-item.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ElementRef, useRef, useState } from "react";
+import { Draggable, Droppable } from "@hello-pangea/dnd";
+
+import { ListWithCards } from "@/types";
+import { cn } from "@/lib/utils";
+
+import { ListHeader } from "./list-header";
+import { CardForm } from "./card-form";
+import { CardItem } from "./card-item";
+
+interface ListItemProps {
+  data: ListWithCards;
+  index: number;
+}
+
+export const ListItem = ({ index, data }: ListItemProps) => {
+  const textareaRef = useRef<ElementRef<"textarea">>(null);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const disableEditing = () => {
+    setIsEditing(false);
+  };
+
+  const enableEditing = () => {
+    setIsEditing(true);
+    setTimeout(() => {
+      textareaRef.current?.focus();
+    });
+  };
+
+  return (
+    <Draggable draggableId={data.id} index={index}>
+      {(provided) => (
+        <li
+          {...provided.draggableProps}
+          ref={provided.innerRef}
+          className="shrink-0 h-full w-[272px] select-none"
+        >
+          <div
+            {...provided.dragHandleProps}
+            className="w-full rounded-md bg-[#f1f2f4] shadow-md pb-2"
+          >
+            <ListHeader onAddCard={enableEditing} data={data} />
+            <Droppable droppableId={data.id} type="card">
+              {(provided) => (
+                <ol
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className={cn(
+                    "mx-1 px-1 py-0.5 flex flex-col gap-y-2",
+                    data.cards.length > 0 ? "mt-2" : "mt-0"
+                  )}
+                >
+                  {data.cards.map((card, index) => (
+                    <CardItem index={index} key={card.id} data={card} />
+                  ))}
+                  {provided.placeholder}
+                </ol>
+              )}
+            </Droppable>
+            <CardForm
+              listId={data.id}
+              ref={textareaRef}
+              isEditing={isEditing}
+              enableEditing={enableEditing}
+              disableEditing={disableEditing}
+            />
+          </div>
+        </li>
+      )}
+    </Draggable>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { MoreHorizontal, X } from "lucide-react";
+import { ElementRef, useRef } from "react";
+import { toast } from "sonner";
+import { List } from "@prisma/client";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { FormSubmit } from "@/components/form/form-submit";
+import { Separator } from "@/components/ui/separator";
+import { useAction } from "@/hooks/use-action";
+import { deleteList } from "@/actions/delete-list";
+import { copyList } from "@/actions/copy-list";
+
+interface ListOptionsProps {
+  data: List;
+  onAddCard: () => void;
+}
+
+export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
+  const closeRef = useRef<ElementRef<"button">>(null);
+
+  const { execute: executeDelete } = useAction(deleteList, {
+    onSuccess: () => {
+      toast.success(`List "${data.title}" deleted`);
+      closeRef.current?.click();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const { execute: executeCopy } = useAction(copyList, {
+    onSuccess: () => {
+      toast.success(`List "${data.title}" copied`);
+      closeRef.current?.click();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onDelete = (formData: FormData) => {
+    const id = formData.get("id") as string;
+    const boardId = formData.get("boardId") as string;
+
+    executeDelete({ id, boardId });
+  };
+
+  const onCopy = (formData: FormData) => {
+    const id = formData.get("id") as string;
+    const boardId = formData.get("boardId") as string;
+
+    executeCopy({ id, boardId });
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button className="h-auto w-auto p-2" variant="ghost">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
+        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+          List Actions
+        </div>
+        <PopoverClose ref={closeRef} asChild>
+          <Button
+            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
+            variant="ghost"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </PopoverClose>
+        <Button
+          onClick={onAddCard}
+          className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
+          variant="ghost"
+        >
+          Add card...
+        </Button>
+        <form action={onCopy}>
+          <input hidden name="id" id="id" value={data.id} />
+          <input hidden name="boardId" id="boardId" value={data.boardId} />
+          <FormSubmit
+            className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
+            variant="ghost"
+          >
+            Copy list...
+          </FormSubmit>
+        </form>
+        <Separator />
+        <form action={onDelete}>
+          <input hidden name="id" id="id" value={data.id} />
+          <input hidden name="boardId" id="boardId" value={data.boardId} />
+          <FormSubmit
+            className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
+            variant="ghost"
+          >
+            Delete this list
+          </FormSubmit>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};

app/(platform)/(dashboard)/board/[boardId]/_components/list-wrapper.tsx

@@ -0,0 +1,7 @@
+interface ListWrapperProps {
+  children: React.ReactNode;
+}
+
+export const ListWrapper = ({ children }: ListWrapperProps) => {
+  return <li className="shrink-0 h-full w-[272px] select-none">{children}</li>;
+};

app/(platform)/(dashboard)/board/[boardId]/layout.tsx

@@ -0,0 +1,60 @@
+import { auth } from "@clerk/nextjs";
+import { notFound, redirect } from "next/navigation";
+
+import { db } from "@/lib/db";
+import { BoardNavbar } from "./_components/board-navbar";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { boardId: string };
+}) {
+  const { orgId } = auth();
+
+  if (!orgId) return { title: "Board" };
+
+  const board = await db.board.findUnique({
+    where: {
+      id: params.boardId,
+      orgId,
+    },
+  });
+
+  return {
+    title: board?.title ?? "Board",
+  };
+}
+
+const BoardIdLayout = async ({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { boardId: string };
+}) => {
+  const { orgId } = auth();
+
+  if (!orgId) redirect("/select-org");
+
+  const board = await db.board.findUnique({
+    where: {
+      id: params.boardId,
+      orgId,
+    },
+  });
+
+  if (!board) notFound();
+
+  return (
+    <div
+      className="relative h-full bg-no-repeat bg-cover bg-center"
+      style={{ backgroundImage: `url(${board.imageFullUrl})` }}
+    >
+      <BoardNavbar data={board} />
+      <div className="absolute inset-0 bg-black/10" />
+      <main className="relative pt-28 h-full">{children}</main>
+    </div>
+  );
+};
+
+export default BoardIdLayout;

app/(platform)/(dashboard)/board/[boardId]/page.tsx

@@ -0,0 +1,46 @@
+import { auth } from "@clerk/nextjs";
+import { redirect } from "next/navigation";
+
+import { db } from "@/lib/db";
+import { ListContainer } from "./_components/list-container";
+
+interface BoardIdPageProps {
+  params: {
+    boardId: string;
+  };
+}
+
+const BoardIdPage = async ({ params }: BoardIdPageProps) => {
+  const { orgId } = auth();
+
+  if (!orgId) {
+    redirect("/select-org");
+  }
+
+  const lists = await db.list.findMany({
+    where: {
+      boardId: params.boardId,
+      board: {
+        orgId,
+      },
+    },
+    include: {
+      cards: {
+        orderBy: {
+          order: "asc",
+        },
+      },
+    },
+    orderBy: {
+      order: "asc",
+    },
+  });
+
+  return (
+    <div className="p-4 h-full overflow-x-auto">
+      <ListContainer boardId={params.boardId} data={lists} />
+    </div>
+  )
+};
+
+export default BoardIdPage;