@mshuja288/aksuicore 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mshuja288/aksuicore",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "Shared UI components and templates for Ikssam applications",
   "license": "UNLICENSED",
   "type": "module",

package/src/patterns/RecordWorkspace.tsx

@@ -102,6 +102,48 @@ function defaultVisibleKeys<T>(columns: TableColumn<T>[]) {
   return columns.filter((column) => column.defaultVisible !== false).map((column) => column.key);
 }
 
+/** Shared across all RecordWorkspace tables (preview + side rail). */
+const WORKSPACE_CHROME_KEY = "aksui.workspace.chrome";
+
+type WorkspaceChrome = {
+  previewEnabled: boolean;
+  sideOpen: boolean;
+};
+
+function readWorkspaceChrome(): WorkspaceChrome {
+  if (typeof window === "undefined") {
+    return { previewEnabled: false, sideOpen: false };
+  }
+  try {
+    const raw = window.localStorage.getItem(WORKSPACE_CHROME_KEY);
+    if (!raw) {
+      return { previewEnabled: false, sideOpen: false };
+    }
+    const parsed = JSON.parse(raw) as Partial<WorkspaceChrome>;
+    return {
+      previewEnabled: Boolean(parsed.previewEnabled),
+      sideOpen: Boolean(parsed.sideOpen),
+    };
+  } catch {
+    return { previewEnabled: false, sideOpen: false };
+  }
+}
+
+function writeWorkspaceChrome(chrome: WorkspaceChrome) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(WORKSPACE_CHROME_KEY, JSON.stringify(chrome));
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+function filtersPrefsKey(columnPrefsKey: string | undefined) {
+  return columnPrefsKey ? `${columnPrefsKey}.filters` : undefined;
+}
+
 function readStoredColumnKeys(prefsKey: string | undefined, fallback: string[], allowed: Set<string>) {
   if (!prefsKey || typeof window === "undefined") {
     return fallback;
@@ -133,6 +175,48 @@ function writeStoredColumnKeys(prefsKey: string | undefined, keys: string[]) {
   }
 }
 
+function readStoredFilters(prefsKey: string | undefined, allowed: Set<string>): Record<string, string> {
+  if (!prefsKey || typeof window === "undefined") {
+    return {};
+  }
+  try {
+    const raw = window.localStorage.getItem(prefsKey);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {};
+    }
+    const next: Record<string, string> = {};
+    for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+      if (allowed.has(key) && typeof value === "string" && value.trim()) {
+        next[key] = value;
+      }
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+
+function writeStoredFilters(prefsKey: string | undefined, filters: Record<string, string>) {
+  if (!prefsKey || typeof window === "undefined") {
+    return;
+  }
+  try {
+    const trimmed: Record<string, string> = {};
+    for (const [key, value] of Object.entries(filters)) {
+      if (value.trim()) {
+        trimmed[key] = value;
+      }
+    }
+    window.localStorage.setItem(prefsKey, JSON.stringify(trimmed));
+  } 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);
@@ -330,7 +414,11 @@ export function RecordWorkspace<T>({
   importBusy?: boolean;
   /** Column checklist in the side rail. Default true. */
   showColumnPicker?: boolean;
-  /** Persist visible column keys in localStorage under this key. */
+  /**
+   * Persist visible column keys in localStorage under this key.
+   * Also persists filter values at `${columnPrefsKey}.filters`.
+   * Preview + side-rail open/collapsed use a shared key across all tables (`aksui.workspace.chrome`).
+   */
   columnPrefsKey?: string;
   /** Controlled visible column keys. */
   visibleColumnKeys?: string[];
@@ -350,9 +438,12 @@ export function RecordWorkspace<T>({
   const [internalVisibleKeys, setInternalVisibleKeys] = useState<string[]>(() =>
     readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys),
   );
-  const [filters, setFilters] = useState<Record<string, string>>({});
+  const filterStorageKey = filtersPrefsKey(columnPrefsKey);
+  const [filters, setFilters] = useState<Record<string, string>>(() =>
+    readStoredFilters(filterStorageKey, allowedKeys),
+  );
   const [sort, setSort] = useState<SortState | null>(null);
-  const [sideOpen, setSideOpen] = useState(false);
+  const [sideOpen, setSideOpen] = useState(() => readWorkspaceChrome().sideOpen);
   const [toolsDrawerOpen, setToolsDrawerOpen] = useState(false);
   const [downloadOpen, setDownloadOpen] = useState(false);
   const [bulkOpen, setBulkOpen] = useState(false);
@@ -361,7 +452,7 @@ export function RecordWorkspace<T>({
   const [bulkReport, setBulkReport] = useState<BulkImportResult | null>(null);
   const bulkFileInputRef = useRef<HTMLInputElement | null>(null);
   const [columnsOpen, setColumnsOpen] = useState(false);
-  const [previewEnabled, setPreviewEnabled] = useState(false);
+  const [previewEnabled, setPreviewEnabled] = useState(() => readWorkspaceChrome().previewEnabled);
   const [previewKey, setPreviewKey] = useState<string | number | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const [pageSize, setPageSize] = useState("15");
@@ -383,6 +474,10 @@ export function RecordWorkspace<T>({
     setInternalVisibleKeys(readStoredColumnKeys(columnPrefsKey, fallbackKeys, allowedKeys));
   }, [allowedKeys, columnPrefsKey, fallbackKeys, isControlled]);
 
+  useEffect(() => {
+    setFilters(readStoredFilters(filtersPrefsKey(columnPrefsKey), allowedKeys));
+  }, [allowedKeys, columnPrefsKey]);
+
   const resolvedVisibleKeys = useMemo(() => {
     const source = isControlled ? visibleColumnKeys! : internalVisibleKeys;
     const filtered = source.filter((key) => allowedKeys.has(key));
@@ -565,15 +660,25 @@ export function RecordWorkspace<T>({
   const previewTitle = previewItem && visibleColumns[0] ? cellText(visibleColumns[0], previewItem) : null;
 
   function changeFilter(key: string, value: string) {
-    setFilters((current) => ({ ...current, [key]: value }));
+    setFilters((current) => {
+      const next = { ...current, [key]: value };
+      writeStoredFilters(filterStorageKey, next);
+      return next;
+    });
     setPage(1);
   }
 
   function clearFilters() {
     setFilters({});
+    writeStoredFilters(filterStorageKey, {});
     setPage(1);
   }
 
+  function setSideOpenValue(open: boolean) {
+    setSideOpen(open);
+    writeWorkspaceChrome({ previewEnabled, sideOpen: open });
+  }
+
   function toggleSort(column: TableColumn<T>) {
     if (column.sortable === false) {
       return;
@@ -592,6 +697,7 @@ export function RecordWorkspace<T>({
 
   function setPreviewEnabledValue(enabled: boolean) {
     setPreviewEnabled(enabled);
+    writeWorkspaceChrome({ previewEnabled: enabled, sideOpen });
     setTooltip(null);
     if (!enabled) {
       setPreviewKey(null);
@@ -663,7 +769,7 @@ export function RecordWorkspace<T>({
               title="Columns"
               aria-label="Columns"
               onClick={() => {
-                setSideOpen(true);
+                setSideOpenValue(true);
                 setColumnsOpen(true);
               }}
             >
@@ -679,7 +785,7 @@ export function RecordWorkspace<T>({
               aria-label="Download"
               disabled={downloadBusy}
               onClick={() => {
-                setSideOpen(true);
+                setSideOpenValue(true);
                 setDownloadOpen(true);
               }}
             >
@@ -694,7 +800,7 @@ export function RecordWorkspace<T>({
               aria-label="Bulk entry"
               disabled={importBusy}
               onClick={() => {
-                setSideOpen(true);
+                setSideOpenValue(true);
                 setBulkOpen(true);
               }}
             >
@@ -707,7 +813,7 @@ export function RecordWorkspace<T>({
               className="ghost side-rail-icon"
               title="Show filters"
               aria-label="Show filters"
-              onClick={() => setSideOpen(true)}
+              onClick={() => setSideOpenValue(true)}
             >
               <FilterIcon />
               {activeFilterCount > 0 ? <span className="filter-badge">{activeFilterCount}</span> : null}
@@ -1158,7 +1264,7 @@ export function RecordWorkspace<T>({
             className="ghost side-rail-toggle"
             aria-expanded={sideOpen}
             title={sideOpen ? "Collapse" : "Expand"}
-            onClick={() => setSideOpen((open) => !open)}
+            onClick={() => setSideOpenValue(!sideOpen)}
           >
             <ChevronIcon open={sideOpen} />
             {sideOpen ? <span>Collapse</span> : null}

package/src/primitives/Dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import type { ReactNode } from "react";
+import type { MouseEvent, ReactNode } from "react";
+import { useEffect, useRef } from "react";
 import { Button } from "./Button";
 
 export function Dialog({
@@ -16,18 +17,42 @@ export function Dialog({
   children: ReactNode;
   wide?: boolean;
 }) {
+  const allowBackdropClose = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      allowBackdropClose.current = false;
+      return;
+    }
+
+    // Ignore the opening gesture so View/Update clicks cannot close the dialog immediately.
+    allowBackdropClose.current = false;
+    const timer = window.setTimeout(() => {
+      allowBackdropClose.current = true;
+    }, 0);
+
+    return () => window.clearTimeout(timer);
+  }, [open]);
+
   if (!open) {
     return null;
   }
 
+  function onBackdropMouseDown(event: MouseEvent<HTMLDivElement>) {
+    if (event.target !== event.currentTarget || !allowBackdropClose.current) {
+      return;
+    }
+    onClose();
+  }
+
   return (
-    <div className="dialog-backdrop" onClick={onClose}>
+    <div className="dialog-backdrop" onMouseDown={onBackdropMouseDown}>
       <div
         className={wide ? "dialog form-dialog" : "dialog"}
         role="dialog"
         aria-modal="true"
         aria-label={title}
-        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
       >
         <div className="dialog-head">
           <h2>{title}</h2>