@mshuja288/aksuicore 0.3.0 → 0.4.1

package/src/patterns/RecordWorkspace.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { useMemo, useState, useSyncExternalStore, type MouseEvent, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 import { createPortal } from "react-dom";
 import { Pagination } from "../primitives/Pagination";
 import { Select, type SelectOption } from "../primitives/Select";
@@ -13,6 +21,25 @@ function useIsClient() {
   );
 }
 
+/** Hover tooltips only on fine pointers (desktop). Touch / narrow layouts never get them. */
+function useHoverTooltipsEnabled() {
+  return useSyncExternalStore(
+    (onStoreChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {};
+      }
+      const media = window.matchMedia("(hover: hover) and (pointer: fine)");
+      media.addEventListener("change", onStoreChange);
+      return () => media.removeEventListener("change", onStoreChange);
+    },
+    () =>
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(hover: hover) and (pointer: fine)").matches,
+    () => false,
+  );
+}
+
 export type TableColumn<T> = {
   key: string;
   header: string;
@@ -23,11 +50,21 @@ export type TableColumn<T> = {
   /** When set, filter uses an exact-match Select instead of text contains. */
   filterOptions?: SelectOption[];
   filterPlaceholder?: string;
+  /** When false, column starts hidden. Default true. */
+  defaultVisible?: boolean;
+  /** Key sent to export APIs when different from `key` (e.g. PascalCase property name). */
+  exportKey?: string;
 };
 
 /** Formats supported by the shared table download control (matches akscore TableExport). */
 export type ExportDownloadFormat = "csv" | "xlsx" | "json";
 
+/** Column descriptors passed to `onDownload` (visible columns only). */
+export type ExportColumnRef = {
+  key: string;
+  header: string;
+};
+
 const EXPORT_FORMAT_OPTIONS: { format: ExportDownloadFormat; label: string }[] = [
   { format: "csv", label: "CSV" },
   { format: "xlsx", label: "Excel" },
@@ -39,6 +76,41 @@ type SortState = { key: string; direction: SortDirection };
 type DetailLine = { label: string; value: string };
 type TooltipState = { x: number; y: number; lines: DetailLine[] };
 
+function defaultVisibleKeys<T>(columns: TableColumn<T>[]) {
+  return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
+}
+
+function readStoredColumnKeys(prefsKey: string | undefined, fallback: string[], allowed: Set<string>) {
+  if (!prefsKey || typeof window === "undefined") {
+    return fallback;
+  }
+  try {
+    const raw = window.localStorage.getItem(prefsKey);
+    if (!raw) {
+      return fallback;
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) {
+      return fallback;
+    }
+    const keys = parsed.filter((entry): entry is string => typeof entry === "string" && allowed.has(entry));
+    return keys.length > 0 ? keys : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeStoredColumnKeys(prefsKey: string | undefined, keys: string[]) {
+  if (!prefsKey || typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(prefsKey, JSON.stringify(keys));
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
 function compareColumnValues<T>(column: TableColumn<T>, left: T, right: T) {
   const leftRaw = column.display ? column.display(left) : column.value(left);
   const rightRaw = column.display ? column.display(right) : column.value(right);
@@ -97,6 +169,14 @@ function ResetIcon() {
   );
 }
 
+function ColumnsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M4 4.5h3.5v11H4zM8.25 4.5h3.5v11h-3.5zM12.5 4.5H16v11h-3.5z" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
 function ChevronIcon({ open }: { open: boolean }) {
   return (
     <svg className={open ? "side-rail-chevron open" : "side-rail-chevron"} viewBox="0 0 20 20" aria-hidden="true">
@@ -124,6 +204,31 @@ function DownloadIcon() {
   );
 }
 
+function MoreIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="4.5" cy="10" r="1.5" fill="currentColor" />
+      <circle cx="10" cy="10" r="1.5" fill="currentColor" />
+      <circle cx="15.5" cy="10" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ToolsIcon() {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true">
+      <path
+        d="M11.5 3.5h5v5M16.2 3.8 10 10M8.2 5.2H3.8v11h11V12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function DetailList({ lines }: { lines: DetailLine[] }) {
   return (
     <dl className="record-detail-list">
@@ -154,6 +259,11 @@ export function RecordWorkspace<T>({
   onDownload,
   canDownload = true,
   downloadBusy = false,
+  showColumnPicker = true,
+  columnPrefsKey,
+  visibleColumnKeys,
+  defaultVisibleColumnKeys,
+  onVisibleColumnKeysChange,
   toolbar,
   form,
 }: {
@@ -170,30 +280,111 @@ export function RecordWorkspace<T>({
   onDelete?: (item: T) => void;
   canUpdate?: (item: T) => boolean;
   canDelete?: (item: T) => boolean;
-  /** When set, shows CSV / Excel / JSON download controls in the side rail. */
-  onDownload?: (format: ExportDownloadFormat) => void;
+  /**
+   * When set, shows CSV / Excel / JSON download controls.
+   * Second argument lists currently visible columns (exportKey ?? key).
+   */
+  onDownload?: (format: ExportDownloadFormat, columns: ExportColumnRef[]) => void;
   canDownload?: boolean;
   downloadBusy?: boolean;
+  /** Column checklist in the side rail. Default true. */
+  showColumnPicker?: boolean;
+  /** Persist visible column keys in localStorage under this key. */
+  columnPrefsKey?: string;
+  /** Controlled visible column keys. */
+  visibleColumnKeys?: string[];
+  /** Uncontrolled initial visible keys (defaults to columns with defaultVisible !== false). */
+  defaultVisibleColumnKeys?: string[];
+  onVisibleColumnKeysChange?: (keys: string[]) => void;
   toolbar?: ReactNode;
   /** Slot for Add/Update/View dialogs owned by the host app. */
   form?: ReactNode;
 }) {
-  const filterableColumns = columns.filter((column) => column.filterable !== false);
+  const allowedKeys = useMemo(() => new Set(columns.map((column) => column.key)), [columns]);
+  const fallbackKeys = useMemo(
+    () => defaultVisibleColumnKeys ?? defaultVisibleKeys(columns),
+    [columns, defaultVisibleColumnKeys],
+  );
+  const isControlled = visibleColumnKeys !== undefined;
+  const [internalVisibleKeys, setInternalVisibleKeys] = useState<string[]>(() =>
+    readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys),
+  );
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [sort, setSort] = useState<SortState | null>(null);
   const [sideOpen, setSideOpen] = useState(false);
+  const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
+  const [columnsOpen, setColumnsOpen] = useState(false);
   const [previewEnabled, setPreviewEnabled] = useState(false);
   const [previewKey, setPreviewKey] = useState<string | number | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const [pageSize, setPageSize] = useState("15");
   const [page, setPage] = useState(1);
+  const [actionsMenu, setActionsMenu] = useState<{
+    key: string | number;
+    item: T;
+    x: number;
+    y: number;
+  } | null>(null);
+  const actionsMenuRef = useRef<HTMLDivElement | null>(null);
   const isClient = useIsClient();
+  const hoverTooltipsEnabled = useHoverTooltipsEnabled();
+
+  useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
+  }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
+
+  const resolvedVisibleKeys = useMemo(() => {
+    const source = isControlled ? visibleColumnKeys! : internalVisibleKeys;
+    const filtered = source.filter((key) => allowedKeys.has(key));
+    return filtered.length > 0 ? filtered : fallbackKeys.filter((key) => allowedKeys.has(key));
+  }, [allowedKeys, fallbackKeys, internalVisibleKeys, isControlled, visibleColumnKeys]);
+
+  const visibleColumns = useMemo(() => {
+    const byKey = new Map(columns.map((column) => [column.key, column]));
+    return resolvedVisibleKeys.map((key) => byKey.get(key)).filter((column): column is TableColumn<T> => Boolean(column));
+  }, [columns, resolvedVisibleKeys]);
+
+  function setVisibleKeys(next: string[]) {
+    const unique = Array.from(new Set(next.filter((key) => allowedKeys.has(key))));
+    const safe = unique.length > 0 ? unique : fallbackKeys.filter((key) => allowedKeys.has(key));
+    if (!isControlled) {
+      setInternalVisibleKeys(safe);
+      writeStoredColumnKeys(columnPrefsKey, safe);
+    }
+    onVisibleColumnKeysChange?.(safe);
+  }
+
+  function toggleColumnVisible(key: string, checked: boolean) {
+    if (checked) {
+      if (resolvedVisibleKeys.includes(key)) {
+        return;
+      }
+      setVisibleKeys([...resolvedVisibleKeys, key]);
+      return;
+    }
+    if (resolvedVisibleKeys.length <= 1) {
+      return;
+    }
+    setVisibleKeys(resolvedVisibleKeys.filter((entry) => entry !== key));
+  }
+
+  function selectAllColumns() {
+    setVisibleKeys(columns.map((column) => column.key));
+  }
+
+  function resetColumns() {
+    setVisibleKeys(fallbackKeys);
+  }
+
+  const filterableColumns = visibleColumns.filter((column) => column.filterable !== false);
 
   const filtered = useMemo(() => {
-    const activeFilters = columns.filter((column) => column.filterable !== false);
     return items.filter((item) =>
-      activeFilters.every((column) => {
+      filterableColumns.every((column) => {
         const query = (filters[column.key] ?? "").trim();
         if (!query) {
           return true;
@@ -206,25 +397,27 @@ export function RecordWorkspace<T>({
         return text.toLowerCase().includes(query.toLowerCase());
       }),
     );
-  }, [items, filters, columns]);
+  }, [items, filters, filterableColumns]);
 
   const sorted = useMemo(() => {
     if (!sort) {
       return filtered;
     }
-    const column = columns.find((entry) => entry.key === sort.key);
+    const column = visibleColumns.find((entry) => entry.key === sort.key);
     if (!column || column.sortable === false) {
       return filtered;
     }
     const direction = sort.direction === "asc" ? 1 : -1;
     return [...filtered].sort((left, right) => compareColumnValues(column, left, right) * direction);
-  }, [filtered, sort, columns]);
+  }, [filtered, sort, visibleColumns]);
 
   const activeFilterCount = useMemo(
     () => filterableColumns.reduce((count, column) => count + ((filters[column.key] ?? "").trim() ? 1 : 0), 0),
     [filterableColumns, filters],
   );
 
+  const hiddenColumnCount = columns.length - visibleColumns.length;
+  const toolsBadgeCount = activeFilterCount + (hiddenColumnCount > 0 ? 1 : 0) + (previewEnabled ? 1 : 0);
   const showAll = pageSize === "all";
   const numericPageSize = showAll ? Math.max(sorted.length, 1) : Number(pageSize);
   const pageCount = showAll ? 1 : Math.max(1, Math.ceil(sorted.length / numericPageSize));
@@ -234,13 +427,54 @@ export function RecordWorkspace<T>({
   const showAdd = canAdd && Boolean(onAdd);
   const showDownload = Boolean(onDownload) && canDownload;
   const showFilters = filterableColumns.length > 0;
+  const showColumns = showColumnPicker && columns.length > 0;
   const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
+  const exportColumns: ExportColumnRef[] = visibleColumns.map((column) => ({
+    key: column.exportKey ?? column.key,
+    header: column.header,
+  }));
+  const canShowTooltip = hoverTooltipsEnabled && !previewEnabled && actionsMenu === null;
+
+  useEffect(() => {
+    if (actionsMenu === null) {
+      return;
+    }
+
+    function onPointerDown(event: globalThis.MouseEvent) {
+      if (actionsMenuRef.current && !actionsMenuRef.current.contains(event.target as Node)) {
+        setActionsMenu(null);
+      }
+    }
+
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [actionsMenu]);
+
+  useEffect(() => {
+    if (!toolsDrawerOpen) {
+      return;
+    }
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setToolsDrawerOpen(false);
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [toolsDrawerOpen]);
 
   function requestDownload(format: ExportDownloadFormat) {
     if (!onDownload || downloadBusy) {
       return;
     }
-    onDownload(format);
+    onDownload(format, exportColumns);
     setDownloadOpen(false);
   }
 
@@ -250,13 +484,13 @@ export function RecordWorkspace<T>({
   }
 
   function detailLines(item: T): DetailLine[] {
-    return columns.map((column) => ({
+    return visibleColumns.map((column) => ({
       label: column.header,
       value: cellText(column, item),
     }));
   }
 
-  const previewTitle = previewItem && columns[0] ? cellText(columns[0], previewItem) : null;
+  const previewTitle = previewItem && visibleColumns[0] ? cellText(visibleColumns[0], previewItem) : null;
 
   function changeFilter(key: string, value: string) {
     setFilters((current) => ({ ...current, [key]: value }));
@@ -299,6 +533,9 @@ export function RecordWorkspace<T>({
   }
 
   function showTooltip(item: T, event: MouseEvent) {
+    if (!canShowTooltip) {
+      return;
+    }
     const padding = 16;
     const width = 280;
     const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
@@ -306,6 +543,22 @@ export function RecordWorkspace<T>({
     setTooltip({ x, y, lines: detailLines(item) });
   }
 
+  function openRowActions(item: T, event: MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation();
+    setTooltip(null);
+    const key = rowKey(item);
+    if (actionsMenu?.key === key) {
+      setActionsMenu(null);
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const menuWidth = 168;
+    const menuHeight = 148;
+    const x = Math.min(Math.max(8, rect.right - menuWidth), window.innerWidth - menuWidth - 8);
+    const y = Math.min(rect.bottom + 6, window.innerHeight - menuHeight - 8);
+    setActionsMenu({ key, item, x, y });
+  }
+
   const summary =
     sorted.length === 0
       ? "0 records"
@@ -313,8 +566,320 @@ export function RecordWorkspace<T>({
         ? `1–${sorted.length} of ${sorted.length}`
         : `${start + 1}–${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
 
+  function renderToolsBody({ compactIcons }: { compactIcons: boolean }) {
+    if (compactIcons) {
+      return (
+        <div className="side-rail-icons">
+          <label className="side-rail-icon preview-check-icon" title="Preview">
+            <input
+              type="checkbox"
+              checked={previewEnabled}
+              onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+              aria-label="Preview"
+            />
+            <PreviewIcon />
+          </label>
+          {showAdd ? (
+            <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
+              <PlusIcon />
+            </button>
+          ) : null}
+          {showColumns ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Columns"
+              aria-label="Columns"
+              onClick={() => {
+                setSideOpen(true);
+                setColumnsOpen(true);
+              }}
+            >
+              <ColumnsIcon />
+              {hiddenColumnCount > 0 ? <span className="filter-badge">{hiddenColumnCount}</span> : null}
+            </button>
+          ) : null}
+          {showDownload ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Download"
+              aria-label="Download"
+              disabled={downloadBusy}
+              onClick={() => {
+                setSideOpen(true);
+                setDownloadOpen(true);
+              }}
+            >
+              <DownloadIcon />
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Show filters"
+              aria-label="Show filters"
+              onClick={() => setSideOpen(true)}
+            >
+              <FilterIcon />
+              {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+            </button>
+          ) : null}
+          {showFilters ? (
+            <button
+              type="button"
+              className="ghost side-rail-icon"
+              title="Reset filters"
+              aria-label="Reset filters"
+              disabled={activeFilterCount === 0}
+              onClick={clearFilters}
+            >
+              <ResetIcon />
+            </button>
+          ) : null}
+        </div>
+      );
+    }
+
+    return (
+      <div className="side-rail-body">
+        <div className="preview-check">
+          <input
+            type="checkbox"
+            checked={previewEnabled}
+            onChange={(event) => setPreviewEnabledValue(event.target.checked)}
+            aria-label="Preview"
+          />
+          <PreviewIcon />
+          <span aria-hidden="true">Preview</span>
+        </div>
+
+        {showAdd ? (
+          <button
+            type="button"
+            className="side-rail-add"
+            onClick={() => {
+              setToolsDrawerOpen(false);
+              onAdd?.();
+            }}
+          >
+            <PlusIcon />
+            <span>{addLabel}</span>
+          </button>
+        ) : null}
+
+        {showColumns ? (
+          <div className="side-rail-columns">
+            <button
+              type="button"
+              className="ghost side-rail-columns-toggle"
+              aria-expanded={columnsOpen}
+              onClick={() => setColumnsOpen((open) => !open)}
+            >
+              <ColumnsIcon />
+              <span>Columns{hiddenColumnCount > 0 ? ` (${visibleColumns.length}/${columns.length})` : ""}</span>
+            </button>
+            {columnsOpen ? (
+              <div className="side-rail-columns-panel" role="group" aria-label="Visible columns">
+                <div className="side-rail-columns-actions">
+                  <button type="button" className="ghost" onClick={selectAllColumns}>
+                    Select all
+                  </button>
+                  <button type="button" className="ghost" onClick={resetColumns}>
+                    Reset
+                  </button>
+                </div>
+                <div className="side-rail-columns-list">
+                  {columns.map((column) => {
+                    const checked = resolvedVisibleKeys.includes(column.key);
+                    const disableUncheck = checked && resolvedVisibleKeys.length <= 1;
+                    return (
+                      <label key={column.key} className="side-rail-column-option">
+                        <input
+                          type="checkbox"
+                          checked={checked}
+                          disabled={disableUncheck}
+                          onChange={(event) => toggleColumnVisible(column.key, event.target.checked)}
+                        />
+                        <span>{column.header}</span>
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showDownload ? (
+          <div className="side-rail-download">
+            <button
+              type="button"
+              className="ghost side-rail-download-toggle"
+              aria-expanded={downloadOpen}
+              disabled={downloadBusy}
+              onClick={() => setDownloadOpen((open) => !open)}
+            >
+              <DownloadIcon />
+              <span>{downloadBusy ? "Downloading…" : "Download"}</span>
+            </button>
+            {downloadOpen ? (
+              <div className="side-rail-download-formats" role="group" aria-label="Download format">
+                {EXPORT_FORMAT_OPTIONS.map((option) => (
+                  <button
+                    key={option.format}
+                    type="button"
+                    className="ghost side-rail-download-format"
+                    disabled={downloadBusy}
+                    onClick={() => requestDownload(option.format)}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {showFilters ? (
+          <div className="side-rail-filters">
+            <div className="filter-panel-head">
+              <h3>Filters</h3>
+              <button
+                type="button"
+                className="ghost filter-clear"
+                title="Reset filters"
+                aria-label="Reset filters"
+                disabled={activeFilterCount === 0}
+                onClick={clearFilters}
+              >
+                <ResetIcon />
+                <span>Reset</span>
+              </button>
+            </div>
+            <div className="filter-panel-stack">
+              {filterableColumns.map((column) => (
+                <label key={column.key}>
+                  {column.header}
+                  {column.filterOptions ? (
+                    <Select
+                      value={filters[column.key] ?? ""}
+                      options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
+                      onChange={(value) => changeFilter(column.key, value)}
+                      placeholder={column.filterPlaceholder ?? "All"}
+                    />
+                  ) : (
+                    <input
+                      value={filters[column.key] ?? ""}
+                      onChange={(event) => changeFilter(column.key, event.target.value)}
+                      placeholder={`Filter ${column.header.toLowerCase()}`}
+                    />
+                  )}
+                </label>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  function renderRowActions(item: T) {
+    const key = rowKey(item);
+    const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
+    const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
+    const hasActions = Boolean(onView || onUpdate || onDelete);
+    if (!hasActions) {
+      return null;
+    }
+
+    return (
+      <>
+        <div className="row-actions row-actions-desktop">
+          {onView ? (
+            <button type="button" className="ghost row-action" onClick={() => onView(item)}>
+              View
+            </button>
+          ) : null}
+          {onUpdate ? (
+            <button
+              type="button"
+              className="ghost row-action"
+              disabled={!updateAllowed}
+              title={updateAllowed ? "Update" : "Update is not available"}
+              onClick={() => onUpdate(item)}
+            >
+              Update
+            </button>
+          ) : null}
+          {onDelete ? (
+            <button
+              type="button"
+              className="ghost row-action danger"
+              disabled={!deleteAllowed}
+              title={deleteAllowed ? "Delete" : "Delete is not available"}
+              onClick={() => onDelete(item)}
+            >
+              Delete
+            </button>
+          ) : null}
+        </div>
+
+        <div className="row-actions row-actions-mobile">
+          <button
+            type="button"
+            className={actionsMenu?.key === key ? "ghost row-action-menu-trigger open" : "ghost row-action-menu-trigger"}
+            aria-haspopup="menu"
+            aria-expanded={actionsMenu?.key === key}
+            aria-label="Row actions"
+            onClick={(event) => openRowActions(item, event)}
+          >
+            <MoreIcon />
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  const actionsMenuItem = actionsMenu?.item;
+  const actionsUpdateAllowed = actionsMenuItem
+    ? canUpdate
+      ? canUpdate(actionsMenuItem)
+      : Boolean(onUpdate)
+    : false;
+  const actionsDeleteAllowed = actionsMenuItem
+    ? canDelete
+      ? canDelete(actionsMenuItem)
+      : Boolean(onDelete)
+    : false;
+
   return (
-    <div className="list-workspace" aria-label={title}>
+    <div className={toolsDrawerOpen ? "list-workspace tools-drawer-open" : "list-workspace"} aria-label={title}>
+      <div className="tools-mobile-bar">
+        <div className="tools-mobile-bar-start">
+          {showAdd ? (
+            <button type="button" className="tools-mobile-add" onClick={onAdd}>
+              <PlusIcon />
+              <span>{addLabel}</span>
+            </button>
+          ) : (
+            <p className="tools-mobile-title">{title}</p>
+          )}
+        </div>
+        <button
+          type="button"
+          className="ghost tools-mobile-toggle"
+          aria-expanded={toolsDrawerOpen}
+          aria-controls="aksui-tools-drawer"
+          onClick={() => setToolsDrawerOpen(true)}
+        >
+          <ToolsIcon />
+          <span>Tools</span>
+          {toolsBadgeCount > 0 ? <span className="filter-badge">{toolsBadgeCount}</span> : null}
+        </button>
+      </div>
+
       <div
         className={["list-body", sideOpen ? "side-open" : "", previewEnabled ? "preview-open" : ""]
           .filter(Boolean)
@@ -332,7 +897,7 @@ export function RecordWorkspace<T>({
               <table className="data-table">
                 <thead>
                   <tr>
-                    {columns.map((column) => {
+                    {visibleColumns.map((column) => {
                       const sortable = column.sortable !== false;
                       const active = sort?.key === column.key ? sort.direction : null;
                       return (
@@ -363,7 +928,7 @@ export function RecordWorkspace<T>({
                 <tbody>
                   {pageItems.length === 0 ? (
                     <tr>
-                      <td colSpan={columns.length + 1}>
+                      <td colSpan={visibleColumns.length + 1}>
                         <p className="hint table-empty">
                           {items.length === 0 ? empty : "No records match the current filters."}
                         </p>
@@ -372,60 +937,24 @@ export function RecordWorkspace<T>({
                   ) : (
                     pageItems.map((item) => {
                       const key = rowKey(item);
-                      const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
-                      const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
                       const selected = previewEnabled && previewKey === key;
                       return (
                         <tr
                           key={key}
                           className={selected ? "data-row selected" : "data-row"}
                           onMouseEnter={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
+                            showTooltip(item, event);
                             focusRecord(item);
                           }}
-                          onMouseMove={(event) => {
-                            if (!previewEnabled) {
-                              showTooltip(item, event);
-                            }
-                          }}
+                          onMouseMove={(event) => showTooltip(item, event)}
                           onMouseLeave={() => setTooltip(null)}
                           onClick={() => focusRecord(item)}
                         >
-                          {columns.map((column) => (
+                          {visibleColumns.map((column) => (
                             <td key={column.key}>{cellText(column, item)}</td>
                           ))}
                           <td className="actions-col" onClick={(event) => event.stopPropagation()}>
-                            <div className="row-actions">
-                              {onView ? (
-                                <button type="button" className="ghost row-action" onClick={() => onView(item)}>
-                                  View
-                                </button>
-                              ) : null}
-                              {onUpdate ? (
-                                <button
-                                  type="button"
-                                  className="ghost row-action"
-                                  disabled={!updateAllowed}
-                                  title={updateAllowed ? "Update" : "Update is not available"}
-                                  onClick={() => onUpdate(item)}
-                                >
-                                  Update
-                                </button>
-                              ) : null}
-                              {onDelete ? (
-                                <button
-                                  type="button"
-                                  className="ghost row-action danger"
-                                  disabled={!deleteAllowed}
-                                  title={deleteAllowed ? "Delete" : "Delete is not available"}
-                                  onClick={() => onDelete(item)}
-                                >
-                                  Delete
-                                </button>
-                              ) : null}
-                            </div>
+                            {renderRowActions(item)}
                           </td>
                         </tr>
                       );
@@ -461,7 +990,7 @@ export function RecordWorkspace<T>({
               {previewItem ? (
                 <DetailList lines={detailLines(previewItem)} />
               ) : (
-                <p className="preview-empty">Hover or click a row to preview its details here.</p>
+                <p className="preview-empty">Select a row to preview its details here.</p>
               )}
             </div>
           </aside>
@@ -478,161 +1007,99 @@ export function RecordWorkspace<T>({
             <ChevronIcon open={sideOpen} />
             {sideOpen ? <span>Collapse</span> : null}
           </button>
+          {sideOpen ? renderToolsBody({ compactIcons: false }) : renderToolsBody({ compactIcons: true })}
+        </aside>
+      </div>
 
-          {sideOpen ? (
-            <div className="side-rail-body">
-              <div className="preview-check">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-                <span aria-hidden="true">Preview</span>
-              </div>
-
-              {showAdd ? (
-                <button type="button" className="side-rail-add" onClick={onAdd}>
-                  <PlusIcon />
-                  <span>{addLabel}</span>
-                </button>
-              ) : null}
-
-              {showDownload ? (
-                <div className="side-rail-download">
-                  <button
-                    type="button"
-                    className="ghost side-rail-download-toggle"
-                    aria-expanded={downloadOpen}
-                    disabled={downloadBusy}
-                    onClick={() => setDownloadOpen((open) => !open)}
-                  >
-                    <DownloadIcon />
-                    <span>{downloadBusy ? "Downloading…" : "Download"}</span>
+      {isClient
+        ? createPortal(
+            <>
+              <button
+                type="button"
+                className={toolsDrawerOpen ? "tools-drawer-backdrop open" : "tools-drawer-backdrop"}
+                aria-label="Close tools"
+                tabIndex={toolsDrawerOpen ? 0 : -1}
+                onClick={() => setToolsDrawerOpen(false)}
+              />
+              <aside
+                id="aksui-tools-drawer"
+                className={toolsDrawerOpen ? "tools-drawer open" : "tools-drawer"}
+                aria-label="Workspace tools"
+                aria-hidden={!toolsDrawerOpen}
+              >
+                <div className="tools-drawer-head">
+                  <div>
+                    <p className="tools-drawer-kicker">Workspace</p>
+                    <h3>Tools</h3>
+                  </div>
+                  <button type="button" className="ghost tools-drawer-close" onClick={() => setToolsDrawerOpen(false)}>
+                    Close
                   </button>
-                  {downloadOpen ? (
-                    <div className="side-rail-download-formats" role="group" aria-label="Download format">
-                      {EXPORT_FORMAT_OPTIONS.map((option) => (
-                        <button
-                          key={option.format}
-                          type="button"
-                          className="ghost side-rail-download-format"
-                          disabled={downloadBusy}
-                          onClick={() => requestDownload(option.format)}
-                        >
-                          {option.label}
-                        </button>
-                      ))}
-                    </div>
-                  ) : null}
                 </div>
-              ) : null}
+                <div className="tools-drawer-body">{renderToolsBody({ compactIcons: false })}</div>
+              </aside>
+            </>,
+            document.body,
+          )
+        : null}
 
-              {showFilters ? (
-                <div className="side-rail-filters">
-                  <div className="filter-panel-head">
-                    <h3>Filters</h3>
-                    <button
-                      type="button"
-                      className="ghost filter-clear"
-                      title="Reset filters"
-                      aria-label="Reset filters"
-                      disabled={activeFilterCount === 0}
-                      onClick={clearFilters}
-                    >
-                      <ResetIcon />
-                      <span>Reset</span>
-                    </button>
-                  </div>
-                  <div className="filter-panel-stack">
-                    {filterableColumns.map((column) => (
-                      <label key={column.key}>
-                        {column.header}
-                        {column.filterOptions ? (
-                          <Select
-                            value={filters[column.key] ?? ""}
-                            options={[{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions]}
-                            onChange={(value) => changeFilter(column.key, value)}
-                            placeholder={column.filterPlaceholder ?? "All"}
-                          />
-                        ) : (
-                          <input
-                            value={filters[column.key] ?? ""}
-                            onChange={(event) => changeFilter(column.key, event.target.value)}
-                            placeholder={`Filter ${column.header.toLowerCase()}`}
-                          />
-                        )}
-                      </label>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : (
-            <div className="side-rail-icons">
-              <label className="side-rail-icon preview-check-icon" title="Preview">
-                <input
-                  type="checkbox"
-                  checked={previewEnabled}
-                  onChange={(event) => setPreviewEnabledValue(event.target.checked)}
-                  aria-label="Preview"
-                />
-                <PreviewIcon />
-              </label>
-              {showAdd ? (
-                <button type="button" className="ghost side-rail-icon" title={addLabel} aria-label={addLabel} onClick={onAdd}>
-                  <PlusIcon />
-                </button>
-              ) : null}
-              {showDownload ? (
+      {form}
+
+      {isClient && actionsMenu && actionsMenuItem
+        ? createPortal(
+            <div
+              ref={actionsMenuRef}
+              className="row-action-menu row-action-menu-portal"
+              role="menu"
+              style={{ left: actionsMenu.x, top: actionsMenu.y }}
+            >
+              {onView ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Download"
-                  aria-label="Download"
-                  aria-expanded={downloadOpen}
-                  disabled={downloadBusy}
+                  role="menuitem"
+                  className="ghost"
                   onClick={() => {
-                    setSideOpen(true);
-                    setDownloadOpen(true);
+                    setActionsMenu(null);
+                    onView(actionsMenuItem);
                   }}
                 >
-                  <DownloadIcon />
+                  View
                 </button>
               ) : null}
-              {showFilters ? (
+              {onUpdate ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Show filters"
-                  aria-label="Show filters"
-                  onClick={() => setSideOpen(true)}
+                  role="menuitem"
+                  className="ghost"
+                  disabled={!actionsUpdateAllowed}
+                  onClick={() => {
+                    setActionsMenu(null);
+                    onUpdate(actionsMenuItem);
+                  }}
                 >
-                  <FilterIcon />
-                  {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
+                  Update
                 </button>
               ) : null}
-              {showFilters ? (
+              {onDelete ? (
                 <button
                   type="button"
-                  className="ghost side-rail-icon"
-                  title="Reset filters"
-                  aria-label="Reset filters"
-                  disabled={activeFilterCount === 0}
-                  onClick={clearFilters}
+                  role="menuitem"
+                  className="ghost danger"
+                  disabled={!actionsDeleteAllowed}
+                  onClick={() => {
+                    setActionsMenu(null);
+                    onDelete(actionsMenuItem);
+                  }}
                 >
-                  <ResetIcon />
+                  Delete
                 </button>
               ) : null}
-            </div>
-          )}
-        </aside>
-      </div>
-
-      {form}
+            </div>,
+            document.body,
+          )
+        : null}
 
-      {isClient && tooltip && !previewEnabled
+      {isClient && tooltip && canShowTooltip
         ? createPortal(
             <div className="record-tooltip" style={{ left: tooltip.x, top: tooltip.y }} role="tooltip">
               <p className="record-tooltip-title">{title}</p>