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/styles/button.css

@@ -1,120 +0,0 @@
-/* Define basic button styles */
-input[type="button"],
-button {
-  /* Reset default button styles */
-  border: none;
-  background-color: transparent;
-  font-family: inherit;
-  padding: 0;
-  /* Visual */
-  border-radius: 8px;
-  /* Size */
-  padding: 0.4em 1em;
-  min-height: 44px;
-  /* Text */
-  text-align: center;
-  line-height: 1.1;
-  /* Display */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /* Animation */
-  transition: 220ms all ease-in-out;
-}
-
-button:focus-visible {
-  outline-style: none;
-}
-
-@media (max-width: 768px) {
-  input[type="button"],
-  button {
-    padding: 0.25em 0.75em;
-    min-height: 30px;
-  }
-}
-
-/* Button modifiers */
-input[type="button"].small,
-button.small {
-  font-size: 1.15rem;
-}
-
-input[type="button"].block,
-button.block {
-  width: 100%;
-}
-
-/* Disabled styles */
-/* input[type="button"][disabled], */
-/* button[disabled] { */
-/*   border-color: #ccc; */
-/*   background: #b8b8b8 !important; */
-/*   cursor: not-allowed; */
-/* } */
-/**/
-/* input[type="button"][disabled]:hover, */
-/* button[disabled]:hover { */
-/*   background: #b8b8b8 !important; */
-/*   cursor: not-allowed !important; */
-/* } */
-
-/* Red button states */
-input[type="button"][data-color="red"],
-button[data-color="red"],
-input[type="button"][data-color="red"]:hover,
-button[data-color="red"]:hover,
-input[type="button"][data-color="red"]:active,
-button[data-color="red"]:active {
-  background-color: #cc3347;
-}
-
-/* Green button states */
-input[type="button"][data-color="green"],
-button[data-color="green"],
-input[type="button"][data-color="green"]:hover,
-button[data-color="green"]:hover,
-input[type="button"][data-color="green"]:active,
-button[data-color="green"]:active {
-  background-color: #33cc47;
-}
-
-/* Blue button states */
-input[type="button"][data-color="blue"],
-button[data-color="blue"],
-input[type="button"][data-color="blue"]:hover,
-button[data-color="blue"]:hover,
-input[type="button"][data-color="blue"]:active,
-button[data-color="blue"]:active {
-  background-color: #3347cc;
-}
-
-/* Orange button states */
-input[type="button"][data-color="orange"],
-button[data-color="orange"],
-input[type="button"][data-color="orange"]:hover,
-button[data-color="orange"]:hover,
-input[type="button"][data-color="orange"]:active,
-button[data-color="orange"]:active {
-  background-color: #ff7f00;
-}
-
-/* Purple button states */
-input[type="button"][data-color="purple"],
-button[data-color="purple"],
-input[type="button"][data-color="purple"]:hover,
-button[data-color="purple"]:hover,
-input[type="button"][data-color="purple"]:active,
-button[data-color="purple"]:active {
-  background-color: #800080;
-}
-
-/* Yellow button states */
-input[type="button"][data-color="yellow"],
-button[data-color="yellow"],
-input[type="button"][data-color="yellow"]:hover,
-button[data-color="yellow"]:hover,
-input[type="button"][data-color="yellow"]:active,
-button[data-color="yellow"]:active {
-  background-color: #ffff00;
-}

www/app/styles/icons/pause.tsx

@@ -2,13 +2,15 @@ import { Icon } from "@chakra-ui/react";
 
 export default function PauseIcon(props) {
   return (
-    <Icon viewBox="0 0 30 30" {...props}>
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
-      />
+    <Icon {...props}>
+      <svg viewBox="0 0 30 30">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.514 5.5C11.514 4.11929 10.3947 3 9.01404 3C7.63333 3 6.51404 4.11929 6.51404 5.5V24.5C6.51404 25.8807 7.63333 27 9.01404 27C10.3947 27 11.514 25.8807 11.514 24.5L11.514 5.5ZM23.486 5.5C23.486 4.11929 22.3667 3 20.986 3C19.6053 3 18.486 4.11929 18.486 5.5L18.486 24.5C18.486 25.8807 19.6053 27 20.986 27C22.3667 27 23.486 25.8807 23.486 24.5V5.5Z"
+        />
+      </svg>
     </Icon>
   );
 }

www/app/styles/icons/play.tsx

@@ -2,11 +2,13 @@ import { Icon } from "@chakra-ui/react";
 
 export default function PlayIcon(props) {
   return (
-    <Icon viewBox="0 0 30 30" {...props}>
-      <path
-        fill="currentColor"
-        d="M27 13.2679C28.3333 14.0377 28.3333 15.9622 27 16.732L10.5 26.2583C9.16666 27.0281 7.5 26.0659 7.5 24.5263L7.5 5.47372C7.5 3.93412 9.16667 2.97187 10.5 3.74167L27 13.2679Z"
-      />
+    <Icon {...props}>
+      <svg viewBox="0 0 30 30">
+        <path
+          fill="currentColor"
+          d="M27 13.2679C28.3333 14.0377 28.3333 15.9622 27 16.732L10.5 26.2583C9.16666 27.0281 7.5 26.0659 7.5 24.5263L7.5 5.47372C7.5 3.93412 9.16667 2.97187 10.5 3.74167L27 13.2679Z"
+        />
+      </svg>
     </Icon>
   );
 }

www/app/styles/icons/stopRecord.tsx

@@ -2,8 +2,10 @@ import { Icon } from "@chakra-ui/react";
 
 export default function StopRecordIcon(props) {
   return (
-    <Icon viewBox="0 0 20 20" {...props}>
-      <rect width="20" height="20" rx="1" fill="currentColor" />
+    <Icon {...props}>
+      <svg viewBox="0 0 20 20">
+        <rect width="20" height="20" rx="1" fill="currentColor" />
+      </svg>
     </Icon>
   );
 }

www/app/styles/markdown.css

@@ -10,7 +10,7 @@
 }
 
 .markdown h1 {
-  font-size: 1.2em;
+  font-size: 1.1em;
   font-weight: bold;
   /* text-decoration: underline;
   text-underline-offset: 0.2em; */

www/app/styles/recorder.js

@@ -1,10 +1,9 @@
-import { theme } from "@chakra-ui/react";
-
+// Hardcoded colors for now - can be replaced with token system in Chakra v3
 export const waveSurferStyles = {
   playerSettings: {
-    waveColor: theme.colors.blue[500],
-    progressColor: theme.colors.blue[700],
-    cursorColor: theme.colors.red[500],
+    waveColor: "#3182ce",
+    progressColor: "#2c5282",
+    cursorColor: "#e53e3e",
     hideScrollbar: true,
     autoScroll: false,
     autoCenter: false,
@@ -31,5 +30,5 @@ export const waveSurferStyles = {
     transition: width 100ms linear;
     z-index: 0;
   `,
-  markerHover: { backgroundColor: theme.colors.gray[200] },
+  markerHover: { backgroundColor: "#e2e8f0" },
 };

www/app/styles/theme.ts

@@ -1,83 +1,182 @@
-import { extendTheme } from "@chakra-ui/react";
-import { Poppins } from "next/font/google";
-import { accordionAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react";
+import {
+  createSystem,
+  defaultConfig,
+  defineConfig,
+  defineRecipe,
+  defineSlotRecipe,
+  defaultSystem,
+} from "@chakra-ui/react";
 
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(accordionAnatomy.keys);
-
-const poppins = Poppins({
-  subsets: ["latin"],
-  weight: ["200", "400", "600"],
-  display: "swap",
-});
-const custom = definePartsStyle({
-  container: {
-    border: "0",
-    borderRadius: "8px",
-    backgroundColor: "white",
-    mb: 2,
-    mr: 2,
-  },
-  panel: {
-    pl: 8,
-    pb: 0,
-  },
-  button: {
-    justifyContent: "flex-start",
-    pl: 2,
+const accordionSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "container",
+    "item",
+    "itemTrigger",
+    "itemContent",
+    "itemIndicator",
+  ],
+  base: {
+    item: {
+      bg: "white",
+      borderRadius: "xl",
+      border: "0",
+      mb: "2",
+      width: "full",
+    },
+    itemTrigger: {
+      p: "2",
+      cursor: "pointer",
+      _hover: {
+        bg: "gray.200",
+      },
+    },
   },
 });
 
-const accordionTheme = defineMultiStyleConfig({
-  variants: { custom },
-});
-
-const linkTheme = defineStyle({
-  baseStyle: {
+const linkRecipe = defineRecipe({
+  className: "link",
+  base: {
+    textDecoration: "none",
     _hover: {
       color: "blue.500",
       textDecoration: "none",
     },
+    _focus: {
+      outline: "none",
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      outline: "none",
+      boxShadow: "none",
+    },
+  },
+  variants: {
+    variant: {
+      plain: {
+        _hover: {
+          textDecoration: "none",
+        },
+      },
+    },
   },
 });
+
+const buttonRecipe = defineRecipe({
+  base: {
+    fontWeight: "600",
+    _hover: {
+      bg: "gray.200",
+    },
+    _focus: {
+      outline: "none",
+      boxShadow: "none",
+    },
+    _focusVisible: {
+      outline: "none",
+      boxShadow: "none",
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        colorPalette: "blue",
+      },
+      outline: {
+        _hover: {
+          bg: "gray.200",
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      colorPalette: "whiteAlpha",
+      css: {
+        bg: "whiteAlpha.500",
+        color: "white",
+        _hover: {
+          bg: "whiteAlpha.600",
+          opacity: 1,
+        },
+      },
+    },
+  ],
+});
+
 export const colors = {
   blue: {
-    primary: "#3158E2",
-    500: "#3158E2",
-    light: "#B1CBFF",
-    200: "#B1CBFF",
-    dark: "#0E1B48",
-    900: "#0E1B48",
+    primary: { value: "#3158E2" },
+    500: { value: "#3158E2" },
+    light: { value: "#B1CBFF" },
+    200: { value: "#B1CBFF" },
+    dark: { value: "#0E1B48" },
+    900: { value: "#0E1B48" },
   },
   red: {
-    primary: "#DF7070",
-    500: "#DF7070",
-    light: "#FBD5D5",
-    200: "#FBD5D5",
+    primary: { value: "#DF7070" },
+    500: { value: "#DF7070" },
+    light: { value: "#FBD5D5" },
+    200: { value: "#FBD5D5" },
   },
   gray: {
-    bg: "#F4F4F4",
-    100: "#F4F4F4",
-    light: "#D5D5D5",
-    200: "#D5D5D5",
-    primary: "#838383",
-    500: "#838383",
+    solid: { value: "#F4F4F4" },
+    bg: { value: "#F4F4F4" },
+    100: { value: "#F4F4F4" },
+    light: { value: "#D5D5D5" },
+    200: { value: "#D5D5D5" },
+    primary: { value: "#838383" },
+    500: { value: "#838383" },
+    800: { value: "#1A202C" },
   },
-  light: "#FFFFFF",
-  dark: "#0C0D0E",
+  whiteAlpha: {
+    50: { value: "rgba(255, 255, 255, 0.04)" },
+    100: { value: "rgba(255, 255, 255, 0.06)" },
+    200: { value: "rgba(255, 255, 255, 0.08)" },
+    300: { value: "rgba(255, 255, 255, 0.16)" },
+    400: { value: "rgba(255, 255, 255, 0.24)" },
+    500: { value: "rgba(255, 255, 255, 0.36)" },
+    600: { value: "rgba(255, 255, 255, 0.48)" },
+    700: { value: "rgba(255, 255, 255, 0.64)" },
+    800: { value: "rgba(255, 255, 255, 0.80)" },
+    900: { value: "rgba(255, 255, 255, 0.92)" },
+  },
+  light: { value: "#FFFFFF" },
+  dark: { value: "#0C0D0E" },
 };
 
-const theme = extendTheme({
-  colors,
-  components: {
-    Accordion: accordionTheme,
-    Link: linkTheme,
-  },
-  fonts: {
-    body: poppins.style.fontFamily,
-    heading: poppins.style.fontFamily,
+const config = defineConfig({
+  theme: {
+    tokens: {
+      colors,
+      fonts: {
+        heading: { value: "Poppins, sans-serif" },
+        body: { value: "Poppins, sans-serif" },
+      },
+    },
+    semanticTokens: {
+      colors: {
+        whiteAlpha: {
+          solid: { value: "{colors.whiteAlpha.500}" },
+          contrast: { value: "{colors.white}" },
+          fg: { value: "{colors.white}" },
+          muted: { value: "{colors.whiteAlpha.100}" },
+          subtle: { value: "{colors.whiteAlpha.50}" },
+          emphasized: { value: "{colors.whiteAlpha.600}" },
+          focusRing: { value: "{colors.whiteAlpha.500}" },
+        },
+      },
+    },
+    slotRecipes: {
+      accordion: accordionSlotRecipe,
+    },
+    recipes: {
+      link: linkRecipe,
+      button: buttonRecipe,
+    },
   },
 });
 
-export default theme;
+export const system = createSystem(defaultConfig, config);
+
+export default system;