Download File Option (#80)

This adds to the context menu to give the ability to download a file. It
also fixes a couple bugs and improves some formatting of the directory
view.

emain/emain.ts

@@ -1,6 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { getBackendHostPort } from "@/app/store/global";
 import * as keyutil from "@/util/keyutil";
 import * as electron from "electron";
 import fs from "fs";
@@ -421,6 +422,13 @@ electron.ipcMain.on("getPlatform", (event) => {
     event.returnValue = unamePlatform;
 });
 
+electron.ipcMain.on("download", (event, payload) => {
+    const window = electron.BrowserWindow.fromWebContents(event.sender);
+    const baseName = payload.filePath.split(/[\\/]/).pop();
+    const streamingUrl = getBackendHostPort() + "/wave/stream-file?path=" + encodeURIComponent(payload.filePath);
+    window.webContents.downloadURL(streamingUrl);
+});
+
 electron.ipcMain.on("getCursorPoint", (event) => {
     const window = electron.BrowserWindow.fromWebContents(event.sender);
     const screenPoint = electron.screen.getCursorScreenPoint();

emain/preload.ts

@@ -11,4 +11,5 @@ contextBridge.exposeInMainWorld("api", {
     openNewWindow: () => ipcRenderer.send("openNewWindow"),
     showContextMenu: (menu, position) => ipcRenderer.send("contextmenu-show", menu, position),
     onContextMenuClick: (callback) => ipcRenderer.on("contextmenu-click", callback),
+    downloadFile: (filePath) => ipcRenderer.send("download", { filePath }),
 });

frontend/app/view/directorypreview.tsx

@@ -15,7 +15,7 @@ import clsx from "clsx";
 import * as jotai from "jotai";
 import React from "react";
 import { ContextMenuModel } from "../store/contextmenu";
-import { atoms, createBlock } from "../store/global";
+import { atoms, createBlock, getApi } from "../store/global";
 
 import "./directorypreview.less";
 
@@ -52,6 +52,7 @@ function getBestUnit(bytes: number, si: boolean = false, sigfig: number = 3): st
     while (currentValue > divisor && idx < units.length - 1) {
         currentUnit = units[idx];
         currentValue /= divisor;
+        idx += 1;
     }
 
     return `${parseFloat(currentValue.toPrecision(sigfig))}${displaySuffixes[currentUnit]}`;
@@ -136,9 +137,20 @@ function handleFileContextMenu(e: React.MouseEvent<HTMLDivElement>, path: string
             await services.FileService.DeleteFile(path).catch((e) => console.log(e)); //todo these errors need a popup
         },
     });
+    menu.push({
+        label: "Download File",
+        click: async () => {
+            getApi().downloadFile(path);
+        },
+    });
     ContextMenuModel.showContextMenu(menu, e);
 }
 
+function cleanMimetype(input: string): string {
+    const truncated = input.split(";")[0];
+    return truncated.trim();
+}
+
 function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
     let settings = jotai.useAtomValue(atoms.settingsConfigAtom);
     const getIconFromMimeType = React.useCallback(
@@ -154,11 +166,23 @@ function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
         },
         [settings.mimetypes]
     );
+    const getIconColor = React.useCallback(
+        (mimeType: string): string => {
+            let iconColor = settings.mimetypes[mimeType]?.color ?? "inherit";
+            return iconColor;
+        },
+        [settings.mimetypes]
+    );
     const columns = React.useMemo(
         () => [
             columnHelper.accessor("mimetype", {
-                cell: (info) => <i className={getIconFromMimeType(info.getValue() ?? "")}></i>,
+                cell: (info) => (
-                header: () => <span>Type</span>,
+                    <i
+                        className={getIconFromMimeType(info.getValue() ?? "")}
+                        style={{ color: getIconColor(info.getValue() ?? "") }}
+                    ></i>
+                ),
+                header: () => <span></span>,
                 id: "logo",
                 size: 25,
                 enableSorting: false,
@@ -191,7 +215,7 @@ function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
                 sortingFn: "auto",
             }),
             columnHelper.accessor("mimetype", {
-                cell: (info) => <span className="dir-table-type">{info.getValue()}</span>,
+                cell: (info) => <span className="dir-table-type">{cleanMimetype(info.getValue() ?? "")}</span>,
                 header: () => <span>Type</span>,
                 sortingFn: "alphanumeric",
             }),

frontend/types/custom.d.ts

@@ -36,6 +36,7 @@ declare global {
         onContextMenuClick: (callback: (id: string) => void) => void;
         onNavigate: (callback: (url: string) => void) => void;
         onIframeNavigate: (callback: (url: string) => void) => void;
+        downloadFile: (path: string) => void;
     };
 
     type ElectronContextMenuItem = {

frontend/types/gotypes.d.ts

@@ -180,6 +180,7 @@ declare global {
     // wconfig.MimeTypeConfigType
     type MimeTypeConfigType = {
         icon: string;
+        color: string;
     };
 
     // waveobj.ORef

pkg/wconfig/settingsconfig.go

@@ -39,7 +39,8 @@ type DateTimeFormatConfigType struct {
 }
 
 type MimeTypeConfigType struct {
-	Icon string `json:"icon"`
+	Icon  string `json:"icon"`
+	Color string `json:"color"`
 }
 
 type BlockHeaderOpts struct {
@@ -67,7 +68,7 @@ func getSettingsConfigDefaults() SettingsConfigType {
 			"audio":            {Icon: "file-audio"},
 			"application/pdf":  {Icon: "file-pdf"},
 			"application/json": {Icon: "file-lines"},
-			"directory":        {Icon: "folder"},
+			"directory":        {Icon: "folder", Color: "#2e62d2"},
 			"font":             {Icon: "book-font"},
 			"image":            {Icon: "file-image"},
 			"text":             {Icon: "file-lines"},