Skip to content

Commit

Permalink
feat(apps): add bottom actions to app layout, configure and animate e…
Browse files Browse the repository at this point in the history
…xisting actions
  • Loading branch information
alexfreska committed Oct 25, 2024
1 parent 41da4e8 commit b17ede4
Show file tree
Hide file tree
Showing 21 changed files with 264 additions and 162 deletions.
5 changes: 5 additions & 0 deletions .changeset/khaki-poets-double.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@siafoundation/design-system': minor
---

Added dockedControls to AppAuthedLayout.
2 changes: 1 addition & 1 deletion .changeset/selfish-parrots-applaud.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
'renterd': minor
---

The onboarding wizard is now bottom right aligned.
The onboarding wizard now animates in and out.
5 changes: 5 additions & 0 deletions .changeset/spotty-readers-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'renterd': minor
---

The transfers bar now animates in and out.
11 changes: 11 additions & 0 deletions apps/hostd/components/DockedControls.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'
import { OnboardingBar } from './OnboardingBar'

export function DockedControls({ children }: { children?: React.ReactNode }) {
return (
<div className="flex flex-col gap-2">
{children}
<OnboardingBar />
</div>
)
}
6 changes: 4 additions & 2 deletions apps/hostd/components/HostdAuthedLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@ import { connectivityRoute } from '../config/routes'
import { useSyncStatus } from '../hooks/useSyncStatus'
import { HostdTestnetWarningBanner } from './HostdTestnetWarningBanner'
import { Profile } from './Profile'
import { DockedControls } from './DockedControls'

type Props = Omit<
React.ComponentProps<typeof AppAuthedLayout>,
'appName' | 'connectivityRoute' | 'walletBalance' | 'profile' | 'isSynced'
>

export function HostdAuthedLayout(props: Props) {
export function HostdAuthedLayout({ dockedControls, ...props }: Props) {
const wallet = useWallet()
const { isSynced } = useSyncStatus()
return (
<AppAuthedLayout
appName="hostd"
connectivityRoute={connectivityRoute}
banner={<HostdTestnetWarningBanner />}
profile={<Profile />}
banner={<HostdTestnetWarningBanner />}
isSynced={isSynced}
walletBalanceSc={
wallet.data && {
Expand All @@ -29,6 +30,7 @@ export function HostdAuthedLayout(props: Props) {
unconfirmed: new BigNumber(wallet.data.unconfirmed),
}
}
dockedControls={<DockedControls>{dockedControls}</DockedControls>}
{...props}
/>
)
Expand Down
54 changes: 36 additions & 18 deletions apps/hostd/components/OnboardingBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { toHastings } from '@siafoundation/units'
import { useAppSettings } from '@siafoundation/react-core'
import { useVolumes } from '../contexts/volumes'
import useLocalStorageState from 'use-local-storage-state'
import { AnimatePresence, motion } from 'framer-motion'

export function OnboardingBar() {
const { isUnlockedAndAuthedRoute } = useAppSettings()
Expand Down Expand Up @@ -61,13 +62,13 @@ export function OnboardingBar() {
const totalSteps = steps.length
const completedSteps = steps.filter((step) => step).length

if (totalSteps === completedSteps) {
return null
}
let el = null

if (maximized) {
return (
<div className="z-20 fixed bottom-5 right-5 flex justify-center">
if (totalSteps === completedSteps) {
el = null
} else if (maximized) {
el = (
<div className="flex justify-center">
<Panel className="w-[400px] flex flex-col max-h-[600px]">
<ScrollArea>
<div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
Expand Down Expand Up @@ -230,20 +231,37 @@ export function OnboardingBar() {
</Panel>
</div>
)
} else {
el = (
<div className="flex justify-center">
<Button
onClick={() => setMaximized(true)}
size="large"
className="flex gap-3 !px-3"
>
<Text className="flex items-center gap-1">
<Logo />
Setup: {completedSteps}/{totalSteps} steps complete
</Text>
</Button>
</div>
)
}

return (
<div className="z-30 fixed bottom-5 right-5 flex justify-center">
<Button
onClick={() => setMaximized(true)}
size="large"
className="flex gap-3 !px-3"
>
<Text className="flex items-center gap-1">
<Logo />
Setup: {completedSteps}/{totalSteps} steps complete
</Text>
</Button>
</div>
<AnimatePresence>
{el && (
<motion.div
className="pointer-events-auto"
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 100, opacity: 0 }}
transition={{ duration: 0.2 }}
>
{el}
</motion.div>
)}
</AnimatePresence>
)
}

Expand Down
1 change: 1 addition & 0 deletions apps/hostd/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default function App(props: AppPropsWithLayout) {
</NextAppCsr>
)
}

function AppCore({ Component, pageProps }: AppPropsWithLayout) {
const Layout = Component.Layout
const layoutProps = Component.useLayoutProps()
Expand Down
13 changes: 13 additions & 0 deletions apps/renterd/components/DockedControls.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react'
import { OnboardingBar } from './OnboardingBar'
import { TransfersBar } from './TransfersBar'

export function DockedControls({ children }: { children?: React.ReactNode }) {
return (
<div className="flex flex-col gap-2">
{children}
<TransfersBar />
<OnboardingBar />
</div>
)
}
5 changes: 5 additions & 0 deletions apps/renterd/components/Keys/KeysDockedControls.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { KeysBatchMenu } from './KeysBatchMenu'

export function KeysDockedControls() {
return <KeysBatchMenu />
}
2 changes: 2 additions & 0 deletions apps/renterd/components/Keys/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from '../RenterdAuthedLayout'
import { KeysActionsMenu } from './KeysActionsMenu'
import { KeysStatsMenu } from './KeysStatsMenu'
import { KeysDockedControls } from './KeysDockedControls'

export const Layout = RenterdAuthedLayout
export function useLayoutProps(): RenterdAuthedPageLayoutProps {
Expand All @@ -18,5 +19,6 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
openSettings: () => openDialog('settings'),
actions: <KeysActionsMenu />,
stats: <KeysStatsMenu />,
dockedControls: <KeysDockedControls />,
}
}
2 changes: 0 additions & 2 deletions apps/renterd/components/Keys/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { StateNoneMatching } from './StateNoneMatching'
import { StateNoneYet } from './StateNoneYet'
import { StateError } from './StateError'
import { useKeys } from '../../contexts/keys'
import { KeysBatchMenu } from './KeysBatchMenu'

export function Keys() {
const {
Expand All @@ -20,7 +19,6 @@ export function Keys() {

return (
<div className="p-6 min-w-fit">
<KeysBatchMenu />
<Table
testId="keysTable"
isLoading={dataState === 'loading'}
Expand Down
54 changes: 36 additions & 18 deletions apps/renterd/components/OnboardingBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import BigNumber from 'bignumber.js'
import { humanSiacoin } from '@siafoundation/units'
import { useAppSettings } from '@siafoundation/react-core'
import useLocalStorageState from 'use-local-storage-state'
import { AnimatePresence, motion } from 'framer-motion'

export function OnboardingBar() {
const { isUnlockedAndAuthedRoute } = useAppSettings()
Expand Down Expand Up @@ -64,13 +65,13 @@ export function OnboardingBar() {
const totalSteps = steps.length
const completedSteps = steps.filter((step) => step).length

if (totalSteps === completedSteps) {
return null
}
let el = null

if (maximized) {
return (
<div className="z-20 fixed bottom-5 right-5 flex justify-center">
if (totalSteps === completedSteps) {
el = null
} else if (maximized) {
el = (
<div className="flex justify-center">
<Panel className="w-[400px] flex flex-col max-h-[600px]">
<ScrollArea>
<div className="flex justify-between items-center px-3 py-2 border-b border-gray-200 dark:border-graydark-300">
Expand Down Expand Up @@ -237,20 +238,37 @@ export function OnboardingBar() {
</Panel>
</div>
)
} else {
el = (
<div className="flex justify-center">
<Button
onClick={() => setMaximized(true)}
size="large"
className="flex gap-3 !px-3"
>
<Text size="14" className="flex items-center gap-1">
<Logo />
Setup: {completedSteps}/{totalSteps} steps complete
</Text>
</Button>
</div>
)
}

return (
<div className="z-30 fixed bottom-5 right-5 flex justify-center">
<Button
onClick={() => setMaximized(true)}
size="large"
className="flex gap-3 !px-3"
>
<Text size="14" className="flex items-center gap-1">
<Logo />
Setup: {completedSteps}/{totalSteps} steps complete
</Text>
</Button>
</div>
<AnimatePresence>
{el && (
<motion.div
className="pointer-events-auto"
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 100, opacity: 0 }}
transition={{ duration: 0.2 }}
>
{el}
</motion.div>
)}
</AnimatePresence>
)
}

Expand Down
8 changes: 5 additions & 3 deletions apps/renterd/components/RenterdAuthedLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,32 @@ import { connectivityRoute } from '../config/routes'
import { useSyncStatus } from '../hooks/useSyncStatus'
import { Profile } from './Profile'
import { RenterdTestnetWarningBanner } from './RenterdTestnetWarningBanner'
import { DockedControls } from './DockedControls'

type Props = Omit<
React.ComponentProps<typeof AppAuthedLayout>,
'appName' | 'connectivityRoute' | 'walletBalance' | 'profile' | 'isSynced'
>

export function RenterdAuthedLayout(props: Props) {
export function RenterdAuthedLayout({ dockedControls, ...props }: Props) {
const wallet = useWallet()
const { isSynced } = useSyncStatus()
return (
<AppAuthedLayout
appName="renterd"
connectivityRoute={connectivityRoute}
profile={<Profile />}
banner={<RenterdTestnetWarningBanner />}
connectivityRoute={connectivityRoute}
isSynced={isSynced}
walletBalanceSc={
wallet.data && {
spendable: new BigNumber(wallet.data.spendable),
confirmed: new BigNumber(wallet.data.confirmed),
unconfirmed: new BigNumber(wallet.data.unconfirmed),
immature: new BigNumber(wallet.data.immature),
unconfirmed: new BigNumber(wallet.data.unconfirmed),
}
}
dockedControls={<DockedControls>{dockedControls}</DockedControls>}
{...props}
/>
)
Expand Down
Loading

0 comments on commit b17ede4

Please sign in to comment.