ShowTimeoutDetails: Questionable refactor

This commit is contained in:
Sqaaakoi 2024-09-04 05:38:20 +12:00
parent cfb4972394
commit 1b9ea1f413
No known key found for this signature in database
3 changed files with 62 additions and 28 deletions

View file

@ -86,7 +86,7 @@ export const TimeoutReasonStore = proxyLazy(() => {
reason: entry.reason,
moderator: isAutomod ? undefined : entry.user_id,
automod: isAutomod,
automodRuleName: isAutomod ? entry?.options.auto_moderation_rule_name : undefined,
automodRuleName: isAutomod ? entry?.options?.auto_moderation_rule_name : undefined,
automodChannelId: isAutomod ? entry?.options?.channel_id : undefined,
expires: member?.communicationDisabledUntil,
loading: false

View file

@ -7,14 +7,14 @@
import { SafetyIcon } from "@components/Icons";
import { classes, Margins } from "@utils/index";
import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
import { Button, Dialog, GuildMemberStore, GuildStore, i18n, Parser, PermissionsBits, PermissionStore, Text, Tooltip, UserStore, useState, useStateFromStores } from "@webpack/common";
import { Button, Dialog, GuildMemberStore, GuildStore, i18n, Parser, PermissionsBits, PermissionStore, Text, UserStore, useState, useStateFromStores } from "@webpack/common";
import { Message } from "discord-types/general";
import { CountDown } from "..";
import { useTimeoutReason } from "../TimeoutReasonStore";
import TimeoutDetailsRow from "./TimeoutDetailsRow";
const PopoutClasses = findByPropsLazy("container", "scroller", "list");
const rowClasses = findByPropsLazy("row", "rowIcon", "rowGuildName");
const TimeoutIcon = findComponentByCodeLazy("M12 23c.08 0 .14-.08.11-.16a2.88 2.88 0 0 1 .29-2.31l2.2-3.85");
const ChannelIcon = findComponentByCodeLazy("h4.97l-.8 4.84a1 1 0 0 0 1.97.32l.86-5.16H20a1");
@ -42,40 +42,48 @@ export default function TimeoutDetailsPopout({ closePopout, guildId, userId, mes
Timeout details for {user.username}
</Text>
<div className={Margins.bottom8} />
<div className={rowClasses.row}>
<Tooltip text="Remaining time in timeout">
{p => <TimeoutIcon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
<TimeoutDetailsRow
description="Remaining time in timeout"
icon={TimeoutIcon}
>
<CountDown
deadline={new Date(member.communicationDisabledUntil!)}
showUnits
stopAtOneSec
/>
</div>
{(reason.moderator || reason.automod) && <div className={rowClasses.row}>
<Tooltip text="Moderator">
{p => <SafetyIcon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
</TimeoutDetailsRow>
<TimeoutDetailsRow
description="Moderator"
icon={SafetyIcon}
condition={!!(reason.moderator || reason.automod)}
>
{reason.automod ? i18n.Messages.GUILD_SETTINGS_AUTOMOD_TITLE : parse(`<@${reason.moderator}>`)}
</div>}
{(reason.automodChannelId) && <div className={rowClasses.row}>
<Tooltip text="Channel where offending message was sent">
{p => <ChannelIcon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
</TimeoutDetailsRow>
<TimeoutDetailsRow
description="Channel where offending message was sent"
icon={ChannelIcon}
condition={!!reason.automodChannelId}
>
{parse(`<#${reason.automodChannelId}>`)}
</div>}
{(reason.automodRuleName) && <div className={rowClasses.row}>
<Tooltip text="AutoMod Rule">
{p => <CustomAutoModRuleIcon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
</TimeoutDetailsRow>
<TimeoutDetailsRow
description="AutoMod Rule"
icon={CustomAutoModRuleIcon}
>
{reason.automodRuleName}
</div>}
{(reason.reason) && <div className={rowClasses.row}>
<Tooltip text="Reason">
{p => <MessageIcon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
</TimeoutDetailsRow>
<TimeoutDetailsRow
description="AutoMod Rule"
icon={CustomAutoModRuleIcon}
>
{reason.reason}
</div>}
</TimeoutDetailsRow>
{hasModerationPermission && <div className="vc-std-popout-button-wrapper"><Button
className="vc-std-popout-button"
size={Button.Sizes.SMALL}

View file

@ -0,0 +1,26 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2024 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { findByPropsLazy } from "@webpack";
import { Tooltip } from "@webpack/common";
import { JSXElementConstructor, ReactNode } from "react";
const rowClasses = findByPropsLazy("row", "rowIcon", "rowGuildName");
export default function TimeoutDetailsRow(props: {
description: ReactNode;
icon: JSXElementConstructor<any>;
children: ReactNode;
condition?: boolean | string;
}) {
if (props.condition === undefined ? !props.children : !props.condition) return null;
return <div className={rowClasses.row}>
<Tooltip text={props.description}>
{p => <props.icon {...p} className={rowClasses.rowIcon} height="24" width="24" />}
</Tooltip>
{props.children}
</div>;
}