✨ improve: tighten y-padding of dashboard elements (#2371)

In response to feedback that new dashboard y padding takes up too much real estate this update returns it to what you'd see in 6.13.0. ## Type of change **PATCH: backwards compatible change**
roots · Jul 11, 2023 · b5535b2 · b5535b2
1 parent ea427ad
commit b5535b2
Show file tree

Hide file tree

Showing 13 changed files with 368 additions and 472 deletions.
diff --git a/sources/@roots/bud-dashboard/src/application.tsx b/sources/@roots/bud-dashboard/src/application.tsx
@@ -2,18 +2,15 @@ import type {Bud} from '@roots/bud-framework'
 import type {StatsCompilation} from '@roots/bud-framework/config'
 import type {BudHandler} from '@roots/bud-support/errors'
 
-import {exit, stdout} from 'node:process'
+import {exit} from 'node:process'
 
 import Compilation from '@roots/bud-dashboard/views/compilation'
 import Debug from '@roots/bud-dashboard/views/debug'
 import Error from '@roots/bud-dashboard/views/node-error'
 import Server from '@roots/bud-dashboard/views/server'
 import {
   Box,
-  Fragment,
   type PropsWithChildren,
-  Spinner,
-  Text,
   useApp,
   useInput,
   useState,
@@ -62,19 +59,12 @@ export const Application = ({
 }: Props) => {
   if (error) return <Error error={error} />
 
-  return (
-    <Box flexDirection="column" gap={1} marginY={1} width={stdout.columns}>
-      {!compilations?.length && status && (
-        <Text dimColor wrap="truncate-end">
-          <Spinner type="simpleDots" />
-          {` `}
-          {status}
-        </Text>
-      )}
+  if (!compilations?.length) return null
 
+  return (
+    <Box flexDirection="column" gap={1} marginY={1}>
       {compilations?.map((compilation, id) => {
-        if (isolated > 0 && id + 1 !== isolated)
-          return <Fragment key={id}></Fragment>
+        if (isolated > 0 && id + 1 !== isolated) return null
 
         return (
           <Box flexDirection="column" gap={1} key={id}>
@@ -124,12 +114,28 @@ export const TeletypeApplication = ({
   const [isolated, setIsolated] = useState(0)
 
   useInput((key, input) => {
-    key === `a` && setDisplayAssets(!displayAssets)
-    key === `e` && setDisplayEntrypoints(!displayEntrypoints)
-    key === `d` && setDisplayDebug(!debug)
-    key === `s` && setDisplayServerInfo(!displayServerInfo)
-    key === `c` && setCompact(!compact)
-    key === `0` && setIsolated(0)
+    switch (key) {
+      case `a`:
+        setDisplayAssets(!displayAssets)
+        break
+      case `e`:
+        setDisplayEntrypoints(!displayEntrypoints)
+        break
+      case `d`:
+        setDisplayDebug(!debug)
+        break
+      case `s`:
+        setDisplayServerInfo(!displayServerInfo)
+        break
+      case `c`:
+        setCompact(!compact)
+        break
+      case `0`:
+        setIsolated(0)
+        break
+      default:
+        break
+    }
 
     new Array(9)
       .fill(0)

diff --git a/sources/@roots/bud-dashboard/src/components/asset.tsx b/sources/@roots/bud-dashboard/src/components/asset.tsx
@@ -22,6 +22,7 @@ const Asset = (asset: Props) => {
     >
       <Box flexDirection="row" overflowX="hidden">
         <Text dimColor={!asset.emitted} wrap="truncate-end">
+          {` `}
           {!asset.emitted ? figures.almostEqual : figures.pointerSmall}
           {` `}
           {asset.name}
@@ -37,7 +38,9 @@ const Asset = (asset: Props) => {
             </Text>
           )}
         </Box>
-        <Text dimColor>{`${formatSize(asset.size)}`.trim()}</Text>
+        <Text dimColor>
+          {`${asset.size > 0 ? formatSize(asset.size) : `ø`}`.trim()}
+        </Text>
       </Box>
     </Box>
   )

diff --git a/sources/@roots/bud-dashboard/src/components/assets.component.tsx b/sources/@roots/bud-dashboard/src/components/assets.component.tsx
diff --git a/sources/@roots/bud-dashboard/src/components/view.tsx b/sources/@roots/bud-dashboard/src/components/view.tsx
@@ -1,25 +1,28 @@
 import figures from '@roots/bud-support/figures'
 import {Box, Text} from '@roots/bud-support/ink'
 
+export interface Props {
+  borderColor?: string
+  children?: any
+  compact?: boolean
+  footer?: any
+  head?: any
+  paddingY?: number
+}
+
 const View = ({
   borderColor = `dim`,
   children,
   compact,
   footer,
   head,
-}: {
-  borderColor?: string
-  children?: any
-  compact?: boolean
-  footer?: any
-  head?: any
-}) => {
+  paddingY = 0,
+}: Props) => {
   return (
     <Box flexDirection="column" overflowX="hidden" width="100%">
       <Box flexDirection="row" gap={1} overflowX="hidden" width="100%">
-        <Box flexDirection="row" gap={0} minWidth={2}>
+        <Box flexDirection="row" gap={0} minWidth={1}>
           <Text color={borderColor}>{figures.lineDownRightArc}</Text>
-          <Text color={borderColor}>{figures.line}</Text>
         </Box>
         {head}
       </Box>
@@ -35,19 +38,18 @@ const View = ({
           flexDirection="column"
           gap={1}
           overflowX="hidden"
-          paddingBottom={1}
+          paddingBottom={paddingY}
           paddingLeft={1}
-          paddingTop={1}
+          paddingTop={paddingY}
           width="100%"
         >
           {children}
         </Box>
       )}
 
       <Box flexDirection="row" gap={1} overflowX="hidden" width="100%">
-        <Box flexDirection="row" gap={0} minWidth={2}>
+        <Box flexDirection="row" gap={0} minWidth={1}>
           <Text color={borderColor}>{figures.lineUpRightArc}</Text>
-          <Text color={borderColor}>{figures.line}</Text>
         </Box>
 
         {footer}

diff --git a/sources/@roots/bud-dashboard/src/service.tsx b/sources/@roots/bud-dashboard/src/service.tsx
@@ -243,7 +243,7 @@ export class Dashboard extends Service implements BudDashboard {
      * the current state.
      */
     renderApplication(
-      <Box flexDirection="column" width="100%">
+      <Box flexDirection="column">
         <Console messages={this.messages} />
 
         <App

diff --git a/sources/@roots/bud-dashboard/src/views/assets.tsx b/sources/@roots/bud-dashboard/src/views/assets.tsx
@@ -1,12 +1,9 @@
 import type {StatsCompilation} from '@roots/bud-framework/config'
 
 import Assets from '@roots/bud-dashboard/components/assets'
-import View from '@roots/bud-dashboard/components/view'
 import {useCompilationColor} from '@roots/bud-dashboard/hooks/useCompilationColor'
-import {useLongestNamedObjectLength} from '@roots/bud-dashboard/hooks/useLongestNamedObjectLength'
 import figures from '@roots/bud-support/figures'
-import {size} from '@roots/bud-support/human-readable'
-import {Text} from '@roots/bud-support/ink'
+import {Box, Text} from '@roots/bud-support/ink'
 
 export interface Props {
   compact?: boolean
@@ -21,63 +18,64 @@ export default function CompilationAssets({
   displayAssets,
   limit = 5,
 }: Props) {
-  const minWidth = useLongestNamedObjectLength(
-    [...(compilation?.assets ?? [])]
-      .filter(
-        asset =>
-          !asset.name?.endsWith(`js`) &&
-          !asset.name?.endsWith(`css`) &&
-          asset.size > 0,
-      )
-      .slice(0, limit),
-  )
   const compilationColor = useCompilationColor(compilation, `cyan`)
 
   if (!displayAssets) return null
   if (!compilation?.assets) return null
 
-  const assets = [...compilation.assets].filter(
-    asset =>
-      !asset.name?.endsWith(`js`) &&
-      !asset.name?.endsWith(`css`) &&
-      asset.size > 0,
-  )
+  const filteredAssets = [...compilation.assets]
+    .sort((a, b) => {
+      if (a.size < b.size) return 1
+      if (a.size > b.size) return -1
+      return 0
+    })
+    .sort((a, b) => {
+      if (a.emitted && !b.emitted) return -1
+      if (!a.emitted && b.emitted) return 1
+      return 0
+    })
+    .filter(
+      asset =>
+        !asset.name?.endsWith(`js`) &&
+        !asset.name?.endsWith(`css`) &&
+        !asset.name?.endsWith(`map`) &&
+        !asset.name?.endsWith(`json`),
+    )
+
+  const assets = filteredAssets.splice(limit * -1)
 
-  const hidden = assets.splice(limit)
+  if (assets.length === 0) return null
 
-  return (
-    <View
-      compact={compact}
-      footer={<Footer assets={assets} hidden={hidden} />}
-      head={<Text color={compilationColor}>assets</Text>}
+  const hiddenCount = compilation.assets.length - assets.length
+
+  return compact ? (
+    <Box
+      flexDirection="row"
+      flexWrap="wrap"
+      justifyContent="space-between"
     >
-      <Assets assets={assets} minWidth={minWidth} />
+      <Text color={compilationColor}>{`assets`}</Text>
+      <Text>{compilation.assets.length} modules</Text>
+    </Box>
+  ) : (
+    <Box flexDirection="column">
+      <Box
+        flexDirection="row"
+        flexWrap="wrap"
+        justifyContent="space-between"
+      >
+        <Text color={compilationColor}>{`assets`}</Text>
+      </Box>
+
+      <Assets assets={assets} />
 
-      {hidden?.length > 0 && (
+      {hiddenCount > 0 && (
         <Text dimColor wrap="truncate-end">
-          {`${figures.ellipsis} ${hidden.length} additional ${
-            hidden.length > 1 ? `assets` : `asset`
+          {` ${figures.ellipsis} ${hiddenCount} additional ${
+            hiddenCount > 1 ? `assets` : `asset`
           } not shown`}
         </Text>
       )}
-    </View>
-  )
-}
-
-const Footer = ({
-  assets,
-  hidden,
-}: {
-  assets?: Array<{size: number}>
-  hidden?: Array<{size: number}>
-}) => {
-  if (!assets) return <Text dimColor>...</Text>
-
-  const totalFileSize = size(
-    [...assets, ...(hidden ?? [])].reduce(
-      (value, asset): number => value + asset.size,
-      0,
-    ),
+    </Box>
   )
-  return <Text dimColor>{`${totalFileSize}`}</Text>
 }