fix: create icon_paths field for communities

apps/juxtaposition-ui/src/models/communities.js

@@ -19,6 +19,29 @@ const PermissionsSchema = new Schema({
 	}
 });
 
+const IconPathsSchema = new Schema({
+	32: {
+		type: String,
+		required: true
+	},
+	48: {
+		type: String,
+		required: true
+	},
+	64: {
+		type: String,
+		required: true
+	},
+	96: {
+		type: String,
+		required: true
+	},
+	128: {
+		type: String,
+		required: true
+	}
+});
+
 export const CommunitySchema = new Schema({
 	platform_id: {
 		type: Number,
@@ -81,6 +104,10 @@ export const CommunitySchema = new Schema({
 	},
 	ctr_header: { type: String },
 	wup_header: { type: String },
+	icon_paths: {
+		type: IconPathsSchema,
+		required: true
+	},
 	title_ids: {
 		type: [String],
 		default: undefined

apps/juxtaposition-ui/src/services/juxt-web/routes/admin/admin.tsx

@@ -451,6 +451,13 @@ adminRouter.post('/communities/new', upload.fields([{ name: 'browserIcon', maxCo
 		return res.sendStatus(422);
 	}
 
+	const iconPaths = {
+		32: icons.icon32,
+		48: icons.icon48,
+		64: icons.icon64,
+		96: icons.icon96,
+		128: icons.icon128
+	};
 	const document = {
 		platform_id: body.platform,
 		name: body.name,
@@ -467,6 +474,7 @@ adminRouter.post('/communities/new', upload.fields([{ name: 'browserIcon', maxCo
 		icon: icons.tgaBlob,
 		ctr_header: headers.ctr,
 		wup_header: headers.wup,
+		icon_paths: iconPaths,
 		title_id: body.title_ids,
 		community_id: communityId,
 		olive_community_id: communityId,

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

@@ -1,17 +1,16 @@
 import { t } from 'i18next';
 import { CtrPageBody, CtrRoot } from '@/services/juxt-web/views/ctr/root';
-import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
 import { T } from '@/services/juxt-web/views/common/components/T';
+import { CtrCommunityIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrCommunityIcon';
 import type { ReactNode } from 'react';
 import type { CommunityItemProps, CommunityListViewProps, CommunityOverviewViewProps } from '@/services/juxt-web/views/web/communityListView';
 
 export function CtrCommunityItem(props: CommunityItemProps): ReactNode {
-	const url = useUrl();
 	const id = props.community.olive_community_id;
 	return (
 		<li id={id}>
 			<a href={`/titles/${id}/new`} data-pjax="#body" className="scroll to-community-button">
-				<span className="icon-container"><img src={url.cdn(`/icons/${id}/64.png`)} className="icon" alt="" /></span>
+				<CtrCommunityIcon community={props.community} size="64"></CtrCommunityIcon>
 				<div className="body">
 					<div className="body-content">
 						<span className="community-name title">{props.community.name}</span>

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

@@ -3,13 +3,14 @@ import { CtrPageBody, CtrRoot } from '@/services/juxt-web/views/ctr/root';
 import { CtrPostListClosedView } from '@/services/juxt-web/views/ctr/postList';
 import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
 import { T } from '@/services/juxt-web/views/common/components/T';
+import { CtrCommunityIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrCommunityIcon';
 import type { ReactNode } from 'react';
 import type { CommunityViewProps } from '@/services/juxt-web/views/web/communityView';
 
 export function CtrCommunityView(props: CommunityViewProps): ReactNode {
 	const url = useUrl();
 	const community = props.community;
-	const { bannerUrl, imageId, legacy } = url.ctrHeader(community);
+	const { bannerUrl, legacy } = url.ctrHeader(community);
 
 	return (
 		<CtrRoot title={community.name}>
@@ -28,9 +29,7 @@ export function CtrCommunityView(props: CommunityViewProps): ReactNode {
 				>
 					<h1 id="page-title" className="community">
 						<span>
-							<span className="icon-container">
-								<img src={url.cdn(`/icons/${imageId}/64.png`)} className="icon" />
-							</span>
+							<CtrCommunityIcon community={community} size="64"></CtrCommunityIcon>
 							<span className="community-name">
 								{community.name}
 							</span>

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

@@ -0,0 +1,21 @@
+import { CtrIcon } from '@/services/juxt-web/views/ctr/components/ui/CtrIcon';
+import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
+import type { ReactNode } from 'react';
+import type { CommunityIconProps } from '@/services/juxt-web/views/web/components/ui/WebCommunityIcon';
+
+export function CtrCommunityIcon(props: CommunityIconProps): ReactNode {
+	const url = useUrl();
+	const imageId = props.community.parent ? props.community.parent : props.community.olive_community_id;
+	const iconUrl = props.community.icon_paths ? url.cdn(props.community.icon_paths[props.size]) : url.cdn(`/icons/${imageId}/${props.size}.png`);
+	const href = `/communities/${props.community.community_id}`;
+
+	return (
+		<CtrIcon
+			href={href}
+			src={iconUrl}
+			type="icon"
+			className={props.className}
+		>
+		</CtrIcon>
+	);
+}

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

@@ -5,7 +5,6 @@ import type { MiiIconProps } from '@/services/juxt-web/views/web/components/ui/W
 
 export function CtrMiiIcon(props: MiiIconProps): ReactNode {
 	const url = useUrl();
-
 	const miiUrl = props.face_url ?? url.cdn(`/mii/${props.pid}/normal_face.png`);
 	const href = `/users/${props.pid}`;
 	const type = props.type ?? 'mii-icon';

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

@@ -1,18 +1,16 @@
 import { t } from 'i18next';
 import { PortalPageBody, PortalRoot } from '@/services/juxt-web/views/portal/root';
 import { PortalNavBar } from '@/services/juxt-web/views/portal/navbar';
-import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
 import { T } from '@/services/juxt-web/views/common/components/T';
+import { PortalCommunityIcon } from '@/services/juxt-web/views/portal/components/ui/PortalCommunityIcon';
 import type { ReactNode } from 'react';
 import type { CommunityItemProps, CommunityListViewProps, CommunityOverviewViewProps } from '@/services/juxt-web/views/web/communityListView';
 
 export function PortalCommunityItem(props: CommunityItemProps): ReactNode {
-	const url = useUrl();
 	const id = props.community.olive_community_id;
-	const imageCommunityId = props.community.parent ? props.community.parent : id;
 	return (
 		<li id={id}>
-			<span className="icon-container"><img src={url.cdn(`/icons/${imageCommunityId}/128.png`)} className="icon" alt="" /></span>
+			<PortalCommunityIcon community={props.community} size="128" />
 			<a href={`/titles/${id}/new`} data-pjax="#body" className="scroll to-community-button"></a>
 			<div className="body">
 				<div className="body-content">

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

@@ -4,6 +4,7 @@ import { PortalNavBar } from '@/services/juxt-web/views/portal/navbar';
 import { PortalPostListClosedView } from '@/services/juxt-web/views/portal/postList';
 import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
 import { T } from '@/services/juxt-web/views/common/components/T';
+import { PortalCommunityIcon } from '@/services/juxt-web/views/portal/components/ui/PortalCommunityIcon';
 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';
@@ -45,12 +46,7 @@ export function PortalCommunityView(props: CommunityViewProps): ReactNode {
 					</div>
 
 					<div className="community-info info-content with-header-banner">
-						<span className="icon-container">
-							<img
-								src={url.cdn(`/icons/${imageId}/128.png`)}
-								className="icon"
-							/>
-						</span>
+						<PortalCommunityIcon community={community} size="128"></PortalCommunityIcon>
 						{community.permissions.open
 							? (
 									<a

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

@@ -0,0 +1,21 @@
+import { PortalIcon } from '@/services/juxt-web/views/portal/components/ui/PortalIcon';
+import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
+import type { ReactNode } from 'react';
+import type { CommunityIconProps } from '@/services/juxt-web/views/web/components/ui/WebCommunityIcon';
+
+export function PortalCommunityIcon(props: CommunityIconProps): ReactNode {
+	const url = useUrl();
+	const imageId = props.community.parent ? props.community.parent : props.community.olive_community_id;
+	const iconUrl = props.community.icon_paths ? url.cdn(props.community.icon_paths[props.size]) : url.cdn(`/icons/${imageId}/${props.size}.png`);
+	const href = `/communities/${props.community.community_id}`;
+
+	return (
+		<PortalIcon
+			href={href}
+			src={iconUrl}
+			type="icon"
+			className={props.className}
+		>
+		</PortalIcon>
+	);
+}

apps/juxtaposition-ui/src/services/juxt-web/views/web/admin/editCommunityView.tsx

@@ -68,7 +68,13 @@ export function WebEditCommunityView(props: EditCommunityViewProps): ReactNode {
 						<input type="file" id="browserIcon" data-image-preview accept="image/jpg" name="browserIcon" />
 					</div>
 					<div className="col-md-3">
-						<img src={url.cdn(`/icons/${imageId}/128.png`)} data-image-preview-for="browserIcon" id="browserIconPreview" />
+						{community.icon_paths
+							? (
+									<img src={url.cdn(community.icon_paths['128'])} data-image-preview-for="browserIcon" id="browserIconPreview" />
+								)
+							: (
+									<img src={url.cdn(`/icons/${imageId}/128.png`)} data-image-preview-for="browserIcon" id="browserIconPreview" />
+								)}
 					</div>
 					<div className="col-md-3">
 						<label className="labels" htmlFor="CTRbrowserHeader">3DS Browser Banner (400px x 220px)</label>

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

@@ -0,0 +1,28 @@
+import { WebIcon } from '@/services/juxt-web/views/web/components/ui/WebIcon';
+import { useUrl } from '@/services/juxt-web/views/common/hooks/useUrl';
+import type { ReactNode } from 'react';
+import type { InferSchemaType } from 'mongoose';
+import type { CommunitySchema } from '@/models/communities';
+
+export type CommunityIconProps = {
+	community: InferSchemaType<typeof CommunitySchema>;
+	size: '32' | '48' | '64' | '96' | '128';
+	className?: string;
+};
+
+export function WebCommunityIcon(props: CommunityIconProps): ReactNode {
+	const url = useUrl();
+	const imageId = props.community.parent ? props.community.parent : props.community.olive_community_id;
+	const iconUrl = props.community.icon_paths ? url.cdn(props.community.icon_paths[props.size]) : url.cdn(`/icons/${imageId}/${props.size}.png`);
+	const href = `/communities/${props.community.community_id}`;
+
+	return (
+		<WebIcon
+			href={href}
+			src={iconUrl}
+			type="icon"
+			className={props.className}
+		>
+		</WebIcon>
+	);
+}