mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-22 21:29:05 +00:00
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.
This commit is contained in:
GitHub
126
www/app/(app)/rooms/_components/RoomCards.tsx
Normal file
126
www/app/(app)/rooms/_components/RoomCards.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Flex,
|
||||
Heading,
|
||||
IconButton,
|
||||
Link,
|
||||
Spacer,
|
||||
Text,
|
||||
VStack,
|
||||
HStack,
|
||||
} from "@chakra-ui/react";
|
||||
import { LuLink } from "react-icons/lu";
|
||||
import { Room } from "../../../api";
|
||||
import { RoomActionsMenu } from "./RoomActionsMenu";
|
||||
|
||||
interface RoomCardsProps {
|
||||
rooms: Room[];
|
||||
linkCopied: string;
|
||||
onCopyUrl: (roomName: string) => void;
|
||||
onEdit: (roomId: string, roomData: any) => void;
|
||||
onDelete: (roomId: string) => void;
|
||||
}
|
||||
|
||||
const getRoomModeDisplay = (mode: string): string => {
|
||||
switch (mode) {
|
||||
case "normal":
|
||||
return "2-4 people";
|
||||
case "group":
|
||||
return "2-200 people";
|
||||
default:
|
||||
return mode;
|
||||
}
|
||||
};
|
||||
|
||||
const getRecordingDisplay = (type: string, trigger: string): string => {
|
||||
if (type === "none") return "-";
|
||||
if (type === "local") return "Local";
|
||||
if (type === "cloud") {
|
||||
switch (trigger) {
|
||||
case "none":
|
||||
return "Cloud";
|
||||
case "prompt":
|
||||
return "Cloud (Prompt)";
|
||||
case "automatic-2nd-participant":
|
||||
return "Cloud (Auto)";
|
||||
default:
|
||||
return `Cloud`;
|
||||
}
|
||||
}
|
||||
return type;
|
||||
};
|
||||
|
||||
export function RoomCards({
|
||||
rooms,
|
||||
linkCopied,
|
||||
onCopyUrl,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: RoomCardsProps) {
|
||||
return (
|
||||
<Box display={{ base: "block", lg: "none" }}>
|
||||
<VStack gap={3} align="stretch">
|
||||
{rooms.map((room) => (
|
||||
<Card.Root key={room.id} size="sm">
|
||||
<Card.Body>
|
||||
<Flex alignItems="center" mt={-2}>
|
||||
<Heading size="sm">
|
||||
<Link href={`/${room.name}`}>{room.name}</Link>
|
||||
</Heading>
|
||||
<Spacer />
|
||||
{linkCopied === room.name ? (
|
||||
<Text color="green.500" mr={2} fontSize="sm">
|
||||
Copied!
|
||||
</Text>
|
||||
) : (
|
||||
<IconButton
|
||||
aria-label="Copy URL"
|
||||
onClick={() => onCopyUrl(room.name)}
|
||||
mr={2}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
>
|
||||
<LuLink />
|
||||
</IconButton>
|
||||
)}
|
||||
<RoomActionsMenu
|
||||
roomId={room.id}
|
||||
roomData={room}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
</Flex>
|
||||
<VStack align="start" fontSize="sm" gap={0}>
|
||||
{room.zulip_auto_post && (
|
||||
<HStack gap={2}>
|
||||
<Text fontWeight="500">Zulip:</Text>
|
||||
<Text>
|
||||
{room.zulip_stream && room.zulip_topic
|
||||
? `${room.zulip_stream} > ${room.zulip_topic}`
|
||||
: room.zulip_stream || "Enabled"}
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
<HStack gap={2}>
|
||||
<Text fontWeight="500">Size:</Text>
|
||||
<Text>{getRoomModeDisplay(room.room_mode)}</Text>
|
||||
</HStack>
|
||||
<HStack gap={2}>
|
||||
<Text fontWeight="500">Recording:</Text>
|
||||
<Text>
|
||||
{getRecordingDisplay(
|
||||
room.recording_type,
|
||||
room.recording_trigger,
|
||||
)}
|
||||
</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Card.Body>
|
||||
</Card.Root>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user