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

…xisting actions
SiaFoundation · Oct 25, 2024 · 8f5edf6 · 8f5edf6
1 parent b3d0c9f
commit 8f5edf6
Show file tree

Hide file tree

Showing 21 changed files with 264 additions and 162 deletions.
diff --git a/.changeset/khaki-poets-double.md b/.changeset/khaki-poets-double.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added dockedControls to AppAuthedLayout.
diff --git a/.changeset/selfish-parrots-applaud.md b/.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.
diff --git a/.changeset/spotty-readers-shake.md b/.changeset/spotty-readers-shake.md
@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+The transfers bar now animates in and out.
diff --git a/apps/hostd/components/DockedControls.tsx b/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>
+  )
+}
diff --git a/apps/hostd/components/HostdAuthedLayout.tsx b/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}
     />
   )

diff --git a/apps/hostd/components/OnboardingBar.tsx b/apps/hostd/components/OnboardingBar.tsx
@@ -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()
@@ -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">
@@ -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>
   )
 }
 

diff --git a/apps/hostd/pages/_app.tsx b/apps/hostd/pages/_app.tsx
@@ -33,6 +33,7 @@ export default function App(props: AppPropsWithLayout) {
     </NextAppCsr>
   )
 }
+
 function AppCore({ Component, pageProps }: AppPropsWithLayout) {
   const Layout = Component.Layout
   const layoutProps = Component.useLayoutProps()

diff --git a/apps/renterd/components/DockedControls.tsx b/apps/renterd/components/DockedControls.tsx
@@ -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>
+  )
+}
diff --git a/apps/renterd/components/Keys/KeysDockedControls.tsx b/apps/renterd/components/Keys/KeysDockedControls.tsx
@@ -0,0 +1,5 @@
+import { KeysBatchMenu } from './KeysBatchMenu'
+
+export function KeysDockedControls() {
+  return <KeysBatchMenu />
+}
diff --git a/apps/renterd/components/Keys/Layout.tsx b/apps/renterd/components/Keys/Layout.tsx
@@ -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 {
@@ -18,5 +19,6 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
     openSettings: () => openDialog('settings'),
     actions: <KeysActionsMenu />,
     stats: <KeysStatsMenu />,
+    dockedControls: <KeysDockedControls />,
   }
 }
diff --git a/apps/renterd/components/Keys/index.tsx b/apps/renterd/components/Keys/index.tsx
@@ -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 {
@@ -20,7 +19,6 @@ export function Keys() {
 
   return (
     <div className="p-6 min-w-fit">
-      <KeysBatchMenu />
       <Table
         testId="keysTable"
         isLoading={dataState === 'loading'}

diff --git a/apps/renterd/components/OnboardingBar.tsx b/apps/renterd/components/OnboardingBar.tsx
@@ -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()
@@ -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">
@@ -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>
   )
 }
 

diff --git a/apps/renterd/components/RenterdAuthedLayout.tsx b/apps/renterd/components/RenterdAuthedLayout.tsx
@@ -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}
     />
   )