Add a UI for visualizing disks

src/App.css

@@ -2,8 +2,23 @@
 
 body {
   @apply select-none text-white;
+
+  --col1: rgb(0, 0, 0);
+  --col1: rgb(8, 8, 8);
+  --col2: rgb(16, 16, 16);
+  --col3: rgb(32, 32, 32);
+  --col4: rgb(48, 48, 48);
+  --col5: rgb(64, 64, 64);
+  --col6: rgb(80, 80, 80);
+  --col7: rgb(96, 96, 96);
+  --col8: rgb(112, 112, 112);
+  --col9: rgb(128, 128, 128);
 }
 
 img {
   @apply pointer-events-auto;
 }
+
+.icon-large {
+  @apply w-12 h-12;
+}

src/App.tsx

@@ -1,6 +1,10 @@
 import './App.css'
 import { useEffect, useState } from 'react'
 import { invoke } from '@tauri-apps/api/core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faHardDrive } from '@fortawesome/free-solid-svg-icons'
+import { v5 as uuidv5 } from 'uuid'
+import prettyBytes from 'pretty-bytes'
 
 interface Disk {
   name: string
@@ -20,6 +24,49 @@ export default function App () {
   }, [])
 
   return (
-    <p className='whitespace-break-spaces'>{JSON.stringify(disks, null, 4)}</p>
+    <div>
+      <p className='text-center text-2xl mt-2'>Disks</p>
+      <div className='flex flex-col gap-2 p-2'>
+        {disks.map(d => {
+          const usedPercent = (1 - d.available_space / d.total_space) * 100
+
+          return (
+            <div
+              key={uuidv5(JSON.stringify(d), uuidv5.DNS)}
+              className='w-full bg-(--col2) border border-(--col4) rounded-lg px-3 py-1.5 flex flex-row gap-4 items-center relative'
+            >
+              <FontAwesomeIcon
+                icon={faHardDrive}
+                className='icon-large -ml-2'
+              />
+              <div className='flex flex-col -ml-2 w-full'>
+                <p>
+                  {d.name} <span className='text-sm'>({d.mount_point})</span>
+                </p>
+                <p>{prettyBytes(d.total_space)}</p>
+                <div className='w-full h-2 bg-(--col6) rounded mt-2 overflow-hidden'>
+                  <div
+                    className={`h-full ${
+                      usedPercent <= 65
+                        ? 'bg-green-500'
+                        : usedPercent <= 79
+                        ? 'bg-yellow-400'
+                        : 'bg-red-500'
+                    } rounded`}
+                    style={{
+                      width: usedPercent + '%'
+                    }}
+                  />
+                </div>
+              </div>
+              <div className='flex flex-col absolute right-2 text-right top-0.75'>
+                <p>{usedPercent.toFixed(1)}%</p>
+                <p>{prettyBytes(d.total_space - d.available_space)} Free</p>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
   )
 }

src/main.tsx

@@ -4,7 +4,7 @@ import App from './App'
 
 const params = new URLSearchParams(window.location.search)
 const html = document.documentElement
-html.className = params.get('transparent') ? 'bg-transparent' : 'bg-black'
+html.className = params.get('transparent') ? 'bg-transparent' : 'bg-(--col0)'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>