fix: ordering of spaces in usage bar (#70)

* Orders spaces smallest to biggest, so that a single big space doesn't
eclipse others
* Removes rendering divs for spaces that have zero bytes

Before:
<img width="384" alt="Screenshot 2023-12-18 at 15 39 05"
src="https://github.com/web3-storage/console/assets/152863/914a9465-0c6d-4f4d-93b0-4de3552eaa5e">

After:
<img width="395" alt="Screenshot 2023-12-18 at 15 42 43"
src="https://github.com/web3-storage/console/assets/152863/c64ffdc3-7798-4a87-9947-f53ad1859fb2">

Note: smaller spaces listed first, although I have one big space that
totally blows out the bar

packages/console/src/components/UsageBar.tsx

@@ -66,7 +66,7 @@ export function UsageBar (): ReactNode {
       {usage && limit ? (
         <>
           <div className='rounded-full bg-white/20 overflow-hidden whitespace-nowrap outline outline-white/40 mt-3 mb-3 shadow-inner' style={{ fontSize: 0, height: BarHeight }}>
-            {Object.entries(usage).sort((a, b) => b[1] - a[1]).map(([space, total]) => {
+            {Object.entries(usage).filter(u => u[1] > 0).sort((a, b) => a[1] - b[1]).map(([space, total]) => {
               return (
                 <div
                   key={space}