[internal] Fix maintainability and reliability issues raised by SonarQube

src/app/components/DeviceVerificationSetup.tsx

@@ -70,7 +70,7 @@ function makeUIAAction<T>(
 type SetupVerificationProps = {
   onComplete: (recoveryKey: string) => void;
 };
-function SetupVerification({ onComplete }: SetupVerificationProps) {
+function SetupVerification({ onComplete }: Readonly<SetupVerificationProps>) {
   const mx = useMatrixClient();
   const alive = useAlive();
 
@@ -227,7 +227,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
 type RecoveryKeyDisplayProps = {
   recoveryKey: string;
 };
-function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
+function RecoveryKeyDisplay({ recoveryKey }: Readonly<RecoveryKeyDisplayProps>) {
   const [show, setShow] = useState(false);
 
   const handleCopy = () => {
@@ -241,7 +241,7 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
     FileSaver.saveAs(blob, 'recovery-key.txt');
   };
 
-  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
+  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replaceAll(/[^\s]/g, '*');
 
   return (
     <Box direction="Column" gap="400">

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -85,7 +85,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       if (docState.status !== AsyncStatus.Success) return;
       const jumpInput = evt.currentTarget.jumpInput as HTMLInputElement;
       if (!jumpInput) return;
-      const jumpTo = parseInt(jumpInput.value, 10);
+      const jumpTo = Number.parseInt(jumpInput.value, 10);
       setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
       setJumpAnchor(undefined);
     };

src/app/components/RenderMessageContent.tsx

@@ -71,7 +71,7 @@ function RenderMessageContentInternal({
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
-}: RenderMessageContentProps) {
+}: Readonly<RenderMessageContentProps>) {
   const content = useMemo(() => getContent<any>(), [getContent]);
 
   const [autoplayGifs] = useSetting(settingsAtom, 'autoplayGifs');

src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx

@@ -57,13 +57,10 @@ export function EmoticonAutocomplete({
 
   const [emojiThreshold] = useSetting(settingsAtom, 'emojiSuggestThreshold');
 
-  const searchList = useMemo(() => {
-    const list: Array<EmoticonSearchItem> = [];
-    return list.concat(
-      imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
-      emojis
-    );
-  }, [imagePacks]);
+  const searchList = useMemo<Array<EmoticonSearchItem>>(
+    () => [...imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)), ...emojis],
+    [imagePacks]
+  );
 
   const [result, search, resetSearch] = useAsyncSearch(
     searchList,

src/app/components/editor/input.ts

@@ -322,7 +322,7 @@ const parseHeadingNode = (
 
   const headingMatch = node.name.match(/^h([123456])$/);
   const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
-  const level = parseInt(g1AsLevel, 10);
+  const level = Number.parseInt(g1AsLevel, 10);
 
   const mdSequence = node.attribs['data-md'];
   if (mdSequence !== undefined) {
@@ -334,7 +334,7 @@ const parseHeadingNode = (
 
   return {
     type: BlockType.Heading,
-    level: (level <= 3 ? level : 3) as HeadingLevel,
+    level: Math.min(level, 3) as HeadingLevel,
     children,
   };
 };

src/app/components/editor/output.ts

@@ -128,10 +128,13 @@ export const toMatrixCustomHTML = (
 
     return `${parsedMarkdown}${toMatrixCustomHTML(n, { ...opts, allowBlockMarkdown: false })}`;
   };
-  if (Array.isArray(node)) return node.map(parseNode).join('');
+  if (Array.isArray(node))
+    return node.map((element, index, array) => parseNode(element, index, array)).join('');
   if (Text.isText(node)) return textToCustomHtml(node, opts);
 
-  const children = node.children.map(parseNode).join('');
+  const children = node.children
+    .map((element, index, array) => parseNode(element, index, array))
+    .join('');
   return elementToCustomHtml(node, children);
 };
 
@@ -193,14 +196,14 @@ export const toPlainText = (node: Descendant | Descendant[], isMarkdown: boolean
  * @returns boolean
  */
 export const customHtmlEqualsPlainText = (customHtml: string, plain: string): boolean =>
-  customHtml.replace(/<br\/>/g, '\n') === sanitizeText(plain);
+  customHtml.replaceAll('<br/>', '\n') === sanitizeText(plain);
 
-export const trimCustomHtml = (customHtml: string) => customHtml.replace(/<br\/>$/g, '').trim();
+export const trimCustomHtml = (customHtml: string) => customHtml.replaceAll(/<br\/>$/g, '').trim();
 
 export const trimCommand = (cmdName: string, str: string) => {
   const cmdRegX = new RegExp(`^(\\s+)?(\\/${sanitizeForRegex(cmdName)})([^\\S\n]+)?`);
 
-  const match = str.match(cmdRegX);
+  const match = new RegExp(cmdRegX).exec(str);
   if (!match) return str;
   return str.slice(match[0].length);
 };

src/app/components/emoji-board/EmojiBoard.tsx

@@ -169,7 +169,7 @@ type EmojiSidebarProps = {
   packs: ImagePack[];
   onScrollToGroup: (groupId: string) => void;
 };
-function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarProps) {
+function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: Readonly<EmojiSidebarProps>) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
@@ -245,7 +245,11 @@ type StickerSidebarProps = {
   packs: ImagePack[];
   onScrollToGroup: (groupId: string) => void;
 };
-function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSidebarProps) {
+function StickerSidebar({
+  activeGroupAtom,
+  packs,
+  onScrollToGroup,
+}: Readonly<StickerSidebarProps>) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
@@ -294,7 +298,7 @@ function EmojiGroupHolder({
   previewAtom,
   onGroupItemClick,
   children,
-}: EmojiGroupHolderProps) {
+}: Readonly<EmojiGroupHolderProps>) {
   const setPreviewData = useSetAtom(previewAtom);
 
   const handleEmojiPreview = useCallback(
@@ -375,7 +379,7 @@ export function EmojiBoard({
   onStickerSelect,
   allowTextCustomEmoji,
   addToRecentEmoji = true,
-}: EmojiBoardProps) {
+}: Readonly<EmojiBoardProps>) {
   const mx = useMatrixClient();
 
   const emojiTab = tab === EmojiBoardTab.Emoji;
@@ -543,7 +547,7 @@ export function EmojiBoard({
                 id={SEARCH_GROUP_ID}
                 label={searchedItems.length ? 'Search Results' : 'No Results found'}
               >
-                {searchedItems.map(renderItem)}
+                {searchedItems.map((element, index) => renderItem(element, index))}
               </EmojiGroup>
             )}
             <div

src/app/components/event-history/EventHistory.tsx

@@ -121,7 +121,7 @@ export const EventHistory = as<'div', EventHistoryProps>(
       [room, setReplyDraft]
     );
 
-    function MenuOptions({ mEvent }: { mEvent: MatrixEvent }) {
+    function MenuOptions({ mEvent }: Readonly<{ mEvent: MatrixEvent }>) {
       const setModal = useSetAtom(modalAtom);
       return (
         <Menu className={css.MenuOptions}>
@@ -177,7 +177,10 @@ export const EventHistory = as<'div', EventHistoryProps>(
       );
     }
 
-    function EventItem({ mEvent, EventContent }: { mEvent: MatrixEvent; EventContent: IContent }) {
+    function EventItem({
+      mEvent,
+      EventContent,
+    }: Readonly<{ mEvent: MatrixEvent; EventContent: IContent }>) {
       const [isHovered, setIsHovered] = useState(false);
       return (
         <Box

src/app/components/message/RenderBody.tsx

@@ -19,7 +19,7 @@ export function RenderBody({
   highlightRegex,
   htmlReactParserOptions,
   linkifyOpts,
-}: RenderBodyProps) {
+}: Readonly<RenderBodyProps>) {
   if (body === '') return <MessageEmptyContent />;
   if (customBody) {
     if (customBody === '') return <MessageEmptyContent />;

src/app/components/message/Reply.tsx

@@ -68,10 +68,10 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
 
 type ReplyProps = {
   room: Room;
-  timelineSet?: EventTimelineSet | undefined;
+  timelineSet?: EventTimelineSet;
   replyEventId: string;
-  threadRootId?: string | undefined;
-  onClick?: MouseEventHandler | undefined;
+  threadRootId?: string;
+  onClick?: MouseEventHandler;
 };
 
 export const Reply = as<'div', ReplyProps>(
@@ -119,18 +119,18 @@ export const Reply = as<'div', ReplyProps>(
 
     if (format === 'org.matrix.custom.html' && formattedBody) {
       const strippedHtml = trimReplyFromFormattedBody(formattedBody)
-        .replace(/<br\s*\/?>/gi, ' ')
-        .replace(/<\/p>\s*<p[^>]*>/gi, ' ')
-        .replace(/<\/?p[^>]*>/gi, '')
-        .replace(/(?:\r\n|\r|\n)/g, ' ');
+        .replaceAll(/<br\s*\/?>/gi, ' ')
+        .replaceAll(/<\/p>\s*<p[^>]*>/gi, ' ')
+        .replaceAll(/<\/?p[^>]*>/gi, '')
+        .replaceAll(/(?:\r\n|\r|\n)/g, ' ');
       const parserOpts = getReactCustomHtmlParser(mx, room.roomId, {
         linkifyOpts: LINKIFY_OPTS,
         useAuthentication,
         nicknames,
       });
       bodyJSX = parse(strippedHtml, parserOpts) as JSX.Element;
     } else if (body) {
-      const strippedBody = trimReplyFromBody(body).replace(/(?:\r\n|\r|\n)/g, ' ');
+      const strippedBody = trimReplyFromBody(body).replaceAll(/(?:\r\n|\r|\n)/g, ' ');
       bodyJSX = scaleSystemEmoji(strippedBody);
     }
 

src/app/components/time-date/DatePicker.tsx

@@ -33,7 +33,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       const currentDate = dateFor(selectedYear, selectedMonth, selectedDay);
       const time = value - currentDate;
 
-      const newDate = dateFor(year, month, mDays < selectedDay ? mDays : selectedDay);
+      const newDate = dateFor(year, month, Math.min(mDays, selectedDay));
 
       const newValue = newDate + time;
       handleSubmit(newValue);
@@ -60,7 +60,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       <Menu className={css.PickerMenu} ref={ref}>
         <Box direction="Row" gap="200" className={css.PickerContainer}>
           <PickerColumn title="Day">
-            {Array.from(Array(daysInMonth(selectedMonth, selectedYear)).keys())
+            {Array.from(new Array(daysInMonth(selectedMonth, selectedYear)).keys())
               .map((i) => i + 1)
               .map((day) => (
                 <Chip
@@ -81,7 +81,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               ))}
           </PickerColumn>
           <PickerColumn title="Month">
-            {Array.from(Array(12).keys())
+            {Array.from(new Array(12).keys())
               .map((i) => i + 1)
               .map((month) => (
                 <Chip
@@ -106,7 +106,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               ))}
           </PickerColumn>
           <PickerColumn title="Year">
-            {Array.from(Array(yearsRange).keys())
+            {Array.from(new Array(yearsRange).keys())
               .map((i) => minYear + i)
               .map((year) => (
                 <Chip

src/app/components/time-date/TimePicker.tsx

@@ -64,7 +64,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
         <Box direction="Row" gap="200" className={css.PickerContainer}>
           <PickerColumn title="Hour">
             {hour24Clock
-              ? Array.from(Array(24).keys()).map((hour) => (
+              ? Array.from(new Array(24).keys()).map((hour) => (
                   <Chip
                     key={hour}
                     size="500"
@@ -78,7 +78,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                     <Text size="T300">{hour < 10 ? `0${hour}` : hour}</Text>
                   </Chip>
                 ))
-              : Array.from(Array(12).keys())
+              : Array.from(new Array(12).keys())
                   .map((i) => {
                     if (i === 0) return 12;
                     return i;
@@ -102,7 +102,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                   ))}
           </PickerColumn>
           <PickerColumn title="Minutes">
-            {Array.from(Array(60).keys()).map((minute) => (
+            {Array.from(new Array(60).keys()).map((minute) => (
               <Chip
                 key={minute}
                 size="500"
@@ -124,7 +124,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
             <PickerColumn title="Period">
               <Chip
                 size="500"
-                variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
+                variant={selectedPM ? 'SurfaceVariant' : 'Primary'}
                 fill="None"
                 radii="300"
                 aria-selected={!selectedPM}

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -32,7 +32,7 @@ import { DescriptionEditor } from './UploadDescriptionEditor';
 type PreviewImageProps = {
   fileItem: TUploadItem;
 };
-function PreviewImage({ fileItem }: PreviewImageProps) {
+function PreviewImage({ fileItem }: Readonly<PreviewImageProps>) {
   const { originalFile, metadata } = fileItem;
   const fileUrl = useObjectURL(originalFile);
 
@@ -53,7 +53,7 @@ function PreviewImage({ fileItem }: PreviewImageProps) {
 type PreviewVideoProps = {
   fileItem: TUploadItem;
 };
-function PreviewVideo({ fileItem }: PreviewVideoProps) {
+function PreviewVideo({ fileItem }: Readonly<PreviewVideoProps>) {
   const { originalFile, metadata } = fileItem;
   const fileUrl = useObjectURL(originalFile);
 
@@ -131,7 +131,7 @@ export function UploadCardRenderer({
   onRemove,
   onComplete,
   roomId,
-}: UploadCardRendererProps) {
+}: Readonly<UploadCardRendererProps>) {
   const mx = useMatrixClient();
   const mediaConfig = useMediaConfig();
   const allowSize = mediaConfig['m.upload.size'] || Infinity;

src/app/components/upload-card/UploadDescriptionEditor.tsx

@@ -53,7 +53,7 @@ export function DescriptionEditor({
   imagePackRooms,
   onSave,
   onCancel,
-}: DescriptionEditorProps) {
+}: Readonly<DescriptionEditorProps>) {
   const editor = useEditor();
   const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');

src/app/components/user-profile/UserRoomProfile.tsx

@@ -65,7 +65,7 @@ function UserExtendedSection({
   profile,
   htmlReactParserOptions,
   linkifyOpts,
-}: UserExtendedSectionProps) {
+}: Readonly<UserExtendedSectionProps>) {
   const clamp = (str: any, len: number) => {
     const stringified = String(str ?? '');
     return stringified.length > len ? `${stringified.slice(0, len)}...` : stringified;
@@ -108,7 +108,7 @@ function UserExtendedSection({
       return new Intl.DateTimeFormat([], {
         hour: 'numeric',
         minute: '2-digit',
-        timeZone: profile.timezone.replace(/^["']|["']$/g, ''),
+        timeZone: profile.timezone.replaceAll(/^["']|["']$/g, ''),
       }).format(new Date());
     } catch {
       return null;
@@ -133,7 +133,7 @@ function UserExtendedSection({
 
     const safetyTrim = rawBio.length > 2048 ? rawBio.slice(0, 2048) : rawBio;
 
-    const visibleText = safetyTrim.replace(/<[^>]*>?/gm, '');
+    const visibleText = safetyTrim.replaceAll(/<[^>]*>?/gm, '');
     const VISIBLE_LIMIT = 1024;
 
     if (visibleText.length <= VISIBLE_LIMIT) {
@@ -163,7 +163,7 @@ function UserExtendedSection({
             <Box alignItems="Center" gap="100">
               <Icon size="50" src={Icons.Clock} style={{ opacity: 0.5 }} />
               <Text size="T200" priority="400">
-                {localTime} ({profile.timezone.replace(/^["']|["']$/g, '')})
+                {localTime} ({profile.timezone.replaceAll(/^["']|["']$/g, '')})
               </Text>
             </Box>
           )}
@@ -252,7 +252,7 @@ type UserRoomProfileProps = {
   userId: string;
   initialProfile?: Partial<UserProfile>;
 };
-export function UserRoomProfile({ userId, initialProfile }: UserRoomProfileProps) {
+export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomProfileProps>) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
@@ -296,7 +296,7 @@ export function UserRoomProfile({ userId, initialProfile }: UserRoomProfileProps
 
   const parsedBanner =
     typeof extendedProfile.bannerUrl === 'string'
-      ? extendedProfile.bannerUrl.replace(/^"|"$/g, '')
+      ? extendedProfile.bannerUrl.replaceAll(/^"|"$/g, '')
       : undefined;
 
   const bannerHttpUrl = parsedBanner