Release v4.2.2 (#2012)

* Allow service worker to immediately claim pages
* Allow media requests to be cached by browser

.github/workflows/build-pull-request.yml

@@ -12,9 +12,9 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/cla.yml

@@ -12,7 +12,7 @@ jobs:
       - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: cla-assistant/github-action@v2.5.1
+        uses: cla-assistant/github-action@v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # the below token should have repo scope and must be manually added by you in the repository's secret

.github/workflows/docker-pr.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Build Docker image
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.9.0
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.github/workflows/netlify-dev.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/prod-deploy.yml

@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@v4.0.4
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -66,7 +66,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@v4.2.0
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3.2.0
       - name: Set up Docker Buildx
@@ -90,7 +90,7 @@ jobs:
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.9.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.2.1",
+      "version": "4.2.2",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -45,7 +45,7 @@
         "jotai": "2.6.0",
         "linkify-react": "4.1.3",
         "linkifyjs": "4.1.3",
-        "matrix-js-sdk": "34.5.0",
+        "matrix-js-sdk": "34.8.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.29.0",
@@ -2646,9 +2646,9 @@
       }
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "7.0.0",
+      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-7.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-9.1.0.tgz",
-      "integrity": "sha512-MOencXiW/gI5MuTtCNsuojjwT5DXCrjMqv9xOslJC9h2tPdLFFFMGr58dY5Lis4DRd9MRWcgrGowUIHOqieWTA==",
+      "integrity": "sha512-CtPoNcoRW6ehwxpRQAksG3tR+NJ7k4DV02nMFYTDwQtie1V4R8OTY77BjEIs97NOblhtS26jU8m1lWsOBEz0Og==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 10"
@@ -9117,13 +9117,13 @@
       "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA=="
     },
     "node_modules/matrix-js-sdk": {
-      "version": "34.5.0",
+      "version": "34.8.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-34.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-34.8.0.tgz",
-      "integrity": "sha512-pbp+IxAkSwGmefrlUGCrtrs3UWyqN2iWh4lKnJW+jFIlsksXq7A8vL4cS1z8LXmpcHQAg3mKNuj8n8uhm51t1A==",
+      "integrity": "sha512-zHYPE+vb6PP/dnRa6X3ktXf34yQg/Pct9r5CSP263hA4tRg5sKEVQgnY7KDADaABTvNMb9h7BZ5Xm9vjXsowNQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^7.0.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^9.0.0",
         "@matrix-org/olm": "3.2.15",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -56,7 +56,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "34.5.0",
+    "matrix-js-sdk": "34.8.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.29.0",

src/app/components/message/Reply.tsx

@@ -48,7 +48,6 @@ export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
 type ReplyProps = {
   mx: MatrixClient;
   room: Room;
-  mxidColor?: boolean;
   timelineSet?: EventTimelineSet | undefined;
   replyEventId: string;
   threadRootId?: string | undefined;
@@ -56,7 +55,7 @@ type ReplyProps = {
 };
 
 export const Reply = as<'div', ReplyProps>((_, ref) => {
-  const { mx, room, mxidColor, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
+  const { mx, room, timelineSet, replyEventId, threadRootId, onClick, ...props } = _;
   const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
     timelineSet?.findEventById(replyEventId)
   );
@@ -102,7 +101,7 @@ export const Reply = as<'div', ReplyProps>((_, ref) => {
       )}
       <ReplyLayout
         as="button"
-        userColor={sender && mxidColor ? colorMXID(sender) : undefined}
+        userColor={sender ? colorMXID(sender) : undefined}
         username={
           sender && (
             <Text size="T300" truncate>

src/app/features/message-search/MessageSearch.tsx

@@ -55,7 +55,6 @@ export function MessageSearch({
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -297,7 +296,6 @@ export function MessageSearch({
                     items={group.items}
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
-                    mxidColor={mxidColor}
                     onOpen={navigateRoom}
                   />
                 </VirtualTile>

src/app/features/message-search/SearchResultGroup.tsx

@@ -46,7 +46,6 @@ type SearchResultGroupProps = {
   items: ResultItem[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
-  mxidColor?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
 };
 export function SearchResultGroup({
@@ -55,7 +54,6 @@ export function SearchResultGroup({
   items,
   mediaAutoLoad,
   urlPreview,
-  mxidColor,
   onOpen,
 }: SearchResultGroupProps) {
   const mx = useMatrixClient();
@@ -83,15 +81,7 @@ export function SearchResultGroup({
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
       }),
-    [
+    [mx, room, linkifyOpts, highlightRegex, mentionClickHandler, spoilerClickHandler, useAuthentication]
-      mx,
-      room,
-      linkifyOpts,
-      highlightRegex,
-      mentionClickHandler,
-      spoilerClickHandler,
-      useAuthentication,
-    ]
   );
 
   const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
@@ -222,14 +212,7 @@ export function SearchResultGroup({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(
+                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
-                                mx,
-                                senderAvatarMxc,
-                                useAuthentication,
-                                48,
-                                48,
-                                'crop'
-                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -241,7 +224,7 @@ export function SearchResultGroup({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: mxidColor ? colorMXID(event.sender) : undefined }}>
+                    <Username style={{ color: colorMXID(event.sender) }}>
                       <Text as="span" truncate>
                         <b>{displayName}</b>
                       </Text>
@@ -263,7 +246,6 @@ export function SearchResultGroup({
                   <Reply
                     mx={mx}
                     room={room}
-                    mxidColor={mxidColor}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}

src/app/features/room/RoomInput.tsx

@@ -56,13 +56,7 @@ import {
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import {
+import { TUploadContent, encryptFile, getImageInfo, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-  TUploadContent,
-  encryptFile,
-  getImageInfo,
-  getMxIdLocalPart,
-  mxcUrlToHttp,
-} from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
@@ -126,7 +120,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
   ({ editor, fileDropContainerRef, roomId, room }, ref) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const commands = useCommands(mx, room);
@@ -506,7 +499,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   <Box direction="Column">
                     {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
                     <ReplyLayout
-                      userColor={mxidColor ? colorMXID(replyDraft.userId) : undefined}
+                      userColor={colorMXID(replyDraft.userId)}
                       username={
                         <Text size="T300" truncate>
                           <b>

src/app/features/room/RoomTimeline.tsx

@@ -424,7 +424,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const encryptedRoom = mx.isRoomEncrypted(room.roomId);
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
@@ -979,7 +978,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
-            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
@@ -997,7 +995,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 <Reply
                   mx={mx}
                   room={room}
-                  mxidColor={mxidColor}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
@@ -1053,7 +1050,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
-            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
@@ -1071,7 +1067,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 <Reply
                   mx={mx}
                   room={room}
-                  mxidColor={mxidColor}
                   timelineSet={timelineSet}
                   replyEventId={replyEventId}
                   threadRootId={threadRootId}
@@ -1164,7 +1159,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             mEvent={mEvent}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
-            mxidColor={mxidColor}
             collapse={collapse}
             highlight={highlighted}
             canDelete={canRedact || mEvent.getSender() === mx.getUserId()}

src/app/features/room/message/Message.tsx

@@ -51,12 +51,7 @@ import {
   getMemberAvatarMxc,
   getMemberDisplayName,
 } from '../../../utils/room';
-import {
+import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias, mxcUrlToHttp } from '../../../utils/matrix';
-  getCanonicalAliasOrRoomId,
-  getMxIdLocalPart,
-  isRoomAlias,
-  mxcUrlToHttp,
-} from '../../../utils/matrix';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@@ -240,9 +235,9 @@ export const MessageSourceCodeItem = as<
   const getContent = (evt: MatrixEvent) =>
     evt.isEncrypted()
       ? {
-          [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
+        [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
-          [`<== ORIGINAL_EVENT ==>`]: evt.event,
+        [`<== ORIGINAL_EVENT ==>`]: evt.event,
-        }
+      }
       : evt.event;
 
   const getText = (): string => {
@@ -620,7 +615,6 @@ export type MessageProps = {
   relations?: Relations;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
-  mxidColor?: boolean;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
   onReplyClick: MouseEventHandler<HTMLButtonElement>;
@@ -644,7 +638,6 @@ export const Message = as<'div', MessageProps>(
       relations,
       messageLayout,
       messageSpacing,
-      mxidColor,
       onUserClick,
       onUsernameClick,
       onReplyClick,
@@ -680,7 +673,7 @@ export const Message = as<'div', MessageProps>(
       >
         <Username
           as="button"
-          style={mxidColor ? { color: colorMXID(senderId) } : undefined}
+          style={{ color: colorMXID(senderId) }}
           data-user-id={senderId}
           onContextMenu={onUserClick}
           onClick={onUsernameClick}
@@ -959,26 +952,26 @@ export const Message = as<'div', MessageProps>(
                         </Box>
                         {((!mEvent.isRedacted() && canDelete) ||
                           mEvent.getSender() !== mx.getUserId()) && (
-                          <>
+                            <>
-                            <Line size="300" />
+                              <Line size="300" />
-                            <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
+                              <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                              {!mEvent.isRedacted() && canDelete && (
+                                {!mEvent.isRedacted() && canDelete && (
-                                <MessageDeleteItem
+                                  <MessageDeleteItem
-                                  room={room}
+                                    room={room}
-                                  mEvent={mEvent}
+                                    mEvent={mEvent}
-                                  onClose={closeMenu}
+                                    onClose={closeMenu}
-                                />
+                                  />
-                              )}
+                                )}
-                              {mEvent.getSender() !== mx.getUserId() && (
+                                {mEvent.getSender() !== mx.getUserId() && (
-                                <MessageReportItem
+                                  <MessageReportItem
-                                  room={room}
+                                    room={room}
-                                  mEvent={mEvent}
+                                    mEvent={mEvent}
-                                  onClose={closeMenu}
+                                    onClose={closeMenu}
-                                />
+                                  />
-                              )}
+                                )}
-                            </Box>
+                              </Box>
-                          </>
+                            </>
-                        )}
+                          )}
                       </Menu>
                     </FocusTrap>
                   }
@@ -1102,26 +1095,26 @@ export const Event = as<'div', EventProps>(
                         </Box>
                         {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
                           (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (
-                          <>
+                            <>
-                            <Line size="300" />
+                              <Line size="300" />
-                            <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
+                              <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                              {!mEvent.isRedacted() && canDelete && (
+                                {!mEvent.isRedacted() && canDelete && (
-                                <MessageDeleteItem
+                                  <MessageDeleteItem
-                                  room={room}
+                                    room={room}
-                                  mEvent={mEvent}
+                                    mEvent={mEvent}
-                                  onClose={closeMenu}
+                                    onClose={closeMenu}
-                                />
+                                  />
-                              )}
+                                )}
-                              {mEvent.getSender() !== mx.getUserId() && (
+                                {mEvent.getSender() !== mx.getUserId() && (
-                                <MessageReportItem
+                                  <MessageReportItem
-                                  room={room}
+                                    room={room}
-                                  mEvent={mEvent}
+                                    mEvent={mEvent}
-                                  onClose={closeMenu}
+                                    onClose={closeMenu}
-                                />
+                                  />
-                              )}
+                                )}
-                            </Box>
+                              </Box>
-                          </>
+                            </>
-                        )}
+                          )}
                       </Menu>
                     </FocusTrap>
                   }

src/app/hooks/useMentionClickHandler.ts

@@ -14,6 +14,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
+      evt.stopPropagation();
       evt.preventDefault();
       const target = evt.currentTarget;
       const mentionId = target.getAttribute('data-mention-id');

src/app/organisms/settings/Settings.jsx

@@ -54,7 +54,6 @@ function AppearanceSection() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [mxidColor, setMXIDColor] = useSetting(settingsAtom, 'mxidColor');
   const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [pageZoom, setPageZoom] = useSetting(settingsAtom, 'pageZoom');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
@@ -190,11 +189,6 @@ function AppearanceSection() {
             />
           }
         />
-        <SettingTile
-          title="Username Color"
-          options={<Toggle isActive={mxidColor} onToggle={() => setMXIDColor(!mxidColor)} />}
-          content={<Text variant="b3">Color username with matrix userID.</Text>}
-        />
         <SettingTile
           title="Use ENTER for Newline"
           options={

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.2.1
+        v4.2.2
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/WelcomePage.tsx

@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.2.1
+                  v4.2.2
                 </a>
               </span>
             }

src/app/pages/client/inbox/Notifications.tsx

@@ -182,7 +182,6 @@ type RoomNotificationsGroupProps = {
   notifications: INotification[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
-  mxidColor?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
 };
 function RoomNotificationsGroupComp({
@@ -190,7 +189,6 @@ function RoomNotificationsGroupComp({
   notifications,
   mediaAutoLoad,
   urlPreview,
-  mxidColor,
   onOpen,
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
@@ -429,14 +427,7 @@ function RoomNotificationsGroupComp({
                         userId={event.sender}
                         src={
                           senderAvatarMxc
-                            ? mxcUrlToHttp(
+                            ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
-                                mx,
-                                senderAvatarMxc,
-                                useAuthentication,
-                                48,
-                                48,
-                                'crop'
-                              ) ?? undefined
                             : undefined
                         }
                         alt={displayName}
@@ -448,7 +439,7 @@ function RoomNotificationsGroupComp({
               >
                 <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
                   <Box gap="200" alignItems="Baseline">
-                    <Username style={{ color: mxidColor ? colorMXID(event.sender) : undefined }}>
+                    <Username style={{ color: colorMXID(event.sender) }}>
                       <Text as="span" truncate>
                         <b>{displayName}</b>
                       </Text>
@@ -470,7 +461,6 @@ function RoomNotificationsGroupComp({
                   <Reply
                     mx={mx}
                     room={room}
-                    mxidColor={mxidColor}
                     replyEventId={replyEventId}
                     threadRootId={threadRootId}
                     onClick={handleOpenClick}
@@ -502,7 +492,6 @@ export function Notifications() {
   const mx = useMatrixClient();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [mxidColor] = useSetting(settingsAtom, 'mxidColor');
   const screenSize = useScreenSizeContext();
 
   const { navigateRoom } = useRoomNavigate();
@@ -659,7 +648,6 @@ export function Notifications() {
                         <RoomNotificationsGroupComp
                           room={groupRoom}
                           notifications={group.notifications}
-                          mxidColor={mxidColor}
                           mediaAutoLoad={mediaAutoLoad}
                           urlPreview={urlPreview}
                           onOpen={navigateRoom}

src/app/state/settings.ts

@@ -17,7 +17,6 @@ export interface Settings {
   enterForNewline: boolean;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
-  mxidColor: boolean;
   hideMembershipEvents: boolean;
   hideNickAvatarEvents: boolean;
   mediaAutoLoad: boolean;
@@ -42,7 +41,6 @@ const defaultSettings: Settings = {
   enterForNewline: false,
   messageLayout: 0,
   messageSpacing: '400',
-  mxidColor: true,
   hideMembershipEvents: false,
   hideNickAvatarEvents: true,
   mediaAutoLoad: true,

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '4.2.1',
+  version: '4.2.2',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',

src/config.css.ts

@@ -5,7 +5,7 @@ export const onLightFontWeight = createTheme(config.fontWeight, {
   W100: '100',
   W200: '200',
   W300: '300',
-  W400: '420',
+  W400: '400',
   W500: '500',
   W600: '600',
   W700: '700',
@@ -17,10 +17,10 @@ export const onDarkFontWeight = createTheme(config.fontWeight, {
   W100: '100',
   W200: '200',
   W300: '300',
-  W400: '350',
+  W400: '400',
-  W500: '450',
+  W500: '500',
-  W600: '550',
+  W600: '600',
-  W700: '650',
+  W700: '700',
-  W800: '750',
+  W800: '800',
-  W900: '850',
+  W900: '900',
 });

src/sw.ts

@@ -23,9 +23,14 @@ function fetchConfig(token?: string): RequestInit | undefined {
     headers: {
       Authorization: `Bearer ${token}`,
     },
+    cache: 'default',
   };
 }
 
+self.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(clients.claim());
+});
+
 self.addEventListener('fetch', (event: FetchEvent) => {
   const { url, method } = event.request;
   if (method !== 'GET') return;