@tutti-os/workspace-file-manager 0.0.3 → 0.0.5

package/dist/index.js

@@ -16,16 +16,16 @@ import {
   splitWorkspaceFileName,
   workspaceFilePreviewMaxBytes,
   workspaceFileTextMaxBytes
-} from "./chunk-IMOFXYBB.js";
+} from "./chunk-HYOTD6NY.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
   workspaceFileManagerI18nNamespace,
   workspaceFileManagerI18nResources
-} from "./chunk-P2UOYMTS.js";
+} from "./chunk-AUUZNQ37.js";
 
 // src/ui/WorkspaceFileManager.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
 import { cn as cn6 } from "@tutti-os/ui-system";
 
 // src/ui/WorkspaceFileManagerMenus.tsx
@@ -932,7 +932,17 @@ function shouldResolveWorkspaceFileEntryIcon(entry) {
   if (isWorkspaceApplicationBundle(entry)) {
     return true;
   }
-  return entry.kind === "file" && resolveWorkspaceFileVisualKind(entry) === "image";
+  if (shouldUseWorkspaceFileExtensionDocumentIcon(entry)) {
+    return false;
+  }
+  return entry.kind === "file";
+}
+function shouldUseWorkspaceFileExtensionDocumentIcon(entry) {
+  if (entry.kind !== "file") {
+    return false;
+  }
+  const visualKind = resolveWorkspaceFileVisualKind(entry);
+  return visualKind === "code" || visualKind === "markdown" || classifyWorkspaceFilePreviewKind(entry) === "text";
 }
 function isWorkspaceApplicationBundle(entry) {
   return entry.name.trim().toLowerCase().endsWith(".app");
@@ -942,7 +952,7 @@ function resolveWorkspaceFileEntryIconCacheKey(entry) {
 }
 
 // src/ui/WorkspaceFileEntryIcon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function WorkspaceFileEntryIcon({
   entry,
   frameClassName,
@@ -988,6 +998,9 @@ function DefaultEntryIcon({
   if (isWorkspaceApplicationBundle(entry)) {
     return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
   }
+  if (shouldUseWorkspaceFileExtensionDocumentIcon(entry)) {
+    return /* @__PURE__ */ jsx2(ExtensionDocumentIcon, { entry, iconClassName });
+  }
   switch (visualKind) {
     case "directory":
       return /* @__PURE__ */ jsx2(FolderFilledIcon, { className: iconClassName });
@@ -1006,6 +1019,25 @@ function DefaultEntryIcon({
       return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
   }
 }
+function ExtensionDocumentIcon({
+  entry,
+  iconClassName
+}) {
+  const extension = resolveWorkspaceFileExtension(entry.name).slice(0, 5).toUpperCase();
+  const showExtension = extension.length > 0 && iconClassName.includes("52px");
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn2("relative inline-block overflow-visible", iconClassName),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "absolute inset-[5%] rounded-[6px] border border-black/10 bg-linear-to-br from-white via-[#f8f8f8] to-[#ececec] shadow-[0_8px_16px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.85)]" }),
+        /* @__PURE__ */ jsx2("span", { className: "absolute top-[5%] right-[5%] h-[28%] w-[28%] overflow-hidden rounded-tr-[6px]", children: /* @__PURE__ */ jsx2("span", { className: "absolute top-0 right-0 h-full w-full origin-top-right -skew-x-3 rounded-bl-[4px] border-b border-l border-black/10 bg-linear-to-br from-white to-[#d9d9d9] shadow-[-2px_3px_5px_rgba(0,0,0,0.18)]" }) }),
+        showExtension ? /* @__PURE__ */ jsx2("span", { className: "absolute right-[12%] bottom-[14%] left-[12%] truncate text-center text-[10px] leading-none font-semibold tracking-wide text-[#7a7a7a]", children: extension }) : null
+      ]
+    }
+  );
+}
 function entryIconColorClassName(visualKind, isAppBundle) {
   if (isAppBundle) {
     return "text-[var(--text-tertiary)]";
@@ -1030,7 +1062,7 @@ function workspaceFileManagerIconGridFrameClassName() {
 }
 
 // src/ui/WorkspaceFileManagerIconGrid.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function WorkspaceFileManagerIconGrid({
   contextMenuEntryPath,
   copy,
@@ -1141,7 +1173,7 @@ function WorkspaceFileManagerIconTile({
     }
   );
   if (isInlineRenaming) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         "aria-label": entry.name,
@@ -1165,7 +1197,7 @@ function WorkspaceFileManagerIconTile({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       "aria-label": entry.name,
@@ -1192,7 +1224,7 @@ function WorkspaceFileManagerIconTile({
       },
       children: [
         iconGraphic,
-        /* @__PURE__ */ jsxs2("span", { className: "line-clamp-2 w-full break-all text-[13px] leading-[18px] text-[var(--text-primary)]", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "line-clamp-2 w-full break-all text-[13px] leading-[18px] text-[var(--text-primary)]", children: [
           /* @__PURE__ */ jsx3("span", { children: nameParts.start }),
           nameParts.end ? /* @__PURE__ */ jsx3("span", { children: nameParts.end }) : null
         ] })
@@ -1225,7 +1257,7 @@ function IconTileRenameInput({
     }
   }, [hasFileExtension, nameParts.start.length]);
   const validationMessage = inlineRenameValidation === "required" ? copy.t("createNameRequired") : inlineRenameValidation === "invalid" ? copy.t("createNameInvalid") : null;
-  return /* @__PURE__ */ jsxs2("span", { className: "flex w-full min-w-0 flex-col gap-0.5", children: [
+  return /* @__PURE__ */ jsxs3("span", { className: "flex w-full min-w-0 flex-col gap-0.5", children: [
     /* @__PURE__ */ jsx3(
       "input",
       {
@@ -1261,8 +1293,126 @@ function IconTileRenameInput({
   ] });
 }
 
+// src/ui/workspaceFileManagerArrangeMode.ts
+var workspaceFileManagerArrangeModeStorageKey = "nextop.workspace-file-manager.arrange-mode";
+var workspaceFileManagerArrangeModes = /* @__PURE__ */ new Set([
+  "none",
+  "name",
+  "kind",
+  "application",
+  "lastOpened",
+  "dateAdded",
+  "modified",
+  "created",
+  "size",
+  "tags"
+]);
+function readWorkspaceFileManagerArrangeMode() {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+  const stored = window.localStorage.getItem(
+    workspaceFileManagerArrangeModeStorageKey
+  );
+  return isWorkspaceFileManagerArrangeMode(stored) ? stored : "none";
+}
+function writeWorkspaceFileManagerArrangeMode(arrangeMode) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.localStorage.setItem(
+    workspaceFileManagerArrangeModeStorageKey,
+    arrangeMode
+  );
+}
+function sortWorkspaceFileEntriesForArrangeMode(entries, arrangeMode) {
+  if (arrangeMode === "none") {
+    return entries;
+  }
+  return [...entries].sort((left, right) => {
+    switch (arrangeMode) {
+      case "name":
+        return compareDirectoryFirst(left, right) || compareEntryName(left, right);
+      case "kind":
+        return compareDirectoryFirst(left, right) || compareText(
+          resolveEntryKindGroup(left),
+          resolveEntryKindGroup(right)
+        ) || compareEntryName(left, right);
+      case "application":
+        return compareDirectoryFirst(left, right) || compareText(
+          resolveEntryApplicationGroup(left),
+          resolveEntryApplicationGroup(right)
+        ) || compareEntryName(left, right);
+      case "lastOpened":
+        return compareDateDescending(left, right, "lastOpened") || compareEntryName(left, right);
+      case "dateAdded":
+        return compareDateDescending(left, right, "dateAdded") || compareEntryName(left, right);
+      case "modified":
+        return compareDateDescending(left, right, "modified") || compareEntryName(left, right);
+      case "created":
+        return compareDateDescending(left, right, "created") || compareEntryName(left, right);
+      case "size":
+        return compareSizeDescending(left, right) || compareEntryName(left, right);
+      case "tags":
+        return compareDirectoryFirst(left, right) || compareEntryName(left, right);
+    }
+  });
+}
+function isWorkspaceFileManagerArrangeMode(value) {
+  return workspaceFileManagerArrangeModes.has(
+    value
+  );
+}
+function compareDirectoryFirst(left, right) {
+  const leftRank = left.kind === "directory" ? 0 : 1;
+  const rightRank = right.kind === "directory" ? 0 : 1;
+  return leftRank - rightRank;
+}
+function compareEntryName(left, right) {
+  return compareText(left.name, right.name);
+}
+function compareText(left, right) {
+  return left.localeCompare(right, void 0, {
+    numeric: true,
+    sensitivity: "base"
+  });
+}
+function resolveWorkspaceFileEntryArrangeDateMs(entry, arrangeMode) {
+  switch (arrangeMode) {
+    case "lastOpened":
+      return entry.lastOpenedMs ?? entry.mtimeMs;
+    case "dateAdded":
+    case "created":
+      return entry.createdTimeMs ?? entry.mtimeMs;
+    case "modified":
+    default:
+      return entry.mtimeMs;
+  }
+}
+function compareDateDescending(left, right, arrangeMode) {
+  return (resolveWorkspaceFileEntryArrangeDateMs(right, arrangeMode) ?? 0) - (resolveWorkspaceFileEntryArrangeDateMs(left, arrangeMode) ?? 0);
+}
+function compareSizeDescending(left, right) {
+  return (right.sizeBytes ?? 0) - (left.sizeBytes ?? 0);
+}
+function resolveEntryKindGroup(entry) {
+  if (entry.kind === "directory") {
+    return "directory";
+  }
+  return resolveWorkspaceFileVisualKind(entry);
+}
+function resolveEntryApplicationGroup(entry) {
+  if (entry.kind === "directory") {
+    return "folder";
+  }
+  if (entry.name.trim().toLowerCase().endsWith(".app")) {
+    return "application";
+  }
+  return resolveWorkspaceFileExtension(entry.name) || resolveEntryKindGroup(entry);
+}
+
 // src/ui/WorkspaceFileManagerPanels.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var workspaceFileManagerTableGridClassName = "grid-cols-[minmax(0,_1fr)_148px_96px]";
 var workspaceFileManagerTableGridStyle = {
   gridTemplateColumns: "minmax(0, 1fr) 148px 96px"
@@ -1284,6 +1434,7 @@ var workspaceFileManagerMoveDragAutoScrollEdgePx = 48;
 var workspaceFileManagerMoveDragAutoScrollStepPx = 12;
 var workspaceFileManagerEntryOpenClickIntervalMs = 500;
 function WorkspaceFileManagerPanels({
+  arrangeMode,
   canMove,
   contextMenuEntryPath,
   dateLocale,
@@ -1328,6 +1479,10 @@ function WorkspaceFileManagerPanels({
   const entriesRef = useRef3(state.entries);
   const nativeEntryDragEnabled = onEntryDragStart !== void 0 && (entryDragMode === "external" || entryDragMode === void 0 && !canMove);
   const internalMoveEnabled = canMove && !nativeEntryDragEnabled;
+  const dateColumnLabel = resolveWorkspaceFileManagerDateColumnLabel(
+    copy,
+    arrangeMode
+  );
   const stopMoveDragAutoScroll = useCallback2(() => {
     const autoScroll = moveDragAutoScrollRef.current;
     if (autoScroll?.frameId !== null && autoScroll?.frameId !== void 0) {
@@ -1515,7 +1670,7 @@ function WorkspaceFileManagerPanels({
     stopMoveDragAutoScroll,
     updateMoveDragAutoScroll
   ]);
-  const showPreviewPanel = false;
+  const showPreviewPanel = layoutMode === "list";
   const useStackedPreview = false;
   const previewPaneClassName = useStackedPreview ? "min-w-0 border-t border-[var(--border-1)]" : "min-w-[220px] border-l border-[var(--border-1)]";
   const tableGridClassName = useStackedPreview ? workspaceFileManagerCompactTableGridClassName : workspaceFileManagerTableGridClassName;
@@ -1637,8 +1792,8 @@ function WorkspaceFileManagerPanels({
           onEntryClick: handleEntryClick,
           onEntryPointerDown: handleEntryPointerDown
         }
-      ) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs3(
+      ) : /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             className: cn4(
@@ -1652,7 +1807,7 @@ function WorkspaceFileManagerPanels({
                 "span",
                 {
                   className: cn4("whitespace-nowrap", tableCellPaddingClassName),
-                  children: copy.t("modifiedLabel")
+                  children: dateColumnLabel
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -1670,6 +1825,7 @@ function WorkspaceFileManagerPanels({
           {
             contextMenuActive: contextMenuEntryPath === entry.path,
             copy,
+            arrangeMode,
             dateLocale,
             entry,
             iconUrlByCacheKey,
@@ -1719,13 +1875,13 @@ function WorkspaceFileManagerPanels({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "relative min-h-0 min-w-0 flex-1 overflow-hidden",
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "div",
           {
             className: cn4(
@@ -1804,7 +1960,21 @@ function useWorkspaceFileManagerStackedLayout(breakpoint) {
   }, [breakpoint]);
   return { isStacked, rootRef };
 }
+function resolveWorkspaceFileManagerDateColumnLabel(copy, arrangeMode) {
+  switch (arrangeMode) {
+    case "lastOpened":
+      return copy.t("arrangeLastOpenedLabel");
+    case "dateAdded":
+      return copy.t("arrangeDateAddedLabel");
+    case "created":
+      return copy.t("arrangeCreatedLabel");
+    case "modified":
+    default:
+      return copy.t("modifiedLabel");
+  }
+}
 function EntryRow({
+  arrangeMode,
   canMove,
   contextMenuActive,
   copy,
@@ -1884,7 +2054,10 @@ function EntryRow({
         "truncate text-xs text-[var(--text-secondary)]",
         tableCellPaddingClassName
       ),
-      children: formatWorkspaceFileModifiedTime(entry.mtimeMs, dateLocale)
+      children: formatWorkspaceFileModifiedTime(
+        resolveWorkspaceFileEntryArrangeDateMs(entry, arrangeMode),
+        dateLocale
+      )
     }
   );
   const sizeCell = /* @__PURE__ */ jsx4(
@@ -1898,13 +2071,13 @@ function EntryRow({
     }
   );
   if (isInlineRenaming) {
-    return /* @__PURE__ */ jsxs3("div", { ...rowProps, ref: divRowRef, children: [
+    return /* @__PURE__ */ jsxs4("div", { ...rowProps, ref: divRowRef, children: [
       nameCell,
       modifiedCell,
       sizeCell
     ] });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       ...rowProps,
@@ -1935,7 +2108,7 @@ function MoveDragPreview({
   iconUrlByCacheKey,
   preview
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "aria-hidden": "true",
@@ -2042,7 +2215,7 @@ function EntryNameCell({
     }
   }, [name, onConfirmInlineRename]);
   if (isInlineRenaming) {
-    return /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsx4(
         WorkspaceFileEntryIcon,
         {
@@ -2052,7 +2225,7 @@ function EntryNameCell({
           iconUrlByCacheKey
         }
       ),
-      /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
         /* @__PURE__ */ jsx4(
           "input",
           {
@@ -2104,7 +2277,7 @@ function EntryNameCell({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 items-center gap-2", children: [
     /* @__PURE__ */ jsx4(
       WorkspaceFileEntryIcon,
       {
@@ -2115,7 +2288,7 @@ function EntryNameCell({
         isEnteringDirectory
       }
     ),
-    /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 max-w-full overflow-hidden whitespace-nowrap text-sm", children: [
+    /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 max-w-full overflow-hidden whitespace-nowrap text-sm", children: [
       /* @__PURE__ */ jsx4("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: nameParts.start }),
       nameParts.end ? /* @__PURE__ */ jsx4("span", { className: "flex-none overflow-hidden text-ellipsis", children: nameParts.end }) : null
     ] })
@@ -2152,14 +2325,14 @@ function PreviewPane({
   if (!entry || previewState.status === "empty") {
     return /* @__PURE__ */ jsx4("div", { className: "grid h-full min-h-[180px] place-items-center overflow-hidden p-8 text-center text-sm leading-5 text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx4("span", { className: "max-w-[24ch] [overflow-wrap:anywhere]", children: copy.t("previewEmptyLabel") }) });
   }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsx4(PreviewSurface, { copy, previewState }),
-    /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-[14px]", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-[3px]", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-[14px]", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-[3px]", children: [
         /* @__PURE__ */ jsx4("strong", { className: "min-w-0 truncate text-[15px] font-semibold text-[var(--text-primary)]", children: entry.name }),
         /* @__PURE__ */ jsx4("p", { className: "min-w-0 truncate text-xs text-[var(--text-secondary)]", children: entry.path })
       ] }),
-      /* @__PURE__ */ jsxs3("dl", { className: "border-t border-[var(--border-1)]", children: [
+      /* @__PURE__ */ jsxs4("dl", { className: "border-t border-[var(--border-1)]", children: [
         /* @__PURE__ */ jsx4(
           PreviewDetail,
           {
@@ -2215,7 +2388,7 @@ function PreviewDetail({
   label,
   value
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "@max-[600px]/workspace-file-manager:grid-cols-1 @max-[600px]/workspace-file-manager:gap-0.5 grid gap-2.5 border-b border-[var(--border-1)] py-2.5 text-xs",
@@ -2239,14 +2412,21 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon as ArrowRightIcon2,
   Button as Button2,
-  GridHorizontalLinedIcon,
-  LayoutMenuIcon,
+  ChevronDownIcon,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   LoadingIcon as LoadingIcon3,
   RefreshIcon,
+  ViewGridLinedIcon,
+  ViewListLinedIcon,
   cn as cn5
 } from "@tutti-os/ui-system";
 import { useState as useState3 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkspaceFileManagerToolbar({
   breadcrumbs,
   canGoBack,
@@ -2256,9 +2436,11 @@ function WorkspaceFileManagerToolbar({
   isBusy,
   isLoading,
   isMutating,
+  arrangeMode,
   layoutMode,
   onGoBack,
   onGoForward,
+  onArrangeModeChange,
   onLayoutModeChange,
   onLoadDirectory,
   onRefresh
@@ -2268,7 +2450,7 @@ function WorkspaceFileManagerToolbar({
     setRefreshAnimationKey((currentKey) => currentKey + 1);
     onRefresh();
   };
-  return /* @__PURE__ */ jsxs4("header", { className: "@max-[600px]/workspace-file-manager:flex-nowrap flex h-10 min-h-10 w-full min-w-0 items-center gap-2 border-b border-[var(--border-1)] px-2 py-1", children: [
+  return /* @__PURE__ */ jsxs5("header", { className: "@max-[600px]/workspace-file-manager:flex-nowrap flex h-10 min-h-10 w-full min-w-0 items-center gap-2 border-b border-[var(--border-1)] px-2 py-1", children: [
     /* @__PURE__ */ jsx5(
       ToolbarIconButton,
       {
@@ -2309,16 +2491,18 @@ function WorkspaceFileManagerToolbar({
         )) })
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { className: "@max-[600px]/workspace-file-manager:justify-end flex flex-none items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "@max-[600px]/workspace-file-manager:justify-end flex flex-none items-center gap-1.5", children: [
       /* @__PURE__ */ jsx5(
         LayoutModeToggle,
         {
+          arrangeMode,
           copy,
           layoutMode,
+          onArrangeModeChange,
           onLayoutModeChange
         }
       ),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs5(
         ToolbarActionButton,
         {
           disabled: isLoading || isMutating || isBusy,
@@ -2342,11 +2526,25 @@ function WorkspaceFileManagerToolbar({
   ] });
 }
 function LayoutModeToggle({
+  arrangeMode,
   copy,
   layoutMode,
+  onArrangeModeChange,
   onLayoutModeChange
 }) {
-  return /* @__PURE__ */ jsxs4(
+  const arrangeOptions = [
+    { label: copy.t("arrangeNoneLabel"), mode: "none" },
+    { label: copy.t("nameLabel"), mode: "name" },
+    { label: copy.t("arrangeKindLabel"), mode: "kind" },
+    { label: copy.t("arrangeApplicationLabel"), mode: "application" },
+    { label: copy.t("arrangeLastOpenedLabel"), mode: "lastOpened" },
+    { label: copy.t("arrangeDateAddedLabel"), mode: "dateAdded" },
+    { label: copy.t("modifiedLabel"), mode: "modified" },
+    { label: copy.t("arrangeCreatedLabel"), mode: "created" },
+    { label: copy.t("sizeLabel"), mode: "size" },
+    { label: copy.t("arrangeTagsLabel"), mode: "tags" }
+  ];
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "flex items-center rounded-md border border-[var(--border-1)] bg-[var(--transparency-block)] p-0.5",
@@ -2360,7 +2558,7 @@ function LayoutModeToggle({
             onClick: () => {
               onLayoutModeChange("icon");
             },
-            children: /* @__PURE__ */ jsx5(LayoutMenuIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ jsx5(ViewGridLinedIcon, { className: "size-4" })
           }
         ),
         /* @__PURE__ */ jsx5(
@@ -2371,9 +2569,52 @@ function LayoutModeToggle({
             onClick: () => {
               onLayoutModeChange("list");
             },
-            children: /* @__PURE__ */ jsx5(GridHorizontalLinedIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ jsx5(ViewListLinedIcon, { className: "size-4" })
           }
-        )
+        ),
+        /* @__PURE__ */ jsx5("span", { className: "mx-0.5 h-4 w-px bg-[var(--border-1)]", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx5(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+            Button2,
+            {
+              "aria-label": copy.t("arrangeMenuLabel"),
+              className: "size-6 min-w-6 rounded-[4px] p-0 text-[var(--text-secondary)] data-[state=open]:bg-[var(--background-fronted)] data-[state=open]:text-[var(--text-primary)] data-[state=open]:shadow-sm",
+              size: "icon-sm",
+              title: copy.t("arrangeMenuLabel"),
+              type: "button",
+              variant: "ghost",
+              children: /* @__PURE__ */ jsx5(ChevronDownIcon, { className: "size-3.5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx5(
+            DropdownMenuContent,
+            {
+              align: "end",
+              className: "min-w-[236px] px-1 py-1",
+              sideOffset: 7,
+              children: /* @__PURE__ */ jsx5(
+                DropdownMenuRadioGroup,
+                {
+                  value: arrangeMode,
+                  onValueChange: (nextMode) => {
+                    onArrangeModeChange(nextMode);
+                  },
+                  children: arrangeOptions.map((option, index) => /* @__PURE__ */ jsxs5("div", { children: [
+                    index === 1 ? /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}) : null,
+                    /* @__PURE__ */ jsx5(
+                      DropdownMenuRadioItem,
+                      {
+                        className: "h-8 text-sm font-normal",
+                        value: option.mode,
+                        children: option.label
+                      }
+                    )
+                  ] }, option.mode))
+                }
+              )
+            }
+          )
+        ] })
       ]
     }
   );
@@ -2390,8 +2631,8 @@ function LayoutModeButton({
       "aria-label": ariaLabel,
       "aria-pressed": active,
       className: cn5(
-        "size-6 min-w-6 rounded-[4px] p-0 text-[var(--text-secondary)]",
-        active && "bg-[var(--background-fronted)] text-[var(--text-primary)] shadow-sm"
+        "size-6 min-w-6 rounded-[4px] p-0 text-text-secondary",
+        active && "!bg-background-fronted text-foreground hover:!bg-background-fronted"
       ),
       size: "icon-sm",
       title: ariaLabel,
@@ -2448,7 +2689,7 @@ function BreadcrumbButton({
   onClick,
   showSeparator
 }) {
-  return /* @__PURE__ */ jsxs4("li", { className: "flex min-w-0 items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs5("li", { className: "flex min-w-0 items-center gap-2", children: [
     showSeparator ? /* @__PURE__ */ jsx5("span", { className: "flex-none text-[var(--text-tertiary)]", children: "/" }) : null,
     /* @__PURE__ */ jsx5(
       "button",
@@ -2465,8 +2706,24 @@ function BreadcrumbButton({
   ] });
 }
 
-// src/ui/useWorkspaceFileManagerLayoutMode.ts
+// src/ui/useWorkspaceFileManagerArrangeMode.ts
 import { useCallback as useCallback3, useState as useState4 } from "react";
+function useWorkspaceFileManagerArrangeMode() {
+  const [arrangeMode, setArrangeModeState] = useState4(
+    readWorkspaceFileManagerArrangeMode
+  );
+  const setArrangeMode = useCallback3(
+    (nextArrangeMode) => {
+      setArrangeModeState(nextArrangeMode);
+      writeWorkspaceFileManagerArrangeMode(nextArrangeMode);
+    },
+    []
+  );
+  return { arrangeMode, setArrangeMode };
+}
+
+// src/ui/useWorkspaceFileManagerLayoutMode.ts
+import { useCallback as useCallback4, useState as useState5 } from "react";
 
 // src/ui/workspaceFileManagerLayoutMode.ts
 var workspaceFileManagerLayoutModeStorageKey = "nextop.workspace-file-manager.layout-mode";
@@ -2491,10 +2748,10 @@ function writeWorkspaceFileManagerLayoutMode(layoutMode) {
 
 // src/ui/useWorkspaceFileManagerLayoutMode.ts
 function useWorkspaceFileManagerLayoutMode() {
-  const [layoutMode, setLayoutModeState] = useState4(
+  const [layoutMode, setLayoutModeState] = useState5(
     readWorkspaceFileManagerLayoutMode
   );
-  const setLayoutMode = useCallback3(
+  const setLayoutMode = useCallback4(
     (nextLayoutMode) => {
       setLayoutModeState(nextLayoutMode);
       writeWorkspaceFileManagerLayoutMode(nextLayoutMode);
@@ -2505,13 +2762,13 @@ function useWorkspaceFileManagerLayoutMode() {
 }
 
 // src/ui/useWorkspaceFileEntryIconUrls.ts
-import { useEffect as useEffect3, useMemo, useState as useState5 } from "react";
+import { useEffect as useEffect3, useMemo, useState as useState6 } from "react";
 function buildIconTargetSignature(entries) {
   return entries.filter(shouldResolveWorkspaceFileEntryIcon).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
 }
 function useWorkspaceFileEntryIconUrls(input) {
   const { entries, resolveEntryIconUrl } = input;
-  const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState5(() => /* @__PURE__ */ new Map());
+  const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState6(() => /* @__PURE__ */ new Map());
   const iconTargetSignature = useMemo(
     () => buildIconTargetSignature(entries),
     [entries]
@@ -2742,7 +2999,7 @@ function useWorkspaceFileManagerContextMenuView(session) {
 }
 
 // src/ui/WorkspaceFileManager.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function WorkspaceFileManager({
   className,
   dateLocale,
@@ -2760,6 +3017,7 @@ function WorkspaceFileManager({
   surface = "card"
 }) {
   const rootRef = useRef4(null);
+  const { arrangeMode, setArrangeMode } = useWorkspaceFileManagerArrangeMode();
   const { layoutMode, setLayoutMode } = useWorkspaceFileManagerLayoutMode();
   const rootView = useWorkspaceFileManagerRootView(session);
   const { state: panelsState, view: panelsView } = useWorkspaceFileManagerPanelsView(session);
@@ -2901,7 +3159,7 @@ function WorkspaceFileManager({
       rootView.currentDirectoryPath
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "section",
     {
       className: cn6(
@@ -2917,12 +3175,14 @@ function WorkspaceFileManager({
       onDrop: handleDrop,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
           /* @__PURE__ */ jsx6(
             WorkspaceFileManagerToolbarContainer,
             {
               i18n,
+              arrangeMode,
               layoutMode,
+              onArrangeModeChange: setArrangeMode,
               onDirectoryExpanded,
               onLayoutModeChange: setLayoutMode,
               session
@@ -2940,6 +3200,7 @@ function WorkspaceFileManager({
                 {
                   dateLocale,
                   entryDragMode,
+                  arrangeMode,
                   i18n,
                   layoutMode,
                   onDirectoryExpanded,
@@ -2970,8 +3231,10 @@ function WorkspaceFileManager({
   );
 }
 function WorkspaceFileManagerToolbarContainer({
+  arrangeMode,
   i18n,
   layoutMode,
+  onArrangeModeChange,
   onDirectoryExpanded,
   onLayoutModeChange,
   session
@@ -2988,7 +3251,9 @@ function WorkspaceFileManagerToolbarContainer({
       isBusy: view.isBusy,
       isLoading: view.isLoading,
       isMutating: view.isMutating,
+      arrangeMode,
       layoutMode,
+      onArrangeModeChange,
       onGoBack: () => {
         void session.goBack();
       },
@@ -3012,6 +3277,7 @@ function WorkspaceFileManagerToolbarContainer({
   );
 }
 function WorkspaceFileManagerPanelsContainer({
+  arrangeMode,
   dateLocale,
   entryDragMode,
   i18n,
@@ -3023,13 +3289,18 @@ function WorkspaceFileManagerPanelsContainer({
   session
 }) {
   const { state, view } = useWorkspaceFileManagerPanelsView(session);
+  const arrangedEntries = useMemo2(
+    () => sortWorkspaceFileEntriesForArrangeMode(state.entries, arrangeMode),
+    [arrangeMode, state.entries]
+  );
   const iconUrlByCacheKey = useWorkspaceFileEntryIconUrls({
-    entries: state.entries,
+    entries: arrangedEntries,
     resolveEntryIconUrl
   });
   return /* @__PURE__ */ jsx6(
     WorkspaceFileManagerPanels,
     {
+      arrangeMode,
       canMove: view.canMove,
       contextMenuEntryPath: view.contextMenuEntryPath,
       copy: i18n,
@@ -3046,7 +3317,7 @@ function WorkspaceFileManagerPanelsContainer({
       selectedPath: view.selectedPath,
       showDropOverlay: view.showDropOverlay,
       state: {
-        entries: state.entries,
+        entries: arrangedEntries,
         error: state.error,
         isLoading: state.isLoading
       },
@@ -3084,7 +3355,7 @@ function WorkspaceFileManagerDialogsContainer({
   session
 }) {
   const { state, view } = useWorkspaceFileManagerDialogsView(session);
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx6(
       WorkspaceFileManagerCreateDialog,
       {
@@ -3157,8 +3428,8 @@ function WorkspaceFileManagerContextMenuContainer({
 }) {
   const contextMenuRef = useRef4(null);
   const { view } = useWorkspaceFileManagerContextMenuView(session);
-  const [openWithApplications, setOpenWithApplications] = useState6([]);
-  const [openWithLoading, setOpenWithLoading] = useState6(false);
+  const [openWithApplications, setOpenWithApplications] = useState7([]);
+  const [openWithLoading, setOpenWithLoading] = useState7(false);
   useEffect4(() => {
     const entry = view.contextMenu?.entry;
     if (!entry || !view.showOpenWithAction) {