feat: enhance board visibility controls with dropdown menu and success notifications (#65)

* feat: enhance board visibility controls with dropdown menu and success notifications

* feat: tweak design

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { HiOutlineEye, HiOutlineEyeSlash } from "react-icons/hi2";
 
 import Button from "~/components/Button";
+import CheckboxDropdown from "~/components/CheckboxDropdown";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
 
@@ -20,6 +21,7 @@ const VisibilityButton = ({
 }: {
   visibility: "public" | "private";
   boardPublicId: string;
+  boardSlug: string;
   queryParams: QueryParams;
   isLoading: boolean;
   isAdmin: boolean;
@@ -38,7 +40,11 @@ const VisibilityButton = ({
 
   const updateBoardVisibility = api.board.update.useMutation({
     onSuccess: () => {
-      setStateVisibility(isPublic ? "private" : "public");
+      showPopup({
+        header: "Board visibility updated",
+        message: `The visibility of your board has been set to ${isPublic ? "public" : "private"}.`,
+        icon: "success",
+      });
     },
     onError: () => {
       showPopup({
@@ -52,23 +58,39 @@ const VisibilityButton = ({
     },
   });
 
-  const handleUpdateBoardVisibility = () => {
+  return (
+    <div className="relative">
+      <CheckboxDropdown
+        items={[
+          {
+            key: "public",
+            value: "Public",
+            selected: isPublic,
+          },
+          {
+            key: "private",
+            value: "Private",
+            selected: !isPublic,
+          },
+        ]}
+        handleSelect={(_g, i) => {
+          setStateVisibility(isPublic ? "private" : "public");
           updateBoardVisibility.mutate({
-      visibility: isPublic ? "private" : "public",
+            visibility: i.key as "public" | "private",
             boardPublicId,
           });
-  };
+        }}
-
+        menuSpacing="md"
-  return (
+      >
         <Button
           variant="secondary"
-      onClick={handleUpdateBoardVisibility}
           iconLeft={isPublic ? <HiOutlineEye /> : <HiOutlineEyeSlash />}
-      isLoading={updateBoardVisibility.isPending}
           disabled={isLoading || !isAdmin}
         >
-      {isPublic ? "Public" : "Private"}
+          Visibility
         </Button>
+      </CheckboxDropdown>
+    </div>
   );
 };
 

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

@@ -260,13 +260,16 @@ export default function BoardPage() {
             </form>
           )}
           {!boardData && !isLoading && (
-            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">Board not found</p>
+            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+              Board not found
+            </p>
           )}
 
           <div className="flex items-center space-x-2">
             <VisibilityButton
               visibility={boardData?.visibility ?? "private"}
               boardPublicId={boardId ?? ""}
+              boardSlug={boardData?.slug ?? ""}
               queryParams={queryParams}
               isLoading={!boardData}
               isAdmin={workspace.role === "admin"}
@@ -374,7 +377,8 @@ export default function BoardPage() {
                                           }}
                                           key={card.publicId}
                                           href={`/cards/${card.publicId}`}
-                                          className={`mb-2 flex !cursor-pointer flex-col ${card.publicId.startsWith(
+                                          className={`mb-2 flex !cursor-pointer flex-col ${
+                                            card.publicId.startsWith(
                                               "PLACEHOLDER",
                                             )
                                               ? "pointer-events-none"