mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-29 01:28:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add mxid color toggle

Browse source
This commit is contained in:
Ajay Bura 2024-09-20 11:20:46 +05:30
parent 21164a9b61
commit c69236ff79
9 changed files with 115 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/components/message/Reply.tsx
View file

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

2
src/app/features/message-search/MessageSearch.tsx
View file

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

24
src/app/features/message-search/SearchResultGroup.tsx
View file

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

11
src/app/features/room/RoomInput.tsx
View file

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

6
src/app/features/room/RoomTimeline.tsx
View file

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

97
src/app/features/room/message/Message.tsx
View file

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

6
src/app/organisms/settings/Settings.jsx
View file

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

16
src/app/pages/client/inbox/Notifications.tsx
View file

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

2
src/app/state/settings.ts
View file

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