diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx index 200f5952..f9d0920f 100644 --- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx +++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx @@ -13,6 +13,8 @@ import { VersionFolderLinkerService, VersionLinkerActionListener } from "rendere import { useService } from "renderer/hooks/use-service.hook"; import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component"; import { BsmButton } from "../shared/bsm-button.component"; +import { MapIcon } from "../svgs/icons/map-icon.component"; +import { PlaylistIcon } from "../svgs/icons/playlist-icon.component"; type Props = { version?: BSVersion; @@ -114,7 +116,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) { tabs={[ { text: "misc.maps", - icon: "trash", + icon: MapIcon, onClick: () => setTabIndex(0), linkProps: version ? { state$: mapsService.$mapsFolderLinkState(version), @@ -123,7 +125,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) { }, { text: "misc.playlists", - icon: "trash", + icon: PlaylistIcon, onClick: () => setTabIndex(1), }, ]} diff --git a/src/renderer/components/models-management/models-panel.component.tsx b/src/renderer/components/models-management/models-panel.component.tsx index b21d97ba..2b0b7a0b 100644 --- a/src/renderer/components/models-management/models-panel.component.tsx +++ b/src/renderer/components/models-management/models-panel.component.tsx @@ -18,6 +18,11 @@ import { FolderLinkState } from "renderer/services/version-folder-linker.service import { BsContentTabItemProps } from "../shared/bs-content-tab-panel/bs-content-tab-item.component"; import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component"; import { LinkBtnProps } from "../maps-mangement-components/link-button.component"; +import { ModelTypeAvatarIcon } from "../svgs/icons/model-type-avatar-icon.component"; +import { SvgIcon } from "../svgs/svg-icon.type"; +import { ModelTypeSaberIcon } from "../svgs/icons/model-type-saber-icon.component"; +import { ModelTypePlatformIcon } from "../svgs/icons/model-type-platform-icon.component"; +import { ModelTypeBloqIcon } from "../svgs/icons/model-type-bloq-icon.component"; export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersion; isActive: boolean; goToMods?: () => void }) { const modelsManager = useService(ModelsManagerService); @@ -114,9 +119,24 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi onClick, } : undefined; + const getModelIcon = (model: MSModelType): SvgIcon => { + switch (model) { + case MSModelType.Avatar: + return ModelTypeAvatarIcon; + case MSModelType.Saber: + return ModelTypeSaberIcon; + case MSModelType.Platfrom: + return ModelTypePlatformIcon; + case MSModelType.Bloq: + return ModelTypeBloqIcon; + default: + return ModelTypeAvatarIcon; + } + } + return { text: `models.types.plural.${model}`, - icon: model, + icon: getModelIcon(model), onClick: () => setModelTypeTab(model), linkProps } diff --git a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx index edb55553..d8c6511d 100644 --- a/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx +++ b/src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx @@ -1,10 +1,10 @@ import { LinkBtnProps, LinkButton } from "renderer/components/maps-mangement-components/link-button.component"; -import { BsmIcon, BsmIconType } from "renderer/components/svgs/bsm-icon.component"; +import { SvgIcon } from "renderer/components/svgs/svg-icon.type"; import { useTranslation } from "renderer/hooks/use-translation.hook"; export type BsContentTabItemProps = { text: string; - icon: BsmIconType; + icon: SvgIcon; active?: boolean; value?: T; linkProps?: LinkBtnProps; @@ -13,7 +13,7 @@ export type BsContentTabItemProps = { type BsContentTabItemComponent = ({text, icon, active, value, linkProps, onClick}: BsContentTabItemProps) => JSX.Element; -export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon, active, value, linkProps, onClick }) => { +export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon, active, value, linkProps, onClick }) => { const t = useTranslation(); @@ -26,7 +26,7 @@ export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon, active return (
  • - + {t(text)}
    {linkProps && ( diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx index e4b32300..2373193c 100644 --- a/src/renderer/components/svgs/bsm-icon.component.tsx +++ b/src/renderer/components/svgs/bsm-icon.component.tsx @@ -56,20 +56,16 @@ import { RussianIcon } from "./flags/russian-icon.component"; import { ChineseIcon } from "./flags/chinese-icon.component"; import { ChineseTraditionalIcon } from "./flags/chineseTraditional-icon.component"; import { JapanIcon } from "./flags/japan-icon.component"; -import { MSModelType } from "shared/models/models/model-saber.model"; -import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component"; -import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component"; -import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component"; -import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component"; import { ChevronTopIcon } from "./icons/chevron-top-icon.component"; import { EyeCrossIcon } from "./icons/eye-cross-icon.component"; import { ShortcutIcon } from "./icons/shortcut-icon.component"; import { BackupRestoreIcon } from "./icons/backup-restore-icon.component"; -export type BsmIconType = BsvMapCharacteristic | MSModelType | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag"); +export type BsmIconType = BsvMapCharacteristic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag"); export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => { // TODO : Very ugly very messy, need to find a better way to do this + // the rework have started, see `svg-icon.type.ts` const renderIcon = () => { if (icon === "settings") { @@ -254,19 +250,6 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i if (icon === "backup-restore") { return ; } - - if (icon === MSModelType.Avatar) { - return ; - } - if (icon === MSModelType.Saber) { - return ; - } - if (icon === MSModelType.Platfrom) { - return ; - } - if (icon === MSModelType.Bloq) { - return ; - } return ; }; diff --git a/src/renderer/components/svgs/icons/map-icon.component.tsx b/src/renderer/components/svgs/icons/map-icon.component.tsx new file mode 100644 index 00000000..abdeac07 --- /dev/null +++ b/src/renderer/components/svgs/icons/map-icon.component.tsx @@ -0,0 +1,9 @@ +import { createSvgIcon } from "../svg-icon.type"; + +export const MapIcon = createSvgIcon((props, ref) => { + return ( + + + + ) +}); diff --git a/src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx b/src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx index 5aee504e..9b846ebb 100644 --- a/src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx +++ b/src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx @@ -1,9 +1,9 @@ -import { CSSProperties } from "react"; +import { createSvgIcon } from "../svg-icon.type"; -export function ModelTypeAvatarIcon(props: { className?: string; style?: CSSProperties }) { +export const ModelTypeAvatarIcon = createSvgIcon((props, ref) => { return ( - + - ); -} + ) +}); diff --git a/src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx b/src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx index 91797181..531951f6 100644 --- a/src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx +++ b/src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx @@ -1,9 +1,9 @@ -import { CSSProperties } from "react"; +import { createSvgIcon } from "../svg-icon.type"; -export function ModelTypeBloqIcon(props: { className?: string; style?: CSSProperties }) { +export const ModelTypeBloqIcon = createSvgIcon((props, ref) => { return ( - + ); -} +}); diff --git a/src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx b/src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx index 068199ae..a22334b7 100644 --- a/src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx +++ b/src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx @@ -1,9 +1,9 @@ -import { CSSProperties } from "react"; +import { createSvgIcon } from "../svg-icon.type"; -export function ModelTypePlatformIcon(props: { className?: string; style?: CSSProperties }) { +export const ModelTypePlatformIcon = createSvgIcon((props, ref) => { return ( - + ); -} +}); diff --git a/src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx b/src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx index e1036ac1..10a2f8ad 100644 --- a/src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx +++ b/src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx @@ -1,9 +1,9 @@ -import { CSSProperties } from "react"; +import { createSvgIcon } from "../svg-icon.type"; -export function ModelTypeSaberIcon(props: { className?: string; style?: CSSProperties }) { +export const ModelTypeSaberIcon = createSvgIcon((props, ref) => { return ( - + - ); -} + ) +}); diff --git a/src/renderer/components/svgs/icons/playlist-icon.component.tsx b/src/renderer/components/svgs/icons/playlist-icon.component.tsx new file mode 100644 index 00000000..130ac064 --- /dev/null +++ b/src/renderer/components/svgs/icons/playlist-icon.component.tsx @@ -0,0 +1,9 @@ +import { createSvgIcon } from "../svg-icon.type"; + +export const PlaylistIcon = createSvgIcon((props, ref) => { + return ( + + + + ) +}) \ No newline at end of file diff --git a/src/renderer/components/svgs/svg-icon.type.ts b/src/renderer/components/svgs/svg-icon.type.ts new file mode 100644 index 00000000..67e58193 --- /dev/null +++ b/src/renderer/components/svgs/svg-icon.type.ts @@ -0,0 +1,10 @@ +// These types and functions are meant replace the current clunky SVG system (the one with `bsm-icon.component.tsx`) + +import { ForwardedRef, forwardRef } from "react" + +export type SvgIcon = React.ForwardRefExoticComponent, "ref"> & React.RefAttributes>; +export type SvgRenderFunction = (props: React.SVGProps, ref: ForwardedRef) => JSX.Element; + +export function createSvgIcon(render: SvgRenderFunction): SvgIcon { + return forwardRef(render); +} \ No newline at end of file