mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 12:19:06 +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
@@ -1,8 +1,23 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { featureEnabled } from "../../domainContext";
|
||||
import ShareModal from "./[transcriptId]/shareModal";
|
||||
import { GetTranscript, GetTranscriptTopic } from "../../api";
|
||||
import { BoxProps, Button } from "@chakra-ui/react";
|
||||
import {
|
||||
BoxProps,
|
||||
Button,
|
||||
Dialog,
|
||||
CloseButton,
|
||||
Text,
|
||||
Box,
|
||||
Flex,
|
||||
Checkbox,
|
||||
Combobox,
|
||||
Spinner,
|
||||
Portal,
|
||||
useFilter,
|
||||
useListCollection,
|
||||
} from "@chakra-ui/react";
|
||||
import { TbBrandZulip } from "react-icons/tb";
|
||||
import useApi from "../../lib/useApi";
|
||||
|
||||
type ShareZulipProps = {
|
||||
transcriptResponse: GetTranscript;
|
||||
@@ -10,27 +25,251 @@ type ShareZulipProps = {
|
||||
disabled: boolean;
|
||||
};
|
||||
|
||||
interface Stream {
|
||||
stream_id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Topic {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export default function ShareZulip(props: ShareZulipProps & BoxProps) {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [stream, setStream] = useState<string | undefined>(undefined);
|
||||
const [topic, setTopic] = useState<string | undefined>(undefined);
|
||||
const [includeTopics, setIncludeTopics] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [streams, setStreams] = useState<Stream[]>([]);
|
||||
const [topics, setTopics] = useState<Topic[]>([]);
|
||||
const api = useApi();
|
||||
const { contains } = useFilter({ sensitivity: "base" });
|
||||
|
||||
const {
|
||||
collection: streamItemsCollection,
|
||||
filter: streamItemsFilter,
|
||||
set: streamItemsSet,
|
||||
} = useListCollection({
|
||||
items: [],
|
||||
filter: contains,
|
||||
});
|
||||
|
||||
const {
|
||||
collection: topicItemsCollection,
|
||||
filter: topicItemsFilter,
|
||||
set: topicItemsSet,
|
||||
} = useListCollection({
|
||||
items: [],
|
||||
filter: contains,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZulipStreams = async () => {
|
||||
if (!api) return;
|
||||
|
||||
try {
|
||||
const response = await api.v1ZulipGetStreams();
|
||||
setStreams(response);
|
||||
|
||||
streamItemsSet(
|
||||
response.map((stream) => ({
|
||||
label: stream.name,
|
||||
value: stream.name,
|
||||
})),
|
||||
);
|
||||
|
||||
setIsLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Error fetching Zulip streams:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchZulipStreams();
|
||||
}, [!api]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZulipTopics = async () => {
|
||||
if (!api || !stream) return;
|
||||
try {
|
||||
const selectedStream = streams.find((s) => s.name === stream);
|
||||
if (selectedStream) {
|
||||
const response = await api.v1ZulipGetTopics({
|
||||
streamId: selectedStream.stream_id,
|
||||
});
|
||||
setTopics(response);
|
||||
topicItemsSet(
|
||||
response.map((topic) => ({
|
||||
label: topic.name,
|
||||
value: topic.name,
|
||||
})),
|
||||
);
|
||||
} else {
|
||||
topicItemsSet([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching Zulip topics:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchZulipTopics();
|
||||
}, [stream, streams, api]);
|
||||
|
||||
const handleSendToZulip = async () => {
|
||||
if (!api || !props.transcriptResponse) return;
|
||||
|
||||
if (stream && topic) {
|
||||
try {
|
||||
await api.v1TranscriptPostToZulip({
|
||||
transcriptId: props.transcriptResponse.id,
|
||||
stream,
|
||||
topic,
|
||||
includeTopics,
|
||||
});
|
||||
setShowModal(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (!featureEnabled("sendToZulip")) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
size={"sm"}
|
||||
isDisabled={props.disabled}
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
➡️ Send to Zulip
|
||||
<Button disabled={props.disabled} onClick={() => setShowModal(true)}>
|
||||
<TbBrandZulip /> Send to Zulip
|
||||
</Button>
|
||||
|
||||
<ShareModal
|
||||
transcript={props.transcriptResponse}
|
||||
topics={props.topicsResponse}
|
||||
show={showModal}
|
||||
setShow={(v) => setShowModal(v)}
|
||||
/>
|
||||
<Dialog.Root
|
||||
open={showModal}
|
||||
onOpenChange={(e) => setShowModal(e.open)}
|
||||
size="md"
|
||||
>
|
||||
<Dialog.Backdrop />
|
||||
<Dialog.Positioner>
|
||||
<Dialog.Content>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Send to Zulip</Dialog.Title>
|
||||
<Dialog.CloseTrigger asChild>
|
||||
<CloseButton />
|
||||
</Dialog.CloseTrigger>
|
||||
</Dialog.Header>
|
||||
<Dialog.Body>
|
||||
{isLoading ? (
|
||||
<Flex justify="center" py={8}>
|
||||
<Spinner />
|
||||
</Flex>
|
||||
) : (
|
||||
<>
|
||||
<Box mb={4}>
|
||||
<Checkbox.Root
|
||||
checked={includeTopics}
|
||||
onCheckedChange={(e) => setIncludeTopics(!!e.checked)}
|
||||
>
|
||||
<Checkbox.HiddenInput />
|
||||
<Checkbox.Control>
|
||||
<Checkbox.Indicator />
|
||||
</Checkbox.Control>
|
||||
<Checkbox.Label>Include topics</Checkbox.Label>
|
||||
</Checkbox.Root>
|
||||
</Box>
|
||||
|
||||
<Box mb={4}>
|
||||
<Flex align="center" gap={2}>
|
||||
<Text>#</Text>
|
||||
<Combobox.Root
|
||||
collection={streamItemsCollection}
|
||||
value={stream ? [stream] : []}
|
||||
onValueChange={(e) => {
|
||||
setTopic(undefined);
|
||||
setStream(e.value[0]);
|
||||
}}
|
||||
onInputValueChange={(e) =>
|
||||
streamItemsFilter(e.inputValue)
|
||||
}
|
||||
openOnClick={true}
|
||||
positioning={{
|
||||
strategy: "fixed",
|
||||
hideWhenDetached: true,
|
||||
}}
|
||||
>
|
||||
<Combobox.Control>
|
||||
<Combobox.Input placeholder="Pick a stream" />
|
||||
<Combobox.IndicatorGroup>
|
||||
<Combobox.ClearTrigger />
|
||||
<Combobox.Trigger />
|
||||
</Combobox.IndicatorGroup>
|
||||
</Combobox.Control>
|
||||
<Combobox.Positioner>
|
||||
<Combobox.Content>
|
||||
<Combobox.Empty>No streams found</Combobox.Empty>
|
||||
{streamItemsCollection.items.map((item) => (
|
||||
<Combobox.Item key={item.value} item={item}>
|
||||
{item.label}
|
||||
</Combobox.Item>
|
||||
))}
|
||||
</Combobox.Content>
|
||||
</Combobox.Positioner>
|
||||
</Combobox.Root>
|
||||
</Flex>
|
||||
</Box>
|
||||
|
||||
{stream && (
|
||||
<Box mb={4}>
|
||||
<Flex align="center" gap={2}>
|
||||
<Text visibility="hidden">#</Text>
|
||||
<Combobox.Root
|
||||
collection={topicItemsCollection}
|
||||
value={topic ? [topic] : []}
|
||||
onValueChange={(e) => setTopic(e.value[0])}
|
||||
onInputValueChange={(e) =>
|
||||
topicItemsFilter(e.inputValue)
|
||||
}
|
||||
openOnClick
|
||||
selectionBehavior="replace"
|
||||
skipAnimationOnMount={true}
|
||||
closeOnSelect={true}
|
||||
positioning={{
|
||||
strategy: "fixed",
|
||||
hideWhenDetached: true,
|
||||
}}
|
||||
>
|
||||
<Combobox.Control>
|
||||
<Combobox.Input placeholder="Pick a topic" />
|
||||
<Combobox.IndicatorGroup>
|
||||
<Combobox.ClearTrigger />
|
||||
<Combobox.Trigger />
|
||||
</Combobox.IndicatorGroup>
|
||||
</Combobox.Control>
|
||||
<Combobox.Positioner>
|
||||
<Combobox.Content>
|
||||
<Combobox.Empty>No topics found</Combobox.Empty>
|
||||
{topicItemsCollection.items.map((item) => (
|
||||
<Combobox.Item key={item.value} item={item}>
|
||||
{item.label}
|
||||
<Combobox.ItemIndicator />
|
||||
</Combobox.Item>
|
||||
))}
|
||||
</Combobox.Content>
|
||||
</Combobox.Positioner>
|
||||
</Combobox.Root>
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Dialog.Body>
|
||||
<Dialog.Footer>
|
||||
<Button variant="ghost" onClick={() => setShowModal(false)}>
|
||||
Close
|
||||
</Button>
|
||||
<Button disabled={!stream || !topic} onClick={handleSendToZulip}>
|
||||
Send to Zulip
|
||||
</Button>
|
||||
</Dialog.Footer>
|
||||
</Dialog.Content>
|
||||
</Dialog.Positioner>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user