File details view PT1

components/apps/FileExplorer/StyledFileExplorer.ts

@@ -1,12 +1,16 @@
 import styled from "styled-components";
 import StyledLoading from "components/system/Files/FileManager/StyledLoading";
+import StyledDetailsFileManager from "components/system/Files/Views/Details/StyledFileManager";
 import StyledIconFileManager from "components/system/Files/Views/Icon/StyledFileManager";
 
 const StyledFileExplorer = styled.div`
-  ${StyledIconFileManager} {
-    column-gap: 2px;
+  ${StyledDetailsFileManager}, ${StyledIconFileManager} {
     height: ${({ theme }) =>
       `calc(100% - ${theme.sizes.fileExplorer.navBarHeight} - ${theme.sizes.fileExplorer.statusBarHeight})`};
+  }
+
+  ${StyledIconFileManager} {
+    column-gap: 2px;
     padding: 6px;
 
     figcaption {

components/apps/FileExplorer/index.tsx

@@ -110,7 +110,7 @@ const FileExplorer: FC<ComponentProcessProps> = ({ id }) => {
   return url ? (
     <StyledFileExplorer>
       <Navigation ref={inputRef} hideSearch={Boolean(mountUrl)} id={id} />
-      <FileManager id={id} url={url} view="icon" showStatusBar />
+      <FileManager id={id} url={url} showStatusBar />
     </StyledFileExplorer>
   ) : // eslint-disable-next-line unicorn/no-null
   null;

components/system/Desktop/index.tsx

@@ -13,7 +13,6 @@ const Desktop: FC = ({ children }) => {
     <StyledDesktop ref={desktopRef}>
       <FileManager
         url={DESKTOP_PATH}
-        view="icon"
         allowMovingDraggableEntries
         hideLoading
         hideScrolling

components/system/Dialogs/Properties/GeneralTab.tsx

@@ -2,8 +2,8 @@ import { basename, dirname, extname, join } from "path";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Buttons from "components/system/Dialogs/Properties/Buttons";
 import useStats from "components/system/Dialogs/Properties/useStats";
-import extensions from "components/system/Files/FileEntry/extensions";
 import {
+  getFileType,
   getIconFromIni,
   getModifiedTime,
 } from "components/system/Files/FileEntry/functions";
@@ -46,8 +46,7 @@ const GeneralTab: FC<TabProps> = ({ icon, id, isShortcut, pid, url }) => {
   const { closeWithTransition, icon: setIcon } = useProcesses();
   const { setIconPositions } = useSession();
   const extension = useMemo(() => getExtension(url || ""), [url]);
-  const { type } = extensions[extension] || {};
-  const extType = type || `${extension.toUpperCase().replace(".", "")} File`;
+  const extType = getFileType(extension);
   const inputRef = useRef<HTMLInputElement>(null);
   const { fs, readdir, rename, stat, updateFolder } = useFileSystem();
   const stats = useStats(url);

components/system/Files/FileEntry/ColumnRow.tsx

@@ -0,0 +1,64 @@
+import type Stats from "browserfs/dist/node/core/node_fs_stats";
+import { useCallback, useState, useRef, useEffect, memo } from "react";
+import { useTheme } from "styled-components";
+import StyledColumnRow from "components/system/Files/FileEntry/StyledColumnRow";
+import { type Columns } from "components/system/Files/FileManager/Columns/constants";
+import {
+  getDateModified,
+  getFileType,
+} from "components/system/Files/FileEntry/functions";
+import { UNKNOWN_SIZE } from "contexts/fileSystem/core";
+import { useFileSystem } from "contexts/fileSystem";
+import { getExtension, getFormattedSize } from "utils/functions";
+
+type ColumnDataProps = {
+  date: string;
+  size: string;
+  type: string;
+};
+
+const ColumnRow: FC<{
+  columns: Columns;
+  isDirectory: boolean;
+  isShortcut: boolean;
+  path: string;
+  stats: Stats;
+}> = ({ columns, isDirectory, isShortcut, path, stats }) => {
+  const { stat } = useFileSystem();
+  const { formats } = useTheme();
+  const getColumnData = useCallback(async (): Promise<ColumnDataProps> => {
+    const fullStats = stats.size === UNKNOWN_SIZE ? await stat(path) : stats;
+
+    return {
+      date: getDateModified(path, fullStats, formats.dateModified),
+      size: isDirectory ? "" : getFormattedSize(fullStats.size, true),
+      type: isDirectory
+        ? "File folder"
+        : isShortcut
+          ? "Shortcut"
+          : getFileType(getExtension(path)),
+    };
+  }, [formats.dateModified, isDirectory, isShortcut, path, stat, stats]);
+  const [columnData, setColumnData] = useState<ColumnDataProps>();
+  const creatingRef = useRef(false);
+
+  useEffect(() => {
+    if (!columnData && !creatingRef.current) {
+      creatingRef.current = true;
+      getColumnData().then((newColumnData) => {
+        setColumnData(newColumnData);
+        creatingRef.current = false;
+      });
+    }
+  }, [columnData, getColumnData]);
+
+  return (
+    <StyledColumnRow>
+      <div style={{ width: columns?.date.width }}>{columnData?.date}</div>
+      <div style={{ width: columns?.type.width }}>{columnData?.type}</div>
+      <div style={{ width: columns?.size.width }}>{columnData?.size}</div>
+    </StyledColumnRow>
+  );
+};
+
+export default memo(ColumnRow);

components/system/Files/FileEntry/StyledColumnRow.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const StyledColumnRow = styled.div`
+  display: flex;
+
+  div {
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:last-child {
+      margin-right: -6px;
+      padding-right: 6px;
+    }
+  }
+`;
+
+export default StyledColumnRow;

components/system/Files/FileEntry/SubIcons.tsx

@@ -19,7 +19,7 @@ type IconProps = {
 };
 
 type SharedSubIconProps = {
-  imgSize?: 64 | 32 | 16;
+  imgSize?: 64 | 32 | 16 | 8;
   isDesktop?: boolean;
 };
 
@@ -51,18 +51,25 @@ const SubIcon: FC<SubIconProps> = ({
   totalSubIcons,
   view,
 }) => {
-  const iconView = useMemo(
-    () =>
-      FileEntryIconSize[
-        ![SHORTCUT_ICON, FOLDER_FRONT_ICON].includes(icon) &&
-        !icon.startsWith("blob:") &&
-        !icon.startsWith(ICON_CACHE) &&
-        !icon.startsWith(YT_ICON_CACHE)
-          ? "sub"
-          : view
-      ],
-    [icon, view]
-  );
+  const iconView = useMemo(() => {
+    const isSub =
+      ![SHORTCUT_ICON, FOLDER_FRONT_ICON].includes(icon) &&
+      !icon.startsWith("blob:") &&
+      !icon.startsWith(ICON_CACHE) &&
+      !icon.startsWith(YT_ICON_CACHE);
+
+    if (icon === SHORTCUT_ICON && view === "details") {
+      return {
+        displaySize: 16,
+        imgSize: 48,
+      };
+    }
+
+    return FileEntryIconSize[
+      isSub ? (view === "details" ? "detailsSub" : "sub") : view
+    ];
+  }, [icon, view]);
+
   const style = useMemo((): React.CSSProperties | undefined => {
     if (icon === FOLDER_FRONT_ICON) return { zIndex: 3 };
 
@@ -120,10 +127,19 @@ const SubIcons: FC<SubIconsProps> = ({
         : subIcons,
     [showShortcutIcon, subIcons]
   );
-  const filteredSubIcons = useMemo(
-    () => icons?.filter((subIcon) => subIcon !== icon) || [],
-    [icon, icons]
-  );
+  const filteredSubIcons = useMemo(() => {
+    const iconsLength = icons?.length;
+
+    if (
+      iconsLength &&
+      view === "details" &&
+      icons[iconsLength - 1] === FOLDER_FRONT_ICON
+    ) {
+      return [];
+    }
+
+    return icons?.filter((subIcon) => subIcon !== icon) || [];
+  }, [icon, icons, view]);
 
   return (
     <>

components/system/Files/FileEntry/functions.ts

@@ -13,6 +13,7 @@ import processDirectory from "contexts/process/directory";
 import {
   AUDIO_FILE_EXTENSIONS,
   BASE_2D_CONTEXT_OPTIONS,
+  DEFAULT_LOCALE,
   DYNAMIC_EXTENSION,
   DYNAMIC_PREFIX,
   FOLDER_BACK_ICON,
@@ -78,7 +79,13 @@ export const isExistingFile = (
 export const getModifiedTime = (path: string, stats: FileStat): number => {
   const { mtimeMs } = stats;
 
-  return isExistingFile(stats) ? get9pModifiedTime(path) || mtimeMs : mtimeMs;
+  if (isExistingFile(stats)) {
+    const storedMtime = get9pModifiedTime(path);
+
+    if (storedMtime > 0) return storedMtime;
+  }
+
+  return mtimeMs;
 };
 
 export const getIconFromIni = (
@@ -879,3 +886,21 @@ export const getTextWrapData = (
     width: Math.min(maxWidth, totalWidth),
   };
 };
+
+export const getDateModified = (
+  path: string,
+  fullStats: Stats,
+  format: Intl.DateTimeFormatOptions
+): string => {
+  const modifiedTime = getModifiedTime(path, fullStats);
+  const date = new Date(modifiedTime).toISOString().slice(0, 10);
+  const time = new Intl.DateTimeFormat(DEFAULT_LOCALE, format).format(
+    modifiedTime
+  );
+
+  return `${date} ${time}`;
+};
+
+export const getFileType = (extension: string): string =>
+  extensions[extension]?.type ||
+  `${extension.toUpperCase().replace(".", "")} File`;