display library disk usage (#976)

enjoy/src/renderer/components/preferences/library-settings.tsx

@@ -1,12 +1,20 @@
 import { t } from "i18next";
 import {
+  Badge,
   Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  ScrollArea,
+  Separator,
 } from "@renderer/components/ui";
-import {
-  AppSettingsProviderContext,
-} from "@renderer/context";
-import { useContext } from "react";
+import { AppSettingsProviderContext } from "@renderer/context";
+import { useContext, useEffect, useState } from "react";
 import { InfoIcon } from "lucide-react";
+import { humanFileSize } from "@/utils";
 
 export const LibrarySettings = () => {
   const { libraryPath, EnjoyApp } = useContext(AppSettingsProviderContext);
@@ -25,12 +33,6 @@ export const LibrarySettings = () => {
     }
   };
 
-  const openLibraryPath = async () => {
-    if (libraryPath) {
-      await EnjoyApp.shell.openPath(libraryPath);
-    }
-  };
-
   return (
     <div className="flex items-start justify-between py-4">
       <div className="">
@@ -40,9 +42,26 @@ export const LibrarySettings = () => {
 
       <div className="">
         <div className="flex items-center justify-end space-x-2 mb-2">
-          <Button variant="secondary" size="sm" onClick={openLibraryPath}>
-            {t("open")}
-          </Button>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="secondary" size="sm">
+                {t("detail")}
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="h-3/5">
+              <DialogHeader>
+                <DialogTitle>{t("usage")}</DialogTitle>
+                <DialogDescription className="sr-only">
+                  Disk usage of Enjoy
+                </DialogDescription>
+              </DialogHeader>
+              <div className="h-full overflow-hidden">
+                <ScrollArea className="h-full px-4">
+                  <DiskUsage />
+                </ScrollArea>
+              </div>
+            </DialogContent>
+          </Dialog>
           <Button
             variant="secondary"
             size="sm"
@@ -59,3 +78,51 @@ export const LibrarySettings = () => {
     </div>
   );
 };
+
+const DiskUsage = () => {
+  const [usage, setUsage] = useState<DiskUsageType>([]);
+  const { EnjoyApp } = useContext(AppSettingsProviderContext);
+
+  const openPath = async (path: string) => {
+    if (path) {
+      await EnjoyApp.shell.openPath(path);
+    }
+  };
+
+  useEffect(() => {
+    EnjoyApp.app.diskUsage().then((usage) => {
+      console.log(usage);
+      setUsage(usage);
+    });
+  }, []);
+
+  return (
+    <div className="grid gap-4">
+      {usage.map((item) => (
+        <div key={item.name}>
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <div className="flex items-center space-x-2 mb-2">
+                <Badge>/{item.path.split("/").pop()}</Badge>
+                <div className="text-sm text-muted-foreground">
+                  {humanFileSize(item.size)}
+                </div>
+              </div>
+              <div className="text-sm">
+                {t(`libraryDescriptions.${item.name}`)}
+              </div>
+            </div>
+            <Button
+              onClick={() => openPath(item.path)}
+              variant="secondary"
+              size="sm"
+            >
+              {t("open")}
+            </Button>
+          </div>
+          <Separator className="my-2" />
+        </div>
+      ))}
+    </div>
+  );
+};