feat(apps): add bottom actions to app layout, configure and animate e…

…xisting actions

.changeset/khaki-poets-double.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added dockedControls to AppAuthedLayout.

.changeset/selfish-parrots-applaud.md

@@ -3,4 +3,4 @@
 'renterd': minor
 ---
 
-The onboarding wizard is now bottom right aligned.
+The onboarding wizard now animates in and out.

.changeset/spotty-readers-shake.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The transfers bar now animates in and out.

apps/hostd/components/DockedControls.tsx

@@ -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>
+  )
+}

apps/hostd/components/HostdAuthedLayout.tsx

@@ -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 && {
@@ -29,6 +30,7 @@ export function HostdAuthedLayout(props: Props) {
           unconfirmed: new BigNumber(wallet.data.unconfirmed),
         }
       }
+      dockedControls={<DockedControls>{dockedControls}</DockedControls>}
       {...props}
     />
   )