feat: switch from wails to tauri

src/App.css

@@ -0,0 +1,109 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.container {
+  margin: 0;
+  padding-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: 0.75s;
+}
+
+.logo.tauri:hover {
+  filter: drop-shadow(0 0 2em #24c8db);
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  text-align: center;
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #0f0f0f;
+  background-color: #ffffff;
+  transition: border-color 0.25s;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #396cd8;
+}
+button:active {
+  border-color: #396cd8;
+  background-color: #e8e8e8;
+}
+
+input,
+button {
+  outline: none;
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}

src/App.tsx

@@ -0,0 +1,159 @@
+import { ResponsiveLine } from "@nivo/line";
+import { formatBytes } from "./lib/format.js";
+
+type Frame = {
+  id: string;
+  data: { x: string | number; y: number }[];
+};
+
+import { getCurrentWebview } from "@tauri-apps/api/webview";
+import { useEffect } from "react";
+
+function App() {
+  const data: Frame[] = [];
+
+  useEffect(() => {
+    const unlistenPromise = getCurrentWebview().onDragDropEvent(
+      async (event) => {
+        if (event.payload.type === "over") {
+          console.log("User hovering", event.payload.position);
+        } else if (event.payload.type === "drop") {
+          console.log("User dropped", event.payload.paths);
+        } else {
+          console.log("File drop cancelled");
+        }
+      }
+    );
+
+    // you need to call unlisten if your handler goes out of scope e.g. the component is unmounted
+    return () => {
+      unlistenPromise.then((unlisten) => {
+        unlisten();
+        console.log("Unlistened");
+      });
+    };
+  }, []);
+
+  // const data: Frame[] = useMemo(() =>
+  //   // Array.from({ length: 4 }, (_, i) => {
+  //   //   const d = Math.random();
+  //   //   const g = Math.random();
+  //   //   return {
+  //   //     id: `file-${i}`,
+  //   //     data: Array.from({ length: 500 }, (_, j) => {
+  //   //       if (Math.random() < 0.5) return null;
+  //   //       return {
+  //   //         x: j,
+  //   //         y: Math.random() * 256 * d + (1 - g) * 1024,
+  //   //       };
+  //   //     }).filter((i) => i !== null),
+  //   //   };
+  //   // }),
+  //   []
+  // );
+
+  console.log(data);
+
+  const graph = (
+    <ResponsiveLine
+      data={data}
+      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+      xScale={{ type: "linear" }}
+      yScale={{
+        type: "linear",
+        min: 0,
+        max: "auto",
+        stacked: false,
+        reverse: false,
+      }}
+      theme={{
+        tooltip: {
+          container: {
+            backgroundColor: "#2e2b45",
+          },
+        },
+        grid: {
+          line: {
+            stroke: "rgb(252, 191, 212)",
+            strokeWidth: 0.35,
+            strokeOpacity: 0.75,
+          },
+        },
+        crosshair: {
+          line: {
+            stroke: "#fdd3e2",
+            strokeWidth: 1,
+          },
+        },
+        axis: {
+          legend: {},
+
+          domain: {
+            line: {
+              stroke: "rgb(252, 191, 212)",
+              strokeWidth: 0.5,
+              strokeOpacity: 0.5,
+            },
+          },
+        },
+        text: {
+          fill: "#6e6a86",
+        },
+      }}
+      axisBottom={{ legend: "transportation", legendOffset: 36 }}
+      axisLeft={{
+        legend: "count",
+        legendOffset: -40,
+        format: (v) => formatBytes(v * 1024 * 53),
+      }}
+      pointSize={10}
+      colors={[
+        "#3e8faf",
+        "#c4a7e7",
+        "#f5c276",
+        "#EA9B96",
+        "#EB7092",
+        "#9CCFD8",
+      ]}
+      // pointColor={{ modifiers: [["brighter", 1100]] }}
+      pointBorderWidth={0}
+      pointBorderColor={{ from: "seriesColor" }}
+      pointLabelYOffset={-12}
+      enableSlices={"x"}
+      enableTouchCrosshair={true}
+      useMesh={true}
+      legends={[
+        {
+          anchor: "bottom-right",
+          direction: "column",
+          translateX: 100,
+          itemWidth: 80,
+          itemHeight: 22,
+          symbolShape: "circle",
+        },
+      ]}
+    />
+  );
+
+  return (
+    <div
+      id="App"
+      className="min-h-screen min-w-screen overflow-hidden"
+      style={{ "--wails-drop-target": "drop" } as React.CSSProperties}
+    >
+      <div
+        id="drop-target"
+        className="absolute z-10 top-0 left-0 w-full h-full transition-[opacity] duration-200 ease-in-out"
+      >
+        <div className="flex flex-col items-center justify-center shadow h-full">
+          <div className="text-2xl font-bold text-zinc-200">
+            Drag and Drop to Add
+          </div>
+        </div>
+      </div>
+      {graph}
+    </div>
+  );
+}
+
+export default App;

src/global.css

@@ -0,0 +1,52 @@
+@import "tailwindcss";
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  @apply bg-[#232136];
+  margin: 0;
+  color: white;
+  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
+}
+
+#app {
+  height: 100vh;
+  text-align: center;
+}
+
+#drop-target {
+  pointer-events: none;
+  opacity: 0;
+  background-color: rgb(0, 0, 0, 0.5) !important;
+}
+
+.wails-drop-target-active {
+  #drop-target {
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

src/lib/format.test.ts

@@ -0,0 +1,28 @@
+import { formatBytes } from "./format.js";
+import { test, expect } from "vitest";
+
+test("formats bytes less than 1024", () => {
+  expect(formatBytes(512)).toBe("512 B");
+});
+
+test("formats KiB correctly", () => {
+  expect(formatBytes(2048)).toBe("2 KiB");
+  expect(formatBytes(1536)).toBe("1.5 KiB");
+  expect(formatBytes(1024)).toBe("1 KiB");
+});
+
+test("formats MiB correctly", () => {
+  expect(formatBytes(1048576)).toBe("1 MiB");
+  expect(formatBytes(1572864)).toBe("1.5 MiB");
+  expect(formatBytes(2097152)).toBe("2 MiB");
+});
+
+test("formats GiB correctly", () => {
+  expect(formatBytes(1073741824)).toBe("1 GiB");
+  expect(formatBytes(1610612736)).toBe("1.5 GiB");
+  expect(formatBytes(2147483648)).toBe("2 GiB");
+});
+
+test("formats large values with no decimal if intValue >= 1000", () => {
+  expect(formatBytes(1024 * 1024 * 1000)).toBe("1000 MiB");
+});

src/lib/format.ts

@@ -0,0 +1,38 @@
+/**
+ * Formats a number of bytes into a human-readable string using binary units (KiB, MiB, GiB, TiB).
+ *
+ * - For values less than 1024, returns the value in bytes (e.g., "512 B").
+ * - For larger values, converts to the appropriate unit and formats:
+ *   - If the integer part is 1000 or more, shows no decimal (e.g., "1024 KiB").
+ *   - If the decimal part is at least 0.1, shows one decimal place (e.g., 1228.8 KiB formats as "1.2 MiB").
+ *   - Otherwise, shows no decimal (e.g., 1075.2 MiB == 1.05 GiB, formats as "1 GiB").
+ *
+ * @param v - The number of bytes to format.
+ * @returns The formatted string with the appropriate unit.
+ */
+export function formatBytes(v: number): string {
+  if (v < 1024) return `${v} B`;
+
+  const units = ["KiB", "MiB", "GiB", "TiB"];
+  let unitIndex = -1;
+  let value = v;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+
+  const intValue = Math.floor(value);
+  const decimal = value - intValue;
+
+  if (intValue >= 1000) {
+    // More than 3 digits, no decimal
+    return `${intValue} ${units[unitIndex]}`;
+  } else if (decimal >= 0.1) {
+    // Show 1 decimal if decimal >= 0.1
+    return `${value.toFixed(1)} ${units[unitIndex]}`;
+  } else {
+    // No decimal
+    return `${intValue} ${units[unitIndex]}`;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./global.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />