feat: add web app support, update disk usage UI, hide empty categories

README.md

@@ -8,7 +8,8 @@ A modern, high-performance system optimizer for macOS, built with **Electron**,
 - **Flash Clean**: Instantly remove system caches, logs, Xcode cache, Homebrew cache, and manage Trash with a detailed inspection view.
 - **App Uninstaller**: View installed applications, their sizes, and thoroughly remove them along with their associated preference files and caches.
 - **Deep Clean**: Scan for large files and heavy folders.
-- **Real-time Monitoring**: Track disk usage and category sizes.
+- **Real-time Monitoring**: Track disk usage and category sizes with accurate categorical percentages.
+- **Web App Support**: Access the fully functional dashboard remotely or locally via any standard web browser at `http://localhost:36969` (or your NAS host IP).
 - **Native Menubar Integration**: Includes a responsive, monochrome template icon that adapts to macOS light/dark modes perfectly.
 - **Cross-Platform**: Runs natively with compiled Go backends on Apple Silicon (M1/M2/M3), Intel Macs, and Windows.
 
@@ -39,10 +40,10 @@ To create distributable release binaries (Universal `.dmg` for macOS, Portable `
 ### 1. Build the App
 ```bash
 # macOS Universal DMG
-pnpm run build && pnpm run electron:build && npx electron-builder --mac --universal
+pnpm run build:mac
 
 # Windows Portable EXE
-pnpm run build && pnpm run electron:build && npx electron-builder --win portable --x64
+pnpm run build:win
 ```
 
 ### 2. Locate the Installer

backend/main.go

@@ -47,8 +47,24 @@ func main() {
 	http.HandleFunc("/api/apps/action", handleAppAction)
 	http.HandleFunc("/api/apps/uninstall", handleAppUninstall)
 
-	// Static File Serving is handled directly by Electron.
+	// Serve Static Files for Web Mode
-	// Backend only needs to provide API routes.
+	// This serves the built Vite frontend from the `dist` folder.
+	distPath := filepath.Join("..", "dist")
+	if _, err := os.Stat("dist"); err == nil {
+		distPath = "dist" // If running directly from the project root
+	}
+
+	fs := http.FileServer(http.Dir(distPath))
+	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		// If the requested file exists, serve it
+		path := filepath.Join(distPath, r.URL.Path)
+		if _, err := os.Stat(path); err == nil {
+			fs.ServeHTTP(w, r)
+			return
+		}
+		// Otherwise, fallback to index.html for SPA routing
+		http.ServeFile(w, r, filepath.Join(distPath, "index.html"))
+	})
 
 	fmt.Printf("🚀 Antigravity Backend running on http://localhost%s\n", Port)
 

src/components/Dashboard.tsx

@@ -414,13 +414,14 @@ export function Dashboard() {
                                         {isSystemDrive && segments.length > 0 ? (
                                             segments.map((seg, i) => {
                                                 const width = total > 0 ? (seg.size / total) * 100 : 0;
+                                                const segUsedPercent = used > 0 ? (seg.size / used) * 100 : 0;
                                                 if (width < 0.5) return null; // Hide tiny segments
                                                 return (
                                                     <div
                                                         key={i}
                                                         className={`h-full bg-gradient-to-b ${seg.color} border-r border-white/20 last:border-0`}
                                                         style={{ width: `${width}%` }}
-                                                        title={`${seg.label}: ${seg.size.toFixed(2)} GB`}
+                                                        title={`${seg.label}: ${seg.size.toFixed(2)} GB (${width.toFixed(1)}% of total, ${segUsedPercent.toFixed(1)}% of used)`}
                                                     />
                                                 );
                                             })
@@ -436,12 +437,18 @@ export function Dashboard() {
                                     {/* Legend for System Drive */}
                                     {isSystemDrive && segments.length > 0 && (
                                         <div className="flex flex-wrap gap-x-4 gap-y-2 mt-3">
-                                            {segments.map((seg, i) => seg.size > 0.1 && (
+                                            {segments.map((seg, i) => {
+                                                if (seg.size <= 0.1) return null;
+                                                const width = total > 0 ? (seg.size / total) * 100 : 0;
+                                                return (
                                                     <div key={i} className="flex items-center gap-1.5">
                                                         <div className={`w-2.5 h-2.5 rounded-full ${seg.legendColor} shadow-sm`} />
-                                                    <span className="text-[11px] font-medium text-gray-600">{seg.label}</span>
+                                                        <span className="text-[11px] font-medium text-gray-600">
+                                                            {seg.label} {width > 0 && `(${width.toFixed(1)}%)`}
+                                                        </span>
                                                     </div>
-                                            ))}
+                                                );
+                                            })}
                                         </div>
                                     )}
                                 </div>
@@ -481,6 +488,7 @@ export function Dashboard() {
                     <div className="liquid-glass-heavy rounded-[var(--radius-lg)] overflow-hidden flex flex-col min-h-0 relative border border-white/20 dark:border-white/10 shadow-lg max-h-full">
                         <div className="overflow-y-auto flex-1 stagger-children py-3 px-3">
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                                {categorySizes.apps !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Apps />}
                                         label="Applications"
@@ -489,6 +497,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Installed apps & support files"
                                     />
+                                )}
+                                {categorySizes.documents !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Documents />}
                                         label="Documents"
@@ -497,6 +507,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Personal documents folder"
                                     />
+                                )}
+                                {categorySizes.archives !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Archives />}
                                         label="Archives"
@@ -505,6 +517,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Compressed files (.zip, .rar, .7z)"
                                     />
+                                )}
+                                {categorySizes.downloads !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Downloads />}
                                         label="Downloads"
@@ -513,6 +527,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Downloads folder items"
                                     />
+                                )}
+                                {categorySizes.desktop !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Desktop />}
                                         label="Desktop"
@@ -521,6 +537,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Files on your desktop"
                                     />
+                                )}
+                                {categorySizes.music !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Music />}
                                         label="Music"
@@ -529,6 +547,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="iTunes/Music library & files"
                                     />
+                                )}
+                                {categorySizes.movies !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Movies />}
                                         label="Movies"
@@ -537,6 +557,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Movies folder & video files"
                                     />
+                                )}
+                                {categorySizes.virtual_machines !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.VirtualMachines />}
                                         label="Disk Images"
@@ -545,6 +567,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="ISOs, VM disks, & installers"
                                     />
+                                )}
+                                {categorySizes.games !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Games />}
                                         label="Games"
@@ -553,6 +577,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Steam, Epic, EA, Ubisoft"
                                     />
+                                )}
+                                {categorySizes.ai !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.AI />}
                                         label="AI Models"
@@ -561,6 +587,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="ComfyUI, WebUI, Checkpoints"
                                     />
+                                )}
+                                {categorySizes.docker !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Docker />}
                                         label="Docker"
@@ -569,6 +597,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Docker Desktop disk usage"
                                     />
+                                )}
+                                {categorySizes.cache !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Cache />}
                                         label="System Cache"
@@ -577,6 +607,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Browser & System temporary files"
                                     />
+                                )}
+                                {categorySizes.icloud !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.CloudDrive />}
                                         label="iCloud Drive"
@@ -585,6 +617,8 @@ export function Dashboard() {
                                         actionIcon
                                         description="Local iCloud file copies"
                                     />
+                                )}
+                                {categorySizes.photos !== 0 && (
                                     <CategoryRow
                                         icon={<Icons.Photos />}
                                         label="Photos"
@@ -593,6 +627,7 @@ export function Dashboard() {
                                         actionIcon
                                         description="Photos library caches"
                                     />
+                                )}
                                 <CategoryRow
                                     icon={<Icons.Trash />}
                                     label="Trash"

src/main.tsx

@@ -3,6 +3,14 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.getRegistrations().then((registrations) => {
+    for (let registration of registrations) {
+      registration.unregister();
+    }
+  });
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />