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/new/page.tsx

@@ -2,7 +2,6 @@
 import React, { useEffect, useState } from "react";
 import useAudioDevice from "../useAudioDevice";
 import "react-select-search/style.css";
-import "../../../styles/button.css";
 import "../../../styles/form.scss";
 import About from "../../../(aboutAndPrivacy)/about";
 import Privacy from "../../../(aboutAndPrivacy)/privacy";
@@ -30,15 +29,6 @@ import {
   IconButton,
   Spacer,
   Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  AlertDialog,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogBody,
-  AlertDialogFooter,
   Tooltip,
   Input,
 } from "@chakra-ui/react";
@@ -107,18 +97,18 @@ const TranscriptCreate = () => {
     >
       <Flex
         flexDir={{ base: "column", md: "row" }}
-        justify="space-between"
-        align="center"
+        justifyContent="space-between"
+        alignItems="center"
         gap={8}
       >
         <Flex
           flexDir="column"
           h="full"
-          justify="evenly"
+          justifyContent="evenly"
           flexBasis="1"
           flexGrow={1}
         >
-          <Heading size="lg" textAlign={{ base: "center", md: "left" }}>
+          <Heading size="2xl" textAlign={{ base: "center", md: "left" }}>
             Welcome to Reflector
           </Heading>
           <Text mt={6}>
@@ -143,9 +133,7 @@ const TranscriptCreate = () => {
             {isLoading ? (
               <Spinner />
             ) : requireLogin && !isAuthenticated ? (
-              <Button onClick={() => signIn("authentik")} colorScheme="blue">
-                Log in
-              </Button>
+              <Button onClick={() => signIn("authentik")}>Log in</Button>
             ) : (
               <Flex
                 rounded="xl"
@@ -156,7 +144,7 @@ const TranscriptCreate = () => {
                 flexDir="column"
                 my={4}
               >
-                <Heading size="md" mb={4}>
+                <Heading size="xl" mb={4}>
                   Try Reflector
                 </Heading>
                 <Box mb={4}>
@@ -191,7 +179,7 @@ const TranscriptCreate = () => {
                     </Text>
                   ) : (
                     <Button
-                      colorScheme="whiteAlpha"
+                      colorPalette="whiteAlpha"
                       onClick={requestPermission}
                       disabled={permissionDenied}
                     >
@@ -202,20 +190,20 @@ const TranscriptCreate = () => {
                   <Text className="">Checking permissions...</Text>
                 )}
                 <Button
-                  colorScheme="whiteAlpha"
+                  colorPalette="whiteAlpha"
                   onClick={send}
-                  isDisabled={!permissionOk || loadingRecord || loadingUpload}
+                  disabled={!permissionOk || loadingRecord || loadingUpload}
                   mt={2}
                 >
                   {loadingRecord ? "Loading..." : "Record Meeting"}
                 </Button>
-                <Text align="center" m="2">
+                <Text textAlign="center" m="2">
                   OR
                 </Text>
                 <Button
-                  colorScheme="whiteAlpha"
+                  colorPalette="whiteAlpha"
                   onClick={uploadFile}
-                  isDisabled={loadingRecord || loadingUpload}
+                  disabled={loadingRecord || loadingUpload}
                 >
                   {loadingUpload ? "Loading..." : "Upload File"}
                 </Button>