p2r3 · Jor02 · Feb 16, 2026 · Feb 17, 2026 · Feb 18, 2026 · Feb 18, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 bun.lock
 package-lock.json
 node_modules
+.cache
+public/material-file-icons
 start.sh
 dist
 release

diff --git a/base.css b/base.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+
+html,
+body {
+	padding: 0;
+	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::after,
+*::before {
+	margin: 0;
+	box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		interpolate-size: allow-keywords;
+	}
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+img {
+	font-size: 12px;
+}
+
+button {
+	cursor: pointer;
+}
+
+::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--border-primary);
+	border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--text-muted);
+}
diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -4,13 +4,15 @@ WORKDIR /app
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
     chromium \
+    git \
     && rm -rf /var/lib/apt/lists/*
 
 ENV PUPPETEER_SKIP_DOWNLOAD=true
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 
 COPY .npmrc ./
 COPY package.json ./
+COPY scripts ./scripts
 RUN bun install --frozen-lockfile
 
 COPY . .

diff --git a/docs/Conversion flowchart.drawio b/docs/Conversion flowchart.drawio
diff --git a/docs/Conversion flowchart.png b/docs/Conversion flowchart.png
diff --git a/docs/wireframe.png b/docs/wireframe.png
diff --git a/index.html b/index.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script type="module" src="./src/ui/scripts/theme-detection.ts"></script>
   <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="base.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Convert to it!</title>
 
@@ -17,48 +20,11 @@
   <meta name="theme-color" content="#1C77FF"/>
   <meta name="og:type" content="website"/>
 </head>
-<body>
-
-  <input id="file-input" type="file">
-
-  <a id="commit-id" href="https://github.com/p2r3/convert"></a>
-
-  <div id="file-area">
-    <h2>Click to add your file</h2>
-    <p id="drop-hint-text">or drag and drop it here</p>
-  </div>
-  <div id="side-panel">
-    <button id="mode-button">Advanced mode</button>
-  </div>
-
-  <div id="format-containers">
-
-    <div id="from-container" class="format-container">
-      <h2>Convert from:</h2>
-      <input type="text" id="search-from" class="search" placeholder="Search">
-      <div id="from-list" class="format-list">
-
-      </div>
-    </div>
 
-    <div id="to-container" class="format-container">
-      <h2>Convert to:</h2>
-      <input type="text" id="search-to" class="search" placeholder="Search">
-      <div id="to-list" class="format-list">
-
-      </div>
-    </div>
-
-  </div>
-
-  <button id="convert-button" class="disabled">Convert</button>
-
-  <div id="popup-bg"></div>
-  <div id="popup">
-    <h2>Loading tools...</h2>
-  </div>
-
-  <script type="module" src="src/main.ts"></script>
+<body>
 
 </body>
+<script type="module" src="src/main.new.ts"></script>
+<script type="module" src="src/ui/index.tsx"></script>
+
 </html>
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
   "type": "module",
   "main": "src/electron.cjs",
   "scripts": {
+    "postinstall": "bun run scripts/extract-material-icons.ts",
     "dev": "vite",
     "build": "tsc && vite build",
     "cache:build": "bun run buildCache.js dist/cache.json --minify",
@@ -43,6 +44,7 @@
     }
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
     "@types/jszip": "^3.4.0",
     "@types/less": "^3.0.8",
     "@types/opentype.js": "^1.3.9",
@@ -55,18 +57,21 @@
   },
   "dependencies": {
     "7z-wasm": "^1.2.0",
+    "@aiden0z/pptx-renderer": "^1.0.2",
     "@bjorn3/browser_wasi_shim": "^0.4.2",
     "@bokuweb/zstd-wasm": "^0.0.27",
     "@ffmpeg/core": "^0.12.10",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "@flo-audio/reflo": "^0.1.2",
     "@imagemagick/magick-wasm": "^0.0.37",
+    "@preact/signals": "^2.8.1",
     "@myriaddreamin/typst-ts-renderer": "^0.7.0-rc2",
     "@myriaddreamin/typst-ts-web-compiler": "^0.7.0-rc2",
     "@myriaddreamin/typst.ts": "^0.7.0-rc2",
     "@sqlite.org/sqlite-wasm": "^3.51.2-build6",
     "@stringsync/vexml": "^0.1.8",
+    "@tippyjs/react": "^4.2.6",
     "@toon-format/toon": "^2.1.0",
     "@types/bun": "^1.3.9",
     "@types/meyda": "^5.3.0",
@@ -77,11 +82,14 @@
     "celaria-formats": "^1.0.2",
     "chess.js": "^1.4.0",
     "confbox": "^0.2.4",
+    "dom-to-svg": "^0.12.2",
+    "epubjs": "^0.3.93",
     "imagetracer": "^0.2.2",
     "js-synthesizer": "^1.11.0",
     "json5": "^2.2.3",
     "jszip": "^3.10.1",
     "less": "^4.6.4",
+    "lucide-preact": "^1.7.0",
     "meyda": "^5.6.3",
     "mime": "^4.1.0",
     "nanotar": "^0.3.0",
@@ -92,12 +100,15 @@
     "pdf-parse": "^2.4.5",
     "pdftoimg-js": "^0.2.5",
     "pe-library": "^2.0.1",
+    "preact": "^10.28.3",
     "sass": "^1.98.0",
     "svg-pathdata": "^8.0.0",
     "three": "^0.182.0",
     "three-bvh-csg": "^0.0.17",
     "three-mesh-bvh": "^0.9.8",
+    "tippy.js": "^6.3.7",
     "ts-flp": "^1.0.3",
+    "use-debounce": "^10.1.0",
     "turbowarp-packager-browser": "3.11.1",
     "verovio": "^6.0.1",
     "vexflow": "^5.0.0",

diff --git a/scripts/extra-language-extensions.ts b/scripts/extra-language-extensions.ts
@@ -0,0 +1,104 @@
+export const extraExtensionToIcon: Record<string, string> = {
+	ts: "typescript",
+	cts: "typescript",
+	mts: "typescript",
+	js: "javascript",
+	cjs: "javascript",
+	mjs: "javascript",
+	jsx: "react",
+	tsx: "react_ts",
+	py: "python",
+	pyw: "python",
+	pyi: "python",
+	yml: "yaml",
+	yaml: "yaml",
+	md: "markdown",
+	markdown: "markdown",
+	html: "html",
+	htm: "html",
+	css: "css",
+	scss: "sass",
+	sass: "sass",
+	less: "less",
+	sh: "console",
+	bash: "console",
+	zsh: "console",
+	ksh: "console",
+	fish: "console",
+	ps1: "powershell",
+	psm1: "powershell",
+	psd1: "powershell",
+	cs: "csharp",
+	fs: "fsharp",
+	fsx: "fsharp",
+	fsi: "fsharp",
+	vb: "visualstudio",
+	swift: "swift",
+	kt: "kotlin",
+	kts: "kotlin",
+	java: "java",
+	go: "go",
+	rs: "rust",
+	rb: "ruby",
+	php: "php",
+	pl: "perl",
+	pm: "perl",
+	r: "r",
+	lua: "lua",
+	vim: "vim",
+	sql: "database",
+	kql: "kusto",
+	ex: "elixir",
+	exs: "elixir",
+	erl: "erlang",
+	hrl: "erlang",
+	hs: "haskell",
+	clj: "clojure",
+	cljs: "clojure",
+	edn: "clojure",
+	groovy: "groovy",
+	scala: "scala",
+	ml: "ocaml",
+	mli: "ocaml",
+	diff: "diff",
+	patch: "git",
+	dockerfile: "docker",
+	vue: "vue",
+	svelte: "svelte",
+	astro: "astro",
+	solidity: "solidity",
+	graphql: "graphql",
+	gql: "graphql",
+	prisma: "prisma",
+	toml: "toml",
+	lock: "lock",
+	log: "log",
+	txt: "document",
+	rtf: "document",
+	tex: "tex",
+	bib: "bibliography",
+	bst: "bibtex-style",
+	dart: "dart",
+	coffee: "coffee",
+	iced: "coffee",
+	cls: "latex-class",
+	sty: "tex",
+	dtx: "tex",
+	ins: "doctex-installer",
+	ctx: "context",
+	v: "vlang",
+	gradle: "gradle",
+	hcl: "hcl",
+	tf: "terraform",
+	tfvars: "terraform",
+	nix: "nix",
+	dhall: "dhall",
+	cabal: "cabal",
+	purs: "purescript",
+	nim: "nim",
+	nimble: "nim",
+	cr: "crystal",
+	elm: "elm",
+	jl: "julia",
+	ipynb: "jupyter",
+};