feat: public boards

apps/web/src/components/CheckboxDropdown.tsx

@@ -21,7 +21,9 @@ interface CheckboxDropdownProps {
   items?: Item[];
   groups?: Group[];
   menuSpacing?: "sm" | "md" | "lg";
+  position?: "left" | "right";
   handleSelect: (groupKey: string | null, item: { key: string }) => void;
+  asChild?: boolean;
 }
 
 export default function CheckboxDropdown({
@@ -29,7 +31,9 @@ export default function CheckboxDropdown({
   items,
   groups,
   menuSpacing = "sm",
+  position = "left",
   handleSelect,
+  asChild = true,
 }: CheckboxDropdownProps) {
   const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
 
@@ -45,7 +49,10 @@ export default function CheckboxDropdown({
       className="relative flex w-full flex-wrap items-center text-left"
     >
       <>
-        <Menu.Button className="focus-visible:outline-none">
+        <Menu.Button
+          as={asChild ? "div" : undefined}
+          className="focus-visible:outline-none"
+        >
           {children}
         </Menu.Button>
 
@@ -61,7 +68,8 @@ export default function CheckboxDropdown({
         >
           <Menu.Items
             className={twMerge(
-              "absolute left-0 z-50 mt-2 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200",
+              "absolute z-50 mt-2 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200",
+              position === "left" ? "left-0" : "right-0",
               menuSpacingClass[menuSpacing],
             )}
           >

apps/web/src/components/NewWorkspaceForm.tsx

@@ -21,8 +21,14 @@ export function NewWorkspaceForm() {
 
   const createWorkspace = api.workspace.create.useMutation({
     onSuccess: (values) => {
-      if (values?.publicId && values.name) {
+      if (values.publicId && values.name) {
-        switchWorkspace({ publicId: values.publicId, name: values.name });
+        switchWorkspace({
+          publicId: values.publicId,
+          name: values.name,
+          // description: values.description,
+          // slug: values.slug,
+          // plan: values.plan,
+        });
         closeModal();
       }
     },
@@ -30,13 +36,14 @@ export function NewWorkspaceForm() {
       showPopup({
         header: "Unable to create workspace",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });
 
   useEffect(() => {
     const nameElement: HTMLElement | null =
-      document?.querySelector<HTMLElement>("#workspace-name");
+      document.querySelector<HTMLElement>("#workspace-name");
     if (nameElement) nameElement.focus();
   }, []);
 

apps/web/src/components/Popup.tsx

@@ -1,11 +1,16 @@
 import { Transition } from "@headlessui/react";
 import { useEffect } from "react";
-import { HiOutlineExclamationCircle, HiXMark } from "react-icons/hi2";
+import {
+  HiOutlineCheckCircle,
+  HiOutlineExclamationCircle,
+  HiXMark,
+} from "react-icons/hi2";
 
 import { usePopup } from "~/providers/popup";
 
 const Popup: React.FC = () => {
-  const { isOpen, popupHeader, popupMessage, hidePopup } = usePopup();
+  const { isOpen, popupHeader, popupMessage, popupIcon, hidePopup } =
+    usePopup();
 
   useEffect(() => {
     if (isOpen) {
@@ -20,7 +25,7 @@ const Popup: React.FC = () => {
   return (
     <div
       aria-live="assertive"
-      className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
+      className="pointer-events-none fixed inset-0 z-10 flex items-end p-3 sm:items-end"
     >
       <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
         <Transition
@@ -36,10 +41,18 @@ const Popup: React.FC = () => {
             <div className="p-4">
               <div className="flex items-start">
                 <div className="flex-shrink-0">
-                  <HiOutlineExclamationCircle
+                  {popupIcon === "success" && (
-                    aria-hidden="true"
+                    <HiOutlineCheckCircle
-                    className="h-6 w-6 text-red-400"
+                      aria-hidden="true"
-                  />
+                      className="h-6 w-6 text-green-400"
+                    />
+                  )}
+                  {popupIcon === "error" && (
+                    <HiOutlineExclamationCircle
+                      aria-hidden="true"
+                      className="h-6 w-6 text-red-400"
+                    />
+                  )}
                 </div>
                 <div className="ml-3 w-0 flex-1 pt-0.5">
                   <p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">

apps/web/src/components/ThemeToggle.tsx

@@ -0,0 +1,27 @@
+import { CgDarkMode } from "react-icons/cg";
+
+import { useTheme } from "~/providers/theme";
+
+const ThemeToggle = () => {
+  const { themePreference, switchTheme } = useTheme();
+
+  const toggleTheme = () => {
+    switchTheme(themePreference === "light" ? "dark" : "light");
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+      aria-label={`Switch to ${themePreference === "light" ? "dark" : "light"} theme`}
+    >
+      <CgDarkMode
+        className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
+          themePreference === "dark" ? "rotate-180" : "rotate-0"
+        }`}
+      />
+    </button>
+  );
+};
+
+export default ThemeToggle;

apps/web/src/pages/[...workspaceSlug]/index.tsx

@@ -1,5 +0,0 @@
-import WorkspaceSlugView from "~/views/workspaceSlug";
-
-export default function WorkspaceSlugPage() {
-  return <WorkspaceSlugView />;
-}

apps/web/src/pages/[workspaceSlug]/[...boardSlug].tsx

@@ -0,0 +1,5 @@
+import PublicBoardView from "~/views/public/board";
+
+export default function PublicBoardsPage() {
+  return <PublicBoardView />;
+}

apps/web/src/pages/[workspaceSlug]/index.tsx

@@ -0,0 +1,5 @@
+import PublicBoardsView from "~/views/public/boards";
+
+export default function PublicBoardsPage() {
+  return <PublicBoardsView />;
+}

apps/web/src/providers/board.tsx

@@ -1,12 +1,12 @@
 import type { ReactNode } from "react";
 import React, { createContext, useContext, useState } from "react";
 
-import {
+import type {
-  type GetBoardByIdOutput,
+  GetBoardByIdOutput,
-  type NewCardInput,
+  NewCardInput,
-  type NewListInput,
+  NewListInput,
-  type ReorderCardInput,
+  ReorderCardInput,
-  type ReorderListInput,
+  ReorderListInput,
 } from "@kan/api/types";
 import { generateUID } from "@kan/utils";
 
@@ -55,6 +55,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
       showPopup({
         header: "Error fetching board",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     }
   };
@@ -68,6 +69,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
       showPopup({
         header: "Unable to update card",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });
@@ -81,6 +83,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
       showPopup({
         header: "Unable to update list",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/providers/popup.tsx

@@ -1,12 +1,17 @@
 import { createContext, useContext, useState } from "react";
 
-type PopupContextType = {
+interface PopupContextType {
   isOpen: boolean;
-  showPopup: (params: { header: string; message: string }) => void;
+  showPopup: (params: {
+    header: string;
+    message: string;
+    icon: string;
+  }) => void;
   hidePopup: () => void;
   popupHeader: string;
   popupMessage: string;
-};
+  popupIcon: string;
+}
 
 interface Props {
   children: React.ReactNode;
@@ -18,17 +23,21 @@ export const PopupProvider: React.FC<Props> = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [popupHeader, setPopupHeader] = useState("");
   const [popupMessage, setPopupMessage] = useState("");
+  const [popupIcon, setPopupIcon] = useState("");
 
   const showPopup = ({
     header,
     message,
+    icon,
   }: {
     header: string;
     message: string;
+    icon: string;
   }) => {
     setIsOpen(true);
     setPopupHeader(header);
     setPopupMessage(message);
+    setPopupIcon(icon);
   };
 
   const hidePopup = () => {
@@ -37,7 +46,14 @@ export const PopupProvider: React.FC<Props> = ({ children }) => {
 
   return (
     <PopupContext.Provider
-      value={{ isOpen, showPopup, hidePopup, popupHeader, popupMessage }}
+      value={{
+        isOpen,
+        showPopup,
+        hidePopup,
+        popupHeader,
+        popupMessage,
+        popupIcon,
+      }}
     >
       {children}
     </PopupContext.Provider>

apps/web/src/views/board/components/DeleteListConfirmation.tsx

@@ -1,9 +1,8 @@
-import { api } from "~/utils/api";
+import Button from "~/components/Button";
 import { useBoard } from "~/providers/board";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
-
+import { api } from "~/utils/api";
-import Button from "~/components/Button";
 
 interface DeleteListConfirmationProps {
   listPublicId: string;
@@ -38,6 +37,7 @@ export function DeleteListConfirmation({
       showPopup({
         header: "Unable to delete list",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/board/components/Filters.tsx

@@ -1,14 +1,16 @@
-import { IoFilterOutline } from "react-icons/io5";
-import {
-  HiOutlineUserCircle,
-  HiOutlineTag,
-  HiMiniXMark,
-} from "react-icons/hi2";
 import { useRouter } from "next/router";
+import {
+  HiMiniXMark,
+  HiOutlineTag,
+  HiOutlineUserCircle,
+} from "react-icons/hi2";
+import { IoFilterOutline } from "react-icons/io5";
+
+import type { GetBoardByIdOutput } from "@kan/api/types";
+
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { formatToArray } from "~/utils/helpers";
-import { useBoard } from "~/providers/board";
 
 const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
   <svg
@@ -25,15 +27,20 @@ const Avatar = ({ name }: { name: string }) => (
   <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500">
     <span className="text-[8px] font-medium leading-none text-white">
       {name
-        ?.split(" ")
+        .split(" ")
         .map((namePart) => namePart.charAt(0).toUpperCase())
         .join("")}
     </span>
   </span>
 );
 
-const Filters = () => {
+const Filters = ({
-  const { boardData } = useBoard();
+  position = "right",
+  boardData,
+}: {
+  position?: "left" | "right";
+  boardData: GetBoardByIdOutput;
+}) => {
   const router = useRouter();
 
   const clearFilters = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -51,7 +58,7 @@ const Filters = () => {
   };
 
   const formattedMembers =
-    boardData?.workspace?.members?.map((member) => ({
+    boardData?.workspace?.members.map((member) => ({
       key: member.publicId,
       value: member.user?.name ?? "",
       selected: !!router.query.members?.includes(member.publicId),
@@ -116,21 +123,24 @@ const Filters = () => {
         groups={groups}
         handleSelect={handleSelect}
         menuSpacing="md"
+        position={position}
       >
         <Button variant="secondary" iconLeft={<IoFilterOutline />}>
           Filter
-          {numOfFilters > 0 && (
-            <button
-              onClick={clearFilters}
-              className="group absolute -right-[18px] -top-[15px] flex h-5 w-5 items-center justify-center rounded-full border-2 border-light-100 bg-light-1000 text-[8px] font-[700] text-light-600 dark:border-dark-50 dark:bg-dark-1000 dark:text-dark-600 dark:text-dark-600"
-            >
-              <span className="group-hover:hidden">{numOfFilters}</span>
-              <span className="hidden text-light-50 group-hover:inline dark:text-dark-50">
-                <HiMiniXMark size={12} />
-              </span>
-            </button>
-          )}
         </Button>
+        {numOfFilters > 0 && (
+          <button
+            type="button"
+            onClick={clearFilters}
+            aria-label="Clear filters"
+            className="group absolute -right-[8px] -top-[8px] flex h-5 w-5 items-center justify-center rounded-full border-2 border-light-100 bg-light-1000 text-[8px] font-[700] text-light-600 dark:border-dark-50 dark:bg-dark-1000 dark:text-dark-600"
+          >
+            <span className="group-hover:hidden">{numOfFilters}</span>
+            <span className="hidden text-light-50 group-hover:inline dark:text-dark-50">
+              <HiMiniXMark size={12} />
+            </span>
+          </button>
+        )}
       </CheckboxDropdown>
     </div>
   );

apps/web/src/views/board/components/NewCardForm.tsx

@@ -6,7 +6,7 @@ import {
   HiXMark,
 } from "react-icons/hi2";
 
-import { type NewCardInput } from "@kan/api/types";
+import type { NewCardInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -58,13 +58,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
       showPopup({
         header: "Unable to create card",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });
 
   useEffect(() => {
     const titleElement: HTMLElement | null =
-      document?.querySelector<HTMLElement>("#title");
+      document.querySelector<HTMLElement>("#title");
     if (titleElement) titleElement.focus();
   }, []);
 
@@ -83,7 +84,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
     })) ?? [];
 
   const formattedMembers =
-    boardData?.workspace?.members?.map((member) => ({
+    boardData?.workspace?.members.map((member) => ({
       key: member.publicId,
       value: member.user?.name ?? "",
       selected: memberPublicIds.includes(member.publicId),
@@ -207,7 +208,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
                         >
                           <span className="text-[8px] font-medium leading-none text-white">
                             {member?.value
-                              ?.split(" ")
+                              .split(" ")
                               .map((namePart) =>
                                 namePart.charAt(0).toUpperCase(),
                               )

apps/web/src/views/board/components/NewListForm.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
 
-import { type NewListInput } from "@kan/api/types";
+import type { NewListInput } from "@kan/api/types";
 
 import Button from "~/components/Button";
 import Input from "~/components/Input";
@@ -42,13 +42,14 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
       showPopup({
         header: "Unable to create list",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });
 
   useEffect(() => {
     const nameElement: HTMLElement | null =
-      document?.querySelector<HTMLElement>("#list-name");
+      document.querySelector<HTMLElement>("#list-name");
     if (nameElement) nameElement.focus();
   }, []);
 

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -60,6 +60,7 @@ export function UpdateBoardSlugForm({
       showPopup({
         header: "Unable to update board URL",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/board/index.tsx

@@ -161,7 +161,7 @@ export default function BoardPage() {
           )}
 
           <div className="flex items-center space-x-2">
-            <Filters />
+            <Filters boardData={boardData} position="left" />
             <button
               type="button"
               className="mr-2 inline-flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"

apps/web/src/views/card/components/Comment.tsx

@@ -1,15 +1,14 @@
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import ContentEditable from "react-contenteditable";
 import { formatDistanceToNow } from "date-fns";
-
+import { useState } from "react";
-import { api } from "~/utils/api";
+import ContentEditable from "react-contenteditable";
-import { usePopup } from "~/providers/popup";
+import { useForm } from "react-hook-form";
+import { HiEllipsisHorizontal, HiPencil } from "react-icons/hi2";
 
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import Dropdown from "~/components/Dropdown";
-import { HiEllipsisHorizontal, HiPencil } from "react-icons/hi2";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
 
 interface FormValues {
   comment: string;
@@ -54,6 +53,7 @@ const Comment = ({
       showPopup({
         header: "Unable to update comment",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/card/components/DeleteCardConfirmation.tsx

@@ -1,8 +1,9 @@
 import { useRouter } from "next/navigation";
-import { api } from "~/utils/api";
+
-import { useModal } from "~/providers/modal";
 import { useBoard } from "~/providers/board";
+import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
 
 interface DeleteCardConfirmationProps {
   cardPublicId: string;
@@ -24,6 +25,7 @@ export function DeleteCardConfirmation({
       showPopup({
         header: "Error deleting card",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       }),
   });
 

apps/web/src/views/card/components/DeleteLabelConfirmation.tsx

@@ -1,8 +1,7 @@
-import { api } from "~/utils/api";
+import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
-
+import { api } from "~/utils/api";
-import Button from "~/components/Button";
 
 export function DeleteLabelConfirmation({
   cardPublicId,
@@ -23,6 +22,7 @@ export function DeleteLabelConfirmation({
       showPopup({
         header: "Error deleting label",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       }),
   });
 

apps/web/src/views/card/components/NewCommentForm.tsx

@@ -1,11 +1,10 @@
-import { useForm } from "react-hook-form";
 import ContentEditable from "react-contenteditable";
+import { useForm } from "react-hook-form";
 import { HiOutlineArrowUp } from "react-icons/hi2";
 
 import LoadingSpinner from "~/components/LoadingSpinner";
-
-import { api } from "~/utils/api";
 import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
 
 interface FormValues {
   comment: string;
@@ -29,6 +28,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
       showPopup({
         header: "Unable to add comment",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/card/index.tsx

@@ -1,27 +1,25 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { useForm } from "react-hook-form";
 import ContentEditable from "react-contenteditable";
+import { useForm } from "react-hook-form";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
 import ActivityList from "./components/ActivityList";
-import Dropdown from "./components/Dropdown";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 import { DeleteLabelConfirmation } from "./components/DeleteLabelConfirmation";
+import Dropdown from "./components/Dropdown";
+import { LabelForm } from "./components/LabelForm";
 import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
-import { LabelForm } from "./components/LabelForm";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import NewCommentForm from "./components/NewCommentForm";
 
-import { PageHead } from "~/components/PageHead";
-import Modal from "~/components/modal";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-
-import { api } from "~/utils/api";
-
 interface FormValues {
   cardId: string;
   title: string;
@@ -34,9 +32,9 @@ export default function CardPage() {
   const { modalContentType, entityId } = useModal();
   const { showPopup } = usePopup();
 
-  const cardId = Array.isArray(params?.cardId)
+  const cardId = Array.isArray(params.cardId)
     ? params.cardId[0]
-    : params?.cardId;
+    : params.cardId;
 
   const { data, isLoading } = api.card.byId.useQuery({
     cardPublicId: cardId ?? "",
@@ -90,6 +88,7 @@ export default function CardPage() {
       showPopup({
         header: "Unable to update card",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/public/board/index.tsx

@@ -0,0 +1,177 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { HiLink } from "react-icons/hi2";
+
+import { PageHead } from "~/components/PageHead";
+import PatternedBackground from "~/components/PatternedBackground";
+import Popup from "~/components/Popup";
+import ThemeToggle from "~/components/ThemeToggle";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+import { formatToArray } from "~/utils/helpers";
+import Filters from "~/views/board/components/Filters";
+
+export default function PublicBoardView() {
+  const router = useRouter();
+  const { showPopup } = usePopup();
+
+  const boardSlug = Array.isArray(router.query.boardSlug)
+    ? router.query.boardSlug[0]
+    : router.query.boardSlug;
+
+  const { data, isLoading } = api.board.bySlug.useQuery(
+    {
+      boardSlug: boardSlug ?? "",
+      members: formatToArray(router.query.members),
+      labels: formatToArray(router.query.labels),
+    },
+    { enabled: !!boardSlug },
+  );
+
+  const CopyBoardLink = () => {
+    return (
+      <button
+        onClick={async () => {
+          try {
+            await navigator.clipboard.writeText(window.location.href);
+          } catch (error) {
+            console.error(error);
+          }
+
+          showPopup({
+            header: "Link copied",
+            icon: "success",
+            message: "Board URL copied to clipboard",
+          });
+        }}
+        className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
+        aria-label={`Copy board URL`}
+      >
+        <HiLink className={`h-4 w-4 text-light-900 dark:text-dark-900`} />
+      </button>
+    );
+  };
+
+  return (
+    <>
+      <PageHead
+        title={`${data?.name ?? "Board"} | ${data?.workspace?.name ?? "Workspace"}`}
+      />
+      <style jsx global>{`
+        html {
+          height: 100vh;
+          overflow: hidden;
+        }
+      `}</style>
+
+      <div className="relative flex h-screen flex-col bg-light-100 px-4 pt-4 dark:bg-dark-50">
+        <div className="relative overflow-hidden rounded-md border pb-8 dark:border-dark-200">
+          <PatternedBackground />
+          <div className="z-10 flex w-full justify-between p-8">
+            {isLoading ? (
+              <div className="flex space-x-2">
+                <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
+              </div>
+            ) : (
+              <h1 className="font-bold leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]">
+                {data?.name}
+              </h1>
+            )}
+            <div className="flex items-center space-x-2">
+              <Filters boardData={data ?? null} />
+            </div>
+          </div>
+
+          <div className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
+            {isLoading ? (
+              <div className="ml-[2rem] flex">
+                <div className="0 mr-5 h-[500px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
+                <div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
+                <div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
+              </div>
+            ) : (
+              <div className="flex">
+                <div className="min-w-[2rem]" />
+                {data?.lists.map((list) => (
+                  <div
+                    key={list.publicId}
+                    className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
+                  >
+                    <div className="flex justify-between">
+                      <span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000">
+                        {list.name}
+                      </span>
+                    </div>
+                    <div className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600">
+                      {list.cards.map((card) => (
+                        <Link
+                          key={card.publicId}
+                          href={`/cards/${card.publicId}`}
+                          className={`mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300`}
+                        >
+                          <div>{card.title}</div>
+                          {card.labels.length || card.members.length ? (
+                            <div className="mt-2 flex justify-end space-x-1">
+                              {card.labels.map((label) => (
+                                <span
+                                  key={label.publicId}
+                                  className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
+                                >
+                                  <svg
+                                    fill={label.colourCode ?? undefined}
+                                    className="h-2 w-2"
+                                    viewBox="0 0 6 6"
+                                    aria-hidden="true"
+                                  >
+                                    <circle cx={3} cy={3} r={3} />
+                                  </svg>
+                                  <div>{label.name}</div>
+                                </span>
+                              ))}
+                              <div className="isolate flex -space-x-1 overflow-hidden">
+                                {card.members.map((member) => (
+                                  <span
+                                    key={member.publicId}
+                                    className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-light-900 ring-2 ring-light-50 dark:bg-gray-500 dark:ring-dark-500"
+                                  >
+                                    <span className="text-[10px] font-medium leading-none text-white">
+                                      {member.user?.name
+                                        ?.split(" ")
+                                        .map((namePart) =>
+                                          namePart.charAt(0).toUpperCase(),
+                                        )
+                                        .join("")}
+                                    </span>
+                                  </span>
+                                ))}
+                              </div>
+                            </div>
+                          ) : null}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+                <div className="min-w-[0.75rem]" />
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex h-[54px] items-center justify-center">
+          <div className="absolute left-[1rem]">
+            <ThemeToggle />
+            <CopyBoardLink />
+          </div>
+
+          <Link
+            className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"
+            href="/"
+          >
+            kan.bn
+          </Link>
+        </div>
+      </div>
+      <Popup />
+    </>
+  );
+}

apps/web/src/views/public/boards/index.tsx

@@ -5,7 +5,7 @@ import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
 import { api } from "~/utils/api";
 
-export default function WorkspaceSlugPage() {
+export default function PublicBoardsView() {
   const router = useRouter();
 
   const workspaceSlug = Array.isArray(router.query.workspaceSlug)

apps/web/src/views/settings/components/DeleteWorkspaceConfirmation.tsx

@@ -1,12 +1,11 @@
-import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-import { api } from "~/utils/api";
+import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
-
+import { api } from "~/utils/api";
-import Button from "~/components/Button";
 
 export function DeleteWorkspaceConfirmation() {
   const { closeModal } = useModal();
@@ -20,7 +19,7 @@ export function DeleteWorkspaceConfirmation() {
     onSuccess: () => {
       closeModal();
       const filteredWorkspaces = availableWorkspaces.filter(
-        (ws) => ws.publicId !== workspace?.publicId,
+        (ws) => ws.publicId !== workspace.publicId,
       );
       if (filteredWorkspaces.length > 0 && filteredWorkspaces[0]) {
         switchWorkspace(filteredWorkspaces[0]);
@@ -33,13 +32,14 @@ export function DeleteWorkspaceConfirmation() {
       showPopup({
         header: "Error deleting workspace",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });
 
   const handleDeleteWorkspace = () => {
     deleteWorkspaceMutation.mutate({
-      workspacePublicId: workspace?.publicId,
+      workspacePublicId: workspace.publicId,
     });
   };
 
@@ -47,7 +47,7 @@ export function DeleteWorkspaceConfirmation() {
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {`Are you sure you want to delete the workspace ${workspace?.name}?`}
+          {`Are you sure you want to delete the workspace ${workspace.name}?`}
         </h2>
         <p className="mb-4 text-sm text-light-900 dark:text-dark-900">
           Keep in mind that this action is irreversible.

apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx

@@ -53,6 +53,7 @@ const UpdateWorkspaceDescriptionForm = ({
       showPopup({
         header: "Error updating workspace description",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx

@@ -1,8 +1,9 @@
-import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
-import Input from "~/components/Input";
+
 import Button from "~/components/Button";
+import Input from "~/components/Input";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 
@@ -48,6 +49,7 @@ const UpdateWorkspaceNameForm = ({
       showPopup({
         header: "Error updating workspace name",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -64,6 +64,7 @@ const UpdateWorkspaceUrlForm = ({
       showPopup({
         header: "Error updating workspace username",
         message: "Please try again later, or contact customer support.",
+        icon: "error",
       });
     },
   });

packages/api/src/routers/board.ts

@@ -7,7 +7,7 @@ import * as activityRepo from "@kan/db/repository/cardActivity.repo";
 import * as listRepo from "@kan/db/repository/list.repo";
 import * as workspaceRepo from "@kan/db/repository/workspace.repo";
 
-import { createTRPCRouter, protectedProcedure } from "../trpc";
+import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
 
 export const boardRouter = createTRPCRouter({
   all: protectedProcedure
@@ -70,6 +70,37 @@ export const boardRouter = createTRPCRouter({
         },
       );
 
+      return result;
+    }),
+  bySlug: publicProcedure
+    .meta({
+      openapi: {
+        method: "GET",
+        path: "/board/{boardSlug}",
+        summary: "Get board by slug",
+        description: "Retrieves a board by its slug",
+        tags: ["Boards"],
+        protect: true,
+      },
+    })
+    .input(
+      z.object({
+        boardSlug: z
+          .string()
+          .min(3)
+          .max(24)
+          .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/),
+        members: z.array(z.string().min(12)).optional(),
+        labels: z.array(z.string().min(12)).optional(),
+      }),
+    )
+    .output(z.custom<Awaited<ReturnType<typeof boardRepo.getBySlug>>>())
+    .query(async ({ ctx, input }) => {
+      const result = await boardRepo.getBySlug(ctx.db, input.boardSlug, {
+        members: input.members ?? [],
+        labels: input.labels ?? [],
+      });
+
       return result;
     }),
   create: protectedProcedure

packages/api/src/routers/workspace.ts

@@ -71,7 +71,7 @@ export const workspaceRouter = createTRPCRouter({
       openapi: {
         summary: "Get a workspace by slug",
         method: "GET",
-        path: "/workspaces/slug/{workspaceSlug}",
+        path: "/workspaces/{workspaceSlug}",
         description: "Retrieves a workspace by its slug",
         tags: ["Workspaces"],
         protect: true,

packages/db/src/repository/board.repo.ts

@@ -95,6 +95,88 @@ export const getByPublicId = async (
   return data;
 };
 
+export const getBySlug = async (
+  db: SupabaseClient<Database>,
+  boardSlug: string,
+  filters: {
+    members: string[];
+    labels: string[];
+  },
+) => {
+  let query = db
+    .from("board")
+    .select(
+      `
+        publicId,
+        name,
+        slug,
+        workspace (
+          publicId,
+          name,
+          slug,
+          description,
+          members:workspace_members (
+            publicId,
+            user!workspace_members_userId_user_id_fk (
+              name
+            )
+          )
+        ),
+        labels:label (
+          publicId,
+          name,
+          colourCode
+        ),
+        lists:list (
+          publicId,
+          name,
+          boardId,
+          index,
+          cards:card (
+            publicId,
+            title,
+            description,
+            listId,
+            index,
+            labels:label${filters.labels.length > 0 ? "!inner" : ""} (
+              publicId,
+              name,
+              colourCode
+            ),
+            members:workspace_members${filters.members.length > 0 ? "!inner" : ""} (
+              publicId,
+              user!workspace_members_userId_user_id_fk (
+                name
+              )
+            )
+          )
+        )
+      `,
+    )
+    .eq("slug", boardSlug)
+    .is("deletedAt", null)
+    .is("lists.deletedAt", null)
+    .is("lists.cards.deletedAt", null)
+    .is("workspace.members.deletedAt", null)
+    .is("lists.cards.members.deletedAt", null);
+
+  if (filters.labels.length > 0) {
+    query = query.in("lists.cards.labels.publicId", filters.labels);
+  }
+
+  if (filters.members.length > 0) {
+    query = query.in("lists.cards.members.publicId", filters.members);
+  }
+
+  const { data } = await query
+    .order("index", { foreignTable: "list", ascending: true })
+    .order("index", { foreignTable: "list.card", ascending: true })
+    .limit(1)
+    .single();
+
+  return data;
+};
+
 export const getWithListIdsByPublicId = async (
   db: SupabaseClient<Database>,
   boardPublicId: string,

packages/db/src/repository/workspace.repo.ts

@@ -19,7 +19,7 @@ export const create = async (
       slug: workspaceInput.name.toLowerCase(),
       createdBy: workspaceInput.createdBy,
     })
-    .select(`id, publicId, name`)
+    .select(`id, publicId, name, slug, description, plan`)
     .limit(1)
     .single();