diff --git a/src/containers/main/Dashboard/Dashboard.tsx b/src/containers/main/Dashboard/Dashboard.tsx index 2585a38c8..5e7a57e89 100644 --- a/src/containers/main/Dashboard/Dashboard.tsx +++ b/src/containers/main/Dashboard/Dashboard.tsx @@ -1,10 +1,18 @@ import MiningView from './MiningView/MiningView'; import { DashboardContentContainer } from './styles'; +import { useUIStore } from '@app/store/useUIStore.ts'; export default function Dashboard() { + const view = useUIStore((s) => s.view); return ( - + {view === 'mining' ? ( + + ) : ( +
+

{`hello i am a wallet view`}

+
+ )}
); } diff --git a/src/containers/main/MainView.tsx b/src/containers/main/MainView.tsx index b673643db..9109b7008 100644 --- a/src/containers/main/MainView.tsx +++ b/src/containers/main/MainView.tsx @@ -2,14 +2,22 @@ import { useAppConfigStore } from '@app/store/useAppConfigStore'; import { Dashboard } from '@app/containers/main/Dashboard'; import SidebarNavigation from '@app/containers/main/SidebarNavigation/SidebarNavigation.tsx'; import { DashboardContainer } from '@app/theme/styles.ts'; +import { useUIStore } from '@app/store/useUIStore.ts'; export default function MainView() { const visualMode = useAppConfigStore((s) => s.visual_mode); + const view = useUIStore((s) => s.view); return ( - + {view === 'mining' ? ( + + ) : ( +
+

{`hello i am a wallet view`}

+
+ )}
); } diff --git a/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx b/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx index a06a4395b..81c887288 100644 --- a/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx +++ b/src/containers/main/SidebarNavigation/Sidebars/SidebarMini.tsx @@ -1,4 +1,5 @@ import { memo, useState } from 'react'; +import * as m from 'motion/react-m'; import OpenSettingsButton from '@app/containers/floating/Settings/components/OpenSettingsButton.tsx'; import { CubeOutlineSVG } from '@app/assets/icons/cube-outline.tsx'; @@ -10,21 +11,39 @@ import { useUIStore } from '@app/store/useUIStore.ts'; import { setAnimationProperties } from '@app/visuals.ts'; import { IconButton } from '@app/components/elements/buttons/IconButton.tsx'; import { TariOutlineSVG } from '@app/assets/icons/tari-outline.tsx'; +import { IoChevronForwardOutline } from 'react-icons/io5'; const SidebarMini = memo(function SidebarMini() { const setSidebarOpen = useUIStore((s) => s.setSidebarOpen); const sidebarOpen = useUIStore((s) => s.sidebarOpen); - const [activesection, setActiveSection] = useState<'main' | 'wallet'>('main'); + const setView = useUIStore((s) => s.setView); + const view = useUIStore((s) => s.view); + + const miningActive = view === 'mining'; + + const [minerHovered, setMinerHovered] = useState(false); function handleMiningClick() { - if (activesection !== 'main') { - setActiveSection('main'); + if (!miningActive) { + setView('mining'); } else { setSidebarOpen(!sidebarOpen); const offset = ((sidebarOpen ? SB_MINI_WIDTH : SB_WIDTH) + SB_SPACING) / window.innerWidth; setAnimationProperties([{ property: 'cameraOffsetX', value: offset }]); } } + const rotate = sidebarOpen ? '180deg' : '0deg'; + const minerIcon = + minerHovered && miningActive ? ( + + + + ) : ( + + ); return ( @@ -32,14 +51,16 @@ const SidebarMini = memo(function SidebarMini() { - - - setActiveSection('wallet')} + active={view === 'mining'} + onClick={handleMiningClick} + onMouseEnter={() => setMinerHovered(true)} + onMouseLeave={() => setMinerHovered(false)} > + {minerIcon} + + setView('wallet')}> diff --git a/src/store/types.ts b/src/store/types.ts index bf910713c..aff88a725 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -1,4 +1,3 @@ -export type viewType = 'setup' | 'tribes' | 'mining'; -export type backgroundType = 'onboarding' | 'idle' | 'determining' | 'loading' | 'mining' | 'loser' | 'winner'; +export type ViewType = 'mining' | 'wallet'; export type modeType = 'Eco' | 'Ludicrous' | 'Custom'; export type displayMode = 'system' | 'dark' | 'light'; diff --git a/src/store/useUIStore.ts b/src/store/useUIStore.ts index 432b504ae..d1022852d 100644 --- a/src/store/useUIStore.ts +++ b/src/store/useUIStore.ts @@ -1,5 +1,5 @@ import { create } from './create'; -import { backgroundType, viewType } from './types.ts'; +import { ViewType } from './types.ts'; import { Theme } from '@app/theme/types.ts'; import { setAnimationProperties } from '@app/visuals.ts'; import { useAppConfigStore } from './useAppConfigStore.ts'; @@ -10,8 +10,7 @@ type DialogType = DialogTypeTuple[number]; interface State { theme: Theme; - background: backgroundType; - view: viewType; + view: ViewType; latestVersion?: string; sidebarOpen: boolean; showExperimental: boolean; @@ -23,7 +22,6 @@ interface State { adminShow?: 'setup' | 'main' | 'shutdown' | 'orphanChainWarning' | null; } interface Actions { - setBackground: (background: State['background']) => void; setView: (view: State['view']) => void; setSidebarOpen: (sidebarOpen: State['sidebarOpen']) => void; setShowExperimental: (showExperimental: boolean) => void; @@ -38,8 +36,7 @@ const initialDarkMode = window.matchMedia && window.matchMedia('(prefers-color-s const initialState: State = { isWebglNotSupported: false, theme: initialDarkMode ? 'dark' : 'light', - background: 'onboarding', - view: 'setup', + view: 'mining', sidebarOpen: false, dialogToShow: null, showExperimental: false, @@ -50,7 +47,6 @@ const initialState: State = { export const useUIStore = create()((set) => ({ ...initialState, - setBackground: (background) => set({ background }), setView: (view) => set({ view }), setSidebarOpen: (sidebarOpen) => set({ sidebarOpen }), setShowExperimental: (showExperimental) => set({ showExperimental }),