diff --git a/packages/frontend/src/components/widgets/DesktopWidgetsView.tsx b/packages/frontend/src/components/widgets/DesktopWidgetsView.tsx index 99b713c42..d84d60bae 100644 --- a/packages/frontend/src/components/widgets/DesktopWidgetsView.tsx +++ b/packages/frontend/src/components/widgets/DesktopWidgetsView.tsx @@ -43,7 +43,7 @@ const DesktopWidgetsView: FC = ({ if (!moduleData) return null; const Container = TEMPLATES_DICT[ - config.templateSlug + config.templateSlug as TTemplateSlug ] as FC; if (!Container) return null; diff --git a/packages/frontend/src/config/widgets.ts b/packages/frontend/src/config/widgets.ts index 455dfc676..0e490b107 100644 --- a/packages/frontend/src/config/widgets.ts +++ b/packages/frontend/src/config/widgets.ts @@ -299,23 +299,31 @@ export const WIDGETS_CONFIG = { export const TWO_COL_WIDGETS_CONFIG = { two_col_image: { - templateSlug: "two_col_image_template", + templateSlug: `${ETemplateNameRegistry.Two_Col_Image.toLowerCase()}_template`, templateName: ETemplateNameRegistry.Two_Col_Image, widgetConfig: WIDGETS_CONFIG.TWO_COL_IMAGE, }, kasandra: { - templateSlug: "kasandra_template", + templateSlug: `${ETemplateNameRegistry.Kasandra}_template`, templateName: ETemplateNameRegistry.Kasandra, widgetConfig: WIDGETS_CONFIG.KASANDRA, }, kasandraFlakeOff: { - templateSlug: "kasandra_flakeoff_template", + templateSlug: `${ETemplateNameRegistry.KasandraFlakeOff.toLowerCase()}_template`, templateName: ETemplateNameRegistry.KasandraFlakeOff, widgetConfig: WIDGETS_CONFIG.KASANDRA_FLAKEOFF, }, marketHeatmap: { - templateSlug: "market_heatmap_template", + templateSlug: `${ETemplateNameRegistry.MarketHeatmap.toLowerCase()}_template`, templateName: ETemplateNameRegistry.MarketHeatmap, widgetConfig: WIDGETS_CONFIG.MARKET_HEATMAP, }, } as const; + +/** + * Templates to deprioritize on mobile (should not appear in first 3 positions) + */ +export const MOBILE_DEPRIORITIZED_TEMPLATES = [ + `${ETemplateNameRegistry.One_Col_Image.toLowerCase()}_template`, + `${ETemplateNameRegistry.Two_Col_Image.toLowerCase()}_template`, +] as const; diff --git a/packages/frontend/src/mobile-components/widgets/MobileWidgetsView.tsx b/packages/frontend/src/mobile-components/widgets/MobileWidgetsView.tsx index cf6ee20d4..0e14aa1c5 100644 --- a/packages/frontend/src/mobile-components/widgets/MobileWidgetsView.tsx +++ b/packages/frontend/src/mobile-components/widgets/MobileWidgetsView.tsx @@ -3,6 +3,7 @@ import { TabsBar } from "@alphaday/ui-kit"; import useHeaderScroll from "src/api/hooks/useHeaderScroll"; import { TUserViewWidget } from "src/api/types"; import { Logger } from "src/api/utils/logging"; +import { MOBILE_DEPRIORITIZED_TEMPLATES } from "src/config/widgets"; import CONFIG from "src/config"; import { TEMPLATES_DICT, IModuleContainer } from "src/types"; @@ -30,28 +31,62 @@ const MobileWidgetsView: FC = ({ widgets }) => { [squareRef] ); - // Create tab options from widgets + // Reorder widgets to ensure deprioritized templates don't appear in first 3 positions + const reorderedWidgets = useMemo(() => { + const result = [...widgets]; + const deprioritizedTemplates = + MOBILE_DEPRIORITIZED_TEMPLATES as readonly string[]; + + // Check first 3 positions + for (let i = 0; i < Math.min(3, result.length); i += 1) { + const widget = result[i]; + if (deprioritizedTemplates.includes(widget.widget.template.slug)) { + // Find first non-deprioritized widget after position i + const swapIndex = result.findIndex( + (w, idx) => + idx > i && + !deprioritizedTemplates.includes(w.widget.template.slug) + ); + + if (swapIndex !== -1) { + // Swap positions + [result[i], result[swapIndex]] = [ + result[swapIndex], + result[i], + ]; + } + } + } + + return result; + }, [widgets]); + + // Create tab options from reordered widgets const tabOptions = useMemo(() => { - return widgets.map((widget, index) => ({ + return reorderedWidgets.map((widget, index) => ({ label: widget.name, value: String(index), })); - }, [widgets]); + }, [reorderedWidgets]); // Get the currently selected widget const selectedWidget = useMemo(() => { - if (widgets.length === 0) return null; - return widgets[selectedWidgetIndex]; - }, [widgets, selectedWidgetIndex]); + if (reorderedWidgets.length === 0) return null; + return reorderedWidgets[selectedWidgetIndex]; + }, [reorderedWidgets, selectedWidgetIndex]); const handleTabChange = (value: string) => { const index = parseInt(value, 10); - if (!Number.isNaN(index) && index >= 0 && index < widgets.length) { + if ( + !Number.isNaN(index) && + index >= 0 && + index < reorderedWidgets.length + ) { setSelectedWidgetIndex(index); } }; - if (widgets.length === 0) { + if (reorderedWidgets.length === 0) { return (