feat: public boards

2025-01-11 15:22:49 +00:00
parent d98df1d2c6
commit 2df54f03bb
30 changed files with 487 additions and 100 deletions
--- a/apps/web/src/views/board/components/DeleteListConfirmation.tsx
+++ b/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 Button from "~/components/Button";
+import { api } from "~/utils/api";

 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",
      });
    },
  });
--- a/apps/web/src/views/board/components/Filters.tsx
+++ b/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 { boardData } = useBoard();
+const Filters = ({
+  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>
  );
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/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(),
                              )
--- a/apps/web/src/views/board/components/NewListForm.tsx
+++ b/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();
  }, []);

--- a/apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
+++ b/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",
      });
    },
  });
--- a/apps/web/src/views/board/index.tsx
+++ b/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"
--- a/apps/web/src/views/card/components/Comment.tsx
+++ b/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 { api } from "~/utils/api";
-import { usePopup } from "~/providers/popup";
+import { useState } from "react";
+import ContentEditable from "react-contenteditable";
+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",
      });
    },
  });
--- a/apps/web/src/views/card/components/DeleteCardConfirmation.tsx
+++ b/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",
      }),
  });

--- a/apps/web/src/views/card/components/DeleteLabelConfirmation.tsx
+++ b/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 Button from "~/components/Button";
+import { api } from "~/utils/api";

 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",
      }),
  });

--- a/apps/web/src/views/card/components/NewCommentForm.tsx
+++ b/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",
      });
    },
  });
--- a/apps/web/src/views/card/index.tsx
+++ b/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",
      });
    },
  });
--- a/apps/web/src/views/public/board/index.tsx
+++ b/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 />
+    </>
+  );
+}
--- a/apps/web/src/views/public/boards/index.tsx
+++ b/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)
--- a/apps/web/src/views/settings/components/DeleteWorkspaceConfirmation.tsx
+++ b/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 Button from "~/components/Button";
+import { api } from "~/utils/api";

 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.
--- a/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
+++ b/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",
      });
    },
  });
--- a/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
+++ b/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",
      });
    },
  });
--- a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
+++ b/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",
      });
    },
  });