feat(ui): add file-type icons and clamp window titles

Add a file-to-icon resolver for common MIME types/extensions so uploads
display appropriate Win98-style icons. Update upload and window CSS to
use image-based, pixelated icons, and prevent long window titles from
overflowing by adding a flex label with ellipsis handling.feat(ui): add file-type icons and clamp window titles

Add a file-to-icon resolver for common MIME types/extensions so uploads
display appropriate Win98-style icons. Update upload and window CSS to
use image-based, pixelated icons, and prevent long window titles from
overflowing by adding a flex label with ellipsis handling.

static/js/app.js

@@ -36,6 +36,50 @@ function formatBytes(bytes) {
     return `${size.toFixed(1)} ${units[unitIndex]}`;
 }
 
+function iconForFile(file) {
+    const filename = file.name || "";
+    const mimeType = file.type || "";
+    const extension = filename.includes(".") ? filename.slice(filename.lastIndexOf(".")).toLowerCase() : "";
+
+    if (extension === ".exe") {
+        return "/static/img/icons/Program Files Icons - PNG/MSONSEXT.DLL_14_6-0.png";
+    }
+
+    if (mimeType.startsWith("image/")) {
+        return "/static/img/sprites/bitmap.png";
+    }
+
+    if (mimeType.startsWith("video/") || mimeType.startsWith("audio/")) {
+        return "/static/img/icons/netshow_notransm-1.png";
+    }
+
+    if (mimeType.startsWith("text/") || extension === ".md") {
+        return "/static/img/sprites/notepad_file-1.png";
+    }
+
+    if (
+        mimeType.includes("zip") ||
+        mimeType.includes("compressed") ||
+        [".rar", ".7z", ".tar", ".gz"].includes(extension)
+    ) {
+        return "/static/img/icons/Windows Icons - PNG/zipfldr.dll_14_101-0.png";
+    }
+
+    if ([".ttf", ".otf", ".woff", ".woff2"].includes(extension)) {
+        return "/static/img/sprites/font.png";
+    }
+
+    if (extension === ".pdf") {
+        return "/static/img/sprites/journal.png";
+    }
+
+    if ([".html", ".css", ".js"].includes(extension)) {
+        return "/static/img/sprites/frame_web-0.png";
+    }
+
+    return "/static/img/icons/Windows Icons - PNG/ole2.dll_14_DEFICON.png";
+}
+
 function updateStatus(message) {
     if (uploadStatus) {
         uploadStatus.textContent = message;
@@ -124,8 +168,10 @@ function createFileRow(selectedFile) {
     const row = document.createElement("div");
     row.className = "upload-file-row";
 
-    const icon = document.createElement("span");
+    const icon = document.createElement("img");
     icon.className = "upload-file-icon";
+    icon.src = iconForFile(selectedFile.file);
+    icon.alt = "";
     icon.setAttribute("aria-hidden", "true");
 
     const name = document.createElement("span");
@@ -391,6 +437,10 @@ if (uploadForm) {
             selectedFiles.forEach((selectedFile, index) => {
                 selectedFile.boxID = box.box_id;
                 selectedFile.boxFile = box.files[index];
+                const icon = selectedFile.row.querySelector(".upload-file-icon");
+                if (icon && selectedFile.boxFile.icon_path) {
+                    icon.src = selectedFile.boxFile.icon_path;
+                }
             });
 
             await Promise.allSettled(selectedFiles.map((selectedFile) => {