New Directory View Columns (#71)

This adds several new columns to the directory view. It adds a last
modified timestamp, a logo for the type, human-readable file sizes, and
permissions. Several of these are configurable via the
config/settings.json file.

frontend/app/view/directorypreview.less

@@ -1,4 +1,5 @@
 .dir-table {
+    --col-size-size: 0.2rem;
     overflow: auto;
     width: 100%;
     border-radius: 3px;
@@ -9,7 +10,7 @@
             padding: 4px 0;
             background-color: var(--panel-bg-color);
 
-            .dir-table-head-cell {
+            .dir-table-head-cell:not(:first-child) {
                 position: relative;
                 padding: 2px 4px;
                 font-weight: bold;

frontend/app/view/directorypreview.tsx

@@ -1,10 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import * as util from "@/util/util";
 import { Table, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import clsx from "clsx";
 import * as jotai from "jotai";
 import React from "react";
+import { atoms } from "../store/global";
 
 import "./directorypreview.less";
 
@@ -16,23 +18,135 @@ interface DirectoryTableProps {
 
 const columnHelper = createColumnHelper<FileInfo>();
 
-const defaultColumns = [
+const displaySuffixes = {
+    B: "b",
+    kB: "k",
+    MB: "m",
+    GB: "g",
+    TB: "t",
+    KiB: "k",
+    MiB: "m",
+    GiB: "g",
+    TiB: "t",
+};
+
+function getBestUnit(bytes: number, si: boolean = false, sigfig: number = 3): string {
+    if (bytes < 0) {
+        return "";
+    }
+    const units = si ? ["kB", "MB", "GB", "TB"] : ["KiB", "MiB", "GiB", "TiB"];
+    const divisor = si ? 1000 : 1024;
+
+    let currentUnit = "B";
+    let currentValue = bytes;
+    let idx = 0;
+    while (currentValue > divisor && idx < units.length - 1) {
+        currentUnit = units[idx];
+        currentValue /= divisor;
+    }
+
+    return `${parseFloat(currentValue.toPrecision(sigfig))}${displaySuffixes[currentUnit]}`;
+}
+
+function getSpecificUnit(bytes: number, suffix: string): string {
+    if (bytes < 0) {
+        return "";
+    }
+
+    const divisors = new Map([
+        ["B", 1],
+        ["kB", 1e3],
+        ["MB", 1e6],
+        ["GB", 1e9],
+        ["TB", 1e12],
+        ["KiB", 0x400],
+        ["MiB", 0x400 ** 2],
+        ["GiB", 0x400 ** 3],
+        ["TiB", 0x400 ** 4],
+    ]);
+    const divisor: number = divisors[suffix] ?? 1;
+
+    return `${bytes / divisor} ${displaySuffixes[suffix]}`;
+}
+
+function getLastModifiedTime(
+    unixMillis: number,
+    locale: Intl.LocalesArgument,
+    options: DateTimeFormatConfigType
+): string {
+    if (locale === "C") {
+        locale = "lookup";
+    }
+    return new Date(unixMillis).toLocaleString(locale, options); //todo use config
+}
+
+const iconRegex = /^[a-z0-9- ]+$/;
+
+function isIconValid(icon: string): boolean {
+    if (util.isBlank(icon)) {
+        return false;
+    }
+    return icon.match(iconRegex) != null;
+}
+
+function getIconClass(icon: string): string {
+    if (!isIconValid(icon)) {
+        return "fa fa-solid fa-question fa-fw";
+    }
+    return `fa fa-solid fa-${icon} fa-fw`;
+}
+
+function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
+    let settings = jotai.useAtomValue(atoms.settingsConfigAtom);
+    const getIconFromMimeType = React.useCallback(
+        (mimeType: string): string => {
+            while (mimeType.length > 0) {
+                let icon = settings.mimetypes[mimeType]?.icon ?? null;
+                if (isIconValid(icon)) {
+                    return `fa fa-solid fa-${icon} fa-fw`;
+                }
+                mimeType = mimeType.slice(0, -1);
+            }
+            return "fa fa-solid fa-question fa-fw";
+        },
+        [settings.mimetypes]
+    );
+    const columns = React.useMemo(
+        () => [
+            columnHelper.accessor("mimetype", {
+                cell: (info) => <i className={getIconFromMimeType(info.getValue() ?? "")}></i>,
+                header: () => <span></span>,
+                id: "logo",
+                size: 25,
+            }),
             columnHelper.accessor("path", {
                 cell: (info) => info.getValue(),
                 header: () => <span>Name</span>,
             }),
-    columnHelper.accessor("size", {
+            columnHelper.accessor("modestr", {
                 cell: (info) => info.getValue(),
+                header: () => <span>Permissions</span>,
+                size: 91,
+            }),
+            columnHelper.accessor("modtime", {
+                cell: (info) =>
+                    getLastModifiedTime(info.getValue(), settings.datetime.locale, settings.datetime.format),
+                header: () => <span>Last Modified</span>,
+                size: 185,
+            }),
+            columnHelper.accessor("size", {
+                cell: (info) => getBestUnit(info.getValue()),
                 header: () => <span>Size</span>,
+                size: 55,
             }),
             columnHelper.accessor("mimetype", {
                 cell: (info) => info.getValue(),
                 header: () => <span>Type</span>,
             }),
-];
+        ],
+        [settings]
+    );
 
-function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
-    const [columns] = React.useState<typeof defaultColumns>(() => [...defaultColumns]);
     const table = useReactTable({
         data,
         columns,
@@ -111,7 +225,7 @@ function TableBody({ table, cwd, setFileName }: TableBodyProps) {
                                 key={cell.id}
                                 style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
                             >
-                                {cell.renderValue<string>()}
+                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                             </div>
                         );
                     })}

frontend/types/gotypes.d.ts

@@ -97,6 +97,16 @@ declare global {
         rtopts?: RuntimeOpts;
     };
 
+	type DateTimeConfigType = {
+		locale: string;
+		format: DateTimeFormatConfigType;
+	}
+
+	type DateTimeFormatConfigType = {
+		dateStyle: "full" | "long" | "medium" | "short";
+		timeStyle: "full" | "long" | "medium" | "short";
+	}
+
     // wstore.FileDef
     type FileDef = {
         filetype?: string;
@@ -112,6 +122,7 @@ declare global {
         notfound?: boolean;
         size: number;
         mode: number;
+		modestr: string;
         modtime: number;
         isdir?: boolean;
         mimetype?: string;
@@ -146,6 +157,11 @@ declare global {
         ReturnDesc: string;
     };
 
+	//wconfig.MimeTypeConfigType
+	type MimeTypeConfigType = {
+		icon: string;
+	}
+
     // waveobj.ORef
     type ORef = {
         otype: string;
@@ -179,6 +195,8 @@ declare global {
 
     // wconfig.SettingsConfigType
     type SettingsConfigType = {
+		datetime: DateTimeConfigType;
+		mimetypes: {[key:string]: MimeTypeConfigType}
         widgets: WidgetsConfigType[];
         term: TerminalConfigType;
     };

pkg/service/fileservice/fileservice.go

@@ -28,6 +28,7 @@ type FileInfo struct {
 	NotFound bool        `json:"notfound,omitempty"`
 	Size     int64       `json:"size"`
 	Mode     os.FileMode `json:"mode"`
+	ModeStr  string      `json:"modestr"`
 	ModTime  int64       `json:"modtime"`
 	IsDir    bool        `json:"isdir,omitempty"`
 	MimeType string      `json:"mimetype,omitempty"`
@@ -52,6 +53,7 @@ func (fs *FileService) StatFile(path string) (*FileInfo, error) {
 		Path:     cleanedPath,
 		Size:     finfo.Size(),
 		Mode:     finfo.Mode(),
+		ModeStr:  finfo.Mode().String(),
 		ModTime:  finfo.ModTime().UnixMilli(),
 		IsDir:    finfo.IsDir(),
 		MimeType: mimeType,
@@ -75,16 +77,27 @@ func (fs *FileService) ReadFile(path string) (*FullFile, error) {
 			return nil, fmt.Errorf("unable to parse directory %s", finfo.Path)
 		}
 
+		if len(innerFilesEntries) > 1000 {
+			innerFilesEntries = innerFilesEntries[:1001]
+		}
 		var innerFilesInfo []FileInfo
 		for _, innerFileEntry := range innerFilesEntries {
 			innerFileInfoInt, _ := innerFileEntry.Info()
+			mimeType := utilfn.DetectMimeType(filepath.Join(finfo.Path, innerFileInfoInt.Name()))
+			var fileSize int64
+			if mimeType == "directory" {
+				fileSize = -1
+			} else {
+				fileSize = innerFileInfoInt.Size()
+			}
 			innerFileInfo := FileInfo{
 				Path:     innerFileInfoInt.Name(),
-				Size:     innerFileInfoInt.Size(),
+				Size:     fileSize,
 				Mode:     innerFileInfoInt.Mode(),
+				ModeStr:  innerFileInfoInt.Mode().String(),
 				ModTime:  innerFileInfoInt.ModTime().UnixMilli(),
 				IsDir:    innerFileInfoInt.IsDir(),
-				MimeType: "",
+				MimeType: mimeType,
 			}
 			innerFilesInfo = append(innerFilesInfo, innerFileInfo)
 		}

pkg/util/utilfn/utilfn.go

@@ -637,6 +637,16 @@ func DetectMimeType(path string) string {
 	if stats.IsDir() {
 		return "directory"
 	}
+	if stats.Mode()&os.ModeNamedPipe == os.ModeNamedPipe {
+		return "pipe"
+	}
+	charDevice := os.ModeDevice | os.ModeCharDevice
+	if stats.Mode()&charDevice == charDevice {
+		return "character-special"
+	}
+	if stats.Mode()&os.ModeDevice == os.ModeDevice {
+		return "block-special"
+	}
 	fd, err := os.Open(path)
 	if err != nil {
 		return ""

pkg/wavebase/wavebase.go

@@ -126,6 +126,13 @@ func determineLang() string {
 		strOut := string(out)
 		truncOut := strings.Split(strOut, "@")[0]
 		return strings.TrimSpace(truncOut) + ".UTF-8"
+	} else if runtime.GOOS == "win32" {
+		out, err := exec.CommandContext(ctx, "Get-Culture", "|", "select", "-exp", "Name").CombinedOutput()
+		if err != nil {
+			log.Printf("error executing 'Get-Culture | select -exp Name': %v\n", err)
+			return ""
+		}
+		return strings.TrimSpace(string(out)) + ".UTF-8"
 	} else {
 		// this is specifically to get the wavesrv LANG so waveshell
 		// on a remote uses the same LANG
@@ -140,6 +147,14 @@ func DetermineLang() string {
 	return osLang
 }
 
+func DetermineLocale() string {
+	truncated := strings.Split(DetermineLang(), ".")[0]
+	if truncated == "" {
+		return "C"
+	}
+	return strings.Replace(truncated, "_", "-", -1)
+}
+
 func AcquireWaveLock() (*filemutex.FileMutex, error) {
 	homeDir := GetWaveHomeDir()
 	lockFileName := filepath.Join(homeDir, WaveLockFile)

pkg/wconfig/datetimestyle.go

@@ -0,0 +1,59 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+package wconfig
+
+import (
+	"encoding/json"
+	"fmt"
+)
+
+type DateTimeStyle uint8
+
+const (
+	DateTimeStyleFull = iota + 1
+	DateTimeStyleLong
+	DateTimeStyleMedium
+	DateTimeStyleShort
+)
+
+var dateTimeStyleToString = map[uint8]string{
+	1: "full",
+	2: "long",
+	3: "medium",
+	4: "short",
+}
+
+var stringToDateTimeStyle = map[string]uint8{
+	"full":   1,
+	"long":   2,
+	"medium": 3,
+	"short":  4,
+}
+
+func (dts DateTimeStyle) String() string {
+	return dateTimeStyleToString[uint8(dts)]
+}
+
+func parseDateTimeStyle(input string) (DateTimeStyle, error) {
+	value, ok := stringToDateTimeStyle[input]
+	if !ok {
+		return DateTimeStyle(0), fmt.Errorf("%q is not a valid date-time style", input)
+	}
+	return DateTimeStyle(value), nil
+}
+
+func (dts DateTimeStyle) MarshalJSON() ([]byte, error) {
+	return json.Marshal(dts.String())
+}
+
+func (dts *DateTimeStyle) UnmarshalJSON(data []byte) (err error) {
+	var buffer string
+	if err := json.Unmarshal(data, &buffer); err != nil {
+		return err
+	}
+	if *dts, err = parseDateTimeStyle(buffer); err != nil {
+		return err
+	}
+	return nil
+}

pkg/wconfig/filewatcher.go

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 package wconfig
 
 import (

pkg/wconfig/settingsconfig.go

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 package wconfig
 
 import (
@@ -24,23 +27,66 @@ type TerminalConfigType struct {
 	FontFamily string `json:"fontfamily,omitempty"`
 }
 
+type DateTimeConfigType struct {
+	Locale string                   `json:"locale"`
+	Format DateTimeFormatConfigType `json:"format"`
+}
+
+type DateTimeFormatConfigType struct {
+	DateStyle DateTimeStyle `json:"dateStyle"`
+	TimeStyle DateTimeStyle `json:"timeStyle"`
+	//TimeZone  string `json:"timeZone"` TODO: need a universal way to obtain this before adding it
+}
+
+type MimeTypeConfigType struct {
+	Icon string `json:"icon"`
+}
+
 type SettingsConfigType struct {
-	Widgets []WidgetsConfigType `json:"widgets"`
+	MimeTypes map[string]MimeTypeConfigType `json:"mimetypes"`
+	DateTime  DateTimeConfigType            `json:"datetime"`
 	Term      TerminalConfigType            `json:"term"`
+	Widgets   []WidgetsConfigType           `json:"widgets"`
 }
 
 func getSettingsConfigDefaults() SettingsConfigType {
 	return SettingsConfigType{
+		DateTime: DateTimeConfigType{
+			Locale: wavebase.DetermineLocale(),
+			Format: DateTimeFormatConfigType{
+				DateStyle: DateTimeStyleMedium,
+				TimeStyle: DateTimeStyleMedium,
+			},
+		},
+		MimeTypes: map[string]MimeTypeConfigType{
+			"audio":            {Icon: "file-audio"},
+			"application/pdf":  {Icon: "file-pdf"},
+			"application/json": {Icon: "file-lines"},
+			"directory":        {Icon: "folder"},
+			"font":             {Icon: "book-font"},
+			"image":            {Icon: "file-image"},
+			"text":             {Icon: "file-lines"},
+			"text/css":         {Icon: "css3-alt fa-brands"},
+			"text/javascript":  {Icon: "js fa-brands"},
+			"text/typescript":  {Icon: "js fa-brands"},
+			"text/golang":      {Icon: "go fa-brands"},
+			"text/html":        {Icon: "html5 fa-brands"},
+			"text/less":        {Icon: "less fa-brands"},
+			"text/markdown":    {Icon: "markdown fa-brands"},
+			"text/rust":        {Icon: "rust fa-brands"},
+			"text/scss":        {Icon: "sass fa-brands"},
+			"video":            {Icon: "file-video"},
+		},
 		Widgets: []WidgetsConfigType{
 			{
-				Icon: "fa fa-solid fa-files fa-fw",
+				Icon: "files",
 				BlockDef: wstore.BlockDef{
 					View: "preview",
 					Meta: map[string]any{"file": wavebase.GetHomeDir()},
 				},
 			},
 			{
-				Icon: "fa fa-solid fa-chart-simple fa-fw",
+				Icon: "chart-simple",
 				BlockDef: wstore.BlockDef{
 					View: "plot",
 				},