Merge pull request #139 from pacholoamit/feat/implement-disk-page

feat: Add disks page v1

index.html

@@ -35,48 +35,7 @@
         background: rgba(0, 0, 0, 0.2);
       }
     </style>
-    <!-- <style type="text/css">
-      ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-      ::-webkit-scrollbar-button {
-        width: 0px;
-        height: 0px;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #152847;
-        border: 0px none #ffffff;
-        border-radius: 50px;
-      }
-      ::-webkit-scrollbar-thumb:hover {
-        background: #152847;
-      }
-      ::-webkit-scrollbar-thumb:active {
-        background: #152847;
-      }
-      ::-webkit-scrollbar-track {
-        background: #070f2c;
-        border: 0px none #ffffff;
-        border-radius: 50px;
-      }
-      ::-webkit-scrollbar-track:hover {
-        background: #070f2c;
-      }
-      ::-webkit-scrollbar-track:active {
-        background: #070f2c;
-      }
-      ::-webkit-scrollbar-corner {
-        background: transparent;
-      }
-    </style> -->
-    <!-- Hide scrollbars -->
-    <!-- <style>
-      body {
-        overflow-y: hidden; /* Hide vertical scrollbar */
-        overflow-x: hidden; /* Hide horizontal scrollbar */
-      }
-    </style> -->
+
     <!-- LOAD GOOGLE FONTS START -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

package.json

@@ -19,6 +19,7 @@
     "@tauri-apps/api": "^1.5.5",
     "apexcharts": "^3.49.1",
     "chartjs-adapter-luxon": "^1.3.1",
+    "classnames": "^2.5.1",
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",
     "lodash.sortby": "^4.7.0",
@@ -27,6 +28,7 @@
     "pocketbase": "^0.21.2",
     "posthog-js": "^1.131.4",
     "react": "^18.3.1",
+    "react-accessible-treeview": "^2.9.0",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
     "react-geiger": "^1.2.0",
@@ -49,4 +51,4 @@
     "vite": "^5.2.11"
   },
   "packageManager": "[email protected]"
-}
+}

src-tauri/src/app.rs

@@ -6,7 +6,7 @@ use std::path::PathBuf;
 use std::sync::{Arc, Mutex};
 use tauri::{State, Window};
 
-use crate::dirstat::{DiskItem, FileInfo};
+use crate::dirstat::{DiskItem, DiskItemMetadata, FileInfo};
 use crate::metrics::Metrics;
 use crate::models::*;
 
@@ -150,7 +150,7 @@ pub async fn deep_scan(path: String) -> Result<Vec<DiskItem>, String> {
                 .filter_map(|entry| DiskItem::from_analyze(&entry.path(), true, volume_id).ok())
                 .collect::<Vec<_>>();
 
-            sub_items.sort_unstable_by(|a, b| a.disk_size.cmp(&b.disk_size).reverse());
+            sub_items.sort_unstable_by(|a, b| a.metadata.size.cmp(&b.metadata.size).reverse());
 
             sub_items
         }
@@ -160,7 +160,7 @@ pub async fn deep_scan(path: String) -> Result<Vec<DiskItem>, String> {
                 .unwrap_or(OsStr::new("."))
                 .to_string_lossy()
                 .to_string(),
-            disk_size: size,
+            metadata: DiskItemMetadata { size },
             children: None,
         }],
     };
@@ -169,57 +169,3 @@ pub async fn deep_scan(path: String) -> Result<Vec<DiskItem>, String> {
 
     Ok(analysed)
 }
-
-// #[tauri::command]
-// pub fn deep_scan(path: String) -> String {
-//     dbg!("Scanning folder", &path);
-//     "Hello from Rust!".to_string()
-// }
-// #[tauri::command]
-// pub fn deep_scan(path: String) -> Result<Vec<FileEntry>, String> {
-//     dbg!("Scanning folder:", &path);
-
-//     let mut files: Vec<FileEntry> = Vec::new();
-//     let path = PathBuf::from(&path);
-
-//     if path.exists() {
-//         if path.is_dir() {
-//             dbg!("Path is a directory");
-//             for entry in fs::read_dir(&path).map_err(|e| e.to_string())? {
-//                 let entry = entry.map_err(|e| e.to_string())?;
-//                 let path = entry.path();
-//                 if path.is_dir() {
-//                     // Recursively check the subdirectory and merge the result
-//                     let sub_dir_files = deep_scan(path.display().to_string())?;
-//                     files.extend(sub_dir_files);
-//                 } else if path.is_file() {
-//                     let metadata = fs::metadata(&path).map_err(|e| e.to_string())?;
-//                     let file_size = metadata.len();
-
-//                     let file_entry = FileEntry {
-//                         path: path.to_str().unwrap().to_string(),
-//                         file_size,
-//                     };
-
-//                     dbg!(&file_entry);
-//                     files.push(file_entry);
-//                 }
-//             }
-//         } else if path.is_file() {
-//             let metadata = fs::metadata(&path).map_err(|e| e.to_string())?;
-//             let file_size = metadata.len();
-
-//             let file_entry = FileEntry {
-//                 path: path.to_str().unwrap().to_string(),
-//                 file_size,
-//             };
-
-//             dbg!(&file_entry);
-//             files.push(file_entry);
-//         }
-//     }
-
-//     format!("{:?}", files);
-
-//     Ok(files)
-// }

src-tauri/src/dirstat/mod.rs

@@ -10,14 +10,24 @@ use ts_rs::TS;
 #[cfg(target_os = "windows")]
 use winapi_util::{file, Handle};
 
+#[derive(Serialize, Deserialize, Debug, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../src/lib/bindings/")]
+
+pub struct DiskItemMetadata {
+    #[ts(type = "number")]
+    pub size: u64,
+}
+// TODO Reduce dupication after confirmed is working
 #[derive(Serialize, Deserialize, Debug, TS)]
 #[serde(rename_all = "camelCase")]
 #[ts(export, export_to = "../../src/lib/bindings/")]
 pub struct DiskItem {
     pub name: String,
-    #[ts(type = "number")]
-    pub disk_size: u64,
+    // #[ts(type = "number")]
+    // pub size: u64,
     pub children: Option<Vec<DiskItem>>,
+    pub metadata: DiskItemMetadata,
 }
 
 impl DiskItem {
@@ -51,17 +61,19 @@ impl DiskItem {
                     })
                     .collect::<Vec<_>>();
 
-                sub_items.sort_unstable_by(|a, b| a.disk_size.cmp(&b.disk_size).reverse());
+                sub_items.sort_unstable_by(|a, b| a.metadata.size.cmp(&b.metadata.size).reverse());
 
                 Ok(DiskItem {
                     name,
-                    disk_size: sub_items.iter().map(|di| di.disk_size).sum(),
+                    metadata: DiskItemMetadata {
+                        size: sub_items.iter().map(|di| di.metadata.size).sum(),
+                    },
                     children: Some(sub_items),
                 })
             }
             FileInfo::File { size, .. } => Ok(DiskItem {
                 name,
-                disk_size: size,
+                metadata: DiskItemMetadata { size },
                 children: None,
             }),
         }

src/App.tsx

@@ -1,5 +1,5 @@
-import AppProvider from "@/providers";
-import AppRoutes from "@/routes";
+import AppProvider from '@/providers';
+import AppRoutes from '@/routes';
 
 const App = () => {
   return (

src/components/area-chart.tsx

@@ -1,9 +1,9 @@
-import * as Highcharts from "highcharts/highstock";
 import HighchartsReact from "highcharts-react-official";
-import { Dispatch, SetStateAction, useEffect, useRef } from "react";
-import { useState } from "react";
-import { useViewportSize } from "@mantine/hooks";
+import * as Highcharts from "highcharts/highstock";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+
 import { useMantineTheme } from "@mantine/core";
+import { useViewportSize } from "@mantine/hooks";
 
 export interface InitialAreaChartStateInput {
   title: {
@@ -27,6 +27,9 @@ export const useAreaChartState = (
 ): [Highcharts.Options, Dispatch<SetStateAction<Highcharts.Options>>] => {
   const { other } = useMantineTheme();
   const [chartOptions, setChartOptions] = useState<Highcharts.Options>({
+    accessibility: {
+      enabled: true,
+    },
     title: {
       text: opts.title.text,
       style: {

src/components/card.tsx

@@ -1,4 +1,4 @@
-import { Card as MantineCard } from "@mantine/core";
+import { Card as MantineCard } from '@mantine/core';
 
 interface CardProps {
   children: React.ReactNode;
@@ -7,7 +7,7 @@ interface CardProps {
 }
 
 const Card: React.FC<CardProps> = ({ children, style, height = "300px" }) => {
-  const styles: React.CSSProperties = { height, ...style };
+  const styles: React.CSSProperties = { height, padding: 16, ...style };
   return (
     <MantineCard style={styles} shadow="xl" p="sm" radius={"md"} withBorder>
       {children}

src/components/dynamic-progress.tsx

@@ -1,27 +1,29 @@
-import { DefaultMantineColor, Progress } from "@mantine/core";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from 'react';
+
+import { DefaultMantineColor, MantineNumberSize, Progress, ProgressProps } from '@mantine/core';
 
 export interface DynamicProgressRangeInput {
   from: number;
   to: number;
   color: DefaultMantineColor;
 }
-export interface DynamicProgressProps {
-  value: number;
-  range?: DynamicProgressRangeInput[];
+export interface DynamicProgressProps extends ProgressProps {
+  value?: number;
+  range: DynamicProgressRangeInput[];
+  size: MantineNumberSize;
 }
 
 const DynamicProgress: React.FC<DynamicProgressProps> = (props) => {
-  const { value, range } = props;
+  const { value = 0, range } = props;
   const [color, setColor] = useState("blue");
 
   useEffect(() => {
-    if (!range) return;
+    if (!range && !value) return;
     const currentColor = range.find((r) => value >= r.from && value <= r.to)?.color;
     if (currentColor) setColor(currentColor);
   }, [value, range]);
 
-  return <Progress value={value} color={color} size={"xs"} />;
+  return <Progress color={color} {...props} />;
 };
 
 export default DynamicProgress;

src/components/gradient-radial-chart.tsx

@@ -1,5 +1,6 @@
-import ReactApexChart from "react-apexcharts";
-import Card from "@/components/card";
+import ReactApexChart from 'react-apexcharts';
+
+import Card from '@/components/card';
 
 interface GradientRadialChartProps {
   series: ApexAxisChartSeries | ApexNonAxisChartSeries;

src/components/page-wrapper.tsx

@@ -1,4 +1,4 @@
-import { Stack, Title } from "@mantine/core";
+import { Stack, Title } from '@mantine/core';
 
 interface PageWrapperProps {
   name: string;

src/components/stats-ring.tsx

@@ -1,6 +1,7 @@
-import { DefaultMantineColor, Paper, Group, RingProgress, Center, rem, Text } from "@mantine/core";
-import { IconArrowUpRight, IconArrowDownRight, TablerIconsProps } from "@tabler/icons-react";
-import Card from "./card";
+import { Center, DefaultMantineColor, Group, Paper, rem, RingProgress, Text } from '@mantine/core';
+import { IconArrowDownRight, IconArrowUpRight, TablerIconsProps } from '@tabler/icons-react';
+
+import Card from './card';
 
 interface StatsRingProps {
   label: string;