Use tabWidth 4 without actual tabs.

src/components/navigation/items/ButtonItem.tsx

@@ -20,204 +20,204 @@ import IconButton from "../../ui/IconButton";
 import { Children } from "../../../types/Preact";
 
 type CommonProps = Omit<
-	JSX.HTMLAttributes<HTMLDivElement>,
-	"children" | "as"
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as"
 > & {
-	active?: boolean;
-	alert?: "unread" | "mention";
-	alertCount?: number;
+    active?: boolean;
+    alert?: "unread" | "mention";
+    alertCount?: number;
 };
 
 type UserProps = CommonProps & {
-	user: Users.User;
-	context?: Channels.Channel;
-	channel?: Channels.DirectMessageChannel;
+    user: Users.User;
+    context?: Channels.Channel;
+    channel?: Channels.DirectMessageChannel;
 };
 
 export function UserButton(props: UserProps) {
-	const { active, alert, alertCount, user, context, channel, ...divProps } =
-		props;
-	const { openScreen } = useIntermediate();
+    const { active, alert, alertCount, user, context, channel, ...divProps } =
+        props;
+    const { openScreen } = useIntermediate();
 
-	return (
-		<div
-			{...divProps}
-			className={classNames(styles.item, styles.user)}
-			data-active={active}
-			data-alert={typeof alert === "string"}
-			data-online={
-				typeof channel !== "undefined" ||
-				(user.online &&
-					user.status?.presence !== Users.Presence.Invisible)
-			}
-			onContextMenu={attachContextMenu("Menu", {
-				user: user._id,
-				channel: channel?._id,
-				unread: alert,
-				contextualChannel: context?._id,
-			})}>
-			<UserIcon
-				className={styles.avatar}
-				target={user}
-				size={32}
-				status
-			/>
-			<div className={styles.name}>
-				<div>{user.username}</div>
-				{
-					<div className={styles.subText}>
-						{channel?.last_message && alert ? (
-							channel.last_message.short
-						) : (
-							<UserStatus user={user} />
-						)}
-					</div>
-				}
-			</div>
-			<div className={styles.button}>
-				{context?.channel_type === "Group" &&
-					context.owner === user._id && (
-						<Localizer>
-							<Tooltip
-								content={<Text id="app.main.groups.owner" />}>
-								<Crown size={20} />
-							</Tooltip>
-						</Localizer>
-					)}
-				{alert && (
-					<div className={styles.alert} data-style={alert}>
-						{alertCount}
-					</div>
-				)}
-				{!isTouchscreenDevice && channel && (
-					<IconButton
-						className={styles.icon}
-						onClick={(e) =>
-							stopPropagation(e) &&
-							openScreen({
-								id: "special_prompt",
-								type: "close_dm",
-								target: channel,
-							})
-						}>
-						<X size={24} />
-					</IconButton>
-				)}
-			</div>
-		</div>
-	);
+    return (
+        <div
+            {...divProps}
+            className={classNames(styles.item, styles.user)}
+            data-active={active}
+            data-alert={typeof alert === "string"}
+            data-online={
+                typeof channel !== "undefined" ||
+                (user.online &&
+                    user.status?.presence !== Users.Presence.Invisible)
+            }
+            onContextMenu={attachContextMenu("Menu", {
+                user: user._id,
+                channel: channel?._id,
+                unread: alert,
+                contextualChannel: context?._id,
+            })}>
+            <UserIcon
+                className={styles.avatar}
+                target={user}
+                size={32}
+                status
+            />
+            <div className={styles.name}>
+                <div>{user.username}</div>
+                {
+                    <div className={styles.subText}>
+                        {channel?.last_message && alert ? (
+                            channel.last_message.short
+                        ) : (
+                            <UserStatus user={user} />
+                        )}
+                    </div>
+                }
+            </div>
+            <div className={styles.button}>
+                {context?.channel_type === "Group" &&
+                    context.owner === user._id && (
+                        <Localizer>
+                            <Tooltip
+                                content={<Text id="app.main.groups.owner" />}>
+                                <Crown size={20} />
+                            </Tooltip>
+                        </Localizer>
+                    )}
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
+                )}
+                {!isTouchscreenDevice && channel && (
+                    <IconButton
+                        className={styles.icon}
+                        onClick={(e) =>
+                            stopPropagation(e) &&
+                            openScreen({
+                                id: "special_prompt",
+                                type: "close_dm",
+                                target: channel,
+                            })
+                        }>
+                        <X size={24} />
+                    </IconButton>
+                )}
+            </div>
+        </div>
+    );
 }
 
 type ChannelProps = CommonProps & {
-	channel: Channels.Channel & { unread?: string };
-	user?: Users.User;
-	compact?: boolean;
+    channel: Channels.Channel & { unread?: string };
+    user?: Users.User;
+    compact?: boolean;
 };
 
 export function ChannelButton(props: ChannelProps) {
-	const { active, alert, alertCount, channel, user, compact, ...divProps } =
-		props;
+    const { active, alert, alertCount, channel, user, compact, ...divProps } =
+        props;
 
-	if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
-	if (channel.channel_type === "DirectMessage") {
-		if (typeof user === "undefined") throw "No user provided.";
-		return <UserButton {...{ active, alert, channel, user }} />;
-	}
+    if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
+    if (channel.channel_type === "DirectMessage") {
+        if (typeof user === "undefined") throw "No user provided.";
+        return <UserButton {...{ active, alert, channel, user }} />;
+    }
 
-	const { openScreen } = useIntermediate();
+    const { openScreen } = useIntermediate();
 
-	return (
-		<div
-			{...divProps}
-			data-active={active}
-			data-alert={typeof alert === "string"}
-			aria-label={{}} /*FIXME: ADD ARIA LABEL*/
-			className={classNames(styles.item, { [styles.compact]: compact })}
-			onContextMenu={attachContextMenu("Menu", {
-				channel: channel._id,
-				unread: typeof channel.unread !== "undefined",
-			})}>
-			<ChannelIcon
-				className={styles.avatar}
-				target={channel}
-				size={compact ? 24 : 32}
-			/>
-			<div className={styles.name}>
-				<div>{channel.name}</div>
-				{channel.channel_type === "Group" && (
-					<div className={styles.subText}>
-						{channel.last_message && alert ? (
-							channel.last_message.short
-						) : (
-							<Text
-								id="quantities.members"
-								plural={channel.recipients.length}
-								fields={{ count: channel.recipients.length }}
-							/>
-						)}
-					</div>
-				)}
-			</div>
-			<div className={styles.button}>
-				{alert && (
-					<div className={styles.alert} data-style={alert}>
-						{alertCount}
-					</div>
-				)}
-				{!isTouchscreenDevice && channel.channel_type === "Group" && (
-					<IconButton
-						className={styles.icon}
-						onClick={() =>
-							openScreen({
-								id: "special_prompt",
-								type: "leave_group",
-								target: channel,
-							})
-						}>
-						<X size={24} />
-					</IconButton>
-				)}
-			</div>
-		</div>
-	);
+    return (
+        <div
+            {...divProps}
+            data-active={active}
+            data-alert={typeof alert === "string"}
+            aria-label={{}} /*FIXME: ADD ARIA LABEL*/
+            className={classNames(styles.item, { [styles.compact]: compact })}
+            onContextMenu={attachContextMenu("Menu", {
+                channel: channel._id,
+                unread: typeof channel.unread !== "undefined",
+            })}>
+            <ChannelIcon
+                className={styles.avatar}
+                target={channel}
+                size={compact ? 24 : 32}
+            />
+            <div className={styles.name}>
+                <div>{channel.name}</div>
+                {channel.channel_type === "Group" && (
+                    <div className={styles.subText}>
+                        {channel.last_message && alert ? (
+                            channel.last_message.short
+                        ) : (
+                            <Text
+                                id="quantities.members"
+                                plural={channel.recipients.length}
+                                fields={{ count: channel.recipients.length }}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+            <div className={styles.button}>
+                {alert && (
+                    <div className={styles.alert} data-style={alert}>
+                        {alertCount}
+                    </div>
+                )}
+                {!isTouchscreenDevice && channel.channel_type === "Group" && (
+                    <IconButton
+                        className={styles.icon}
+                        onClick={() =>
+                            openScreen({
+                                id: "special_prompt",
+                                type: "leave_group",
+                                target: channel,
+                            })
+                        }>
+                        <X size={24} />
+                    </IconButton>
+                )}
+            </div>
+        </div>
+    );
 }
 
 type ButtonProps = CommonProps & {
-	onClick?: () => void;
-	children?: Children;
-	className?: string;
-	compact?: boolean;
+    onClick?: () => void;
+    children?: Children;
+    className?: string;
+    compact?: boolean;
 };
 
 export default function ButtonItem(props: ButtonProps) {
-	const {
-		active,
-		alert,
-		alertCount,
-		onClick,
-		className,
-		children,
-		compact,
-		...divProps
-	} = props;
+    const {
+        active,
+        alert,
+        alertCount,
+        onClick,
+        className,
+        children,
+        compact,
+        ...divProps
+    } = props;
 
-	return (
-		<div
-			{...divProps}
-			className={classNames(
-				styles.item,
-				{ [styles.compact]: compact, [styles.normal]: !compact },
-				className,
-			)}
-			onClick={onClick}
-			data-active={active}
-			data-alert={typeof alert === "string"}>
-			<div className={styles.content}>{children}</div>
-			{alert && (
-				<div className={styles.alert} data-style={alert}>
-					{alertCount}
-				</div>
-			)}
-		</div>
-	);
+    return (
+        <div
+            {...divProps}
+            className={classNames(
+                styles.item,
+                { [styles.compact]: compact, [styles.normal]: !compact },
+                className,
+            )}
+            onClick={onClick}
+            data-active={active}
+            data-alert={typeof alert === "string"}>
+            <div className={styles.content}>{children}</div>
+            {alert && (
+                <div className={styles.alert} data-style={alert}>
+                    {alertCount}
+                </div>
+            )}
+        </div>
+    );
 }