feat(admin): Mod panel tweaks + improved title ID input control

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/icon.tsx → apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrIcon.tsx

@@ -1,12 +1,12 @@
 import cx from 'classnames';
 import type { ReactNode } from 'react';
-import type { IconProps } from '@/services/juxt-web/views/web/components/icon';
+import type { IconProps } from '@/services/juxt-web/views/web/components/ui/WebIcon';
 
 export function CtrIcon(props: IconProps): ReactNode {
-	const baseClass = props.baseClass ?? 'icon';
+	const type = props.type ?? 'icon';
 	return (
-		<a href={props.href} className={cx(`${baseClass}-container`, props.className)} data-pjax="#body">
-			<img src={props.src} className={baseClass} />
+		<a href={props.href} className={cx(`${type}-container`, props.className)} data-pjax="#body">
+			<img src={props.src} className={type} />
 		</a>
 	);
 }

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/mii-icon.tsx → apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrMiiIcon.tsx

@@ -1,19 +1,19 @@
 import { utils } from '@/services/juxt-web/views/utils';
-import { CtrIcon } from '@/services/juxt-web/views/ctr/components/icon';
+import { CtrIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrIcon';
 import type { ReactNode } from 'react';
-import type { MiiIconProps } from '@/services/juxt-web/views/web/components/mii-icon';
+import type { MiiIconProps } from '@/services/juxt-web/views/web/components/ui/WebMiiIcon';
 
 export function CtrMiiIcon(props: MiiIconProps): ReactNode {
 	const url = props.face_url ?? utils.cdn(props.ctx, `/mii/${props.pid}/normal_face.png`);
 	const href = `/users/${props.pid}`;
-	const baseClass = !props.big ? 'mii-icon' : undefined;
+	const type = props.type ?? 'mii-icon';
 
 	return (
 		<CtrIcon
 			ctx={props.ctx}
 			href={href}
 			src={url}
-			baseClass={baseClass}
+			type={type}
 			className={props.className}
 		>
 		</CtrIcon>

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messageThread.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { CtrPageBody, CtrRoot } from '@/services/juxt-web/views/ctr/root';
 import { CtrNewPostView } from '@/services/juxt-web/views/ctr/newPostView';
 import { utils } from '@/services/juxt-web/views/utils';
-import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/mii-icon';
+import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrMiiIcon';
 import type { ReactNode } from 'react';
 import type { MessageThreadItemProps, MessageThreadViewProps } from '@/services/juxt-web/views/web/messageThread';
 

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messages.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/mii-icon';
+import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrMiiIcon';
 import { humanFromNow } from '@/util';
 import type { ReactNode } from 'react';
 import type {
@@ -40,7 +40,7 @@ export function CtrMessagesView(props: MessagesViewProps): ReactNode {
 									<CtrMiiIcon
 										ctx={props.ctx}
 										pid={userObj.pid}
-										big={true}
+										type="icon"
 										className={cx({ verified: userObj.official })}
 									>
 									</CtrMiiIcon>

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/notificationListView.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { CtrPageBody, CtrRoot } from '@/services/juxt-web/views/ctr/root';
-import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/mii-icon';
-import { CtrIcon } from '@/services/juxt-web/views/ctr/components/icon';
+import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrMiiIcon';
+import { CtrIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrIcon';
 import { humanFromNow } from '@/util';
 import type { ReactNode } from 'react';
 import type { NotificationItemProps, NotificationListViewProps, NotificationWrapperViewProps } from '@/services/juxt-web/views/web/notificationListView';
@@ -12,7 +12,7 @@ function CtrNotificationItem(props: NotificationItemProps): ReactNode {
 		const NickName = ({ userId }: { userId: string | number | null | undefined }): ReactNode => <span className="nick-name">{userId ? props.ctx.usersMap.get(Number(userId)) : null}</span>;
 		return (
 			<>
-				<CtrMiiIcon ctx={props.ctx} pid={Number(notif.objectID)} big={true}></CtrMiiIcon>
+				<CtrMiiIcon ctx={props.ctx} pid={Number(notif.objectID)} type="icon"></CtrMiiIcon>
 				<div className="body">
 					<p>
 						{notif.users.length === 1

apps/juxtaposition-ui/src/services/juxt-web/views/ctr/post.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import moment from 'moment';
 import { utils } from '@/services/juxt-web/views/utils';
-import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/mii-icon';
+import { CtrMiiIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrMiiIcon';
 import type { ReactNode } from 'react';
 import type { PostScreenshotProps, PostViewProps } from '@/services/juxt-web/views/web/post';
 

apps/juxtaposition-ui/src/services/juxt-web/views/portal/communityView.tsx

@@ -4,7 +4,7 @@ import { PortalPageBody, PortalRoot } from '@/services/juxt-web/views/portal/roo
 import { PortalNavBar } from '@/services/juxt-web/views/portal/navbar';
 import { PortalNewPostView } from '@/services/juxt-web/views/portal/newPostView';
 import { PortalPostListClosedView } from '@/services/juxt-web/views/portal/postList';
-import { PortalIcon } from '@/services/juxt-web/views/portal/icons';
+import { PortalUIIcon } from '@/services/juxt-web/views/portal/components/ui/PortalUIIcon';
 import type { ReactNode } from 'react';
 import type { CommunityViewProps } from '@/services/juxt-web/views/web/communityView';
 
@@ -71,13 +71,13 @@ export function PortalCommunityView(props: CommunityViewProps): ReactNode {
 						<span className="title">{community.name}</span>
 						<span className="text">
 							<span>
-								<PortalIcon name="posts" />
+								<PortalUIIcon name="posts" />
 								{' '}
 								{props.totalPosts}
 							</span>
 							<span>
 								{' | '}
-								<PortalIcon name="followers" />
+								<PortalUIIcon name="followers" />
 								{' '}
 								<span id="followers">
 									{community.followers}

apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalIcon.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import type { IconProps } from '@/services/juxt-web/views/web/components/ui/WebIcon';
+
+export function PortalIcon(props: IconProps): ReactNode {
+	const type = props.type ?? 'icon';
+	return (
+		<a href={props.href} className={cx(`${type}-container`, props.className)} data-pjax="#body">
+			<img src={props.src} className={type} />
+		</a>
+	);
+}

apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/mii-icon.tsx → apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalMiiIcon.tsx

@@ -1,21 +1,21 @@
 import { utils } from '@/services/juxt-web/views/utils';
-import { PortalIconView } from '@/services/juxt-web/views/portal/components/icon';
+import { PortalIcon } from '@/services/juxt-web/views/portal/components/ui/PortalIcon';
 import type { ReactNode } from 'react';
-import type { MiiIconProps } from '@/services/juxt-web/views/web/components/mii-icon';
+import type { MiiIconProps } from '@/services/juxt-web/views/web/components/ui/WebMiiIcon';
 
 export function PortalMiiIcon(props: MiiIconProps): ReactNode {
 	const url = props.face_url ?? utils.cdn(props.ctx, `/mii/${props.pid}/normal_face.png`);
 	const href = `/users/${props.pid}`;
-	const baseClass = !props.big ? 'mii-icon' : undefined;
+	const type = props.type ?? 'mii-icon';
 
 	return (
-		<PortalIconView
+		<PortalIcon
 			ctx={props.ctx}
 			href={href}
 			src={url}
-			baseClass={baseClass}
+			type={type}
 			className={props.className}
 		>
-		</PortalIconView>
+		</PortalIcon>
 	);
 }

apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalUIIcon.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable no-restricted-imports -- raw import plugin does not support path aliases */
+import devBadgeIcon from '../../assets/dev_badge.svg?raw';
+import modBadgeIcon from '../../assets/mod_badge.svg?raw';
+import starBadgeIcon from '../../assets/star_badge.svg?raw';
+import testerBadgeIcon from '../../assets/tester_badge.svg?raw';
+import birthdayIcon from '../../assets/birthday.svg?raw';
+import countryIcon from '../../assets/country.svg?raw';
+import followersIcon from '../../assets/followers.svg?raw';
+import postsIcon from '../../assets/posts.svg?raw';
+import skillIcon from '../../assets/skill.svg?raw';
+import topicIcon from '../../assets/topic.svg?raw';
+import type { ReactNode } from 'react';
+
+const icons = {
+	'dev-badge': devBadgeIcon,
+	'mod-badge': modBadgeIcon,
+	'star-badge': starBadgeIcon,
+	'tester-badge': testerBadgeIcon,
+	'birthday': birthdayIcon,
+	'country': countryIcon,
+	'followers': followersIcon,
+	'posts': postsIcon,
+	'skill': skillIcon,
+	'topic': topicIcon
+} as const;
+
+type PortalUIIcon = keyof typeof icons;
+
+export type PortalUIIconProps = {
+	name: PortalUIIcon;
+};
+
+export function PortalUIIcon(props: PortalUIIconProps): ReactNode {
+	const iconHtml = icons[props.name];
+	return <span style={{ lineHeight: '0.7' }} dangerouslySetInnerHTML={{ __html: iconHtml }} />;
+}

apps/juxtaposition-ui/src/services/juxt-web/views/portal/notificationListView.tsx

@@ -2,8 +2,8 @@ import cx from 'classnames';
 import { PortalPageBody, PortalRoot } from '@/services/juxt-web/views/portal/root';
 import { PortalNavBar } from '@/services/juxt-web/views/portal/navbar';
 import { humanFromNow } from '@/util';
-import { PortalMiiIcon } from '@/services/juxt-web/views/portal/components/mii-icon';
-import { PortalIconView } from '@/services/juxt-web/views/portal/components/icon';
+import { PortalMiiIcon } from '@/services/juxt-web/views/portal/components/ui/PortalMiiIcon';
+import { PortalIcon } from '@/services/juxt-web/views/portal/components/ui/PortalIcon';
 import type { ReactNode } from 'react';
 import type { NotificationItemProps, NotificationListViewProps, NotificationWrapperViewProps } from '@/services/juxt-web/views/web/notificationListView';
 
@@ -13,7 +13,7 @@ function PortalNotificationItem(props: NotificationItemProps): ReactNode {
 		const NickName = ({ userId }: { userId: string | number | null | undefined }): ReactNode => <span className="nick-name">{userId ? props.ctx.usersMap.get(Number(userId)) : null}</span>;
 		return (
 			<>
-				<PortalMiiIcon ctx={props.ctx} pid={Number(notif.objectID)} big={true}></PortalMiiIcon>
+				<PortalMiiIcon ctx={props.ctx} pid={Number(notif.objectID)} type="icon"></PortalMiiIcon>
 				<div className="body">
 					<p className="text">
 						{notif.users.length === 1
@@ -63,7 +63,7 @@ function PortalNotificationItem(props: NotificationItemProps): ReactNode {
 	if (notif.type === 'notice') {
 		return (
 			<>
-				<PortalIconView ctx={props.ctx} href={notif.link ?? undefined} src={notif.image ?? ''}></PortalIconView>
+				<PortalIcon ctx={props.ctx} href={notif.link ?? undefined} src={notif.image ?? ''}></PortalIcon>
 				<div className="body">
 					<a href={notif.link ?? '#'}>
 						<span className="text">

apps/juxtaposition-ui/src/services/juxt-web/views/portal/post.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import moment from 'moment';
 import { utils } from '@/services/juxt-web/views/utils';
-import { PortalIcon } from '@/services/juxt-web/views/portal/icons';
+import { PortalUIIcon } from '@/services/juxt-web/views/portal/components/ui/PortalUIIcon';
 import type { ReactNode } from 'react';
 import type { PostScreenshotProps, PostViewProps } from '@/services/juxt-web/views/web/post';
 
@@ -68,7 +68,7 @@ export function PortalPostView(props: PostViewProps): ReactNode {
 							? (
 									<a href={utils.url('/topics', { topic_tag: post.topic_tag })} data-pjax="#body">
 										{/* TODO this has been modified due to inbalanced tags */}
-										<PortalIcon name="topic" />
+										<PortalUIIcon name="topic" />
 										<span className="tags">{post.topic_tag}</span>
 									</a>
 								)

apps/juxtaposition-ui/src/services/juxt-web/views/portal/userPageView.tsx

@@ -3,7 +3,7 @@ import moment from 'moment';
 import { utils } from '@/services/juxt-web/views/utils';
 import { PortalPageBody, PortalRoot } from '@/services/juxt-web/views/portal/root';
 import { PortalNavBar } from '@/services/juxt-web/views/portal/navbar';
-import { PortalIcon } from '@/services/juxt-web/views/portal/icons';
+import { PortalUIIcon } from '@/services/juxt-web/views/portal/components/ui/PortalUIIcon';
 import type { ReactNode } from 'react';
 import type { UserPageViewProps } from '@/services/juxt-web/views/web/userPageView';
 
@@ -16,23 +16,23 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac
 		tierPart = (
 			<span className="supporter-star mario">
 				{' | '}
-				<PortalIcon name="star-badge" />
+				<PortalUIIcon name="star-badge" />
 			</span>
 		);
 	}
 	if (tierName === 'Super Mario') {
 		tierPart = (
 			<span className="supporter-star super">
 				{' | '}
-				<PortalIcon name="star-badge" />
+				<PortalUIIcon name="star-badge" />
 			</span>
 		);
 	}
 	if (tierName === 'Mega Mushroom') {
 		tierPart = (
 			<span className="supporter-star mega">
 				{' | '}
-				<PortalIcon name="star-badge" />
+				<PortalUIIcon name="star-badge" />
 			</span>
 		);
 	}
@@ -41,23 +41,23 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac
 		accessLevelPart = (
 			<span className="supporter-star dev">
 				{' | '}
-				<PortalIcon name="dev-badge" />
+				<PortalUIIcon name="dev-badge" />
 			</span>
 		);
 	}
 	if (props.user.accessLevel === 2) {
 		accessLevelPart = (
 			<span className="supporter-star mega">
 				{' | '}
-				<PortalIcon name="mod-badge" />
+				<PortalUIIcon name="mod-badge" />
 			</span>
 		);
 	}
 	if (props.user.accessLevel === 1) {
 		accessLevelPart = (
 			<span className="supporter-star tester">
 				{' | '}
-				<PortalIcon name="tester-badge" />
+				<PortalUIIcon name="tester-badge" />
 			</span>
 		);
 	}
@@ -120,21 +120,21 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode {
 											</span>
 											<span>
 												{' | '}
-												<PortalIcon name="posts" />
+												<PortalUIIcon name="posts" />
 												{' '}
 												{props.totalPosts}
 											</span>
 											<span>
 												{' | '}
-												<PortalIcon name="followers" />
+												<PortalUIIcon name="followers" />
 												{' '}
 												<span id="followers">{props.userContent.following_users.length - 1}</span>
 											</span>
 											{props.userSettings.country_visibility
 												? (
 														<span>
 															{' | '}
-															<PortalIcon name="country" />
+															<PortalUIIcon name="country" />
 															{' '}
 															{props.user.country}
 														</span>
@@ -144,7 +144,7 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode {
 												? (
 														<span>
 															{' | '}
-															<PortalIcon name="birthday" />
+															<PortalUIIcon name="birthday" />
 															{' '}
 															{moment.utc(props.user.birthdate).format('MMM Do')}
 														</span>
@@ -154,7 +154,7 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode {
 												? (
 														<span>
 															{' | '}
-															<PortalIcon name="skill" />
+															<PortalUIIcon name="skill" />
 															{' '}
 															{props.userSettings.game_skill === 0
 																? (