feat: upgrade to React 19, Tailwind 4, sysinfo 0.38 and implement manual chunk splitting

PKGBUILD

@@ -0,0 +1,44 @@
+# Maintainer: narl <narl@narl.io>
+pkgname=syspulse-rs
+_pkgname=syspulse
+pkgver=0.1.0
+pkgrel=1
+pkgdesc="A professional Linux system profiler for Wayland"
+arch=('x86_64')
+url="https://git.narl.io/nvrl/SysPulse-rs"
+license=('MIT')
+depends=('webkit2gtk-4.1' 'gtk3' 'libayatana-appindicator' 'librsvg')
+makedepends=('nodejs' 'npm' 'rust' 'cargo')
+source=("git+ssh://git@narl.io/nvrl/SysPulse-rs.git")
+sha256sums=('SKIP')
+
+build() {
+  cd "$pkgname"
+  npm install
+  npm run build
+  npm run tauri build
+}
+
+package() {
+  cd "$pkgname"
+  
+  # Install binary
+  install -Dm755 "src-tauri/target/release/$_pkgname-rs" "$pkgdir/usr/bin/$_pkgname"
+  
+  # Install icons
+  install -Dm644 "src-tauri/icons/128x128.png" "$pkgdir/usr/share/icons/hicolor/128x128/apps/$_pkgname.png"
+  install -Dm644 "src-tauri/icons/32x32.png" "$pkgdir/usr/share/icons/hicolor/32x32/apps/$_pkgname.png"
+  
+  # Create desktop file
+  mkdir -p "$pkgdir/usr/share/applications"
+  cat > "$pkgdir/usr/share/applications/$_pkgname.desktop" <<EOF
+[Desktop Entry]
+Name=SysPulse
+Comment=Professional System Profiler
+Exec=/usr/bin/$_pkgname
+Icon=$_pkgname
+Terminal=false
+Type=Application
+Categories=System;Monitor;
+EOF
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "syspulse",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,24 +10,23 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@tauri-apps/api": "2.1.0",
+    "@tauri-apps/api": "^2.10.1",
-    "lucide-react": "^0.300.0",
+    "lucide-react": "^0.575.0",
-    "react": "^18.2.0",
+    "react": "^19.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
-    "recharts": "^2.10.0",
+    "recharts": "^2.15.0",
-    "framer-motion": "^10.16.0",
+    "framer-motion": "^12.0.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.0.0"
+    "tailwind-merge": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
+    "@tailwindcss/vite": "^4.0.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.0.0",
+    "typescript": "^5.7.3",
-    "@tauri-apps/cli": "2.1.0",
+    "vite": "^6.0.0",
-    "autoprefixer": "^10.4.0",
+    "@tauri-apps/cli": "^2.10.0",
-    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0"
-    "tailwindcss": "^3.4.0"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src-tauri/Cargo.toml

@@ -6,14 +6,14 @@ authors = ["narl"]
 edition = "2021"
 
 [build-dependencies]
-tauri-build = { version = "2", features = [] }
+tauri-build = { version = "2.5.5" }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2.10.2", features = [] }
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0.228", features = ["derive"] }
-serde_json = "1.0"
+serde_json = "1.0.149"
-sysinfo = "0.30"
+sysinfo = "0.38.2"
-chrono = "0.4"
+chrono = "0.4.43"
-tokio = { version = "1.0", features = ["full"] }
+tokio = { version = "1.49.0", features = ["full"] }
-log = "0.4"
+log = "0.4.29"
-env_logger = "0.10"
+env_logger = "0.11.9"

src-tauri/src/main.rs

@@ -101,7 +101,7 @@ fn get_system_stats(
     let mut profiling = state.profiling.lock().unwrap();
     
     if minimal {
-        sys.refresh_cpu();
+        sys.refresh_cpu_all();
         sys.refresh_memory();
     } else {
         sys.refresh_all();
@@ -120,7 +120,7 @@ fn get_system_stats(
             .map(|(pid, process)| {
                 ProcessStats {
                     pid: pid.as_u32(),
-                    name: process.name().to_string(),
+                    name: process.name().to_string_lossy().to_string(),
                     cpu_usage: process.cpu_usage(),
                     memory: process.memory(),
                     status: format!("{:?}", process.status()),
@@ -132,13 +132,13 @@ fn get_system_stats(
     if profiling.is_active {
         // Even in minimal mode, if recording we need the processes for the report
         if minimal {
-            sys.refresh_processes();
+            sys.refresh_processes(sysinfo::ProcessesToUpdate::All, true);
             processes = sys.processes().iter()
                 .filter(|(pid, _)| !exclude_self || pid.as_u32() != self_pid)
                 .map(|(pid, process)| {
                     ProcessStats {
                         pid: pid.as_u32(),
-                        name: process.name().to_string(),
+                        name: process.name().to_string_lossy().to_string(),
                         cpu_usage: process.cpu_usage(),
                         memory: process.memory(),
                         status: format!("{:?}", process.status()),

src/index.css

@@ -1,9 +1,36 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+
-@tailwind utilities;
+@theme {
+  --color-rosewater: #f5e0dc;
+  --color-flamingo: #f2cdcd;
+  --color-pink: #f5c2e7;
+  --color-mauve: #cba6f7;
+  --color-red: #f38ba8;
+  --color-maroon: #eba0ac;
+  --color-peach: #fab387;
+  --color-yellow: #f9e2af;
+  --color-green: #a6e3a1;
+  --color-teal: #94e2d5;
+  --color-sky: #89dceb;
+  --color-sapphire: #74c7ec;
+  --color-blue: #89b4fa;
+  --color-lavender: #b4befe;
+  --color-text: #cdd6f4;
+  --color-subtext1: #bac2de;
+  --color-subtext0: #a6adc8;
+  --color-overlay2: #9399b2;
+  --color-overlay1: #7f849c;
+  --color-overlay0: #6c7086;
+  --color-surface2: #585b70;
+  --color-surface1: #45475a;
+  --color-surface0: #313244;
+  --color-base: #1e1e2e;
+  --color-mantle: #181825;
+  --color-crust: #11111b;
+}
 
 :root {
-  /* Catppuccin Mocha */
+  /* Keep vars for direct usage in JS if needed */
   --rosewater: #f5e0dc;
   --flamingo: #f2cdcd;
   --pink: #f5c2e7;
@@ -121,24 +148,3 @@ body {
 .animate-pulse-soft {
     animation: pulse-soft 2s infinite ease-in-out;
 }
-
-.bg-red { background-color: var(--red); }
-.bg-green { background-color: var(--green); }
-.bg-blue { background-color: var(--blue); }
-.bg-mauve { background-color: var(--mauve); }
-.bg-surface0 { background-color: var(--surface0); }
-.bg-surface1 { background-color: var(--surface1); }
-.bg-base { background-color: var(--base); }
-
-.text-red { color: var(--red); }
-.text-green { color: var(--green); }
-.text-blue { color: var(--blue); }
-.text-mauve { color: var(--mauve); }
-.text-text { color: var(--text); }
-.text-subtext0 { color: var(--subtext0); }
-.text-subtext1 { color: var(--subtext1); }
-.text-overlay1 { color: var(--overlay1); }
-.text-overlay2 { color: var(--overlay2); }
-
-.border-surface1 { border-color: var(--surface1); }
-.border-red { border-color: var(--red); }

tailwind.config.js

@@ -1,40 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        base: "#1e1e2e",
-        mantle: "#181825",
-        crust: "#11111b",
-        surface0: "#313244",
-        surface1: "#45475a",
-        surface2: "#585b70",
-        overlay0: "#6c7086",
-        overlay1: "#7f849c",
-        overlay2: "#9399b2",
-        subtext0: "#a6adc8",
-        subtext1: "#bac2de",
-        text: "#cdd6f4",
-        lavender: "#b4befe",
-        blue: "#89b4fa",
-        sapphire: "#74c7ec",
-        sky: "#89dceb",
-        teal: "#94e2d5",
-        green: "#a6e3a1",
-        yellow: "#f9e2af",
-        peach: "#fab387",
-        maroon: "#eba0ac",
-        red: "#f38ba8",
-        mauve: "#cba6f7",
-        pink: "#f5c2e7",
-        flamingo: "#f2cdcd",
-        rosewater: "#f5e0dc",
-      }
-    },
-  },
-  plugins: [],
-}

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   clearScreen: false,
   server: {
     port: 1420,
@@ -14,5 +15,14 @@ export default defineConfig({
     target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
     minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
     sourcemap: !!process.env.TAURI_DEBUG,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom'],
+          'chart-vendor': ['recharts'],
+          'motion-vendor': ['framer-motion'],
+        }
+      }
+    }
   },
 })