feat: migrate from chakra 2 to chakra 3 (#500)

* feat: separate page into different component, greatly improving the loading and reactivity

* fix: various fixes

* feat: migrate to Chakra UI v3 - update theme, fix deprecated props

- Add whiteAlpha color palette with semantic tokens
- Update button recipe with fontWeight 600 and hover states
- Move Poppins font from theme to HTML tag className
- Fix deprecated props: isDisabled→disabled, align→alignItems/textAlign
- Remove button.css as styles are now handled by Chakra v3

* fix: complete Chakra UI v3 deprecated prop migrations

- Replace all isDisabled with disabled
- Replace all isChecked with checked
- Replace all isLoading with loading
- Replace all isOpen with open
- Replace all noOfLines with lineClamp
- Replace all align with alignItems on Flex/Stack components
- Replace all justify with justifyContent on Flex/Stack components
- Update temporary Select components to use new prop names
- Update REFACTOR2.md with completion status

* fix: add value prop to Menu.Item for proper hover states in Chakra v3

* fix: update browse page components for Chakra UI v3 compatibility

- Fix FilterSidebar status filter styling and prop usage
- Update Pagination component to use new Chakra v3 props and structure
- Refactor TranscriptTable to use modern Chakra patterns
- Clean up browse page layout and props
- Remove unused import from transcripts API view
- Enhance theme with additional semantic color tokens

* fix: polish browse page UI for Chakra v3

- Add rounded corners to FilterSidebar
- Adjust responsive breakpoints from md to lg for table/card view
- Add consistent font weights to table headers
- Improve card view typography and spacing
- Fix padding and margins for better mobile experience
- Remove unused table recipe from theme

* fix: padding

* fix: rework transcript page

* fix: more tidy layout for topic

* fix: share and privacy using chakra3 select

* fix: fix share and privacy select, now working, with closing dialog

* fix: complete Chakra UI v3 migration for share components and fix all TypeScript errors

- Refactor shareZulip.tsx to integrate modal content directly
- Replace react-select-search with Chakra UI v3 Select components using collection pattern
- Convert all Checkbox components to use v3 composable structure (Checkbox.Root, etc.)
- Fix Card components to use Card.Root and Card.Body
- Replace deprecated textColor prop with color prop
- Update Menu components to use v3 namespace pattern (Menu.Root, Menu.Trigger, etc.)
- Remove unused AlertDialog imports
- Fix useDisclosure hook changes (isOpen -> open)
- Replace UnorderedList with List.Root and ListItem with List.Item
- Fix Skeleton components by removing isLoaded prop and using conditional rendering
- Update Button variants to valid v3 options
- Fix Spinner props (remove thickness, speed, emptyColor)
- Update toast API to use custom toaster component
- Fix Progress components and FormControl to Field.Root
- Update Alert to use compound component pattern
- Remove shareModal.tsx file after integration

* fix: bring back topic list

* fix: normalize menu item

* fix: migrate rooms page to Chakra UI v3 pattern

- Updated layout to match browse page with Flex container and proper spacing
- Migrated add/edit room modal from custom HTML to Chakra UI v3 Dialog component
- Replaced all Select components with Chakra UI v3 Select using createListCollection
- Replaced FormControl/FormLabel/FormHelperText with Field.Root/Field.Label/Field.HelperText
- Removed inline styles and used Chakra props (mr={2} instead of style={{ marginRight: "8px" }})
- Fixed TypeScript interfaces removing OptionBase extension
- Fixed theme.ts accordion anatomy import issue

* refactor: convert rooms list to table view with responsive design

- Create RoomTable component for desktop view showing room details in columns
- Create RoomCards component for mobile/tablet responsive view
- Refactor RoomList to use table/card components based on screen size
- Display Zulip configuration, room size, and recording settings in table
- Remove unused RoomItem component
- Import Room type from API for proper typing

* refactor: extract RoomActionsMenu component to eliminate duplication

- Create RoomActionsMenu component for consistent room action menus
- Update RoomCards and RoomTable to use the new shared component
- Remove duplicated menu code from both components

* feat: add icons to TranscriptActionsMenu for consistency

- Add FaTrash icon for Delete action with red color
- Add FaArrowsRotate icon for Reprocess action
- Matches the pattern established in RoomActionsMenu

* refactor: update icons from Font Awesome to Lucide React

- Replace FaEllipsisVertical with LuMenu in menu triggers
- Replace FaLink with LuLink for copy URL buttons
- Replace FaPencil with LuPen for edit actions
- Replace FaTrash with LuTrash for delete actions
- Replace FaArrowsRotate with LuRotateCw for reprocess action
- Consistent icon library usage across all components

* refactor: little pass on the icons

* fix: lu icon

* fix: primary for button

* fix: recording page with mic selection

* fix: also fix duration

* fix: use combobox for share zulip

* fix: use proper theming for button, variant was not recognized

* fix: room actions menu

* fix: remove other variant primary left.

www/app/[roomName]/page.tsx

@@ -15,9 +15,9 @@ import {
   VStack,
   HStack,
   Spinner,
-  useToast,
   Icon,
 } from "@chakra-ui/react";
+import { toaster } from "../components/ui/toaster";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
@@ -80,7 +80,6 @@ const useConsentDialog = (
   // toast would open duplicates, even with using "id=" prop
   const [modalOpen, setModalOpen] = useState(false);
   const api = useApi();
-  const toast = useToast();
 
   const handleConsent = useCallback(
     async (meetingId: string, given: boolean) => {
@@ -109,24 +108,23 @@ const useConsentDialog = (
 
     setModalOpen(true);
 
-    const TOAST_NEVER_DISMISS_VALUE = null;
-    const toastId = toast({
-      position: "top",
-      duration: TOAST_NEVER_DISMISS_VALUE,
-      render: ({ onClose }) => {
+    const toastId = toaster.create({
+      placement: "top",
+      duration: null,
+      render: ({ dismiss }) => {
         const AcceptButton = () => {
           const buttonRef = useRef<HTMLButtonElement>(null);
           useConsentWherebyFocusManagement(buttonRef, wherebyRef);
           return (
             <Button
               ref={buttonRef}
-              colorScheme="blue"
+              colorPalette="blue"
               size="sm"
               onClick={() => {
                 handleConsent(meetingId, true).then(() => {
                   /*signifies it's ok to now wait here.*/
                 });
-                onClose();
+                dismiss();
               }}
             >
               Yes, store the audio
@@ -143,21 +141,21 @@ const useConsentDialog = (
             maxW="md"
             mx="auto"
           >
-            <VStack spacing={4} align="center">
+            <VStack gap={4} alignItems="center">
               <Text fontSize="md" textAlign="center" fontWeight="medium">
                 Can we have your permission to store this meeting's audio
                 recording on our servers?
               </Text>
-              <HStack spacing={4} justify="center">
+              <HStack gap={4} justifyContent="center">
                 <AcceptButton />
                 <Button
-                  colorScheme="gray"
+                  colorPalette="gray"
                   size="sm"
                   onClick={() => {
                     handleConsent(meetingId, false).then(() => {
                       /*signifies it's ok to now wait here.*/
                     });
-                    onClose();
+                    dismiss();
                   }}
                 >
                   No, delete after transcription
@@ -167,27 +165,34 @@ const useConsentDialog = (
           </Box>
         );
       },
-      onCloseComplete: () => {
-        setModalOpen(false);
-      },
+    });
+
+    // Set modal state when toast is dismissed
+    toastId.then((id) => {
+      const checkToastStatus = setInterval(() => {
+        if (!toaster.isActive(id)) {
+          setModalOpen(false);
+          clearInterval(checkToastStatus);
+        }
+      }, 100);
     });
 
     // Handle escape key to close the toast
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
-        toast.close(toastId);
+        toastId.then((id) => toaster.dismiss(id));
       }
     };
 
     document.addEventListener("keydown", handleKeyDown);
 
     const cleanup = () => {
-      toast.close(toastId);
+      toastId.then((id) => toaster.dismiss(id));
       document.removeEventListener("keydown", handleKeyDown);
     };
 
     return cleanup;
-  }, [meetingId, toast, handleConsent, wherebyRef, modalOpen]);
+  }, [meetingId, handleConsent, wherebyRef, modalOpen]);
 
   return { showConsentModal, consentState, hasConsent, consentLoading };
 };
@@ -212,7 +217,7 @@ function ConsentDialogButton({
       top="56px"
       left="8px"
       zIndex={1000}
-      colorScheme="blue"
+      colorPalette="blue"
       size="sm"
       onClick={showConsentModal}
     >
@@ -294,13 +299,7 @@ export default function Room(details: RoomDetails) {
         bg="gray.50"
         p={4}
       >
-        <Spinner
-          thickness="4px"
-          speed="0.65s"
-          emptyColor="gray.200"
-          color="blue.500"
-          size="xl"
-        />
+        <Spinner color="blue.500" size="xl" />
       </Box>
     );
   }