Merge pull request #268 from dozro/sonarqube/maintainability-2026-03-14

[internal] Fix maintainability and reliability issues raised by SonarQube

Author: Just-Insane

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/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

@@ -179,7 +179,7 @@ function EmojiSidebar({
   packs,
   saveStickerEmojiBandwidth,
   onScrollToGroup,
-}: EmojiSidebarProps) {
+}: Readonly<EmojiSidebarProps>) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
@@ -264,7 +264,7 @@ function StickerSidebar({
   packs,
   saveStickerEmojiBandwidth,
   onScrollToGroup,
-}: StickerSidebarProps) {
+}: Readonly<StickerSidebarProps>) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
 
@@ -316,7 +316,7 @@ function EmojiGroupHolder({
   previewAtom,
   onGroupItemClick,
   children,
-}: EmojiGroupHolderProps) {
+}: Readonly<EmojiGroupHolderProps>) {
   const setPreviewData = useSetAtom(previewAtom);
 
   const handleEmojiPreview = useCallback(
@@ -397,7 +397,7 @@ export function EmojiBoard({
   onStickerSelect,
   allowTextCustomEmoji,
   addToRecentEmoji = true,
-}: EmojiBoardProps) {
+}: Readonly<EmojiBoardProps>) {
   const mx = useMatrixClient();
   const [saveStickerEmojiBandwidth] = useSetting(settingsAtom, 'saveStickerEmojiBandwidth');
 
@@ -589,7 +589,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