mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-27 08:41:52 +00:00
Code Issues Actions 1 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 = {
mx: MatrixClient;
room: Room;
mxidColor?: boolean;
timelineSet?: EventTimelineSet | undefined;
replyEventId: string;
threadRootId?: string | undefined;
@ -55,7 +56,7 @@ type ReplyProps = {
};
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>(
timelineSet?.findEventById(replyEventId)
);
@ -101,7 +102,7 @@ export const Reply = as<'div', ReplyProps>((_, ref) => {
)}
<ReplyLayout
as="button"
userColor={sender ? colorMXID(sender) : undefined}
userColor={sender && mxidColor ? colorMXID(sender) : undefined}
username={
sender && (
<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 [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();
@ -296,6 +297,7 @@ export function MessageSearch({
items={group.items}
mediaAutoLoad={mediaAutoLoad}
urlPreview={urlPreview}
mxidColor={mxidColor}
onOpen={navigateRoom}
/>
</VirtualTile>

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

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

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

@ -56,7 +56,13 @@ import {
} from '../../components/editor';
import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
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 { useFilePicker } from '../../hooks/useFilePicker';
import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
@ -120,6 +126,7 @@ 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);
@ -499,7 +506,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
<Box direction="Column">
{replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
<ReplyLayout
userColor={colorMXID(replyDraft.userId)}
userColor={mxidColor ? colorMXID(replyDraft.userId) : undefined}
username={
<Text size="T300" truncate>
<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 [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');
@ -978,6 +979,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
mEvent={mEvent}
messageSpacing={messageSpacing}
messageLayout={messageLayout}
mxidColor={mxidColor}
collapse={collapse}
highlight={highlighted}
edit={editId === mEventId}
@ -995,6 +997,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
<Reply
mx={mx}
room={room}
mxidColor={mxidColor}
timelineSet={timelineSet}
replyEventId={replyEventId}
threadRootId={threadRootId}
@ -1050,6 +1053,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
mEvent={mEvent}
messageSpacing={messageSpacing}
messageLayout={messageLayout}
mxidColor={mxidColor}
collapse={collapse}
highlight={highlighted}
edit={editId === mEventId}
@ -1067,6 +1071,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
<Reply
mx={mx}
room={room}
mxidColor={mxidColor}
timelineSet={timelineSet}
replyEventId={replyEventId}
threadRootId={threadRootId}
@ -1159,6 +1164,7 @@ 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()}

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

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

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

@ -54,6 +54,7 @@ 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');
@ -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
title="Use ENTER for Newline"
options={

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

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

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

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