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/(app)/transcripts/shareAndPrivacy.tsx

@@ -7,18 +7,17 @@ import {
   Box,
   Flex,
   IconButton,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
   Text,
+  Dialog,
+  Portal,
+  CloseButton,
+  Select,
+  createListCollection,
 } from "@chakra-ui/react";
-import { FaShare } from "react-icons/fa";
+import { LuShare2 } from "react-icons/lu";
 import useApi from "../../lib/useApi";
 import useSessionUser from "../../lib/useSessionUser";
 import { CustomSession } from "../../lib/types";
-import { Select } from "chakra-react-select";
 import ShareLink from "./shareLink";
 import ShareCopy from "./shareCopy";
 import ShareZulip from "./shareZulip";
@@ -31,31 +30,41 @@ type ShareAndPrivacyProps = {
 
 type ShareOption = { value: ShareMode; label: string };
 
-const shareOptions = [
+const shareOptionsData = [
   { label: "Private", value: toShareMode("private") },
   { label: "Secure", value: toShareMode("semi-private") },
   { label: "Public", value: toShareMode("public") },
 ];
 
+const shareOptions = createListCollection({
+  items: shareOptionsData,
+});
+
 export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
   const [showModal, setShowModal] = useState(false);
   const [isOwner, setIsOwner] = useState(false);
   const [shareMode, setShareMode] = useState<ShareOption>(
-    shareOptions.find(
+    shareOptionsData.find(
       (option) => option.value === props.transcriptResponse.share_mode,
-    ) || shareOptions[0],
+    ) || shareOptionsData[0],
   );
   const [shareLoading, setShareLoading] = useState(false);
   const requireLogin = featureEnabled("requireLogin");
   const api = useApi();
 
-  const updateShareMode = async (selectedShareMode: any) => {
+  const updateShareMode = async (selectedValue: string) => {
     if (!api)
       throw new Error("ShareLink's API should always be ready at this point");
 
+    const selectedOption = shareOptionsData.find(
+      (option) => option.value === selectedValue,
+    );
+
+    if (!selectedOption) return;
+
     setShareLoading(true);
     const requestBody: UpdateTranscript = {
-      share_mode: toShareMode(selectedShareMode.value),
+      share_mode: selectedValue as "public" | "semi-private" | "private",
     };
 
     const updatedTranscript = await api.v1TranscriptUpdate({
@@ -63,9 +72,9 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
       requestBody,
     });
     setShareMode(
-      shareOptions.find(
+      shareOptionsData.find(
         (option) => option.value === updatedTranscript.share_mode,
-      ) || shareOptions[0],
+      ) || shareOptionsData[0],
     );
     setShareLoading(false);
   };
@@ -79,72 +88,102 @@ export default function ShareAndPrivacy(props: ShareAndPrivacyProps) {
   return (
     <>
       <IconButton
-        icon={<FaShare />}
         onClick={() => setShowModal(true)}
         aria-label="Share"
-      />
-      <Modal
-        isOpen={!!showModal}
-        onClose={() => setShowModal(false)}
-        size={"xl"}
+        size="sm"
+        variant="subtle"
       >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Share</ModalHeader>
-          <ModalBody>
-            {requireLogin && (
-              <Box mb={4}>
-                <Text size="sm" mb="2" fontWeight={"bold"}>
-                  Share mode
-                </Text>
-                <Text size="sm" mb="2">
-                  {shareMode.value === "private" &&
-                    "This transcript is private and can only be accessed by you."}
-                  {shareMode.value === "semi-private" &&
-                    "This transcript is secure. Only authenticated users can access it."}
-                  {shareMode.value === "public" &&
-                    "This transcript is public. Everyone can access it."}
-                </Text>
+        <LuShare2 />
+      </IconButton>
+      <Dialog.Root
+        open={showModal}
+        onOpenChange={(e) => setShowModal(e.open)}
+        size="lg"
+      >
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>Share</Dialog.Title>
+              <Dialog.CloseTrigger asChild>
+                <CloseButton />
+              </Dialog.CloseTrigger>
+            </Dialog.Header>
+            <Dialog.Body>
+              {requireLogin && (
+                <Box mb={4}>
+                  <Text mb="2" fontWeight={"bold"}>
+                    Share mode
+                  </Text>
+                  <Text mb="2">
+                    {shareMode.value === "private" &&
+                      "This transcript is private and can only be accessed by you."}
+                    {shareMode.value === "semi-private" &&
+                      "This transcript is secure. Only authenticated users can access it."}
+                    {shareMode.value === "public" &&
+                      "This transcript is public. Everyone can access it."}
+                  </Text>
 
-                {isOwner && api && (
-                  <Select
-                    options={
-                      [
-                        { value: "private", label: "Private" },
-                        { label: "Secure", value: "semi-private" },
-                        { label: "Public", value: "public" },
-                      ] as any
-                    }
-                    value={shareMode}
-                    onChange={updateShareMode}
-                    isLoading={shareLoading}
+                  {isOwner && api && (
+                    <Select.Root
+                      key={shareMode.value}
+                      value={[shareMode.value]}
+                      onValueChange={(e) => updateShareMode(e.value[0])}
+                      disabled={shareLoading}
+                      collection={shareOptions}
+                      lazyMount={true}
+                    >
+                      <Select.HiddenSelect />
+                      <Select.Control>
+                        <Select.Trigger>
+                          <Select.ValueText>{shareMode.label}</Select.ValueText>
+                        </Select.Trigger>
+                        <Select.IndicatorGroup>
+                          <Select.Indicator />
+                        </Select.IndicatorGroup>
+                      </Select.Control>
+                      <Select.Positioner>
+                        <Select.Content>
+                          {shareOptions.items.map((option) => (
+                            <Select.Item
+                              key={option.value}
+                              item={option}
+                              label={option.label}
+                            >
+                              {option.label}
+                              <Select.ItemIndicator />
+                            </Select.Item>
+                          ))}
+                        </Select.Content>
+                      </Select.Positioner>
+                    </Select.Root>
+                  )}
+                </Box>
+              )}
+
+              <Text fontSize="sm" mb="2" fontWeight={"bold"}>
+                Share options
+              </Text>
+              <Flex gap={2} mb={2}>
+                {requireLogin && (
+                  <ShareZulip
+                    transcriptResponse={props.transcriptResponse}
+                    topicsResponse={props.topicsResponse}
+                    disabled={toShareMode(shareMode.value) === "private"}
                   />
                 )}
-              </Box>
-            )}
-
-            <Text size="sm" mb="2" fontWeight={"bold"}>
-              Share options
-            </Text>
-            <Flex gap={2} mb={2}>
-              {requireLogin && (
-                <ShareZulip
+                <ShareCopy
+                  finalSummaryRef={props.finalSummaryRef}
                   transcriptResponse={props.transcriptResponse}
                   topicsResponse={props.topicsResponse}
-                  disabled={toShareMode(shareMode.value) === "private"}
                 />
-              )}
-              <ShareCopy
-                finalSummaryRef={props.finalSummaryRef}
-                transcriptResponse={props.transcriptResponse}
-                topicsResponse={props.topicsResponse}
-              />
-            </Flex>
+              </Flex>
 
-            <ShareLink transcriptId={props.transcriptResponse.id} />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
+              <ShareLink transcriptId={props.transcriptResponse.id} />
+            </Dialog.Body>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Dialog.Root>
     </>
   );
 }