DataGrid fix for column resizing

.env

@@ -2,7 +2,8 @@ VITE_API_BASE_URL=http://127.0.0.1:8000
 
 # Web UI
 WEBUI_PUBLISHED_PORT=5173
-VITE_API_BASE_URL=/api/v1
+# API base url without /api/v1 or similar parts
+VITE_API_BASE_URL=
 # For local Vite development outside Docker:
 VITE_DEV_API_PROXY_TARGET=http://127.0.0.1:8000
 CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,http://localhost:8080

.env.example

@@ -2,7 +2,8 @@ VITE_API_BASE_URL=http://127.0.0.1:8000
 
 # Web UI
 WEBUI_PUBLISHED_PORT=5173
-VITE_API_BASE_URL=/api/v1
+# API base url without /api/v1 or similar parts
+VITE_API_BASE_URL=
 # For local Vite development outside Docker:
 # VITE_DEV_API_PROXY_TARGET=http://127.0.0.1:8000
 CORS_ORIGINS=http://localhost:5173,http://127.0.0.1:5173,http://localhost:8080

.gitignore

@@ -424,4 +424,6 @@ bin-release/
 
 multisealmail-*.zip
 multi-seal-mail-*.zip
-multi-seal-mail-webui*.tar.gz
+multi-seal-mail-webui*.tar.gz
+
+.env

src/components/table/DataGrid.tsx

@@ -75,6 +75,7 @@ export default function DataGrid<T>({
     startWidth: number;
     baseWidths: Record<string, number>;
     fillColumnId?: string;
+    fillStartWidth?: number;
   } | null>(null);
   const [openFilterColumnId, setOpenFilterColumnId] = useState<string | null>(null);
   const [filterPosition, setFilterPosition] = useState<FilterPosition | null>(null);
@@ -144,10 +145,30 @@ export default function DataGrid<T>({
       const column = columns.find((item) => item.id === activeResize.columnId);
       const minWidth = column?.minWidth ?? 80;
       const maxWidth = column?.maxWidth ?? 2000;
-      const nextWidth = Math.min(maxWidth, Math.max(minWidth, activeResize.startWidth + event.clientX - activeResize.startX));
+      const rawDelta = event.clientX - activeResize.startX;
+      const fillColumn = activeResize.fillColumnId
+        ? columns.find((item) => item.id === activeResize.fillColumnId)
+        : undefined;
+      const nextWidths = { ...activeResize.baseWidths };
+
+      if (fillColumn && fillColumn.id !== activeResize.columnId) {
+        const fillMinWidth = fillColumn.minWidth ?? 80;
+        const fillMaxWidth = fillColumn.maxWidth ?? 2000;
+        const fillStartWidth = activeResize.fillStartWidth
+          ?? activeResize.baseWidths[fillColumn.id]
+          ?? columnPixelWidth(fillColumn, activeResize.baseWidths[fillColumn.id], measuredWidths[fillColumn.id]);
+        const minDelta = Math.max(minWidth - activeResize.startWidth, fillStartWidth - fillMaxWidth);
+        const maxDelta = Math.min(maxWidth - activeResize.startWidth, fillStartWidth - fillMinWidth);
+        const boundedDelta = Math.min(maxDelta, Math.max(minDelta, rawDelta));
+        nextWidths[activeResize.columnId] = activeResize.startWidth + boundedDelta;
+        nextWidths[fillColumn.id] = fillStartWidth - boundedDelta;
+      } else {
+        nextWidths[activeResize.columnId] = Math.min(maxWidth, Math.max(minWidth, activeResize.startWidth + rawDelta));
+      }
+
       setState((current) => ({
         ...current,
-        widths: { ...activeResize.baseWidths, [activeResize.columnId]: nextWidth },
+        widths: nextWidths,
         fillColumnId: activeResize.fillColumnId
       }));
     }
@@ -315,8 +336,19 @@ export default function DataGrid<T>({
                     const baseWidths = measuredColumnWidths(columns, headerCellRefs.current, state.widths, measuredWidths);
                     const currentWidth = baseWidths[column.id] ?? columnPixelWidth(column, state.widths?.[column.id], measuredWidths[column.id]);
                     const fillColumnId = chooseResizeFillColumn(columns, column.id);
+                    const fillColumn = fillColumnId ? columns.find((item) => item.id === fillColumnId) : undefined;
+                    const fillStartWidth = fillColumn
+                      ? baseWidths[fillColumn.id] ?? columnPixelWidth(fillColumn, state.widths?.[fillColumn.id], measuredWidths[fillColumn.id])
+                      : undefined;
                     setState((current) => ({ ...current, widths: { ...baseWidths }, fillColumnId }));
-                    setResizeState({ columnId: column.id, startX: event.clientX, startWidth: currentWidth, baseWidths, fillColumnId });
+                    setResizeState({
+                      columnId: column.id,
+                      startX: event.clientX,
+                      startWidth: currentWidth,
+                      baseWidths,
+                      fillColumnId,
+                      fillStartWidth
+                    });
                   }}
                 >
                   <GripVertical size={14} aria-hidden="true" />
@@ -470,14 +502,14 @@ function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: R
 
   const savedColumnIds = new Set(Object.keys(savedWidths ?? {}));
   if (savedColumnIds.size > 0) {
-    if (fillColumnId && columns.some((column) => column.id === fillColumnId)) return new Set([fillColumnId]);
+    const preferredFillColumnId = chooseResizeFillColumn(columns);
+    if (fillColumnId && fillColumnId === preferredFillColumnId && columns.some((column) => column.id === fillColumnId)) {
+      return new Set([fillColumnId]);
+    }
 
     const unsizedNonStickyResizable = columns.filter((column) => column.resizable && !column.sticky && !savedColumnIds.has(column.id));
     if (unsizedNonStickyResizable.length > 0) return new Set(unsizedNonStickyResizable.map((column) => column.id));
 
-    const unsizedResizable = columns.filter((column) => column.resizable && !savedColumnIds.has(column.id));
-    if (unsizedResizable.length > 0) return new Set(unsizedResizable.map((column) => column.id));
-
     const unsizedFlexible = columns.filter((column) => !savedColumnIds.has(column.id) && isFlexibleColumn(column, savedWidths?.[column.id]));
     if (unsizedFlexible.length > 0) return new Set(unsizedFlexible.map((column) => column.id));
 
@@ -488,9 +520,6 @@ function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: R
   const nonStickyResizable = columns.filter((column) => column.resizable && !column.sticky);
   if (nonStickyResizable.length > 0) return new Set(nonStickyResizable.map((column) => column.id));
 
-  const resizable = columns.filter((column) => column.resizable);
-  if (resizable.length > 0) return new Set(resizable.map((column) => column.id));
-
   const flexible = columns.filter((column) => isFlexibleColumn(column, savedWidths?.[column.id]));
   if (flexible.length > 0) return new Set();
 
@@ -499,18 +528,27 @@ function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: R
 }
 
 function chooseResizeFillColumn<T>(columns: DataGridColumn<T>[], activeColumnId?: string): string | undefined {
-  const candidateGroups = [
+  const activeIndex = activeColumnId ? columns.findIndex((column) => column.id === activeColumnId) : -1;
-    columns.filter((column) => column.resizable && !column.sticky && column.id !== activeColumnId),
+  const candidateColumns = activeIndex >= 0 ? columns.slice(activeIndex + 1) : columns;
-    columns.filter((column) => column.resizable && column.id !== activeColumnId),
-    columns.filter((column) => !column.sticky && column.id !== activeColumnId),
-    columns.filter((column) => column.id !== activeColumnId),
-    columns
-  ];
 
-  for (const candidates of candidateGroups) {
+  // Only resizable, non-sticky columns are allowed to absorb spare width. This keeps
-    const fallback = candidates[candidates.length - 1];
+  // fixed/action columns fixed. During active resize the absorber must be to the right
-    if (fallback) return fallback.id;
+  // of the dragged column, so columns on the left never move. If there is no eligible
+  // column to the right, the dragged column itself may stay stretched; otherwise no
+  // absorber is selected and the grid may grow/shrink naturally.
+  const rightmostResizableNonSticky = (items: DataGridColumn<T>[]) => {
+    const candidates = items.filter((column) => column.resizable && !column.sticky);
+    return candidates[candidates.length - 1];
+  };
+
+  const rightFillColumn = rightmostResizableNonSticky(candidateColumns);
+  if (rightFillColumn) return rightFillColumn.id;
+
+  if (activeIndex >= 0) {
+    const activeColumn = columns[activeIndex];
+    if (activeColumn?.resizable && !activeColumn.sticky) return activeColumn.id;
   }
+
   return undefined;
 }
 

src/components/table/DataGrid.tsx.old

@@ -1,730 +0,0 @@
-import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
-import { createPortal } from "react-dom";
-import { ArrowDown, ArrowUp, ChevronsUpDown, Filter, GripVertical, X } from "lucide-react";
-
-export type DataGridSortDirection = "asc" | "desc";
-export type DataGridFilterType = "text" | "number" | "integer" | "boolean" | "date";
-
-type TypedFilterOperator = "contains" | "eq" | "gt" | "gte" | "lt" | "lte" | "before" | "after";
-
-export type DataGridColumn<T> = {
-  id: string;
-  header: ReactNode;
-  width?: number | string;
-  minWidth?: number;
-  maxWidth?: number;
-  resizable?: boolean;
-  sortable?: boolean;
-  filterable?: boolean;
-  filterType?: DataGridFilterType;
-  sticky?: "start" | "end";
-  align?: "left" | "center" | "right";
-  className?: string;
-  headerClassName?: string;
-  render?: (row: T, index: number) => ReactNode;
-  value?: (row: T, index: number) => unknown;
-  sortValue?: (row: T, index: number) => unknown;
-  filterValue?: (row: T, index: number) => unknown;
-};
-
-type DataGridState = {
-  sort?: { columnId: string; direction: DataGridSortDirection };
-  filters?: Record<string, string>;
-  widths?: Record<string, number>;
-  fillColumnId?: string;
-};
-
-type DataGridProps<T> = {
-  id: string;
-  rows: T[];
-  columns: DataGridColumn<T>[];
-  getRowKey: (row: T, index: number) => string;
-  emptyText?: ReactNode;
-  fit?: "content" | "container";
-  className?: string;
-  rowClassName?: (row: T, index: number) => string | undefined;
-  storageKey?: string;
-};
-
-type FilterPosition = {
-  top: number;
-  left: number;
-  width: number;
-};
-
-const STORAGE_PREFIX = "multimailer.datagrid.";
-const FILTER_POPOVER_WIDTH = 320;
-const FILTER_POPOVER_MARGIN = 12;
-
-export default function DataGrid<T>({
-  id,
-  rows,
-  columns,
-  getRowKey,
-  emptyText = "No rows found.",
-  fit = "content",
-  className = "",
-  rowClassName,
-  storageKey
-}: DataGridProps<T>) {
-  const localStorageKey = storageKey ?? `${STORAGE_PREFIX}${id}`;
-  const [state, setState] = useState<DataGridState>(() => loadState(localStorageKey));
-  const [resizeState, setResizeState] = useState<{
-    columnId: string;
-    startX: number;
-    startWidth: number;
-    baseWidths: Record<string, number>;
-    fillColumnId?: string;
-  } | null>(null);
-  const [openFilterColumnId, setOpenFilterColumnId] = useState<string | null>(null);
-  const [filterPosition, setFilterPosition] = useState<FilterPosition | null>(null);
-  const gridRef = useRef<HTMLDivElement | null>(null);
-  const headerCellRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const filterButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
-  const filterPopoverRef = useRef<HTMLDivElement | null>(null);
-  const [measuredWidths, setMeasuredWidths] = useState<Record<string, number>>({});
-
-  useEffect(() => {
-    try {
-      window.localStorage.setItem(localStorageKey, JSON.stringify(state));
-    } catch {
-      // Local storage is an enhancement only.
-    }
-  }, [localStorageKey, state]);
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const filtersFromUrl: Record<string, string> = {};
-    for (const column of columns) {
-      const exact = params.get(`grid.${id}.${column.id}`) ?? params.get(`filter.${id}.${column.id}`);
-      if (exact) filtersFromUrl[column.id] = exact;
-    }
-    const table = params.get("table");
-    const filter = params.get("filter");
-    if (table === id && filter?.includes(":")) {
-      const [columnId, ...parts] = filter.split(":");
-      const value = parts.join(":");
-      if (columnId && value) filtersFromUrl[columnId] = value;
-    }
-    if (Object.keys(filtersFromUrl).length > 0) {
-      setState((current) => ({ ...current, filters: { ...(current.filters ?? {}), ...filtersFromUrl } }));
-    }
-  }, [id, columns]);
-
-  useLayoutEffect(() => {
-    function measure() {
-      const next: Record<string, number> = {};
-      for (const column of columns) {
-        const element = headerCellRefs.current[column.id];
-        if (!element) continue;
-        const width = Math.round(element.getBoundingClientRect().width);
-        if (width > 0) next[column.id] = width;
-      }
-      setMeasuredWidths((current) => shallowEqualNumberRecords(current, next) ? current : next);
-    }
-
-    measure();
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", measure);
-      return () => window.removeEventListener("resize", measure);
-    }
-
-    const observer = new ResizeObserver(measure);
-    for (const column of columns) {
-      const element = headerCellRefs.current[column.id];
-      if (element) observer.observe(element);
-    }
-    return () => observer.disconnect();
-  }, [columns, state.widths]);
-
-  useEffect(() => {
-    if (!resizeState) return;
-    const activeResize = resizeState;
-    function onMove(event: MouseEvent) {
-      const column = columns.find((item) => item.id === activeResize.columnId);
-      const minWidth = column?.minWidth ?? 80;
-      const maxWidth = column?.maxWidth ?? 2000;
-      const nextWidth = Math.min(maxWidth, Math.max(minWidth, activeResize.startWidth + event.clientX - activeResize.startX));
-      setState((current) => ({
-        ...current,
-        widths: { ...activeResize.baseWidths, [activeResize.columnId]: nextWidth },
-        fillColumnId: activeResize.fillColumnId
-      }));
-    }
-    function onUp() {
-      setResizeState(null);
-    }
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-    return () => {
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-    };
-  }, [resizeState, columns]);
-
-  useEffect(() => {
-    if (!openFilterColumnId) return undefined;
-    const activeFilterColumnId = openFilterColumnId;
-    function update() {
-      updateFilterPosition(activeFilterColumnId);
-    }
-    update();
-    window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
-    return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
-    };
-  }, [openFilterColumnId]);
-
-  useEffect(() => {
-    if (!openFilterColumnId) return undefined;
-    const activeFilterColumnId = openFilterColumnId;
-    function onPointerDown(event: MouseEvent) {
-      const target = event.target as Node | null;
-      const popover = filterPopoverRef.current;
-      const trigger = filterButtonRefs.current[activeFilterColumnId];
-      if (target && (popover?.contains(target) || trigger?.contains(target))) return;
-      setOpenFilterColumnId(null);
-    }
-    function onKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setOpenFilterColumnId(null);
-    }
-    window.addEventListener("mousedown", onPointerDown);
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.removeEventListener("mousedown", onPointerDown);
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [openFilterColumnId]);
-
-  const filterTypes = useMemo(() => {
-    const result: Record<string, DataGridFilterType> = {};
-    for (const column of columns) result[column.id] = column.filterType ?? inferFilterType(column, rows);
-    return result;
-  }, [columns, rows]);
-
-  const visibleRows = useMemo(() => {
-    const filters = state.filters ?? {};
-    const filtered = rows.filter((row, rowIndex) => columns.every((column) => {
-      const filterValue = filters[column.id] ?? "";
-      if (!filterValue.trim()) return true;
-      const rawValue = valueForFilter(column, row, rowIndex);
-      return matchesFilter(rawValue, filterValue, filterTypes[column.id]);
-    }));
-    if (!state.sort) return filtered;
-    const sortColumn = columns.find((column) => column.id === state.sort?.columnId);
-    if (!sortColumn) return filtered;
-    return [...filtered].sort((a, b) => {
-      const aIndex = rows.indexOf(a);
-      const bIndex = rows.indexOf(b);
-      const aValue = sortColumn.sortValue?.(a, aIndex) ?? sortColumn.value?.(a, aIndex) ?? "";
-      const bValue = sortColumn.sortValue?.(b, bIndex) ?? sortColumn.value?.(b, bIndex) ?? "";
-      const result = compareValues(aValue, bValue);
-      return state.sort?.direction === "desc" ? -result : result;
-    });
-  }, [rows, columns, state.filters, state.sort, filterTypes]);
-
-  const stretchedColumnIds = useMemo(() => chooseStretchedColumns(columns, state.widths, state.fillColumnId), [columns, state.widths, state.fillColumnId]);
-  const templateColumns = columns.map((column) => widthForColumn(column, state.widths?.[column.id], stretchedColumnIds.has(column.id))).join(" ");
-  const hasFlexibleColumns = columns.some((column) => stretchedColumnIds.has(column.id) || isFlexibleColumn(column, state.widths?.[column.id]));
-  const stickyOffsets = useMemo(() => computeStickyOffsets(columns, state.widths, measuredWidths), [columns, state.widths, measuredWidths]);
-  const gridClassName = `data-grid ${hasFlexibleColumns ? "data-grid-has-flex" : "data-grid-fixed-only"}`;
-  const activeFilterColumn = openFilterColumnId ? columns.find((column) => column.id === openFilterColumnId) : undefined;
-
-  function toggleSort(column: DataGridColumn<T>) {
-    if (!column.sortable) return;
-    setState((current) => {
-      if (current.sort?.columnId !== column.id) return { ...current, sort: { columnId: column.id, direction: "asc" } };
-      if (current.sort.direction === "asc") return { ...current, sort: { columnId: column.id, direction: "desc" } };
-      return { ...current, sort: undefined };
-    });
-  }
-
-  function patchFilter(columnId: string, value: string) {
-    setState((current) => ({ ...current, filters: { ...(current.filters ?? {}), [columnId]: value } }));
-  }
-
-  function clearFilter(columnId: string) {
-    setState((current) => {
-      const nextFilters = { ...(current.filters ?? {}) };
-      delete nextFilters[columnId];
-      return { ...current, filters: nextFilters };
-    });
-  }
-
-  function updateFilterPosition(columnId: string) {
-    const element = filterButtonRefs.current[columnId];
-    if (!element) return;
-    const rect = element.getBoundingClientRect();
-    const width = Math.min(FILTER_POPOVER_WIDTH, Math.max(240, window.innerWidth - FILTER_POPOVER_MARGIN * 2));
-    const left = Math.min(Math.max(FILTER_POPOVER_MARGIN, rect.left), window.innerWidth - width - FILTER_POPOVER_MARGIN);
-    const top = Math.min(rect.bottom + 8, window.innerHeight - 120);
-    setFilterPosition({ top, left, width });
-  }
-
-  function toggleFilterPopover(columnId: string) {
-    setOpenFilterColumnId((current) => {
-      if (current === columnId) return null;
-      window.requestAnimationFrame(() => updateFilterPosition(columnId));
-      return columnId;
-    });
-  }
-
-  return (
-    <div className={`data-grid-shell data-grid-${fit} ${className}`.trim()} ref={gridRef}>
-      <div className={gridClassName} role="table" aria-label={id} style={{ gridTemplateColumns: templateColumns }}>
-        {columns.map((column, columnIndex) => {
-          const sorted = state.sort?.columnId === column.id ? state.sort.direction : undefined;
-          const hasFilter = Boolean((state.filters?.[column.id] ?? "").trim());
-          return (
-            <div
-              key={`header-${column.id}`}
-              role="columnheader"
-              ref={(element) => { headerCellRefs.current[column.id] = element; }}
-              className={`data-grid-cell data-grid-header-cell ${column.headerClassName ?? ""} ${column.sortable ? "is-sortable" : ""} ${sorted ? "is-sorted" : ""} ${stickyClass(column)}`.trim()}
-              style={stickyStyle(column, stickyOffsets[columnIndex])}
-            >
-              <button type="button" className="data-grid-header-button" disabled={!column.sortable} onClick={() => toggleSort(column)}>
-                <span>{column.header}</span>
-                {column.sortable && <SortIcon direction={sorted} />}
-              </button>
-              {column.filterable && (
-                <button
-                  type="button"
-                  ref={(element) => { filterButtonRefs.current[column.id] = element; }}
-                  className={`data-grid-filter-trigger${hasFilter ? " has-filter" : ""}${openFilterColumnId === column.id ? " is-open" : ""}`}
-                  aria-label={`Filter ${String(column.header)}`}
-                  aria-expanded={openFilterColumnId === column.id}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    toggleFilterPopover(column.id);
-                  }}
-                >
-                  <Filter size={14} aria-hidden="true" />
-                </button>
-              )}
-              {column.resizable && (
-                <button
-                  type="button"
-                  className="data-grid-resize-handle"
-                  aria-label={`Resize ${String(column.header)}`}
-                  onMouseDown={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const baseWidths = measuredColumnWidths(columns, headerCellRefs.current, state.widths, measuredWidths);
-                    const currentWidth = baseWidths[column.id] ?? columnPixelWidth(column, state.widths?.[column.id], measuredWidths[column.id]);
-                    const fillColumnId = chooseResizeFillColumn(columns, column.id);
-                    setState((current) => ({ ...current, widths: { ...baseWidths }, fillColumnId }));
-                    setResizeState({ columnId: column.id, startX: event.clientX, startWidth: currentWidth, baseWidths, fillColumnId });
-                  }}
-                >
-                  <GripVertical size={14} aria-hidden="true" />
-                </button>
-              )}
-            </div>
-          );
-        })}
-        {visibleRows.length === 0 ? (
-          <div className="data-grid-empty" role="row">
-            <div role="cell">{emptyText}</div>
-          </div>
-        ) : visibleRows.map((row, visibleIndex) => {
-          const originalIndex = rows.indexOf(row);
-          const rowClass = rowClassName?.(row, originalIndex);
-          const parityClass = visibleIndex % 2 === 0 ? "data-grid-row-even" : "data-grid-row-odd";
-          return columns.map((column, columnIndex) => (
-            <div
-              key={`${getRowKey(row, originalIndex)}-${column.id}`}
-              role="cell"
-              className={`data-grid-cell data-grid-body-cell ${parityClass} ${column.align ? `align-${column.align}` : ""} ${column.className ?? ""} ${rowClass ?? ""} ${stickyClass(column)}`.trim()}
-              style={stickyStyle(column, stickyOffsets[columnIndex])}
-            >
-              {column.render ? column.render(row, originalIndex) : stringifyCell(column.value?.(row, originalIndex))}
-            </div>
-          ));
-        })}
-      </div>
-      {activeFilterColumn && filterPosition && createPortal(
-        <FilterPopover
-          ref={filterPopoverRef}
-          column={activeFilterColumn}
-          filterType={filterTypes[activeFilterColumn.id]}
-          value={state.filters?.[activeFilterColumn.id] ?? ""}
-          position={filterPosition}
-          onChange={(value) => patchFilter(activeFilterColumn.id, value)}
-          onClear={() => clearFilter(activeFilterColumn.id)}
-          onClose={() => setOpenFilterColumnId(null)}
-        />,
-        document.body
-      )}
-    </div>
-  );
-}
-
-type FilterPopoverProps = {
-  column: Pick<DataGridColumn<unknown>, "id" | "header">;
-  filterType: DataGridFilterType;
-  value: string;
-  position: FilterPosition;
-  onChange: (value: string) => void;
-  onClear: () => void;
-  onClose: () => void;
-};
-
-const FilterPopover = forwardRef<HTMLDivElement, FilterPopoverProps>(function FilterPopover(
-  { column, filterType, value, position, onChange, onClear, onClose },
-  ref
-) {
-  const parsed = parseTypedFilter(value, filterType);
-  const operatorOptions = filterType === "date" ? DATE_OPERATORS : NUMBER_OPERATORS;
-  return (
-    <div
-      ref={ref}
-      className="data-grid-filter-popover"
-      style={{ top: position.top, left: position.left, width: position.width }}
-      role="dialog"
-      aria-label={`Filter ${String(column.header)}`}
-    >
-      <div className="data-grid-filter-popover-header">
-        <strong>Filter {column.header}</strong>
-        <button type="button" aria-label="Close filter" onClick={onClose}><X size={15} /></button>
-      </div>
-      {filterType === "boolean" ? (
-        <label className="data-grid-filter-field">
-          <span>Value</span>
-          <select value={value} onChange={(event) => onChange(event.target.value)} autoFocus>
-            <option value="">All</option>
-            <option value="true">Yes / active</option>
-            <option value="false">No / inactive</option>
-          </select>
-        </label>
-      ) : filterType === "number" || filterType === "integer" || filterType === "date" ? (
-        <div className="data-grid-filter-stack">
-          <label className="data-grid-filter-field">
-            <span>Match</span>
-            <select
-              value={parsed.operator}
-              onChange={(event) => onChange(formatTypedFilter(event.target.value as TypedFilterOperator, parsed.value))}
-            >
-              {operatorOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
-            </select>
-          </label>
-          <label className="data-grid-filter-field">
-            <span>Value</span>
-            <div className="data-grid-filter-input-wrap">
-              <input
-                type={filterType === "date" ? "date" : "number"}
-                step={filterType === "integer" ? 1 : undefined}
-                value={parsed.value}
-                onChange={(event) => onChange(formatTypedFilter(parsed.operator, event.target.value))}
-                autoFocus
-              />
-              {value && <button type="button" aria-label="Clear filter" onClick={onClear}><X size={14} /></button>}
-            </div>
-          </label>
-        </div>
-      ) : (
-        <label className="data-grid-filter-field">
-          <span>Contains</span>
-          <div className="data-grid-filter-input-wrap">
-            <input value={value} placeholder="Filter" onChange={(event) => onChange(event.target.value)} autoFocus />
-            {value && <button type="button" aria-label="Clear filter" onClick={onClear}><X size={14} /></button>}
-          </div>
-        </label>
-      )}
-    </div>
-  );
-});
-
-function SortIcon({ direction }: { direction?: DataGridSortDirection }) {
-  if (direction === "asc") return <ArrowUp size={14} aria-label="Sorted ascending" />;
-  if (direction === "desc") return <ArrowDown size={14} aria-label="Sorted descending" />;
-  return <ChevronsUpDown size={14} aria-hidden="true" />;
-}
-
-function loadState(key: string): DataGridState {
-  try {
-    const value = window.localStorage.getItem(key);
-    if (!value) return {};
-    return JSON.parse(value) as DataGridState;
-  } catch {
-    return {};
-  }
-}
-
-function widthForColumn<T>(column: DataGridColumn<T>, savedWidth?: number, stretch = false): string {
-  if (stretch) {
-    const baseWidth = savedWidth ?? fixedWidthFloor(column);
-    return `minmax(${baseWidth}px, 1fr)`;
-  }
-  if (savedWidth) return `${savedWidth}px`;
-  if (typeof column.width === "number") return `${column.width}px`;
-  if (column.width) return column.width;
-  return `minmax(${column.minWidth ?? 140}px, 1fr)`;
-}
-
-function chooseStretchedColumns<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>, fillColumnId?: string): Set<string> {
-  if (columns.length === 0) return new Set();
-
-  const savedColumnIds = new Set(Object.keys(savedWidths ?? {}));
-  if (savedColumnIds.size > 0) {
-    if (fillColumnId && columns.some((column) => column.id === fillColumnId)) return new Set([fillColumnId]);
-
-    const unsizedNonStickyResizable = columns.filter((column) => column.resizable && !column.sticky && !savedColumnIds.has(column.id));
-    if (unsizedNonStickyResizable.length > 0) return new Set(unsizedNonStickyResizable.map((column) => column.id));
-
-    const unsizedResizable = columns.filter((column) => column.resizable && !savedColumnIds.has(column.id));
-    if (unsizedResizable.length > 0) return new Set(unsizedResizable.map((column) => column.id));
-
-    const unsizedFlexible = columns.filter((column) => !savedColumnIds.has(column.id) && isFlexibleColumn(column, savedWidths?.[column.id]));
-    if (unsizedFlexible.length > 0) return new Set(unsizedFlexible.map((column) => column.id));
-
-    const fallback = chooseResizeFillColumn(columns);
-    return new Set(fallback ? [fallback] : []);
-  }
-
-  const nonStickyResizable = columns.filter((column) => column.resizable && !column.sticky);
-  if (nonStickyResizable.length > 0) return new Set(nonStickyResizable.map((column) => column.id));
-
-  const resizable = columns.filter((column) => column.resizable);
-  if (resizable.length > 0) return new Set(resizable.map((column) => column.id));
-
-  const flexible = columns.filter((column) => isFlexibleColumn(column, savedWidths?.[column.id]));
-  if (flexible.length > 0) return new Set();
-
-  const fallback = chooseResizeFillColumn(columns);
-  return new Set(fallback ? [fallback] : []);
-}
-
-function chooseResizeFillColumn<T>(columns: DataGridColumn<T>[], activeColumnId?: string): string | undefined {
-  const candidateGroups = [
-    columns.filter((column) => column.resizable && !column.sticky && column.id !== activeColumnId),
-    columns.filter((column) => column.resizable && column.id !== activeColumnId),
-    columns.filter((column) => !column.sticky && column.id !== activeColumnId),
-    columns.filter((column) => column.id !== activeColumnId),
-    columns
-  ];
-
-  for (const candidates of candidateGroups) {
-    const fallback = candidates[candidates.length - 1];
-    if (fallback) return fallback.id;
-  }
-  return undefined;
-}
-
-function measuredColumnWidths<T>(
-  columns: DataGridColumn<T>[],
-  elements: Record<string, HTMLDivElement | null>,
-  savedWidths?: Record<string, number>,
-  measuredWidths?: Record<string, number>
-): Record<string, number> {
-  const result: Record<string, number> = {};
-  for (const column of columns) {
-    const element = elements[column.id];
-    const measured = element ? Math.round(element.getBoundingClientRect().width) : undefined;
-    result[column.id] = measured && measured > 0 ? measured : columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
-  }
-  return result;
-}
-
-function fixedWidthFloor<T>(column: DataGridColumn<T>): number {
-  const parsed = parsePixelWidth(column.width);
-  if (typeof column.width === "number") return column.width;
-  return parsed ?? column.minWidth ?? 140;
-}
-
-function isFlexibleColumn<T>(column: DataGridColumn<T>, savedWidth?: number): boolean {
-  if (savedWidth && !isFlexibleWidth(column.width)) return false;
-  return isFlexibleWidth(column.width);
-}
-
-function isFlexibleWidth(width?: string | number): boolean {
-  if (width === undefined) return true;
-  if (typeof width === "number") return false;
-  const normalized = width.toLowerCase();
-  return normalized.includes("fr") || normalized.includes("minmax") || normalized.includes("auto");
-}
-
-function columnPixelWidth<T>(column: DataGridColumn<T>, savedWidth?: number, measuredWidth?: number): number {
-  if (measuredWidth) return measuredWidth;
-  if (savedWidth) return savedWidth;
-  if (typeof column.width === "number") return column.width;
-  const parsed = parsePixelWidth(column.width);
-  if (parsed) return parsed;
-  return column.minWidth ?? 160;
-}
-
-function parsePixelWidth(width?: string | number): number | null {
-  if (typeof width === "number") return width;
-  if (!width) return null;
-  const pxMatch = width.match(/(\d+(?:\.\d+)?)px/);
-  if (!pxMatch) return null;
-  const parsed = Number.parseFloat(pxMatch[1]);
-  return Number.isFinite(parsed) ? parsed : null;
-}
-
-function computeStickyOffsets<T>(columns: DataGridColumn<T>[], savedWidths?: Record<string, number>, measuredWidths?: Record<string, number>): Record<number, number> {
-  const offsets: Record<number, number> = {};
-  let left = 0;
-  columns.forEach((column, index) => {
-    if (column.sticky === "start") {
-      offsets[index] = left;
-      left += columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
-    }
-  });
-  let right = 0;
-  [...columns].reverse().forEach((column, reverseIndex) => {
-    const index = columns.length - 1 - reverseIndex;
-    if (column.sticky === "end") {
-      offsets[index] = right;
-      right += columnPixelWidth(column, savedWidths?.[column.id], measuredWidths?.[column.id]);
-    }
-  });
-  return offsets;
-}
-
-function stickyClass<T>(column: DataGridColumn<T>): string {
-  if (column.sticky === "start") return "is-sticky-start";
-  if (column.sticky === "end") return "is-sticky-end";
-  return "";
-}
-
-function stickyStyle<T>(column: DataGridColumn<T>, offset?: number): CSSProperties | undefined {
-  if (!column.sticky) return undefined;
-  return column.sticky === "start" ? { left: offset ?? 0 } : { right: offset ?? 0 };
-}
-
-function valueForFilter<T>(column: DataGridColumn<T>, row: T, rowIndex: number): unknown {
-  return column.filterValue?.(row, rowIndex) ?? column.value?.(row, rowIndex) ?? column.render?.(row, rowIndex) ?? "";
-}
-
-function matchesFilter(value: unknown, filterValue: string, filterType: DataGridFilterType): boolean {
-  if (!filterValue.trim()) return true;
-  if (filterType === "boolean") {
-    const expected = parseBooleanFilter(filterValue);
-    if (expected === null) return stringifyCell(value).toLowerCase().includes(filterValue.toLowerCase());
-    const actual = normalizeBoolean(value);
-    return actual === null ? stringifyCell(value).toLowerCase().includes(filterValue.toLowerCase()) : actual === expected;
-  }
-  if (filterType === "number" || filterType === "integer") {
-    const parsed = parseTypedFilter(filterValue, filterType);
-    if (!parsed.value.trim()) return true;
-    const actual = parseNumberValue(value);
-    const expected = Number(parsed.value);
-    if (!Number.isFinite(actual) || !Number.isFinite(expected)) return false;
-    return compareByOperator(actual, expected, parsed.operator);
-  }
-  if (filterType === "date") {
-    const parsed = parseTypedFilter(filterValue, filterType);
-    if (!parsed.value.trim()) return true;
-    const actual = parseDateValue(value);
-    const expected = parseDateValue(parsed.value);
-    if (!Number.isFinite(actual) || !Number.isFinite(expected)) return false;
-    return compareByOperator(actual, expected, parsed.operator);
-  }
-  return stringifyCell(value).toLowerCase().includes(filterValue.trim().toLowerCase());
-}
-
-function inferFilterType<T>(column: DataGridColumn<T>, rows: T[]): DataGridFilterType {
-  const samples = rows.slice(0, 25)
-    .map((row, index) => valueForFilter(column, row, index))
-    .filter((value) => stringifyCell(value).trim() !== "");
-  if (samples.length === 0) return "text";
-  if (samples.every((value) => normalizeBoolean(value) !== null)) return "boolean";
-  if (samples.every((value) => Number.isFinite(parseNumberValue(value)))) {
-    return samples.every((value) => Number.isInteger(parseNumberValue(value))) ? "integer" : "number";
-  }
-  if (samples.every((value) => Number.isFinite(parseDateValue(value)))) return "date";
-  return "text";
-}
-
-function parseBooleanFilter(value: string): boolean | null {
-  const normalized = value.trim().toLowerCase();
-  if (!normalized) return null;
-  if (["true", "yes", "1", "active", "on"].includes(normalized)) return true;
-  if (["false", "no", "0", "inactive", "off"].includes(normalized)) return false;
-  return null;
-}
-
-function normalizeBoolean(value: unknown): boolean | null {
-  if (typeof value === "boolean") return value;
-  if (typeof value === "number") return value !== 0;
-  const normalized = stringifyCell(value).trim().toLowerCase();
-  if (!normalized) return null;
-  if (["true", "yes", "1", "active", "required", "individual", "warn", "on", "enabled", "success", "ok", "can override", "mock"].includes(normalized)) return true;
-  if (["false", "no", "0", "inactive", "optional", "off", "global only", "locked", "current", "disabled", "none"].includes(normalized)) return false;
-  return null;
-}
-
-function parseNumberValue(value: unknown): number {
-  if (typeof value === "number") return value;
-  const text = stringifyCell(value).replace(/[^0-9.,+-]/g, "").replace(",", ".");
-  if (!text.trim()) return NaN;
-  return Number(text);
-}
-
-function parseDateValue(value: unknown): number {
-  if (value instanceof Date) return value.getTime();
-  const text = stringifyCell(value).trim();
-  if (!text) return NaN;
-  return Date.parse(text);
-}
-
-function compareByOperator(actual: number, expected: number, operator: TypedFilterOperator): boolean {
-  if (operator === "gt" || operator === "after") return actual > expected;
-  if (operator === "gte") return actual >= expected;
-  if (operator === "lt" || operator === "before") return actual < expected;
-  if (operator === "lte") return actual <= expected;
-  return actual === expected;
-}
-
-function parseTypedFilter(value: string, filterType: DataGridFilterType): { operator: TypedFilterOperator; value: string } {
-  if (!value.includes(":")) return { operator: filterType === "text" ? "contains" : "eq", value };
-  const [operator, ...parts] = value.split(":");
-  const candidate = operator as TypedFilterOperator;
-  if (!["contains", "eq", "gt", "gte", "lt", "lte", "before", "after"].includes(candidate)) {
-    return { operator: filterType === "text" ? "contains" : "eq", value };
-  }
-  return { operator: candidate, value: parts.join(":") };
-}
-
-function formatTypedFilter(operator: TypedFilterOperator, value: string): string {
-  return value ? `${operator}:${value}` : "";
-}
-
-const NUMBER_OPERATORS: { value: TypedFilterOperator; label: string }[] = [
-  { value: "eq", label: "Equals" },
-  { value: "gt", label: "Greater than" },
-  { value: "gte", label: "Greater or equal" },
-  { value: "lt", label: "Less than" },
-  { value: "lte", label: "Less or equal" }
-];
-
-const DATE_OPERATORS: { value: TypedFilterOperator; label: string }[] = [
-  { value: "eq", label: "On" },
-  { value: "before", label: "Before" },
-  { value: "after", label: "After" }
-];
-
-function compareValues(a: unknown, b: unknown): number {
-  if (typeof a === "number" && typeof b === "number") return a - b;
-  const aDate = typeof a === "string" ? Date.parse(a) : NaN;
-  const bDate = typeof b === "string" ? Date.parse(b) : NaN;
-  if (!Number.isNaN(aDate) && !Number.isNaN(bDate)) return aDate - bDate;
-  return stringifyCell(a).localeCompare(stringifyCell(b), undefined, { numeric: true, sensitivity: "base" });
-}
-
-function stringifyCell(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
-  if (Array.isArray(value)) return value.map(stringifyCell).join(", ");
-  return "";
-}
-
-function shallowEqualNumberRecords(a: Record<string, number>, b: Record<string, number>): boolean {
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-  if (aKeys.length !== bKeys.length) return false;
-  return aKeys.every((key) => a[key] === b[key]);
-}

src/features/files/FilesPage.tsx

@@ -272,6 +272,10 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
     setNewFolderError("");
   }
 
+  function updateActiveDialogFolder(spaceId: string, folderPath: string) {
+    setDialogTarget({ spaceId, folderPath: normalizeFolder(folderPath) });
+  }
+
   function findSpace(spaceId: string): FileSpace | null {
     return spaces.find((space) => space.id === spaceId) ?? null;
   }
@@ -714,6 +718,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
     event.dataTransfer.setData("text/plain", `${state.fileIds.length + state.folderPaths.length} item(s)`);
   }
 
+  function handleTreeFolderDragStart(spaceId: string, path: string, event: ReactDragEvent<HTMLElement>) {
+    const folderPath = normalizeFolder(path);
+    if (!folderPath) return;
+    const state = { sourceSpaceId: spaceId, fileIds: [], folderPaths: [folderPath] };
+    setInternalDrag(state);
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.setData(INTERNAL_DRAG_TYPE, JSON.stringify(state));
+    event.dataTransfer.setData("text/plain", folderPath);
+  }
+
   function isInternalDrag(event: ReactDragEvent<HTMLElement>): boolean {
     return event.dataTransfer.types.includes(INTERNAL_DRAG_TYPE) || Boolean(internalDrag);
   }
@@ -831,6 +845,20 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
     });
   }
 
+  function openTreeEmptyContextMenu(event: ReactMouseEvent<HTMLElement>) {
+    event.preventDefault();
+    const target = toolbarTarget();
+    if (!target) return;
+    setContextMenu({
+      x: event.clientX,
+      y: event.clientY,
+      target: "empty",
+      source: "tree",
+      spaceId: target.spaceId,
+      folderPath: target.folderPath
+    });
+  }
+
   function contextActionTarget(menu: ContextMenuState | null): FileActionTarget | null {
     const space = spaceForContext(menu);
     if (!space) return null;
@@ -1097,7 +1125,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
       <div className={`file-manager-shell ${busy ? "is-loading" : ""}`}>
         <aside className="file-tree-panel" aria-label="File spaces and folders">
           <div className="file-tree-heading">Spaces</div>
-          <div className="file-tree-list">
+          <div className="file-tree-list" onContextMenu={openTreeEmptyContextMenu}>
             {spaces.length === 0 && <p className="muted small-text">No file spaces available.</p>}
             {spaces.map((space) => {
               const isActiveRoot = activeSpaceId === space.id && currentFolder === "";
@@ -1133,6 +1161,8 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
                     onDropOnTarget={handleDropOnTarget}
                     onClearDropState={clearDropState}
                     onRequestDragExpand={scheduleTreeDragExpand}
+                    onDragStartFolder={handleTreeFolderDragStart}
+                    onDragEndFolder={() => { setInternalDrag(null); clearDropState(); }}
                     disabled={busy}
                   />
                 </div>
@@ -1177,17 +1207,7 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
           </div>
 
           <div
-            className={`file-list-drop-target ${dragActive ? "is-active" : ""} ${dropTargetKey === dropTargetId(toolbarTarget() ?? { spaceId: "", folderPath: "" }) ? "is-drop-target" : ""}`}
+            className="file-list-drop-target"
-            onDragOver={(event) => {
-              const target = toolbarTarget();
-              if (target) handleDropTargetDragOver(event, target);
-              setDragActive(true);
-            }}
-            onDragLeave={clearDropState}
-            onDrop={(event) => {
-              const target = toolbarTarget();
-              if (target) void handleDropOnTarget(event, target);
-            }}
             onContextMenu={(event) => openContextMenu(event, "empty")}
             onClick={(event) => {
               if (event.target === event.currentTarget) applySelectionKeys(new Set<EntrySelectionKey>());
@@ -1318,6 +1338,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
             <span className="muted small-text">Files are uploaded into {activeDialogTarget?.folderPath || "Root"}.</span>
           </div>
           <ToggleSwitch label="Unpack ZIP uploads" checked={unpackZip} onChange={setUnpackZip} disabled={busy} />
+          <div className="field-block">
+            <FieldLabel className="form-label" help="Choose the destination folder before selecting or dropping files.">Destination folder</FieldLabel>
+            <TransferFolderSelector
+              space={activeDialogSpace}
+              nodes={activeDialogTarget ? buildFolderTree(filesBySpace[activeDialogTarget.spaceId] ?? EMPTY_FILES, foldersBySpace[activeDialogTarget.spaceId] ?? EMPTY_FOLDERS) : []}
+              selectedFolder={activeDialogTarget?.folderPath || ""}
+              disabled={busy || !activeDialogSpace}
+              onSelect={(folderPath) => activeDialogTarget && updateActiveDialogFolder(activeDialogTarget.spaceId, folderPath)}
+            />
+          </div>
           <input ref={fileInputRef} type="file" multiple hidden onChange={(event) => event.target.files && void handleFilesUpload(event.target.files)} />
           <div className="button-row compact-actions align-end">
             <Button onClick={closeDialog} disabled={busy}>Cancel</Button>
@@ -1333,6 +1363,16 @@ export default function FilesPage({ settings }: { settings: ApiSettings }) {
             <small>Created inside {activeDialogTarget?.folderPath || "Root"}.</small>
             {newFolderError && <small className="field-error">{newFolderError}</small>}
           </FormField>
+          <div className="field-block">
+            <FieldLabel className="form-label" help="Choose the parent folder for the new subfolder.">Parent folder</FieldLabel>
+            <TransferFolderSelector
+              space={activeDialogSpace}
+              nodes={activeDialogTarget ? buildFolderTree(filesBySpace[activeDialogTarget.spaceId] ?? EMPTY_FILES, foldersBySpace[activeDialogTarget.spaceId] ?? EMPTY_FOLDERS) : []}
+              selectedFolder={activeDialogTarget?.folderPath || ""}
+              disabled={busy || !activeDialogSpace}
+              onSelect={(folderPath) => activeDialogTarget && updateActiveDialogFolder(activeDialogTarget.spaceId, folderPath)}
+            />
+          </div>
           <div className="button-row compact-actions align-end">
             <Button onClick={closeDialog} disabled={busy}>Cancel</Button>
             <Button variant="primary" onClick={() => void handleCreateFolder()} disabled={busy || !newFolderName.trim()}>Create Folder</Button>

src/features/files/components/FileManagerComponents.tsx

@@ -1,4 +1,4 @@
-import type { DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import type { CSSProperties, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
 import { Copy, Download, Folder, FolderOpen, Home, MoveRight, Plus, Trash2, UploadCloud } from "lucide-react";
 import Button from "../../../components/Button";
 import Dialog from "../../../components/Dialog";
@@ -85,6 +85,8 @@ export function FolderTree({
   onDropOnTarget,
   onClearDropState,
   onRequestDragExpand,
+  onDragStartFolder,
+  onDragEndFolder,
   disabled,
   depth = 1
 }: {
@@ -101,6 +103,8 @@ export function FolderTree({
   onDropOnTarget: (event: ReactDragEvent<HTMLElement>, target: FileActionTarget) => Promise<void>;
   onClearDropState: () => void;
   onRequestDragExpand: (spaceId: string, path: string) => void;
+  onDragStartFolder: (spaceId: string, path: string, event: ReactDragEvent<HTMLElement>) => void;
+  onDragEndFolder: () => void;
   disabled?: boolean;
   depth?: number;
 }) {
@@ -118,6 +122,9 @@ export function FolderTree({
             <div
               className={`file-tree-node-wrap ${isActive ? "is-active" : ""} ${isDropTarget ? "is-drop-target" : ""}`}
               style={{ paddingLeft: `${Math.min(depth * 14, 56)}px` }}
+              draggable={!disabled}
+              onDragStart={(event) => onDragStartFolder(spaceId, node.path, event)}
+              onDragEnd={onDragEndFolder}
               onContextMenu={(event) => onContextMenu(event, spaceId, node.path)}
               onDragOver={(event) => {
                 onDragOverTarget(event, target);
@@ -163,6 +170,8 @@ export function FolderTree({
                 onDropOnTarget={onDropOnTarget}
                 onClearDropState={onClearDropState}
                 onRequestDragExpand={onRequestDragExpand}
+                onDragStartFolder={onDragStartFolder}
+                onDragEndFolder={onDragEndFolder}
                 disabled={disabled}
                 depth={depth + 1}
               />
@@ -266,8 +275,17 @@ export function FileContextMenu({
 }) {
   const showNewFolder = true;
   const showDelete = menu.target !== "empty";
+  const viewportWidth = typeof window === "undefined" ? 1024 : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? 768 : window.innerHeight;
+  const estimatedWidth = 220;
+  const estimatedHeight = 260;
+  const left = Math.max(8, Math.min(menu.x, viewportWidth - estimatedWidth - 8));
+  const openUp = menu.y + estimatedHeight > viewportHeight;
+  const style: CSSProperties = openUp
+    ? { left, bottom: Math.max(8, viewportHeight - menu.y) }
+    : { left, top: Math.max(8, menu.y) };
   return (
-    <div className="file-context-menu" style={{ left: menu.x, top: menu.y }} role="menu" onClick={(event) => event.stopPropagation()}>
+    <div className="file-context-menu" style={style} role="menu" onClick={(event) => event.stopPropagation()}>
       {showNewFolder && <button type="button" role="menuitem" onClick={onCreateFolder}><Plus size={15} aria-hidden="true" /> New folder</button>}
       <button type="button" role="menuitem" onClick={onUpload}><UploadCloud size={15} aria-hidden="true" /> Upload</button>
       {canDownload && <button type="button" role="menuitem" onClick={onDownload}><Download size={15} aria-hidden="true" /> {downloadLabel}</button>}

src/main.tsx

@@ -10,6 +10,7 @@ import "./styles/badges.css";
 import "./styles/components.css";
 import "./styles/auth-gate.css";
 import "./styles/campaign-workspace.css";
+import "./styles/file-manager.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

src/styles/campaign-workspace.css

@@ -1242,716 +1242,3 @@
   font-weight: 700;
   color: var(--text-primary);
 }
-
-
-/* Files manager */
-.file-manager-page.file-manager-fullscreen {
-  position: relative;
-  display: grid;
-  grid-template-rows: 1fr;
-  height: calc(100vh - 115px);
-  padding: 0;
-  overflow: hidden;
-}
-
-.file-manager-alerts {
-  position: absolute;
-  top: 14px;
-  left: 18px;
-  right: 18px;
-  z-index: 40;
-  pointer-events: none;
-}
-
-.file-manager-alerts .alert {
-  pointer-events: auto;
-  box-shadow: var(--shadow-popover);
-}
-
-.file-manager-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--line);
-  background: var(--panel-header);
-}
-
-.file-manager-toolbar .button {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.file-manager-shell {
-  display: grid;
-  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
-  min-height: 0;
-  height: 100%;
-  border: 1px solid var(--line);
-  border-radius: 0;
-  overflow: hidden;
-  background: var(--panel);
-}
-
-.file-tree-panel {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  border-right: 1px solid var(--line);
-  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
-}
-
-.file-tree-heading {
-  flex: 0 0 auto;
-  padding: 13px 14px;
-  border-bottom: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: .05em;
-  text-transform: uppercase;
-}
-
-.file-tree-list {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  padding: 10px 8px 16px;
-}
-
-.file-tree-space + .file-tree-space {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid var(--line);
-}
-
-.file-tree-node-wrap {
-  display: grid;
-  grid-template-columns: 26px minmax(0, 1fr);
-  align-items: center;
-  gap: 2px;
-  border-radius: 9px;
-}
-
-.file-tree-node,
-.file-tree-select,
-.file-tree-toggle {
-  border: 0;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-}
-
-.file-tree-toggle {
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 32px;
-  border-radius: 9px;
-  color: var(--muted);
-}
-
-.file-tree-toggle:disabled {
-  cursor: default;
-  opacity: .55;
-}
-
-.file-tree-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  width: 100%;
-  padding: 8px 9px;
-  border-radius: 9px;
-  font: inherit;
-  text-align: left;
-  user-select: none;
-}
-
-.file-tree-node span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-tree-root {
-  font-weight: 800;
-}
-
-.file-tree-select {
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  color: var(--text-strong);
-  font-weight: 900;
-  line-height: 1;
-}
-
-.file-tree-node-wrap:hover,
-.file-tree-node-wrap:focus-within,
-.file-tree-node-wrap.is-active,
-.file-tree-root:hover:not(:disabled),
-.file-tree-root:focus-visible,
-.file-tree-root.is-active {
-  background: rgba(13, 110, 253, .08);
-  outline: none;
-}
-
-.file-tree-node:focus-visible,
-.file-tree-toggle:focus-visible,
-.file-tree-select:focus-visible {
-  outline: none;
-}
-
-.file-tree-node-wrap.is-drop-target,
-.file-tree-root.is-drop-target {
-  background: rgba(13, 110, 253, .14);
-  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
-}
-
-.file-tree-node-wrap.is-selected .file-tree-select {
-  background: #0d6efd;
-  color: #fff;
-}
-
-.file-tree-children {
-  display: grid;
-  gap: 1px;
-}
-
-.file-list-panel {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  background: var(--panel);
-}
-
-.file-list-sticky {
-  flex: 0 0 auto;
-  z-index: 2;
-  border-bottom: 1px solid var(--line);
-  background: var(--panel-soft);
-}
-
-.file-breadcrumbs {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-height: 32px;
-  padding: 10px 14px 6px;
-}
-
-.file-breadcrumb,
-.file-breadcrumb-segment {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.file-breadcrumb {
-  border: 0;
-  background: transparent;
-  color: var(--text-strong);
-  cursor: pointer;
-  font-weight: 800;
-  padding: 4px 6px;
-  border-radius: 7px;
-}
-
-.file-breadcrumb:hover:not(:disabled),
-.file-breadcrumb:focus-visible {
-  background: var(--panel);
-  outline: none;
-}
-
-.file-search-row {
-  display: grid;
-  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
-  gap: 18px;
-  align-items: center;
-  padding: 4px 0 10px 14px;
-}
-
-.file-list-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  padding: 8px 14px;
-  border-top: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.file-list-drop-target {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-  transition: background-color .16s ease, box-shadow .16s ease;
-}
-
-.file-list-drop-target.is-active,
-.file-list-drop-target.is-drop-target {
-  background: rgba(13, 110, 253, .05);
-  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .22);
-}
-
-.file-list-table {
-  min-width: 760px;
-}
-
-.file-list-table-head,
-.file-list-row {
-  display: grid;
-  grid-template-columns: minmax(280px, 1fr) 120px 240px;
-  gap: 12px;
-  align-items: center;
-}
-
-.file-list-table-head {
-  padding: 10px 14px;
-  border-top: 1px solid var(--line);
-  background: var(--panel);
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: .04em;
-  text-transform: uppercase;
-}
-
-.file-list-table-head button {
-  justify-self: start;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  padding: 0;
-  text-transform: inherit;
-}
-
-.file-list-table-head button:hover,
-.file-list-table-head button:focus-visible {
-  color: var(--text-strong);
-  outline: none;
-}
-
-.file-list-row {
-  min-height: 58px;
-  padding: 9px 14px;
-  border-bottom: 1px solid var(--line);
-  cursor: default;
-  user-select: none;
-}
-
-.file-list-row:focus-visible {
-  outline: 2px solid rgba(13, 110, 253, .35);
-  outline-offset: -2px;
-}
-
-.file-list-row:hover,
-.file-list-row.is-selected {
-  background: rgba(13, 110, 253, .07);
-}
-
-.file-list-row.is-drop-target {
-  background: rgba(13, 110, 253, .13);
-  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
-}
-
-.file-list-name-cell {
-  min-width: 0;
-}
-
-.file-list-name {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  max-width: 100%;
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  padding: 0;
-}
-
-.file-list-name > span {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-
-.file-list-name strong,
-.file-list-name small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-list-name small {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.file-row-icon {
-  color: var(--muted);
-  flex: 0 0 auto;
-}
-
-.folder-row .file-row-icon {
-  color: #b6791d;
-}
-
-.file-row-tail {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.file-list-empty {
-  padding: 36px 20px;
-  color: var(--muted);
-  text-align: center;
-}
-
-.file-context-menu {
-  position: fixed;
-  z-index: 110;
-  display: grid;
-  min-width: 190px;
-  overflow: hidden;
-  border: 1px solid var(--line-dark);
-  border-radius: 12px;
-  background: var(--panel);
-  box-shadow: var(--shadow-popover);
-  padding: 6px;
-}
-
-.file-context-menu button {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  font: inherit;
-  font-weight: 700;
-  padding: 9px 10px;
-  text-align: left;
-}
-
-.file-context-menu button:hover,
-.file-context-menu button:focus-visible {
-  background: rgba(13, 110, 253, .08);
-  outline: none;
-}
-
-.file-context-menu button.danger {
-  color: var(--danger-text);
-}
-
-
-.file-dialog-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: center;
-  padding: 22px;
-  background: rgba(28, 25, 22, .38);
-}
-
-.file-dialog {
-  width: min(620px, 100%);
-  max-height: min(720px, calc(100vh - 44px));
-  overflow: auto;
-  border: 1px solid var(--line-dark);
-  border-radius: 16px;
-  background: var(--panel);
-  box-shadow: var(--shadow-popover);
-}
-
-.file-dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 15px 18px;
-  border-bottom: 1px solid var(--line);
-  background: var(--panel-soft);
-}
-
-.file-dialog-header h3,
-.file-dialog-header .file-dialog-title {
-  margin: 0;
-  color: var(--text-strong);
-  font-size: 18px;
-}
-
-.file-dialog-header button {
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  cursor: pointer;
-  font-size: 26px;
-  line-height: 1;
-}
-
-.file-dialog-body {
-  display: grid;
-  gap: 16px;
-  padding: 18px;
-}
-
-.file-upload-drop-zone {
-  display: grid;
-  place-items: center;
-  gap: 8px;
-  min-height: 170px;
-  border: 1px dashed var(--line-dark);
-  border-radius: 14px;
-  background: var(--panel-soft);
-  color: var(--muted);
-  text-align: center;
-}
-
-.file-upload-drop-zone.is-active {
-  border-color: #0d6efd;
-  background: rgba(13, 110, 253, .08);
-}
-
-.field-error {
-  color: var(--danger-text);
-  font-weight: 700;
-}
-
-.inline-link-button {
-  justify-self: start;
-  border: 0;
-  background: transparent;
-  color: var(--accent);
-  cursor: pointer;
-  font: inherit;
-  font-weight: 800;
-  padding: 0;
-  text-align: left;
-}
-
-.inline-link-button:hover,
-.inline-link-button:focus-visible {
-  text-decoration: underline;
-  outline: none;
-}
-
-
-.file-search-row .toggle-switch-row {
-  margin: 0;
-  white-space: nowrap;
-}
-
-.file-folder-selector {
-  display: grid;
-  gap: 2px;
-  max-height: 290px;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  padding: 8px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--panel-soft);
-}
-
-.file-folder-selector-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  border-radius: 9px;
-  background: transparent;
-  color: var(--text);
-  cursor: pointer;
-  font: inherit;
-  font-weight: 700;
-  padding: 8px 10px;
-  text-align: left;
-}
-
-.file-folder-selector-node span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-folder-selector-node:hover:not(:disabled),
-.file-folder-selector-node:focus-visible,
-.file-folder-selector-node.is-selected {
-  background: rgba(13, 110, 253, .09);
-  outline: none;
-}
-
-.file-folder-selector-node.is-selected {
-  color: var(--text-strong);
-  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .25);
-}
-
-.file-folder-selector-empty {
-  padding: 6px 10px 2px;
-}
-
-.file-folder-selector-children {
-  display: grid;
-  gap: 2px;
-}
-
-@media (max-width: 1050px) {
-  .file-manager-shell {
-    grid-template-columns: 1fr;
-  }
-
-  .file-tree-panel {
-    max-height: 260px;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
-  }
-
-  .file-list-table-head {
-    display: none;
-  }
-
-  .file-list-table {
-    min-width: 0;
-  }
-
-  .file-list-row {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-
-  .file-search-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-.file-manager-shell.is-loading .file-tree-panel,
-.file-manager-shell.is-loading .file-list-panel {
-  filter: blur(1.5px);
-  pointer-events: none;
-  user-select: none;
-}
-
-.file-manager-loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 35;
-  display: grid;
-  place-items: center;
-  background: rgba(255, 255, 255, .12);
-  backdrop-filter: blur(1px);
-}
-
-.file-conflict-summary {
-  display: grid;
-  gap: 3px;
-  padding: 12px 14px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--panel-soft);
-}
-
-.file-conflict-summary span {
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.file-conflict-list {
-  display: grid;
-  gap: 8px;
-  max-height: 320px;
-  overflow: auto;
-}
-
-.file-conflict-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 140px minmax(180px, 1fr);
-  gap: 10px;
-  align-items: center;
-  padding: 10px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--panel-soft);
-}
-
-.file-conflict-row > div {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.file-conflict-row small,
-.file-conflict-row code {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-conflict-row small {
-  color: var(--muted);
-}
-
-@media (max-width: 900px) {
-  .file-conflict-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-.rename-preview-panel {
-  max-height: min(360px, 42vh);
-  overflow-y: auto;
-  padding-right: 4px;
-  scrollbar-gutter: stable;
-}
-
-.rename-preview-more {
-  display: block;
-  width: 100%;
-  border: 1px dashed var(--line-dark);
-  border-radius: 6px;
-  background: var(--panel-soft);
-  color: var(--muted);
-  cursor: pointer;
-  font: inherit;
-  font-weight: 800;
-  padding: 10px 12px;
-  text-align: left;
-}
-
-.rename-preview-more:hover,
-.rename-preview-more:focus-visible {
-  border-color: rgba(13, 110, 253, .45);
-  background: rgba(13, 110, 253, .08);
-  color: var(--text-strong);
-  outline: none;
-}

src/styles/file-manager.css

@@ -0,0 +1,711 @@
+/* Files manager */
+.file-manager-page.file-manager-fullscreen {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr;
+  height: calc(100vh - 115px);
+  padding: 0;
+  overflow: hidden;
+}
+
+.file-manager-alerts {
+  position: absolute;
+  top: 14px;
+  left: 18px;
+  right: 18px;
+  z-index: 40;
+  pointer-events: none;
+}
+
+.file-manager-alerts .alert {
+  pointer-events: auto;
+  box-shadow: var(--shadow-popover);
+}
+
+.file-manager-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-header);
+}
+
+.file-manager-toolbar .button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.file-manager-shell {
+  display: grid;
+  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+  min-height: 0;
+  height: 100%;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  overflow: hidden;
+  background: var(--panel);
+}
+
+.file-tree-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  border-right: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--panel-soft), var(--panel));
+}
+
+.file-tree-heading {
+  flex: 0 0 auto;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.file-tree-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 10px 8px 16px;
+}
+
+.file-tree-space + .file-tree-space {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+
+.file-tree-node-wrap {
+  display: grid;
+  grid-template-columns: 26px minmax(0, 1fr);
+  align-items: center;
+  gap: 2px;
+  border-radius: 9px;
+}
+
+.file-tree-node,
+.file-tree-select,
+.file-tree-toggle {
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.file-tree-toggle {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 32px;
+  border-radius: 9px;
+  color: var(--muted);
+}
+
+.file-tree-toggle:disabled {
+  cursor: default;
+  opacity: .55;
+}
+
+.file-tree-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  width: 100%;
+  padding: 8px 9px;
+  border-radius: 9px;
+  font: inherit;
+  text-align: left;
+  user-select: none;
+}
+
+.file-tree-node span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-root {
+  font-weight: 800;
+}
+
+.file-tree-select {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  color: var(--text-strong);
+  font-weight: 900;
+  line-height: 1;
+}
+
+.file-tree-node-wrap:hover,
+.file-tree-node-wrap:focus-within,
+.file-tree-node-wrap.is-active,
+.file-tree-root:hover:not(:disabled),
+.file-tree-root:focus-visible,
+.file-tree-root.is-active {
+  background: rgba(13, 110, 253, .08);
+  outline: none;
+}
+
+.file-tree-node:focus-visible,
+.file-tree-toggle:focus-visible,
+.file-tree-select:focus-visible {
+  outline: none;
+}
+
+.file-tree-node-wrap.is-drop-target,
+.file-tree-root.is-drop-target {
+  background: rgba(13, 110, 253, .14);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
+}
+
+.file-tree-node-wrap.is-selected .file-tree-select {
+  background: #0d6efd;
+  color: #fff;
+}
+
+.file-tree-children {
+  display: grid;
+  gap: 1px;
+}
+
+.file-list-panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  background: var(--panel);
+}
+
+.file-list-sticky {
+  flex: 0 0 auto;
+  z-index: 2;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.file-breadcrumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 32px;
+  padding: 10px 14px 6px;
+}
+
+.file-breadcrumb,
+.file-breadcrumb-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.file-breadcrumb {
+  border: 0;
+  background: transparent;
+  color: var(--text-strong);
+  cursor: pointer;
+  font-weight: 800;
+  padding: 4px 6px;
+  border-radius: 7px;
+}
+
+.file-breadcrumb:hover:not(:disabled),
+.file-breadcrumb:focus-visible {
+  background: var(--panel);
+  outline: none;
+}
+
+.file-search-row {
+  display: grid;
+  grid-template-columns: auto minmax(180px, 1fr) auto auto auto;
+  gap: 18px;
+  align-items: center;
+  padding: 4px 0 10px 14px;
+}
+
+.file-list-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 8px 14px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-drop-target {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  transition: background-color .16s ease, box-shadow .16s ease;
+}
+
+.file-list-drop-target.is-active,
+.file-list-drop-target.is-drop-target {
+  background: rgba(13, 110, 253, .05);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .22);
+}
+
+.file-list-table {
+  min-width: 760px;
+}
+
+.file-list-table-head,
+.file-list-row {
+  display: grid;
+  grid-template-columns: minmax(280px, 1fr) 120px 240px;
+  gap: 12px;
+  align-items: center;
+}
+
+.file-list-table-head {
+  padding: 10px 14px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.file-list-table-head button {
+  justify-self: start;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  padding: 0;
+  text-transform: inherit;
+}
+
+.file-list-table-head button:hover,
+.file-list-table-head button:focus-visible {
+  color: var(--text-strong);
+  outline: none;
+}
+
+.file-list-row {
+  min-height: 58px;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--line);
+  cursor: default;
+  user-select: none;
+}
+
+.file-list-row:focus-visible {
+  outline: 2px solid rgba(13, 110, 253, .35);
+  outline-offset: -2px;
+}
+
+.file-list-row:hover,
+.file-list-row.is-selected {
+  background: rgba(13, 110, 253, .07);
+}
+
+.file-list-row.is-drop-target {
+  background: rgba(13, 110, 253, .13);
+  box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .28);
+}
+
+.file-list-name-cell {
+  min-width: 0;
+}
+
+.file-list-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  max-width: 100%;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+.file-list-name > span {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.file-list-name strong,
+.file-list-name small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-list-name small {
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-row-icon {
+  color: var(--muted);
+  flex: 0 0 auto;
+}
+
+.folder-row .file-row-icon {
+  color: #b6791d;
+}
+
+.file-row-tail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.file-list-empty {
+  padding: 36px 20px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.file-context-menu {
+  position: fixed;
+  z-index: 110;
+  display: grid;
+  min-width: 190px;
+  overflow: hidden;
+  border: 1px solid var(--line-dark);
+  border-radius: 12px;
+  background: var(--panel);
+  box-shadow: var(--shadow-popover);
+  padding: 6px;
+}
+
+.file-context-menu button {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 9px 10px;
+  text-align: left;
+}
+
+.file-context-menu button:hover,
+.file-context-menu button:focus-visible {
+  background: rgba(13, 110, 253, .08);
+  outline: none;
+}
+
+.file-context-menu button.danger {
+  color: var(--danger-text);
+}
+
+
+.file-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 22px;
+  background: rgba(28, 25, 22, .38);
+}
+
+.file-dialog {
+  width: min(620px, 100%);
+  max-height: min(720px, calc(100vh - 44px));
+  overflow: auto;
+  border: 1px solid var(--line-dark);
+  border-radius: 16px;
+  background: var(--panel);
+  box-shadow: var(--shadow-popover);
+}
+
+.file-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 15px 18px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-soft);
+}
+
+.file-dialog-header h3,
+.file-dialog-header .file-dialog-title {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 18px;
+}
+
+.file-dialog-header button {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 26px;
+  line-height: 1;
+}
+
+.file-dialog-body {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+}
+
+.file-upload-drop-zone {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  min-height: 170px;
+  border: 1px dashed var(--line-dark);
+  border-radius: 14px;
+  background: var(--panel-soft);
+  color: var(--muted);
+  text-align: center;
+}
+
+.file-upload-drop-zone.is-active {
+  border-color: #0d6efd;
+  background: rgba(13, 110, 253, .08);
+}
+
+.field-error {
+  color: var(--danger-text);
+  font-weight: 700;
+}
+
+.inline-link-button {
+  justify-self: start;
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  padding: 0;
+  text-align: left;
+}
+
+.inline-link-button:hover,
+.inline-link-button:focus-visible {
+  text-decoration: underline;
+  outline: none;
+}
+
+
+.file-search-row .toggle-switch-row {
+  margin: 0;
+  white-space: nowrap;
+}
+
+.file-folder-selector {
+  display: grid;
+  gap: 2px;
+  max-height: 290px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-folder-selector-node {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 8px 10px;
+  text-align: left;
+}
+
+.file-folder-selector-node span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-folder-selector-node:hover:not(:disabled),
+.file-folder-selector-node:focus-visible,
+.file-folder-selector-node.is-selected {
+  background: rgba(13, 110, 253, .09);
+  outline: none;
+}
+
+.file-folder-selector-node.is-selected {
+  color: var(--text-strong);
+  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .25);
+}
+
+.file-folder-selector-empty {
+  padding: 6px 10px 2px;
+}
+
+.file-folder-selector-children {
+  display: grid;
+  gap: 2px;
+}
+
+@media (max-width: 1050px) {
+  .file-manager-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .file-tree-panel {
+    max-height: 260px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .file-list-table-head {
+    display: none;
+  }
+
+  .file-list-table {
+    min-width: 0;
+  }
+
+  .file-list-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .file-search-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.file-manager-shell.is-loading .file-tree-panel,
+.file-manager-shell.is-loading .file-list-panel {
+  filter: blur(1.5px);
+  pointer-events: none;
+  user-select: none;
+}
+
+.file-manager-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 35;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, .12);
+  backdrop-filter: blur(1px);
+}
+
+.file-conflict-summary {
+  display: grid;
+  gap: 3px;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-conflict-summary span {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.file-conflict-list {
+  display: grid;
+  gap: 8px;
+  max-height: 320px;
+  overflow: auto;
+}
+
+.file-conflict-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 140px minmax(180px, 1fr);
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel-soft);
+}
+
+.file-conflict-row > div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.file-conflict-row small,
+.file-conflict-row code {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-conflict-row small {
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .file-conflict-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.rename-preview-panel {
+  max-height: min(360px, 42vh);
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+.rename-preview-more {
+  display: block;
+  width: 100%;
+  border: 1px dashed var(--line-dark);
+  border-radius: 6px;
+  background: var(--panel-soft);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.rename-preview-more:hover,
+.rename-preview-more:focus-visible {
+  border-color: rgba(13, 110, 253, .45);
+  background: rgba(13, 110, 253, .08);
+  color: var(--text-strong);
+  outline: none;
+}