From 30b26e66ae443303f2af8a5c40dc71a7053b3b19 Mon Sep 17 00:00:00 2001 From: Ash Logan Date: Mon, 23 Feb 2026 19:37:11 +1100 Subject: [PATCH 1/9] chore(ui): refactor icon views to new component style --- .../components/{icon.tsx => ui/CtrIcon.tsx} | 8 +-- .../{mii-icon.tsx => ui/CtrMiiIcon.tsx} | 8 +-- .../juxt-web/views/ctr/messageThread.tsx | 2 +- .../services/juxt-web/views/ctr/messages.tsx | 4 +- .../views/ctr/notificationListView.tsx | 6 +- .../src/services/juxt-web/views/ctr/post.tsx | 2 +- .../juxt-web/views/portal/communityView.tsx | 6 +- .../juxt-web/views/portal/components/icon.tsx | 12 ---- .../views/portal/components/ui/PortalIcon.tsx | 12 ++++ .../{mii-icon.tsx => ui/PortalMiiIcon.tsx} | 12 ++-- .../portal/components/ui/PortalUIIcon.tsx | 36 ++++++++++ .../services/juxt-web/views/portal/icons.tsx | 36 ---------- .../views/portal/notificationListView.tsx | 8 +-- .../services/juxt-web/views/portal/post.tsx | 4 +- .../juxt-web/views/portal/userPageView.tsx | 24 +++---- .../juxt-web/views/web/components/icon.tsx | 10 --- .../views/web/components/mii-icon.tsx | 10 --- .../views/web/components/ui/WebIcon.tsx | 22 ++++++ .../views/web/components/ui/WebMiiIcon.tsx | 31 +++++++++ .../views/web/components/ui/WebUIIcon.tsx | 67 +++++++++++++++++++ .../services/juxt-web/views/web/errorView.tsx | 2 +- .../src/services/juxt-web/views/web/icons.tsx | 67 ------------------- .../services/juxt-web/views/web/loginView.tsx | 2 +- .../services/juxt-web/views/web/navbar.tsx | 12 ++-- .../src/services/juxt-web/views/web/post.tsx | 14 ++-- .../juxt-web/views/web/userPageView.tsx | 14 ++-- 26 files changed, 232 insertions(+), 199 deletions(-) rename apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/{icon.tsx => ui/CtrIcon.tsx} (50%) rename apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/{mii-icon.tsx => ui/CtrMiiIcon.tsx} (82%) delete mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/icon.tsx create mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalIcon.tsx rename apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/{mii-icon.tsx => ui/PortalMiiIcon.tsx} (66%) create mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalUIIcon.tsx delete mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/portal/icons.tsx delete mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/components/icon.tsx delete mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/components/mii-icon.tsx create mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebIcon.tsx create mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebMiiIcon.tsx create mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebUIIcon.tsx delete mode 100644 apps/juxtaposition-ui/src/services/juxt-web/views/web/icons.tsx diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrIcon.tsx similarity index 50% rename from apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/icon.tsx rename to apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrIcon.tsx index f51598c4..bbdd8e3d 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/icon.tsx +++ b/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 ( - - + + ); } diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/mii-icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrMiiIcon.tsx similarity index 82% rename from apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/mii-icon.tsx rename to apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/ui/CtrMiiIcon.tsx index d4993d64..a6f6e2cf 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/components/mii-icon.tsx +++ b/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 ( diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messageThread.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messageThread.tsx index 875e7388..ab0abeda 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messageThread.tsx +++ b/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'; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messages.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messages.tsx index 65e3851a..0ba684ca 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/messages.tsx +++ b/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 { diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/notificationListView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/notificationListView.tsx index b4e132c3..c0530544 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/notificationListView.tsx +++ b/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 => {userId ? props.ctx.usersMap.get(Number(userId)) : null}; return ( <> - +

{notif.users.length === 1 diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/post.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/post.tsx index 7ab3160c..ddb7521e 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/ctr/post.tsx +++ b/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'; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/communityView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/communityView.tsx index 254a0e0a..2011b80c 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/communityView.tsx +++ b/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 { {community.name} - + {' '} {props.totalPosts} {' | '} - + {' '} {community.followers} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/icon.tsx deleted file mode 100644 index 2f3df92d..00000000 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import cx from 'classnames'; -import type { ReactNode } from 'react'; -import type { IconProps } from '@/services/juxt-web/views/web/components/icon'; - -export function PortalIconView(props: IconProps): ReactNode { - const baseClass = props.baseClass ?? 'icon'; - return ( - - - - ); -} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalIcon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalIcon.tsx new file mode 100644 index 00000000..a315e245 --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/mii-icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalMiiIcon.tsx similarity index 66% rename from apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/mii-icon.tsx rename to apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalMiiIcon.tsx index bd54c797..ed20da01 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/mii-icon.tsx +++ b/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 ( - - + ); } diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalUIIcon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/components/ui/PortalUIIcon.tsx new file mode 100644 index 00000000..7bc12599 --- /dev/null +++ b/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 ; +} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/icons.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/icons.tsx deleted file mode 100644 index 06e33d59..00000000 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/icons.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* 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 PortalIcon = keyof typeof icons; - -export type PortalIconProps = { - name: PortalIcon; -}; - -export function PortalIcon(props: PortalIconProps): ReactNode { - const iconHtml = icons[props.name]; - return ; -} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/notificationListView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/notificationListView.tsx index f61bec5c..2f8c8c8c 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/notificationListView.tsx +++ b/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 => {userId ? props.ctx.usersMap.get(Number(userId)) : null}; return ( <> - +

{notif.users.length === 1 @@ -63,7 +63,7 @@ function PortalNotificationItem(props: NotificationItemProps): ReactNode { if (notif.type === 'notice') { return ( <> - +

diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/post.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/post.tsx index c24457fe..0311866e 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/post.tsx +++ b/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 { ? ( {/* TODO this has been modified due to inbalanced tags */} - + {post.topic_tag} ) diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/userPageView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/portal/userPageView.tsx index 8d316047..92721c9e 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/portal/userPageView.tsx +++ b/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,7 +16,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac tierPart = ( {' | '} - + ); } @@ -24,7 +24,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac tierPart = ( {' | '} - + ); } @@ -32,7 +32,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac tierPart = ( {' | '} - + ); } @@ -41,7 +41,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac accessLevelPart = ( {' | '} - + ); } @@ -49,7 +49,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac accessLevelPart = ( {' | '} - + ); } @@ -57,7 +57,7 @@ export function PortalUserTier(props: { user: UserPageViewProps['user'] }): Reac accessLevelPart = ( {' | '} - + ); } @@ -120,13 +120,13 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode { {' | '} - + {' '} {props.totalPosts} {' | '} - + {' '} {props.userContent.following_users.length - 1} @@ -134,7 +134,7 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode { ? ( {' | '} - + {' '} {props.user.country} @@ -144,7 +144,7 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode { ? ( {' | '} - + {' '} {moment.utc(props.user.birthdate).format('MMM Do')} @@ -154,7 +154,7 @@ export function PortalUserPageView(props: UserPageViewProps): ReactNode { ? ( {' | '} - + {' '} {props.userSettings.game_skill === 0 ? ( diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/icon.tsx deleted file mode 100644 index dd411cd0..00000000 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { RenderContext } from '@/services/juxt-web/views/context'; - -export type IconProps = { - ctx: RenderContext; - - src: string; - href?: string; - baseClass?: string; // default ".icon" - className?: string; // extra classes -}; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/mii-icon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/mii-icon.tsx deleted file mode 100644 index 8f801bf2..00000000 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/mii-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { RenderContext } from '@/services/juxt-web/views/context'; - -export type MiiIconProps = { - ctx: RenderContext; - - pid: number; - face_url?: string; - big?: boolean; // Use .icon (Icon) instead of .mii-icon - className?: string; // extra classes -}; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebIcon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebIcon.tsx new file mode 100644 index 00000000..1045aad2 --- /dev/null +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebIcon.tsx @@ -0,0 +1,22 @@ +import cx from 'classnames'; +import type { ReactNode } from 'react'; +import type { RenderContext } from '@/services/juxt-web/views/context'; + +export type IconProps = { + ctx: RenderContext; + + src: string; + href?: string; + + type?: 'icon' | 'mii-icon'; // default ".icon" + className?: string; // extra classes +}; + +export function WebIcon(props: IconProps): ReactNode { + const type = props.type ?? 'icon'; + return ( + + + + ); +} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebMiiIcon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebMiiIcon.tsx new file mode 100644 index 00000000..365a62e6 --- /dev/null +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebMiiIcon.tsx @@ -0,0 +1,31 @@ +import { utils } from '@/services/juxt-web/views/utils'; +import { WebIcon } from '@/services/juxt-web/views/web/components/ui/WebIcon'; +import type { ReactNode } from 'react'; +import type { RenderContext } from '@/services/juxt-web/views/context'; + +export type MiiIconProps = { + ctx: RenderContext; + + pid: number; + face_url?: string; + + type?: 'mii-icon' | 'icon'; // default ".mii-icon" + className?: string; // extra classes +}; + +export function WebMiiIcon(props: MiiIconProps): ReactNode { + const url = props.face_url ?? utils.cdn(props.ctx, `/mii/${props.pid}/normal_face.png`); + const href = `/users/${props.pid}`; + const type = props.type ?? 'mii-icon'; + + return ( + + + ); +} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebUIIcon.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebUIIcon.tsx new file mode 100644 index 00000000..f9e5d92a --- /dev/null +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/components/ui/WebUIIcon.tsx @@ -0,0 +1,67 @@ +/* eslint-disable no-restricted-imports -- raw import plugin does not support path aliases */ +import heartIcon from '../../assets/heart_icon.svg?raw'; +import replyIcon from '../../assets/reply_icon.svg?raw'; +import menuIcon from '../../assets/menu_icon.svg?raw'; +import flagIcon from '../../assets/flag_icon.svg?raw'; +import binIcon from '../../assets/bin_icon.svg?raw'; +import shareIcon from '../../assets/share_icon.svg?raw'; +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 juxtLogoSvg from '../../assets/juxt_logo.svg?raw'; +import pretendoLogoSvg from '../../assets/pretendo_logo.svg?raw'; +import mailIcon from '../../assets/mail.svg?raw'; +import bellIcon from '../../assets/bell.svg?raw'; +import usersIcon from '../../assets/users.svg?raw'; +import homeIcon from '../../assets/home.svg?raw'; +import hammerIcon from '../../assets/hammer.svg?raw'; +import type { ReactNode } from 'react'; + +const icons = { + 'dev-badge': devBadgeIcon, + 'mod-badge': modBadgeIcon, + 'star-badge': starBadgeIcon, + 'tester-badge': testerBadgeIcon, + 'heart': heartIcon, + 'reply': replyIcon, + 'menu': menuIcon, + 'flag': flagIcon, + 'bin': binIcon, + 'share': shareIcon, + 'mail': mailIcon, + 'bell': bellIcon, + 'users': usersIcon, + 'home': homeIcon, + 'hammer': hammerIcon +} as const; + +type WebUIIcon = keyof typeof icons; + +export type WebUIIconProps = { + name: WebUIIcon; +}; + +export function WebUIIcon(props: WebUIIconProps): ReactNode { + const iconHtml = icons[props.name]; + return ( + + ); +} + +export function PretendoLogo(): ReactNode { + return ( + + ); +} + +export function JuxtLogo(): ReactNode { + return ( + + ); +} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/errorView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/errorView.tsx index 90c2d08d..3c17d323 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/errorView.tsx +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/errorView.tsx @@ -1,5 +1,5 @@ import { WebLoginRoot } from '@/services/juxt-web/views/web/login'; -import { PretendoLogo } from '@/services/juxt-web/views/web/icons'; +import { PretendoLogo } from '@/services/juxt-web/views/web/components/ui/WebUIIcon'; import type { ReactNode } from 'react'; import type { ReqId } from 'pino-http'; import type { RenderContext } from '@/services/juxt-web/views/context'; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/icons.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/icons.tsx deleted file mode 100644 index efa58915..00000000 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/icons.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* eslint-disable no-restricted-imports -- raw import plugin does not support path aliases */ -import heartIcon from './assets/heart_icon.svg?raw'; -import replyIcon from './assets/reply_icon.svg?raw'; -import menuIcon from './assets/menu_icon.svg?raw'; -import flagIcon from './assets/flag_icon.svg?raw'; -import binIcon from './assets/bin_icon.svg?raw'; -import shareIcon from './assets/share_icon.svg?raw'; -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 juxtLogoSvg from './assets/juxt_logo.svg?raw'; -import pretendoLogoSvg from './assets/pretendo_logo.svg?raw'; -import mailIcon from './assets/mail.svg?raw'; -import bellIcon from './assets/bell.svg?raw'; -import usersIcon from './assets/users.svg?raw'; -import homeIcon from './assets/home.svg?raw'; -import hammerIcon from './assets/hammer.svg?raw'; -import type { ReactNode } from 'react'; - -const icons = { - 'dev-badge': devBadgeIcon, - 'mod-badge': modBadgeIcon, - 'star-badge': starBadgeIcon, - 'tester-badge': testerBadgeIcon, - 'heart': heartIcon, - 'reply': replyIcon, - 'menu': menuIcon, - 'flag': flagIcon, - 'bin': binIcon, - 'share': shareIcon, - 'mail': mailIcon, - 'bell': bellIcon, - 'users': usersIcon, - 'home': homeIcon, - 'hammer': hammerIcon -} as const; - -type WebIcon = keyof typeof icons; - -export type WebIconProps = { - name: WebIcon; -}; - -export function WebIcon(props: WebIconProps): ReactNode { - const iconHtml = icons[props.name]; - return ( - - ); -} - -export function PretendoLogo(): ReactNode { - return ( - - ); -} - -export function JuxtLogo(): ReactNode { - return ( - - ); -} diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/loginView.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/loginView.tsx index c077f44c..9f324bb8 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/loginView.tsx +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/loginView.tsx @@ -1,5 +1,5 @@ import { WebLoginRoot } from '@/services/juxt-web/views/web/login'; -import { PretendoLogo } from '@/services/juxt-web/views/web/icons'; +import { PretendoLogo } from '@/services/juxt-web/views/web/components/ui/WebUIIcon'; import type { ReactNode } from 'react'; import type { RenderContext } from '@/services/juxt-web/views/context'; diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/navbar.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/navbar.tsx index 347fc68f..dfa0f14e 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/navbar.tsx +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/navbar.tsx @@ -1,5 +1,5 @@ import { utils } from '@/services/juxt-web/views/utils'; -import { JuxtLogo, WebIcon } from '@/services/juxt-web/views/web/icons'; +import { JuxtLogo, WebUIIcon } from '@/services/juxt-web/views/web/components/ui/WebUIIcon'; import type { ReactNode } from 'react'; import type { RenderContext } from '@/services/juxt-web/views/context'; @@ -29,20 +29,20 @@ export function WebNavBar(props: NavBarProps): ReactNode {

{props.ctx.lang.global.user_page}

- +

{props.ctx.lang.global.activity_feed}

 - +

{props.ctx.lang.global.communities}

 - +

{props.ctx.lang.global.messages}

 - +

{props.ctx.lang.global.notifications}

 @@ -50,7 +50,7 @@ export function WebNavBar(props: NavBarProps): ReactNode { ? ( <> - +

Moderation

 diff --git a/apps/juxtaposition-ui/src/services/juxt-web/views/web/post.tsx b/apps/juxtaposition-ui/src/services/juxt-web/views/web/post.tsx index 24e8b83e..d709c1b9 100644 --- a/apps/juxtaposition-ui/src/services/juxt-web/views/web/post.tsx +++ b/apps/juxtaposition-ui/src/services/juxt-web/views/web/post.tsx @@ -1,7 +1,7 @@ import cx from 'classnames'; import moment from 'moment'; import { utils } from '@/services/juxt-web/views/utils'; -import { WebIcon } from '@/services/juxt-web/views/web/icons'; +import { WebUIIcon } from '@/services/juxt-web/views/web/components/ui/WebUIIcon'; import type { InferSchemaType } from 'mongoose'; import type { ReactNode } from 'react'; import type { ContentSchema } from '@/models/content'; @@ -109,7 +109,7 @@ export function WebPostView(props: PostViewProps): ReactNode { role="button" aria-pressed={yeahed} > - +

{post.empathy_count}

 @@ -119,30 +119,30 @@ export function WebPostView(props: PostViewProps): ReactNode { className="post-button reply-button" role="button" > - +

{post.reply_count}

{/* Hamburger menu */}