From cb0a9242b5749fd6aec338f296f85349abec50e2 Mon Sep 17 00:00:00 2001 From: Lorenzune Date: Thu, 19 Mar 2026 15:22:49 +0100 Subject: [PATCH] feat(ui): add wired creator tools shell --- src/components/MainView.tsx | 2 + .../wired-tools/WiredCreatorToolsView.tsx | 176 ++++++++++++++++++ 2 files changed, 178 insertions(+) create mode 100644 src/components/wired-tools/WiredCreatorToolsView.tsx diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx index 4b3217f..d80e00e 100644 --- a/src/components/MainView.tsx +++ b/src/components/MainView.tsx @@ -27,6 +27,7 @@ import { ToolbarView } from './toolbar/ToolbarView'; import { UserProfileView } from './user-profile/UserProfileView'; import { UserSettingsView } from './user-settings/UserSettingsView'; import { WiredView } from './wired/WiredView'; +import { WiredCreatorToolsView } from './wired-tools/WiredCreatorToolsView'; import { YoutubeTvView } from './youtube-tv/YoutubeTvView'; export const MainView: FC<{}> = props => @@ -94,6 +95,7 @@ export const MainView: FC<{}> = props => + diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx new file mode 100644 index 0000000..7d5d4ed --- /dev/null +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -0,0 +1,176 @@ +import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common'; + +type WiredToolsTab = 'monitor' | 'variables' | 'inspection' | 'chests' | 'settings'; + +interface MonitorStat +{ + label: string; + value: string; +} + +interface MonitorLog +{ + type: string; + category: string; + amount: string; + latest: string; +} + +const TABS: Array<{ key: WiredToolsTab; label: string; }> = [ + { key: 'monitor', label: 'Monitor' }, + { key: 'variables', label: 'Variables' }, + { key: 'inspection', label: 'Inspection' }, + { key: 'chests', label: 'Chests' }, + { key: 'settings', label: 'Settings' } +]; + +const MONITOR_STATS: MonitorStat[] = [ + { label: 'Wired usage', value: '0/10000' }, + { label: 'Is heavy', value: 'No' }, + { label: 'Floor furni', value: '0/4000' }, + { label: 'Wall furni', value: '0/4000' }, + { label: 'Permanent furni vars', value: '0/60' } +]; + +const MONITOR_LOGS: MonitorLog[] = [ + { type: 'EXECUTION_CAP', category: 'ERROR', amount: '0', latest: '/' }, + { type: 'DELAYED_EVENTS_CAP', category: 'ERROR', amount: '0', latest: '/' }, + { type: 'EXECUTOR_OVERLOAD', category: 'ERROR', amount: '0', latest: '/' }, + { type: 'MARKED_AS_HEAVY', category: 'WARNING', amount: '0', latest: '/' }, + { type: 'KILLED', category: 'ERROR', amount: '0', latest: '/' }, + { type: 'RECURSION_TIMEOUT', category: 'ERROR', amount: '0', latest: '/' } +]; + +export const WiredCreatorToolsView: FC<{}> = props => +{ + const [ isVisible, setIsVisible ] = useState(false); + const [ activeTab, setActiveTab ] = useState('monitor'); + + useEffect(() => + { + const linkTracker: ILinkEventTracker = { + linkReceived: (url: string) => + { + const parts = url.split('/'); + + if(parts.length < 2) return; + + switch(parts[1]) + { + case 'show': + setIsVisible(true); + return; + case 'hide': + setIsVisible(false); + return; + case 'toggle': + setIsVisible(prevValue => !prevValue); + return; + case 'tab': + if(parts.length > 2) + { + const tab = parts[2] as WiredToolsTab; + + if(TABS.some(entry => entry.key === tab)) setActiveTab(tab); + } + setIsVisible(true); + return; + } + }, + eventUrlPrefix: 'wired-tools/' + }; + + AddLinkEventTracker(linkTracker); + + return () => RemoveLinkEventTracker(linkTracker); + }, []); + + const currentTabLabel = useMemo(() => TABS.find(tab => tab.key === activeTab)?.label ?? 'Monitor', [ activeTab ]); + + if(!isVisible) return null; + + return ( + + setIsVisible(false) } /> + + { TABS.map(tab => ( + setActiveTab(tab.key) }> + { tab.label } + + )) } + + +
+
+ { currentTabLabel } +
+ { (activeTab === 'monitor') && +
+
+ This is the initial shell for the Wired Creator Tools. We can now build the real functionality tab by tab. +
+
+
+ Statistics: + { MONITOR_STATS.map(stat => ( +
+ { stat.label }: + { stat.value } +
+ )) } +
+
+
+ Monitor Preview +
+ Live statistics, executor health and diagnostics can be connected here next. +
+
+
+
+
+ Logs: +
+ + + + + + + + + + + { MONITOR_LOGS.map((log, index) => ( + + + + + + + )) } + +
TypeCategoryAmountLatest occurrence
{ log.type }{ log.category }{ log.amount }{ log.latest }
+
+
+ + +
+
+
} + { (activeTab !== 'monitor') && +
+
+ { currentTabLabel } +
+ This tab is now ready to be wired into the new `:wired` tools flow. +
+
+
} +
+ + + ); +};